I don’t intend to go in-depth about the funkiness of the subject, so I recommend reading these 3 links to get the full picture.
In short, the iPhone 6 Plus is this kind of faux 3x. So your Photoshop canvas should be set to 1242✕2208 but the device will downsize it to 1080✕1920, which in a 2x world would look like the equivalent of 828✕1472. #brainboom
That’s because of the higher PPI (pixels per inch):
- A 1x, 10px tal element renders as 1.5mm on 163 PPI
- A 2x, 20px tall element renders as 1.5mm on 326 PPI
- A 3x, 30px tall element also renders as 1.5mm on 401 PPI
Here’s a visual representation that hopefully explains what’s going on.
Before you just go download it, let me explain the thinking behind the grid.
The iPhone resolutions so far are:
640 ✕ 960 & 640 ✕ 1136
If you want to sub-divide those into the largest possible squares you need to find the highest common divisor. On the iPhone 4 that is 32px, on the iPhone 5 it’s 16px.
I recently heard that not many people know about this feature, even though it’s been around for about a year.
Photoshop didn’t use to render fonts very well for digital mediums, which use sub-pixel rendering to anti-alias fonts - making them appear slightly thicker but not as thick as the “Strong” settings.
As a result, if you wanted to mock-up a website or app, the font rendering options never quite matched the way fonts appear when loaded on a browser or mobile device.
Photoshop then added two new rendering options, Mac LCD and Mac, which solves the problem beautifully!