ICON DESIGN: Use the golden ratio to create striking icon sets.

1. Intro: Hey bird one on Brian White, the founder. Brian White Design. I live with my family in Lawrence, Kansas, and I've been designing icons and logos for over 20 years. I want to share some tips and tricks today to help you ramp up your design game by utilizing the golden ratio for scale Spacey and other choices, I'll show you how to quickly make icons at work is a complete system will use an easy scale method that takes the guess. Work out of spacing and sizing. This beginner class will take you through three complete icon builds one deconstruction and give you the tools to make your own icon set. I look forward to seeing you in there. 2. Setup and Golden Ratio cheat sheet: so looking at this cactus, you can see quickly that there's a rhythm and a rhyme to it. There's a math proportion to it that's perfect. Same here even more. Um, you see the specific curves. So what we're going to do is get into what is the golden ratio and how does it work? So we're going to set up our document, and basically, we're gonna float this this icon set on and just hide the art art boards. So I usually set this at, like, 252,500. But right now we're gonna just hide the art boards and just float with it. So the ratio. 1.180 whatever is a plus B the ratio of a to be together. It's 1.18 So eight times 1.618 is a plus B, that total. So we're going to just chop it off and use that 1.6180 in our multiplication. So now you can kind of go back and see quickly that there's this times this a plus eight times 1.618 I need in front of me 1.6180 It really shows, you know, in in nature. So what I've done is set up these preset circles. So what I've done is we have a 13 times 1.618 is 21 so on. So you can get a sense of if you've got 13 and 21 together, that when you see it together it's the same width as 34. Same with 89. And, um so it's 34. 55. That with is 89. So I've done is set up all of these pre pre set up for you to make it easier just to start and set up your your spacing. So we start with 13 2134 55 89 1 44 to 33 3 77 6 10 and now 3 1987 So this is a really nice set to work with. And what's fun is I'm gonna show you how you start simple with this certain ratio with the circle, then goto like a simple heart and then more detailed as we go forward. But these are all basic icon sets, and we were working with spacing and using these golden ratios to help us decide what to do . So even in organic shapes like hand and yes, a fire will be fun. So let's dive in and jump into the next section, where we'll start with this simple circle one and the heart. 3. Building a heart icon: let's jump in and get started with this heart. So what we're going to do is look at some of these golden ratio icons. Any are not icons. These numbers and these air just presets that just make it a little bit easier for you to get started. You can use anything, but I just I like this set. It works really well. Um, so I'm gonna start with 2 33 and to make a heart, you know, obviously you have the top two rounded areas, some in a use option tool toe hold down and duplicate an Intersect. And one thing already noticed, as I already took it out of the top. And I like to just keep a full set here. And when you when you click and hold in drag with option, then you make another one. So I just like to keep those up here and there. Just simple, You know, they have one point black stroke, but it's easy toe work with. So basically were building it with this spacing in mind. So but obviously, this is a weird kind of like to rounded heart shape. So what we want to do is get get something in the middle. Um, that will work. And so, uh, what will happen is if you intersect this on the other side, then you start to get that nice heart shape. So I'm gonna use this this small 13 as a as a base. Just, uh uh So we'll have a rounded heart all the way with a nice, rounded tip as well. So to get this this bottom part portion of the heart, what I like to do is is do you hold shift and you draw wine? Then you can get a nice 45 degree angle and also in a little bit and and get this really tightened up. And the reason why we do that is for using shaped builder tool. You really need them toe walk onto the lines correctly. So we're gonna duplicate this. We're gonna copy it. Command C Command F is unexamined replica of it duplicate, but it puts it in the same spot, and then we're going to transform and then reflect it. So just vertical right now. And so now we've got this nice the perpendicular angle. So if you hold shift while you're dragging it, will it will stay and stick on that that line. And so we're going to intersected and drag this down and intersected, and so you can start to see the heart shape. So it's pretty easy, and quickly you get this nice spacing with the golden ratio. So what we're gonna do is hit command why? Or or? And it will go to your you're outlines. And so we've got our outlines. What we want to do is zoom in and check if these air perfectly on the line, which they're not. So what we're gonna do is just bring this down and make sure it's aligned in the center and right on those lines. It's really important. It's kind of, um, anal, but you have to do it just to get it there, and I'll show you why in just a second. So this one is a little tricky in my after zoom in a little bit, but once that's on that path, that's correct. So I'm I'm zooming and quite a bit like way past 1200% so you can see that there's this tiny little gap here and you want to get rid of it. This is a little bit time consuming, but you can move pretty quick since this is a really simple shape. So now that we've got these, I'm going to go back hit command. Why? It's pretty similar. It doesn't matter. But this is gonna blow your mind if you're not used to this at all, But use a shape builder tool. So what you do is you select this area and if you want oh, like, change things or try different things I'm always like with logos or icons. Drag option, drag a version of it. If it doesn't work, then you got it, and you can mess with the shapes if you want a sharp edge or whatever. So I'm gonna select these really quick and then click the shape builder tool, which is right here with the two circles, and you can see it where it's going to find these areas. But since this was on the line, we have a perfect area, so I'm going to just draw my lying and boom, you have a heart. It's pretty cool like that. So what we're going to do is just trim out thes sections and make sure that this round part went, went correct. Sometimes is the smaller area fails. He might need to back up a little bit and double check your lines that it's just perfect. So what's cool is now we can do all sorts of stuff with heart, and you've got a really nice heart shaped that space correctly. 4. Building a rotate icon and spacing tips and tricks: okay, lets keep going, and we'll create the icon that's rotating area with an inside circle. So even though it looks really simple, there are few spacing things you just want to watch for. So we're going to start with 377 and and I like to build the icons where I've already done them. I like them. I'm gonna set them aside and almost use it like a brand litmus test. Like where I have adjectives for a brand. I say, Is this fun? Is this unique? Is this whatever, and and basically what I'm doing with icons, is it Does it feel similar? Does it have similar shapes? And look at the spacing. Even though we're using this as a base to help us, we still need to make decisions based off the other icons. So I'll use a 1 44 in the middle. So get this centered and easy toe a line here like that. And so we want to to arrows going back to back. And what what we'll do is do a simple, uh, square and cut off the edge. But what we want to do is is think about, um Hey, uh, What size should these arrows be? And sometimes you can sketch like this where you're throwing out, uh, the the circles. So, like they're gonna encompass this size. So what we'll do is to just say we're gonna make a box rectangle and you just type in these numbers, so we're gonna do 1 44 by 1 44 So what we'll do is just take this area is the open selection and deleted. So this is our arrow. We're gonna test this to see if this is too big or if this is okay and I'm gonna rotate it to fit in this path, it looks a little too big. So what we can do, actually is from here is hold shift down on the Orlock and make sure they're locked. Shift will jump by 10 at a time. So we're just gonna jump down to 89 and that will work. So what we're gonna do is delete this one and we've got an 89 hero just spring it over here and plop it down. And then what we want to do is think about the spacing between the arrow and the next where it starts so you can actually come in and grab like a 34. Uh, right here. And what we'll do is go back to command. I are. Why not? I and then look at our spacing here and this. This is a little different one we're going to do. You want to make sure you're in the middle? It's not a big deal, but I mean, it's like if you wanna get really precise, get in the middle. Um, we're going to use the punching tool or the, um, where to go? The Pathfinder. I call it the punching tool, like minus front instead of the shape builder on this one. Since it's all going to be lines. So now what we're going to do is where are we gonna have this arrow? I mean, this seems pretty crazy Teoh to do all this just to get a rotating arrow icon. But the difference in all these icons is they're just They're, like, perfected with their there spacing and there location. So what we're gonna do is put this hero exactly in the center. Actually remember both of these at the same time and go back Well, I will just stay in this outlined section and get this hero right on the edge. Get this spacing. What's kind of nice is we're going to duplicate this, that we only have to build one. Okay? And so what we want to do is select this line here. Gonna get some spacing. We're gonna grab the 34 circle and drag it back here, and then I'm gonna select it. Hold, shift an option and give me back. So I'm gonna pull it so you'll get a sense of where we're at on the line. So what we want to do is create up a point right here too quickly. Get the shape. Correct. So that's close enough. I'm gonna make another one just to get rid of that. Okay. And if you select this line here, you can delete it on. We've got our space correctly. Okay, So I'm gonna come out of so hit command. Why, Okay. And so what we want to do is group this so command g, Okay. Okay. Before we get any further, I'm gonna zoom out and check check our lines, and I'm going to use the selection tool and copy our lines. Because sometimes, if you like. I like this. This stroke is 20 right now, and what we want to do is watch the spacing before we we do anything else. So we might need to trim off a little bit to match toe to make it fit correctly with the 20 points. So what we'll do is is trim it back just a little bit to make sure we're covering that 20 pixels almost there. So you could do that? Doesn't have to be perfect. It's just this will be get your I correct. So and and, uh, help with some of the spacing. Okay, so that's close enough. So what we're going to do is select our middle area. We want a guide to help duplicate this and put it on that side. So we have the rotation. Correct. So remember, used these as your cheat sheets. So the next one up was 3 77 We're gonna take this, copy it paste in place on just type 3 77 appear. And the kicker is you can do math in here, so it's like if if you're using a different scale, you can do 377 times, 1.68 and you'll get that spacing, especially if you're using other spaces and you and you get lost. And you're like, Oh, I want a spaces correctly then just do that. But what I'm trying to do is make it easier on you and keep these out so that you don't have to. It is just a nice tool set to use. So now that we've got our our guide that we're using, we're just gonna group thes copy and paste in place and hold shift down and you get it Snap rotation to 1 80 degrees and you're locking in place. So now we have our icon almost done something. Okay, so now we're almost done. What we're going to do is select this middle area and and then just eyedropper tool onto that red thicker outline. So I did this on purpose, basically, to show you that even though it looks simple, you need to space it correctly. So obviously this isn't working anymore either because of the space issues. So what we're going to do is move it and then clip this one as well. So once, once we've figured out the sizing of are this won't work either because it's going Teoh, I need a little bit more scale. So once we've figured out our spacing right here, then this is the correct one. So we just do that again where we copy, paste, hold shift and then we should be done now. I just wanted to show you, you know, when you're working with this spacing, you want to think about the inside and the outside of everything. Just so it's using that golden ratio principle. So now we're going to group it. A simple icon doesn't need to be that hard. I just wanted to show you some of the issues that can come up with it. But now we have two icons that look really similar. They spacing, and it's scientifically proven to be pleasing to your eye. 5. Building a book icon: a little bit harder one like I kind of made that other one harder just to show you some of the spacing issues and stuff like that. But I'll just try and keep moving a little bit faster. And you can kind of see how your sketch out these shapes with this golden ratio principle. So we'll use this 3 77 again and then hold option and click it. And what we'll do is maybe use a bigger one in the middle. Yeah, and we'll get all these perfect before. But you can, you know, drag it and then click this one and say a line, right, And it will snap to that, too. That's a kind of a quick, easy way to fix that abortion. So, um, you know what? Since we need the bottom of the book, you need to think about the sketch of it. We're gonna just drag this down and intersect it there so we'll get the nice round part of the book. Um, so this will be the top, and then this will be the bottom. So then we'll think about how to space this with with the edges. And like some of the elements in here, So Oops. Do you see what I did? 1 44 jumped down. I keep doing that. It's not a big deal if you can remember. Or if you remember it. 89 then times this by 1.68 and you you'll get close to 1 44 Um, okay, let's find the middle of this with line and then well, do you is get the get the edges of the book to So one thing that's nice is if you congrats this edge right here and pull up with a line if you snap right on the end. Well, I couldn't get it all the way. Um, that can be your Oops. I'm holding shift as I go. This will be your edge of the book and some hold option and get it there. So now we've got the center of the book. What we want is the inside page flap. Um, I don't know if you remember what a book looks like, but I'm kind of going off of a sketch that I have, But you know where you have your your lines like this, lines like that. And then you need your inside page area like this. So that's what I'm working on. And then even the outside area. So wow. Thankful for illustrator? Trying to draw out the mouse is not my favorite. So Okay, um I'm going, Teoh, use a smaller spacing right here. Just try this out. And then the space to the book, the interior book itself. Well, I think what we'll do is just make this the edge and then dio um uh, an outline right here. Okay, Now we're gonna look at the back of the book. What we need is a rectangle behind, uh, this area here so that it could be the basis of the book. But we need to space the sides out, so this will come up over it and the back will come out. So this is a good time to jump back to the other icons. Bring them close so we can see what's working, what's not. So bring the heart over, and it is hard to work with those big dick strokes. So we want to be careful not jump to that too quickly. But be thinking, you know, this was the base set that had the stroke of 34. So a lot of times I'll use the strokes of the golden ratio and it works even better. So that's a good thing to think through, especially if you're outlining it. Sometimes you don't outline icons so that they will skill correctly. But some of these I like to do because then you can keep the line spacing correct with the golden ratio that you've set up. So now that we have this, what we need is spacing guidelines. So we'll grab the 55 maybe just making this up. It's like go right now. So, um, looking at this for the edge, I think that will work. Good. Okay, so do you see what I just did? Don't forget to do that is to hold option when you go down when you drag it. All right, so here's the line will snap it. And we'll. What we'll do is we'll get it to intersect here, too. So then weaken space are rectangle to the size that it needs to be. So just copy and hold this. And then what you could do is to both those at the same time and down to there all right. So I think that worked. Good. It looks a little crazy right now, but you'll see what I'm doing in second. Um, so there's a good spot. What I'll do is duplicate this. Just in case we mess up looks kind of crazy, but it will still make sense in a second. So now what we need to do is create get this curve going with with a nice line in the middle, and so we'll get this page full. So to do that, what we do is we pulled this middle this line into the middle and intersected. That's right in the middle. And if you remember, we used the shape builder tool, but we have to select it first. So this is cool. Watch this. We'll get back. Okay, So what we need to do is we want this section to be the page and this section to be the page. So I'm gonna hold, shift and draw, Uh, and you've got your page do the same on that side. So you've got this really nice set up with the curves that are working well, and you can see it working, but you can have like, an inside page. I'm gonna keep this a little bit more simple. So I will use this spacing, I think, instead of the other one. And actually, this is a good point where you have layers and you might want to check with your your spacing with your with the size of your stroke. So what I'm gonna do this might get a little crazy. Is his eyedropper tool. Grab that stroke. Okay, Not too bad. And if you see this 34 pixel stroke, we wanna have a nice 34 pixel space right here. So I'm going to go back here and just type in 34 and then and now we're gonna hit the edge of the stroke. So then we've used this just to get the base of where it should be. But these air icons, you know, they're supposed to be just how you want him to look. So sometimes I'll just history as I'm going. So what I'm gonna do is set that this section two 34 and just gonna use this as a spacer. So yellow. Okay, space this down. So it should be 34 times three, if that makes sense. Uh, We're just doing this quick. So if you wanted to get really crazy, you could do that. Um, what I'm gonna do now is kind of weird, but I really want this to go underneath, so I'm gonna space this also, but I just wanted to touch some and eyeball it and space this correctly. Okay. Okay. So now we have the back of the book space correctly. It looks a little funky. It needs to have the rounded edges. So what we're gonna do is set this to the corner, round round, joined corner, and bump this up just a bit to catch that edge, and I think a little bit more. Yeah. And so now we need to get rid of this. So we'll just add a path. I had a path and leave this one select hold shift and lock it on that when it when it captures that edge. No, we have all this Steph around, but we'll just select the red and pull down. Yeah, that's looking cool. So we might want to bookmark. So if we have, you know, set 34 on our stroke and set the corner to round corner drag it out. Well, there, there you go, around in cabs So would do that and then obviously come back. And I think 34 is a good one right now. So using this with the back, uh, we will space it and they're pretty quick. There's all sorts of things you can do. It feels like this is too thick to me. It just feels like the boat is too much. So what we'll do this is a great tool is go down to 21 and let's slide in here. That's that's the thing with good icon sets. You have to jittery until it feels right to you or it won't feel right to your users. So we're gonna keep this slided option action Don't need to duplicate it, cause I'm gonna use it over there. Select this edge like that edge holding shift. All right, there we go. That feels good. And we forgot the little so we can just throw that over here and group it. Um, I'm gonna get rid of this because it will be a problem. Center that and then space that again. All right. And that feels good. So there's your book 6. Deconstruction of the fire icon and more: we're gonna look at the flame, the fire area, and I'm going Teoh deconstruct it because this is a basics icon class and I don't want it to be to a coming, but you can see this is how it created the plane and it looks a little crazy, but I'll show you really quickly how to get there. So we're going to use the to 33 3 77 And basically what I was doing was, and it's not perfect, but this will least get you to to see what what's going on and and how to build. So I'm gonna just go pretty quick. So what you want to do is use thes shapes to get the curves that you want. And the idea is that when you have a sketch to work from which I did before, you can see how I'm matching some of the shapes and the curves Teoh capture the outside of it. This this inside part what I like to do is build them separately so that it doesn't get in the way if that makes sense. So what, you dio Yeah, I'm overwhelming you, probably. But the idea is that You can use these as a guide to end do your own path, Tulis. Well, but with with these sets, you can remember you can do Were you selection and the shape builder tool and you can take away. So, like, if I want this curb right here. Oops, sorry. I can hold down shift and then just leave that groups. Sorry. So you get that curve and then this cut in here, you selected and go back to the shape builder tool there. And then you basically have your your outline. Although this this curve I did with the pen tool, But you couldn't see how you You start to get that nice, clear shape. So this one would be using the 2 33 And you have one there and one here and one here. And once you get this kind of blah about the way you can see how you can quickly chop it up with the the shape builder tool. So that's just a quick It looks pretty crazy, but it just makes it look so nice when when it's done and it just flows so well, take things for your time today. I'm looking forward to seeing the profits that you guys produced with using this skull generation of model on the scaling. And hopefully that Cici of Circle Sizes will really help you in building different concepts and logos. Stay tuned from my advanced icon class, where we're dealing with nine different icons going from sketching and procreate on iPad. Taking it into the computer effect arising it with this golden ratio principle and fudging it a little bit when it doesn't work, but thinking about how to do that and when to do that and you'll come up with a nice set of icons that you could use in all sorts of applications and scale them any way you want.