49/50 – Automatic Asset Creator – Generator in Photoshop CC

Adobe Photoshop

If you need to automatically generate assets from individual (or groups of) layers in Photoshop, then you should check out Adobe Generator in Photoshop CC (File > Generate > Image Assets). By using specific parameters to name files, Photoshop can automatically create JPEG, PNG or GIF images.

For example, if you mock up a web page and then want Photoshop to export individual graphics, you can name a layer with the desired extension: banner.gif or photo.jpg or logo.png. If you need more than one version (different file formats for example) for the same layer, add a comma between the names:  photo.jpg, photo.png Note: you can also use the plus (+) symbol instead of the comma.

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. If you need to set additional options for file formats, include them in the layer name as well:

• For JPEG files, set the compression quality by naming the layer (or layer group) to  photo.jpg5 or photo.jpg50% to give you an asset set to 50% compression quality.

• For PNG files, set the options for logo.png.8, logo.png.24, or logo.png.32

When exporting assets, if no size is determined, then the asset will be generated at the same size as the original. However, you are also able to  determine the size of the image that you want Photoshop to output using the layer name. The size goes at the beginning of the layer name and can be set in pixels, inches, percentage (%) and/or mm. Do not put a space between the numeric value and the unit of measurement. For example, 40px x 40px logo.png will generate an asset while 40 px x 40 px logo.png will not. You also need to leave a space between the size and the layer name. If you don’t add any units, then Photoshop will assume that you want pixels. For example:

200% banner.jpg will create a JPEG file that is 200% of the original

40 x 40 logo.png will create a png file 40 x 40 pixels (as would 40px x 40px logo.png)

2in x 60 graphic.gif will create a GIF file 2 inches by 60 pixels.

As you can see by the last example, you can mix the units of measurements. You can also use the question mark “?” to choose one dimension and simply have Photoshop resize the asset proportionally (similar to setting the long (or short) dimension of a file when exporting in Lightroom, Saving images in Camera Raw, or using the Fit Image option in Photoshop (File > Automate).

Before automatically generating assets, you must first choose File > Generate Image Assets. This “enables” Generator. Photoshop will save all of the necessary assets in a subfolder alongside the source PSD file. Note: If you have not saved the source file, then Photoshop will save the assets to the desktop.

A few last tips:

• Name a layer group to have all of the layers within the group saved as one asset.

• Do not use illegal characters (such as / \ : * etc) – no asset will be generated.

• If you clip a layer to a shape, name the topmost clipped layer to generate the asset.

• If your layer extends beyond the visible image area (or if it’s partially hidden by another layer), all of the content will be exported.

This help document is also informative: Generate image assets from layers in Photoshop CC


Adobe Photoshop

Posted on 09-18-2014