Creative Logo Making: Design with Circles

1. Welcome: I'm Peter Bone. I'm a designer, writer and teacher. As a designer, I believe firmly in the principle of less is more. I love the simplicity of geometric shapes on frequently used them In my work. When I teach students how to use illustrator, I often use simple shapes. As a starting point is, it could be a quick and easy way into creating something that looks good. A couple of years ago, when I was trying to write a book about designing Logo's, I wanted a way to convey the essence of the thought process I go through when I'm exploring ideas. I wanted to convey how the constraints that you often get when working with a client can open up your creativity rather than close it down. So I restricted the elements I'd allow myself to use, and to cut a long story short, I ended up writing a book that I hadn't planned to write about creating locals with circles . I enjoy the process of writing it so much that I followed it up with one about rounded rectangles and then another one on triangles in the same way this course is designed to help you develop creative ideas at the same time teaching you how to work creatively with Adobe illustrator. So it's perfect for anyone who wants to do one or the other or both. Here you can see the logos I'm going to demonstrate on the course. If when you look at them you can easily see a way to create them all quickly and accurately just using circles. Then you won't learn much from this course. If, on the other hand, when you look at them, you can see that's what you want to be able to do. Then you're on the right course. The project that goes alongside this course is to create your own logo that simply uses black and or white circles. You may have ideas now. You may think of ideas as we go along, but you'll get much more out of this course if you use the skills you've been taught. So do sketch out any ideas you have, either now or as we go along, either on paper or using illustrator, and then I'll give you further instructions toward the end of the course. 2. Setup and Illustrator basics: to record this course. I've used the latest version of the CC version of Illustrator, which I've done on a Mac, but you could use either that or any earlier version of illustrator, either on a Mac or a PC. I'm recording this by creating different sets of three logos, which I'm doing, as you can see here in a document which features three of them. So I create one logo, then deleted, and then do another one on Delete that so feel free to do the same. You can just create one document to work in and move Logo's off the side once you've created them, or you could do several different documents. So in case you're brand new to illustrator, you'll need to know how to create a new document so that would be filed and new. I would just stick with the default, which is on a four sized, shaped like that, um, so you can press a K and you're going to get something like that. So that's exactly what I've done. So you could create a series of those saved them using file and save one of the option you got would be you could create a document with multiple art boards. So as you're gonna create 12 logo's, you could create 12 art boards, which are a little bit like pages, and that gets you the whole sort of series of sheets. Now, if you're gonna do that, you'll need to know how to zoom in and zoom out on DA. There's different ways of doing it. But one way is to use the zoom tool like that that allows you to zoom in on the hand. Tool allows you to reposition, so that works. But if you want to use keyboard shortcuts, which is, I would suggest better because you can just stick to using the default tools you can use on a Mac command. Plus does seem in command minus dizzy amount on a PC that will be controlled, plus or control minus. And similarly, you can do control zero that shows you either the whole page if you're just in a single document, or all the whole art board. If you're working on one with multiple outboards, and, uh, another way of doing that is by going views amens him out, fit art boarding window, the other one to mention here is fit all in window. That's if he using multiple our board, you can get back and see them all. So it doesn't really matter what you do, so long as you're comfortable doing it. So hopefully that is, uh that means you're ready to get started. 3. Using simple transformations: So these 1st 3 logo's fairly straightforward. So we get started by choosing the Ellipse tool with a click and drag. You can create any sort of elliptical shape, but if you keep your shift key down, make sure it's still helped out. As you let go of the mouse, you'll create your first circle. So if he knew to illustrate, you'll need to know about how to change the colors. So what did that really quickly notice in this area here you've got a square, and then you got a kind of bordered square. So this is the fill this the stroke, and we're gonna change those. So we're gonna make the Phil Black the stroke? None. There's a variety of ways of doing that. One is to make sure that the thing you want to change in the front and then apply an appropriate swatch. So do that first. So the stroke is it the front, But I want to switch that off, so I'm going to do that by going to the swatches panel and choosing the numb. It's watch. OK, so that's one way of doing it Now. I want to bring the fill to the front. Now I can go back here and click to do that. I all site could have done that here. But whichever way, once the food is in the front, we're gonna choose look, So if you need to, illustrator, another thing you're gonna need to know is sometimes you'll be using a tool like the Ellipse tool. Sometimes you might be using the selection tool to select things. The next two we're going to use is the scale to So this is one of many total transformation tools which were used to transform shapes. So let's do that. So by double clicking on the scale to we can numerically adjust the scale of something, so we're gonna go for 50% scale. But rather than press OK, which would just make the circle smaller or press copy to make a copy. But let's just check roughly where there's gonna look like by toddling preview on and off. That looks about right. So, press copy. You might just about see, we've got an extra circle on top. I'm gonna change the fill color. He might be to see the fill calories at the front, so go for white. So there's our first logo to do the 2nd 1 As you can probably see, it's just repeating the same thing again. So one way of doing that is to repeat, by double clicking again. Let's just check roughly what we're going to get with a preview. I think I might want a bit smaller than that. So let's say 40% looks like a self press copy. Finally change the color. So they got theirs our first to So the idea of this course is to give you a sense of how you can explore different features of illustrator and how toe. Just try playing with different shapes in different ways. So the emphasis on experimentation. So one thing you might do when you're using the scale to always think I can. What if I scaled things in a different way and said the example we've got here? Is it something where you're scaling it? But no, in a straightforward way. So I'm gonna get rid of these two circles, go back to the 1st 1 again, double click on the scale to so this time, use a non uniforms Kyle so vertically keep it 100%. It's just turned the previous, often them back on again to see kind of where we are. So you can see that this will give us an overall more noble than I wanted here. So let's say roughly 60%. But again, preview, turn the on and off now a useful shortcut you might want to know which, which makes the whole process more intuitive. This works pretty much anywhere in illustrator and in photo shop and in design as well and presumably other adobe products. When you want to be a kind of see how numbers affect things on the screen, what you do is you put your cursor inside one of these so called fields and then use your up or down arrow, and then you can get a much clearer idea of what you're gonna get. So the up and down arrows moving 1% of the time, or if you hold down the shift key, you can get 10% at a time. So I'm thinking, somewhere around there looks about right so off now press copy. So that's my circles owner looks pretty good, changed a white, and then we got. So there's three examples of a simple transformation said. By creating a perfect circle, transforming in those ways you can do a variety of things. So if that makes you want to experiment more with that, then that's fine. We're gonna move on a slightly different technique. 4. Using alignments: So here we're less concerned with transforming shape as we are with aligning them. So with the first of these, I used the Ellipse tool again. Hold down the shift key to create a circle, not remembers the colors I had use previously. So we got no Phil here and no stroke. I'm gonna change the color a different way. Now. You wouldn't do this in a relatively modern version of illustrator in the bar at the top here Could just change the film like this. No, actually, I don't want to change the stroke, so that's fine. Just click to get rid of that. So to the selection tool which were used to select shapes and to copy them so normally when you drag your just moving that particular circle. But if you hold down the old key, your cursor changes from a black cursor to black and white. And then when you let go, you will have made a copy. So there were only four circles to align them. It was different ways of aligning things. The way they're gonna look a right now is just to use the green smart guides, which are absolutely fine for much of the world that you'll do. So you're looking for the green lines and the exes to show you where shapes intersect on that seems pretty close. Now, I'm not 100% sure that's accurate, but that's fine for now. Because we're gonna move on to another technique which, if this doesn't work every time to sell the technique, I'm about to show you does. So that's a simple way of lining up circles. Now, with this next one again, we want four circles. I'm gonna get rid of two of those. Now, this one I want to change now so that instead of having a black fill and no stroke, I want a black stroke on. No, Phil, you can see please transparently. No feel so you can see through them now. Uneasy way to do that is to press this little button here that swaps the fill in the stroke over so that stand up. So that gives me the black stroke and no, Phil. But the stroke is a little bit on the thin side, so I can either press the arrows on the left or choose from a preset weight on the right. So I'm gonna go for 10 points. So I want for these now. This is a bit tricky because when I click in the middle to selective, there's actually nothing there. There's no fell, so it's as if I'm clicking straight through them, so that doesn't work. So you need to click on the edge now what you can see here by default. Let me just zoom in a bit. I'm just using ah Command plus on the Mac to zoom in control, plus on the PC to zoom in. You can see these handles here now. These are really, really useful toe change shapes, but in my opinion, they could make things a bit clunky when you start just shapes the way that we're going to adjust them. So for the remainder of this course, we're going to switch these off. So we're gonna go to the View menu and she's hide bounding box. So now you can no longer see those little squares, but you can still see the anchor points, so these anchor points are what define the shapes, and these are useful because well, firstly, let's click on one of them, hold down the or key and drag the shape to make a copy, so that works is before. But I want you to try it. This line up your cursor with an anchor point that you might see his eyes him in that It says anchor there when you get it right over the top. But if you don't, you should see that there's a white square that appears next to the cursor to tell you that you're lined up. So either way, pick it up from that point and noticed that when you go over another anchor point, your cursor goes white and also it says intersect. So that tells me that for sure this uncle Point is lined up with the other one. So I'm gonna do the same thing again. So the trick is pick it up from the anchor point. I'm gonna do this in one move this time. So click on there with my mouse held down. Hold down the key. Just be a bit patient. Make sure it's lined up, and then I know that's gonna work. So it's a It's a case of picking up from the anchor point where you know you're gonna be lining up with, and then you can just be patient before you drop it in. That looks perfect. So when I let go, I know that's lined up If you didn't happen to get it right first time and it's a Were there somewhere again used the same technique, picking up from the anchor point on a You're looking for the white cursor. So I've done that with the help of the smart guides. It also works without smart guides. So just to show you that quickly, if I turn the smart guys off, which I can do here in the view money that still works pick it up from the Uncle Point. See the white cursor that means it is lined up. Then finally, another way of telling if something is lined up or not, go to the V menu and shoes outline and you can see here. It shows you just the kind of bare bones of the shapes on also an X in the center of a regular shaped like a circle, and you can see they're lined up. You'd spots right away if they weren't to get back to preview mode. So I zoomed in using command plus or control plus on the PC, I consume out again by doing command or control miners or indeed, command or control zero to show the whole page. Okay, so that's how I could have lined that. I want out. But I really should have been to do that. So you can see, I hope how this would work like that for again doing this without the smart guys. But I know where the anchor points are. America. So nice and easy. So break tow, experiment with. So again, I'm looking for the white cursor. Just be patient. There it is. Okay, So I'm sure there's other stuff that you could do with that with circles without a fail. So you can see because it's interesting shape in the middle, some more about those later. Okay, Now, to do one like this to get these are accurate, you need to use numbers. So so far, we've created a on the lips by clicking and dragging. But you can also create the lips by just clicking once on the numbers here that the size I previously used to create on the lips with. So that was 43 point whatever millimeters. I'm gonna go for 100 by one 100 press OK, and then swapped the filling the stroke over. Okay, so that's the circle in the background. So now I need four circles of half of that size. So again, now, this time I'm gonna press the little padlock. That means when I change one of the values, they both will change. I'll change there, feel colored or white. We're gonna line up like that. So this isn't anything you You've kind of learned how this works already. But by combining the accuracy of the sizing on combining the accuracy of the anchor points , you can very quickly start to get some interesting things going on there. So now I could do the same thing again and line them up to the middle, which I could do an outline mode so that would work. Or knowing what you know about transforming shapes, you could make a copy in the center, and I think I'm gonna do that. So I got four individual circles here. Now I want to work with them together so it fights. So like the 1st 1 hold down the shift key, I can keep clicking on the individual ones to get all four, then go to objects in group. Now they will act as one shape, even though they're four separate shapes. Notice at the top here it says group. So now I will get back toe the scale tool again. Double click. Now remember what I did last time, which is 50% size now that looks pretty good to me. So our press copy and then just change the color. So there's a bit of transformation going on there. But added to that, we've looked at how toe a line shapes, and we've been talking on and off the bounding box, the smart guides and also into and out off outline mode. So those are the key things there from thieve you many. Okay, so that's how you work with those and again all manner of things you could do just by aligning shapes in different ways. And when you throw in transformations as well, that throws up lots of other possibilities. So keep exploring those before you move on to the next set of low guys 5. More complex transformations: the logos that you can see here created with more complex transformations. So before we get into those, let's take another look at a different way of creating a logo you've created already. So the logo for happy black stroke on the fill of none, which we created by making copies on aligning them like that. An alternative way of doing that would have been too selective circle and use the right take to which we haven't used yet. The ordinarily, when you double click on a transformation to it, rotates around the center point. It's quite subtle, but he might just about be, honestly, that little point there. That's the point of origin so called, and that's work fine for the scale tool. But as far as I rotate to ago, it would, of course, rotate something around its centre, which means you wouldn't see any difference. So another way of using the rotate to his works with the other transformation tools as well , I should say, is if you hold down the old key and click once on where you want to rotate or transform from, so if I were the or key held down or press my mouse down once on just a zoom in so I can see what's happening here. So notice the point of origin is fixed where I just put it. And now I can place the angle here, so I'll change the angle to 90 and just turn treaty on and off so you can see what's gonna happen. So when I press copy, then I've rotated around there. No, I could repeat the same action a couple of times, but a quick way of doing it is to do command D or control the on the PC. So let me just do that once, twice. So that repeats the exact transformation in this case, rotating around that specific point of origin, making a copy like I said, as a really quick, intuitive way of creating that logo that you've done already. So comparing that one with one underneath. The only difference is that there are more copies that have been made at different angles as well. So let me just get rid of the extra ones. So the only difference would be a do the right, a total I hold down the okay. Now it's fine if you know your angles toe work out what's going on here. But if you don't, then just literally count the number of total circles. So I'll just do that. So 123456 of their six in total now is there are 360 degrees in a circle. You can type 360 forward slash in this case six. So 360 divided by six. So that will work out the angle you need. So if I do preview, you'll notice it. Convert that to 60 degrees, which you may well have worked out for yourselves. But I show you this because you can work out exactly how many you want in total, and then illustrated will do that for you. So you do the 1st 1 and then simply do command well controlled the So there's lots of things you could do without including the 2nd 1 So what I would start to do. Having got this, I might play with the with stroke. Wait. I might play with the angle, the point of origin and all kinds of things that I could do. But what I've done in this case is I've selected all of them and I've gone to the stroke panel over here. Now, by default, he only see this small area of the stroke panel, but there's a lot more of it. So if you click on there, you're noticed you can have a dashed line. Now, this doesn't look very promising to start with, but if I changed the cap, you'll notice that the the cap of each dash is now rounded. So the rounding looks good so I can increase the white there. You'll notice I can change the length of the dash, and I'm gonna keep that on zero to keep the the dash is round. But again, using the shortcut I mentioned earlier, you can put your cursor in there and you can change the up or down arrows so he can use the up or down arrested. Just just gap. So that's one thing you can do but look like this one down here. You can see that I've made the circle go larger to smaller. This is something that came along a few versions ago of Illustrator. You could just change the profile from normal to, let's say this one, and then you might just about be to see that that it gets larger and smaller. So I think I'm gonna just increase the stroke. Wait a little bit. I may be increased the gap, so plenty of things to try there. But really, it comes down to a single circle, rotated round a specific number of times using the potato. So coming up to this one, I'm not gonna create this now because this does require us to be ableto rotate. You can probably see that there's been a rotation done and then some errors have been filled and some haven't. So this is more complex. We can't do this yet because we need to know how toe separate paths as they're called out from each other. So we need to learn how to combine things in different ways, which is what we're going to do in the next series of exercises. So once we've done those, I hope that you better come back but have a go this one. But on the basis of it, the base really is. We're just taking a rotated number of copies. So play with that. See what happens 6. Using Pathfinder: as you look at the logo's at the bottom, which we're gonna create next. They look. I was just less like circles on a bit more recent, Eric, hopefully a bit more interesting. And hopefully they give you a sense of what you can start to do when you start to combine shapes, which is what we're gonna do here. So the first logo. It's a very similar to the one that you created earlier. So you can copy and paste like one that you can quickly create it again. What you will then need to do is to create a copy of one of those circles. Now, to see the next bit, let's go to outline mode and then drag from the center of the circle to line it up to the others. So that looks pretty well lined up to me. If you're not sure about that fact, I'm looking at that. I'm really not sure about that. So I'm gonna just do it the more accurate way, which is to pick up on the anchor point. Look, look for the white curse that There we go. That's lined up. Okay, So what we want to do is keep these bits where they have allowed and get rid of these bits . So let's go back into Previ mode. Select all the shapes To do anything like that, you likely use the shape. Build a tool or you'll use the Pathfinder panel just the powerful on the panel we're going to start with. So these tools allow you to create different, gives you different effects, depending on what you selected. Which button you press, it adds or subtracts shapes, divides them different ways on the one I'm gonna show you is the most generically useful, which is but divide me, press that it doesn't appear like much has happened, but it has divided all the shapes where they have a lap. What it's also done, that is, it's put them in a group. Which is why, if you click on one of these or even de select and click on one of them, it wants us select the whole thing. So if that happens, just double click. It takes you into what's known as isolation mode, and then you can click on the shapes independently, get rid of the ones you don't want and finally, when you so like that one and delete it. We got the result we want. But to get back out of isolation mode, as it's called, press the escape key on the top left of your keyboard. All this little arrow here when the depressive a couple of times. So that guy, that's how we create that one, right? As for this one, start with Circle the nice thick stroke and then let's rotate that around the center. You want a total of three. So 360 divided by three a copy and then commando control D to repeat up. So we've got three circles there. As you might see, they're going to get combined together into one. But one thing we want to do before we do that is to have a point of reference so that we can reliably rotate a copy of the whole thing around the middle. That might not make much sense now, but fleet within a minute. So I'm gonna make a copy of that line that up right in the middle, and there's a great little feature in Illustrator on the View menu on the guides called Make Guides, and it takes any object and turns into a guide now, depending on where the guys are locked or not, Clearly, mine aren't. Just don't do that. You like to be in a move. That or not. I don't want to be in a move that so I'm gonna go to view guides, lock guides. Right now, I want to turn these three shapes into one shape. But just before I do that, you might think, actually, I like I like the look of that. I might want to divide that out in a different way. So obviously experiment with this is as you wish and select plays. And this time I'm gonna press this button here, the top left part. Find a button. So it's called Unite. And as you can see, ads close together. So I now want to make a rotated copy of that. But I want to rotate around the center here. So that's right. He's my guide. If I zoom in a bit, hopefully you'll see why I'm doing that. Because the center that it thinks it wants to use is here. Actually, we want to use this center. So hold on the or key. So if I was to rotate 120 degrees. You wouldn't see the difference because it would rotate kind of on top of itself. So actually wanted half what I had before. So I could type 120 slash two or I could do that in my head. So that's gonna be 60 degrees, salty. 60. Make a copy on Let's zoom back out again So you can see. There we go. There it is. So I want to get rid of that guide now. So I'll do the guides undo lock guides and then I can delete the guide. So before we may want to the final Lago, I'd like, have a look at it and see if you can see how that might have been created using circles. So just pulls the video for a second. How about looking? I have to think about it and then I'll show you when Ewan pulls it so pulls away. Okay, so I don't know how you thought about doing it. There's no right way necessarily, but I'll show you the technique I used, which is to create a circle. And then I'll just make that black fill on no stroke. I'm gonna line up another circle exactly same size next to it. And then I want one that's double the size. So this is where I'm gonna want to use my exact numbers here. And actually seeing this it would have been easier if I used a nice round number. So you know what I'm gonna do? I'm gonna just constrain that and then change the value there to 45. Get rid of that one on. Make a copy. So I've now got to the really exactly 45 millimeters. So now I want one. That's 90. So is where we do that is to click with the Ellipse still, So let's type in 90. That's kind of tricky to see what's going on here, because there are different over the same colors. So just make this introduce a little bit of color for the first time. I don't want to line this up, so I pick it up by the anchor point line up with that one there. So that is lined up, as I can tell if I going to outline mode. But really we can't see what we're doing. So a wave moving things backwards or forward just ago object. Arrange Lago send to back and then back into pre he mode. Okay, so hopefully you can start to see where we might be going. It's still a bit obscure, but I'm gonna just pause there to see if you can guess where we might be heading next. So where we're going next is to create this kind of swirly shape effectively. It's these two shapes added together with these shapes removed. So we have to do is to select or three shapes. Now we could use divide to divide, get rid of things and Adam together. But a much easier way of doing that came along in CS four when they introduced the shape builder to the shape build a tool allows you to hover over different areas that selected and add them together or subtract. Um, so add these two bits together. This is where it really helps if they're different colors drunk from here to here, and that will turn that into one shape. And now I want to subtract thes two pits, so you might just about notice if I zoom in a bit. No, you won't notice because the curse wasn't getting larger, but what you would have seen is that the cursor has a plus next to it, meaning that you'll be adding shapes together. But if you hold on the okay, it changes to a minus, which means I dragged through these. They get subtracted. So if you've ever seen the Ying Yang like, um, this is how it's created. But what we're gonna do, of course, Now we've got this. Is Mike it black? And then we're gonna rotate several copies to get that shape. So let's do that. So we're using the rotator on. This is the tricky bit because what you want to do is put the point of origin. So somewhere down here now the chances I won't get this right first time, which is one of the reasons why you got undue. So let's try this. So hold down the Yorkie click once, and I want to write like this 90 degrees. Just look at the previous you know, my work will try that said copy and then control. Come on D and then control command E. That's worked. In fact, that looks better than that. One thing that looks pretty good. So there we go. So that just came from three circles by overlapping them by combining them. As you can see, you can create something really quite interesting. So you got a lot of technique that you've got the ability to align shapes. You got the ability to combine them in different ways. You've got the ability to transform them. You could take any of these ones that we've done at other ingredients. In, of course, we're limiting it to circles were limiting it to black and white. In my experience, that really helps. So before you add in other elements, just see what you can do with some really basic shapes and just sort of push your imagination. Use Illustrator is a creative tool and see what you can do. 7. Class project and goodbye: Now that you've learned all the illustrated techniques, it's time for you to create your own logo. Go in whatever direction you want, but limit yourself to just black and or white circles. At the end of April 2015 I'll choose my favorite three logos on each person will win a print copy of my circles triangles on rounded rectangle books. I look forward to see what you come up with.