Ready for Retina HD: Create Pixel-Perfect Assets for Multiple Scale Factors

This article also got published by Smashing Magazine.

The 6 Plus is the first iPhone that sports a Retina HD display – the sharpest display Apple has ever made. It forces designers to provide an additional set of image resources to developers to match that sharpness.

You only needed one set of assets for the original iPhone up to iPhone 3GS. And when iPhone 4 came out with the Retina Display, you also needed 2x assets – images twice as detailed. Now with the display of the 6 Plus being even more detailed than the iPhone 4, we will also need to provide 3x assets. The numbers 1x, 2x and 3x are also called scale factors.

Of course, Android developers have always had to deal with many different sets of assets. Still, designers find themselves questioning their production workflow. In this article I focus on iOS, but you can easily extend this approach to Android and the web. I won't try to provide a silver bullet and maybe there are ways that seem easier at first, but I think that this article lays out a solid workflow that scales up for big projects.

First off, your icon sets should be vector-based. The approach described in this article focuses on generating multiple asset versions from a single vector shape in your Photoshop document that contains all your icons.

A unified icon document has the advantage of keeping everything together in one file, allowing you to see how good your icons and assets harmonize.

If you’re designing for iOS 7 and above, you may think that 1x versions aren't needed anymore – but you still need them for devices like the original iPad Mini, the iPad 2 and potentially Android and the web.

Set up Photoshop

First I want to show you how I set up Photoshop. If you know what you're doing, you can use other settings. But for those curious about how I like to work, this is it:

  1. Disable eye candy like Animated Zoom and Flick Panning
  2. Disable Snap Vector Tools and Transforms to Pixel Grid

That first point is a matter of personal taste, but the second point can get in your way if you try to be precise with the Direct Selection tool.

Then I configure the Move tool (v) to select layers. We don't need Auto-Select checked because you can select a layer automatically by pressing the key while clicking. Disabling this option protects yourself from accidentally moving layers unintentionally.

Feel Free

First and foremost, I believe that design and production are two separate phases. When your creativity is flowing, you shouldn't be worrying too much about production constraints.

Design at your favorite resolution (possibly 2x) and layout using the dimension of a device that you’re familiar with. But definitely use a real device and use apps like Skala Preview or xScope to mirror your design live on your device. You should not be working on apps if you are not constantly checking your design on a real device.

Tidy Up Those Vectors

As noted earlier, I’ll assume that you design your icons in Illustrator. But before copying them to Photoshop, you’ll need to tidy them up first. Use Pathfinder to add and subtract your paths until you have a single shape.

On the left you see a complex icon made of multiple shapes including a white shape to simulate transparency. For the icon on the right, I subtracted the white rectangle from the black one behind it. Do this by selecting the two rectangles and pressing the Minus Front button in the Pathfinder panel. Then select all shapes and click Unite to combine them to one.

Now copy the path to Photoshop and paste it as a Shape Layer.

If your shape ends up a mess, you didn't tidy your vector graphic properly.

Align Forces

When you paste your icon to Photoshop, it might look like this:

When you zoom in close on the icon, you will probably see those grey pixels around the shape. Those "partial pixels" occur if a shape does not fill an entire pixel. We don't want to have any of those.

We want to start working from a 1x version of the icon because when tidied up properly, you can scale this version up to 2x and 3x without any problems. If you did the original design in 2x, you need to scale the shape down to 50%.

Now it’s time to align horizontal and vertical lines to the next full pixel. It’s OK when curves and diagonal lines don’t fill up entire pixels.

Use Photoshop’s Direct Selection tool to mark a group of misaligned anchor points and use your arrow keys to move these points between two pixels.

Note: The closer you are zoomed in (use ⌥ + ⇧ + Mouse Wheel), the more precisely you can move the anchor points.

Do a Check-up

Now, make sure all anchor points are on the grid by scaling your 1x version up to 500%. If you see partial pixels, align them as described above. If everything checks out, scale the shape down to 20%.

Remember: From now on you should always scale proportionally from the upper left corner and always make sure the X and Y values are round numbers.

Scale it

Now let's see how different resolutions of our icon work out. Select the 1x version (v, then ⌘ + Mouse Click) and duplicate the icon (⌥ + Click & Drag) to a position next to the 1x version.

Now scale the duplicated icon up to 200% proportionally from the upper left corner. The 2x version should show no new partial pixels. It only should be bigger.

To keep things simple we will assume that you are happy with your 1x and 2x version and now you now want to see the 3x one.

Duplicate the 2x version (⌥ + Click & Drag), move it off to the side, then scale it up by 150%. (200% × 150% = 300%).

Later in this article, I'll tell you what to do if you are not happy with the results. But if you are happy with the 2x and 3x version, you know now that 2x and 3x versions can be generated from the 1x version without any problems.

Now go ahead and delete the 2x and 3x versions – we will be generating them automatically.

Generate and Enjoy

Photoshop has a build-in tool called Generator that can automatically render a shape layer to multiple image versions. For that we have to create a layer group and give it a special name: the filename and scale factor for each version.

In this case it should look like: cover.png, 200% cover@2x.png, 300% cover@3x.png

The comma separates the version and the percentage tells Photoshop the amount of scaling.

Now activate Generator.

Generator will create a folder next to your PSD file and will automatically save PNG files into it when you save the Photoshop document.

To add a new scale factor at a later point in time you'll only have to alter the layer filename.

Get Creative for Different Resolutions

It is common practice to modify artwork for different scaling factors because you can show more detail in a 2x graphic than you can in a 1x version.

In the following example, the 1x version of the icon contains just a single eighth note, whereas the 2x version contains a beamed note.

Obviously you won't delete your 2x version because it is different from the 1x. Create an extra group for the 2x version and give it a layer name compatible with Generator. Since you already scaled the 2x version in Photoshop, don't add "200%".

To end up with a 3x version after working in 2x, you have to scale by 150%. So you add this number to the 3x filename.

Size Matters

It is absolutely critical that the 2x version of your assets is exactly 2x larger than the 1x asset. Sometimes this is harder to do than you think. Consider this keyboard:

For the 1x version (the smaller keyboard on the left), I decided that 1-pixel-wide black keys are to thin, so I used two pixels.

When you scale that version up (marked in pink in the keyboard on the right), you end up with black keys that are 4px wide, which looks a little too wide.

But with 3px-wide keys, all distances between the keys change. To keep everything symmetrical, we need to make the keyboard 1px shorter. And because we can't scale 3px by 1.5 without ending up with fuzzy graphics, we also need a special 3x version.

To fix the export size of our 2x asset, we can add a layer mask. Generator will always use the dimensions of a layer mask if one is present.

Summary

I hope the methods I described can help simplify your workflow. As you see, creating pixel-perfect assets for different screen sizes and densities isn't such a chore when you use vector graphics to your advantage and let Photoshop do the grunt work.

The downsides to this approach:

  • The assets are stored at 1x in your Photoshop file.

The upsides to this approach:

  • You can create multiple image assets out of a single shape layer, potentially saving you tons of time in the future.

  • Your icons are all in one document.

  • It’s easy for other people to take your PSD and generate assets for other scale factors.

  • It's easy for other designers to see which resolutions of an icon needed special attention.