The Golden Ratio for Logo or Icon Design in Illustrator

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
Hey everybody I'm Nathaniel Dodds. I'm from tutvids.com and today we are going to take a few minutes and talk about the golden ratio in adobe illustartor what it is and how you can use it ? and how you can make your own little spirally-spoo golden ratio thing, the Fibonacci sequence if you will, that's what they call it. we're gonna talk about how to create that and then furthermore how to create, like, a little object out of it. I don't know exactly what will the object is gonna be I have this idea to do this little bird head sketch since recently. In a tutorial I did another sort of dove's head sketch for this icon Maybe we'll try to do a bird's head with circles created uh, using the Golden Ratio. So, If you enjoy this tutorial, well, make sure you hit that button down there and subscribe to this channel so you can check out all the Adobe Illustrator, all the Photoshop, all, you know just all the tutorials and never miss anything in the future and without any further delay, let's jump in and check this thing out so, here we are in adobe illustrator i have just opened up a, uh document here. This document is 2560 by 1440 pixels, in terms of the size, the width and height there. you can open up a document whatever size you like. Alright so this whole thins is gonna begin with a rectangle, I'm gonna grab the rectangle tool, actualy technicaly a square but you know what i am saying i am gonna come over here i'm gonna get rid of the fill I just want a stroke some kind of charcoal or black color is fine I'm gonna hit none here because the fill is in the foreground therefore it's gonna get rid of the fill we only want this to be outlines i am gonna click a single time and i am gonna create a 500 by 500 pixel rectangle slash square and i can move this whatever i want i can leave it right there that's great no what i am gonna do is to grab the elapse tool and i'm gonna click a single time and i need this circle to be twice as large as the rectangle so if it was circle it should be just imagine four of these squares side by side top and bottoms we need to go 1000 pixel by 1000 pixels that's going to make a circle that as you can see is 4 times larger than the rectangle so twice is large but covers 4 times of the square's surface area one other important thing here that can be helpful as we do this is if you come here and use view menu and turn on smart guides and i also like to snap to the point turned on because sometimes Sometimes I rule the little snap to point, that can be nice and useful alright i am gonna grab this, and this works because smart guides will be turned on and we can click it right into place, right there so that the circle runs from the bottom left corner of the square to the top right corner of the square and next what we'll do, is we'll come over here and we'll grab this tool right here, the shaper tool. Note the hot key shift and the letter N. We can grab that, and if we hold down the alter option key and just scribble in and out of the outer part of that circle, it just gets rid of it, so now we're left with this nice big Fibonacci... square, if you will the beginning of our Fibonacci Sequence. Now what I'm gonna do here is grab my selection tool and I am gonna select this and I wanna come up here to object and just gonna choose to expand this and I'm not gonna expand the filler stroke just the object because when you use the shaper tool, it makes what's called the shaper group or a shaper object which you want to expand that so if we open up the layer here you can see we now have our shaper group and a group and two paths... that's kinda what I want. i don't wanna a mess around with any weird objects or anything. Now that we have this, we're just gonna duplicate it. I'm gonna alter option key and i am gonna click and drag a copy of this out and just place it over here .in fact i am gonna hold down shift and i am gonna rotate this like this because we wanna continue this curve arounds as we create this golden ratio now here's where things fun and interesting Up here in this top bar, we have over here, next to our X and Y values We have width and height values And one of the cool things about adobe illustrator is you can do math right here In, uh, in these these little input fields, so the Fibonacci sequence, the Golden Ratio is 1.618, that's like the um, That's the ratio if you will, so I'm going to divide 500 by 1.618, and I've got my little Chain link on, so it's going to apply this math to both the width and the height, and just hit the enter key And you can see here I have a nice square and because smart guides are turned on, it's going to click right into place. Great! There's block number 2 of the Fibonacci sequence. Now we need to repeat this seven times in total. I've done it one time, so we need to do it six more times So I'm going to duplicate this, hold down shift, rotate it just like that. And, we're gonna divide this, divide 1.618. Boom! And I'm gonna move this guy right into place right here. Now, I'm gonna hold down alt We're going to divide this as we have, by 1.618 Great! Oup, you know, need to rotate this, hold down shift to rotate it. There we go. And watch this, this is going to fit exactly in between. Right there. Look at that, it perfectly lines up! I'm gonna duplicate this shape now. Hold down alternate options Drag it out, hold on shift, rotate the shape and divide this by 1.618 You got it, I got it, we all got it. Here we go, drag this up into place. Just like That, and because smart guides are turned on it's all going to click together Alright, I'm going to divide this, 1.618. Boom! And I'm going to rotate, hold down shift. Click, click, and rotate it. Drag this up into place, I'm gonna hold down alternate options I'm gonna zoom in on this a little bit here, just cause we're getting kinda small. Hold down alternate option, drag that out hold down shift, rotate the shape once more divide by 1.618. Bada bing. I'm gonna take this drag it back in. And I think we need to do one more. So I'm going to hold down alternate option here, woops, just like that hold down alter option, drag out a copy, hold down shift And rotate it and then divide this one final time by 1.618 and drag and put this in place. So, here, if I can if I can grab this, let me zoom in a little bit I really should just make the transform handles go away. But I'm not going to. There we go and just something like that. And really you could just keep going. And going and going and going and going, but we've built this Golden ratio, uh, sequence, and really, once you've done it once you've got it. Uh, you could just save this document and, you know, maybe make this a template file here. In adobe illustrator. Where you just open the same dot .ai file every time you begin a new project, and you just have you golden sequence in there. If you enjoy what you're seeing so far in this tutorial Consider picking up a copy of my advance photoshop tutorial. It's great for graphic designers, ui designers. Things like that. People looking to do more design related stuff. And photoshop, it's like 9 hours of Photoshop goodness. And if you pick up a copy using the link that appears up at the top corner, there's also a link down in the bio of this video. If you do pick up a copy, just help support what we do here at tutvid.com This channel is entirely supported by viewers like you. So thank you. Let's get back to the tutorial. One of the cool things about this is, uh, let's just grab all this stuff here and I'm gonna go object, group, to just group it together and then, if we're, let's say we're, we're creating a logo here I've got this sketch here. This is the bird's head idea I was telling you about. Let's say, we generally, like it doesn't have to be exactly like this but this But this is a good general idea from the little sketch we were messing around with on our graph paper. And so, I know I need a bunch of circles. So I can begin here, and because smart guides are turned on I'm hovering over the top anchor point. It says anchor. Hold down shift. And drag out and the circle will click into place. Now that I have this circle, uhm I, I can do a couple things. Number 1, I can draw out just a series of circles here within golden ratio boxes, right. And I would have these perfect circles. Or, I could simply Take this circle here, duplicate it. And just divide the width and height by 1.618, 1.618. There we go, woops. Make sure I I uh, lock them together. So, uh,let me just do, let me undo that actually. Let's make sure we have it locked together, and divide 1.618 Boom. And we have these two circles and their correspondence to each other is that, that ratio of 1.618 So it is the, the golden ratio if you will. And I can take another circle or ellipse here and divide that by 1.618. Right? And what I can do with these shapes. Let's say, I, I select these here. We'll open up our stroke panel, and we'll maybe make these like five pixels so they're a little wider, little bit easier to see and all. And I begin with this alternate options over bits and pieces of the bird Maybe I need one of the big circles here, and I could place And once more, smart guides are turned on. So I begin Cut this here underneath the bird a little bit this shaper group.
Info
Channel: tutvid
Views: 640,240
Rating: 4.9322033 out of 5
Keywords: golden ratio, fibonacci sequence, how to, what is, golden ratio logo design, logo design illustrator, golden ratio spiral, golden ratio illustrator, illustrator tutorial, golden ratio in logo design, golden ratio in design, how to use golden ratio in logo design, adobe illustrator tutorials, AI
Id: 6bkVu2xtypw
Channel Id: undefined
Length: 17min 39sec (1059 seconds)
Published: Fri Sep 29 2017
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.