Preparing Image Assets for iOS

Image Assets For iOS– Similar to Android, iOS too has a way of dealing with different pixel densities of iPhones, iPads and other Apple devices.

They have categorized the displays as Retina 2x and 3x. Here is a table of different apple devices and the densities they fall in.

Device                                       Density                             Resolution

iPhone 5/5S                             Retina 2x                               640 x 1136 px

iPhone 6/6S                             Retina 2x                               750 x 1334 px

iPhone 6 Plus/6S Plus           Retina 3x                                1242 x 2208 px (1080 x 1920 on device.)

Here is how to go about optimizing your designs and export them for specific densities. 

1. Create your designs always in Full resolution @3x if possible.
2. Use vector elements in your design.
3. Don’t trim Raster images, keep their full resolution in your documents.
4. Convert your raster images to smart objects in photoshop to protect them from pixelation while enlarging and reducing the document.
5. Make sure to follow the design guidelines outlined by Apple.
6. Export your images in 24 bit – PNG with 8-bit Alpha.

To export your design elements at different densities just press Ctrl + Alt + I in Photoshop and make sure the constrain ration link icon is pressed then enter the desired value in one of the fields to resize your document to another size.

Right click on the layers or groups and select Export as (Photoshop CC) to cut them out for sending them to developers.

NOTE: if you do not have Export as function in your layer panel then you probably have an outdated version of Photoshop, Install Creative Cloud Desktop App and update/Install the latest version of Photoshop to get the feature.