Adobe released a new version of Photoshop CC (version 14.1) in September 2013 that is really exciting for web designers. The workflow for a web designer often looks something like this:
- create a wireframe or paper mockup of the design
- build the site design in Photoshop
- laboriously convert the various layers into separate image elements to add into the HTML
While Photoshop CC can't help with the first two steps, there is a new feature that can definitely help with the third step. To use it you need the most recent version of Photoshop CC, available for download from the Creative Cloud.
Once you have Photoshop CC, you need to go into the Preferences > Plug-Ins…. There you should click on “Enable Generator” and the Generator will be set up and running.
Once you've turned on the Generator, you're ready to work with your files. The benefit of the Generator is how easy it is. All you have to do is change the layer name. You add an extension .jpg or .png or .gif to get the various file types. In my example, I changed the layer name to shield.png. This would give me a copy of that layer saved as a PNG file.
But there's more. You can also save the layer at different sizes and in different formats. As well as multiple copies of the image. For example:
- separate multiple image names with a comma
- .png defaults to a png32 with semi-transparent alpha, but you can also specify .png8, .png24, or .png32
- .jpg defaults to a JPG with quality level 9, but you can also specify .jpg(1-10) or .jpg(1-100%) to define a very specific quality level
- and numbers such as 1-x% or a specific px value x a number for scaling
So if you have a layer you want to generate at the default size in a PNG format, and anther copy in JPG scaled to 200x250 at level 4 quality you would change the layer name to: name.png, 200x250 name.jpg4
Then Generate Your Files
The last thing you need to do once you've got your layers named how you want them is to turn on the generator for your image. You have to turn on the Generator for every image that you work with in Photoshop, but Photoshop stores the Generator status in the PSD. So if you turn on the Generator for a specific image, it will be on forever until you turn it off.
To turn it on, go to the File menu and choose Generate > Image Assets. Once you do that, the assets are placed in a sub-directory of the folder where your PSD file lives.
The Images Update Automatically
Once you've generated your images, they are updated when the image changes. So if you decide to change your logo from green to blue, once you've changed the layer, the Generator will change your images, like magic!
In one example from Adobe, a company that makes a mobile application used Generator to allow them to modify the images in the game, while the game was in play. You can also use Generator to create your favicon (in PNG format) and your logo. All of these images would remain in the PSD where you could continue to manipulate them, but if you change the PSD your favicon and your logo would update automatically.
Build Your Own Generator Scripts