Drawing icons & logos in Illustrator using the pen tool

This lesson is exclusive to members

Course contents
SECTION: 15
Cheat Sheet 5:23

Questions

Course info

45 lessons / 4 hours

Overview

UI design skills are one of the most employable opportunities of our lifetime. In this course you’ll learn how to design a professional website in Adobe Illustrator. We’ll start right at the basics of Illustrator and work our way through to building professional UI designs. This course doesn’t cover how to code a website but focuses on the design processes that professional UI designers use when working.

This is a project based class for students who are new to the world of app & web design. I created this for people nervous about changing their careers into the world of user interface design.



We’ll build a professional portfolio website. You can use this course to build your own portfolio website (the one you’ve been putting off for years). You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what you’ll need to deliver at the end of a project to your client.

This course is for people serious about becoming a User Interface design professional.

Know that I’ll be around to help - if you get lost you can drop a post on the video 'Questions and Answers' below each video and I'll be sure to get back to you.

Now it’s time to upgrade your skills, get that better job, and impress your clients.


What are the requirements?

  • You'll need a copy of Adobe Illustrator CC 2017 or above. A free trial can be downloaded from Adobe.

  • No previous design skills are needed.

  • No previous Illustrator skills are needed. 

What am I going to get from this course?

  • 45 lectures 4 Hours 7 minutes of content!

  • You'll learn to design a website with in Adobe Illustrator.

  • User Interface essentials. 

  • 27 Completed files so you never fall behind. 

  • Learn how to wireframe at all levels

  • How to design for a responsive website. 

  • Downloadable exercise files & cheat sheet.

  • Forum support from me and the rest of the BYOL crew.

  • Techniques used by professional website designers.

  • Professional workflows and shortcuts.

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • This course is for beginners. Aimed at people new to the world of web and UI design. While no previous Illustrator experience is necessary.

Course duration 4 hours

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

All right, in this exercise we're gonna draw this little  kiwi and this clover leaf down the bottom here  and we're gonna draw a crown, okay? And they're all vector, okay? They're nice and victory bits. And we're gonna show you how to use this lovely,  lovely pen there. Is there. Let's go do that.

Okay. So first up, what we'll do is we'll draw these on its own  document and copy and paste them in later on. Just to not get too confused with this document. Let's go to file. Let's go to new,  uh, it doesn't really matter. We'll be on print.

Let's use a four or letter. Okay? I'm not too worried about the size. We're gonna bring in some things to draw. Now, most of the time, okay,  if it's a reasonably complex shape,  I will hand draw it in my book, okay. In my notebook.

And then take a photo of it and bring it in. 'cause I'm a lot better at drawing  with my hands than I am with the pen. Okay? If it's a simple shape, like a heart or a star  or something like that, or an arrow, I'll just try  and freehand it with the pen tool. But, um, let's look at bringing in  some of the stuff we've drawn. It's a file place, okay?

In your exercise files, okay? Uh, download the pen tool exercise files. If you don't have these exercise files,  there's a link on the page somewhere to download them. Okay? I'm gonna click and drag it out  so it kind of fits within here. And this is the stuff we're gonna be drawing, okay?

Just the nice little progressive, uh, things to draw. So, um, I've hand drawn these  and that is, if you're wondering  what that is, that's a kiwi. It's our little native bird. It's a terrible kiwi. It took me ages to draw that one as well. So Kiwi's are hard to draw.

I like footballs with legs. Anyway, so what we're gonna do is, uh, so you've drawn your,  um, your, you know, you've hand drawn  your little thing that you want. Now what we wanna do is draw over the top of it  and we wanna lock this background layer  so it doesn't move halfway through. Drawing the easiest way. We've done this before in layers, okay? But see layer one, we're gonna lock it.

This little icon kinda appears  in this little empty box here. We're gonna call this one background. Great. We're gonna make a new layer and we're just gonna make sure  we're got this layer selected. And this is gonna be our drawing layer. Okay?

Let's just make sure we're on this layout. We're gonna grab the penal. Where is a penal? There he is there. Okay, we want this one called the pen. So the basics are, let's zoom in.

Let's make sure that we've got, if I start drawing now,  which is what happens, you end up with this kind  of like white box kind of filling it up. That help happens often when people are starting is  let's give it no fill. So that's the first one here. No fill and the stroker on the outside. Something that contrasts this background. It doesn't matter what color it is  'cause we're gonna change it later on.

I'm gonna use upright green. Okay? And uh, the weight, the stroke's gonna be one pixel. Okay? So drawing shapes like this, like arrows  and crowns are really easy  because um, when we are using the pen tool,  you just click once for a corner, okay? And we'll do curves in a second.

So all you gotta do is work your way around. So click once, okay? And you can see this thing's kind of attached to it. Ah, hey, don't worry about that. It's just kind of previewing where the line's gonna go. I'm gonna click once again here, click once again here  and you can see that line green line starting up here.

Click once again here once again here once again. There, there, there, there, there. We've got ourselves a terrible irregular crown. Okay? But it's just like a drawing exercise. So let's not worry too much about it.

Let's give it a fill. Okay? So grab our black arrow with it selected. Okay? Click off in the background. Click on it.

Okay. I can give it a fill color. I'll make you, yeah,  give it any old fill color  and give it a stroke of maybe none. Awesome. We've got a crown. Okay?

To see it by itself, you can turn the eyeball  off on this background layer. And that is our really credit crown. So let's look at our clover. Okay, so what I wanna do is this kind  of like I'm living an island now I'm a kiwi. Kinda get it. Yeah.

Um, so we're gonna draw this  and we're gonna draw them as three separate parts  and then kind of like combine them. 'cause a clover obviously doesn't have these gaps in,  but we're turning it into a drawing exercise. So what we're gonna learn now is we've  worked out that corners. You click once to get a curve, you click and drag. So we're gonna start, it's best  to start at a corner 'cause it makes it easy. So I'm gonna click once you see that line's still attached.

But instead of clicking again,  which is gonna give us a corner,  what I wanna do is I've undone then. So I've clicked once down here  and what we wanna do is find kinda like halfway  through this curve, this curve goes from here all the way  around and literally halfway is about there. But what you wanna find is the apex, okay? Where it kind of, where it changes the most. You can see that about there is like the point  of the corner or the apex. And watch this, if I click  and drag, you get this little handle that comes out.

We saw them earlier, okay, I'm clicking in holding  and dragging and we can wiggle it around. So don't be afraid that drag it, watch this. I can drag it in so it's really tight  and really sharp corner or I can drag it out  and it can be a really long exaggerated corner. So in and out and wiggle it around  to get it to go the angle you want. Now what you'll find is you'll never  get it right the first time, right? You'll kind of wiggle around, you'll spin ages  and don't worry, this is kinda like phase one.

We can fix it up afterwards using the white arrow. So I'm gonna kind of drag it until I find there. Okay? And then is this a corner or a curve? That is a corner? Okay, so people have a tendency to click  and drag this one as well, which is not what I want.

I'm gonna go here and just click  once 'cause that is a corner. It's a big change of direction. Can you see the big hoop at the top here though? You're like, oh, lower erect it. That's just part of drawing with the pen tool. We can fix this up later on easily enough.

So I'm gonna undo that. There was a corner click once. This thing here is a curve click and drag. Okay? And down here is this a corner or a curve? It's a corner.

So's gonna click once  and we're kind of getting there, right? Yep. That's what we've drawn. Um, so once you've got the kind of corners, I guess the uh,  the points roughly in the right point,  then you can fix it up with the white arrow. Okay? There's always a bit of touch up at the end.

And you click on this anchor point here. This is the guy that needs fixing and watch this. I can kind of wiggle him around. Yep. So I fix him, but then this guy's not quite right. So I grab this handle and I give him a wiggle.

Now I can move it up and down,  but see this, I can move it tighter  and into, can you see it's getting a little better? Okay? And I can start wiggling this around. And what you'll find is you'll get this guy perfect  but you'll wreck this other side. There is definitely a lot of toing and froing, okay? It's like a seesaw.

They have to kind of balance out  to look nice and smooth. But you're gonna figure out a kind  of an even Steven between the two. Okay? This guy's the same. This guy here though is maybe not out far enough. I'm gonna zoom in.

Can you see? He just like, there's no matter of bending these handles  to kind of get him to come out. So physically I need to move this guy here out, okay? And then I can drag him out a little bit there. This guy here I try and fix, okay? There's always a bit of toing and froing between the two.

Okay? So I'm gonna zoom out, eh,  it's looking all right for my first one. Okay? So let's go through and it's just a step and repeat. Okay? So I'm gonna grab the pen tool, click once  for a corner out here, click and drag for a curve.

Click once for a corner, click and drag for a curve. Click once for a corner. And  after a little while you can see I didn't wreck this one  as much as the last one, but there's still  a little bit of touchup to be done. Okay, lovely. Now let's try the third one  and hopefully as you are going along,  your first one will look terrible. I imagine it'll be this big kind of ery thing.

Okay? And that's okay. Just forget about him. You had a crack. Try the next one, try the next one. And by the third one it'll still probably be reasonably bad.

Depends on your uh, skills towards uh,  drawing with a pen tool. Some people grab it. Now I've taught thousands  of people the pen tool and I promise you  everyone is terrible for a long time. It takes a lot of practice with the pen tool, okay? To get the hang of it. So here we go.

You can adjust them up. Now you might find it's easier. So if I click off and click back on it  and to say actually I want it to have no fill  and I have that green stroke around the outside,  just while I'm working to make it a little easier  to see the thing underneath. Okay? And don't be afraid to move the anchor points  as well if you're not finding they're working. Okay?

Now let's look at this last part, okay? The little stalk I'm gonna grab back to my pen tool. Gimme a pen tool and watch this. It's gonna click once, okay? And if you're finding it really hard,  can you see it's trying to jump around and join  and link and do all that sort of stuff. That can be helpful.

But in terms  of the pen tool, often it's not. So I'm gonna undo to get rid of that point  and I'm gonna turn off my uh, smart guides. Where are you? Smart guides. I can't see you anywhere. There you are.

Smart guides. Okay, pen tool. So click once for a corner. Okay? And you can see here this is just a really slow curve. So what I need to do is halfway  through it about there, I'm gonna click and drag.

And this is where it gets a little weird. You can kind of see, you see here,  I'm just gonna kind of bring it in. Click once there, I'm gonna make this a flat end. Okay? And then there's a, just a slight curve in here. So I'm gonna wait about halfway click and drag.

Which way do you drag? People do this all the time. They drag it this way and  they're trying to, it's not working. This guy needs to go over there. Hello. Okay.

And if it goes horribly wrong, okay, if you do do that  and let's go this one and you go this way  and you're like join it  and you're like, duh, that doesn't look right. What you can do is grab the white arrow, okay? I'm gonna zoom in a bit and I'm gonna say this guy here,  you need to be switched around. Let's switch it around. Okay? You can start adjusting it.

Now I'm gonna select this guy given the same fill color. I gonna use eyedropper tool. We learned him in the early exercise eyedropper tool. Nice. All right, that guy's pretty terrible. You could cheat, I'm not gonna know.

I'm gonna copy and paste them. If you get one of them good,  just go and repeat 'em. Okay? And what we'll do now is  before we move on to the kiwi, uh,  we're gonna kind of join these guys up. So just get them so they overlap, okay, this guy here,  I want to stick out but maybe not like that. There we go.

Like that. So they're all overlapping. And remember our amazing tool that joins things, okay? I'm gonna select them all. They're all separate shapes. You could leave it like that.

There's no,  no real problem with that. But say you wanna join them all, okay,  let's use the shape builder tool  and you can draw across all of these. Can you see I can drag across to join those two,  join those guys, join those guys. You might have to zoom a little bit. So I want all these  guys to be part of the same gang  along with the S store care. You can see now the one complete shape.

Lovely. How awesome are we? Now the ugly football bird. Okay, I love this bird, but not my drawing of him. He's got a weird load chin. Anyway, so this guy's gonna be more complicated.

It's pretty much just a long version of this. Okay? So let's go and do that. Let's grab the pen tool and let's start with a corner. I'm gonna start with this one here. Okay, click once and which way am I gonna go?

Now I'm gonna go this way. Now this guy has some, he's not just  one complete circle across here. So if I tried to just do it this one I'd get there mostly  okay, but  because he's got kind of like a, a kind of an arc there  and a different arc at the back,  what we might find is we're gonna use two uh,  two little handles to make it go around. Now don't be, what a lot  of people do is they'll go like this  and they'll add lots of them, get the curve, okay? And that's fine and it kind of works. But you'll end up with a shape.

Let me turn the background layer off. You'll end up with a shape that's never that smooth. There's all these like little jinx in it. Okay? So I'm gonna turn the background layer back on. So it's always better to use as least uh,  anchor points as possible.

And, but when you're new it's hard to know,  you know the least you can do. But in this case it's probably gonna need two. So I'm gonna go one, okay, just for corner click once,  then over here I'm gonna go maybe about there. Click and drag. Okay? And I'm lining it up bush.

Okay, I'm gonna come down here  and maybe another curve around buyer's bum. Okay? And I don't need much there, okay? Um, you can see it was kind of working okay. And you have the inclination just to go click once, but then  because there's a corner point, it's gonna be very hard  to get that to look smooth through there. Can you see that little j?

So don't worry if you get  to here, you just need a little bit of the handles. We can fix this up afterwards by tucking him back in,  but at least it's going smoothly through the curve, okay? And you can click here once  and you'll be like, that looks terrible Dan. That's okay. Remember why arrow afterwards we can fix it up. Now these terrible feet,  I dunno what I was doing with these.

They're terrible. What you might do as well. 'cause can you see I, I'm only  kind of guessing what's in there. What I might do is I'm gonna switch him out  to have no fill and have a stroke. I'm bringing the stroke to the front. Okay?

I'm using this one over here because while you are using the  pen tool, that thing we love disappears. So I'm using the swatches panel  and I'm gonna use green for my stroke  and it still continues on with a pen tool. Okay? So clicking here, clicking here,  that's my terrible foot. Now halfway through this curve I zoom in a  bit, click and drag. Then here's my corner click once click and drag.

Click once, click once for my muted feet. I don't even know how many toes my bird has. I'm a terrible kiwi. Okay, so lots of corners. Now this one's kind of cool. This goes uh, curves that way,  then curves that way, then curves that way.

So there's gonna be three. So there's gonna be  this one, okay? There's gonna be this one and there's gonna be this one. Now if yours looks nothing like that, don't worry. Kind of get them in the right positions  and we can use the white arrow afterwards. Now down here is a corner,  but in the middle here about middle, great curve,  click once, big curve  click once curve, click once and let's go fix up this.

It's okay, my drawing's not good. So the drawing on top of it can't be much worse, right? So I'm gonna select it with my black arrow. Okay, there you go. And I'm gonna give them no stroke  and I'm gonna give 'em fill color. Now I don't have my swatches from the last exercise.

So what I'm gonna do is probably just color 'em random color  and then change 'em when I drag 'em to my other document. 'cause those colors will exist there. But what I'm gonna do now is grab my white arrow,  click on any of these anchor points  and start messing about with it to try  and some sort of dignity. My little bird. Oh man, that's bad. I'll try and fix up his head while we're there.

Now I always find it's easy just to draw over the top hand,  draw it first, and then draw over the top  and fix it up afterwards. Um, you might be different. You might just start hand drawing it. Okay? Um, but yeah, so the pen, the big, um,  one last thing I'd like to share with you  with the pen tool is say there is a, um, a curve  where there should be a corner  and corner where there should be a curve. We did this a little earlier when we started  adjusting existing vectors.

Check out that video. But  let's say I want this to be a corner. Now he's some sort of ridgeback bird. Okay? So I've accidentally put a corner where I wanted, uh, sorry,  a curve where I wanted a corner. So what I'm gonna do is click on this.

You can see it's a nice little point. Now he's like, um, camel bird thing. And if I want to turn it back to having a curve,  you can click, I can click curve. Let's not put it exactly back. So I'm gonna have to drag 'em out. All right?

Okay, nice. Awesome. Say there's a point that you don't want. Okay, say that I wanna do this all in one point. There's this extra one that I don't want. You can grab the pin.

Oh, you can, sorry, select on any of the anchor points. Okay? And you can see up here it says anchor  and there's one that says min remove selected anchor  point and he'll disappear. Okay? And you might just try  and actually move this one around and try  and get it one big go 'cause it's smoother  and it's, you can see it kind of works. It actually looks better.

I'll leave him like that. All right, I don't like him. I'm going back. All right, so, um, that's if you wanna add an anchor point. Okay? So what you can do is you can grab the pen tool again  and if you decide that you need another anchor point about  here, see with just with the pen tool selected,  I can just click on there and I've got an extra one.

Gives me a little bit of extra control, okay? To start moving around and start playing with these guys. I'm gonna undo it 'cause I don't want it. Alright? Um, now we're gonna move it to our other document. So I'm gonna zoom out.

I'm going to,  I don't need the crown, I just need these two. I'm gonna slick them both. I'm gonna get to copy. So edit, copy, jump over to Illustrator. And what I'll do is I'll bin these guys  as lovely as they were. I don't need them anymore.

Okay? And I've actually drawn my logo. You can reuse yours. You could delete the logo. Oh, delete the logo  and then use your, use your new one that you've made. Okay?

But I'm just going to paste these guys in, right? You. Ooh, interesting thing. Can you see any bit of it? Came along. It's 'cause I think I only had the white arrow.

I only had that bit selected. Okay, so grab it with your black arrow, click off. Select both of these guys. Copy select these guys. Hit paste there. They're both of them.

Now I can go into my swatches and pick, um, my fill color. I'm gonna pick the green. And what I'm gonna do is  I'm gonna line them down the bottom. It's kind of like a, I don't even know why they're here,  but more of a pin tool exercise. Do I love them? I'm loving the kiwi more.

He's my Kiwi camera. Little clover. All right. Now gonna go in down the bottom here just  as like a cool little graphic thing. A bit big. All right.

Um, that's it for the pen for the moment. Um, yeah, uh, you might have  to rewatch this one a couple of times. Um, pen tool can be hard. Don't get discouraged. It is hard. I promise you to, uh, you ask any graphic designer  that knows the pen tool, they'll hate it for a long time  until they've had to use it for a little while  and then they'll kind of bridge that gap  and start being able to use it  and then it becomes their best friend.

I love it. You'll probably hate it at this stage. Okay, then just use the sheep of the tool  and pen tool when you have to. All right, that's it for this video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025