-1

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?

issue

  • 1
    Please comment if you downvote, I can't learn from silent downvotes :) – Summer May 15 '17 at 13:35
3

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. enter image description here

  • 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).

enter image description here

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. enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.