0

I have to design an iOS app in iPhone 5S, 6 and 6 Plus in Adobe Illustrator. Can anyone help me with the ever confusing PPIs and retina/retina HD displays and dimensions of these?

For example, I first design for iPhone 5S which is retina display with 1136x640-pixel resolution. I use 72 ppi in Illustrator. Now since it's retina display, these pixel dimensions make it @2x, right?

Since now it's illustrator, I can directly export my artboard toother pixel resolutions/PPI to make the same design I created for 5S for 6 and 6 Plus. But, adding 36 PPI to 72 PPI thus making it 108 PPI doesn't actually give me the dimensions of iPhone 6 Plus.

I am thoroughly confused in this.

Can anyone help me with all of this with keeping in mind the following please:

I have to design for iPhone 5S, 6 and 6 Plus with Adobe Illustrator. I then have to give the assets at @2x and @3x to the developers

Also, one more thing please. Retina assets have to be exactly twice as big as non-retina images and Retina HD thrice as big. But what about retina assets with different pixel dimensions? For example, iPhone 5S is retina and so is iPhone 6. But they have different dimensions, so what will be done with the assets in this case?

  • Why are you starting with 72 PPI, and why are you adding 36? Also, the aspect ratios of the 5, 6, and 6 plus are close but not identical. Multiplying the resolution of the 5 will not give you the exact dimensions of the 6 or 6 plus. – JohnB Dec 10 '14 at 6:36
  • 2
    You should maybe take a look at the iOS Guidelines: developer.apple.com/library/ios/documentation/UserExperience/… – KMSTR Dec 10 '14 at 13:16
  • 1
    "in Adobe Illustrator" = then it doesn't matter. Illustrator is vector based. PPI is irrelevant. – DA01 Jul 9 '15 at 16:12
2

Create your application as per 5S dimension. This fine you need given assest to developer as below. Retina display for iPhone4S,5,5S and 6 use @2x and only for 6pluse give @3x assest.

For more refrence of assest size and guideline refer below link. http://iosdesign.ivomynttinen.com/

2

Design in points, then scale up.

A point what was once a single pixel on non-retina devices. In the world of @2x retina devices, a point is now 2x2 pixels (4 pixels make up a single point), and in the world of @3x retina (6 Plus), a point is now 3x3 pixels (9 pixels make up a single point). The iPhone 6 Plus also does down-scaling automatically (from 1242x2208, to 1080x1920), but you should forget about that fact when designing. The down-sampling is out of your control. It does mean non- pixel-perfect GUI, but the PPI on 6 Plus is so high, it still looks sharper.

The point sizes, for each device you should design in, are:

For 4S: 320x480

For 5/5S: 320x568

For 6: 375x667

For 6 Plus: 414x736

In Illustrator, do your designs in points (I do these sizes in pixels), then after initial design, scale them up.

For iPhone 5/5S, scale by 200%, this will give you your @2x design.

For iPhone 6, also scale by 200%, this will give you your @2x design.

For iPhone 6 Plus, scale by 300%, this will give you your @3x design.

After the scaling, you can then fine-tune your pixel art, if you want to take advantage of single pixels on a @2x or @3x device for example.

Here is also a great article that will help you visualize this information: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

I hope this helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.