Using Photoshop CC to Automatically Generate Web Graphics

Let’s face it, creating web graphics takes time and is often tedious, especially if you have to slice images from detailed web page layouts. Sometimes it’s even necessary to copy and paste graphics from a Photoshop layout into a new Photoshop document just so you can isolate graphics and save for web. Recently I began experimenting with creating web graphics automatically from Photoshop layers using the new Adobe Generator feature, which was released in Photoshop CC version 14.1 (to check your version launch Photoshop and go to the menu and select Photoshop/About Photoshop and this will open a panel that includes the version number). When Generator is turned on it will monitor the file you’re working on and generate web graphics based on how you name layers. The cool thing is that as you continue to work in Photoshop and make changes Generator will automatically update assets.

To use Adobe Generator the first thing you need to do is turn it on. Here’s how you do it:

1. Open Photoshop preferences and select the Plug-Ins tab from the left menu and check the Enable Generator checkbox.

Enable Photoshop Generator to save web graphics automatically

1. Restart Photoshop so this change will take effect.
2. Open the file you want to create web graphics for and under the File menu drop down select Generate/Image Assets.

In Photoshop’s file menu select Generate Image Assets to enable it.

You will need to do this last step on a file per file basis. The reason for this is you may not want Photoshop to create web graphics for every file you work on. You’ll also need to do it each time you open and close a file. Photoshop will reset and turn off Generate/Image Assets each time you close the file.

Now that you have Generator turned on you need to name your layers so Photoshop knows the scale, file type, and quality setting to generate. You should name the layer something that helps you identity or understand the graphic’s purpose when you later retrieve it for development. But, in some cases, you may also want to name files that will be keyword friendly for search engines.

To provide an example of how to name layers and illustrate how assets are generated I’ll work from a Photoshop file called button.psd. The first thing to do is turn on image assets from the file menu (as I mentioned above). Next I create a new layer and design a simple button graphic and name the layer button.jpg. After this I check to make sure assets are being created by locating the Photoshop file I’m currently working on in the Finder and see a new folder named button-assets has been created by Photoshop. It is named the same as my Photoshop file (button.psd) but with “assets” appended to the end. When I check its contents I see it has generated a jpg graphic for me, in this case a button.jpg file. Note: if you are using a new Photoshop file that has not been saved a folder named example file-assets will appear on your desktop.

Photoshop Generator can create jpg, gif, and png files with various scale and quality settings you define. It can also create mulitple files from one layer. For example, if you need an additional retina size version of a graphic add a comma to the end of the layer name followed by 200% and what you want the retina graphic to be named. My layer is now named like this: button.jpg, 200% button@2x.jpg. (The “@2x” being a convention to distinguish retina graphics).

Screenshot of layer name syntax using Adobe Generator in Photoshop

This will generate two files, one for button.jpg and the other for button@2x.jpg. When I check my Finder again I now see two graphics have been created in the the button-assets folder.

To specify quality settings for jpg graphics simply define the setting as part of the layer name. For example, naming the layer button.jpg7 will create a quality setting of 70%. But you can also name it button.jpg70%. As a rule of thumb place the scale setting before the name and the quality setting after the graphic type (png, jpg), such as scale name.jpg quality. You can declare quality by using 1-10 or 1-100%. By default the quality setting for jpg is set to 8 (or 80%). One more parameter you can declare is the graphic size in pixel dimension so if you want the button to be 300×300 pixels name the layer 300×300 button.jpg.

To create png files you can declare quality settings of 8, 24, or 32, such as button.png24. By default it is set to 8.

For gif files there are no quality settings.

Any edits made to layer names or any graphics modified visually will update instantly by Generator. For example, if I change my button color, from say orange to blue, I can check the assets folder and see it has been updated.

One last thing to note is that sometimes you may have multiple layers in Photoshop you want to generate as one graphic. In the case of my button I might add “Contact Us” text to a new layer and want to generate a button graphic that includes this text along with the button graphic as one asset, instead of two separate ones. I could merge the layers, but if I saved it I would not be able to go back and edit the text or button. What we can do in this situation is group the two layers into a folder and name it using the same Generator syntax we do for layers and this will create a web graphic for everything included in that folder that is visible (turned on).

As you can see this is a powerful new feature in Photoshop that should help streamline your workflow when creating web graphics.