You are able to control if generator is available for use, by enabling/disabling it inside the preferences panel directly inside Photoshop CC.
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.
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.
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).
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).
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.
The respective output asset has now been altered to reflect the change
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.
Once Generator has completed, there will be an asset folder next to the original file
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.
Rename the Smart Object Layer
Photoshop Generator kicks into action and creates the final asset in the destination folder.
The final output can be seen in the destination folder
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.
Open Source, Interoperable Technology