Advertisement


iPhone 5s, 6, 6 Plus design confusions around dimensions, resolutions and densities


Question

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?

2014/12/10
1
0
12/10/2014 5:24:00 AM

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/

2015/03/11
2
3/11/2015 11:35:00 AM