Export artboards, layers, and more

Using Photoshop, you can export artboards, layers, layer groups, or Photoshop documents as PNG, JPEG, GIF, or SVG image assets.

By default, Quick Export generates assets as PNG with transparency and prompts you every time to select an export location. You can change these settings by selecting either Preferences > Export or File > Export > Export Preferences and then specifying the following:

• Your preferred format for Quick Export: PNG, JPG, PNG-8, GIF, or SVG
• Format-specific parameters. For example, for PNG, you can specify if you want to export assets with Transparency enabled (32-bit) or export smaller-sized images (8-bit).
  
• Location for images exported using Quick Export. To do so, select one of the following:

Ask Where To Export Each Time: Prompts you to select a location every time you export assets
Export Files To An Assets Folder Next To The Current Document: Places the image asset in a subfolder named Assets within the folder containing the source Photoshop document.

• Whether you want to include metadata—copyright and contact info—in the exported assets
• Whether you want to convert the assets to the sRGB color space
  

Using the Export As dialog, you can fine-tune settings every time you export layers, layer groups, artboards, or Photoshop documents as images.

• Select File > Export > Export As to export the current Photoshop document. If your document contains artboards, all artboards in it are exported through this dialog.
• To bring up this dialog for layers, layer groups, or artboards, select them in the Layers panel. Right-click your selection and select Export As from the context menu.
  
  Each selected layer, layer group, or artboard is exported as a separate image asset.

You can specify the following options in the Export As dialog:

Resample Choose a resampling method. Resampling refers to changing the amount of image data as you change either the pixel dimensions or the resolution of an image, typically while resizing an image.

Bilinear: Adds pixels by averaging the color values of the surrounding pixels. This method produces medium-quality results.

Bicubic: Slower but more precise method based on an examination of the values of surrounding pixels. Using complex calculations, Bicubic produces smoother tonal gradations than the Bilinear or Nearest Neighbor resampling methods.

Bicubic Smoother: Good for enlarging images based on Bicubic interpolation, but designed to produce smoother results.

Bicubic Sharper: Good for reducing the size of an image based on Bicubic interpolation while enhancing sharpening. This method maintains the detail in a resampled image. If Bicubic Sharper oversharpens some areas of an image, try using Bicubic.

Bicubic Automatic: Automatically chooses the Bicubic sampling method appropriate for the image.

Nearest Neighbor: Fast but less precise method that replicates the pixels in an image. This method is for use with illustrations containing edges that are not anti-aliased. It preserves hard edges and produce a smaller file. However, this method can produce jagged effects, which become apparent when you scale an image or perform multiple manipulations on a selection.

Preserve Details: While resizing the image, this method places primary importance on the preservation of image details and sharpness.

You can export the selected layers, artboards, or documents as assets in multiple sizes using the Export As dialog. Follow these steps:

1. In the left pane, select a relative asset size—for example, 1.25x.
2. Choose a suffix for the asset exported at the relative asset size. For example, @1,25x. Suffixes help you easily manage the exported assets.
3. If necessary, click the + icon to specify more sizes and suffixes for the exported assets.
   

See Export artboards.

• Text may not render as expected. For best fidelity, convert the text layer to a shape before exporting it to SVG.
• Layer masks and clipping masks aren’t rendered as expected. Consider using vector masks instead for SVG export.
• The background layer exports as transparent to SVG. Duplicate the background layer in the Layers panel to make it visible in the exported SVG image.