Photoshop Generator Setup for Automated Web Graphics

Adobe Photoshop’s Generator engine streamlines production workflows by automatically extracting and exporting web-ready graphics in real time as you edit your design. By configuring Photoshop’s application preferences and applying specific naming conventions to layers and groups, you can generate assets in formats such as PNG, JPG, SVG, and GIF directly to your local drive without manual slicing or repetitive export dialogs.

1. Enable the Generator Engine in Preferences

Before using automated exports, you must enable the Node.js-based Generator background engine inside Photoshop's settings:

  1. Open Adobe Photoshop.
  2. Navigate to Preferences:
    • On Windows: Edit > Preferences > Plug-ins
    • On macOS: Photoshop > Settings (or Preferences) > Plug-ins
  3. Check the box labeled Enable Generator.
  4. Click OK and restart Photoshop to ensure the background process initializes properly.

2. Activate Image Generation for the Document

Once the feature is enabled globally, turn on automated generation for your specific working document:

  1. Save your PSD document locally. (Generator requires the document to be saved so it knows where to output files).
  2. Go to the top menu and select File > Generate > Image Assets.

A checkmark will appear next to Image Assets, indicating that Photoshop is actively monitoring layer names for export instructions.

3. Apply Layer Naming Syntax

Generator determines file type, compression, and dimensions based purely on how you name layers or layer groups. When you rename a layer with a supported file extension, Generator creates the asset immediately.

  • Format Extensions: Name a layer icon.png, hero.jpg, or vector.svg to create that file type.
  • Image Quality/Compression:
    • For JPEGs: Add a quality level from 1 to 10 or a percentage after the extension (e.g., banner.jpg8 or banner.jpg 80%).
    • For PNGs: Specify bit depth by adding 8, 24, or 32 (e.g., logo.png24).
  • Scale and Dimensions:
    • Relative scale: Prepend a percentage (e.g., 200% logo@2x.png exports the layer at twice its original size).
    • Absolute dimensions: Prepend pixel dimensions (e.g., 100x100 avatar.jpg).
  • Multiple Assets from One Layer: Separate multiple export parameters with commas (e.g., 100% icon.png, 200% icon@2x.png, icon.svg).

4. Locate the Exported Files

When Generator processes a named layer, it automatically creates a folder titled [document_name]-assets in the same directory where your source PSD file is saved. Any subsequent changes you make to the styled layers or their dimensions in Photoshop will instantly update the exported files inside this folder.