A similar method can be employed for building UI elements in Photoshop,Įven if the end result is a set of images, rather than one large image.īy spreading out the elements you need to export as a flat sprite sheet, you negate the need for slices to overlap. Texture atlasing can have significant performance benefits. Sprite sheets are commonly used in CSS and OpenGL games, where
However, with a small twist on the original concept, the Slice tool can be put to great use. 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. 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 can not overlap (if they do, smaller rectangle slices will be formed). 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.
It can also optionally trim the resulting file, if you’d like completely transparent areas to be removed. 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. 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.īy 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. In my experience, this is the most common and often the only method most designers use, which is a shame, because better techniques exist.Īn 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. 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. Rinse and repeat for every image needed for your app or website. The result is a new document with your isolated item, trimmed to the absolute smallest size possible.įrom here, all that’s needed is to save your image using Save As or Save for Web & Devices. Copy Merged #Ĭutting 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. However, there are ways to streamline or automate exporting. Saving images to multiple scales - as required by iOS and other platforms - adds complication to the process. It’s probably the least interesting part of designing software, usually entailing hours of grinding. 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.
0 kommentar(er)
