With the iPhone 4, and later the fourth-generation iPod Touch, Apple introduced a much higher density of screen for their mobile devices. The Retina Display, has the same dimensions as its predecessors, but there are twice as many pixels per inch. This makes for sharp text, crisp images, and an overall better user experience. Looking at two iPhones, the new and the old, side-by-side, you can really see the difference.
But this change presents a new challenge for designers of iOS apps. Now you need to have two versions of each image. You need to have a higher-resolution version for the newer devices, and a lower-resolution one for older models.
Smashing Magazine has a great new article on designing for the Retina Display. It covers the basics, such as how you need two images, one at 163 ppi and one at 326 ppi. (The higher resolution one is saved as MyImage@2x.png instead of MyImage.png and iOS chooses which one to used based on device compatibility.) You can find out about that anywhere online, though. The best part of the article is that it gives you some design advice for retina graphics. It suggests drawing with vectors and layer styles instead of plain bitmaps when you can, and the like.
I usually draw simple elements directly in Photoshop using the Rectangle or Rounded Rectangle Tool. Draw circles using the Rounded Rectangle Tool with a large corner radius, because the ellipse tool can’t snap to pixel. Layer groups can have vector masks too, which is handy for complex compositing (option-drag a mask from another layer to create a group mask).
More complex objects get drawn in Adobe Illustrator to the exact pixel size, and then pasted into Photoshop as a shape layer.
I have an additional tip while we’re on the topic. When I create graphics for iOS, I design for the Retina Display first. Then I scale the image down for the older devices. It’s quick, it’s easy, and I can use all the bitmaps I want.
Designing for iPhone 4 Retina Display: Techniques and Workflow [Smashing Magazine]
