Creating pixel-perfect icons, particularly ones that work at small sizes, would possibly seem to be one thing you’d want a sophisticated diploma in vector enhancing to realize. But when you understand the proper strategies, you’ll be able to mix a couple of easy shapes with a few of Sketch’s most elementary options to provide some fairly spectacular outcomes.
In the present day, we’ll run via three easy strategies to create icons in Sketch. Zero drawing expertise required! Higher nonetheless, you’ll be able to take these strategies and apply them to all kinds of situations, not simply icons.
You’ll study to create icons utilizing:
- Boolean operations corresponding to subtract and intersect
- Borders
- Primary form instruments like Oval and Rectangle
- Vector enhancing
Let’s have a look 🔍
To get began, open a brand new doc in Sketch, press A to activate the Artboard software, and create three 24×24 px Artboards for every of your icons.
Making a location pin icon utilizing Subtract
Press O to activate the Oval software and create a 12×12 px circle. You possibly can maintain ⌥⇧ to create an ideal circle outward from the middle. Alternatively, you’ll be able to shortly insert the circle and modify the scale via the Inspector.
By default, every new form could have a grey fill and a border. Let’s eliminate the border and set the fill to black. Now, choose the layer once more and press 5 to scale back the opacity to 50%.
Professional tip: Choose a form layer and use Layer > Fashion > Set as Default Fashion to set its fashion(s) as the brand new default for any new form you create.
To create the opening in our location pin icon, duplicate the circle layer by deciding on it and urgent ⌘D. Then maintain ⇧⌥ and scale it all the way down to 6×6 px.
With the lowered opacity from earlier than, it’ll now be straightforward to see how shapes overlap earlier than we decide to reducing something out.
Now the enjoyable half, reshaping the larger circle to make the pin form. Double-click on the circle to enter Vector Modifying Mode — and drag the underside level straight downward to stretch it out.
This level presently has two deal with management factors which are bending the trail. We wish a straight laborious nook as a substitute, so double-click to change to a Straight level. Then, soften the purpose by making use of a nook radius of 1.
To complete issues off, choose each layers and use the Subtract Boolean operation on the toolbar to chop the entrance layer out of the again layer — and also you’re carried out!
Creating an eyeball icon utilizing Distinction
You possibly can create an eyeball icon utilizing the identical method as earlier than, however let’s strive a distinct means this time. Head to the second Artboard and draw a 28×28 px circle utilizing the Oval software.
You’ll discover that the circle is greater than the Artboard itself — which is completely positive. Transfer it up in order that it’s 5px from the underside fringe of the Artboard.
Professional tip: Press ⌥ and hover over any layers in your Artboard to measure their distance to the perimeters.
Duplicate the layer, this time holding ⌥ and dragging out a replica — or you should use the identical method from the earlier step. Place your duplicate 5px from the prime fringe of the Artboard.
You possibly can already see the overlap forming the form of an eyeball, so choose each layers and apply the Intersect Boolean operation — which retains solely the overlapping space.
You possibly can maintain the form as is, however we’ll offer you a couple of extra pointers to melt up the corners. For those who double-click to edit, you’ll be able to see that the circles are nonetheless there as a result of Boolean operations are non-destructive. To show the seen results of a Boolean operation right into a path, we’ll first must flatten it by clicking on the Instruments button within the Toolbar and deciding on Flatten from the dropdown menu.
Now, return into Vector Modifying Mode and nudge the facet factors in by 1px. Choose them each and alter the purpose kind to Straight on the Inspector. Sure, the angles will look pointier now, however we may give them a rounded nook radius of 1. Press ↵ to exit Vector Modifying Mode.
For the pupil, create a 10×10 circle, duplicate it, and scale it all the way down to 6×6 px. Make sure that the layers are centered, choose all of them, and click on on the Distinction Boolean operation to alternate including and subtracting the overlapping layers multi function swoop. And that’s a wrap 🌯
Making a magnifying glass icon utilizing Borders
For this final one, we’ll be drawing with borders as a substitute of fills. As with the examples earlier than, you’ll be able to create this icon utilizing any of the strategies we’ve lined, however let’s discover this final method.
Head to your final Artboard and create a 14×14 circle. Faucet F to take away the Fill and B so as to add a Border. Change the colour of the border to black, enhance the width to 2px, and ensure the place is ready to Inside — although it’s doubtless the default.
Now, for the magnifying glass deal with, let’s draw a line phase utilizing the Vector Device, which you’ll be able to set off by urgent V. You can too use the Line software, however we advocate the Vector Device for extra precision. Earlier than drawing your line, head to the Inspector and click on on the Snap to half pixels button, the third one beneath the sizing controls.
Subsequent, click on to make the primary level a half pixel up from the underside of the circle after which transfer down a bit and add a second level. Hit ↵ to substantiate you’re carried out drawing and provides the deal with the identical fashion because the circle.
Professional tip: To shortly copy a layer’s fashion, press ⌥⌘ C to repeat and ⌥⌘C to stick it onto one other layer.
To spherical out the squared-off backside of the deal with, you’ll be able to develop the border — we’d go for 3 px — and change to a rounded cap finish. At this level, you’ll be able to group the layers, rotate them and name it a day. However we’ll stroll you thru a couple of extra steps to make it look similar to the opposite icons we labored on at present.
Choose each paths, click on the Edit icon on the toolbar, and select Outlines. Now, moderately than having two paths with borders, we have now two compound paths with Fills, which you’ll be able to be part of utilizing the Union Boolean operation.
Maintain down ⌘⇧ and drag the bounding field till you rotate the form to -45 levels. You can too flatten the entire thing down right into a single, optimized compound path. And that’s it!
Similar to that, we drew three icons utilizing three totally different strategies — and discovered loads of methods alongside the best way. We hope you picked up a couple of new expertise and really feel extra assured creating icons in Sketch. For those who’ve received any questions or wish to learn to create one thing particular, you’ll be able to all the time ask our unimaginable neighborhood over in our discussion board.
