Generate image assets from layers

Last updated on Oct 10, 2026

Use the Generator to automatically create files by appending format extensions such as .png or .jpg to layer names.

Appending file extensions to layer names triggers Photoshop's Generator to create image files automatically whenever you save. This eliminates repetitive export steps for web, app, and multi-device projects requiring multiple formats or sizes.

workflow works best when you need consistent, repeatable exports across multiple formats or resolutions—such as producing @1x, @2x, and @3x versions for responsive designs. For one-time exports or when you need format-specific controls, use File > Export > Export As instead.

The generator creates a dedicated folder for your assets and updates files automatically as you work. You can generate multiple formats from a single layer, specify quality settings, scale assets to different sizes, and organize outputs into subfolders—all through layer naming conventions.

  • Photoshop document with named layers or layer groups
  • Saved document to a known location (or assets will appear on Desktop)
  • Knowledge of required output formats for your project

Enable image asset generation

Select File > Automate > Generator Plugins > Image Assets.

In the Layers panel, locate the layer or group you want to export.

Rename the layer by appending a file extension: .jpg, .png, .gif, or .svg. For example, rename "logo" to "logo.png".

Save your document with Ctrl + S (Windows) or Command + S (macOS).

Photoshop creates the image file in a subfolder next to your saved document. If your document hasn't been saved yet, assets appear in a new folder on your Desktop. The generator remains active—any changes to generator-enabled layers trigger automatic updates to corresponding assets.

Note

Layer names cannot contain : (colon) or * (asterisk) as these characters prevent asset generation.

Generate multiple formats from one layer

A single layer can produce assets in different formats, sizes, and quality levels simultaneously. Separate each asset specification in the layer name with a comma or a plus sign.

Select the layer in the Layers panel.

Rename the layer using a comma-separated format—for example: button.png, button.jpg90, 200% button@2x.png.

Save the document.

Photoshop generates three separate files from the same layer content, eliminating the need to export the same graphic manually in different formats.

Control quality and scale assets for different screens

Select the layer in the Layers panel.

Add quality or size parameters to the filename. For example: "button.jpg90" sets JPEG quality to 90%, or "200% logo@2x.png" doubles the asset size.

For multiple resolutions, separate each specification with commas: "icon.png, 200% icon@2x.png, 300% icon@3x.png".

Save the document to generate all variations.

Quality suffixes control compression for JPG files (1-100) and bit depth for PNG files (8, 24, or 32). Size prefixes accept percentages for relative scaling or absolute pixel dimensions. You can mix units—for example, "10in x 5cm banner.jpg"—and omit one dimension to scale proportionally: "1080 x icon.png" sets the width to 1080 pixels while maintaining the aspect ratio.

Tip

Use the @2x and @3x naming conventions to automatically generate retina and high-DPI versions for responsive web projects and mobile apps.

Relative scaling examples:

200% logo.png doubles the asset size

50% thumbnail.jpg reduces the asset to half size

Absolute sizing examples:

300 x 200 hero.png creates a 300×200 pixel image

10in x 5cm banner.jpg mixes units (10 inches wide, 5 centimeters tall)

1080 x icon.png sets the width to 1080 pixels, height scales proportionally

Tip

When specifying pixel dimensions, write numbers directly without unit designations. Use "300 x 200" instead of "300px x 200px".

Organize assets into subfolders

By default, all generated assets save to a single folder next to your PSD file. Adding a subfolder name before the filename directs the generator to create and use that subfolder automatically. This keeps related assets organized without manual folder management.

Include the subfolder path in your layer name using forward slashes: subfolder/filename.png or icons/logo.svg. You can nest multiple levels: assets/icons/logo.png.

Export assets to specific folders

Rename the layer using subfolder paths in the filename. For example: mobile/button.png, desktop/button.png.

Save the document.

Photoshop creates the folder structure automatically and places each asset in its designated location. Combining subfolders with size prefixes and quality settings provides complete control over asset organization: mobile/200% button@2x.png, desktop/button.jpg90.

Set document-wide defaults

Create a special layer to establish baseline settings that apply to all generated assets. This eliminates repetitive parameter specifications in individual layer names.

Create an empty layer and name it starting with "default" followed by your preferred settings. Common configurations include "default 200%" to scale all assets to 200%, "default assets/" to save everything to an assets subfolder, or "default @2x" to add the @2x suffix to all filenames.

You can combine multiple defaults: "default 200% retina/ @2x" scales all assets to 200%, saves them in a retina subfolder, and adds the @2x suffix to filenames. Individual layer settings override document defaults—if your default specifies "default 200%" but a layer name includes "50% thumbnail.png", that layer generates at 50%.

Work with cloud documents

Cloud documents store generated assets locally rather than directly alongside the PSD file. Photoshop maintains this separation to distinguish between local and cloud-synced content.

Assets for cloud documents appear in these locations:

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

Each cloud document creates its own subfolder within this directory. Assets are generated automatically as you work, but remain on your local machine until you explicitly share or sync them in Creative Cloud.

Disable asset generation

Image asset generation remains active for a document once enabled, persisting across sessions. The feature automatically regenerates assets each time you save, which may slow performance for complex documents.

To turn off generation for the current document, deselect File > Automate > Generator Plugins > Image Assets. This stops automatic asset creation but preserves any existing assets and layer naming.

To turn off the generator globally across all documents, select Edit > Preferences > Plug-Ins, deselect Enable Generator, and select OK. This completely turns off generator functionality until you re-enable it in Preferences.