Export Artboards as Web Assets in Photoshop

Exporting individual artboards as separate web assets in Adobe Photoshop is a streamlined process that allows designers to generate multiple optimized images simultaneously. By utilizing Photoshop's dedicated export tools—specifically the "Export As" interface and the automated "Artboards to Files" script—you can output individual artboards into standard web formats such as PNG, JPG, or SVG with tailored resolutions, color profiles, and file-naming conventions in just a few clicks.

The "Export As" workflow provides the most control over image quality, format, and multi-scale asset generation (such as 1x, 2x, and 3x web resolutions).

  1. Select the Artboards: In the Layers panel, select the artboard or hold Shift or Ctrl/Cmd to select multiple artboards you want to export.
  2. Open Export As: Right-click on the selected artboards in the Layers panel and choose Export As..., or navigate to File > Export > Export As....
  3. Configure Asset Settings:
    • On the left panel, ensure all target artboards are checked.
    • On the right panel, choose your target Format (PNG, JPG, or SVG).
    • Adjust format-specific settings, such as image quality for JPGs or transparency for PNGs.
    • Under the Scale All section on the left, add additional scale factors (e.g., 2x, 3x) if you require high-DPI assets for responsive design.
  4. Set Color Settings: Ensure the Convert to sRGB and Embed Color Profile boxes are checked to maintain consistent color rendering across modern web browsers.
  5. Export: Click the Export button in the bottom right corner, select your destination folder, and click Select Folder. Photoshop will generate separate, optimized web files for each artboard.

Method 2: The "Artboards to Files" Workflow

If you require an automated batch export that names files sequentially based on artboard labels without configuring individual scale settings, use the native automated script.

  1. Navigate to File > Export > Artboards to Files....
  2. Click Browse to specify your destination directory and enter a File Name Prefix if desired.
  3. Check Artboard Content Only to avoid capturing elements that extend beyond artboard boundaries.
  4. Select your desired File Type (such as JPEG, PNG-8, or PNG-24).
  5. Ensure Include Overlapping Areas is unchecked unless explicitly needed.
  6. Click Run to batch process and export all artboards into the chosen directory as individual files.

Method 3: Quick Export as PNG

For the fastest single-step export without preview windows:

  1. In the Layers panel, select the specific artboards you want to save.
  2. Right-click the selection and choose Quick Export as PNG.
  3. Select your output folder and click Save.

(Note: Default Quick Export settings, such as format and destination behavior, can be customized in Photoshop > Preferences > Export on macOS or Edit > Preferences > Export on Windows).