Getting the pixels right in Sketch

Nav Pawera
Feb 15, 2017 · 4 min read
Image for post
Image for post

If you’re designing interfaces for digital platforms, pixels are your Lego. You build each part of the interface and have full control over where each pixel goes. The designs you create also act as the foundation upon which the final product is built. So it’s important to make sure your designs are true to the pixels they’re built of — precise and repeatable units that can be replicated with consistency and without error.

There may be many reasons why we end up with half pixels in our designs, but here are a few tips that can help you get clean & pixel perfect designs when working in Sketch.

Image for post
Image for post
Image for post
Image for post
← Pixel Perfect vs Blurry Mess →

A few basics

  1. You should never intentionally go for half pixels (they don’t really exist anyway). A straight horizontal or vertical line doesn’t need half pixels and it shouldn’t have any. Go for clear & clean lines.
  2. If half pixels don’t exist why are they allowed in Sketch?
    Because Sketch (and other tools) work in vector as well as bitmap. Half pixels are simulated by reducing the opacity of a full pixel. They use half pixels to calculate blur to give softer corners & edges, for instance when drawing diagonals. You should read more about this stuff by looking for “pixel hinting” & “antialiasing”.

So, here we go…

1. Turn on “Pixel fitting
This makes sure that the edges of your new layers always end up on full pixels. Same for when you move layers around.

Image for post
Image for post

2. Add “Show Pixels” to Toolbar
Use this frequently to make sure your layers are aligned with each other down to the pixel.

Image for post
Image for post

3. Turn on “Show Pixel Grid”
When you zoom in beyond a certain level (800% as of writing) a pixel grid appears on screen — this is very helpful in spotting any stray “half pixels”.

Image for post
Image for post
This grid only appears when you zoom in a lot but it can be very helpful in aligning objects properly.

4. Never resize with a mouse — always resize with the Inspector.

Image for post
Image for post

5. Use Inspector to move layers
If you have to move a layer with the mouse, finish off with the keyboard to make sure you’ve aligned things properly.

6. Keep an eye on the pixels whenever you scale
Avoid scaling in percentages unless it’s 200%, 300% and so on (scale up in multiples of 100).

7. Be careful when aligning layers using the Align tools in Inspector
Pay special attention to this when creating icons — even weight lines align with even spaces & other even width shapes. Odd weight lines align with odd weight shapes.

Image for post
Image for post
Image for post
Image for post
That light Orange line is trying to sit between two pixels (so ends up sitting on two simulated half pixels)

9. Never use “center” borders unless really needed
Like when working with really really small icons — even then preview at actual size and try to get clear sharp edges.

Image for post
Image for post
← “Center” borders tend to often sit on half pixels

10. Avoid the line tool and use rectangle instead.
Line tool can put your origin points at half pixels (or even worse fraction pixels).

Image for post
Image for post

11. Create all icons on a grid from the start, within set bounding boxes
This will ensure you don’t get into alignment issues amongst other things.

12. Also, for now, avoid “outside” borders — default to inside borders.
This is mainly because outside borders are ignored in Sketch while aligning and when creating symbols.

Image for post
Image for post
“Outside” borders fall outside of the default art boards for symbols

13. Avoid the “Round pixels” shortcuts — you have no control over the actual shape or alignment.

14. No 1px lines with 0.5 blur shadow — the default Sketch UI templates use this.

Just being aware of how pixels work should be enough to make you pay attention to your pixels. Hopefully these tips can get you started.

This article is from a series of internal Design Workshops that we conduct at our studio — Buuuk. Here, I lead the Design Team that creates mobile/wearable based solutions for our clients.

@isnav

Design + Sketch

The best collection of articles, tips, tutorials, and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store