Mobile Design: Painless Pixel Perfection

If you’ve ever had to create art assets for both Android and iOS at the same time, you know how much effort it can actually be. We’ve learned some tricks over the last few months which have saved us weeks worth of effort. We’re pretty geeked about these discoveries, and wanted to share what we’ve learned.

Before we knew about these techniques, we would often spend countless hours tweaking each graphic, at each size, then saving each out separately, and finally naming them over and over… We tried using Photoshop Actions to minimize work as much as possible, but there was still a massive amount of repetition. We had accepted this as unavoidable grunt work of mobile design; the price of designing beautiful user interfaces. But there is a better way…

Four amazing tools have completely changed our workflow and cut out a massive amount of effort and we want to share them with you.

Slicy

When we first learned about Slicy, we knew it was going to change our lives forever. Simply put, Slicy lets you name your layer groups for rapid saving of graphics assets (e.g. you could name a layer group RecordButton@2x.png). Once the layers are named, you can drag your PSD into Slicy and it automatically pops out PNGs. If you put the @2x suffix on your filename, it will even scale down your assets automatically and save non-retina size.

"Named folders for saving"

Name your folders and create layer masks (raster or vector) in order to determine the size of your images. These named folders will save out both normal and retina versions.

But… Be Careful with Sizing

To make the most out of Slicy when saving iOS graphics, it’s vital to make sure you are creating all of your retina graphics to snap on even numbered pixel boundaries. Doing so will ensure that you create pixel perfect, crisp non-retina graphics when Slicy scales your retina graphics down by 50%. See the diagram below:

Demonstration of The Pixel Grid

Remember, use an even number pixel grid, always! Or you’ll blurrify your beautiful graphics!

Sometimes you may have to create custom non-retina graphics, if you want all of your icons to be perfect for the iPad mini or older iPads/iPhones (such as structural or sizing changes on a small icon). However, on the whole, using Slicy with a disciplined approach to graphics sizing will reduce your non-retina asset creation to an enormous extent.

Slicy with all the assets broken out

Slicy, saving ALL OF THE THINGS

Teehan+Lax Density Converter

With the automatic scaling for non-retina graphics, Slicy has a definite bias towards iOS asset saving. It does not have a similar feature for scaling and saving at various Android resolutions. However, scaling isn’t nearly as easy for Android assets. While iOS has a simple 200% scale for retina graphics, Android uses 150% for HDPI and 225% for XHDPI. This means graphics often need to be tweaked to ensure pixel perfection.

In order to help with those plentiful calculations, we’ve come to rely on the oh so handy Density Converter by Teehan+Lax. Not only do they give the clearest explanation of device densities and how that applies to graphics creation, they also give you a converter for calculating sizes. With the converter on this page, you can avoid having to do excessive manual calculations. Just punch in your numbers and it will tell you what sizes you need for your assets!

Mastermolds

The third technique is one we developed, which we lovingly refer to as mastermolds. A mastermold is a large PSD file with spaces for an HDPI Android mockup, an iOS retina mockup and an XHDPI Android mockup. Within each of these spaces, we create art assets as well as mockups, for each screen throughout an app. By naming the layer groups for android assets, we can then use Slicy in conjunction with the mastermolds to automatically export ALL of our graphics assets at once. We just name each layer group according to resolution, IE: hdpi_record_button.png or xhdpi_record_button.png.

An Example of the MasterMold template

A blank mastermold template

However, it’s important to note that when working with gigantic PSD files such as these, Photoshop can start to get pretty bogged down and slow. To counteract this, you can take layers that you are no longer working on and convert them into smart objects. Using smart objects instead of tons of shape layers with effects will greatly improve overall Photoshop performance.

An example of a MasterMold full of UI elements

A mastermold of the Coach’s Eye 3.0 Video Library. A side benefit to designing within a mastermold is that we have a view of what our app will look like across both iOS and Android. This helps us ensure that the app has a familiar look and feel across all devices - while still making platform specific design decisions where appropriate.

Automator

So now we have mastermold PSDs full of art assets for both iOS and Android, but once we use Slicy to save them out we end up with a folder that has a ton of graphics assets. On iOS, taking care of the graphics is fairly simple – just drag them where they go for the developers to get to them. But because we put prefixes in front of each Android asset, we also need to delete those prefixes and move the graphics into the appropriate folders for each resolution. To make this a less monotonous task, we create Automator scripts to automatically strip the files of their prefixes and move them to appropriate folders. For more details on how to setup the scripts, check out this screencast:

Can’t see the video? Watch here.

Overview

With these new techniques, we can design pixel perfect graphics for each platform faster than ever before. We can iterate on our designs more rapidly and, with our new found time savings, put more effort into refining our designs and exploring more options.

We’re still learning, however. Our hope was that by sharing what we’ve learned with the design community at large, we could also learn from other people in the space and pick up more tricks. If you have a suggestion on how we could improve our workflow even more, please let us know in the comments! You can also reach out to us on Twitter @TechSmithDesign