How to Use Photoshop's Generator Plugin to
Create Image Assets For A Web page

This "How-To" will walk you through the procedure of using the Generator plugin in Photoshop to create separate image files from the layers in one Photoshop file. The Generator plugin is already installed in Photoshop, but you need to activate it as will be shown.

Use the file provided for you in the instructions below, or create, a Photoshop file of a web-page layout – it ought to include a few photos, each on its own layer.

Here are the steps to take to use the Generator plugin in Photoshop:

  1. Start with a Photoshop file of a web page layout that has separate images on discrete layers in it.
    1. You can use your own or download this zip file
    2. Right click > Extract All (Windows) or double-click on it (Macs).
    3. This is what the demo file looks like (this is 25% size):



  2. Enable the plugin: File > Generate > enable Image Assets
    1. When it is activated, there will be a check-mark ✓ next to its name.
  3. Select the Move tool (V)
  4. Click on one of the photo images to select the layer that has the photo in it.
    1. The layer will be selected in the Layers panel.
    2. Find that layer in the Layers panel.
    3. If the layer is not visible: Ctrl/Option (Mac) - click the photo which will bring the selected layer into view.
  5. Modify the name of the layer:
    1. Substitute any spaces in the layer name with hyphens ( - ).
    2. There must not be any spaces in the layer name.
    3. Add ".jpg" or ".png" at the end of layer name and the image in the layer will be made into an image file of that type.
    4. Generally, images that are photographs will look better, and have a smaller file size, when they are .jpg files.
    5. Images that consist of a few solid colors and/or text, with no gradients, are best as .png files.
  6. As soon as you add an image file extension to the layer name, a folder will be created.
    1. The folder will be created wherever the file you're generating the assets from is located, regardless of whether it is a .psd file or some other image file type such as tiff.
    2. The folder will be named using the root name of the source file with "-assets" added at the end.
      1. For example: future-brite.psd
      2. Results in a folder named future-brite-assets

More...

  1. If you make any changes to the layer that was generated, then the generated file will be replaced with the changed image automatically.
  2. If you remove the file extension from a layer name, any image generated from that layer will be deleted!
  3. Grouped layers can be combined into one image file by changing the name of the group/folder to include an image file extension at the end.
  4. You can modify the image size that gets generated by the layer. Here is an example of how to do it:
    1. To reduce a layer's image size by 50%, enter 50% and a space before the layer name. For example:
      1. Change:
        jacket.jpg
      2. To (note that there is a space between the "%" symbol and the letter "j"):
        50% jacket.jpg
    2. Note that it is generally not advisable to increase the dimensions of the image.
  5. Adjustment and style/effects layers:
    1. If you have an adjustment layer that is applied only to the layer beneath it, that will be applied the generated image.
    2. Effects & styles applied to a layer will also be shown.
  6. Generating two files with different formats from the same layer.
    1. If you name a layer with two filenames and an extension, for example:
      jacket.jpg, jacket.png
    2. It will result in two files with that name.

Further info: