How to use Adobe Generator for Photoshop Tutorial and Image Assets

Photoshop Adobe generator and image assets exported using layers etc in creative cloud

Setup of the Adobe Generator

adobe generator image assets exportAdobe generator Introduced in September 13 in the new update 14.1 for Photoshop CC.


The tool needs to to be turned on via the file menu generate and image assets.


Once turned on, all assets are generated either on the desktop or as a sub folder of the file folder. You can find a vast range of assets for Photoshop on the site such as tribal and decorative custom shapes and torus / curved Photoshop custom shapes and zoom and manga effect line custom shapes


The key thing is the file menu > generate > image assets


Assets generated

adobe generator layer in PhotoshopThe Photoshop Adobe generator is a great feature for use for all kinds of assets as well as web design and resources (particular interest for me). The following file formats can be generated






All the assets generated can be modified by the Photoshop adobe generator language / script language. Of course, once you have the assets then you can modify them further. Note that the Adobe generator is on a file by file basis so next time you use the Photoshop Adobe Generator, you need to turn it on again (which I think is quite fine as you might not need it for every task)


Photoshop layers and Adobe generator

adobe generator photoshopThe key thing with the tool is to set the names via the layer. Instead of using layer 0, layer 1 etc you can change the layer name for the assets (for the Photoshop generator) to something like xxxx.PNG. The asset is then automatically saved as that file name in the location mentioned. The assets for the Photoshop layers / Photoshop Adobe Generator being


Text layers

Custom shapes layers

Pattern layers

Gradient layers

Brushes on layers

Text on layers / paths etc

and much more


photoshop adobe generator assets As the Photoshop Adobe Generator doesn't care about the position etc of the asset, the layer comps is of no use with the P.A.G.


Once you have named all the layers as xxxx.png etc (the filename has to be unique) then all those layer assets are generated automatically.


You can then use them in Edge, Dreamweaver etc as required.


Photoshop Adobe generator language

svg generated fileYou can go even further than this and use even more complex terms in the layer name so instead of calling the layers Photoshop generator 1.png etc you can also add a percentage size in front of the text layer name and shape layer name etc. So if you want to save a range of files with the different file sizes then you can type


400% name1.png, 200% name2.png, 100% name3.png, 50% name4.png


svg generated file via photoshop adobe generatorYou can also set the file to be a name1.svg just to generate a standard vector svg file from a custom shape etc


and so on and the P.A.G will save those files all the same layer but with different sizes and all PNG etc. You can set it to 2000% etc if you wish or whatever. You can also set the Photoshop Adobe Generator to a custom size so the layer can be saved as a 100x100 name1.png, 200x200 name2.png etc or even 100 x 400 name3.png and so on. So if you have a text layer asset (perhaps a whole page of text) this can be saved as a document with a layer name of text1.png at 1000% the original size (relative to the document).


Likewise, a pattern layer (fill pattern layer) can be saved as a pattern 5000 x 5000 in size as well as other sizes.


Photoshop Adobe generator will take some time to process this so you should not expect the assets to appear instantly if you are creating large files (and I am certain here are limits on the size). Custom shapes can also be saved as raster format PNG or GIF or JPGs


Photoshop Adobe Generator in creative cloud

Photoshop Adobe generator is great addition to Photoshop and hopefully one that can be extended to include a lot more features and expressions as well as file formats such as AI ?



You can find out more about Photoshop such as how to use Photoshop custom shapes with the new CC creative cloud 2017 2015 libraries and how to use the Photoshop search feature for help and stock photos with the CC 2017 release and beyond and how to open and place PDF vector shapes in Photoshop tutorial and keyboard tool shortcuts in Photoshop and how to use and speed up your work and how to use the equations filter editor in Affinity Photo for wonderful transformations of images and how to use Affinity Photo with the equations filter and channels for amazing color effects


Video tutorial

[Youtube] A quick guide to the new Photoshop Adobe generator / image assets tutorial