In this tutorial, you’re going to build a vector download icon in Sketch that looks like this. Now, you can follow along by downloading the lesson file at this URL or by clicking on the link in the Resources section for this video. That lesson file also has a completed version of the graphic if you want to double-check your work.

The techniques I’m about to demonstrate will help you avoid making icons that are uneven or have blurry edges when exported. In Sketch, a lot of these problems can be avoided by using features such as rulers, guides, and grids.

Let’s take a look. In front of you is an artboard 64 pixels wide by 64 pixels high. And I’m currently zoomed into 800%. The only element on the artboard is a gray circle with a border, which is also 64 by 64.

So click on the View menu and then Canvas. Make sure that Show Rulers is selected as well as Show All Guides because you’re going to need both of those. If necessary, click on the View menu again and now choose Grid Settings… to see the default grid lines.

This leads us to our first Big Idea: Using good grid settings is the key to making symmetrical and pixel perfect icons. So here’s what I mean. Change your Grid block size to 2px and the Thick lines to 0 and then click OK.

Now, why did I choose 2 pixels? Because on our 64 by 64 pixel artboard you can see an even number of squares from edge to edge. But the size of these squares is also important. Remember, we’re working at 800% zoom level and this feels appropriate. At 100% zoom level this would be a little absurd.

Next up, let’s add some guides, which leads to Big Idea, Number 2: Pairing guides along with grids will help you position your artwork and maintain symmetry. To see this in action, place your cursor in the top ruler, find the number 32, and click once to add a vertical guide. Now do the same thing on the side ruler, find 32, and click once to add a horizontal guide. This is going to bisect your graphic.

Now add a horizontal guide at 14 pixels, which is going to be the base of your arrow. Then add another horizontal guide at 50 pixels to indicate where the point of the arrow will begin. One more set of guides and then you’re done. Place your cursor in the top ruler and create a vertical guide by clicking at the 14 pixel mark. And then add another vertical guide at 50.

Do those numbers sound familiar? Indeed they are. By adding guides at equal intervals, you have a perfect square in the middle. And if you keep all your artwork inside those boundaries, that’s going to ensure symmetry.

Now for the actual artwork. Click the Insert button, choose Shape > Arrow. Position your cursor at the intersection of these two guides and then drag downwards until you reach the 50 pixel guide. Next, choose Layer > Convert to Outlines. This is going to give you a shape with anchor points and paths that you can then manipulate. To see these, double-click that shape.

This next step is super critical. Find this menu at the top of the Inspector and make sure that Round to full pixels edges is selected. This option is going to force your anchor points to snap to pixel edges. And this is how you avoid exporting blurry graphics.

You can see this behavior in action by clicking and dragging the anchor point of the arrow tip to the intersection of the horizontal and vertical guides, here. And notice that snapping that happens, that’s what you’re looking for as you snap all the remaining anchor points. Now click on the left-most anchor point of the arrowhead and drag it up to the intersection of these guides. Now do the same thing for the other side.

Next you need to move each of these two anchor points up to that same horizontal guide, but now you have a decision to make. How wide do you want your stem of the arrow to be? Now, you might not know at first, but your grid lines are going to help you experiment. So try clicking and moving this left anchor point – 1, 2, 3 grid lines to the left. And because of our grid, it’s easy enough to do the same thing with the right anchor point. So – 1, 2, 3.

Now you need to make sure these anchor points at the top are aligned with the points below. So just make them match. Click and drag the top-left point — 1, 2, 3 grid lines to the left and the top-right anchor point — 1, 2, 3 grid lines to the right.

And that looks pretty good, but it’s hard to tell at this magnification. So zoom out to 100%, and turn off the guides by right-clicking or Control + clicking inside a ruler and unchecking Show All Guides. Go ahead and do that again, but this time turn off the grid settings. And this looks pretty good to me. You can now begin to export this as is or continue modifying it with color or other embellishments.

That’s it. If you liked this video, be sure to check out our other Take 5 videos as well as our full course catalog at Gymnasium.