Blog

Category
  • iPhone 6 sizes and Grid

    I don't intend to go in-depth about the funkiness of these new resolutions, 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.

    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.

    image

    2x Equivalency

    The equivalent size helps me visualize the extra room that you get on the screen, because not only it's 3x pixel density but it's also higher resolution (more screen real estate) and that's too much for my wee brain to work out while designing. So, to help us understand, if you're used to designing for an iPhone 5s at 2x, your canvas would be the equivalent of 828 ✕ 1472 for the 6 Plus.

    Design Strategy

    Mostly what that means is that your mobile app designs now need to be responsive not only vertically but horizontally too.

    I'm thinking I'll just design for the 4.5" screen and keep in mind what would rescale and realign when resizing up and then show in red-lines what flexes and what's fixed. And in certain circumstances I'll design specific screens for the 6 Plus to make use of the extra room. But, for the 6 Plus I'll design it in the 2x equivalency because I'm used to it, and then use PaintCode for glyphs and for images (like photos / avatars) they'll need to be generated in 1x, 2x and 3x.

    Grid

    The new resolutions are not all multiples of 8 (odd), but the grid can be an approximation of that. So here are some PSD templates with the grids.

    Please refer to my post on Photoshop Secrets for usage.