Extract Assets is a new feature in Photoshop that provides an interface on top of Adobe Generator to help automate the creation of assets for web and screen design from Photoshop files. The Extract Assets command allows you to define which layer(s) you want to create assets for, their size, file format and saved location on disk. Extract Assets automates the renaming of layers using the Generator syntax. To use Extract Assets, open a PSD file and select the layers you want to create assets for.
Then, choose File > Extract Assets (or use the keyboard shortcut Cmd + Option + Shift + W (Mac) | Ctrl + Alt + Shift + W (Win). The default file format is PNG but additional formats can be selected using the drop down menu to the right of the assets (PNG-8, PNG-32, PNG-24, JPG, GIF, and SVG are all supported). Once selected, additional file format specific settings can be chosen (for example, the compression level for JPEG files).
To set the resolutions for the assets that are created either click the Extract Assets resolution options across the top right of the dialog or, for additional options click the gear icon to the right of the options (or click the Settings… button in the lower left).
Typically for screen design you will want to create assets in 1x and also a 2x version, but you can choose from any of the Asset Resolutions listed in the Settings dialog. Once an Asset Resolution is selected, add a Suffix for each resolution and folder name (to save the assets within their own subfolder).
In addition, you can turn on or off the automatic generation of assets when your Photoshop document is changed. With automatic generation enabled, assets will be saved next to your Photoshop document in a folder named the same as your Photoshop document with -assets added. The assets in this folder will be continuously regenerated when any of the layers you want assets for are updated in that document.
If you forget to select the layers (or want to make a change to the layers that you have selected), you can do so without having to back out of the Extract Assets dialog. To add another layer, select one or more layers in the Layers panel and then click Add to add the selected layers. To remove them, select them in the Extract Assets dialog and click the trashcan icon.
Once you are ready to extract assets, click on the ‘Extract’ button and choose a location for your save assets. Once the assets are extracted, the operating system will show you the folder and all of the assets that have been created. If you prefer not to create the assets at that time, you can choose ‘Done’ to rename the layers using the Generator syntax). Click here for more information on the Generator syntax.
Note: assets and previews will not be generated if there is a comma in the layer name. In addition, each asset/layer must have a unique name to be created.