Vector Illustration: Drawing with the Pen Tool

1. Introduction: What is going on guys? I am Scott, Animator and Illustrator behind Burnt Toast Creative. My style is Queen, Pastel, Vectors, playful, cynicism, trying to bring some joy to the darker things in life so I'm not so much trying to teach my style, but the techniques I use to achieve my style. We are going to be designing a character from scratch. To be a character with hardline, it is going to have a very graphic feel. The first part is coming up with an illustration. The second part is ingesting the sketch into Photoshop, clean it up and preparing it for the third part, which is taking full advantage of the pen tool and Adobe Illustrator. The fourth part is coloring it while considering light and shadow. You do not need to be an experienced designer to take this class. I think that basic knowledge of Adobe Illustrator and you are ready. I would love to see what you guys come up with. You can clean up any old drawings and transform them into something very beautiful. 2. Sketching: So, the first thing we're going to do is draw our character. We're going to start with the yellow pencil crayon and you'll see why in a second. I'm going to be doing a guy who's chopped being himself in half. So, with the yellow pencil crayon, you just start really loosely. Make all the mistakes you want to. If something doesn't feel right, just go over top of it. Press hard, press light, whatever you want to do. Just start forming out your shape, almost like it's clay. If the curve is wrong, come back, fix it. So, I'm not happy with that. So, I'm going to just draw right over the top of it and just keep playing with it until I get a line that I'm happy with. But no details at this point, just the overall form of what you're trying to achieve, the composition, so to speak. I'm always trying to keep primitive geometry in mind like circles or bean shapes that are made of circles. My style is very circular and influenced by my design background. So, I'm always sort of keeping that in mind, but it doesn't necessarily need to be that way. Trying to keep motion in mind, too. The way the blood pouring out of hand is sort of falling around. Figure how to shadow maybe at this point. See, this is wrong. So, I'm going try and adjust it here. This arm feels a little bigger than this one. So, I'm going to maybe cut this one back a bit and make this one a little bigger still. A knife. So, you can see, I'm just drawing right through the same shape here. Later, this line won't be considered. But at this point, it doesn't matter. You can figure out your curves. Just connect this one right through. Now, we're going to switch to purple. I've chosen purple because it's a complementary color to yellow. So, if you don't have yellow and purple, you could choose orange and blue. Just two colors that are opposite of each other on the color wheel. So, try and pick from the drawing the pieces that are in the foreground and draw them first. So, this leg is in front of this one. This arm is in front of this torso. So, I'm going to draw those first and then draw the objects that are behind, second. Again, I'm just choosing the lines that are worth keeping and ignoring the ones that aren't. So, I'll come down to this leg that's in front. Now, once those are drawn, you can move to the items that are behind. Now, I'm just applying the same principle to every little detail here. So, this finger was behind this finger, just behind this finger. So, I'm drawing down on those. Then, this knife is behind those fingers. So, I'll draw it after all of them. I can add details, too. I'm adding sleeves and face, some thickness to this severed torso. You can add some shoelaces. You can switch back to your original color and add things. So, I'm going to add a little pant leg. You just sketch out some new details. Then, when you're happy with your rough line, just come back to your secondary color. Cool. I'm going to run and scan this into the computer and I'll show you why I used two colors. 3. Scanning & Importing: So, I've just run and scanned this in the Photoshop. You just hit import and scan it and you could also use the scan feature that comes with Dropbox, you could send it to Photoshop from your tablet if you drew with that. So, anyway, you want to get it to Photoshop. It's fine. Now, we have it here. It's raw. You can see both the colors we used. It's rotated, funny, so we're going to start working with it. So, the first thing I'm going to do is obviously orient it properly and center it, and so just want image rotate 90 degrees. I'm just going to use the crop tool, you can push C. Make sure your background color is set to white. You have two colors over here on the left. That just makes you the one at the back and set to white by double-clicking it and setting it, push C and give your image some breathing room. So, now we have this raw image staring at us. We're going to hit control U, which brings up your hue and saturation dialogue, and I'm going to go to the master color drop down and select the yellows, and I'm going to push the lightness all the way up, and you'll see they disappear leaving only our secondary color. So, right there, we've cleaned up the drawing immensely. All of our rough sketchy thought process lines are gone. So now, we're left with just the purple or magenta. If you were using other colors, just select from that drop down menu the color that you used first. So, from this point, we're going to click E to bring up our eraser tool. Right click, set the hardness all the way to 100 percent, and your size to whatever you need it to be it for your drawing. You can also use the square bracket to lower the radius of your eraser size or increase it. Now, I'm going to start just erasing any of the extra lines that we don't want. Cool. Okay. So, now we have a pretty clean drawing to work with. Before we take it to Illustrator, we're going to do one more thing. I'm going to open what's called the liquify tool. You can adjust the size over here on the right. The pressure, for me, a 100 percent pressure seems to work, and it works just how it sounds you. You turn your drawing into liquid and you can push the lines around and adjust them and make them more accurate or more what you were trying to achieve. With my style, I like to have perfect curves. I just feel it gives it a more designed to look, so I'm going to take the curves that aren't perfect and try to push them closer to the mathematically perfect curve. His arm feels a little short, little smaller still so I'm going to pull it up. So, it's really turns a drawing into something quite viscous. So, now that we have a rough drawing that we're as happy as we're going to be with, we're going to hit control A to select all, then control C to copy to your clipboard. So, now that we've copied this to our clipboard, we're going to go over to Adobe Illustrator. Select new document in Adobe Illustrator. It really doesn't matter what size the document is. Just make sure that it's set to RGB color mode which is under more settings here. You can see color mode, this might be collapsed, so make sure advanced is drop down and make sure that's not CMYK but RGB. Create document, and there you go. Now, because we've copied this drawing from Photoshop to our clipboard, hit Control V, and your drawing will show up in Illustrator. Now, we're all set up in Illustrator and the next step is to lock this in and trace over it with the pen tool. 4. Using the Pen Tool: So let me just explain to you how the Pen tool works a little bit before we start tracing over our character. So, focusing on the Pen tool but just keep in mind the two different types of selection tools. You have the main Selection tool and the Direct selection tool. The main selection tool selects the entire object and the direct selection tool selects part of the object. Just keep that in mind. To use the Pen tool, you click on this old school nib on the left here or you can just push P. That brings up a little pen cursor that's flickering like crazy and I'm not sure why, and set your stroke or set your fill on the bottom left here to none. We're just focused on the stroke at this point. This hollow box is what defines the color of your stroke. Black. That's good. I'm going to turn up the thickness a little bit so you can see it. Once you have your Pen tool selected, click where you want your line to begin, click where you want your line to end, click Exit to let go of the line. So. That's the basics of the Pen tool. If you click where you want your line to begin click again and click again. You now have a line with a vector point in the middle which can be grabbed with your Direct select tool and moved. With that in mind, click where you want your line to begin, click again, click again. This time, you come back to your first line. You can see the little circle pop up by the cursor here. That means you're closing your shape. So now, you have an object made of three vector points. Cool. So that's that. That's the Pen tool. Now, if you do the same thing but you click and drag before you let go, you pull out something called Bezier handles and they define a curved line. Every time I'm letting go of the line, I'm pushing Exit. P to start the line, click to draw your next point, click to draw your next point. You can either click Exit here to let go. You can click P and join back onto your line, come around and you'll see that little circle again to close your shape. So now, you have a shape, you can fill that shape, you can alter that shape. Those are the basics of the Pen tool. I've shown you how to make a line with hard angles. I've shown you how to make a line with soft angles. Now, there's a way to combine the two. You have a three pointed line with a soft curve in the middle, but you want one to change like a shark fin, for example, or a rolling wave. So, you have your first soft curve, your second soft curve and your third. This doesn't look like a wave. If you wanted to break these two handles, you click shift C and that will give you your Anchor Convert tool, and then you can control them separate from one another and drag this in the angle that you want it to go. Okay, so we're back to our board with our sketch that we've pasted in, and we're going to start drawing over it with the Pen tool. 5. Outlining Your Sketch: To start, I'm going to lock the layer with the rough sketch on it. I'm going to double click that to name it sketch, and I'm going to add a new layer called line, and make sure that that's above your sketch layer. I'm going to push P to activate the pen tool and I'm going to dive in and start tracing over the top. So, click where you want your line to begin and hold and drag to make sure that it is a curved line and then click and drag again. Once you have this line, it's not great, but if you go to your direct select cursor or click A to bring that up, you can grab these handles and pull them to your desired curve. So, at this point, I'm just going to go around and start tracing over my drawing. Click drag. The tighter the curve, the shorter the Bezier handle should be. So, if they're big, you can see that the curve's really wide. If I click and drag and just move a little bit, I get a really tight radius on the curve. I'm going to imagine that this line comes behind this splash of blood here, click in the center of the curve. If you hold Shift, your Bezier handles lock to zero degrees, 45 degrees, and 90 degrees. So, if I'm drawing a line that I know is the very top of a curve, I want to lock it to zero degrees. So, I'm going to come right through this leg here and you will see why in a second. So, I have drawn this line through this leg for the sake of accuracy. This line is this leg coming up behind this foreground leg. So, I know that these lined up perfectly. Now, I can go in, I'm going to push the Plus tool which lets me add a vector point anywhere I want on the line. So, I'm going to add one right where it intersects and again on the other side, then I'm going to add one in the middle, and I'm going to hit delete, and you have deleted the gap between those two points. One more trick I would suggest is using your basic primitive shapes where you can. You don't always have to use the pen tool. So, this shape, for example, the top of the waist is a circle. So, there's no point in trying to guess what a perfect circle is when you have that built-in. There are some other circles that I can see in this drawing. There's one down here at the bottom of the pant leg. So, I'm just going to draw basic shape and rotate it into place by clicking R and then grabbing the transform handle on the side, click V, select tool, and just pop those into place. The next step here is to apply these basic principles and trace the rest of your drawing. I should say that you can continue to fix your curves. You don't have to trace right over top of the lines that you've drawn. This is an opportunity to fix them even further. So, I've gone, I'm going to change at the eyes. I don't like the little dots. I'm going to do happier eyes with the upside down U shape. The neck was a little wonky because I took the liquefy tool too far, so I'm going to go back in and use this opportunity to fix it. Sometimes it's helpful to turn off your layer underneath, and you can see a depiction of the end result, and better look at your line from [inaudible]. So, now that we have got our main outline we are going to define the light source using more lines. 6. Lighting: Okay. So, now that we've finished our outline in Adobe Illustrator, we're going to come back to Photoshop to our sketch, and we're going to define some lighting. The first thing we want to do is choose where light sources, or in other words, where the light is coming from. Once we've decided that, we know that the shadow falls on the opposite side. So, if the light is top left, then the shadow is on the bottom right. So, we're going to add a new layer on top of our sketch. I'm going to use the eyedropper to sample the same purple, just so it looks nice. I'm going to make it a little lighter in the color picker. You just double click on the color tile on the bottom left here, and you can choose your color there. So, I made a new layer. I'm going to push B to grab my brush tool, and they turn it up inside. If you go over top of your document, you can see that the size of the brush. So, I just keep checking. Again, it's like the eraser earlier, you can use the square brackets to adjust the size. I put the hardness to 100 percent and set your layer to multiply. Multiply just means that it overlays on top of the image and still shows the line work underneath. So, now that you have that set up, just start painting in your shadows, and don't worry if it goes outside the lines. You can fix that with the eraser tool afterward. So, I'm just trying to figure out where the shadows would fall. So, on the bottom of the leg here, I'm just using the mouse to do this. You probably would be better off using a tablet. But again, this is just a guide for our project in Adobe Illustrator. So, his toes over here would be casting a shadow on the leg behind. His body will have a shadow, it will be casting a shadow on the arm behind. If you don't get it right the first time, just keep your fingers on control Z, and just keep on doing until you get it right. Then in the head, use the bracket tool to adjust the size. If you get in a more intricate spots like the fingers, this will become second nature as you do it more. Now, you see eraser tool that to cut away tool the shape. Fix up some of the parts where you came out, but you can see here, the brush tool is kind of sloppy and you want to use your erase tool to cut it away, and give you that nice inner curve. Cut that away. I'm just really trying to imagine the way the lights falling on the form. Maybe define the floor shadow at this point. His front foot is touching the floor, so the shadow is right underneath it. I use this select tool to make a circular selection, and then you can hit option delete to fill. I'll do that same thing under the back leg, but it'll be slightly lower because his legs off the floor. I'm going to hit control E and collapse these into one layer. I'm going to hit control U. I'm going to make this green now just to define it, just to differentiate it from our original rough. This is the one with some lighting. So, I'm going to pick a nice like green, like that. I'm going to hit control A, control C, and go back into Illustrator. I'm going hit control V to paste. Now that we have this defined shading, we're going to start a new layer. We're going to go back into our pen tool, but this time, we're going to use a line that's much thinner. It's just a guide for when we're filling in these segments later. Well, I'm going to make a new layer. I'm going to call this layer shading lines and start tracing over top of our defined lighting. 7. Live Painting: So, now that we've defined all of our lighting with vectored lines, I'm going to jump over to a new document and just show you a tool called Live Paint. So, just like we have on our character, we have a thick outline and then a thinner outline defining our lighting. So, I'm just going to make a really quick sphere here just to demonstrate. So now that we have this really simple sphere drawing, we're going to select the entire thing. We're going to go to the "Object" drop-down panel, hover over "Live Paint," and click "Make." You can also hit "Control+X" to do the same thing. Now that we've done this you click "K" to bring up your Paint Bucket tool. You can see when I hover over different regions in the drawing, the closed regions of the drawing are defined by this red outline. That means that they're paintable. It's almost like paint by numbers. So now that this is active. Make sure your Stroke is deactivated. You can deactivate these by clicking the red slash at the bottom. So you have your Stroke clicked. Click this red slash to turn it off. Now I'm going to double-click on the "Fill." So, I'm going to select a nice pinkish tone. Push "K" again to make sure your Paint Bucket tool is the one you're working with, and then hover over the outside of the ball. Then just click, and it fills this region. Now I'm going to go back to my color panel or color picker. Go for a slightly lighter color and hover over the inner portion of our shape. I'm going to put a little foreshadow, so I'll just put a grey. We're done. So now, use your Select tool. Select the entire thing or just click on it. It's automatically grouped when you activate Live Paint. Select the whole thing. Go back to your object drop-down Live Paint again. This time you click "Expand." Now, it's been converted back into shapes. So, now that we've made this, I'm going to go in and delete the thinner line that defines the lighting around the highlight on our sphere and the one that surrounds the shadow on the floor. There you have it. That's how you use the Live Paint tool. So we're going to use this exact same technique to fill in our character. 8. Applying Color: Now that we've learned a little bit about how the live paint works, we're going to use that exact same technique on our character. So, I'm going to do just what I did before. Actually, we can turn off our sketch layer at this point where we're done with it. You can delete it even if you want to make your file size even smaller. Select everything, just draw a box around it with your direct select tool and you can go from the objects drop down to light paint make or just option command X. So now, you push the K key and you have your paint bucket and you can see that everything is highlighting, every different region of the drawing is being highlighted with red and you can just go around to make sure all your gaps are closed. If they're not, it won't work. So you have to make sure all lines are touching each other. One side is good to go. You're ready to start picking your colors. I have a color palette that I've been developing for years. The way I pick my colors, I'm very drawn to pastels, I think that they let the line come forward. If they're too dark, then it's hard to see the lines surrounding them. The way I shade is I choose the same color, but I add, I deepen it but it also adds saturation. So, I'm going to drag my color palette out of the Adobe cloud library. I'll delete this later. So you just drop it anywhere. You can download pallets from online resources, you can find work on enjoyable that you like the looks of and mimic it. I think colors are freer in. So yeah, once you've decided on some colors, set up a little palette, is easiest or pick them on the fly while you're painting your character. So, once you've got your colors set out, you just paint by numbers. Basically, I use the eyedropper, by pushing eye select, we'll start with the skin tones. So I to select the color and then K to go back to paint bucket tool and hover over the region you want to paint in quick ones and you just start filling it in. So, I'm going to do all the skin tones it's easier then. I like to do one color all at once and then I'll go to the deeper tone and do that too. So, that looks pretty good to me. Next, will do his hair, maybe a blue for his hair. I'll just use the darker blue for the shaded areas that we defined, light blue for the knife, white for the shine, I'm going to pink for the blood till I keep it light hearted, maybe a yellow for the pants. When you're adding shade to yellow, I would never go down on the color spectrum like this, gets really muddy really fast, looks almost like a brown. When you're shading a yellow, I would suggest moving into the red instead. Pushing it into the oranges just seems to maintain the vibrants. I'll keep his shirt white. So I'll just add grey for the shaded parts. I am going to fill in the white sections even though you can't see it. In case you decide to put it back on and later, you won't have open holes when you're drawing. We have light brown for the knife handle. I think I'll go white for the shoes again. So the same as the shirt, fill them in. I don't have a white in my palette, but I'm just using the eyedropper tool to grab the white just off the canvas, the project. Maybe I'll do white for the socks as well. The shadow reflects the color of your light source. So, if an object is outside and there's a blue sky above it, your shadows will tilt towards a colder version of your highlight color. If it's a warm light, then your shadows will get a little warmer meaning you'll nudge their spectrum to the red. So, like we did for the yellow we're adding a bit of a warm shadow. When we add, even for the blue, you start to tilt towards magentas to shade a blue. Even my, what look like greys have a very subtle red tone to them. So yeah, keep in mind not just where your light source is coming from, but what temperature it is as well. It's as easy as that to fill in your character. You've done all the legwork at the beginning of the project and the second half is just fun. 9. Final Touches & Conclusion: Just like in the lesson before, now that it's full, we're going to select the whole thing. We're going to go to our drop down menu and Object drop down, Live Paint, Expand and the last step here is to see all these thin lines that we're defining our light source. The easiest way to do that, rather than going around and hand picking them all is grab one, go to Select, Same, and you can do Stroke Weight. So, that selected everything with the same Stroke Weight. So, once you've done that, you can hit delete and they'll all delete at the same time. I'm going to use the same method to select the line that we're keeping. Select, Same, Stroke Weight again and I'm going to boost this line up just because I like the way it looks and I'm going to add a really subtle red tone to it as well. One last little trick I'm going to show you is how to add Shines. So, I'm going to do this a little bit differently. I'm going to use a white stroke, make sure that you have rounded caps turned on your stroke, type here or like Cap type I guess, and then I'm going to use the Pen tool. Just like we do the lines, I'm going to draw the shine on. Turn the thickness way up and then I'm going to add a little gap in the line, delete it and you get this very cartoony little shine. So, it's essentially just a thick line, thick white one. I'm dragging these two points right on top of each other so you get a dot rather than a segment. Yes, so there you have it. That's all it takes to take a pencil drawing and convert it into a polished vector. I can't wait to see what you guys do with this. 10. Explore More Design Classes: way.