Generate image assets from layers

You can generate JPEG, PNG, GIF, or SVG 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.

How to create and export web graphics see How to export files in various formats from Photoshop.

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:

1. With the PSD file open, select File > Generate > Image Assets.
2. Append appropriate file format extensions (.jpg, .png, .gif, or .svg) 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.

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.

Generate assets for cloud documents

If you are working with a Cloud Document, then assets will be saved within the "Photoshop Cloud Associates" directory:

• Windows: C:\Users\yourname\Documents\Adobe\Photoshop Cloud Associates
• macOS: /Users/yourname/Documents/Adobe/Photoshop Cloud Associates

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:

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

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

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.

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.

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.

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%)

Absolute scaling examples

Good examples of absolute scaling

• 100x80 foo.png (simple absolute scaling)
• 80 x 100px foo.png (spaces between lengths)
• 4in x100 foo.png (mix of units and no units)
• 90mm x120cm foo.png (mix of different units)
• 100x? foo.png (wild card)
• ?x60in foo.png (wild card at beginning)

Bad examples of absolute scaling

• 100x100foo.png (no space before file name)
• 80x100 60% foo.png (mix of absolute and relative scaling)
• 50% 80x100 foo.png (mix of absolute and relative scaling)
• 20in cm x50cm foo.png (multiple units)
• 30nm x20 nano.png (invalid unit)

Formatting and separating multiple files

Good examples

• Layer 1.png (Space in file name is allowed -- results in a single file called "Layer 1.png")
• Layer 1.png,Layer 2.jpg (Comma as separator)
• Layer 1.png, Layer 2.jpg (Comma followed by space(s) as separator)
• Layer 1.png+Layer 2.jpg (Plus as separator)
• Layer 1.png + Layer 2.jpg (Plus followed by space(s) as separator)

Putting it all together

100% Delicious, 42% Layer 1.png24 + 100x100 Layer.jpg-90% , 250% Quux/Foo Bar Baz.gif results in three files (the "100% Delicious" string is ignored, because it's not a filename):

• Layer 1.png, at 42% scale, as a 24-bit png
• Layer.jpg, as an absolute size of 100x100 pixels, as a 90% quality jpg
• Foo Bar Baz.gif in subfolder Quux, at 250% scale, as a gif.

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:
   

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

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.

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

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%
  

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.

FAQ