7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 14Length: 1.8 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.2 Sketch Tools

One of the coolest things about Sketch is just how many tools you have at your disposal. This is a modern graphic design application so you’ll be able to draw the familiar rectangle, line, oval and so on. But you can also draw freehand paths, duplicate elements along a grid with ease, and even rotate copies to create intricate elements. In this lesson you’ll learn how to do those things, and more.

2.2 Sketch Tools

Hi, welcome back to Practical UI Design with Sketch. One of the cool things about Sketch is represented by the tools you can use. This is a modern graphic design application. So you'll be able to draw the usual rectangle, line, oval, and so on but you can also draw freehand paths using the vector tool. You can grid, duplicate elements really easy and you can even rotate copies to create intricate elements. In this lesson you will learn how to do that and more. So let's get started. First of all, I'm gonna show you the basic tools that you can use to draw various elements on a page. For example if you go to the insert button here, you have a wide array of choices between Vector, Pencil, different Shapes, Text. You can also upload images. Then, you have the Artboards, which will be dealt with in the next lesson. And then Symbols and Styled texts. Okay, let's start with the basic shapes. So, we have the line or L. So if you press L on the keyboard you will select the line tool, and then you can just drag the line anyway that you want. Just like that. Okay. By clicking on it or dragging a rectangle like this, you can select one object or multiple objects. Next, with an object you can use these handles on each end to make it bigger or make it smaller or change its position. Maybe you want it to be vertical or maybe you want it to be horizontal. And the cool thing is, if you hold down the Shift key while you're dragging, it's gonna rotate it at specific degree values. So, for example, this is 45. Now this is 90 degrees, this is zero, and so on. So, that is a pretty cool feature. Next, we have some more tools you can choose from, like the Arrow. Right. The only difference is between a line and an arrow, is that the arrow has this pointed tip here. And just like any other tool you can alter the border color. Right? You can even add a fill color to it. This is particularly useful for the arrow because it colors the actual tip of the arrow. Okay. Now if you're wondering how I zoomed in, well, you simply hold Z and you drag a rectangle over the area you want to zoom in. Or you can use these handles right here or you can use Command plus Cmd plus or minus to zoom in and out. To return to 100%, you simply press Cmd+0. All right? Another tool is the rectangle which can be accessed with the R. So, just like before, you click and drag. And the cool thing is when you click and drag you have these values for width and height. That are displayed in real time. So you know exactly the size of the elements you're drawing. And of course out of this, you can make a rounded rectangle, I can set its opacity, levels, fills, borders, shadows, you can do virtually anything with it. You can rotate it by clicking this rotate button here on the top, and now the handles will change to rotation mode. If you click on Edit, you will get options for the paths. So, right here, this is straight, but if I click on this and it's gonna change. Notice this is selected right now and then I can click finish editing when I'm done with it. And now I have a different shape. Again the transform tool allows you to do a couple things like skew, like maybe perspective. Once you are in rotate or transform mode and you did some changes you simply click outside to exit that mode. So let's see what else. On shapes of course we have the oval rounded. I won't go over these since they are really easy to use. I will show you the vector tool. So you can use free hand paths, like click one point here, one here, and I can make a triangle really easy, or I can make like, something like this. You can create virtually any shape you want with it. And then click on the starting point to close that path. And you can apply fills to it. You basically created a new path. You also have the pencil tool. And the pencil tool, you simply use it like this to draw various paths. And it can change the border thickness if you want. All right? For a specific path that's your drawing we can change the border color, so again really basic stuff. Now I'm just gonna delete all of this and go ahead and show you the text tool. Now text, simply click, you get a placeholder at first, which you can change, so THIS IS A TEXT. And then, with the text you can do a bunch of different things, like change its typeface, its weight. Various option for color, size, alignment. Spacing, even. So, on the typeface, for example, I can have this cool search box, which I can use to find the various fonts. Let's say, for example, I want a font called Aller. Well, I get all All the results here. Very nice. Okay. And then wait, I have some options here like underline, double underline, maybe strike through. You can do numbered or you can do a bullet. So you have a wide range of options for this. Now there are a few more tools here, and I'm gonna talk briefly about those. So let's say for example that you wanna make a grid. Let's say you have this box. Yeah, and you wanna make multiple copies, but which are displayed in a grid fashion. Let's say you wanna make three more. So you have one, two, three and four. Well by selecting this, you click make grid. You need two rows, with a margin, let's say 20 pixels between them. And then you have two columns, again with a 20 pixel margin. So when you click the Make Grid. You'll get this bit which is, actually pretty cool, especially if you are like, an icon designer or you simply need a quick icon. So for example, in this case I replicated this bit right here. But you can go crazy with this tool. Let's say you have like, a list of logos. Right? So, and we can do one like this, and then make grid. So one row, three columns, or four columns. And with a lets say 30 pixel margin. Make grid. And now I'll get four elements equally distance. Another cool thing is the rotate copies tool. So, let's say you have a rectangle that looks something like this, and you wanna create like the background of a watch with all the hours and stuff. You click on rotate copies, and you will build 11 more. Hit OK, and it creates this. Yeah, so actually, it calculates the number of times it needs to rotate and it does so by keeping the exact same space between these elements. And that's really cool. For example, you can make a crosshairs, like rotate copies you need three more. It creates this bit. Again, this is something you can use to create elements that normally would take you a long time to make. For example, let's say that I have a shape like this. Yeah, well doing this by hand and calculating all those values would be like really, really hard and time consuming but with this simple tool you will be able to create it really fast. Another set of tools you can use are the Union, Subtract, Intersect, and Difference tools. So for example, let's say you have a rectangle like this and a rectangle like this. Now first of all, I can group these. So I can select them and hit Group or Cmd+G. And whenever I select one of the elements the other moves as well, because if you take a look in the layers panel. Yeah, we have a group here and then rectangle two and rectangle one. And then, if you want, you can ungroup them. Now, if I move this over here I can do a few different things. For example I can, merge these two shapes into one shape by using the union tool. So, hit this, and now I have a single shape which I can color anyway that I want. But the nice thing is you also have access to the originals. So we have the rectangle two which you can actually make bigger or smaller and they have access to rectangle one. But in the end this stays a merged shape. What else? Let's go back here a few steps, using the Cmd+Z of course. If I select this and hit subtract, only this shape minus what was overlapping is what remains. So basically I'm taking the red one minus the gray one. Another tool is Intersect. Now intersect will just select this portion in the middle that's the common ground for both shapes, just like this. And then, there's also the difference, which is the exact opposite. So it's gonna preserve everything apart from this middle section. So difference and this is what you get. Okay. One final tool that I wanna mention here is the Mirror tool. Now this is actually not something you can draw with but instead, it connects to Sketch Mirror. Which is an iOS application that can run on your iPad or your iPhone. And that application will mirror what you're making in sketch on your desktop on your phone. Right? So let's say you're building a mobile app. Well, you design it here, you have your iPhone on your side and that updates in real time. So you can see exactly how it will look on your iOS device. And that's basically it for the tools. Next time on Practical UI Design with Sketch, you'll learn how to work with Layers or Artboards and Pages. These awesome features will allow you to better organize your sketch documents. See you there.

Back to the top