You can generate JPEG, PNG, or GIF image assets from the contents of a layer or layer group in a PSD file. Assets are automatically generated when you append a supported image format extension to a layer name or a layer group name. Optionally, you can also specify quality and size parameters for the generated image assets.

Generating image assets from a PSD file is particularly useful for multidevice web design.

Video: Generate web assets in Photoshop CC

Video: Generate web assets in Photoshop CC
This video walks you through the various ways you can use the asset generator in Photoshop CC to output images in different sizes and resolutions for use in other projects.
Chris Converse

How to create and generate web graphics with Adobe Generator, see Extract Assets for the web.

Generate image assets from layers or layer groups

To understand the image asset generator better, consider a simple PSD file (download from this link) with the following layer hierarchy:

Photoshop generate image assets
Example PSD file and its layer hierarchy

The layer hierarchy for this file has two layer groups—Rounded_rectangles and Ellipses. Each of these layer groups contains five layers.

Follow these steps to generate image assets from this PSD file:

  1. With the PSD file open, select File > Generate > Image Assets.
  2. Append appropriate file format extensions (.jpg, .png, or .gif) to the names of the layers or layer groups from which you want to generate image assets. For example, rename the layer groups, Rounded_rectangles and Ellipses, as Rounded_rectangles.jpg and Ellipses.png; and the layer, Ellipse_4 as Ellipse_4.gif.

Note:

The special characters : and * are not supported in layer names.

Photoshop generates the image assets and saves them in a subfolder alongside the source PSD file. If the source PSD file is not saved yet, Photoshop saves the generated assets in a
new folder on your Desktop.

Photoshop Image asset names
Image asset names are generated from layer names/layer group names

Note:

Image asset generation is enabled for the current document. Once enabled, the feature remains available whenever the document is opened next. In order to disable image asset generation for the current document, deselect File > Generate > Image Assets.

Generate multiple assets from a layer or layer group

To generate multiple assets from a layer/layer group, separate the asset names with commas. For example, the following layer name generates three assets:

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

Save assets to a subfolder

You can choose to save image assets generated from particular layers/layer groups in a subfolder directly under the document's asset folder. Include the subfolder name in the layer/layer group name; for example:

[subfolder]/Ellipse_4.jpg 

A web design use case

Generating image assets from a PSD file is particularly useful for multidevice web design. Consider the following web design and its layer structure:

A web design and its layer hierarchy
A web design and its layer hierarchy

Let's extract the icon on top and the top row of the Global Hotspots image grid as image assets:

  • Append image format extensions to the appropriate layer names.
Photoshop Rename the appropriate layers/layer groups
Photoshop Rename the appropriate layers/layer groups

Rename the appropriate layers/layer groups

Note:

A single image asset is generated from the contents of a layer/layer group. For example, the AdventureCo Logo layer group in the screenshot above contains a shape layer and a live text layer. These layers are flattened when an image asset is generated from the layer group.

Photoshop generates the assets and saves them in the same location as the source PSD file.

Photoshop Generated image assets
Generated image assets

Specify quality and size parameters

JPEG assets are generated at 90% quality by default. PNG assets are generated as 32-bit images by default. GIF assets are generated with basic alpha transparency.

While renaming layers or layer groups in preparation for asset generation, you can customize quality and size.

Parameters for JPEG assets

  • Add the desired output quality as a suffix to the asset name: .jpg(1-10) or .jpg(1-100%). For example:
    • Ellipse_4.jpg5
    • Ellipse_4.jpg50%
  • Add the desired output image size (relative or in supported formats: px, in, cm, and mm) as a prefix to the asset name. Photoshop scales the image accordingly. For example:
    • 200% Ellipse_4.jpg
    • 300 x 200 Rounded_rectangle_3.jpg
    • 10in x 200mm Rounded_rectangle_3.jpg

Note: Remember to add a space character between the prefix and the asset name. If you're specifying the size in pixels, you can omit the unit. For example, 300 x 200.

Note:

As illustrated, you can mix different units and pixels while specifying the desired output image size. For example, 4in x 100 Rounded_rectangle_3.jpg is a valid layer name for asset generation.

Parameters for PNG assets

  • Add the desired output quality as a suffix to the asset name: 8, 24, or 32. For example:
    • Ellipse_4.png24
  • Add the desired output image size (relative or in supported formats: px, in, cm, and mm) as a prefix to the asset name. Photoshop scales the image accordingly. For example:
    • 42% Ellipse_4.png
    • 300mm x 20cm Rounded_rectangle_3.png
    • 10in x 50cm Rounded_rectangle_3.png

Note: Remember to add a space character between the prefix and the asset name. If you're specifying the size in pixels, you can omit the unit. For example, 300 x 200.

Note:

As illustrated, you can mix different units and pixels while specifying the desired output image size. For example, 4in x 100 Rounded_rectangle_3.png is a valid layer name for asset generation.

Parameters for GIF assets

  • Add the desired output image size (relative or in supported formats: px, in, cm, and mm) as a prefix to the asset name. For example:
    • 42% Ellipse_4.gif
    • 300mm x 20cm Rounded_rectangle_3.gif
    • 20in x 50cm Rounded_rectangle_3.gif

Note: Remember to add a space character between the prefix and the asset name. If you're specifying the size in pixels, you can omit the unit. For example, 300 x 200.

Note:

As illustrated, you can mix different units and pixels while specifying the desired output image size. For example, 4in x 100 Rounded_rectangle_3.gif is a valid layer name for asset generation.

Quality parameters are not available for GIF assets.

Construct complex layer names

You can specify multiple asset names with parameters while naming a layer for asset generation. For example:

120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif

Photoshop generates the following assets from this layer:

  • Delicious.jpg (an 8-quality JPG image scaled 120%)
  • Delicious.png (a 24-bit PNG image scaled 42%)
  • Delicious_2.jpg (a 90%-quality JPG image that has an absolute size of 100x100 px)
  • Delicious.gif (a GIF image scaled 250%)

Specify default settings for assets

You can specify document-wide default settings for the generated assets. Follow these steps:

  1. Create an empty layer in the document.
  2. Begin the name of the layer with the keyword default. Now, enter the settings that you want to apply to all image assets generated from the document. For example:

default hi-res/

Generates all image assets in a subfolder named hi-res. For example, [asset_folder]/hi-res/Delicious.jpg.

default hi-res/@2x

Generates all image assets in a subfolder named hi-res. Additionally, suffixes the asset names with @2x. For example, [asset_folder]/hi-res/Delicious@2x.jpg.

default 50% lo-res/

Saves image assets scaled down by 50% in the subfolder lo-res under the document's asset folder 

default hi-res/@2x + 50% lo-res/

Generates two image assets from a layer:

  • In the hi-res subfolder, an image asset whose name is suffixed with @2x
  • In the lo-res subfolder, an image asset scaled down by 50%

Note:

Default scaling factors are overriden by scaling factors specified for individual layers.

Disable image asset generation for all documents

You can disable image asset generation globally for all Photoshop documents by modifying your Preferences.

  1. Choose Edit > Preferences > Plug-Ins.
  2. Deselect Enable Generator.
  3. Click OK.

Note:

The File > Generate menu command is unavailable when you disable image asset generation from Preferences. The feature can be enabled again only in the Preferences dialog box.

FAQ

Do I need to specify unique asset names?

Asset names must be unique at a document level.

What is the default quality level at which image assets are generated?

JPG assets are generated at 90% quality by default. PNG assets are generated as 32-bit images by default. GIF assets are generated with basic alpha transparency.

Does Photoshop generate image assets from layers with transparency and other effects?

Yes. Transparency and other effects applied to a layer are reflected in the assets generated from that layer. However, such effects may be flattened in the generated assets.

How are image assets generated from layers that bleed off the canvas?

Assets are clipped to the document boundaries. If an image does not fall within the document boundaries, Generator does not create the associated image assets.

Is the comma the only permitted separator between image asset names?

In addition to the comma (,), you can use the plus (+) symbol as a separator between image asset names. For example:

42% Rounded_rectangle_1.png24 + 100x100 Rounded_rectangle_1.jpg90%

is the same as:

42% Rounded_rectangle_1.png24, 100x100 Rounded_rectangle_1.jpg90%

Video: Create an Edge Reflow project from Photoshop Generator

Video: Create an Edge Reflow project from Photoshop Generator
This video shows you how to create a web layout that responds to screen sizes ranging from 320 pixels to over 1,000 pixels across.
Chris Converse

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy