Sneak peek: Project Generator: Live assets generation in Photoshop

Sneak peek: Project Generator: Live assets generation in Photoshop

Photoshop team at Adobe is working on a new feature code-named Project Generator. This is a little sneak peek of what it does and how it helps you to save the time when designing user interfaces and preparing graphical assets for production or development. Together with that it rapidly simplifies the designer/developer workflow within Creative Cloud.

Web Assets generation process is defined using a naming convention of layers and groups. If you add suffix .jpg .png .gif or .svg (yes, shapes) to the layer name, Generator will understand it as an asset to export. You can also export out file in different scale by setting @2x, @1.5x or similar to the layer name.


Project Generator is a fully programmable and extensible pipeline based on Node.js allowing you to completely customize the output using JavaScript. Together with the assets you can get the structure as well and process it into different format e.g. HTML/CSS.

Stay tuned for more and let us know what you think, ping me and @timriot.

Note: this is a sneak peek and the final workflow can differ

Written by: |   Uncategorized     |    May 7, 2013

Creative Cloud - Get all the Adobe creative desktop tools + services like 20 GBs file sharing.
  • friv

    The article is written in a very good manner. Thanks for your work!!

  • Slavomir Durej

    very nice!. this could be quite useful, however usually designers produce website components (icons, buttons, panels etc..) that are made up of several layers, so it would be useful if this could be applied to a layer group as well, not only to individual layer. So you if you named your layer group ‘button.png’ (consisting of 2-3 layers) it would created a single button.png file in the output folder. Hopefully this will be available as a plugin / script for current versions of Photoshop (5.5/6) and we won’t be forced to buy a new version to get this :)

    • tim riot

      Hi Slavomir,

      The tagging that Tom mentions above will work on individual layers – or – layer groups. =] So it already works that way you want it to!

      As you feared, the internal PS APIs which enable the realtime asset generation will only be available in a future version of Photoshop CC.


  • AwesomeRobot

    A cool addition to this would be the ability to create sprites — say if I had 3 50px x 50px layers with the same name, but a different suffix, I could export them and get a single 150px x 50px image… This would be amazing for button states and general CSS animations.

    So, say I had a button and I named the layer “button.png:1 (base)”, “button.png:2 (hover)”, and “button.png:3 (active)” — I’d have a consistent file name, sprite order, and reference-information that would be ignored by the export process (the text in parenthesis).

    Either way, as-is this would already remove a step from building sprites, which is nice… There’s a ton of potential here — layer naming could become a really powerful export language with some really simple modifiers — which will also solidify the need for proper layer naming! Great work, Adobe!

    • Tom Krcha

      yup definitely, thanks for the note, we will look into it.

  • Felipe Mendez

    would be cool if i say normal 0 0 active 0 -50 (prevosuly knowing the width and height) down 0 -100 to give my own sprite conventions, that would be little painless the proces to create the css states

  • tomaskafka

    I am already using if you need such thing now – compared to Slicy it is free and works on windows.

  • Kev

    Cool, is there a list of current commands available for layer names/groups? And any future ones?

  • Miguel Machado

    I’m running Photoshop CC version and I don’t see the “generation” option on file menu… What I have to do… Rename all layers with file extension?

    • tomkrcha

      Hi Miguel, this demo is a sneak peek. Stay tuned.

  • yepi 8

    very good article, very easy to understand, thank you.