- Mobile images are not always what they seem
- Prepare images for mobile devices in Adobe Photoshop
- Using the Export As… dialog box in Adobe Photoshop
- Preparing images for mobile in Sketch 3 from Bohemian Coding
- Why you should create three (or more) versions of an image
- Test early, test often, trust nothing, trust no one, especially yourself
Mobile images are not always what they seem
It is becoming more and more popular for graphics professionals to not only print their work, but also online and on devices such as iPhone, iPad, Android devices and Android tablets. At first glance, this can be seen as a “good thing” as the media in which our work appears is expanding to digital screens. The downside is the sheer number of screens and confusing number of screen resolutions. It’s not uncommon for seasoned professionals to wonder what happened to the days when 300 dpi CMYK TIFF images were the norm. Oh, the good old days!
Those days are over. Now we have to accept the fact that a 200×200 image can look good on one device and still be a quarter on another and three quarters on another. It really comes down to the “resolution arms race” that device manufacturers find themselves in when they try to fit more pixels into the screen than their competitors.
This brings us to what we will call the “Suffix Rebellion”. Suffixes are those things – @ 2x, @ 3x – associated with the image name. For example, they essentially put the right image in the right place on the right device. Then it gets even better.
Most of our work involves working with icons, and with the advent of the Flat Design movement, these things are created in vector drawing programs like Illustrator and Sketch. The problem is that devices just can’t display .ai or .eps files. They need to be converted to scalable vector graphics and depending on the application used to generate the icons, there may not even be an SVG option.
Then it gets even better.
There is a new class of software, prototyping apps that act as a collection point before your images and icons are sent to devices, and they also have their own quirks.
This guide switches between Photoshop and Sketch for images and how to use Adobe Experience Design to show some of the pain points between your idea and the final implementation. Let’s start.
Prepare images for mobile devices in Adobe Photoshop
The first step in this process is knowing your target device or devices. In this case, you’re targeting an iPhone 6 with a screen width of 375px and a height of 667px. The design requires the image to be the width of the screen.
The image used was taken in the cathedral of the Bernese Monastery in Bern, Switzerland. Once the image opens in Photoshop, select “Image” > “Image Size” to check the size and resolution of the image. Obviously, a 3156 x 2592 image at 300 ppi and a file size of 23.4 MB just won’t work.
In the Image Size dialog lower the resolution to 100 ppi . Do this first because the image size will also change. With the resolution set, change the width to 375px. If you check the image size data, you will see that the image has shrunk from 23.4 MB to a more mobile-friendly 338 KB. Click OK to accept the change and close the Image Size dialog box.
Using the Export As… dialog box in Adobe Photoshop
Once the image is ready to be exported, select “Export > Export As…” to open the Export As dialog box.
This dialog is a recent addition to Photoshop and replaces the Save for Web dialog that has been in use for years. If you still need it, you can find it in the Export popup. For obvious reasons, it is now known as “Export for Web (Legacy)”. If this is your first visit to this dialog, here’s a quick rundown:
- The size . This column indicates the output size of the image. An interesting aspect of this area is the magnification of the image, but the image doesn’t look “blurred” on the device due to the sheer number of pixels on the device’s screen.
- 1X: hold and you will be prompted for different sizes. The 1x, 2x, and 3x categories are traditionally associated with Apple’s Hi Dpi devices, and they, along with a few others, will prepare images for Android devices.
- Suffix: . This selection shows your size, but it will be displayed as @ 2x or the selected size. This suffix is added to the image name.
- + sign . Click to add different output formats. In this case, double click on it and select 2x and 3x from the drop-down list. This covers almost every iOS device.
- Bin . Click on it and the selection will be removed from the list.
- File Settings: choose the format – jpg, png, gif or svg – that best fits the image. If file size matters, you can also lower the quality settings.
- Image size . You can change the physical dimensions of an image.
- canvas size . You can change the physical dimensions of the image canvas.
- metadata . You can add copyright and your contact details to the image metadata.
Once you are done, click on the “Export All” button. You will be asked where you want to place the images. A good practice to develop is to click the New Folder button and create a folder for the exported images. Clicking the Export button will display the images in the folder.
Preparing images for mobile in Sketch 3 from Bohemian Coding
Sketch 3, a Macintosh app from Bohemian Coding, is rapidly gaining popularity among UX and UI designers due to its strong focus on web and app design. In fact, Photoshop is in many ways in the odd position of catching up with Sketch.
To prepare an image for mobile in Sketch, select an image on the artboard and click the Make Exportable button at the bottom of the Properties panel . The Export dialog box opens. Click the + sign to add 2x and 3x versions and add suffixes. Available formats: PNG, JPG, TIF, PDF, EPS and SVG. In this case, select JPG. Click the “Export” button and select or create a folder to save the exported images.
Why you should create three (or more) versions of an image
In many ways, the mobile market is the “wild west” of permissions, and one size certainly isn’t right for everyone. The Adobe Experience Design example above places the image on 2 iPhone 6 artboards and an Android device artboard. Notice how the 1x version on the left looks half the size. This is what the image looks like on an iPhone 6 with a retina display. The 2x version fits perfectly and the Android version escapes the screen. Your choice is to scale the image or export the image at a different size from Photoshop.
Test early, test often, trust nothing, trust no one, especially yourself
What you need to understand is that this is just the beginning of the process. Viewing your work on as many devices as possible should be considered an essential part of your workflow. Also keep in mind that this is only the first step in the process of creating graphics assets for an application or mobile web projects.
Using prototyping apps is a great way to discover pain points, but those same resources have to be used to be used by the developer. In many cases, the physical dimensions of assets, including icons, will be physically huge and not in svg format, but in png format. At first glance, this may seem too complicated, but remember the golden rule of image scaling: it is better to reduce than to increase.
It’s about working closely with your designer and using prototyping software as a way to show off your design intent. But in the end, the same resources should be ready for the final product and your developer will be able to understand what they need better than you can.