This is an excerpt from The Sketch Handbook from Smashing Magazine, “everything you ever wanted to know about designing with Sketch on 376 pages.” Hint: I’m the author. What’s below is an advanced tutorial from later on in the book, but if you’re a Sketch beginner, don’t worry. The book starts with the basics and guides you through every feature of Sketch.
In this tutorial, we’re going to use Sketch to design the first of 4 icons. Here are all of the icons:
First, add a new page to house all 4 icons. Name it “Icons.” Each of the icons should be 64 × 64 pixels and on its own artboard. Add the first one and change both the X and Y position to 0 for a clearly defined starting point.
Since we’re starting with the “Seaside” icon, be sure to use this name for the artboard. Change the background color to the blue (#55BFE1) from the category icon of the responsive article, but switch off Include in Export. It’s good that we saved it to the Document Colors earlier.
The first element for each icon is a white circle, the size of the artboard, which will also define its boundaries and act as a mask (Fig 10.2, left). Draw one after you have pressed O, and hold Shift to lock the ratio. The circle should start in the top-left corner. Name it “Mask.” Although the icons have an 8px border in the article, let’s leave it out for the moment. We can add it later.
Related: Learn how to switch to Sketch in this free and easy video course from InVision
Because we want to create a pixel-perfect icon, let’s set up a 2 × 2 grid now. Click on View → Grid Settings… in the toolbar and enter a Grid block size of 2px (Fig. 10.2, right). Thick lines aren’t necessary (insert 0 here). This grid not only allows us to place all of the elements of the icon on full pixels, but helps us avoid blurry lines if we stick to icon sizes that are multiples or halves of 64 pixels. To employ this grid to the fullest degree, always make sure that shapes align exactly to the grid lines when you add or modify them. It’s good to assess the quality of the icon occasionally without the grid lines. You can press Cmd + G to turn them off.
A better view
To get a better view for what we’ll be doing, zoom in to 800%. While it’s much easier to work on the details of the icon in this zoomed state, there’s also the danger of losing a view of the overall quality. Luckily, Sketch Mirror helps here, especially if you have a second computer screen. You can work on the first display in this zoomed-in state in Sketch, while the second display shows the original size.
Click on Mirror in the toolbar and the URL at the bottom-right of the dialog to open the design in the browser. There, select the “Icons” page at the top, and pick the icon or search for its name with the search function in the top-right corner to open it in a single view. Whenever you change something in Sketch now, it will immediately be reflected here. You can even set the currently selected artboard to automatically show in Mirror: Just enable Show current Artboard in the General tab of Preferences.
The tree
For inspiration, I gave the icon search on The Noun Project a shot and browsed for some terms that I associate with the “seaside” theme. I landed on a boat floating on some waves and a tree representing the nature around the lake. This is the element we’ll begin with: It consists of 3 basic triangles for the branches and a rectangle for the trunk (Fig. 10.3). While Sketch offers a distinct triangle shape for the former, I prefer to use a rectangle instead, because I’m more free to pick the alignment. Plus, it’s accessible with a keyboard shortcut.
For the treetop, press R and add a first rectangle with a size of 12 × 6, aligned to the grid. Make sure that this applies to all shapes that you add from now on. Go into the vector point mode with Enter, hold Cmd and click on the upper line to add a point in the exact middle. After that, select the points to the left and right with a Shift-click. You can also drag a selection to each point, instead of Shift-clicking, if it’s hard to catch.
Now, delete these points with Delete or Backspace, which will give us the desired triangle, and exit vector point mode with Esc. After that, duplicate the shape, either with Cmd + D or by holding Alt and dragging it down. In case you prefer the first method, make sure that Offset duplicated layers is switched off in the Layers tab of the Preferences, so that the duplicate stays at the same position as the original. After that, move the triangle down by 4 pixels. Either use the down arrow key or add “+4” to the Y field in the inspector. If the latter, press Esc to leave the input field.
This second triangle should be wider by 4 pixels and higher by 2 pixels. The fastest way to resize it is to hold Cmd and press the right arrow key until you’ve added 4 pixels. Keep holding Cmd and use the down arrow key in the same manner to make it 2 pixels higher. All of that can be done in the inspector, too.
Also create a duplicate of this second triangle, and modify it in the same manner: 4px wider, 2px higher, moved down by 4px. Repeat the exact same steps for the 4th triangle. The last part of the tree, the trunk at the bottom, is a simple square, 4 × 4. After you’ve added all of the required shapes for the tree, select them and center them relative to each other with a right-click and then Align Center.
With all the parts still selected, make a Boolean operation of the type Union by pressing Alt + Cmd + U. This will add all of the shapes to a single layer and lets you change the color at once to the same as the artboard’s background. Lastly, rename it to “Tree,” and move it to an X position of 4 and a Y position of 10 to leave room for the other parts.
The boat
All right, let’s float over to the boat. It might not be obvious at first, but it also consists of 3 modified rectangles (Fig. 10.4).
First, create a rectangle with the dimensions of 14 × 20 in the free space on the right side of the icon, for the larger sail. Enter vector point mode like before, which will select the top-left point, the starting point of the shape. However, the literal point of interest at the moment is the one in the top right. Press Tab to jump to it, followed by Delete to remove it. Leave the vector point mode. Piece of cake.
Believe it or not, the second smaller sail is even easier. Duplicate the big sail, right-click, and select Transform → Flip Horizontal. Jump to the inspector with Alt + Tab, move to the Width field with subsequent Tab presses, enter 8, continue to the Height, and enter 12. Press Esc to exit the field. Now, hit the left arrow key until the smart guides show that there is a gap of 2 pixels from the other sail. Also, move the smaller sail down with the down arrow key until both sails are on the same baseline. In the end, select both shapes to create another Union Boolean operation.
For the boat hull, add yet another rectangle of 38 × 12 pixels below the sails and a spacing of 2 pixels. After entering vector point mode, hold Cmd and click on the lower line to add a point in the middle. Press Tab to jump to the lower-left point, hit Delete to delete it, press Tab again, but this time in combination with Shift to go in the reverse direction until you reach the bottom-right point. Also delete it.
A triangular boat looks quite dull, so let’s fix that with a double-click on the lower point, which will change the type from a Straight to a Mirrored point. This action gives us not only a round shape but also 2 vector control points that define the curve. Drag either of them out to increase the roundness of it. Looks good.
Leave vector point mode and select the boat hull together with the group of sails. Center them horizontally, but then move the sails one pixel to the right so that they are aligned to the grid again. Finally, select them all together and add them to the same group with another Union operation. Change the color to match the other parts of the icon. Rename this group to “Boat,” and change the position to 22 (X) and 18 (Y). Now let’s hide it with Shift + Cmd + H, so that we have an unobstructed view for the last part of the icon.
The waves
A boat can’t float in the air—we need some water to carry it. The waves increase the difficulty level slightly, but with a few cleverly placed shapes, they’re easy to do. The waves are formed by a row of ovals with a border, which forms the actual wave line.
The starting point is a single oval. Draw one with dimensions of 16 × 12. Add it at the left edge of the icon, below the tree, so that you have room for the subsequent copies. Hold Alt and drag a copy to the right until both of the elements touch and are on the same line. Now, press Cmd + D to add elements with the same spacing until you have a total of 4 ovals. Still doesn’t look like waves. A step in the right direction is to select all of these shapes so that you are able to form a Union Boolean operation. Make sure that this group is centered to the artboard horizontally.
One element is still missing, a rectangle of 64 × 28 pixels, where we can carve the ovals out to form the final waves. Move it vertically until its upper side is centered to the ovals; also, center it horizontally to the artboard (Fig. 10.5, 1). Now, drag the rectangle into the Boolean group in the layers list, but ensure that it is in the bottommost position. Finally, select all of the ovals again and change their Boolean type with a click on Subtract, the small icon next to the layers in the layers list (Fig. 10.5, 2). Now we’re getting serious.
Complete the waves by adding an Inside border with a Thickness of 2px to the combined shape, and assign it the same color as everything else. Just like with the fill color, you can use the color picker with Ctrl + C to do this, but you’ll need to remove the fill with F first (we won’t need it anyway). Finally, name this Boolean group “Waves top,” and move it to a Y position of “42.”
To create some movement, add a second line of waves, offset to the right by 8px, half the width of an oval. The final Y position for this second line of waves is 52, and the name should be “Waves bottom” (Fig. 10.6). If you select the “Boat” group in the layers list now and unhide it, it will float nicely on the upper water line.
To finish it up, combine everything into an “Icon” group so that it’s easier to grab the whole package at once. Also, change the white circle in the back to a mask with Ctrl + Cmd + M, so that everything outside of this shape is clipped; it needs to be in the bottommost position for this to work. For the finished icon, have a look at Fig. 10.1.
This was an excerpt from The Sketch Handbook, which teaches you everything you need to know about Sketch on 376 pages.
You’ll love these posts about Sketch…
He shares his knowledge about the application on sketchtips.info now for almost 3 years and has helped countless designers to become more versatile in the design app. His Sketch courses on Skillshare also supported many to brush up their skills. Christian is the author of The Sketch Handbook, released recently by Smashing Magazine. It features everything you ever wanted to know about designing with Sketch on 376 pages.
