The weirdness of the iPhone 6 Plus resolution and how to work around it

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.

Read More

iPhone 5 / iOS 7 grid

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.

Read More

Traditionally designers working on apps or websites, often end up with a lot of duplicated layers that look the same. This is because they’ll design each screen in a separate file, separate artboard, or separate folders within a file.

The result is that if you make any small change to any object on one screen (the object itself, the style or the position) you may need to update the object on the other screens. This can make creating variations and iterations a very slow an painful process - and when things are slow and painful I find that we are discouraged from being fully creative and from improving our designs.

Layer comps solve this problem beautifully! They allow you to toggle visibility position and style of your layers and save those states. So any layer used in one of your screens can be used again in your other screen. No more duplicate stuff to manage!

I hear some of you saying “but I can just use symbols / smart objects!”. Well, sure that helps, and you probably want to use them anyway. Bu if you want to move a title 2 pixels up in one screen, and have it be a different color in some screens but not others, Smart Objects won’t help you much.

On the latest Photoshop CC update released on the 18th of June, Layer Comps got a lot more powerful and in this video I show you how I use them.

Here are the PSDs used in this video if you want to explore

Date Picker:


Time Travel App:

If you have any questions, please let me know in the comments or on twitter either on @phtshp or @edwardsanchez.


Pretty nifty way to visualize default shortcuts for Photoshop and other apps!

Quick tip on a better way to create divider lines using text dashes instead of vector lines.

One more thing I forgot to mention in the video is that you should select NONE for text antialiasing, otherwise the lines may appear blurred with half pixels.

Play with different fonts to get different a line thickness.

Digital Font Rendering Options

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!

Non-Linear History is a hidden feature that can be very useful for iterating!