Skip to main content

Pen Tool

Lesson 47 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

47. Pen Tool

Next Lesson: Drawing Practice

Lessons

Class Trailer

Getting Started

1

Getting Started with XD

02:21
2

What is UI vs UX

06:19
3

The UX Brief & Persona

11:22

Wireframing Low Fidelity, Type, Color & Icon

4

Wireframing (Low Fidelity)

01:58
5

How Wide for my Website

13:06
6

Existing UI Kits

07:49
7

Working with Type

09:09
8

Basic Colors & Buttons

14:14
9

Free UI Icons

11:45
10

Footers & Lorem Ipsum

05:27
11

New Pages & Artboards

04:20
12

Class Project 01 - Wireframe

11:11

Prototyping a Website

13

Prototyping & Interactivity

08:53
14

Create a Popup Modal

07:57
15

Prototype

02:54
16

Groups & Isolation Mode

02:30
17

How to Use Components (Previously Components)

17:19
18

Production Video - Left Nav

03:52
19

Repeat Grid

05:27
20

Updating Components & Repeat Grids

08:54
21

Prototype Tricks

06:03
22

Navigation Tricks & Tips

04:48
23

Class Project 03 - Components

04:07

Prototyping an App

24

Mocking Up an App

09:40
25

XD App on Your Phone

08:04
26

Fixing the Position

01:01
27

iPhone & Android Status Icons

03:10
28

Production Video - Login

06:45
29

Sharing Wireframes

13:32
30

Recording Your Interactions

03:13
31

Class Project - Wireframe Feedback

01:21
32

Mood Boards

07:43
33

Class Project - Mood Board

00:59
34

12 Column or Grids

04:57
35

Working with Colors

09:02
36

Tricks for Using Colors

06:34
37

Gradients

03:50
38

Class Project 06 - Colors

02:14

Text & Drawing

39

Use Web Safe Fonts

18:00
40

Character Styles

06:59
41

Font & Text Tips Tricks

05:43
42

Plugin Lorem Ipsum

05:39
43

Paste Properties

13:15
44

Class Project 07 - Text & Buttons

02:21
45

Draw Custom Icons

04:13
46

Strokes & Lines

14:28
47

Pen Tool

14:34
48

Drawing Practice

07:15
49

Production Video with Tips

12:27

Working with Illustrator, InDesign & Photoshop

50

Illustrator in XD

09:34
51

Class Project 08 - Custom Icons

01:49
52

InDesign in XD

11:38
53

Pros & Cons for Images

03:58
54

CC Library Connection

11:01
55

Adobe Stock

05:20
56

Free Images

01:48
57

Masking

06:44
58

Photoshop in XD

08:41
59

Infographic

12:12
60

Class Project 09 - Hi-Def Mockup

05:38

APP Design

61

Mobile Phone Mockup

18:08
62

Class Project 10 - Mobile Website

01:24

Placeholder content & Plugins

63

Hidden Features for Repeat Grid

05:17
64

Plugin - Content Generator

04:29
65

Plugin - UI Faces

03:15
66

Plugin - PhotoSplash

04:31
67

Plugin - Copy Cat

03:19
68

Advanced Asset Panel

04:37
69

Advanced Symbols

07:52

Micro Interactions

70

What are Micro Interactions

07:21
71

Button Grow

06:13
72

Animated Image Gallery

06:39
73

Full Vector Change

08:19
74

Class Project 11 - Micro Interactions

05:12

Prototyping Advanced, Voice Interactions & User Testing

75

Time Delay Transitions

04:42
76

Popup Menu or Modal

12:16
77

Animated Mobile Side Nav

03:26
78

Drop Down Menus

03:24
79

Drag Transitions

07:19
80

Number Ticker Scroll

06:51
81

Alexa Voice Commands

09:37
82

What is User Testing

16:53
83

Unmoderated UX Test

12:07
84

Class Project 12 - User Testing

02:23

Pitching to clients & customers

85

Mocking up in Photoshop

09:21
86

ProtoPie

02:40
87

Add Animation Using After Effects

09:39
88

Export Images & Assets

12:56
89

Export Code Using Design Specs

10:49

What Next

90

Class Project 13 - Roar Cycles

10:29
91

Conclusion

05:32

Final Quiz

92

Final Quiz

Lesson Info

Pen Tool

Hi there, this video, we are going to learn how to draw stuff with the pen tool in adobe. XD custom stuff. Easy stuff a little bit harder. And then you have a project to draw the owl yourself. Alright, let's jump in now and learn how to use the pen tool. Alright. It is time to learn how to draw with the pen tool. So the first thing we need to do is we're gonna go to file new. Okay. And we're going to start with any old page. Don't care. We're gonna use web 1920 might as well. We're gonna bring in our image, we're gonna use our shortcut. Do you remember what it is not telling you? Okay if you don't know now, go check out the file and find import and then write it on your hand. Cool. And I want to find pentacle dot jpeg. So bring in that one. I want to lock it the shortcut for that. Not telling. I will command L. Or control element PC. Okay, so so it won't move. Now. Remember I'm going to go through a quick version of the pen tool. I guess it's reasonably tough to learn. Like it's one of...

the as a tool, it's the hardest one to learn the next day by far. It's in here mostly because lots of people already know how to use it. If you don't, I'm gonna give you the once over here, give you the tips and tricks. But if you really want to go hardcore on it, you want to jump into my course with adobe illustrator. I've got an essential and an advanced course. So go check that out when we go proper into the pen tool, zoom into the crown. What does the pen tool do? It's this little fountain pen here. It's what you use when you remember the boolean operators come over here where we added and subtracted. That's a great way of building stuff out of shapes. But let's say we need to make custom, things like this crown. So the default, this crown is going to be super easy. Watch I click once click again, once click again, once click again once so clicking once is super easy with the pen tool. You can make a crown. No problemo. The one thing you might see is that you might see the fill on, which is kind of weird stuff where you're drawing. So as you're drawing, you can just turn the fill off if you want and you can just say actually just want to draw that, then you can give it a fill later on. You can say there you go, that was my film. Beautiful. It's not working the field doesn't work, click off, click back on again and then give it a nice quickie Phil it's not you. It's me. All right, drag this up and make sure you drag because it was the, the color thing was all the way up there. I'll pretend that it's like a test. It wasn't just back then Katie's green, can't use green. This whole course I'll use murky peach. Alright, so that's how to use the pen tool to draw straight. Things pretty easy to update it afterwards. You just double click on any of these corners, they go blue and you can make adjustments, you can shift, click more than one to make an adjustment. So if you need to make crowns or castles, you're you're in luck with the pen tool where it gets more difficult as doing curves, you can see with the boolean operators, I couldn't make this shape. So what I'm gonna do is I'm going to go to the pen tool, I'm gonna show you the other way of using it. So the first one's the hardest one. So what you do is instead of clicking once to get curves to get cornered. Sorry, Okay, because that's not going to work, I'm going to undo. So it's all the way back here, grab my pencil again. What you do is you click and drag so click, hold, hold, hold hold and drag out. It's kind of weird, right? And you just drag it out and then this kind of turns into a line. It makes more sense when I get here, click and drag out so I'm trying to follow this line around now. Where do I put these curves is a tough one comes with a little bit of experience, but the basics are you want them on apex, Can you see there's like a big curve here. Kind of like it's the same kind of curve all the way around and it changes on these two leaders gets pointier. So I've got a curve here curve here. So this one kind of changes halfway I'd say about their click and drag down. It could have been further around. I'm okay with that. So there's one here, click and drag whatever one here, click and drag it is super tough because you end up kind of going well where do I put it in here and you can delete them afterwards and you can adjust them afterwards. That's the big thing. People think they're trying to need to get it perfect first time. Okay, you will get a perfect first time when you get better at it but in the interim I'm going to click and drag, click and drag to give you some small ones, big ones and I'm trying to add them on. The kind of changes the little apex of these little curves now while you're doing yours okay? I betcha it's gonna look bad. Like I teach this a zillion times and you need to be prepared for us to look a little weird. We're gonna practice a couple more and then you need to practice on your own. Okay, so is my one great? No, I'm just kind of going slow and kind of showing you where it should go. Honestly. I could make it perfect, probably not. Alright, so the last one is probably the hardest one. Well I said the first one's the hardest one, okay now maybe the second one, so when you get back to here you'll be tempted to with the pen tool, you should be here dragging it off. So you get here, you want to kind of click once, right click once you end up with the corner, remember clicking once is a corner like our crown, so get back to the beginning, it's the same pen tool, I want to start from there and I click hold and drag to get the last curve now you see I wrecked that and you're like oh I was dragging that and I'm gonna do it again, so I'm gonna click in here, grab the pen tool, click on this one and drag it out and you can see I just can't get both of them, don't worry, okay get it kind of close then you can grab your black arrow when you're finished and work around and say actually gonna move that down a little bit, tuck that in, that needs to come out a bit further. This one here needs to go around, okay you can do slight little adjustments loads, game move this around, maybe this needs to come in a little bit okay and you can go around and don't be afraid to move these around the line to a different position if it's not working for you if you can't work and you're like man, it just doesn't work. Don't be afraid to move these little guys around if you find it's jumping and snapping, you can just use your arrow keys. Can you see you can tap them around? I'm just using the arrow keys on my keyboard to kind of just fix it up a little bit. There you go. He was well probably needs to come a little bit, see what I mean. I'm going to do the circle on the inside and then I'll get you to do all this circle in here by yourself, the pencil tool Alpental. Remember the 1st 1 is click and Drag, which is really weird. Then the second one click and drag now with a circle, it always has to be a minimum of four. Okay, you can add more so it's good enough so you can have less or more. So less means I can't have just to it'll work but it's really hard to get a perfect circle. Okay with just two little points really, you need four. Okay, can you do with three? You can kind of get it with three. Okay, so maybe one there one there and it'll look okay considering ours is not perfect to start with, you can get it pretty good. Okay, perfect circle needs four. Now more you have, I feel like actually I just like doing this. Just click click click The problem with doing lots of little ones is that the curve is not going to be really nice and fluid, it's going to be, it's gonna be very hard to get perfect, okay, so I'm gonna click off, I did a kind of a bad job too, like to show you show show off the badness, but even if you do it perfect, because there's so many anchor points controlling it, okay, that's those little dots are called anchor points and it just, it's really hard to get straight to fix it. Double click it with the black arrow, You might go in and say actually going to delete a bunch of these, so just click on one double click the edge, so I just want 41234 and you're like, that doesn't look good dan and you can just drag these out, try to have them in the corners, I'll show you why that's quite good and if I grab a circle and draw it out, grab my black arrow and double click it, can you see it's actually just drawn, that thing for us. These are the anchor points, Okay, and you'll see that to do it perfectly. These guys need to be completely across, like directly across from each other and these little handles need to be the same length as the little handles of poke out, like a little seesaw, they need to be the exact same length and in the perpendicular to each other, you'd never try and draw a perfect circle, You just use their lips till dan cool, so give this a go. Hopefully do it better than me and then once you're done, give this inside one to go as well. Let's move on to a bit of a combo one because that was all strangers. That was all curves, we'll do this guy here are ninja, so we'll do the outside first. So what you need to do is ask yourself, is it a curve that I need or a corner that I need? And remember that curve is dragging and a corner is just clicking once. So we'll start with the corner because it's easy ones click once there's there's a curve or a corner. Everybody everybody corner click ones, this is a curve or a corner corner, Okay, you know it's a corner because it's like bang and changes direction. A curve is this thing here, So I need to put the curve halfway around it never halfway around and how do we get a curve click and drag, pick and drag. Don't worry, it's not perfect. One thing you might do is you might go, huh, stop looking because you just kind of dragged it the wrong way, you dragged it up instead of down if you are fighting with your like just try giving it a big loop until you find hopefully somewhere that it looks okay, okay this but here it's a change of direction, you're like, oh that curve is not good, we can fix it. Remember now this is a curve or a corner to corner kind of changes direction quite sharply click once like once because Corner, this is a weird one. Okay, put it in here on purpose because you'll be times you're like, is that a curve or a corner? So that's the beginning of this, I'm going to click once to get that kind of straight line between here, then put in the curve here, click once for the corner there once. Now you can do this, watch click and drag but then you're like, it's kind of attached here and it's not quite right, so I'm gonna undo and if it breaks off, mine didn't, I'm gonna break it off. I had to escape. Okay, and I go back to my pen tool, it's not going to want to join up until you click it once. Then this one here, try and do the curve in the middle here, click once, click and drag. It's kind of like a big circle here. If you're thinking we could totally do that with a boolean operator, you're totally right, but we're doing the mental, you dropped custom stuff, we got custom, we are custom ninja, give him a full color. So ninja color. Ninja color. There you go ninja. Now we're going to draw the center bit, we should use just like you can totally, I know what you can do, you can do that, you can say I want rounded corners, but I just want the top right. Which is that one, that one there. I'm gonna put in 40 If you put in way above what it should be, it'll just go to a complete circle. It's probably only a curve of about 10, but I just put in 40 because I want it to be way beyond what it needs to be actually I wanted all corners, don't know what I'm talking about anyway, you got it so I could do that. That's not what we want to do today though. We want to do the pen tool, we're doing custom shapes. So Pento, I'm going to click and track That weird one, click and drag so straight down in the middle, straight down like that. Okay, click once. Didn't do a very good job, but maybe we can fix it afterwards. Not too bad. The reason I want to do this is because this is kind of like a combo deal. I want to cut a hole in it. Just got to make sure this line that I drew is on top. I can select both of them and use my bullying now. So you just gotta work out. Don't worry if you're like which one of these ones it is that is the life of every single designer just smash away at them. If you're like me and lots of people I know you go like this one. No, this one I'm just clicking undo. Okay to go back and become the next one. So it ends up being the second one in. Normally. Normally, normally always the second one in the subtract. But you get that. I don't mean we can do two circles in here. Try and draw them with your mental maybe your little project and this is your main project. The owl. Okay. He's tough. He's got curves and corners. He's got a little beacon there and he's got eyes. You're not allowed to draw them with ellipses. Okay? You have to do it with the pen tool. So my buddies, this is going to be your little practice project. Once you've finished it, I'd like you to take a screenshot. Maybe just kind of like color it. You can use gradients, move it off and then do a screenshot of all your amazing drawings, especially the out. I'm going to see how he is. What color is your pick and how the lines are going. If yours is terrible, send it in any way. It's fun to see everybody's different ones. I promise you if you put this up in the assignments and the comments don't stress if you're like, man, man is not the best one there. You will find somebody worse than yours. Okay. If yours is the worst, put yours there, you'll make somebody else feel better. It's probably not the encouragement you want. If yours is the worst, but you get what I mean right stick it up, show us what you've got and especially because you're going to come back in a few months from now when you've been practicing with the pen tool you're gonna go bam look at my new hour now and it's going to be perfect or at least close to it and you're gonna look at the old one and you'll be able to laugh. Alright so that's the pen tool kind of introduction, click once for a corner, click and drag for a curve. You can move anchor points, click on them. Delete them. There are a few things you can't do in XD with the pencils. This is like this is like 70% of the pentacle as used here in the X. D. If you want more. If you're like oh I wish I could do things like this. Jump into adobe illustrator which is kind of like it's the main place adobe has for using the pen tool and find an exercise. I've got a few of them using during with the pen tool. We go more and more advanced in the illustrated advanced course as well with the pen tool there's another tool you might look at called the curvature tool. Kind of like a new version of the pin tool in illustrator. Anyway let's jump into the next video. We're going to practice some of the tips we've learned here and draw some icons

Class Materials

Bonus Materials with Purchase

Six Completed Files
Exercise Files

Ratings and Reviews

Haseebullah Johar
 

Thank you, Dan Scott, for providing such a beautiful Adobe XD course. I completed the course today and noticed a couple of things that are missing. I want to share them here so that you can upgrade the course, which would be helpful for us. Hover state and toggle state. Dragging pages from 1-2 to 2-3 and then back from 3-2 to 2-1 with dragging is not working. Another thing is that we learned scrolling the website from top to bottom, but scrolling or pushing things from right to left has been completely omitted. These are the things I have noticed, and I would like you to upgrade them so that we can improve our Adobe XD skills.

Student Work

RELATED ARTICLES

RELATED ARTICLES