



This is because the boolean operations in Sketch are dynamic. One great thing in Sketch is that after creating a new shape, all the subpaths which make the shape can be separately adjusted. Finally, rename the Star 1 shape to Settings icon in layers list. 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. This way we made a new shape, consisting of three subpaths which can be edited separately. To fix this, just select Path (it’s our circle) and click on the grey squares on the right and select none. It seems like it disappeared, but actually Sketch automatically performed union as boolean operation. Then go to the layers list and drag the circle to the shape Star 1. Make it no fill, by unchecking the blue box on the right. You can also move it by one or two pixels down to look more balanced. 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. While the shapes are still selected, apply boolean operation Intersect, which is in a toolbar just above the canvas. It is necessary if you are using it as an interface element in your app design. The reason we are doing this is for the icon to have a transparent background. Now, select both shapes, go to the Fills in the inspector and uncheck the small blue square. 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. Make it almost the same size as the star, so the points of the star go a little bit out of the circle. Holding shift will give you a perfect circle. Press O on your keyboard, then click and drag while holding Shift. Click and drag while holding Shift to make all sides equal. Click on it, go to Shape and choose Star. Next insert a star shape by going to the upper left corner to the button with plus sign, Insert. Then go to the layers list and rename it to settings icon. Center the artboard on canvas to get the full view with Command+1. Click and drag to make a rectangle shape. You will see a small cross instead of your usual cursor. Let me show you this on a simple settings icon.įirst, you create an artboard by pressing letter A on your keyboard. 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). Heck, you don’t even have to know how to design.

In this tutorial, I am starting from scratch. 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!
