You can generate JPEG, PNG, GIF, or SVG image assets from the contents of a layer or layer group in a PSD file. Assets are automatically generated when you append a supported image format extension to a layer name or a layer group name. Optionally, you can also specify quality and size parameters for the generated image assets.
Generating image assets from a PSD file is particularly useful for multidevice web design.
How to create and export web graphics see How to export files in various formats from Photoshop.
To understand the image asset generator better, consider a simple PSD file (download from this link) with the following layer hierarchy:
The layer hierarchy for this file has two layer groups—Rounded_rectangles and Ellipses. Each of these layer groups contains five layers.
Follow these steps to generate image assets from this PSD file:
The special characters : and * are not supported in layer names.
Photoshop generates the image assets and saves them in a subfolder alongside the source PSD file. If the source PSD file is not saved yet, Photoshop saves the generated assets in a new folder on your Desktop.
Image asset generation is enabled for the current document. Once enabled, the feature remains available whenever the document is opened next. In order to disable image asset generation for the current document, deselect File > Generate > Image Assets.
If you are working with a Cloud Document, then assets will be saved within the "Photoshop Cloud Associates" directory:
To generate multiple assets from a layer/layer group, separate the asset names with commas. For example, the following layer name generates three assets:
Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png
You can choose to save image assets generated from particular layers/layer groups in a subfolder directly under the document's asset folder. Include the subfolder name in the layer/layer group name; for example:
[subfolder]/Ellipse_4.jpg
Generating image assets from a PSD file is particularly useful for multidevice web design. Consider the following web design and its layer structure:
Let's extract the icon on top and the top row of the Global Hotspots image grid as image assets:
Rename the appropriate layers/layer groups
A single image asset is generated from the contents of a layer/layer group. For example, the AdventureCo Logo layer group in the screenshot above contains a shape layer and a live text layer. These layers are flattened when an image asset is generated from the layer group.
Photoshop generates the assets and saves them in the same location as the source PSD file.
JPEG assets are generated at 90% quality by default. PNG assets are generated as 32-bit images by default. GIF assets are generated with basic alpha transparency.
While renaming layers or layer groups in preparation for asset generation, you can customize quality and size.
Note: Remember to add a space character between the prefix and the asset name. If you're specifying the size in pixels, you can omit the unit. For example, 300 x 200.
As illustrated, you can mix different units and pixels while specifying the desired output image size. For example, 4in x 100 Rounded_rectangle_3.jpg is a valid layer name for asset generation.
Note: Remember to add a space character between the prefix and the asset name. If you're specifying the size in pixels, you can omit the unit. For example, 300 x 200.
As illustrated, you can mix different units and pixels while specifying the desired output image size. For example, 4in x 100 Rounded_rectangle_3.png is a valid layer name for asset generation.
Note: Remember to add a space character between the prefix and the asset name. If you're specifying the size in pixels, you can omit the unit. For example, 300 x 200.
As illustrated, you can mix different units and pixels while specifying the desired output image size. For example, 4in x 100 Rounded_rectangle_3.gif is a valid layer name for asset generation.
Quality parameters are not available for GIF assets.
You can specify multiple asset names with parameters while naming a layer for asset generation. For example:
120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif
Photoshop generates the following assets from this layer:
100% Delicious, 42% Layer 1.png24 + 100x100 Layer.jpg-90% , 250% Quux/Foo Bar Baz.gif results in three files (the "100% Delicious" string is ignored, because it's not a filename):
You can specify document-wide default settings for the generated assets. Follow these steps:
default hi-res/
Generates all image assets in a subfolder named hi-res. For example, [asset_folder]/hi-res/Delicious.jpg.
default hi-res/@2x
Generates all image assets in a subfolder named hi-res. Additionally, suffixes the asset names with @2x. For example, [asset_folder]/hi-res/Delicious@2x.jpg.
default 50% lo-res/
Saves image assets scaled down by 50% in the subfolder lo-res under the document's asset folder
default hi-res/@2x + 50% lo-res/
Generates two image assets from a layer:
Default scaling factors are overridden by scaling factors specified for individual layers.
You can disable image asset generation globally for all Photoshop documents by modifying your Preferences.
The File > Generate menu command is unavailable when you disable image asset generation from Preferences. The feature can be enabled again only in the Preferences dialog box.
Asset names must be unique at a document level.
JPG assets are generated at 90% quality by default. PNG assets are generated as 32-bit images by default. GIF assets are generated with basic alpha transparency.
Yes. Transparency and other effects applied to a layer are reflected in the assets generated from that layer. However, such effects may be flattened in the generated assets.
Assets are clipped to the document boundaries. If an image does not fall within the document boundaries, Generator does not create the associated image assets.
In addition to the comma (,), you can use the plus (+) symbol as a separator between image asset names. For example:
42% Rounded_rectangle_1.png24 + 100x100 Rounded_rectangle_1.jpg90%
is the same as:
42% Rounded_rectangle_1.png24, 100x100 Rounded_rectangle_1.jpg90%
Sign in to your account