I definitely have made no secret of my love of Bohemian Coding’s vector drawing app, Sketch. It’s my primary tool for icon work, and I feel it rivals the heavy-hitter Adobe Illustrator for outputting pixel-based designs such as icons, UI elements, and other on-screen graphics. It may not have all the functionality of Adobe’s powerhouse, but what it does it does well.
If you are at all curious about using Sketch for your own workflow, I’ve put together this introduction to the software. I should also point out before you get too far in that Sketch is currently a Mac-only application. Also, this piece is written in a way to be friendly to anybody who is starting with Sketch, wether they're coming from another program, or have limited experience with graphics software. The only prerequisite for this tutorial is experience with Mac OS X.
First Thing’s First
If you don’t already have Sketch it’s available for $99 on the Mac App Store. It’s pretty inexpensive as far as pro graphics software goes, but Bohemian Coding offers a trial on their website which I recommend you grab before continuing on.
Who is Sketch For?
Unlike Adobe Illustrator which is a very multi-functional illustration app, Sketch is designed for a very specific purpose; creating graphics for digital displays. You will not find tools to help you with designing for print (you won’t even find measurements other than ‘pixels’ anywhere in the UI) because Sketch is not built for that. There are some people who use Sketch for print, but I would not recommend that, personally. Any graphical elements, including logos, are better off designed in Illustrator or another vector graphics program designed for print.
However, Sketch is for designers working exclusively in the digital realm. This includes icon designers, UI/UX designers, and web designers. If your primary medium is pixels Sketch is probably going to be far more efficient than Adobe’s offering because it only gives you the tools you need.
Open Sketch and create a new document (Command + N).
One of the first things you may notice is that your toolbar at the top of the window will look different than mine. I highly recommend changing your toolbar up to optimize it for your workflow. To do that either right-click or control-click anywhere on the toolbar and pick 'Customize Toolbar' from the contextual menu.
From there you get a variety of tools. For now though at least have 'Zoom', 'Shape', and' Text' as those are the tools I will be covering in this post. The other tools are also extremely handy, some are even a vital part of working with vector graphics, but they are beyond the scope of this introduction.
Working With Shapes and Layers
So let's go back to looking at the window as a whole. On the left side you have your layers panel. If you've ever used Photoshop this panel works in the same way, showing a hierarchal view of the objects in your document. To demonstrate how this works let's draw a simple rectangle. Click 'Shape' in the toolbar and select 'Rectangle' (you can also simply press 'R' on your keyboard). From there click anywhere within the document and drag out your shape freely, or hold down the shift key while dragging to create a perfect square.
Take a look over at the layers panel. You'll notice that there is now an item called "Rectangle 1". You can double-click on the name of any layer to rename it. Try that out and rename the layer to 'hey hey'. You generally want to name your layers something more descriptive, but that will suffice for the purposes here.
Let's draw another shape, this time an oval. Select 'Oval' from the 'Shape' tool, or press O, click and drag out the shape in the same way you did with the rectangle, and hold down the shift key to create a perfect circle. Once it's drawn, select the circle and drag it so it overlaps with the rectangle and you see red lines.
These red lines are alignment guides, which help you line up shapes to each other's edges or centers. In this case the right edge of the circle is aligned with the rectangles vertical center, while the bottom is lined up with the horizontal center.
Now that we have the shapes lined up how we want them, let's say we want the circle to be underneath the rectangle. There's actually a very simple solution, and that brings us back to our layer panel. Since we haven't renamed our circle yet let's do that. We're going to call it "roundy" because...well...it's round. Click and drag "roundy" underneath "hey hey" on the list.
You'll see that the circle in your canvas has been partially obscured by the rectangle. Take sometime to explore drawing shapes like the star or triangle and then reorder those layers. Don't forget to save your progress.
Manipulating Shapes With the Inspector
Now we're going to take a look at what's going on the panel on the right side of the Sketch interface. This is known as the Inspector. The Inspector presents you with a variety of tools that allow you to numerically change the size and position of your shapes, and also apply styles like color, borders, shadows, and more to your shapes.
Start a new document in Sketch and then, using the tools covered in the last section, draw a rectangle and then draw a circle in the middle like the example below (remember to use the alignment guides). It doesn't need to be exact, we'll be taking care of that in the next step.
Select the rectangle and let's take a look at the Inspector Panel. For now, let's focus on the top portion with 'Position', 'Size', 'Transform', and 'Radius'. These controls do pretty much what's on the label.
Position sets your shape's X and Y coordinates on the canvas, but we're going to ignore that one for the time being. Moving on to size, this allows you to precisely set the dimensions of your shape. The little lock icon between the 'Width' and 'Height' fields is an important tool as well. When it's locked (as pictured) the width and height will change in relation to each other. When it's unlocked the 2 dimensions can be changed independently.
If the lock on your screen is locked click to unlock it. If it's already unlocked click to lock it then click again just to get the hang of it. Next we're going to adjust the size of our rectangle. Click the entry field labeled 'Width' and enter '260'. Click over to 'Height and enter '200'. Let's ignore 'Rotate' for now and move on to 'Radius'.
Radius sets the roundness of a rectangle's corners. You can drag the slider in the center to adjust this, move it around to get a feel for how it affects your shape. When you have a feel for it set the value to 14 by either dragging the slider or entering '14' into the box on the right.
We're done with our rectangle for the moment, let's move on to our circle. Click the circle in the canvas or the Layer panel to select it, and you'll see the Inspector panel change. The first thing you'll notice is that 'Radius' is gone, that is because that control doesn't apply to a circle. The Inspector is smart enough to only show you the tools that you need for the particular shape you're working on. Everything else works exactly the same way.
Again, like last time we are focusing on 'Size'. Because we want to make a perfect circle however we need to check that your 'Width' and 'Height' values are the same. If they're not, check that the little lock in the middle is unlocked. We're ready to make our circle. We're going to set both the 'Width' and 'Height' values to '200'.
Your shapes should look something like my example here. If it doesn't look exactly the same, don't fret. The important thing is that you understand how these tools work. Take some time to play around with them.
If you're feeling adventurous I encourage you to try out the 'Transform' tool, specifically the rotate function. Also, go back to the shape menu and create more shapes. See what other shape-specfic tools Sketch will give you. If you want a really interesting one, I recommend creating a star.
This is really only the basics of Sketch, there is far more to this program than I could cover in this post. I have more tutorials in the works for the future, including a follow-up to this one coming next week, but until then there are a variety of resources you can check out. One of my favorites is Sketch App Sources which has tutorials and resources. Also, follow @sketchapp on Twitter as they often share great resources.
I encourage you to check out everything you can, even looking at other people's projects will help you figure out interesting and new techniques. Feel free to check out my Icon a Day project, I create all those icons in Sketch and make the files available for anybody who wants them.