iPad & iPhone Graphics Points vs Pixels
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. AppleR 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.
Editor's Picks Articles
Top Ten Articles
Content copyright © 2019 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.