If you have just heard of Sketch, new design tool from Bohemian Coding, and decided to give it a shot, well, you came to the right place!

In this tutorial, I am starting from scratch. You don’t have to know Sketch. Heck, you don’t even have to know how to design. Sketch app is great for beginners because of its amazingly simple and intuitive user interface which helps you grasp the basics quickly (much quicker compared to Photoshop, for example). Let me show you this on a simple settings icon.

First, you create an artboard by pressing letter A on your keyboard. You will see a small cross instead of your usual cursor. Click and drag to make a rectangle shape. It doesn’t have to have equal sides. Center the artboard on canvas to get the full view with Command+1. Then go to the layers list and rename it to settings icon.

Settings Icon

Next insert a star shape by going to the upper left corner to the button with plus sign, Insert. Click on it, go to Shape and choose Star. Again, you will see a cross cursor. Click and drag while holding Shift to make all sides equal.

Settings Icon

Then, you need a circle. Press O on your keyboard, then click and drag while holding Shift. Holding shift will give you a perfect circle. Make it almost the same size as the star, so the points of the star go a little bit out of the circle. Position it in the centre of the star. Usually, Sketch automatically snaps to the center but if it doesn’t, just select both shapes (click on one and hold Shift while clicking on the other), go to the inspector on the right and click on Align horizontally and vertically. Like this.

Settings Icon

Now, select both shapes, go to the Fills in the inspector and uncheck the small blue square. The reason we are doing this is for the icon to have a transparent background. It is necessary if you are using it as an interface element in your app design. Leave the border as is. While the shapes are still selected, apply boolean operation Intersect, which is in a toolbar just above the canvas.

Settings Icon

We are getting there. Now we need another small circle for the middle so press O, click and drag while holding Shift and snap it to the middle of the new shape. You can also move it by one or two pixels down to look more balanced. Make it no fill, by unchecking the blue box on the right. Then go to the layers list and drag the circle to the shape Star 1. It seems like it disappeared, but actually Sketch automatically performed union as boolean operation. To fix this, just select Path (it’s our circle) and click on the grey squares on the right and select none. And we got the circle back. This way we made a new shape, consisting of three subpaths which can be edited separately. One of the great features in Sketch.

Settings Icon

The last step in making this shape look like a real settings icon is increasing the number of star points to eight and the radius by a tiny bit in the inspector on the right. Let’s change the colour as well. Finally, rename the Star 1 shape to Settings icon in layers list. Now, that’s a nice looking icon!

Settings Icon

One great thing in Sketch is that after creating a new shape, all the subpaths which make the shape can be separately adjusted. This is because the boolean operations in Sketch are dynamic. So, no worries if your shape is not perfect at first, you can always go back and fix each path separately to get it right.
When you are ready to use the icon in your app design, you can export it by selecting the Settings icon artboard (make sure to select the artboard, not just the shape), then go to Export to the right in the inspector and click on the plus sign. Choose the size you want, format and click on the Export Settings icon on the bottom of the inspector. Save it as Settings icon on your Desktop.

Settings Icon

Tutorial written by Ivana Galic and originally published at galibugs.com.

  • iterate on designs
  • discuss with others
  • don’t be afraid to try a design
  • plan ahead before starting on a complex image

We hope you enjoyed learning about Smartly and the Pedago team. You can connect with them on Twitter and on their website.

Go back to the previous page

This post is prepared by Todor Iliev. If you enjoyed this, follow Sketch App Sources on Twitter for updates. We invite you to check out the selection of freebies and contribute files, plugins, articles, and tips with the community.