As of the 2015 release of Photoshop CC, extract assets functionality is no longer available in the form described in this article. More intuitive functionality to export artboards, layers, layer groups, and documents as image assets has been introduced in Photoshop.

For details of these newer export options, see Export artboards, layers, and more.

Extract Assets is a feature in Photoshop CC (2014) and earlier that provides an interface on top of Adobe Generator to extract assets quickly for web and screen design from Photoshop files. You can select layers or layer groups in Photoshop and use a graphical user interface to extract them as JPG, PNG, SVG, or GIF image assets.

With Extract Assets you can:

  • Extract a layer or a layer group from a PSD into one or more image assets
  • Create image assets that are PNG, JPG, GIF, or SVG
  • Set up 1x, 2x, or more versions of all image assets
  • Preview each image asset
  • Easily extract assets into your preferred folder
  • Ensure that the extracted assets are updated whenever the PSD changes

Extract layers or layer groups

When multiple layers or layer groups are selected for extraction, you are presented with options to generate a separate asset from each of the selected items.

  1. Select one or more layers or layer groups.
  2. Do one of the following:
  • Right-click the selected items and then select Extract Assets from the context menu.
  • Press the Cmd+Opt+Shift+W (Mac) or Ctrl+Alt+Shift+W (Windows) keyboard shortcut.
  • Select File > Extract Assets.

Note:

Extract Assets honors layer names that conform with the Photoshop Generator syntax. For example, if you try to extract an asset from a layer named layer.gif, the Extract Assets dialog displays GIF as the default format for the image asset.  

  1. In the Extract Assets dialog, specify the following settings for each asset that you want to generate:

    Asset format:
    Select PNG-8, PNG-24, PNG-32, GIF, JPG, or SVG.
    Quality scaling:
    For JPEG assets, you can specify a value from 0–100% to scale the quality of the asset. Adjust the slider in the appropriate direction.
  1. To extract more than one version of the asset, click the + icon next to the asset in the Extract Assets dialog. You can specify different format, quality, and scaling parameters for each asset.
  2. Click Extract.
  3. Photoshop notifies you that it requires a change in layer name to continue with the asset extraction. This is because Photoshop uses the underlying Generator framework to create assets through the Generator syntax. Click OK to continue with extracting assets.
  4. Navigate to the folder where you want to save the generated assets.
  5. Click Extract. Photoshop creates the image assets and opens their containing folder in the Finder (Mac) or Windows Explorer. In the process of creating the assets, the relevant layers are automatically renamed in accordance with the Photoshop Generator syntax.

Note:

Layers/layer groups that you extract as image assets are displayed in the Extract Assets dialog the next time you invoke image asset extraction functionality.  

Specify asset resolutions

You can specify extraction settings and create assets for different purposes using a number of pre-populated setting combinations. For example, you can generate assets for Retina displays. Any settings that you specify are applied document-wide.

  1. Specify one or more resolutions you want in the Extract Assets section on the right.
  2. If you want a resolution that is not listed, or to change the destination subfolder for assets to be extracted at different resolutions, click Settings.
  3. You can either use the default suffixes for each resolution or add your own.
  4. You can also choose to use the default subfolders for each resolution or specify a different subfolder name that you prefer.
  5. Clicking Done in the Extract Assets dialog saves these settings to the document. Whenever you next create assets, the same settings are used. All future assets are created for the resolutions you have chosen when the document is opened in any instance of Photoshop CC.

Automatically generate assets

If necessary, you can select the Automatically Generate Assets While Updating Document option. This option is synchronized with the Generate > Image Assets option for Photoshop Generator. When you enable the Extract Assets option, the Generator option is also automatically enabled.

Share with developers

  1. Save your PSD file to the Creative Cloud folder you synchronized with Creative Cloud.
  2. Open Extract Assets (File > Extract Assets) and add the assets you want. Click Extract and choose the default folder to save to.
  3. When you open the PSD in Creative Cloud, you will now be able to view your Photoshop file along with a list of assets you have extracted.
  4. You can now share your PSD and the assets you have created with developers you want to collaborate with through Creative Cloud.

Common errors

Layer is empty in the Extract Assets dialog

Layers that are empty or are not capable of rendering images cannot be rendered in Extract Assets dialog. These layers can be Clipping Masks, Adjustment Layers, or just layers that have no pixels in them.

Asset names are in conflict

If you have layers with the same name but split across different groups, they are likely to overwrite each other because assets are usually rendered into one single directory. To prevent this, Photoshop automatically rename a layer when we detect a conflict.

If you override the renaming, you receive this error to prevent you from overwriting an existing asset with the name you have chosen.

If your asset names contain invalid characters, you also receive this error. Rename the file without the invalid characters to resolve the issue.

Image is outside of the document bounds

Extract was unable to render the image because it bleeds off the canvas. Move the image so that it fits within the canvas.

An unknown error has occured

This error occurs if Adobe Generator stops responding while the Extract Assets dialog box is open. To fix it, click Done to close the Extract Assets dialog, save your file, and then restart Photoshop.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy