Designing for the iPhone/iPad

If anyone’s interested in designing for the iPhone/iPad, whether it’s responsive web design or app design, you should read up about how to prepare your files! For retina display, both the iPhone 4 screen size and the pixel density of the screen is DOUBLED, giving it a 640 x 960px screen size (compared to the previous 320 x 480px size) and a whopping 326 pixels per inch (compared to previous 163ppi). This new screen squeezes 4 pixels where there used to be one – that’s why the images look so crisp and delicious!

Photoshop Setup Specs:

iPhone 3.0
Screen resolution: 72 ppi
Screen size: 320 x 480 px
Icon size: 57 x 57 px
File format: PNG-24
iPhone 4.0
Screen resolution: 72 ppi
Canvas size: 640 x 960 px
Icon size: 114 x 114 px
File format: PNG-24
Screen resolution: 72 ppi
Canvas size: 768 x 1024 px
Icon size: 72 x 72 px
File format: PNG-24

Graphics for the iTunes Store
Icon: 512 x 512 px (.tif, .jpg or .png, 72dpi, RGB)
iPhone Screenshots: 320 x 480 px or 640 x 860 px (.tif, .jpg or .png, 72dpi, RGB)
iPad Screenshots: 1024 x 768 px (.tif, .jpg or .png, 72dpi, RGB)


Some helpful resources:

iPhone Templates

iPhone GUI PSD from Teehan + Lax
iPhone GUI PSD Retina from Teehan + Lax
iPhone Stencil for OmniGraffle from Patrick Crowley
iPhone UI Vector Elements from Mercury Intermedia

iPad Templates

iPad Stencil for OmniGraffle from Information Architects
iPad GUI PSD from Teehan + Lax
iPad Vector GUI from Icon Library

Apple Interface Guidelines for iPhone and iPad





Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s