g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


iPad & iPhone Graphics Points vs Pixels

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. 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.

Join us in the Flash forum.

Join us in the Digital Art and Design forum.

Add iPad+%26+iPhone+Graphics+Points+vs+Pixels to Twitter Add iPad+%26+iPhone+Graphics+Points+vs+Pixels to Facebook Add iPad+%26+iPhone+Graphics+Points+vs+Pixels to MySpace Add iPad+%26+iPhone+Graphics+Points+vs+Pixels to Digg iPad+%26+iPhone+Graphics+Points+vs+Pixels Add iPad+%26+iPhone+Graphics+Points+vs+Pixels to Yahoo My Web Add iPad+%26+iPhone+Graphics+Points+vs+Pixels to Google Bookmarks Add iPad+%26+iPhone+Graphics+Points+vs+Pixels to Stumbleupon Add iPad+%26+iPhone+Graphics+Points+vs+Pixels to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 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.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor