As in most projects, you will create the graphics for an iPad app before you begin to build the iOS application. With the release of iPad and changes to the iOS SDK, you can now create universal iOS apps. A universal app will work on the iPhone/iPod and the iPad. When creating the graphics for a universal app, you might think that you would create one large image (iPad size) and tell the app to resize the image as necessary as to the viewer's device. But, this gives very poor results. One of the amazing features of iOS apps are the brilliant screen resolutions. In order to take advantage of this feature, you will need graphics in several sizes. The app will use a different graphic depending on the user's device.

In this tutorial, we are assuming that your app will play in full screen, which will block out the Status Bar (the bar that shows the battery icon). If not, you will need to compensate for the 20 points taken up by the Status Bar. You may have noticed that I used the term points instead of pixels.

If you have been working in pixels for the web, you will need to start thinking in points. Apple^R refers to the size of the display in points and pixels and at first glance the difference can be confusing. This really wasn't an issue before iPhone 4 because the number of points equalled the number of pixels for each device. However, the iPhone 4 has a Retina display. In case this is the first time you've heard the word "Retina" it refers to the new high resolution display that uses 4 pixels for each point on the screen. Therefore, the iPhone 4 will have the same physical dimensions as the earlier iPhones but will use 2 times of number of vertical and horizontal pixels.



So we will want to create the graphics for our apps in three sizes. There is the low resolution and high resolution sizes for the iPhone. Then the graphics for the iPad are a third size.

Below is a summary of the pixel relationship for each device.

iPad: 1024 pixels x 768 pixels x 132 resolution
iPhone 4: 960 pixels x 640 pixels x 326 resolution
iPhone 3G: 480 pixels x 320 pixels x 163 resolution

You may be wondering why each device has a different resolution. The resolution is the number of pixels per inch. The difference in resolution for each device is a reflection of the density of the pixels per inch. For example, the viewing area of the ipad is 7.76 inches x 5.82 inches and the pixels dimensions are 1024 x 768. The result is a 132 resolution.

Resolution and Resulting Screen Size

1024 x 768 at 72 res would be 14.22 inches by 10.66 inches
1024 x 768 at 132 res would be 7.76 inches by 5.82 inches

So, the iOS device takes the 1024 x 768 pixels, which would display at 14.22 inches by 10.66 inches on your computer screen, and compresses them into the 7.76 inches by 5.82 inches on the iPad. This compression is why the iPad and other devices have such a brilliant screen display and also why it has a resolution of 132.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
Apple, Motion, iBooks Author, GarageBand, TextEdit, Pages, iMovie and Mac are trademarks of Apple Inc., registered in the U.S. and other countries. BellaOnline is an independent publication and has not been authorized, sponsored, or otherwise approved by Apple Inc. Screenshots used by permission.