How To Design Pixel Perfect Assets

Assuming that you design your Mobile app in 2x, I know it’s tempting to use automatic tools such as Slicy to create your 1x assets. But it’ll be far from perfect, since you’ll end up with half-pixels and that means blurry outlines. You don’t want blurry pixels.

Giving that extra care shows your passion as a designer. Yes, it does take more effort but as a reward, you will sleep better knowing that the 1x users will also enjoy your design. “Make the back of the fence look as beautiful as the front. Even though others won’t see it, you will know it’s there, and that will make you more proud of your design.” – Steve Jobs

This is a technique I’ve picked up on Sketch, but I’m sure the same principle can be applied to Photoshop as well.

The Key Is To Design Using Pair Numbers

1) Select your asset and make sure all the dimensions and positioning are on pair numbers. Why? Because when you divide those numbers by 2, you get a nice round number. That will ensure that when you resize that asset, it’ll be pixel perfect. The border-radius of your rounded button should be half the height of the button. In this case, it’s 26px.

2) Create a surrounding box that serve as your future slice. Also make sure that the numbers are in pair. Create a folder for that those layers.

3) Duplicate, lock the ratio (lock icon between Width and Height) and set the width to half the original width.

4) Adjust the border-radius, drop-shadows, inner shadows to half the pixels, unless it’s 1px.

5) Select the 1x button folder and Go to File / Add Slices for Selection. This will create a nice slice that will be easily exported.

6) Hide the Mask layer and the Bg layer and Export. You can use Sketch’s super useful feature that allow you to drag and drop the asset’s thumbnail to anywhere you want it.

Arguably, Slicy does a pretty good job at resizing to 1x automatically but is it good enough? Doing it manually (using a PNG and resizing it to half the dimensions) is even worse. These results should make designers cry.

What about 2x?

In Sketch, there is a 2x export feature that allows you to take any asset and do a pixel perfect rendering of it in 2x. While the pixels will be perfect, they will be doubled and that might not be the effect that you want. The simple solution to that is to duplicate and resize to 2x the width while locking the ratio.

Download the Sketch File

Here is the original Sketch file so you can play around with it. :)
Assets.sketch