Designing for Retina display, part two
Answers to some of the most common questions I’ve been asked since writing the initial Retina display article andSmashing Magazine article.
Should my images be saved at a specific PPI?
No. iOS ignores PPI (pixels per inch) stored inside images. However, the pixel dimensions of your images do matter, so make sure you get those right. It’s also important to ensure your 2× images are exactly double the dimensions of your 1× images and that elements within the image are in the same positions — your Retina images should be identical content to their smaller counterparts, but with more detail.
Tech note: The PNG image format stores its pixel density as pixels per meter. This can cause rounding errors when converting between pixels per inch (PPI) and pixels per meter (PPM). Ever seen an image change from 300 to 299.999PPI when saved as a PNG? This is why.
Should my design document be a specific PPI?
July 2011 update: After a little bit of extra testing, I’ve reassessed my opinion on document PPI. I used to think it wasn’t too important, now I think it is, in certain specific situations.
Let’s say you have a document at 100PPI and another at 200PPI. If you use Copy Layer Style on a layer in the 100PPI document and Paste Layer Style on a layer in the 200PPI document, the Layer Style will be scaled. A 1px drop shadow would become a 2px drop shadow.
This sounds like a reasonable thing to do from Adobe’s perspective, but probably not what you’re after in most situations. Here’s why: If you’re being particular about your document PPI, you’re probably setting up your iPhone documents at 163PPI or 326PPI. Your iPad documents are probably set up at 132PPI (with 264PPI on the horizon).
If you’re working on an app that’s for both iPhone and iPad, there’s a strong chance you’ll copy elements and layer styles between your iPhone layout and iPad layout. If you have the document PPIs set to match the devices, your layer styles will get scaled by about 20% each time. That’s not an issue with 1px shadows, as they’ll be rounded up or down and likely stay the same, but any value larger than about 5px will be scaled.
My strong recommendation is to always set documents to 72PPI. I haven’t tested Fireworks or other design apps, but I suspect some may work the same way Photoshop does. It seems far safer to work at 72PPI, all the time.
Can’t I just design at 2× and bitmap scale down to 1×?
No. If you batch bitmap scale your images, or use Save for Web & Device’s image scaling or bitmap scale using any other method, you’ll be doing some serious damage to the quality of your 1× images. This is why everything should be built as vector objects with layer styles and other generated effects.
Take a look at the images below. The Bicubic and Nearest Neighbour versions have some significant quality loss, especially the text and near the top and right edge of the button. I realise that most text in your app will be generated by iOS, but the example still holds true — bitmap scaling hurts your images.
Do I really need to build two sets of images?
Yes. iOS needs a full set of 1× and 2× images. If iOS (or Xcode) bitmap scaled your 2× images down, the quality of your assets would be reduced. Please refer to the previous question for more detail.
Why build the initial design at 1×, rather than 2×?
There’s advantages to working on your design at 1×, but also advantages to working at 2×. Personal preference will play a big part in your decision. I favour building initially at 1×, then scaling up for the finishing touches and exporting. For me, the important factors are:
Pixel grid
Working at 1× ensures everything you do is locked to the 1× grid. Working at 2× means that you have to ensure you only use even positioning, even heights, even widths and even layer style values. If you don’t, uneven values (1, 3, 5 etc) will land on half pixels (0.5, 1.5, 2.5) when scaled down to 1×, resulting in blurry edges or rounding errors. If you choose to work at 2×, you’ll have to scale to 1× prior to exporting any images and double check everything’s ok.
Details
Working at 1× won’t allow you to see all the fine detail available on a Retina display, so you may forget to take advantage of it. You’ll also have to be careful when placing photographic elements if working at 1× — they’ll need to be converted to smart objects prior to shrinking them to the size they appear in the design.
Preview size
Working at 1× means a 1:1 pixel preview on your computer’s display will be smaller. In some cases this is vital, because your display may not be big enough to comfortably show a portrait iPhone Retina preview (960 pixels high, plus enough to fit the menubar, window bezels and dock). When the Retina display iPad is released, the situation will only get worse. I don’t know too many displays that can fit 2048 pixels vertically. The current 27” Cinema Display is 1440 pixels high, so even with the largest Apple display available, you won’t be able to work on portrait designs for a Retina iPad and see the entire iPad screen uncropped. Yep, a Retina iPad would have 3,145,728 pixels, just shy of a 27” Cinema Display’s 3,686,400 pixels. If you need to, take a moment to think about that.
Mike Rundle prefers starting at 2× and scaling down. I think it’s very likely that a lot of other designers would agree. Either is fine, provided your documents are built to scale up and down without losing quality — this will let you switch between 1× and 2× as you see fit throughout the process.
I thought it might be nice to hear from Mike why he prefers building at 2×.
“Starting a design at 2× from the start lets me get deep into the fine, pixel-level details immediately. Stuff like intricate textures and noise effects that will only be in the Retina graphics, not at the 1× size. I like to add detail at the 2× level that the 1× graphics won’t have, similar to a 512px icon on OS X compared to its 256px version. Always being on an even pixel and always applying Layer Style effects in even amounts is tricky, but it’s built into my mind now so I don’t think about it too much. It’s just a preference, everybody has their own way of doing it!”
Why not use Fireworks for UI design?
Fireworks is extremely capable, but I prefer Photoshop. In a lot of respects, the tools in Fireworks and Photoshop are similar or identical, so personal preference will likely be the deciding factor. I’ve been using Photoshop since version 2, so it’s very familiar. The times I have strayed and tried other apps, I haven’t liked them as much or missed vital features. For me, it’s as simple as that. However, I believe it’s important to present Fireworks as a good alternative, so here’s some words from Graham Clarke on why he uses Fireworks.
“I use Fireworks for all of my user interface work. Fireworks is a bit like the lovechild of Illustrator and Photoshop. It’s vectors… but with pixels in mind. And because of its web design heritage, exporting slices is pretty efficient in both workflow and compression quality. I just wish Adobe would take it a bit more seriously.”
Why not use Illustrator for UI design?
Illustrator is primarily vector-based. It lacks the pixel level control Photoshop and Fireworks have. It’s great for single elements though. If you’re building an app that predominately uses Apple’s UI elements, but you need some simple icons, Illustrator can be a good choice. If you need to build entire custom UIs with lots of elements, it’s simply not the way to go.
App icons are slightly different
Please note that the original Designing for Retina display article and this article discuss iOS app user interface design, not app icon design. App icons can be built in a similar way and a lot of the advice is the same, but have their own unique issues because they need to be scaled to a larger range of sizes.
If you have any questions, hit me up on Twitter and I’ll do my best to answer them.