Doing design work for iPhone and iPad application development is an extremely rewarding and creative process. However, for those who are used to designing for print (and even websites to a degree) will have to unlearn a few things before getting really comfortable with designing for the iPhone, iPad and iPod touch. The objective of this article is to serve as a starting point and reference for designers working on their first few iOS application projects. Also, listed in the 2nd half of this article are some extremely useful tools to help you streamline your design process.
Screen Dimensions in PIXELS: All developers see your designs in pixels so think in terms of pixels too. Everything you know about DPI…let it go. Just let it go. Dots per inch does not matter on an iPhone or iPad screen. How many dots per inch you set in photoshop or Illustrator setup for your canvas size…does not matter. You will read about the iPhone 4 or iPad having a certain pixels per inch. While this info is interesting and maybe good to know for your own edification…it doesn’t matter. The iPhone 4 is 326 pixels/inch (ppi), older iPhones and iPod Touches are half that at 163 PPI and the iPad is 132 PPI. Now that you know, let it go. Only pixels matter. What? Your still reading this paragraph. Why? Pixels! Nothing else. The only thing PPI effects is how your image will display on different monitors and devices. If you want an in-depth look on DPI, PPI and the Photoshop 72 DPI for web myth, read this.
Important Note: The iPhone 4 retina display packs 4x the amount of pixels (2x in each direction) yet fits on the same sized screen. “Aha”, you say, “Pixels Per Inch do matter”. They certainly make the text and images look much crisper. But, when designing for your device of choice just save yourself the heartache and set it up in pixels. The only thing that will trip you up is the display of your designs on the computer vs. the device. The simplest rule of thumb here is to set up your photoshop file at 72 DPI so you can see it display in likeness on your computer monitor. However, below, I will share a few tools to make it even easier for you to see what you are designing in real time right on the device.
Setting Up In Photoshop
1. As long as you never plan on making this a print ad as well, DPI doesn’t matter. 72 is fine.
2. In this case, the design will look huge on your computer because the iPhone 4 retina display packs more pixels per inch than does your monitor.
3. Notice if you change the DPI, the Pixels will change. Again, just worry about pixels. If you feel better putting at 300 dpi then just make sure you change pixels back to match device you are working on.
Important Icon Notes: You do not need to bevel or put a sheen on your icons. Apple does both automatically. Your developer has the option for you to remove the sheen from your icon on the iTunes app store oand for display on the devices. This is recommended as the the sheen can wash out many icons and, if you really want it, it’s always better you you to create your own.
The design elements iOS apps are always transparent PNGs. Apple hardware uses very sophisticated optimization techniques with PNGs so that’s what you’ll use. Here are some good tips when exporting PNGs for your developer:
- [spoiler title=”1. Exporting layers” open=”0″ style=”1″]Export layers individually and crop them tightly around the object. Some designers prefer to use the web standard (aqua) in slicing the layered elements so that when put next to each other they fill the whole screen. While this is generally not an issue for the developer, sometimes it can mess UI up as the area on a button will extend beyond it’s physical space. The developer puts all your layered assets in, so cropping tight is the preferred method of receiving files.[/spoiler]
- [spoiler title=”2. Exporting images” open=”0″ style=”1″]Export connected, static images as one flat image. See the example on right. We will assume here that the camera, “Related Photos” text and the yellow title bar and yellow body are all static. They don’t move. They don’t minimize when clicked. You get it. You should then export these layers as one PNG. But, what if the camera was a button and when you clicked it the whole yellow body box minimized under the header like a window shade? Then, my friend, the camera would be a separate png image.[/spoiler]
- [spoiler title=”3. Buttons in Pressed and Unpressed States” open=”0″ style=”1″ ]This is a big one, so I bolded, underlined AND italicized it. Sticking with the idea that the camera as an interactive button, you will also need to provide a PNG of this camera in it’s pressed state. The pressed state is when the finger is actually on the button. It is a smart, subtle feedback loop for the user. Apple has thought about user interface very seriously and you should read their User Interface Guidelines in full, but pressed state is often the image just slightly darkened. But, it can be anything you want it to be.[/spoiler]
- [spoiler title=”4. Exact pixel sizes” open=”0″ style=”1″]Always send the image the exact pixel size you want them in the application. Sometimes web images are larger than they are being displayed. This is not recommended for iOS devices. It adds another variable to the developers work when putting it all together. One slight exception to this rule. If you have a bunch of bigger images and then use the same image as a thumb somewhere else, your developer will usually use the big image and scale down for the thumb. No sense in having the same image twice now is there:)[/spoiler]
- [spoiler title=”5. Organization” open=”0″ style=”1″ ]Organize the cropped pngs in folders by screen and name them consistently and descriptively. There is no exact rule of thumb here but once deliverables have been decided, set a naming convention with your developer. The more consistent the files names are, the easier they are to assemble.[/spoiler]
- [spoiler title=”6. Labeling” open=”0″ style=”1″ ]Put a snapshot png of each screen in each screen folder and name it aaa-descriptive-screen-name.png[/spoiler]
- [spoiler title=”7. The Finish” open=”0″ style=”1″ ]Put the Photoshop file in there as well. When you’ve exported all of your images into folders and are about to send, include the PSD in the top nav layer with the folders. Most developers can make small tweaks here and there and this will save lot ‘o’ time.[/spoiler]