#CreativeFriday – Adobe Photoshop CC Generator Deep Dive and Options

The Photoshop CC Generator is a flexible, and easily customisable JavaScript-based platform with rich APIs and powerful capabilities. It has been designed to take layers from your Photoshop document and automatically create individual image assets (GIF, PNG, or JPG) on the folder system of your operating system. Photoshop CC Generator supports Layers, Layer Groups and Smart Objects.

Getting started

You are able to control if generator is available for use, by enabling/disabling it inside the preferences panel directly inside Photoshop CC.

Screen Shot 2013-12-23 at 11.22.06

Generator will be available within Photoshop from, menu item, Generate > Image Assets. Once Generator is enabled it will run in the background and automatically create the assets when required.

Screen Shot 2013-12-23 at 11.22.23 copy

For each Layer, Layer Group or Smart Object, you will need to rename each Layer name to an appropriate file name, as well as a file format suffix (.png, .jpg, and/or .gif), this tells Generator how to name the created output asset.

You are also able to control the quantity, size and quality of each asset, as well as different names and formats.

Current Supported File format options

PNG: .png – Defaults to png 32. Supported options include: .png8, .png24, .png32

JPEG: .jpg – Default quality is 9 (or 90%). Options include: .jpg(1-10), .jpg(1-100%)

GIF: .gif – Basic alpha transparency, no options

Examples include : rad.png24 : middling.jpg5 : retro.gif

You also able to extend the formats by including % scaling as well as Dimension (n x n, where n denotes width and height). The default scaling will be set to pixels(px), but other units include Inches(in), Centimetres(cm) and millimetres(mm). You are able to use commas “_,_” to create multiple files from a single Group / Layer / Smart Object: N.B each tag must be properly formatted with a valid file extension.

Extended Tagging Examples include:

– 300 x 200 imagef.jpg or 50in x 10in huge.png

– 50% imaged.png, 1000% imagei.jpg

– “200% imagex.png, imagey.png” produces both a 2x and a 1x asset

– “400% imagea.png, 250px x 250px imageb.jpg40%” produces a 4x asset and custom scaled version with jpg compression

Where does Photoshop CC save the assets

Generated assets will be saved in one of two places:

– For saved Photoshop CC files, Generator saves to an asset folder created next to the parent file in the operating system.

– For unsaved Photoshop CC files, Generator saves to a generic assets folder on the desktop.

Saving files is handled automatically by Generator; any changes to Layers / Groups / Smart Objects will be automatically updated in their respective assets. So once Generator is enabled, the assets folder should always be in sync with the original layer. If the assets folder or the parent file is moved, Generator will create a new Assets Folder.

Smart Objects Support

As an example of how the smart objects can be used :-

In this example i am using an Illustrator file, but it could equally be other objects in a Smart Object and embed them into Photoshop CC.

Screen Shot 2013-12-23 at 12.12.33

Here is how it looks in Photoshop (Don’t forget, this is a Smart Object, therefore, you can return back to Illustrator CC and modify it at any point in time).


Screen Shot 2013-12-23 at 12.14.11 copy

Notice that the layer has been given a name + jpg extension, and Generator is running, therefore the file will be created next to the .PSD file (see Rucksack.jpg below) (as this is a saved file).

Screen Shot 2013-12-23 at 15.42.06 copy

If anything happens inside Photoshop, the image will be updated. You can see that by adding a layer style onto the layer a red outline is added.

Screen Shot 2013-12-23 at 15.48.51 copy

The respective output asset has now been altered to reflect the change

Screen Shot 2013-12-23 at 15.56.24 copy

It may be that other items need to be included, i.e. Layer Groups. You can see in the screen shot below, the image and it’s components are highlighted in Red, and are grouped under a Layer Group. It’s easy to create the assets from this Layer Group by using Photoshop CC Generator, just make sure that the Generator is enabled and the Layer Group is given a name and file type (i.e. FeaturedLocation.jpg), as shown in the following example.

Screen Shot 2013-12-23 at 16.10.34 copy

Once Generator has completed, there will be an asset folder next to the original file

Screen Shot 2013-12-23 at 16.12.36 copy

However, if the image and in this case just the waves need to be created and the text does not (possibly due to a responsive web layout design), then you can group the appropriate layers, or can use a Smart Object to group them. I’ll use a Smart Object at this point to show the creation of assets on this layer type. The layers have been selected,then the layer fly out menu to choose “Convert to Smart Object” to selected.

Screen Shot 2013-12-23 at 16.19.08 copy

Rename the Smart Object Layer

Screen Shot 2013-12-23 at 16.19.08 copy

Photoshop Generator kicks into action and creates the final asset in the destination folder.

Screen Shot 2013-12-23 at 16.19.39 copy


The final output can be seen in the destination folder

Screen Shot 2013-12-23 at 16.34.14 copy

So hopefully you can see that the Photoshop CC Generator is a flexible and very powerful feature, which can be used in many situations (see this video for working with this feature in conjunction with web graphics and Adobe Reflow CC). Also, Photoshop Generator is open source and based on GitHub, so if you feel the urge, you can customise this function, or create your own solution.

Other ideas 

Open Source, Interoperable Technology

Photoshop CC Generator is a platform that can enable so much more, which is why we are excited to release the Generator technology platform and the image assets generation feature as open source projects. If you know JavaScript, it’s easy to modify the existing plug-ins or write your own. Check out this video from the The Engine Co., who used Generator to write a plug-in for their Loom gaming engine that allows game designers to change the UI of a game in Photoshop while the game is being played:



Share on Facebook

Comments are closed.