
Sprite sheets are commonly used in CSS and OpenGL games, where texture atlasing can have significant performance benefits. But, with a twist on the original concept, the Slice tool can be put to great use. These days, designers far more often need finer control over how images are sliced, especially when creating efficient, dynamic designs, typically with images that have transparency. During the ’90s, the Slice tool was a good way to create table-based Web layouts, filled with images. 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 cannot overlap (if they do, then smaller rectangle slices will be formed). I can’t say that I’m a fan of the script’s Flash-based UI or of the way it works, but “Export Layers to Files” is handy if your desired result fits its limited range of use cases. This means you’ll probably have to prepare the document by flattening all of the elements that you’d like to export down to bitmap layers - a time-consuming process, but often quicker than using “Copy Merged.” It could also trim the size of the resulting file, if you choose to remove completely transparent areas. If you’re lucky, and your goal is to export a lot of similar images (typically with identical dimensions), you might be able to use Photoshop’s “Export Layers to Files” script.īy choosing File → Scripts → Export Layers to Files, each layer of the document will be saved as a separate file, with a file name that matches the layer’s name. You could create an action that triggers the “Copy Merged,” “New,” “Paste” process - a small time-saver, but ultimately not much of an improvement to the workflow.

This seems to be the most common method and, for some designers, the only method, which is a shame, because better techniques exist. The technique is simple and quick, but repetitive and if you ever need to export the images again, you’ll have to start from scratch. Rinse and repeat for every image needed for the app or website.

Cutting up a design with the “Copy Merged” feature is fairly easy: ensure that the layers are shown or hidden as needed draw a Marquee selection around the element choose Edit → Copy Merged, and then File → New hit Return and then “Paste.” The result is a new document with your item isolated, trimmed to the absolute smallest size possible.įrom here, all you need to do is save the image using “Save As” or “Save for Web & Devices.”
