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.

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:

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:

With the PSD file open, select File > Generate > Image Assets.

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.

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

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 the comma symbol (,). For example, the following layer name generates three assets:

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

Saving 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:

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

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.

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.