Exporting from Photoshop

Congratulations. You’ve just completed a pixel perfect app mock up and you have the nod from everyone on the team, so all that’s left is saving the tens, hundreds or maybe even thousands of production assets required. It’s probably the least interesting part of designing software, usually entailing hours of grinding. Saving images to multiple scales — as required by iOS and other platforms — adds complication to the process. However, there are ways to streamline or automate exporting.

Copy Merged #

Cutting up your design with Copy Merged is fairly easy: Ensure the correct layers are shown or hidden, draw a marquee selection around your element, choose Edit → Copy Merged, File → New, hit return, then Paste. The result is a new document with your isolated item, trimmed to the absolute smallest size possible. From here, all that’s needed is to save your image using Save As or Save for Web & Devices.

Rinse and repeat for every image needed for your app or website. It’s a simple and quick technique, but requires a lot of repetitive work and if you ever need to export your images again, you’ll have to start from scratch.

In my experience, this is the most common and often the only method most designers use, which is a shame, because better techniques exist.

An action can be created that triggers the Copy Merged, New, Paste — a small time saver, but ultimately not much of an improvement to the workflow.

Export Layers to Files #

If you’re lucky, and your goal is to export lots of similar images (typically with identical dimensions), you may be able to use Photoshop’s Export Layers to Files script.

By choosing File → Scripts → Export Layers to Files each layer of your document will be saved as a separate file with a filename that matches the layer name. This means you’ll probably have to prepare your document by flattening everything down to bitmap layers for the elements you’d like to export — a time consuming process, but often quicker than using Copy Merged. It can also optionally trim the resulting file, if you’d like completely transparent areas to be removed.

I can’t say I’m a fan of the script’s Flash based UI or the nature of the way it works, but Export Layers to Files is handy if your desired result fits in with its limited range of use cases.

Slices #

Photoshop’s Slice tool lets you define rectangular areas to export as individual images, with some limitations: Only one set of slices can exist per document, and slices can not overlap (if they do, smaller rectangle slices will be formed). During the 90s the Slice tool was a good way to create table based web layouts, filled with images. These days it’s far more common to need finer control over how images are sliced, especially when creating efficient, dynamic designs, typically with images that make use of transparency. However, with a small twist on the original concept, the Slice tool can be put to great use.

Sprite sheets with Slices #

Sprite sheets are commonly used in CSS and OpenGL games, where texture atlasing can have significant performance benefits. A similar method can be employed for building UI elements in Photoshop, even if the end result is a set of images, rather than one large image.

By spreading out the elements you need to export as a flat sprite sheet, you negate the need for slices to overlap. If there’s too many elements to comfortably fit in one document, you can create multiple documents, negating the need for more than one set of slices per document.

There’s an added benefit to working like this — your main design documents no longer need to be built with the same level of precision. It’s ok to occasionally use a bitmap or forget to name a layer, as you’ll have a chance to fix things as you prepare your export sprite sheet. However, it does mean that your original mock up document may get out of sync with your latest changes to the export documents (if you make colour or layer effect changes or other adjustments, for example).

Since we’re only interested in user created slices, it may also be a good idea to click Hide Auto Slices (in the options bar when using Slice Select Tool) and turn off Show Slice Numbers under Guides, Grid & Slices in Preferences. That way you’ll remove unnecessary clutter from Photoshop’s slice UI.

After you’ve created a sprite sheet with slices all set up correctly, you’ll be able to export all the images at once, using Save For Web & Devices. And, assuming you’ve done things properly, you’ll be able to scale up by 200%, save all your Retina images, then batch rename them to add @2x to the filenames (or scale down, if you’ve built everything at Retina size to begin with).

Layer Based Slices #

If your UI element is one layer and you’d like the exported image to be the smallest possible size, you may want to consider using a Layer Based Slice. To create one for your currently selected layer, choose New Layer Based Slice from the Layers menu. Layer Based Slices move, grow and shrink with the layer they’re associated with. They also take into account layer effects: Strokes and shadows increase the size of the Layer Based Slice so the effects are included. Less control, but more automated.

My exporting workflow #

For years, I used Copy Merged as my primary exporting method, and Export Layers to Files where it made sense to do so. I think that was a poor choice. Sprite sheets have so many advantages, especially for medium and large projects, that the initial set up time is made up very quickly. This is even more true when exporting Retina and non-Retina images — each set can be exported with a few clicks, and is far less likely to have filename or size issues, due to its automated nature.

It also creates an environment where making changes to production assets is easy, allowing faster iteration and more experimentation. It lowers the barrier for improving your artwork during initial development, and for each revision of your app or website.

And that’s a very good thing.

Published 29 August 2011.