Right @2x for retina 4 hd

Question

When creating PSD mockups for iPhone, what is the expected width of the design ? What are the right dimensions to use ? My designers usually provide me with designs which are 640px and 72ppi, and i feel this is not right. Even if their design is 640px, the physical space i have on my code is still 320px and i ended up having to shrink every single element twice its size.... So, what measurements should i be looking at exactly on an iPhone specific PSDmockup

So whether there are 1x | @2x | @2x retina HD | @3x What's the right proportions of mockups ? Is it real to use only 640 * 1136 or now for iPhone 5+ need 750 * 1334 as standart @2x ?

I'm already read topics: http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions http://aten.co/2014/09/12/designing-from-iphone-5-to-iphone-6-iphone-6-more-than-i-bargained-for/

But still can not understand what is @2x and what is @2x retina hd

Answer 1

Designers usually use the pixel size of the Rendered Pixels. That number is twice the size you use to code because of the Retina.

So when they give you for example some icons that are 100px by 100px and you need to shrink them by half, that is because they design for retina screens. Retina is in theory the same size as you code but it has more pixels so the image looks sharper.

@2x is the old way images were identified to be used either in standard resolution screen or retina screen. Now you might want to check AssetCatalog as it lets you drag and drop different sized images without renaming issues.

@2x retina HD is just totally wrong. as the @2x refers to retina. The @3x is for iPhone 6plus.

You might want to check Apple's guide for app icon sizes to understand about the different screen sizes.

Answer 2

The iPhone 6 Plus is 414 x 736 points. That being said, your deliverables need to fit the @3x resolution (1242x2208). All other devices are simple, take the resolution in points (that what you design for) and double the asset size for export (to accommodate the retina display).

You can read more about it here: http://www.paintcodeapp.com/news/iphone-6-screens-demystified