With the release of the iPhone 6 and iPhone 6 Plus came a new set of screen sizes, including an entirely new set for the iPhone 6 Plus, which is a first for Apple devices. As designers, this could theoretically add quite a bit of extra work and we need to find the best ways to incorporate designing for them into our workflow.

Previous iPhone models

Designing for the first iPhone models was a relatively simple affair. We could design screens at the phone’s native resolution size of 320 x 480 pixels and they would translate easily over to the device without much additional work required.

iPhone 4 and iPhone 5

The iPhone 4 models arrived on the scene which came with ‘retina’ screens. These new types of screens had a much higher pixel density and therefore higher resolution. One pixel effectively became four, making the screens appear to be much higher in detail within the same physical screen space.

To cater for these new screens, we were required to design concepts at double the size, so although the dimensions were still the same at 320 x 480 px, designs now needed to be created at 640 x 960 px. Two versions of any image assets now needed to be exported – one at this larger (2x) size, and one at regular size (1x) to work on phone models without retina support.

The iPhone 5 wasn’t a huge leap from the iPhone 4 – the only difference being that the screen was lengthened from 480 px to 568 px, thus creating a bit more vertical space for elements. Assets still needed to be exported at both 1x and 2x sizes, but obviously if you were designing full screens, this extra space had to be taken into account.

iPhone 6 and iPhone 6 Plus

With the iPhone 6, the pixel ratio again remains the same at 2x, but the screen size has changed again, giving us both more horizontal and vertical space to play with in our designs compared to the iPhone 5.

The iPhone 6 Plus on the other hand, has an even higher pixel ratio of 3x, which means one pixel effectively becomes nine. An extra set of assets will need to be created to cater to this phone, which also features a much larger screen.

Pixel and point comparison on original iPhones, iPhone 4, 5 and 6, and the iPhone 6 Plus

Points, pixels and scale factor

There are three things we need to know about when designing for the iPhone:

  • Points – These are abstract units relating to coordinates in a screen design. Each device’s screen is measured in point values; this does not translate to pixels directly.
  • Scale factor – This relates to the pixel ratio of the device – a higher number produces a higher level of detail. The iPhone 6 has a 2x scale factor, and the iPhone 6 Plus has a 3x scale factor, so will appear to have more detail within a smaller screen area.
  • Pixels – Points are rendered into pixels to get the resolution of the device. Point values are multipled by the scale factor to get the pixel dimensions, which is the size you should be creating your designs at.

The diagram and table below shows the relationship between points, pixels and scale factor for the iPhone 5, iPhone 6 and iPhone 6 Plus for comparison. As you can see, the pixel values for the iPhone 5 and iPhone 6 are double that of the point values and the pixel values for the iPhone 6 Plus are three times that of the point values:

Comparison of screen data-lazy-sizes between iPhone 5, iPhone 6 and iPhone 6 Plus

iPhone 5iPhone 6iPhone 6 Plus
Points320 x 568375 x 667414 x 736
Scale factor2x2x3x
Pixels640 x 1136750 x 13341242 x 2208
Pixels per inch (PPI)326326401

The iPhone 6 Plus hardware also slightly downsamples the screens, so there is a minor possibility of thin lines and typefaces appearing lightly blurry compared to the iPhone 6.

Creating concepts and assets

Canvas sizes

If you want to design full screens for the iPhone 6 and iPhone 6 Plus, you will need to create canvases with these dimensions in your image editor:

  • iPhone 6: 750 x 1334 pixels;
  • iPhone 6 Plus: 1242 x 2208 pixels

Saving assets

As we have seen, assets are now required in 1x, 2x and 3x sizes to work across all iPhone devices. The easiest way to achieve this is to first make sure all assets are vector based so they can be scaled.

In my example below, I have an asset which is the Createful logotype:

  • Initially I create the asset at 2x size, then export it at 100% with the filename createful@2x.png;
  • To create the 1x version, I export at 50% and name it createful.png;
  • To create the 3x version, I export at 150% and name it createful@3x.png.
  • These can obviously be done in a different order – largest to smallest, for example, but this way generally works for me.

1x, 2x and 3x asset data-lazy-sizes

This can be done manually in Photoshop by using ‘save for web’ each time, but there is now a very handy feature called Adobe Generator which allows you to export assets from layers on the fly.

Adobe Generator

First you’ll need to turn on Generator for your file by going to the File menu and selecting Generate > Image Assets. Name the layers (or layer groups) you want to export as assets with the scaling value in %, file names and file types you want them to be, separated by commas (see screenshot below for example) and save the Photoshop file. Assets will be exported to a folder in the same location as your Photoshop file.

This is a very quick way to save out all assets in one file at once in a painless way. If you need to alter assets within the Photoshop file and re-export them, just re-save your file after making edits and the assets will be saved out again, overwriting what was in the folder previously and removing any that were deleted.

Turning on Generator in Photoshop and naming layer to save out different sized assets

Extract Assets is another brand new feature in Photoshop which provides an interface with which to set up which assets to extract and how they are saved as opposed to naming the layers, but I think I personally prefer the manual way.

Photoshop 'Extract Assets' screen

Conclusion

The big take away from all of this is that everything should be vector based, or you’re going to run into trouble pretty quickly.

Exporting the additional 3x assets shouldn’t be too much of a big deal if already using Adobe Generator and exporting multiple sized versions of assets – an additional piece of text just needs to be added to each layer name to do this, taking mere seconds. In a previous post, we also explored using PDF icons, which is certainly a feasable option.

However, if we now need to create design concepts for the iPhone 6 and iPhone 6 Plus to show to clients, this probably will take a bit of extra time as we are dealing with two different canvas sizes with different icon and element sizes within. We can’t just shrink down the iPhone 6 Plus version to create the iPhone 6 version accurately (although this might be ok for a quick mock-up) and so will have to create them separately. It’s probably best to design for one of the models, then translate to the other.

How do you plan to design for the iPhone 6 and iPhone 6 Plus? Do you use something other than Photoshop to design your layouts or generate assets? We’d love to hear about your workflow!

Useful resources

Save