Photoshop Layer Naming for Automatic PNG Export

Adobe Photoshop features a real-time asset generation engine called Generator that allows designers to export production-ready assets automatically. By simply renaming layers or layer groups with specific file extensions and parameters—such as .png, scaling factors, and quality settings—Photoshop detects these syntax cues and immediately renders the corresponding files into an asset folder next to the working document. This article explains how to enable this feature, the exact naming conventions required for PNG assets, and how to configure advanced export parameters directly within your layer panel.

Enabling Generator in Photoshop

Before Photoshop can read layer names as export commands, the automated engine must be activated:

  1. Open your document in Adobe Photoshop.
  2. Ensure the document is saved to your computer so Photoshop knows where to save the generated files.
  3. Navigate to File > Generate > Image Assets and check the option.

Once enabled, Photoshop monitors the layer hierarchy for valid naming patterns.

Basic PNG Layer Naming Syntax

To trigger an automatic PNG export, append a standard file extension to the layer or group name:

  • Standard PNG (PNG-32 by default): Rename a layer to icon.png.
  • PNG-8 (Indexed color, smaller file size): Rename a layer to icon.png8.
  • PNG-24 (Truecolor without an alpha channel): Rename a layer to icon.png24.
  • PNG-32 (Truecolor with full alpha transparency): Rename a layer to icon.png32.

Whenever you modify the contents of that layer and commit the change, Photoshop automatically updates the exported file in a generated folder named [filename]-assets.

Scaling and Resolution Parameters

Photoshop allows you to export assets at multiple resolutions from a single design by adding scale prefixes to the layer name:

  • Relative Scaling: Add a percentage before the file name.
    • 200% button.png exports the layer at twice its canvas size.
    • 50% button.png exports the layer at half its canvas size.
  • Absolute Dimensions: Add pixel or measurement values before the name.
    • 100x100 avatar.png resizes the layer content to fit exactly 100 by 100 pixels.
    • 10in x 10in graphic.png uses standard print dimensions.

Generating Multiple PNGs from a Single Layer

You can generate multiple assets simultaneously—such as standard and Retina display resolutions—by separating export commands with a comma:

icon.png, 200% icon@2x.png, 300% icon@3x.png

Photoshop parses each comma-separated argument independently and outputs three separate PNG files: one at base size, one at 2x scale, and one at 3x scale.

Subfolder Organization

To organize exported assets automatically, prepend a relative folder path directly to the layer name:

icons/nav/home.png

Photoshop will generate an icons folder containing a nav subfolder inside the primary assets directory and place home.png within it.