Pixel Precision

Producing pixel-perfect designs is important especially when designing for mobile and when we want the final product to have that extra layer of polish we all admire. We’ve highlighted tips and tools you can use to achieve pixel precision in Sketch.

With Sketch you get best of both words; scalable vectors and precise pixel control for sharp edges and outlines. While Sketch can automatically align your shapes to pixel edges, it also provides you with the ability to preview and edit each pixel. This is especially important when you’re preparing assets for different screen sizes and pixel densities. In the original iPhone there was only one screen size and only one resolution; one point equaled one pixel. Today, with Retina displays in iPhone and the various Android pixel densities, things are looking more complex. But with Sketch’s preset Artboards, a bit of planning, and some simple mathematics, preparing assets for multiple screen sizes and pixel densities is a breeze.

Designing in 1x as a base

When Apple introduced the first Retina iPhone, many designers started designing in 2x resolution immediately, scaling down to 1x for legacy phones as an afterthought. However, when Apple introduced the iPhone 6 Plus this became problematic. After all, if you design something pixel precise at 2x, chances are if you scale it up by 1.5x, it’ll end up on a fractional position. Many designers have gone back to designing at 1x, because when vector dimensions are scaled by 2 or 3, you’re guaranteed that they’re not ending up on fractional digits.

Inspector

The first way to detect whether your designs are pixel perfect is to be aware of their Position and Sizevalues. The Inspector is the main command center of your Sketch document. It contains all properties and details for a selected shape or layer. This is your go-to place for spotting pixel imperfections. These irregularities manifest themselves in the form of fractional numbers.

Fractional numbers cause the rendering of sub-pixels — the main reason why your exported bitmap asset might have blurry edges. You can fix this manually; just edit the Position and Size values to full numbers. Working with shapes within groups can be tedious, but with ⌘ + Click, you will be able to directly select any shape and edit its values.

Exported PNG samples. Half-pixels asset on the left compared to pixel perfect asset on the right.

Show Pixels

Seemingly smooth vector curves and edges can be deceiving. By enabling Show Pixels, you will be able to see every individual pixel in your document. This setting can be enabled by going to View › Canvas › Show Pixels (⌃ + P). Additionally, you could customize your toolbar to include Show Pixels icon.

What you see will be equivalent to exporting the image to PNG and then zooming in. Note that when you’re at 100% zoom (actual size), there is no difference between either mode, but it will show itself when you zoom in.

If you want a hint of what your design will look like upon export, but don’t want to look at big blurry pixels, then Pixel Zoom is your friend. Make sure Show Pixels Grid is enabled by going to View › Canvas › Show Pixels Grid (⌃ + X). Show Pixels Grid allows you to differentiate fuzzy pixels in low contrast that would otherwise go unseen. When combined with Show Pixels, any edges that do not align with the pixel grid will be visible.

Round to Nearest Pixel Edge

Referred to as the best hidden feature in Sketch, Round to Nearest Pixel Edge, solves many pixel alignment imperfections. Once you have spotted a vector shape with sub-pixel values, you can select the shape and then select Layer › Round to Nearest Pixel Edge. Additionally, you could customize your toolbar to include Round to Pixel icon.

Sketch will automatically align the edges with the pixel grid. This works for both the Position and Sizevalues. This feature provides a quick way to ensure your designs are consistent, especially when you’re importing icons.

Shape Editing

Sometimes your shape may not be aligned as desired, but you can easily edit the individual vector points. To do this, just double-click or select the shape and click on Edit in the Toolbar. All vector editing options will appear in the Inspector. Here you can switch between four different point modes and select a pixel rounding preference.

Pixel rounding preferences in Edit mode.

Pixel precision is nice when needed, but you don’t have to limit yourself. For example, when designing tiny icons, you can disable the pixel rounding preference for complete freedom of point movement. However, if you want to ensure that your shape’s edges are consistent, enabling Round to half pixels orRound to full pixels edges will snap your vector points to half or full pixels respectively.

Setting pixel rounding preferences in Edit mode to ”Round: None”

Pixel Fitting

A global setting that ensures pixel perfection from the start is the Pixel Fitting setting, found in Sketch › Preferences› General tab › Pixel Fitting. This preference makes sure any layer you insert or resize ends up on a full pixel edge, with the exception of rotation. If you’re frustrated by the lack of pixel grid freedom you have at times, you will want to disable Pixel Fitting.