Creating Graphics for iPhones’ Varied Screen Dimensions

With the latest lineup of iPhones, including the recent iPhone X, there are new screen dimensions to consider when creating app graphics in Photoshop, Illustrator, or InDesign

Closeup photo of an iPhone in a person's hand.

by The Creative Cloud Team

posted on 12-01-2017

With the latest lineup of iPhones — including the recent iPhone X — there are new screen dimensions to consider when creating app graphics in Photoshop, Illustrator, or InDesign.

The iPhone X has a larger display with different dimensions than the earlier generations, and the Super Retina display also means that graphics need to be exported with higher resolutions, or scale factors. See below for all that you need to know for creating graphics for every generation between the iPhone 6 and iPhone X.

iPhone X.

Screen dimensions.

Adobe’s product teams are working on adding iPhone X presets in Photoshop, Illustrator, and InDesign, but in the interim, start a new document with the dimensions below:

Exporting graphics.

The iPhone X has a high-resolution Super Retina display with a scale factor of @3x, and we recommend that you export graphics with @1x, @2x, and @3x resolutions. For glyphs and other flat vector artwork, use resolution-independent PDFs.

Use Illustrator CC’s Export for Screens option to export multiple graphics in various resolutions and file types in one step. Learn more about Export for Screens in Illustrator’s User Guide.

iPhone 6/6s, iPhone 7/7s, iPhone 8.

Screen dimensions.

These iPhones all share the same screen dimensions, and the presets for these dimensions are currently available in Photoshop, Illustrator, and InDesign as iPhone 6/6s.

Exporting graphics.

Graphics for the iPhone 6/6s, iPhone 7/7s, and iPhone 8 need to be designed with a scale factor of @2x and exported as @1x and @2x. For glyphs and other flat vector artwork, we again recommend using resolution-independent PDFs.

Use Illustrator CC’s Export for Screens option to export multiple graphics in various resolutions and file types in one step. Learn more about Export for Screens in Illustrator’s User Guide.

iPhone 8 Plus, iPhone 7 Plus, and iPhone 6s Plus.

Screen dimensions.

These iPhones all share the same screen dimensions, and the presets for these dimensions are currently available in Photoshop, Illustrator, and InDesign as iPhone 6 Plus.

Exporting graphics.

Like the iPhone X, graphics for these phones need to be designed with a scale factor of @3x and exported as @1x, @2x, and @3x. For glyphs and other flat vector artwork, we recommend using resolution-independent PDFs.

Use Illustrator CC’s Export for Screens option to export multiple graphics in various resolutions and file types in one step. Learn more about Export for Screens in Illustrator’s User Guide.

You can review Apple’s full Human Interface Guidelines online.

Topics: Creativity, Illustration

Products: Photoshop, Creative Cloud