How to use Adobe Generator for Photoshop tutorial

The Adobe Generator in Photoshop CC 2018 2017 2015 etc for exporting layers using a naming convention

Adobe generator in Photoshop

how to use adobe generator image assets expor photoshopt
  1. Photoshop File menu

  2. Generate

  3. Image assets

  4. Create layers such as shape layers

  5. Layers panel

  6. Rename layer names to PNG etc files (the process works in the background once you have set the Photoshop Adobe Generator on

  7. Save the file to a particular folder (this will be the location for the assets)


Basics : gradientThe language for the exports is set via the layer panel. You can export images in multiple sizes via the layer panel such as 100% or 50% or 400% etc.


Set up the name such as 100%name1.png. If you don't change the name of the layer to something like that, it will be ignored and not exported.


It should be noted that this is not a miracle asset saver, if the image is a small file to start with and you set it to 10000%, the result will probably not be great


Video tutorial on the subject by (youtube)


Export PNG and JPG etc : generatedYou can use feature to create PNG and JPGs etc in seconds (I haven't timed it)


The PAG 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 PAG language / script language. Of course, once you have the assets then you can modify them further. Note that the PAG is on a file by file basis so next time you use the PAG , you need to turn it on again (which I think is quite fine as you might not need it for every task)


Buy Price :$6.49 US Dollars 13,000 Custom shapes for CC 2018 - CS5 etcand elements CSH gallery


Using layers : languageThe layers and PAG uses the layers and the naming convention for the layers to generate the images


The 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 to something like xxxx.PNG. The asset is then automatically saved as that file name in the sub folder (of the file saved)


Type of layers to use : layersText layers

Custom shapes layers

image layers

Pattern fill layers

Gradient layers

Brushes on layers

And much more


As the PAG doesn't care about the position etc of the asset, the layer comps is of no use with this feature


Export of the assets : assetsit is all automatic. Yes, you don't have to worry about it any more


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.


PAG language : svgThere is a complex language of scale, format etc


You can go even further than this and use even more complex terms in the layer name so instead of calling the layers one.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% name12.png

200% name22.png

100% name32.png

50% name42.png


Multiple entries : languageYou can create a long line of layer names. You can set up 400%name1.png,1000%name2.png etc and then the system will generate two files, a name1.png and a name2.png and the name2 will be larger. Separate them by a comma


SVG : svgYou can also set the layer name to a SVG file type and the result will be an instant export of the SVG file. Great for creating a quick vector design from shapes and type etc.


You can still add a percentage to the name. So you can use 4000%shape1.svg etc will result in a larger image (though the actual file is no bigger as it is a vector).


You can create images from the SVG format as well as vector shapes and type.


Create super large files : 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 PAG 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. Custom shapes can also be saved as raster format.


Processing time : patternsPAG will take some time to process large documents 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). It all happens in the background so you don't have to take any time away from your work


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


If you set a pattern fill to export at 5000% etc, it will not appear instantly - give it time (unless you have a super fast machine)


Location of assets : locationThe key thing is that you save the file somewhere. If you save the file to the desktop then you will see an assets folder generated as a sub folder and you will find the assets there. You can then copy the assets to another folder such as your website


Keywords : How to use Adobe Generator for Photoshop tutorial



Commercial use. Secure sales by (c) 1995-2018 Andrew Buckle, Maidstone artist, tel: +44 1622 / 688 375 E-mail: support@