Create Mobile Images in Photoshop and Sketch 3

01
of 06

Preparing Images For Mobile Devices

Images shown in Experience Design and an iPhone demonstrate the sizing issue.
It is the wild,wild west as device manuafactures accelerate the Resolution Arms Race.

It is becoming increasingly common for graphics pros to not only have their work appear in print but also on the web and devices such as iPhones, iPads, Android devices and Android tablets. On the surface this could be seen as a “good thing” as the media our work appears on expands to digital screens. The downside is the sheer number of screens, and the confusing number of screen resolutions. It is not uncommon to hear seasoned pros wondering whatever happened to the days when a 300 dpi resolution TIFF image in the CMYK format was the norm. Oh for the good old days!

Those days are over. We now have to contend with the fact that a 200 by 200 image may appear fine on one device and yet appear quarter size on another and three quarter size on yet another. It all really comes down to the “Resolution Arms Race” being waged by the device manufacturers as they try to jam more pixels into a screen than their competitors.

This brings me to what I call “The Rise Of The Suffixes”. The suffixes are those things - @2x, @3x - tacked on to the name of an image. They essentially, for example, put the right image in the right place on the right device. Then it gets even better.

A lot of our work involves working with icons and, with the rise of the Flat design movement, these things are created in such vector drawing applications as Illustrator and Sketch. The problem is devices simply can’t render .ai or .eps files. They need to be converted to Scalable Vector Graphics and, depending on the application used to create the icons, there might not even be an SVG option.

Then it gets even better.

There is a new class of software- Prototyping applications – that are becoming the assembly point before your images and icons are shoved out to devices and they have their peculiarities as well.

In this “How To” I will be moving between Photoshop and Sketch for the graphics and using Adobe Experience Design to demonstrate a few of the pain points between your idea and eventual deployment. Let’s get started.

02
of 06

How To Prepare Images For Mobile Devices In Adobe Photoshop

The Image Size dialog box is shown.
Change the resolution before you change the dimensions when using the Image Size dialog box.

The first step in this process is knowing your target device or devices. In this case I will be targeting the iPhone 6 which has a screen area of 375 pixels wide by 667 pixels high. The design calls for the image to be the width of the screen.

The image to be used was shot inside the Bern Minster Cathedral in Bern, Switzerland. Once the image opens in Photoshop, select Image>Image Size to check the the dimensions of the image and its resolution. Obviously an image that is 3156 x 2592 with a Resolution of 300 ppi and a file size of 23.4 Mb simply won’t work.

Inside the Image Size dialog box, reduce the Resolution to 100 ppi. Do this first because the image dimensions will also change. With the Resolution set , change the width to 375 Pixels. If you check the Image Size data you will notice the image has shrunk from 23.4 Mb to a more mobile-friendly 338k. Click OK to accept the change and close the Image Size dialog box.

03
of 06

How To Use the “Export As …” Dialogue Box In Adobe Photoshop

The Export As dialog box is shown.
The new Export As dialog box replaces the Save For Web feature in Photoshop.

Once the image is ready for export, select “Export > Export As …” to open the Export As dialog box.

This Dialogue Box is a recent addition to Photoshop and replaces the “Save For Web” dialogue box we have used for years. If you still need need it, you can find it in the Export pop down. It is , for obvious reasons, now known as “Export For Web (Legacy)”. If this is your first visit to this dialog box, here’s a brief tour:

  • Size: This column sets the output size of the image. The interesting aspect of this area is it will enlarge the image but the image won’t appear as “fuzzy” on the device because of the huge number of pixels on the device’s screen.
  • 1X : Click on hold this and you will be presented with a number of sizes. The 1x, 2x and 3x categories are traditionally associated with Hi Dpi devices from Apple and they along with a few others will prepare images for Android devices.
  • Suffix: This choice will show your size but it will be shown as @2x or the size chosen. This suffix will be added to the image name.
  • The + sign: Click this to add various sizes for output. In this case I clicked it twice and chose 2x and 3x from the pop down. This will cover practically any iOS device.
  • The Trash can: Click this and the choice is removed from the line up.
  • File Settings: Choose the format – jpg,png,gif or svg – best-suited to the image.If file size is a concern you can also reduce the Quality settings.
  • Image Size: you can change the physical dimensions of the image.
  • Canvas Size: You can change the physical dimensions of the image canvas.
  • Metadata: You can add copyright and your contact information to the image’s metadata.

When finished, click the Export All button. You will be asked where you want to place the images. A good habit to develop is to click the New Folder button and create a folder to hold the exported images. When you click Export, you will be shown the images in the folder.

04
of 06

How To Prepare Images For Mobile Devices In Sketch 3 From Bohemian Coding

The Sketch 3 interface is shown and a Red Box is drawn around the Export area of the Properties panel.
Photoshop is in the odd position of playing "catch up" with Sketch when it comes to designing for mobile.

Sketch 3, a Macintosh-only application from Bohemian Coding, is rapidly gaining prominence among UX and UI designers due to its intense focus on web and app design. In fact Photoshop, in many ways, is in the odd position of having to play “catch up” with Sketch.

To prepare an image for mobile in Sketch , select the image on the artboard and click the Make Exportable button at the bottom of the Properties panel. This will open the Export dialog box. Click the + sign to add the 2x and 3x versions and also add the suffixes. The formats available are PNG, JPG, TIF, PDF,EPS and SVG. In this case choose JPG.  Click the Export button and target or create a folder to hold the various images exported.

05
of 06

Why You Need To Create Three (Or More) Versions Of The Image

The image is placed on three different artboards and the image has three different sizes.
When all else fails use the version of the image with the @2x suffix when using prototyping software.

In many respect the Mobile market is the “Wild West” of resolutions and one size definitely does not fit all. In the above example from Adobe Experience Design the image is placed on 2 iPhone 6 artboards and an Android device artboard. Notice how the 1x version on the left appears to be half size. This is exactly how the image would appear on an iPhone 6 with its retina screen. The 2x version fits perfectly and the Android version runs off of the screen. Your choice is to either scale the image or export the image out of Photoshop at a different size.

06
of 06

Test Early, Test Often, Trust Nothing, Trust No One And Especially Yourself.

The art board and the artboard displayed on an iPhone are shown.
There is no one size fits all solution and you need to test on as many devices as you can.

What you need to understand is this is just the start of the process. Viewing your work on as many devices as you can has to be regarded as a vital piece of the workflow. You also need to be aware this is just the first step in the process of creating graphics assets for app or mobile web projects.

Using prototyping applications is a great way of uncovering the pain points but these same assets will need to be output for use by the developer. In many cases the physical dimensions of the assets, including icons, will be physically huge and not in the svg but png format. At first glance this may seem to be a bit over the top but remember the golden rule of scaling images: it is better to scale down than scale up.

The bottom line is to work closely with your developer and to use prototyping software as way of showing your design intent. Eventually, though, those same assets will need to be ready for the final product and your developer has a better handle on what he or she needs than you.