How do I recreate this arrow in Sketch?

Question

I am trying to create some of my website's assets in Sketch so I can use them in a new style guide. I am new to drawing these kind of shapes and I can not figure out how to get this arrow symmetrical and pixel perfect.

I have tried keeping both sides the same length/width (15x5) but there's always a weird overlap somewhere, as you can see in the picture. I drew one side, angled it and then copied + mirrored it.

How would I create this shape so it's perfectly mirrored, symmetrical and pixel perfect?

Answer 1

Short answer - make it with a stroke.

Long answer: Create a Vector (shortcut: V) with three points. Select each point individually and make sure each point's coordinates make sense. I used for point 1 (100, 100), point 2 (119.5, 90), point 3 (119, 100). Tip: press "ENTER" to go in and out of edit mode, and be careful not to close the path.

• I picked the first value at random (100, 100 makes it easy to add numbers);

• then I picked point 2 at 119.5, so it makes a sharp edge and chose 90 for y, so the whole arrow will be 10px tall;

• then I calculated that point 3 should be further 9.5 pixels away from the second one, or 19px away from the first ( so -- 119 in total) and should be in a straight line with the first one, so 100 for Y.

Then - give your stroke some thickness (I chose 5).

Optionally -- convert to outlines (cmd+shift+o), and voila! It's an absolutely mirrored, pixel perfect piece of love. One more tip: make it a symbol afterwards.