1. Technology

Use Photoshop CC and Generator to Create Web Graphics

A New Feature of Photoshop CC


Enable the Generator to get started

In the Photoshop Plug-Ins preferences, you should enable the Generator. Screen shot by J Kyrnin

Turn on image generation

In each PSD file you need to turn on the image generation. In the File > Generate menu. Screen shot by J Kyrnin

Photoshop creates a folder of generated images

The generated images are stored in a folder in the same directory as the PSD file. Screen shot by J Kyrnin

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:

  1. create a wireframe or paper mockup of the design
  2. build the site design in Photoshop
  3. 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
  • .gif
  • 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

Generator is based on Node.js and if you know JavaScript you can create even more features for Generator. Generator is open source and you can fork the code on GitHub. I could see adding some features like a custom upload location so you could create a dynamic image base like I described above, or possibly additional image formats like BMP or TIF for printing. Because this code is available your only limit is your imagination. 

©2014 About.com. All rights reserved.