The Golden Ratio in Logo Design

1. Class Preview: the golden ratio plays a special part logo design. You may have heard of the term golden ratio, but in this class will give the origins and its use in design. I will show you how to construct a golden ratio spiral so you can apply your symbol letter or local design to the golden ratio. We will then tackle two projects, one assemble and one dealing with the letter. So are you ready to up your design game and learn this important aspect of design? Let's learn together. 2. Golden Ratio Basics: What is the golden ratio? Who? Why is it so important? Design Mathematicians in the Greek Age originally discovered the golden ratio by studying geometric patterns. A Greek mathematician by the number Euclid first mentioned, the golden ratio in his book includes elements his mathematicians kept noticing the repeat patterns in the geometric shapes. They said a human beauty and aesthetics are derived from the golden ratio. It said that the Pantheon and other major Greek buildings were designed with the golden ratio in mind, including their columns. The painter Salvador Dali was inspired by the golden ratio, but his painting, The Sacrament of the Last Supper, not only is his campus size adapted to the golden ratio, but also the window that you see behind Jesus in this photo in the Last Supper is also based on the golden ratio. You probably most associate the golden ratio with an invertebrate called in Nautilus, which grows in a pattern that is measurable almost perfectly to the golden ratio. Let's break down the golden ratio in simple terms so we can understand how to apply to design. Here's the ratio so forever everyone meter box. There's another box that's only 0.61 meters of its original height, and it makes up the other half of the ratio. This is the exact equation that we use, but don't worry about memorizing that you really just have to keep this simple ratio in mind. It is said that this ratio and things designed within these con strains are most aesthetically beautiful and feel balanced. Right now I'm in Adobe Illustrator, and I'm constructing my very own golden ratio according to Inches, which is the measurement I used in the United States. But the ratio still stays the same. It could be inches millimeters meters. It doesn't matter as long as the bottom boxes one inch and the top boxes 10.61 inches. So as long as they keep that point 61 ratio from comparing the bottom to the top. What I'm doing is I'm copying this top and bottom ratio, and I'm rotating it by 90 degrees and putting it in the smaller box. And then I'm copying and pasting, rotating that box 90 degrees and then putting that into the smaller box, and I'm copying and pasting once more, rotating at 90 degrees and putting it into the smaller box on to do that over and over until I get to the center point and something incredible starts toe happen. I rotate this entire rectangle onto its side and go horizontally, and I start to be I'm starting to be able to make this Nautilus circular type thing that you see classically associated with the golden ratio. It's called the golden ratio spiral, so that 0.61 to 1 ratio. It's also echoed in the National Geographic logo, with the one being on the length of the box, and the width is only 10.61 Link the sides of the one. So the ratios echoed perfectly here, in this example of a great gold Roshi ratio logo. When you Google Golden Ratio logo, you'll probably come up with a bunch of graphics that look like this, and it almost seems like a random array of circles. How is that anything close to what we just did, getting ready to show you how they came up with those circles and why are they that size? So remember the spiral we just created by replicating that ratio over and over into the smallest box? Well, if you create a circle from each one of the squares created By that ratio, you'll get a wide array of different sized circles. So we're gonna do that. Each one of the main boxes that was created and this is taking the rectangle applied golden ratio and make it applied to a circular fashion. And this is what we're gonna be using in our logo design process with the golden ratio. So now what we did is we applied it the golden ratio to a circular fashion. We're left with these wide array of circles. So now we're gonna go ahead and center, align them, and each one of these is only 10.61 the size of the previous circle. So I'm just going to my line panel on illustrator and doing center line all the way across the board until I have almost a perfect target. Let's see how this Pepsi logos was inspired by the golden ratio circles we just created. They took one of the larger ones and one of the medium to smaller size pair them together, and they were able to come up with some interesting curves by overlapping those two circles . If this all seems a little overwhelming. Don't worry. Go back and re watch this video in creature own golden ratio. Go ahead and create this squares, and then you'll be able to create that spiral, remove the spiral and then drilled circles in each one of the boxes to create your circles and then align them like I just did. And that will be all you need for the golden ratio to apply toe logos and also layout design. So in the next video, we're gonna be able to go over a bird logo and how I apply the circular gold ratio to create curves and to help the local be stronger. 3. Adapting a Symbol to The Golden Ratio: Okay, so we're gonna apply the golden ratio to this poorly drawn, clobbered object. Kind of distinct kind of the basic outlines. And that's what you need to do to get started. Golden ratio is it's not gonna design it for you. You design the basic symbol, and then you can start to apply that shape to the golden ratio to make it more uniform and appealing. So I have this basically all shape I drew really quickly, and I'm gonna conform this to the circle, uh, golden ratio that we developed in the previous video. So I'm gonna send this on the bottom layer, and what I'm gonna do is instead of changing the size of the circle, I am not allowed to change the size of the circle because then the ratios will be off, so they'll stay the same. But I can adapt my drawing to the biggest curve. So this is kind of the biggest circular curve I'm seeing here. So I'm gonna make this go all the way out. The body conformed to the largest outside circle, so now I have a basis to make my neck shape. So you see this little bit that is not a part of that circle. This is we're gonna We're gonna go ahead and start to conform it to some of these circles, some conforming this shaped of the circle as best as I can. Okay, so I'm gonna go ahead and take some of these other circles and start toe help carve out our shape. You could take any size circle. Just don't change the size of the circle they need to stay with in relation to each other. Okay, so see how I adapted this circle. Go and zoom in. Because have this size circle here and you'll see how it's off a little bit on. Go ahead and adapt my drawing to conform to this circle. It's gonna look a lot better. I think that may have to add more anchor points or use the curvature tool to help me conform to the circle. There we go. Okay. I'm gonna keep doing the same thing over and over. It's finding circles that help give a shape, overlap circles to help find the shapes that we need to make. So how about this top of the neck? No. Was doing one step up circles. So let's grab this circle. No. Guess we'll need to stick with this one. And I want to make it bigger. I'm tempted to make it a little bit bigger, but I want to conform to the golden ratio. So what I'm gonna do is adapt the beak to this circle now. So these overlapping circles air giving us a lot of wonderful curbs and options. You notice how the head is forming out of the circle shapes. Really the same thing for the wings. You can use any size circle. Just don't change the size of the circle. We got a lot of circle options, so winds. Okay, let's see. That's good for wingspan. See if I can't get the bigger circle. Let's grab our biggest circle here. Let me go back once. If we can't get the curvature of the wing just right, maybe a right here don't sleep. We can't adapt that wing to that circle right there. And sometimes you may have to redraw. So let's do that. Let's redraw another shape here to make this wing conform that circle and let me bring that into the back object this little section and are bird weaken group those together. Send the backward again. Let's make this adapt to this bigger curve. This seems really complicated. It can be if you're doing a complex shaped like this, could be a little complicated. This is helping you get angles and circular curbs. That's really all it is. It's a tool. It's not something you have to use all the time and have to be precise. Um, it's a guide to help you find some curves that you wouldn't normally draw yourself. Uh, I'm gonna draw. I'm gonna copy this larger circle and make it a solid shape. Now, I'm gonna overlap it when I'm going to do as I'm gonna use the shape over tool to subtract that object from here. So I'm going to select the object I want to subtracted to. It's like the new circle on overlapping, grabbing my shape builder tool gonna hold down option and I go subtract. That's an easy way to subtract without having toe adjust all these little things here. Great. So now we're getting the shape for the wing. You see that? We got the shape for the head and underneath the head, Uh, let's see what else we can do here. This is copy and paste some of these original circles that we created and was gonna keep doing that until we get the right size. Remember, we can't really change the size of the circles without changing them all because will mess up the ratio. So I wonder if we can make cut out this tale and have the tail come down here. You know, we could create a lot of different shapes by overlapping these stick the big one. People can't overlap it and create a shape like about right there. So now it can cut that little section out because that'll that'll create a nice curve for us. So let's do the same thing we did before. Let's copy and paste this circle, make it a solid shape, and we're gonna select our bird, get our shape builder tool to get our subtraction option when we bring this shape up just a little bit, so that you have this intersecting line can actually probably take this. Bring it down. So it's overlapping, so it doesn't treat this All is one shapes. Let me select this object. Go ahead and subtract. There we go. That works great. It's treating it as one shape there for a while. I don't think I need that circle anymore. Although I do need it there to show where I cut it out. Some just copying and pasting. So you see how that cut makes the tail. This cut makes the body. This circle makes the head. The circle cuts out the neck. The circle goes on, creates the wing so you can create so many different combinations and create so many different types of bird shapes from all these different size circles. You have five or six different sized circles. You can create even more if he wanted to keep making them smaller and have little small curves that you can cut out. Let's see what we have here. We do one more thing. Make it sure I have all the nice curves that I want become. I think I'm good. We'll see what we have. Go and take our object, copy it and paste it the select all and delete all over circles. And I know there's some things that I'm gonna need to tweak here. Uh, just kind of some rough edges and certain things I wouldn't take the shape builder tool combined these objects. Now we have one object. Now I can go back and smooth this out. So when we went back and made a few small adjustments, but you can kind of see how we use those golden ratios. Circle versions to overlap and create are different curbs, and you just go one angle at a time. With graphic. You maybe already developed to help you adjust those curves. Our 1st 1 you've done. It's a little more of a complicated one, so probably should have done a more simple one. But listen can understand the rules of the golden ratio and how you can apply it to local design to get the kind of curves and, uh, movements on things that you just can't create all on your own. Sometimes you need a little help from mathematics. 4. Golden Ratio Applied to Lettering: So here I am an illustrator and I have our golden ratio that we drew out. And I'm gonna go ahead and create my circle version of the golden ratio so we can go ahead and get started with another version of a golden ratio logo. Something to take a stroke. Make it a different color, Really bright color. I'm just drawing my circles like, just like I did in the previous video, but I'm just gonna do it a little bit slower. So you guys can, um, understand how this works. So each square that I created when creating the golden ratio boxes I'm just gonna make a circle for each one. And this will keep all of the circles within. The golden ratio combines all relative the size in the golden ratio. We keep going till we get to the last box. You can create an infinite an infinite amount of circles. Um, but I'm just gonna kind of end it right. Go ahead and leave that. Go ahead and delete this or move it out to the side. And I'm just gonna center align all these guys right here's going across this panel doing a center alignment Here we go. So now we have the basic circles to create a golden ratio. So what I wanted to do for this when The last time I created a bird object. This time I want to do it with a letter. So you take the first letter of my last name just as an example, I m And let's play around with some font types to find a nice bold in. We could take outline, outline the m so we couldn't edit the M and make it our own. And we're gonna apply Flight two, the golden ratio using the circles we just created. So I located a really nice bold thought that we can outline and it's called primetime regular. So I'm just gonna right click and I'm gonna create outlines and we're gonna change this M significantly. So it's no longer recognize the blood respond Well, kind of become our own little mark. So here's our circles here, group these together good and drag knees across and we're gonna size r m. And I'm gonna put this in the background so I can kind of see the red lines overlay on top , and I'm going to reduce the stroke on these so I could see more detail and just do their transparency back a little bit. I don't want it to be so overpowering. I can't see the underlying em. Okay, so, center, align these, and I'm gonna apply the M to this most outer circle. Go ahead and size it up. So what I'm gonna do is I'm putting the corner here right here on the circle, and I'm gonna try to make it so that this lines up with this circle so these are aligned and up top. These points of the stub of the farm is lined, so I'm just a lining these up. It's about as close as you can. So there were applied it to the largest circle, and now it can kind of take our other circles. Let's go ahead and move these on group This move these center circles out gonna move do not change the size of the circles. So unless you change all of them at the same time, because then they'll go out of the ratio and will become a different. They won't. They'll no longer be that 0.61 ratio to each other. So if I want to change the size of all of this. I need to do them all at the same time and they'll all be in the golden ratio together. I can't take this one circle and make it smaller and then move it around because then I lose the ratio one time shift thes and we keep this outer circle since we were already starting to use that as our guide. So I'm gonna take what I think is the shape, and I'm gonna start to apply it to some of these rounder areas. I'm gonna make a really curvy em. Um so one thing I want to dio is maybe make this occur. So let me take a look and kind of study this a little bit to see what kind of curves, and I'm gonna drag the circle into certain areas that I think would look really neat. Um, I'm using the golden ratio. So I did decide that I needed a smaller circle one more smaller than I had originally. So I went back and I did the circles that did the largest box all the way around, and I decided it is very small one at the very end cause I think I needed that for some of the smaller inside curves in the M. So I just redid it. Now I have a couple of smaller sizes to work with. So now that I have my circles, let's begin to copy and paste a few of over here that I think would be a right size. So let's start with kind of a smaller ones. We're gonna take the smaller one and see if we can't put it here in Grand Zoom in and show you want to make a nice round curve here according to the golden ratio. So I got a place that circle right here, and I wont also have a nice curve here. So let me see if I can take a little bit of a bigger curve, put it right there. Of course, we want the opposite side to match, but a curve here we could make that smaller and let the curves to be more dramatic. It just depends on what we're looking for. So I want this to kind of be more of a dramatic curves you to put that right here. Copy and paste. And I'm gonna just these in a little bit. I'm just kinda seeing what circles or sizes I could work with here. I think you're gonna make those smaller Look at the next small next size, down do this little small curves. And let's see if I can't take this tiniest one and bring it down here and maybe clues the M right here. Close that end to be black and have a nice curve down there that might look pretty neat and right here. So let's see, Maybe this one. Let's do one size up. I was copying, pasting and putting it right there so we'll end up shaving a little bit of that bottom off to make that a nice golden ratio curve and same same thing with here. We could cut this M along this edge and cut that out. I think that's too, too sharp of occur so we can grab a little bit of a smaller circle and soften that a little bit, Maybe cutting it here. Let's take this kind of medium size and let's see if this is a good curve. So could do the curve anywhere we'd like. Maybe right there, a little bit of the bigger ones. So let's see what this one looks like. Ah, like that curve right there. That's beautiful. And I love how it comes up to this. A packs right here. So you see how that's a nice curve. So let's copy and paste and let's put it on the other side and try to match it up as best as we can. And let's make sure these air aligned sums could select both of these circles. And either do a top alignment or bottom alignment to make sure they align up here. Great. And if we can let the circles touch and as many places as possible, maybe even better. So let's maybe shift this. I want to make it bigger or smaller, so we got to make it work within its confines, so that might be pretty good. So I like that cut. Great. Okay, so let's find another match, since actually the one I've already done at a time, it looks pretty close to what I did. Looks like I have a little bit of a bigger 1 May be right here. Let's copy paste this one. If I can't get a more gradual curve, there I spent about five minutes has taken some time and kind of pairing up the circles. And this is kind of the final arrangement of circles that I like. And so now we're gonna start to work on kind of cutting those corners according to these circles. So one thing I want to do is I want to make sure a lot of these air aligned properly. So if this is gonna be the upper left and it's gonna be the upper right, I want to make sure those world or aligned horizontally seems to go up and do a vertical line top to make sure those are aligned. Actually, make sure all for these circles are aligned An adjuster it may be we could make sure these 22 circles are aligned. So this one right here and this one right here was to a center alignment. Let's make sure these, uh, two circles are alive toward the top. It's to a top alignment. Make sure that everything kind of matches up nicely. And so you notice how these to this larger circle in this kind of medium sized circle, they kind of overlap right here at the corner That's another great thing to do with your circles. Tow. Line them up so there's a little bit of assigns to it, but there's a little bit of subjectivity where you can kind of align the circles where you think would be, ah, some good curves to go with. So let's start at the top and work her way down. It's kind of just make some small adjustments and I might make the strokes skinnier. No highlight everything in D Select PM not gonna make my stroke really skinny because I don't want this stroke to get in the way. The thickness of the stroke, too, confused me with any cutting. It's gonna take these two. Let's go shipped him over my left keyboard key. My left arrow. I might have to manually adjust it so they go along the curves a little better. Same thing with this. Just kind of make sure everything's lined up. You can always do it one by one. All right, so let's begin doing our curves. There's a couple ways we can do this. Here's what I'm gonna do. I'm gonna go along this curve and basically cut this section out so we can do a couple of things I can add with my pen tool. A point right here on the circle. Lips make in addition, Add an anchor point. Click right here like my end. First, add additional point here and add an additional point here. Well, I go back to direct selection tool and click off of and click on. I'll get my little curvature tool here. So you see the little curve right there? So now I can pull down on it, pull it down as much as you can and see the red line. I was able to align right to it. You can always draw it manually if you don't want to use that tool or if you don't have that tool available. Okay, so now that curves done. So let's adapt this curve right here. So you see, it's all just a little bit. All right, There we go. So let's do the same thing here and this one. We might be able to to take the curvature tool, which is right here kind of ship. This one around. Here we go. The curvature tool really helps out. You could use the regular pin tool to make adjustments to your anchors. But sometimes if you need that perfect round, circular shape, go ahead and grab that curvature tool. So there's our little curve for the top of our en em. We're going to the same thing to the other side. 5. Golden Ratio Applied to Lettering - Part 2: just another quick common about the rounding of the edges tool that we used for this corner . I went ahead, went back a couple steps from the history because I wanted to kind of show you something that could happen. Eso right near. Now I have the direct selection tool, and I'm able to have this curve create edges kind of option here. So when I click and drag, you notice that it's also clicking and dragging all the corners. So it's also doing this in the middle. If he could see that moving up and down, we just wanted this one corner. So if you want all the corners, you could do that. Or if you kind of click it and then click it again and hold, it'll only select that one. So it's a little finicky, so if you just the very first time you click and hold, it will do all of them. But if you kind of click on it once and then click on it again and then hold, it will only do that one corner, which is what you want. So now I'm back on the other side of the M. I'm gonna do the same thing. Go and get my selected the m gonna get my direct selection tool on my rounded edges Here. Cook twice. I don't want to drag all the other corners and already did that one with the curvature tool kind of adjusted that one rights of the top portion is done. So I have the right side in the left side. There's gonna work our way down the M. So now I want to be able to add a little black area to make that curb happen so we can draw that manually with pin tool and add the shapes together. Who's in the shape? Builder Tool. Um, or we could see what we could do with the curvature, tools and some other things to help us. So we have a curvature tool. Hill looks like we have two points. Wonder if we can delete a point. Bring that back. So that's one point. It's a little complicated. Let's see. We have our this court curvature up. Click once, click twice and drag up O perfect love that option. Let's make sure it didn't change any other corners for us. It didn't It just did that one so that was easy. Another option would just be to grab the pin tool and to trace around and add a shape and then bring it together using the shape builder tool and just add in those shapes is one object. That was easy. So now we have these two little parts of the M. Let's zoom out of the apex of the M here. And so once again, I can add a little shape and I might do that just so I could show you an option. If you don't get that curvature tool option, I might have to reduce the stroke on this a little bit, so I couldn't see exactly where it goes. We're gonna scrap the regular pit tool and school. Go and trace that resume in second kind of see what I'm doing. I'm just gonna trace around this little circle. We're just trying to be as exact as possible because they are using the golden ratio. So we're just trying to be very exact with our measurements and take the eyedropper tool Make that black snoop would like that. And if we like that soon out, what's great is we can copy and paste that and reflect it. So I'm gonna copy this little object. Here's a little object it working to reflect it. You go to object, transform and reflect. We're gonna do a vertical, reflect perfect. And I could drag it over here and live it up and already have that done could always find Tune it. After we're after we take out the circles, we'll be able to find Tune it a little more. So let's do this very bottom of the M and that's already pretty close. If we can't describe the curvature tool, so we're next. We're gonna do the bottom of the stem of the EMS. The reason why we made this a smaller circle is if we were to cut it along this large circle, that would be a very dramatic cut to the I don't want it so dramatic. A one of more subtle cut. So that's why we have this more medium sized golden ratio circle. So now we just have to cut this portion out. Let's go ahead and zoom in and start that process a couple ways. We can do that. We can add a point right here and a point right here and it looks like there's two points, so let me see if I can't remove one. Now there's only one point left. Let's see if I can't do my curvature tool. Bring all these curves down here. Beautiful. Such a handy little tool. Okay, let's do the same thing on the other side. So I'm just believing there's to anchor points of just the leading one. So that could use the actor tool. That one seems to be a little different. Let's do something different just to kind of show you other options. So I could take the pen tool and I could cut a little shape out right here. Has to do the strokes that could see that What I've made you get a different color, so I'm gonna take everything inside and cut it out. So I'm gonna highlight this shape and then highlight the M, and I'm gonna put this back to a Phil select both. I'm gonna grab my shape builder tool over here. Hold down. Option or old. If you're on the windows and just start subtracting and that's another way you can cut it out or set to go back and noodle around with this little bit right here. It's a trap. So we're ready to remove the circles and reveal what we created. Select everything. 50. Select the M. I'm just gonna shift. Actually, I could tell you what I'm gonna do on a copy and paste this so we can have a copy of how we apply the golden ratio circles. And now I can go ahead and sleep this and see what we have underneath. So that is our M applied with some gold ratio curbs. And I gotta go and make some small adjustments to sent some rough curves that are left over . And once I find tune this, we can start to adapt this to a little little branding. A little logo mark, I'm gonna do kind of a personal brand I decided to do with this. I'm just taking the curvature tool. I was gonna make some adjustments to the curb and get him just right. So just for fun, I'm gonna make this a little personal brand with the last letter of my name. So I'm just gonna do a quick little marsh lettering and I'm gonna make this open. Sands, it's I have I'm free to use that it's an open bond. Put out dramatic spacing here. Let's dio 1200 spacing. Oh, that's letting we do. Tracking 1200 right here. Make this span kind of the bottom. What I want to do is make it span right along the legs of the M. So kind of line that up, make sure we're doing everything properly and nicely aligned. And I have just enough white space here. Have a good amount of white space and they're Sarker little local bark. This is black, but we could do a combination of colors. I'll go ahead and show you on the screen. When I ended up coming up with and I did one with a Grady in Nash and I'll go ahead and bring this one back copy and paste it. And I just applied a quick little radiant mash when ever heard to my Grady Amash Tool was kind of clicked in some areas and started to apply with the direct selection tool, selecting certain elements in here and going back to my default swatches panel, kind of adding some dramatic color all along the edges, kind of going with a little bit of a bright blonde teen. Let's do that blue, and there's one down here. Let's do it. A dark blue to kind of give the element of shadows and kind of lighter, lighter colors up top. And this is what I ended up coming up with. In the end. It's kind of a little branding package I thought was kind of fun. Using the golden ratio. I'm kind of using my last name, So if you have a letter of your last name, you can use that as an example. Use the golden ratio circles and start applying some curves. Overlap those circles to find unique curves and shapes as well. As long as you don't change the size of the circles relative to each other, you can change all of them but wants to make them bigger, smaller, but don't change one circle. Make it larger than the other than you. Mix up the ratio, so as long as you keep that in mind, you have fun with. This has really experiment. Golden ratio is there is a guide and a tool. It's not an overall rule, so so it's there to help you create certain curved shapes, but it's really up to you to create what you want to create