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
How to create and generate web graphics with Adobe Generator, see Extract Assets for the web.
To understand the image asset generator better, consider a simple PSD file (download from this link) with the following 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.

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.
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
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
Generating image assets from a PSD file is particularly useful for multidevice web design. Consider the following web design and its layer structure:



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.

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.
- 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.
- 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.
- 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.
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%)
You can specify document-wide default settings for the generated assets. Follow these steps:
- Create an empty layer in the document.
- 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:
Note:
Default scaling factors are overriden by scaling factors specified for individual layers.
You can disable image asset generation globally for all Photoshop documents by modifying your Preferences.
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.