This tutorial is about learning how to look into things in order to be able to reproduce them. It’s the starting point into knowing how to use 2D vectors to make them look a bit more like 3D graphics which can be used in ui design, games, etc. I also talk a bit about the design concept of skeuomorphism. Hope you like it, and leave a comment, a like and subscribe. Thanks all!
I want to say that I appreciate the slower speed of your tutorials which makes it much easier to follow and take notes as I watch. Keep up the good work.
Using command+option+shift when resizing shapes sets the center of the shape as the anchor. That saves having to re-align your stacked shapes if you are adjusting sizes of elements.
Another fantastic video. I'm sure we all appreciate the time you take to make these. Such a help. And the faint birdsong in the background was lovely too.
Hi Isabel, press command+shift, and you avoid multiple align operations. With this combination, the drawing of each object starts from the center. Nice tutorial by the way.
You are a wonderful teacher, and this is a great tutorial! I got to learn about the trick, and also the concept of skeuomorphic graphics, which is a great topic for me to study further. Please keep making more such helpful videos and thanks for this one! You're awesome :)
Hi Andre!, thanks so much. Very true! And I tell you I won't do it cause I keep forgetting that is possible after years and years of doing copy paste with C and V hhhhh... But yes thanks a lot for the tip! I will try to adopt it from now on. And when you see me doing so, be sure it was thanks to you :D - Kiss!
Muy bueno en tutorial. La mayoria de las sobras y las luces se pueden lograr usando solo efectos. Si quieren hacer el efecto de la de media luna 11:40 pueden hacerlo con la crescent tool, solo necesitan hacerlo del mismo tamaño del circulo y aplicarle sus respectivos cambios. :)
Hola Carlos. Muchas gracias por tu comentario! Con respecto a lo que dices, yo personalmente recomiendo usar el método propuesto frente al crescent. En este caso, lo que comentas bien podría servir, ya que es un circulo y solo tendrías que tomar las medidas exactas para aplicarlo sobre el circulo donde corresponda. Sin embargo con el método usado aquí, al ser un objeto duplicado desde el objeto origen, las medidas ya están tomadas (te lo ahorras), y de no ser un circulo, sino una forma otra cualquiera, tenemos exactitud total entre la forma y medidas de dicho objeto y su efecto correspondiente (sombra externa, interna, glow, o lo que sea que apliquemos) Con respecto a aplicar opciones del panel efectos, también recomiendo su uso moderado y sopesado, personalmente. Desde luego lo uso mucho, claro, pero según el trabajo que estoy realizando hay veces que prefiero "hacer a mano" ciertos efectos, ya que quedan mucho más logrados sobre todo si se busca realismo. Un buen ejemplo presentado aquí sería lo que siempre indico: no usar contornos para dar ciertas profundidades, sino usar un objeto duplicado tras otro. En resumen, a veces son el camino, a veces mejor trabajar uno mismo dichos efectos. Mil gracias por tu aportación y opción a debate. Esto es lo que interesa :D - Besos!
Hola Isabel. La verdad ahi muchas formas de hacer el crescent. :) tu forma de hacerlo esta una, la que mencione es otra. Lo dije en funcion por si se necesita hacer cambios o modificaciones en el diseño. La forma que explique fue solo con el circulo y usando crescent tool, pero en caso que sea una forma irregular cualquiera, solo se necesita la linea de la forma, conviertes en curvas, luego con el node tool agregas nodos y borras (usar el comando delete) los que no necesitas, en ese momento ya tendrias la linea a la distancia deseada y cambiando la configuracion (presion en la opciones de linea) puedes hacer el crescent de esa otra forma, luego aplicas el efecto Gaussian Blur and Voila! se tiene un crescent totalmente editable para cualquier momento. :D El caso de los efectos, tampoco soy de usarlos de mucho porque consumen mucho recursos en una pc y si esta es lenta, Ufff una pesadilla! jajajaja PS. Soy nuevo con los programas de Affinity, pero como uso mucho illustrator y corel draw en el trabajo, se cuales atajos tomar. ;) Me gusta ver que nuevas tecnicas puedo aprender, claro y aportar las que ya se. Gracias y saludos. :D
Hola Carlos de nuevo. Estoy curiosa con respecto a lo que dices de cambios en el diseño. Con las booleanas no destructivas tienes opciones de cambios infinitos también, funcionan como en Illustrator, clicando ALT, por esto estoy un poco confundida y no sé si te refieres a algo más o diferente?. Aquí no las usé, pero la opción está ahí. Con respecto a lo que dices de formas irregulares convertidas a curva, no seé tampoco bien si nos referimos a lo mismo. Una forma irregular (me refiero a no primitivas, claro) ya son "curvas" de por sí , con lo que no se si comprendo bien lo que quieres decir? Muestro este ejemplo para explica mejor a que tipo de objeto me refiero: ua-cam.com/video/iY707BiM8dA/v-deo.htmlm20s - Este tipo de operación (sustracción booleana, en este caso destructiva), es el que usaría para hacer que la forma de un objeto siga a la de su objeto matriz, al que acompaña, sea como sombra, brillo, volumen o como en este caso, decoración adyacente). Es que creo que me he perdido un poco con el método que propones tratando de imaginarlo... disculpa. En cualquier caso, estoy muy interesada en saber como otros diseñadores trabajan lo mismo que yo por otros métodos. Beso!
Hola Isabel, aqui de nuevo. bueno aqui ua-cam.com/video/po8EWiOKIOc/v-deo.html podras ver lo que digo lo de hacer el crescent en diferentes frormas como te habia comentado desde el principio, solo es de seleccionar el modo mas conveniente, facil y rapido para hacer, personalmente me gusta el de la linea, creo que el numero 4. Es cierto como dices la formas que son necesarias convertir a curvas son las primitivas o basicas, las que dibujes sin ser primitiva no es necesario hacer la conversion! Disculpa debi aclararlo desde el principio. Espero ver mas videos de affinity Designer en tu canal. Saludos!!! Atte: Carlos :)
Buenas Carlos. Muchas gracias por tomarte la molestia de grabar el video. Bueno, efectivamente, las formas 1 y 3 son lo mismo que yo explicaba y recomiendo, una booleana destructiva y una booleana no destructiva (compound) que o bien consigues a través del menu Layer> Compound como tu hiciste en tu video, o bien como te indiqué yo, clicando ALT, al aplicar la operación desde la barra de herramientas superior. Ambos métodos son rápidos y efectivos a la hora de lograr estos efectos y lo ideal si las formas que trabajamos son irregulares. Las otras, tanto el crescent de primitivas del ejemplo 2 como el método 4 personalmente las encuentro menos precisas y más trabajosas, aunque al final, conseguirse, se consigue , ciertamente. My 2 cents, que dicen en inglés ;) Gracias de nuevo.
The motorbike was a joy to create. My idea is to be able to show you all the how to's, the principles and theories, the paths, mindset as you work and ways of looking, seeing and understanding. I learnt all this throughout the years, and would like to make a goo compendium about all of it.
@@isabel_aracama Ill be waiting patiently for that surely amazing video. Im trying really hard to see the gradients on objects every day and im slowly getting the hang of it.
Great tutorial! I am very new to Affinity, and also have very little experience with Illustrator either. I need to be able to replicate aircraft control panels for training material, and this is exactly what I needed to get me going - I now know how to make the buttons and dials look realistic! Subscribed, and I will be watching your other videos.
Great way of explaining this technique. I love the way you structured this video. I saw you using the star + smart copy + CMD J technique before. Could you make a quick tutorial only on this? :-)
Thanks Frank. Surely there will be more future tuts where we can see how to get advantage of these kind of techniques. What's most important is to be able to understand the possibilities and combinations in order to use them for your needs and see much further than what's in there for you. Sometimes I know what I need to do, but some other times I just have to manage and think outside of the box, as they say, in order to get what I need. This last skill is one of the best skills and assets I think anyone can have.
Yep, for some time actually, to be more precise. Trends come and go, and go old skeuomorphism is contributing its share to neumorphism, just as much as flat design. Thanks for the input Spludgeroo!
Thank you so much for your video:)) I just got program and don't know how to move just 1 or 2 pixel and can't seem to find in manual . Could you please tell me how to get to that or do you have video I could watch. And OMG I can't believe how good my knob looks so far not done LOL
Hi Diane - Thanks and glad to read you're learning. For your question: Go to Affinity Designer (top leftmost menu) > Preferences > Tools > Check the box for "nudge distance" making sure you set it to 1px and click enter (otherwise it won't apply the new input ). Done. Kiss!
I would love to but can't post a picture here. It was not perfect but, i never did any software like this before so I was excited how good it came out. I am now doing your neon lights LOL. Let me know how to show you picture I will. Thanks again
Hi Diane. Well you have different possibilities. Either send it to me by mail, which you can find in my about page in the channel or simply upload it in any image upload service, like imgbb.com/ - You don't even need to sign up. Thanks!
Hi Isabel, thank you for this great tutorial. I have a question about rotation snapping - you created the double star to rotate the LEDs around, but I realized you don't need this. The rotation already snaps at 15 degree increments without the star, and I can't get snapping to work for anything but that. Is there a way to actually snap to a star or any line? Perhaps it is a 10 pointed star instead of 12. Or even better, can you adjust the standard 15 degrees to something else? Gracias! EDIT: For others reading, Affinity Designer still doesn't allow changing snap rotation from 15 degrees. I guess the only way is to align by snapping to the star point (as Isabel shows), and then hope your rotation is close enough to the others since you can't snap from there. If it's off then the duplication will be misaligned a little more with each time.
I am having difficulty understanding the relationship between the number of points of the double star and how many degrees the dot rotates around the circle when command j is clicked. For example if you have a star with 20 points - how many degrees should the dot move. Hope I have explained my question. I am really enjoying your tutorials. Thanks.
Hi Susan! Thanks for your comment! So, regarding your issue, here's what I'd do. Clicking shift will make the angle rotate always by 15 degrees, which happens to be perfect when you have a 12 points (radius) star. Since this won't help you cause you now have a 20 points star, you won't be able to make it like in the example. So I'd exaplain how I'd solve this if I'd face your issue: Place the first dot aligned with the first radius in the star and place its rotation center to the very center of the double star as I did in the tutorial. Then, duplicate it via cmd+C, cmd+V and manually move it to the exact center of the next radius of the star. From here, you can smart copy all the next ones via cmd+J in an automated way like I did in the tutorial. In this case, they'll move now by 9 degrees, so the first dot will be at 0°, the second at -9°, third at -18° and so on. Check here the pic on how it'd look and do not hesitate to ask me if you still can't manage. Hope this helped! ibb.co/mgpqjH
Thanks so much for this, Isabel. I'm eager to try it! Question: when doing things like "angle", would it be advisable for me, a beginner, to take note of the degrees of the angle so all my elements are consistent? :)
Hi Ted. Not sure I understand what you mean exactly but if you mean the angle to position the light LEDs you can use the smart copy (Ctrl+J) which will automatically handle this for you. You mean that? Cheers and thanks for watching and commenting 🌹
Hi Isabel, great tutorial. I am trying to design a macOS icon in this way and this tutorial has really helped me lot. Though I am facing one problem with Affinity Designer - I am getting bands while working with Gradients. They are not smooth. Are you aware of any such problem and its solution? Thanks.
Hi Anagh. Let's see if this helps you, not 100% sure this could be your issue: Go to Preferences->Performance->Dither Gradients -> See if it's unchecked, and if so, check it. Screenshot here: ibb.co/dnw4tG As per what Matt (from Serif) posted in the forums back in the day: "The banding is caused because there aren’t enough discrete colour steps between the source and destination colours in the gradient, so each discrete step is effectively used a number of times over the length of the gradient, causing an apparent stepping (banding) to be visible." I leave here the original post, so it might help you further: forum.affinity.serif.com/index.php?/topic/2297-gradient-banding-exporting-to-pdf/ Hope it helps. Cheers.
Hi Anagh again, have you checked the forums? There might be someone else with the same issue as you and you can upload attachments to show exactly what's the issue. Alternatively, you could report it as a bug if it's the caseso they can look into it. I can say by my own experience they're are very effective and helpful. Sorry it didn't help. forum.affinity.serif.com/
Nice tutorial Isabel! For some strange reason the external highlight of the main diode is not fully following the round rectangle shape (i.e. it's wider than high, as you can see in your example). Tried several tricks (including not copying it from the dots and recreating it from scratch) and the only thing that works is to duplicate the shape several time, placing them under the original and giving them each a gaussian blur (the multiplication is to keep the brightness ; there's no intensity slider for gaussian blur). Strange that the highlight doesn't follow the shape... Thank you anyway for this great tutorial :)
Hi Charles. Thanks, as usual for your comment! I am not sure I understand where is it you're struggling. When you say highlight, are you referring to a glow effect? Sorry I got a bit lost trying to visualise your explanation :S
Hey Isabel. What I mean is that the external glow is roughly a round/oval shape, while you would expect it to follow the diode shape (in this case a rounded rectangle for the "sound level" or whatever the diode may stand for). Both extremities are accordingly "out of the glow". The longer/higher the radius of the effect the more it is visible (i.e. the more the glow is becoming a circle). That leaves me with 2 options : 1) a small radius to the outer glow, which isn't very much "glowing" or 2) use another method by duplicating the rounded rectangle, place it under and apply a gaussian blur effect to it. Seeing the tutorial was made using a previous version of Designer, would this be something (a programming glitch?) that only appeared in more recent versions???
Hi Charles. Maybe nothing to do with your issue, but, have you tried to check the little cog by the effect you are applying and see if changing the default blending mode in the new dialog that appears when clicking on it, makes it more visible? Some effects come with a screen blending mode as default and it is really hard to see them until you change it to normal.
Thank you Isabel. You're so helpful!. The mode was normal. What fixes a bit the issue (and the gradient issue Anagh Sharma was mentioning a year ago) is shifting from CMYK to RGB. This is pretty obvious, yet you may want to print the result and not necessarily use it on screen only. Here's the link to the Designer file (the layer is the top one) and I've set the values of the outer glow in such a way the effect is maximized : www.dropbox.com/s/foab9pk68j0i1fy/Knob_UI.afdesign?dl=0 Take care, always.
Hi Charles! Thanks for sending the file. Yes, I get it now perfectly! And yes, you are right. It doesn't follow the shape as expected once you want to go a bit further with the slider. I'd say it's a glitch. It couldb e certainly better. And also, I'd love for AD to have the possibility of stacking the same effect several times. This could minimise the problem. But it doesn't, and it is something that Adobe Fireworks did so well and I found so so useful! I hope they realise at some point at Serif and think about adding this feature. And as you pointed out, when things don't look perfect there is the need to think outside of the box as they say and apply a workaround. The best solution for me would be the one you mentioned duplicating and applying a gaussian blur to it. Kiss and thanks for the whole discussion. It is always good to talk to you. PS - your knob looks so good ;) Not sure why you need to learn from me! All I see you do, looks good :D
Quite fine and (awful) instructive as always, even though you lost a bit of your smile (and patience?) after "CMD/J" and "CMD/J" and "CMD/J" and "wääääääh"... But you retrieved it in the last minute... Good to hear that, Ms. Aracama. (Sometimes it is a hard job to help others, I know...) *grin*
hahaha Klaus, not at all... it's just a thing I sometimes do, I make noises and sounds.. hahaha... was just a joke. Doing these tutorials is really nice in any way I look at it.
Great tutorial, Isabel! Already subscribed and hooked to your channel. Keep up the good work! Can you share the source of the vector graphic you've used as a reference? I'm a complete newbie in graphic design and (working with) raster reference doesn't give me an idea about the techniques used in creating an illustration. It helps in visualizing to an extent but I'm not able to replicate the detailed look of the original.
Hi Rahul! Thanks for your comment! - I propose you one thing. Try to replicate the exercise first. If you want, you can send it to me when your're done. I will take a look at it and I will see what you've done and where your failing. We can take it then from there, what do you think?. Is this something that could work for you? I have no problem with sharing it with you, but I'd rather see where you're at after carefully following the tut. And I am sure this way you'll learn much more. You can send it to the email address that you will find in the about section of my channel. Kiss!
Wallace, thanks for your suggestion. it was already suggested and I use it a lot normally. I didn't use it here and would have been appropriate at least mentioning it, I agree. However, and specially for beginners, when I teach this action, I now show different ways to achieve it. For example simply having the global snapping on, you'll get the smart guides visual help highlights for centres. I realised in my live workshops that this last method is the least painful for beginners to use, as they sometimes struggle a bit getting the "grow from centre" to work right, due to the bounding box not showing always the scaling nodes. Not a bug, just hard-ish to get the action right for some when they use the combo keys, plus scale. Thanks for watching and for your contribution!
This tutorial is about learning how to look into things in order to be able to reproduce them. It’s the starting point into knowing how to use 2D vectors to make them look a bit more like 3D graphics which can be used in ui design, games, etc. I also talk a bit about the design concept of skeuomorphism. Hope you like it, and leave a comment, a like and subscribe. Thanks all!
I want to say that I appreciate the slower speed of your tutorials which makes it much easier to follow and take notes as I watch. Keep up the good work.
Using command+option+shift when resizing shapes sets the center of the shape as the anchor. That saves having to re-align your stacked shapes if you are adjusting sizes of elements.
Best tutorial on skeuomorphism on youtube, please post more of this stuff.
Thanks very much Vik. I will for sure, and getting comments like this even more ;)
Another fantastic video. I'm sure we all appreciate the time you take to make these. Such a help. And the faint birdsong in the background was lovely too.
Hahaha Steve, you noticed! Birds are so relaxing (this kind, not parrots hehehe) Thanks and a kiss.
Hi Isabel, press command+shift, and you avoid multiple align operations. With this combination, the drawing of each object starts from the center. Nice tutorial by the way.
Yes thanks very much! ... I didn't know the shortcut back then 😘
Very elegant and clean work.
Thank you Chris for letting me know what you think :)
You are a wonderful teacher, and this is a great tutorial! I got to learn about the trick, and also the concept of skeuomorphic graphics, which is a great topic for me to study further. Please keep making more such helpful videos and thanks for this one! You're awesome :)
Thanks a lot Taranbir! I feel really flattered.
Isabel Aracama :)
Amazing tutorial. subscribed. Please do more
Awesome tutorial! Thank you! ☺
Glad it was helpful!
Great video, and also loved that motorbike you created.
Thank you very much Gerald. You can learn to do it too.
With your excellent tutorials maybe, but I have a long journey ahead!
Surely shorter than it might look. Trust me.
Onwards and upwards then!
All the way! Like a crazy rocket hahaha..
Another excellent tut. Only one thing to mention. Instead of CMD-C and CMD-V - it's faster to use CMD-J to copy a layer.
Hi Andre!, thanks so much. Very true! And I tell you I won't do it cause I keep forgetting that is possible after years and years of doing copy paste with C and V hhhhh... But yes thanks a lot for the tip! I will try to adopt it from now on. And when you see me doing so, be sure it was thanks to you :D - Kiss!
Thanks for this tutorial. I am new to AFF Des and this is very useful
Glad you found it useful nataravi :)
@@isabel_aracama Can you do more such simple tutorials? I hate those fast forward videos as it is hard to follow.
Muy bueno en tutorial. La mayoria de las sobras y las luces se pueden lograr usando solo efectos. Si quieren hacer el efecto de la de media luna 11:40 pueden hacerlo con la crescent tool, solo necesitan hacerlo del mismo tamaño del circulo y aplicarle sus respectivos cambios. :)
Hola Carlos. Muchas gracias por tu comentario!
Con respecto a lo que dices, yo personalmente recomiendo usar el método propuesto frente al crescent. En este caso, lo que comentas bien podría servir, ya que es un circulo y solo tendrías que tomar las medidas exactas para aplicarlo sobre el circulo donde corresponda. Sin embargo con el método usado aquí, al ser un objeto duplicado desde el objeto origen, las medidas ya están tomadas (te lo ahorras), y de no ser un circulo, sino una forma otra cualquiera, tenemos exactitud total entre la forma y medidas de dicho objeto y su efecto correspondiente (sombra externa, interna, glow, o lo que sea que apliquemos) Con respecto a aplicar opciones del panel efectos, también recomiendo su uso moderado y sopesado, personalmente. Desde luego lo uso mucho, claro, pero según el trabajo que estoy realizando hay veces que prefiero "hacer a mano" ciertos efectos, ya que quedan mucho más logrados sobre todo si se busca realismo. Un buen ejemplo presentado aquí sería lo que siempre indico: no usar contornos para dar ciertas profundidades, sino usar un objeto duplicado tras otro. En resumen, a veces son el camino, a veces mejor trabajar uno mismo dichos efectos. Mil gracias por tu aportación y opción a debate. Esto es lo que interesa :D - Besos!
Hola Isabel. La verdad ahi muchas formas de hacer el crescent. :) tu forma de hacerlo esta una, la que mencione es otra. Lo dije en funcion por si se necesita hacer cambios o modificaciones en el diseño. La forma que explique fue solo con el circulo y usando crescent tool, pero en caso que sea una forma irregular cualquiera, solo se necesita la linea de la forma, conviertes en curvas, luego con el node tool agregas nodos y borras (usar el comando delete) los que no necesitas, en ese momento ya tendrias la linea a la distancia deseada y cambiando la configuracion (presion en la opciones de linea) puedes hacer el crescent de esa otra forma, luego aplicas el efecto Gaussian Blur and Voila! se tiene un crescent totalmente editable para cualquier momento. :D El caso de los efectos, tampoco soy de usarlos de mucho porque consumen mucho recursos en una pc y si esta es lenta, Ufff una pesadilla! jajajaja
PS. Soy nuevo con los programas de Affinity, pero como uso mucho illustrator y corel draw en el trabajo, se cuales atajos tomar. ;) Me gusta ver que nuevas tecnicas puedo aprender, claro y aportar las que ya se. Gracias y saludos. :D
Hola Carlos de nuevo. Estoy curiosa con respecto a lo que dices de cambios en el diseño. Con las booleanas no destructivas tienes opciones de cambios infinitos también, funcionan como en Illustrator, clicando ALT, por esto estoy un poco confundida y no sé si te refieres a algo más o diferente?. Aquí no las usé, pero la opción está ahí. Con respecto a lo que dices de formas irregulares convertidas a curva, no seé tampoco bien si nos referimos a lo mismo. Una forma irregular (me refiero a no primitivas, claro) ya son "curvas" de por sí , con lo que no se si comprendo bien lo que quieres decir? Muestro este ejemplo para explica mejor a que tipo de objeto me refiero: ua-cam.com/video/iY707BiM8dA/v-deo.htmlm20s - Este tipo de operación (sustracción booleana, en este caso destructiva), es el que usaría para hacer que la forma de un objeto siga a la de su objeto matriz, al que acompaña, sea como sombra, brillo, volumen o como en este caso, decoración adyacente). Es que creo que me he perdido un poco con el método que propones tratando de imaginarlo... disculpa. En cualquier caso, estoy muy interesada en saber como otros diseñadores trabajan lo mismo que yo por otros métodos. Beso!
Hola Isabel, aqui de nuevo. bueno aqui ua-cam.com/video/po8EWiOKIOc/v-deo.html podras ver lo que digo lo de hacer el crescent en diferentes frormas como te habia comentado desde el principio, solo es de seleccionar el modo mas conveniente, facil y rapido para hacer, personalmente me gusta el de la linea, creo que el numero 4. Es cierto como dices la formas que son necesarias convertir a curvas son las primitivas o basicas, las que dibujes sin ser primitiva no es necesario hacer la conversion! Disculpa debi aclararlo desde el principio. Espero ver mas videos de affinity Designer en tu canal. Saludos!!! Atte: Carlos :)
Buenas Carlos. Muchas gracias por tomarte la molestia de grabar el video. Bueno, efectivamente, las formas 1 y 3 son lo mismo que yo explicaba y recomiendo, una booleana destructiva y una booleana no destructiva (compound) que o bien consigues a través del menu Layer> Compound como tu hiciste en tu video, o bien como te indiqué yo, clicando ALT, al aplicar la operación desde la barra de herramientas superior. Ambos métodos son rápidos y efectivos a la hora de lograr estos efectos y lo ideal si las formas que trabajamos son irregulares. Las otras, tanto el crescent de primitivas del ejemplo 2 como el método 4 personalmente las encuentro menos precisas y más trabajosas, aunque al final, conseguirse, se consigue , ciertamente. My 2 cents, que dicen en inglés ;) Gracias de nuevo.
wow thank you so much for this! one of the best tutorials!
That motorbike graphic was fucking insane. You inspire me to learn the principles. Thank you.
Thanks I R. Tejera - Stay tuned cause many more principles will be coming. Serious ones!
The motorbike was a joy to create. My idea is to be able to show you all the how to's, the principles and theories, the paths, mindset as you work and ways of looking, seeing and understanding. I learnt all this throughout the years, and would like to make a goo compendium about all of it.
@@isabel_aracama Ill be waiting patiently for that surely amazing video. Im trying really hard to see the gradients on objects every day and im slowly getting the hang of it.
I followed your tutorial step by step....it took me...2 hours. HAHAH I just started using Affinity 2 days ago. Thank you
Think it took me much more to find out how to do these things... No youtube back then! hhh Glad it helped.
This helped me a lot! Tutorials like this would be awesome, if you ever find the time. Thanks for your help!
some of the best tuts on Affinity right here!! thank you!
Hi Graham. Thanks a lot for your comment and support! Any doubts, just ask me. Kiss!
Great tutorial! I am very new to Affinity, and also have very little experience with Illustrator either. I need to be able to replicate aircraft control panels for training material, and this is exactly what I needed to get me going - I now know how to make the buttons and dials look realistic! Subscribed, and I will be watching your other videos.
Very happy it helped you Andrew :)
Great tutorial! I enjoy realism design. This tutorial was extremely helpful!
Thank you very much!
Best tutorial
Once again, another great tutorial. Keep up the good work.
Thanks Carl, once more :)
really good strategic advice. thx
You probably know but I think shift and alt (maybe cmd) makes bigger but grows on all sides keeping centred
Thanks for leaving this tip Jon.
Isabel Aracama that’s ok
Great software this is
Great way of explaining this technique. I love the way you structured this video. I saw you using the star + smart copy + CMD J technique before. Could you make a quick tutorial only on this? :-)
Thanks Frank. Surely there will be more future tuts where we can see how to get advantage of these kind of techniques. What's most important is to be able to understand the possibilities and combinations in order to use them for your needs and see much further than what's in there for you. Sometimes I know what I need to do, but some other times I just have to manage and think outside of the box, as they say, in order to get what I need. This last skill is one of the best skills and assets I think anyone can have.
Thanyou very much, your good teaching !!!! keep doing, "Chalenge " full devices 3d "😅😊
you are awesome, very smart
i learned sooo much. thank you very much!!
Ooouuuh yeah! I like to read that!
Good Tutorial Thanks
Thank you for this tutorial
underrated
I agree 🤭
It's Neumorphism that's "in" now. Flat design with a subtle bit of skeuomrphism effect to make it pop.
Yep, for some time actually, to be more precise. Trends come and go, and go old skeuomorphism is contributing its share to neumorphism, just as much as flat design. Thanks for the input Spludgeroo!
Thank you so much for your video:)) I just got program and don't know how to move just 1 or 2 pixel and can't seem to find in manual . Could you please tell me how to get to that or do you have video I could watch. And OMG I can't believe how good my knob looks so far not done LOL
Hi Diane - Thanks and glad to read you're learning. For your question: Go to Affinity Designer (top leftmost menu) > Preferences > Tools > Check the box for "nudge distance" making sure you set it to 1px and click enter (otherwise it won't apply the new input ). Done. Kiss!
Btw - It'd be very glad if you'd show me your results... if possible ;)
I would love to but can't post a picture here. It was not perfect but, i never did any software like this before so I was excited how good it came out. I am now doing your neon lights LOL. Let me know how to show you picture I will. Thanks again
Hi Diane. Well you have different possibilities. Either send it to me by mail, which you can find in my about page in the channel or simply upload it in any image upload service, like imgbb.com/ - You don't even need to sign up. Thanks!
I sent it to your email address more practice for me but I am excited that it came out so well for the first time thanks to you:))
Hi Isabel, thank you for this great tutorial. I have a question about rotation snapping - you created the double star to rotate the LEDs around, but I realized you don't need this. The rotation already snaps at 15 degree increments without the star, and I can't get snapping to work for anything but that. Is there a way to actually snap to a star or any line? Perhaps it is a 10 pointed star instead of 12. Or even better, can you adjust the standard 15 degrees to something else? Gracias!
EDIT: For others reading, Affinity Designer still doesn't allow changing snap rotation from 15 degrees. I guess the only way is to align by snapping to the star point (as Isabel shows), and then hope your rotation is close enough to the others since you can't snap from there. If it's off then the duplication will be misaligned a little more with each time.
Is not the Bevel / Emboss Effect better for the softening the edges?
Hi Gary. Not really. I always avoid bevel and emboss and 3D effects if I can do it otherwise. I feel they provide poor results most of the times.
I am having difficulty understanding the relationship between the number of points of the double star and how many degrees the dot rotates around the circle when command j is clicked. For example if you have a star with 20 points - how many degrees should the dot move. Hope I have explained my question. I am really enjoying your tutorials. Thanks.
Hi Susan! Thanks for your comment! So, regarding your issue, here's what I'd do. Clicking shift will make the angle rotate always by 15 degrees, which happens to be perfect when you have a 12 points (radius) star. Since this won't help you cause you now have a 20 points star, you won't be able to make it like in the example. So I'd exaplain how I'd solve this if I'd face your issue: Place the first dot aligned with the first radius in the star and place its rotation center to the very center of the double star as I did in the tutorial. Then, duplicate it via cmd+C, cmd+V and manually move it to the exact center of the next radius of the star. From here, you can smart copy all the next ones via cmd+J in an automated way like I did in the tutorial. In this case, they'll move now by 9 degrees, so the first dot will be at 0°, the second at -9°, third at -18° and so on. Check here the pic on how it'd look and do not hesitate to ask me if you still can't manage. Hope this helped! ibb.co/mgpqjH
thanks Isabel. I understand and I will keep experimenting. You are so helpful and generous with your time.
thank you its help
Thanks so much for this, Isabel. I'm eager to try it! Question: when doing things like "angle", would it be advisable for me, a beginner, to take note of the degrees of the angle so all my elements are consistent? :)
Hi Ted. Not sure I understand what you mean exactly but if you mean the angle to position the light LEDs you can use the smart copy (Ctrl+J) which will automatically handle this for you. You mean that? Cheers and thanks for watching and commenting 🌹
Hi Isabel, great tutorial. I am trying to design a macOS icon in this way and this tutorial has really helped me lot. Though I am facing one problem with Affinity Designer - I am getting bands while working with Gradients. They are not smooth. Are you aware of any such problem and its solution? Thanks.
Hi Anagh. Let's see if this helps you, not 100% sure this could be your issue: Go to Preferences->Performance->Dither Gradients -> See if it's unchecked, and if so, check it. Screenshot here: ibb.co/dnw4tG
As per what Matt (from Serif) posted in the forums back in the day:
"The banding is caused because there aren’t enough discrete colour steps between the source and destination colours in the gradient, so each discrete step is effectively used a number of times over the length of the gradient, causing an apparent stepping (banding) to be visible."
I leave here the original post, so it might help you further: forum.affinity.serif.com/index.php?/topic/2297-gradient-banding-exporting-to-pdf/
Hope it helps.
Cheers.
Isabel Aracama Thanks for the reply. I had already seen that solution which unfortunately did not work for me.
Hi Anagh again, have you checked the forums? There might be someone else with the same issue as you and you can upload attachments to show exactly what's the issue. Alternatively, you could report it as a bug if it's the caseso they can look into it. I can say by my own experience they're are very effective and helpful. Sorry it didn't help. forum.affinity.serif.com/
Nice tutorial Isabel! For some strange reason the external highlight of the main diode is not fully following the round rectangle shape (i.e. it's wider than high, as you can see in your example). Tried several tricks (including not copying it from the dots and recreating it from scratch) and the only thing that works is to duplicate the shape several time, placing them under the original and giving them each a gaussian blur (the multiplication is to keep the brightness ; there's no intensity slider for gaussian blur). Strange that the highlight doesn't follow the shape...
Thank you anyway for this great tutorial :)
Hi Charles. Thanks, as usual for your comment! I am not sure I understand where is it you're struggling. When you say highlight, are you referring to a glow effect? Sorry I got a bit lost trying to visualise your explanation :S
Hey Isabel. What I mean is that the external glow is roughly a round/oval shape, while you would expect it to follow the diode shape (in this case a rounded rectangle for the "sound level" or whatever the diode may stand for). Both extremities are accordingly "out of the glow". The longer/higher the radius of the effect the more it is visible (i.e. the more the glow is becoming a circle). That leaves me with 2 options : 1) a small radius to the outer glow, which isn't very much "glowing" or 2) use another method by duplicating the rounded rectangle, place it under and apply a gaussian blur effect to it. Seeing the tutorial was made using a previous version of Designer, would this be something (a programming glitch?) that only appeared in more recent versions???
Hi Charles. Maybe nothing to do with your issue, but, have you tried to check the little cog by the effect you are applying and see if changing the default blending mode in the new dialog that appears when clicking on it, makes it more visible? Some effects come with a screen blending mode as default and it is really hard to see them until you change it to normal.
Thank you Isabel. You're so helpful!. The mode was normal. What fixes a bit the issue (and the gradient issue Anagh Sharma was mentioning a year ago) is shifting from CMYK to RGB. This is pretty obvious, yet you may want to print the result and not necessarily use it on screen only.
Here's the link to the Designer file (the layer is the top one) and I've set the values of the outer glow in such a way the effect is maximized : www.dropbox.com/s/foab9pk68j0i1fy/Knob_UI.afdesign?dl=0
Take care, always.
Hi Charles! Thanks for sending the file. Yes, I get it now perfectly! And yes, you are right. It doesn't follow the shape as expected once you want to go a bit further with the slider. I'd say it's a glitch. It couldb e certainly better. And also, I'd love for AD to have the possibility of stacking the same effect several times. This could minimise the problem. But it doesn't, and it is something that Adobe Fireworks did so well and I found so so useful! I hope they realise at some point at Serif and think about adding this feature. And as you pointed out, when things don't look perfect there is the need to think outside of the box as they say and apply a workaround. The best solution for me would be the one you mentioned duplicating and applying a gaussian blur to it. Kiss and thanks for the whole discussion. It is always good to talk to you. PS - your knob looks so good ;) Not sure why you need to learn from me! All I see you do, looks good :D
It looks like the same technique could be used for Neumorphism UI design.
That's right, same techniques apply for the creation of GUI elements in both.
Quite fine and (awful) instructive as always, even though you lost a bit of your smile (and patience?) after "CMD/J" and "CMD/J" and "CMD/J" and "wääääääh"...
But you retrieved it in the last minute... Good to hear that, Ms. Aracama. (Sometimes it is a hard job to help others, I know...) *grin*
hahaha Klaus, not at all... it's just a thing I sometimes do, I make noises and sounds.. hahaha... was just a joke. Doing these tutorials is really nice in any way I look at it.
Great tutorial, Isabel! Already subscribed and hooked to your channel. Keep up the good work!
Can you share the source of the vector graphic you've used as a reference? I'm a complete newbie in graphic design and (working with) raster reference doesn't give me an idea about the techniques used in creating an illustration. It helps in visualizing to an extent but I'm not able to replicate the detailed look of the original.
Hi Rahul! Thanks for your comment! - I propose you one thing. Try to replicate the exercise first. If you want, you can send it to me when your're done. I will take a look at it and I will see what you've done and where your failing. We can take it then from there, what do you think?. Is this something that could work for you? I have no problem with sharing it with you, but I'd rather see where you're at after carefully following the tut. And I am sure this way you'll learn much more. You can send it to the email address that you will find in the about section of my channel. Kiss!
Control + Shift to scale from center...
Yes.
hold Ctrl to transform in the center. Its painful to watch you having to align everytime you do some transformation
Wallace, thanks for your suggestion. it was already suggested and I use it a lot normally. I didn't use it here and would have been appropriate at least mentioning it, I agree. However, and specially for beginners, when I teach this action, I now show different ways to achieve it.
For example simply having the global snapping on, you'll get the smart guides visual help highlights for centres. I realised in my live workshops that this last method is the least painful for beginners to use, as they sometimes struggle a bit getting the "grow from centre" to work right, due to the bounding box not showing always the scaling nodes. Not a bug, just hard-ish to get the action right for some when they use the combo keys, plus scale.
Thanks for watching and for your contribution!
Too complicated.
You ain't wearing no tights? ua-cam.com/video/vtgmnhRQir4/v-deo.html