Using Photoshop, you can export artboards, layers, layer groups, or Photoshop documents as PNG, JPEG, GIF, or SVG image assets.
Export a Photoshop document or all artboards in it
Select File > Export > Quick Export As [image format]. If prompted, choose a destination folder. Photoshop exports the current document as an image asset in the format specified in your Quick Export settings. If your document contains artboards, all artboards in it are exported individually when you select this option.
Export selected layers, layer groups, or artboards
In the Layers panel, select the layers, layer groups, or artboards you want to export as image assets. Right-click your selection and select Quick Export As [image format] from the context menu. If prompted, choose a destination folder.
One image asset is generated per layer, layer group, or artboard selected.
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.
For PNG, specify whether you want to export assets with Transparency enabled (32-bit) or export smaller-sized images (8-bit). For JPEG, specify the desired image quality (0–100%). GIF images are transparent by default.
While exporting PNG assets, remember the following:
- Selecting Transparency generates 32-bit PNG assets
- Selecting Smaller File generates 8-bit PNG assets
- Leaving the above options deselected generates 24-bit PNG assets
Specify the width and height of the image asset. Width and height are locked together by default. Changing the width automatically changes the height proportionately. If you want to specify the canvas bounds of the exported asset, see Canvas Size.
Choose how big the exported image should be. This option is useful for exporting larger- or smaller-resolution assets. Changing the scale impacts the image size.
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.
This option is useful in several scenarios, such as the following:
- You're exporting icons that have various sizes, but that need to be centered within 50x50 px boxes.
- You're exporting banner images that are smaller or larger than the required dimensions.
If the image is larger than the canvas size, it is clipped to the width and height values set for the canvas.
You can click Reset to revert the values to those set in Image Size.
Specify whether you want to embed metadata—copyright and contact information—in the exported assets.
Specify the following:
- Whether you want to convert the exported asset to the sRGB color space. This option is selected by default.
- Whether you want to embed the color profile in the exported asset.
You can export the selected layers, artboards, or documents as assets in multiple sizes using the Export As dialog. Follow these steps:
- In the left pane, select a relative asset size—for example, 1.25x.
- Choose a suffix for the asset exported at the relative asset size. For example, @1,25x. Suffixes help you easily manage the exported assets.
- If necessary, click the + icon to specify more sizes and suffixes for the exported assets.
The scaling options you choose apply to all of your selected layers or artboards.
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.