: There is a huge myriad of resolutions for different devices (this is a good cheatsheet for iOS), but you are in the right track. The 'real' resolution is, as you pointed out, 1024 x 768

@Murray976

There is a huge myriad of resolutions for different devices (this is a good cheatsheet for iOS), but you are in the right track.

The 'real' resolution is, as you pointed out, 1024 x 768 pixels. But when you are preparing the materials to send to the developers, you need to design with retina in mind. This means, all your graphics need to be either scalable (SVG for example), or double the size you'd normally use (PNG, JPG..).

So to answer your questions:

1) What size to start with? Double the display size: 2048 x 1536 pixels (for now, at least!).

2) What size to export graphics? Double the 'natural' size (the equivalent of ppi72, but ppi are I think irrelevant in this case). So if you icon should be 40x40px, you need to send it in 80x80px. Unless it's an SVG, that because it's scalable it can be any size.

3) Same for the iPhone, or any device with (1.5x or) 2x pixel density - most smartphones. 640x960 px for iPhone 4, 640x1136 px for iPhone 5.

The specifics will depend on how the developer is making the app, but he/she shouldn't scale the graphics unless they are all SVGs and in the same starting size. The only way you will get artefacts is if the graphics are @1x PNG/JPG and he/she tries to double them.

Final note: Because different devices have slightly different resolutions (or sizes - it's usually the portrait height that varies), it's best if you keep this in mind and design according to those changes. So, for example (and this has happened a lot to me with games), make sure your app backgrounds are long enough to fit everywhere. Even if the rest of the elements will be floating in the top part and the bottom extends to infinity.

Vote Up Vote Down

Login to post a comment!