Pen Tool
Daniel Walter Scott
Lessons
Getting Started with XD
02:21 2What is UI vs UX
06:19 3The UX Brief & Persona
11:22 4Wireframing (Low Fidelity)
01:58 5How Wide for my Website
13:06 6Existing UI Kits
07:49Working with Type
09:09 8Basic Colors & Buttons
14:14 9Free UI Icons
11:45 10Footers & Lorem Ipsum
05:27 11New Pages & Artboards
04:20 12Class Project 01 - Wireframe
11:11 13Prototyping & Interactivity
08:53 14Create a Popup Modal
07:57 15Prototype
02:54 16Groups & Isolation Mode
02:30 17How to Use Components (Previously Components)
17:19 18Production Video - Left Nav
03:52 19Repeat Grid
05:27 20Updating Components & Repeat Grids
08:54 21Prototype Tricks
06:03 22Navigation Tricks & Tips
04:48 23Class Project 03 - Components
04:07 24Mocking Up an App
09:40 25XD App on Your Phone
08:04 26Fixing the Position
01:01 27iPhone & Android Status Icons
03:10 28Production Video - Login
06:45 29Sharing Wireframes
13:32 30Recording Your Interactions
03:13 31Class Project - Wireframe Feedback
01:21 32Mood Boards
07:43 33Class Project - Mood Board
00:59 3412 Column or Grids
04:57 35Working with Colors
09:02 36Tricks for Using Colors
06:34 37Gradients
03:50 38Class Project 06 - Colors
02:14 39Use Web Safe Fonts
18:00 40Character Styles
06:59 41Font & Text Tips Tricks
05:43 42Plugin Lorem Ipsum
05:39 43Paste Properties
13:15 44Class Project 07 - Text & Buttons
02:21 45Draw Custom Icons
04:13 46Strokes & Lines
14:28 47Pen Tool
14:34 48Drawing Practice
07:15 49Production Video with Tips
12:27 50Illustrator in XD
09:34 51Class Project 08 - Custom Icons
01:49 52InDesign in XD
11:38 53Pros & Cons for Images
03:58 54CC Library Connection
11:01 55Adobe Stock
05:20 56Free Images
01:48 57Masking
06:44 58Photoshop in XD
08:41 59Infographic
12:12 60Class Project 09 - Hi-Def Mockup
05:38 61Mobile Phone Mockup
18:08 62Class Project 10 - Mobile Website
01:24 63Hidden Features for Repeat Grid
05:17 64Plugin - Content Generator
04:29 65Plugin - UI Faces
03:15 66Plugin - PhotoSplash
04:31 67Plugin - Copy Cat
03:19 68Advanced Asset Panel
04:37 69Advanced Symbols
07:52 70What are Micro Interactions
07:21 71Button Grow
06:13 72Animated Image Gallery
06:39 73Full Vector Change
08:19 74Class Project 11 - Micro Interactions
05:12 75Time Delay Transitions
04:42 76Popup Menu or Modal
12:16 77Animated Mobile Side Nav
03:26 78Drop Down Menus
03:24 79Drag Transitions
07:19 80Number Ticker Scroll
06:51 81Alexa Voice Commands
09:37 82What is User Testing
16:53 83Unmoderated UX Test
12:07 84Class Project 12 - User Testing
02:23 85Mocking up in Photoshop
09:21 86ProtoPie
02:40 87Add Animation Using After Effects
09:39 88Export Images & Assets
12:56 89Export Code Using Design Specs
10:49 90Class Project 13 - Roar Cycles
10:29 91Conclusion
05:32 92Final 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
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 Classes
Web Design