A closer look at the Photoshop Generator syntax

- Joel Brandt and Samartha Vashishtha

The Photoshop Generator feature offers great flexibility in the ways you can rename layers/layer groups to specify size and quality parameters. Stepping beyond the recommendations in the Help article, this blog post looks at some valid variations that you can use while tagging layer/layer group names.

Before we begin, let’s look at the conventions followed in this blog post:

gradient_suffix-prefix

Space case

  • The filename portion of a layer/layer group name can include space characters. For example:
    250% Foo Bar Baz.gif
    Result: Generates a single file named Foo Bar Baz.gif scaled by 250%
  • While specifying absolute sizes, you can omit the space character between the height and the width. For example:
    100×80 foo.png
    Result: Generates a 100 px x 80 px-sized PNG file named foo.png
  • Do add a space character between the size parameter (prefix) and the layer name. For example:
    100×100 foo.png
  • You can omit the space character following the separator (, or +). For example, any of the following layer names generates two files—foo 1.png and foo 2.jpg—from the tagged layer:
    foo 1.png,foo 2.jpg
    foo 1.png, foo 2.jpg
    foo 1.png+foo 2.jpg
    foo 1.png + foo 2.jpg
  • Do not add a space character between an absolute size dimension and its unit. For example, the following layer names are invalid:
    80 x 100 px imagename.png
    4 in x100 imagename.png
    90 mm x120 cm imagename.png
  • Do not add a space character between the layer name and the suffix. For example, the following layer/layer group name is invalid:
    100×100 imagename.png 5%

Mixing units

While specifying the size parameter, it’s OK to mix and match the supported units—px, cm, mm, and in.

If no unit is specified for a dimension, Photoshop assumes it to be px.

Examples:

  • 80 x 100px foo.png
  • 4in x100 foo.png
  • 90mm x120cm foo.png

Wild cards

While specifying absolute sizes, you can use the ? wildcard in place of a dimension.

Examples:

  • 100x? foo.png
  • ?x60in foo.png

Hyphenated quality parameters

You can add a hyphen before the quality parameter (suffix) to make your layer/layer group names more readable.

Examples:

  • foo.png-8
  • foo.jpg-100%
  • foo.png-32

Some other Don’t’s

  • Don’t use unsupported units.
  • Don’t mix absolute and relative sizes. For example, the following layer name is not valid:
    50% 80×100 foo.png
  • Don’t specify out-of-bounds values. For example:
    foo.jpg-101%
    foo.png-42
    0% foo.png

That’s all for now! Hope you have fun using Generator and other exciting enhancements in the September 2013 release of Photoshop. In case you haven’t already reviewed the What’s New, here’s the link.

 

27 Responses

  • Very helpful.

    I’ve been experimenting with Generator, and wanting to generate jpg’s with FIXED dimensions (from a mask). Problem is, if the image behind the mask has transparency along at least one edge, the dimensions change as the jpg is reduced to a bounding box. Setting the image dims won’t work, as I guess the output will simply be resized.

    Any ideas?

    • Hey Ian,

      this will be possible with the next release! The code is already in the repositories, so if you need it now, you could already get it to run by disabling the built-in Generator, enabling Remote Connections, and running Generator yourself. Or just wait for the next release. :)

      Best wishes,

      Dennis

      • Hi, I really want this to work. I have disabled the built in Generator, and checked “Remote Connections”, and now what? There’s a password field, but I have no idea what to put there or if it’s even related to “Remote Connections”.

        Please help, if Generator wouldn’t auto-trim my files then I would actually be able to use it!

        • Eagerly awaiting this feature as well! Please let us know when it’s available, as it’s crucial for UI design for mobile/tablet devices. THANKS!

  • Interesting feature, and works well for web designers… saves a lot of steps in asset generation. One of the things that I like the best is that it’s open source. I can see a few cases where I could create my own version(s) to meet my specific needs.

    In reply to Ian… I’m going to try to reproduce your little problem, and see if there might be a way to tweak the JS to solve it.

    Way to go Adobe… I’m for more open source “stuff.” ;-)

  • I’ve got a question about file dimensions.

    By default, Generate seems to “shrink to fit” its exported data. I can see the use for this, however, I am currently trying to export images which will retain the full document dimensions allowing the image content to remain in its relative position from my PSD data to the final PNG data.

    For example, let’s say my document is 200 x 200 pixels with a transparent background, and I have a 100 x 100 pixel black square in the lower left quadrant. Currently, Generate will export the 100 x 100 square, thereby ignoring the other three empty quadrants. However, I want the PNG file to be 200 x 200 pixels with empty space and the 100 x 100 pixel square.

    I am not seeing a way to make this happen. Am I missing something, or will javascripting be required to get the result I need?

  • Having the same issue here as Ian and Jason. Would be great to have a fix on this since its shows lots workflow potential.

  • Is there a way to ensure png’s have a transparent background? I’ve found the first time I generate edge reflow project it works fine but then when I edit the psd and update the assets, the pngs get a white background

  • i have Fotolia images 5000Px..

    in PhotoShop i use Fotolia Images in 400 * 400px BOX. now i want 400% times Biger Same Layes.. when i have done.. the BIG problem in Qulity..

  • Having the same issue when i Export Ratina Images.. Almost 400% Big Size…

    i have 200 X 200Px images in Smart Object… When i Export this images qulity Issue Facing

  • I’ve finally had a crack at using Generate in Photoshop CC.

    Unfortunately exporting web assets for retina displays from Smart Object & Vector based layers (in this case with a 200% scaling) does not result in re-rendered output from the high quality sources available. It simply rasterises the layer at 100% and then blows it up for saving. The result is unusable. So much so, Adobe should not be promoting >100% output as a feature or in demos.

    The workaround, of course, is to scale your entire file by 200% and save it with a new file name. Then save layers out at 100% using Generate. All well and good, if you are needing a fixed % upscale for all assets. Still a hassle though.

    It’s still a nice addition to PS CC. Just disappointed to be sold some functionality that clearly isn’t ready for commercial use.

    • Also, with Generate turned ON, renaming layers it fraught with danger. As you type the system is obviously checking layer names for Generate which “submits” your half typed layer name (on PC anyway). As you keep typing, you find yourself using keyboard shortcuts all over the place as renaming is no longer the active task. Very frustrating.

    • Anthony, do check Ps CC14.2 if you mean using AI-made smart objects: http://blogs.adobe.com/crawlspace/#JDI:

  • Generator looks super cool! I’m a game artist rather than a web designer though, so my needs are slightly different. A wishlist for the future:
    -TGA support
    -Generated assets inheriting the master filename, with a suffix
    -Saving assets to specified folders rather than dropped straight next to the source file’s folder

  • I love the new image assets feature. One question though – I just started making image assets of some black and white photography for a web project and after double checking the files I saw that ps converted them into single channel greyscale images and not RGB anymore. From previous experience I know that browsers don’t handle them very well. Is there a way I can get around that and force Generator to stay within the RGB colour space?

  • Hi. Seems like the wild card “?” doesn’t work anymore with 2014. I reported this issue here https://github.com/adobe-photoshop/generator-assets/issues/238 I don’t know if posting here too helps…

  • One problem I’ve been having lately is that I want to create multiple folders that contain the same file. Is there a way to do this without getting the “duplicate file name” error?

  • This feature is awesome, but someone said not ready for commercial. Theres one feature i would want in this is there could one (few) master layer or group that will be visible while saving the individual group. Making my point it more clear : I have a frame that i want it to appear on top of every group that is going to be exported. Each groups has been named accordingly for exporting as png. Currently i have to copy the frame to each group for it to appear in each exported png. If this master group/layer would be visible while exporting then it would solve the problem all together.

    Another request:
    I have a BG done for iPad and want to export for iphone (both reitina) due to the difference in aspect ratio, either i have to crop the iPhone version or pad fill the ipad version. Currently i’m using group within group to do this job with iPad version being masked for correct dimensions. How it could be simpler….

  • Is it possible to alter the name of the generated ‘root’ folder? By default the generated name is: [document name]-assets.

Leave a Reply


+ 1 = nine