Since the release of the iPhone 4 its meant more work for us app designers. In this article I’ll talk about the best method I’ve found for creating iPhone app design’s for both the iPhone 3 and the iPhone 4.
The difference between iPhone 3Gs and iPhone 4
The old iPhone 3 and new iPhone 4 have different resolution screens. Basically the iPhone 4 retina display has double the pixels of its counterpart, which means double the detail horizontally and double the detail vertically. Consequently this creates a little more work for us UI designers.
Here are the specifics:
- iPhone 3Gs – 320 x 480 screen size
- iPhone 4 – 640 x 960 screen size
If you use much of Apple’s pre-built interface library for your app then you don’t need to worry about these differences, as much of the work is already done – the default Apple UI buttons, labels etc work fine for both resolutions. The slight headache comes however if your iPhone app design is highly custom – e.g. it includes lots of custom made images, graphics, icons, menus etc. If that’s the case then you need to create versions for both iPhone 3 and iPhone 4 so that you can export two sets of images at those different resolutions.
So does that mean I need to create my app designs twice?
Thankfully, no! It’s all about using solid color, pattern or gradient layers with vector masks and in Photoshop to ensure that you can design first at the iPhone 3 resolution (320 x 480), and then scale that design up to the iPhone 4 resolution (640 x 960) without loosing any of the detail. You have to use vectors instead of bitmaps as bitmap images blur terribly when you scale them up.
Here is a list of 6 tips that will help you to create iPhone app designs that work for both platforms in Photoshop:
1) Start out designing at the lowest resolution
Start out designing for the iPhone 3 which uses the lower resolution. I won’t go into the specifics but after a quick experiment in Photoshop, vector masks and shape layers seem to scale up better than they scale down.
2) Make sure ALL layers are made from shapes with layer styles for effects
Get in the habit of using layer styles, shapes and vector masks. Bitmaps should not be used in iPhone app design because they’ll cause you headaches when you scale your design up. Shapes created with the rectangle / rounded rectangle tool will be your best friend as they easily scale up and down. One quick tip is to avoid using the ellipse tool for creating circles – for some reason it won’t snap to pixel properly. Instead use the rounded rectangle tool with a large radius to achieve a circle shape. Also, if you want to use textures, you first need to define that texture as a pattern, which you can then use as a ‘Pattern Overlay’ in the layer style options.
3) Enable the ‘Snap to Pixel’ setting when drawing with the shape tool
To make sure this is enabled select the shape tool, then cast your eye to the top of Photoshop where all the options for the tool you’ve just selected appear (see image above). Next click the down arrow to the right of the Custom Shape icon (labelled Geometry Options on hover) and then tick the ‘Snap to Pixels’ checkbox.
4) Icons must be vectors pasted into Photoshop as ‘Shape Layers’
If you use bitmap icons they’ll just blur when you scale your design up; you need to use icons that are in vector format. That may mean recreating some of your icons in Illustrator and then adding layer styles to them in Photoshop (Gradient Overlay, Stroke etc). Be careful when you copy and paste these from Illustrator into Photoshop though – you need to paste them into Photoshop as ‘Shape Layers’ (see image above).
5) Scale up as you go to check your work
As you’re designing its best to keep checking your work by scaling it up 200%. This way you’ll notice any things that need correcting/adjusting as you go. At the bottom of this article is a link to a very handy Photoshop action that lets you do this in a single click.
6) Export your images
This isn’t something I’ve had to do myself as I provide all my iPhone app designs to developers who export the images and then develop the app. I should really start to learn Objective-C, but the time escapes me at the moment. Anyway, I know that the whole exporting process can be a little tedious.
According to this great article on Smashing Magazine (Designing for iPhone 4 Retina Display: Techniques and Workflow), the best export method seems to be:
…enable the layers you’d like visible, make a marquee selection of the element, then use Copy Merged and paste the selection into a new document — not much fun when you have hundreds of images to export.
I’d advise checking out that article, especially the exporting section for more info, and also the incredibly useful Photoshop actions that can be found at the bottom of that same article. Also, this article may be of some use too: ‘Designing for iPhone 4′s Retina Display: What I’ve Learned’.
I hope some of you found this article useful. Below are a few links to some handy resources I regularly use for my designs.
Also If you have any iPhone app design tips to share yourself, I’d love to hear them!