Using Adobe’s New Generator to Quickly Create Image Assets
on January 10, 2014
As designers and developers, one of the most tedious tasks we have is taking a nicely designed comp from Photoshop, and translating it into design on-screen. While many of the elements can be sampled out with just color and dimensions, and translated straight to CSS, other elements in the design must be sliced out – meaning we have to export the actual image from the Photoshop doc so that we can reference it in the design. Icons, photos/imagery, logos and other pieces come to mind.
Luckily, the newest version of Photoshop CC makes this incredibly simple. No more selecting layers, cropping, saving and undoing to get your document back to its previous state. With the new Generator (and the Image Assets plugin), your assets are saved out as you design automatically. This is way cool.
Let’s look at an example. In this following comp, we’ve got a few assets that need to be exported out as images. The magnifying glass at the top, the little clock in the upper right, the image of the phone screenshot, and the knob icon near the bottom:
Sure, we could crop around each of these, and slice them out, but the new Image Generator makes it far easier! To get started with it, enable the generator in the <File> menu:
Once that’s done, a folder will be created in the same directory as your file, called <filename>-assets (as far as I can tell, you can’t change where this folder is created). This folder is where all the images that are sliced out will be placed.
The rest of the process is really straightforward. Using your layer names, you’ll specify which images you want exported, with various options. The layer naming process is a piece of cake:
- To export a layer (or group!) as an image, simply append the image extension on the end of the layer name. Right now, the generator supports .gif, .jpg and .png filetypes. So, if you have a layer called MyCoolCat, simply change it to MyCoolCat.png to have the generator automatically create a PNG based on that layer. Easy, right?
- If you want to change the size of the image created, simply add a scaling factor to the front of the layer name: “50% MyCoolCat.png” will export the MyCoolCat layer as a PNG, but at 50% of the normal size. These sizes can be in px (“100×100″), percentage (“50%”), and inches/centimeters (“100in x 20cm”).
- Image quality can be modified by using a suffix on the layer name: “MyCoolCat.jpg50%” will output a jpg of the layer, at 50% quality. “MyCoolCat.jpg5″ will do the same (only on a 1-10 scale).
- One of the big timesavers is the ability to name layers using multiple names, comma-delimited, to export multiple versions of the same image. When we develop for mobile, we have to export different versions of the same image to support multiple resolutions. With iOS, this means exporting an image at the normal size, and another twice the size with the suffix “@2x” before the extension. Easy with the generator: If you have a comp that’s designed at the higher resolution already, then naming the layer “MyCoolCat@2x.png, 50% MyCoolCat.png” will export two different images, scaled correctly, and ready for use in your iOS app.
How this looks in the layer palette:
And, finally, the files it outputs:
That’s it! This tool will save you hours of design/development time. As you update your photoshop doc, the generated assets are automatically updated, so no need to go through cycles of edit/crop every time you want to tweak an image. Just name the layers, design, and the rest is done for you.
This is a brilliant addition to the Photoshop product. It’s only available on Photoshop CC, however, so consider that motivation to upgrade if you haven’t already.
Last, and certainly not least, the Generator is an open-source project built on node.js, which means you can extend it as you see fit. I’m interested in extending the Image Asset plugin to include a dynamic path for saving assets (so I can save directly to my project folder), and possibly automatic exporting of the two sizes with the @2x suffix for certain files. If you want to dig into the source, have at it here.
For more information on the Generator, check out Adobe’s docs on it here.
Curious about the app you’re seeing in these images? It’s called Drawer, and it helps you keep track of places you want to try, and share lists of your favorite places with your friends. Grab it here.
Are you using the Generator already, or did this just save you hours of time? If you’re using it, what are your tricks for squeezing the most out of it? Leave it in the comments!