Lessons

Lesson Info

How to Draw with Sketch

What I want to do next is work on the icons that we're going to create for the areas in the defined section called What is a Spice and What is an Herb and so I want to show you how to draw these but it'll help a little bit if you see what it is I'm going to draw. So I have the final project open. So anybody who has access to the project files, these are the two icons that we're gonna draw and we're gonna use some of the drawing tools inside of Sketch to do this. So I'm gonna start with the leaves and then we're gonna draw the spice root here and we're gonna use a couple of different techniques inside of Sketch to get this to work and my wife actually is the one who drew these. She's my partner at Codify Design. So in addition to trying to take credit for any of her work whenever I can, I'm gonna try to redraw these for you in real time. So back to the design that we're working on here. So what I'd like to do is when I'm gonna be drawing in Sketch, I like to have another page in the doc...

ument that I just dedicate to the drawing. This way I'm not accidentally selecting any type or I don't have to worry about the guides or anything. So over in the Pages panel I'm gonna come down and click on the plus sign, we're gonna create a brand new page and I'll just name this Drawing and then press Return. So now I can use this as sort of my blank area to create my drawings and once we draw these icons, we're gonna turn these into symbols so we can use them within our layout. So again this just makes it a little easier for us to have sort of a clean area to work with. Now the size of our icons in the design are gonna be somewhere around 90 or pixels for these individual pieces. So let's start with the leaves. So the first thing I would do with the leaves is come down to the Insert Menu, come down to Shape and I'm gonna start with an Oval. So with the Shape Tool selected and the Oval tool selected just like the rectangle, I can now click and drag and I can draw out a shape. If I hold the Shift key, this will conform to a circle. If I hold the Option key, I can actually draw from the center point out. But we're gonna come in here and just draw a circle and I'm gonna make this somewhere around 90, 90 or 100 pixels on the size and then move this into place. Now with the drawing tools inside of Sketch, when I select any shape that I've created, you'll see the different tools at the top light up. Based on what you're doing inside of Sketch, not only is the right hand inspector panel contextual but the tools across the top are contextual as well. So for example if I don't have anything selected, you'll notice all of these tools here in the center which are on by default are grayed out. If I select on this item here, these all become enabled. So the first thing I want to do is turn this circle into some kind a leaf shape. Let's come in here and zoom up a little bit. With this selected, if I double-click on a vector shape, this will bring me into the vector editing mode. If I hit the Escape key and come back and select this, I have the object selected. This tool up here with the circle and the little icons is the same thing as double-clicking. Sometimes in Sketch if you have a hard time selecting something, you can select that item in the Layers panel, for example I would select the Oval and then you can click on the little Edit tool up here. So that'll bring us into the vector editing mode. Once I have this mode, one thing you get used to inside of Sketch is the tool will actually change based on what you're doing in the shape. So for example, notice I have a Pen tool here when I move around the outside of the shape. If I click, that's gonna give me another point. I'll hit Undo, however if I get my cursor over the top of an anchor point, it will turn into a Move tool. So in Sketch we don't have different tools for different functions, it all depends on where you put the cursor inside of the shape in order to get that particular behavior. So if I come in here and select this item here, I can now move this point around. If I wanted to add another point, I just simply move along the path, click with the Pen tool and now I've created another point to move this around. So again this really sort of ties into Sketch's really fast workflow. Everything is contextual based on where you're moving the mouse and what you want that function to be. So you're not switching tools. If I come down here and select the handles for the vector shapes, I can change the Bezier curve between the individual points. So I can click and drag these around. So for the leaf shape we have this sort of oval but we have points at the top and the bottom. So to create the leaf shape, we'll come up here and select on the first point here and then we'll come in here and select one of the handles. If I grab one handle and move it, both handles will move with each other. They'll move in a mirrored shape. If I hold the Command key, I can move one handle without moving the second handle. So this will give us the ability to create a point or a teardrop shape or any time you don't want to have the handle that goes across the Bezier curve to be mirrored on both sides. So for the top I'm gonna come in here and just click and drag and move this down. So I'll move this to about right here, creating a point at the top. Scroll down to the bottom and we're gonna do the same thing down here. We're gonna click on this point, click and drag and just move this in a little bit. So that's gonna give us a little bit of our shape that we want. So now we'll come up here and I want to create just a little bit sort of a curve here. I want the leaf shape to sort of have a little hook at the top and just look a little bit more interesting. So I'm gonna drag the top up here a little bit. Grab the bottom, drag it to the lower left. Then I come over here to the side, make sure I get over top of the vector shape and we're just gonna move this into place a little bit. Move it over to the left, move this other one over to the right. I'm gonna move the top one down a little bit. I'm sorry, we'll move the right one down a little bit. For the left one we'll just move this up a little bit and now to create that sort of shape where the top of the leaf will sort of arc around a little bit. I'm gonna hold the Command key and select one of these little arrows and just pull this down a little bit, just to create sort of the top of the leaf shape. Hold the Command key and select the second one. I want this to sort of bow out a little bit. Hold the Space bar and move around and now we can really just sort of start to model or create the individual leaf shape that we want. I want to zoom in so you guys can see what I'm drawing but I don't want to, there we go. So let's come in here and just sort of bow this around a little bit. So I really like the way the right side is looking here. Hold the Command key again and move this down. Grab the top point, let's pull this down a little bit and then we'll grab this point and just drag this down and just get that sort of bowed effect here. So again pretty quickly we can enable the Bezier curves and then just start to manipulate the individual points, adding or removing points as we need them. Now with the selection like this, I just have the outer leaf selected as well. So over in the left hand side here, we can see this particular layer. So this is no longer an oval because we've changed it. So now we can call this a leaf and now let's select the leaf. Gonna hold the Option key and I'm gonna click and drag and create a second copy of the leaf. So now I have two of these. So if we remember back to the icon, I'll just switch over here, we're gonna create these two leafs here, (chuckle) two leaves here and so just sort of make that shape and maybe I'll change mine just a little bit. So put my own flare on there. So with the second leaf placed, let's come over here to the inspector panel. Let's come over to Transform. We can transform this by clicking on the Up and Down arrows and move this around. But what's more fun is to actually select this and come up and activate the rotating tool. So if I tap on Rotate, now I can come in here and just click and drag and rotate this around and just do this in a more visual way. Once I get this to roughly where I want it, with this selected we can hit the Escape key and this will bring us back out to the artwork and then we'll just come over here and sort of position this where I want it. Gonna move this down here a little bit. Whoops. Select this and just sorta move it into place. So that gets pretty close. Let's select both of these and rotate both of 'em, whoops. I have to group them first, Command + G and then I'll rotate these. Or not, we'll rotate those later. So we have the two different shapes here. Right now they have a fill of gray and a stroke of gray. The fill is a little bit lighter but for the final icon, I want to be able to see through these individual shapes. So what I'm gonna do is remove the fill from these completely. So hold the Shift key, select both of these items, come over here to the inspector panel and let's just uncheck the fill. This way we have just the strokes for these individual items and for the stroke, we're gonna come in here and we're gonna bring this us to about three pixels here. We can also choose a couple of other options here such as whether it strokes on the center, on the outside or the inside of this piece. If I choose inside for example, we can see that the stroke is being applied to the inside of that particular shape. So I like it to be on the center. This gives us a nice little point here. And now the other trick, again if we go back and look at the final icon, we want to have it look like one leaf is covering up the other leaf. However the trick is the stroke is gonna be the color but we wanna see through the background. Which means the leaves that are overlapping, we don't want to see one leaf behind the other leaf. We don't want to see the different arcs. So what we're gonna need to do is use the bullion tools inside of sketch, which is a fancy word for something like a pathfinder or something where we can basically sorta break the leaves apart based on the way that they're interacting with each other. So the best way to explain what's happening here is let's put the leaves aside for a moment and let's come in here and create two simple shapes to explain what some of the bullion tools do. So I'll first come in here and draw a rectangle. Then I'll come in here and draw an oval. Just draw these two shapes together. So now with these two shapes drawn, if I click and drag, we have all the tools up here that are part of the bullion tools which again really just control how the paths intersect with each other. If I come over here and click on Union, what that will do is it will take the circle and the square and put them together as if I had drawn these two at the same time, as if I had drawn Bezier curves around the bottom corner of a rectangle. Let's undo that for a moment. The subtraction tool will give me the back item with the front item removed from it. So again it's as if I had drawn this shape by hand but it really is just giving me the subtraction of the two individual shapes together. I'll hit Undo. Intersection will give me the point where these meet and Undo and then finally the Difference which will give me the shapes without the intersection point. So as you can imagine when you're starting to build really complex shapes, complex shapes are really structured from simple shapes that just have different pathfinder functions assigned to them. So if you want to create sort of a pie wedge shape here, this is one of the fastest ways we could do this. I could hit Undo, I could, let's see, I can bring this to the front, Command + Option. Figure out like the pie shape here for example, make sure all these points match, come in here and quickly do an intersect point and get a pie shape. So as you start to look at the shapes you want to create, you start to look at these different pathfinder tools. Now what's also interesting about the pathfinder tools in Sketch is if we go over to the Layers panel, when we have these shapes that have been combined, we'll get these in a group. Now what's interesting here is the group retains the original shapes that we have in our group. So if I move this over here for a moment so we can take a look at what's happening here, as I hover over the rectangle for example, here's the actual rectangle that was in the drawing and if I come down here I can see the circle and I can still modify these. So this is what makes this so powerful. This is a live filter basically or a live effect that's happening inside of Sketch. If I select the Combined Shape group, I get this shape here and I can come in here and size and skew this and transform it. But if I come into the group and select the individual shapes, I can always come back and change the relationship of these individual shapes. So this becomes incredibly powerful inside of Sketch. So let's delete this section here and let's go back to our original leaves. So for the leaves, again what I want to have happen is I don't want to see the arc of the leaf that's standing taller behind the leaf that's sort of laid down here on the right hand side and so what I need to do is intersect these. But now the challenge I have here is we can actually see through the leaves. So here's what we're gonna do. We're actually going to break these apart and then use the individual shapes as well. So let's come in and I'm going to hold the Option key and I'm gonna drag a second copy of both of these leaves. So with these selected, I'm gonna come in here and come up and choose the Subtract. Gonna make sure this leaf is in the front. Choose our Subtract, oops. I forgot what I was supposed to select. Come on. All right, let's grab both of these leaves. All right, if you're in doubt, start over. Let's just delete that group and let's do this one more time. So Option-drag out this second copy here, oh that's the problem. The layers need to be next to each other in the Layers panel. So I'll grab both of these items. We're gonna subtract the bottom leaf from the top leaf and basically what I want to end up with is... All right, we're gonna do it that way. So instead we're gonna have the back leaf, I'm sorry, the tall leaf be in the back. So we are ending up with this leaf here where we have the bottom leaf sort of cut off from the left hand side. So let's go back to our original drawing where we have the leaf that's in the back and I'll just come in here and Select Delete, move this into place and now I'm gonna grab the Combined Shape which again if we toggle open, still has both leaves in there. We can see that back leaf showing up here but again it's asking like a live mask. Grab the combined shape and let's move this over and line it up to where the other leaf matches up and of course these are gonna match up exactly because we're using the same exact artwork for both of these pieces. So now the reason we spent all that time doing that is if I came in here and created a shape, let's maybe draw a rectangle, we'll fill it with a color, put it behind all of these items here and let's bring it to the back. We can now see that the gray area here is showing up as part of the positive area of the artwork but the background is gonna show through. So this is gonna allow us to put these on different colored circles and get the color of the circle to show through the artwork that we've drawn. So again the pathfinder functions are giving us the ability to do that. So next let's draw the main center vein inside of the leaves. So to do that we're gonna come up to the Insert menu and we're gonna come down and choose the vector drawing tool. So what the vector draw tool does is it's the same sort of pencil that we get when we hover over the individual shapes. However instead of starting with the shape from the insert panel, we can begin to draw those shapes right away. Now the first thing you want to do, if you want to have the first corner point that you draw be a Bezier curve, we have to click and drag. If I don't click and drag which I'll do now and then go to another point, draw a second point, click, hold the mouse and drag, I'll get a curve but I won't be able to set a curve for the first point. So what I'm gonna do instead is start by clicking and dragging the first point to give myself a curve. Then we're gonna come down, I'm gonna move over to the lower left. Gonna click again and just create a little bit of a curve. So once that's in place, let's grab this whole shape, hit the Escape key until we have the entire shape selected. It's gonna bring this down over top of our leaves. Let's next come up and click the Edit button, this again will bring us back to the vector tools that we have and now I can click this top point. Let's come in here and just modify our curve, come down and select the second point and again, I'm getting that live effect when I click on each one of these individual items. So to modify this, I click on it, get my points and move this. If I move my cursor inside, I get the ability to again add another point. So it might take a little getting used to in Sketch but again you don't have to keep switching tools. The fact that it will change depending on where you put your mouse, that tool will modify based on what you might want to do. So let's grab this point here and we'll just drag this into place. Hit the Escape key and then we'll come over here and change the thickness to match the other size here. So maybe just make that about two. Next I'll come over here, hold the Option key, click and drag. Click on the Rotation tool. Rotate this to get it pretty close. Double-click or click the Edit button and let's come in here and just move these two points. So we'll move this one down here. Move this one up and then change the points or the Bezier curves to sorta match the outer shape of the leaf. And there we go. Hit the Escape key. So there's our leaves, I hope I did (laughs), did the drawing some justice, let's go back and check. So this is pretty close, this'll work for our demo. So now with these in place, I'm gonna select all of these and we're gonna want to change the stroke to be white. There is no outline preview mode in Sketch. So what I want to do first is draw the circle for the icon that we're gonna need in the background of this. I'm gonna zoom out a little bit here and let's come up and choose Insert. Let's come down to the oval, we're gonna click and drag. We're gonna make the oval about 90 by 90 pixels. Zoom up. Gonna hit Command + Down Arrow, we're gonna move the circle down to the background. Let's turn off the border, let's go to fill. We're gonna use our green color from our document colors. Again we're still inside the same document because we've created a new page. So now we'll grab all of the vectors, we'll scale these down, move them into place and we're gonna set the border to be white and then we'll just scale these down. Not too bad, your final files will look much better than this. So now with this in place, I'm gonna marquee select just by clicking and dragging the circle and all of the artwork and next I'll come up to the Create symbol and we're gonna call this Icon - herbs or just herb and then click Okay. So now we have a brand new symbol. So now even though we are on the drawing page, by converting this to a symbol this will now show in our symbols page. So now we have a brand new icon over here. To apply this new symbol to our artwork, let's go back to the Design page where we have our multiple artboards, back to the Desktop, let's come down in the Define section. So I'll come down here and toggle this open in the Layers panel. We'll click on what is an herb, zoom up on here and now from the Insert menu we're gonna come down to Insert Symbol and we can choose the herb that we just created. Once we select this, the icon is gonna be assigned to our cursor. So we can move this around and wherever we click, it's going to assign that artwork right to the page. So now we can come in here and just scale this up and decide exactly where we want to position this particular piece. All right, so let's go back to our drawing. Let's tackle the root. So the way that I'm gonna draw the root is going to be by using all of these same techniques. So this shape's gonna be a little bit more complex and a little bit more abstract. So again we'll take a look at what we're gonna be creating. So it's gonna be this particular shape here and what we're gonna do is draw a bunch of individual shapes and then merge these together. So to do this we're gonna come back to our drawing page. I'm gonna select the Pencil tool and what I'm gonna do here is start drawing some of those shapes. I'm gonna break this down into the individual pieces. So I'm gonna start by drawing sort of the top of the root and I'm just sorta freehand drawing here with my mouse and so we're gonna just draw this shape and I'm really concerned about sorta the top part here. That's the part of the root at the top that looks like it sorta was broken off. Now I'll come down here and I'm just gonna sorta hook around here a little bit and just draw another piece of the root that was probably broken off. Move this around, connect the shape and I'm being really careful to make sure that I keep drawing the shapes inside of each other so that there is an overlap happening down here. So for the second part of the root, we'll just come in here and make that a little bumpy on the corner. Maybe hook this down a little bit and then on the right hand side we'll come over and make a root that sort of hooks up this way and maybe comes down a little bit. Gonna create the bottom part and then just sorta hook this up a little bit. The nice thing is there's really no wrong way to draw a root because if this was ripped out of the ground, they're all gonna look different. So pretty quickly we have that sort of outer shape here. So now I'm gonna marquee select all of these individual shapes, we'll come up to the Union bullion tool and click this and this is gonna map all of these together. So now that they're all together, it doesn't look quite as nice as the original drawing. So let's toggle this open and quickly make a few changes. With one of these items selected we can come up and click Rotate and I can rotate this around. I can also come in here and scale and rotate and transform this. Because I can always get back to the individual pieces that I used to draw the shape. So now once I have this pretty close, if it's something that I like I can select this entire shape and then we can go up to the Layers panel down to Paths and choose this item here called Flatten. Now if we were using a bitmap editing tool like Photoshop or any tool that does pixels, this is usually something evil. You never want to flatten your artwork. But what this means in Sketch on a Path is that it's going to take all of those shapes and merge them together and get rid of the live shape finding tools, the live bullion tools and give us a shape as if we had drawn this from the beginning. So I'll come down here and choose Flatten and in the Layers panel you'll see that we now have this combined shape, it's no longer a group and if we come over here and double-click on this, we'll get the editing points as if again we had drawn this entire shape together and so now just like we did before, we can come in here and start to change and modify this. So if I don't like the way some of the root pieces are looking, I'll get these live tools to come in here and start to modify and change this. Let's come around the outside here and just make this look a little bit better. So once we get something that looks kinda close, maybe about like that, that looks good, I'll hit the Escape key. With the item selected we'll make this the same thickness as the herb leaves. So we'll make this three and now finally let's come in here and just add some of the divider lines. So we'll come down here to the Shape, we'll come down to Line and we'll start by creating a line that will go between the different segment points. So just gonna click and drag. Insert a line, we'll click and drag. When I let go, I can grab the points. So we'll create one point here. Hold the Option key, I'm gonna click and drag, draw another point and we'll just do a couple of these for the individual sort of segments here. So again there's no real right or wrong answer here. It doesn't look quite as nice as my wife's drawing but maybe she won't see this video so we won't have to show her. All right. We'll just do a few more here, just draw these around. Once we're done, we're going to put this on a circle as well and then we're going to convert this to a symbol and then we're gonna place this inside of our layout. So once we have something that looks okay, maybe it looks better small, let's come in here and let's select all of this. I'm actually going to draw our circle first. So let's come in and click and drag. We'll make this the same size, we'll do 90 by 90. We will turn off the borders, we'll go to the fill, we're gonna use the sort of brown color here. So we'll grab the red and just add a little orange to this, make this a little bit more brown. Select this, Command + Option + Down Arrow. We want to put this at the bottom. Next we'll grab the artwork, scale it all down, drag it on top. Go to borders, set it to be white. Then we'll marquee select the whole thing and come down and choose Create Symbol. So we'll call this Icon - ginger root. Press Okay, we've converted that to a symbol which means that we can now go back to our design page. We're still inside of the defined section. Let's come down to Insert, we're gonna choose Insert Symbol and then choose ginger root. Scroll over here a little bit and place it. So it looks much better smaller. Drawings always look better really tiny when you can't see 'em. So now that these are placed in the large artboard, the HD artboard, I'm gonna come down here to the Layers panel. Let's select both of these, I'll just move these next to each other. Hold the Option key, let's drag them into the defined section of the tablet. Move these over into place. We'll zoom up and then we'll just grab the herb and then using my arrow keys I'll just move these into place. Now in later versions of Sketch, you can have your symbol instances be different sizes. This was something I think was introduced around Sketch version 41 or 42. Earlier versions if you resized a symbol instance, it would resize all of them. But now we can come in here and I can make the icons smaller on the tablet size and this will have no effect on the size of these on the larger artboard screen. Now I move this into place. Another powerful feature of symbols is if there's anything we want to change about a symbol, we can double-click on any instance of the symbol, either on the stage or in the Layers panel, we can double-click on these and that's gonna bring us to the original symbol and just for demonstration purposes if I came in here and made a change, for example if I changed this to a hideously blue color, pressed Return, went back to the symbol instances and zoomed out, we would see that that ginger root would now be changed in both places. So again this gives us a really quick way to create artwork and then be able to apply that artwork to different places in our design.