g
Printer Friendly Version

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

adobe

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.







Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

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



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


BellaOnline Editor