Adobe Generator & Web Design

Adobe Generator & Web Design

Today, Adobe introduces Adobe Generator for Photoshop CC. Members of the Adobe Creative Cloud just need to update Photoshop CC to get this new technology. On this blog, I’ve explained how to write a script that would extract a layer and output automatically a PNG or a JPEG file. Web designers always have to generate assets from Photoshop layers and share them with a Web developer. Adobe Generator will do it for you… in real-time. This new technology is open-source and will enable amazing new workflows.

How does it work ?

You just need to turn on Generator for your PSD file (File > Generate > Image Assets) and rename your layers.

Rename your layer and Generator will create an asset in real-time.

Rename your layer and Generator will create an asset in real-time.

You can name a layer, a group of layers, define if you need a JPG or a PNG file, the scaling, the JPEG compression… You can even generate several files from one layer. If you name a layer “Hero.jpg, Hero.png, 200% Hero.jpg75%”, it will generate a JPG file (with a default 90% quality), a transparent PNG file, and another JPEG file, twice as big as the original and with a quality of 75% (very cool to target Retina displays). You’ll get more information about naming layers here:

Generator is based on Node.js, so you can hack it and write your own JavaScript plugins! The source of of Generator is available on GitHub !

Bridge with Adobe Reflow CC

I’ve blogged about Responsive Design and Photoshop CC to explain the role of Adobe Reflow. Generator is the missing piece to create an optimal workflow for Responsive Web Designers. Adobe Generator will generate the visual assets and also the structure of your page, keep the text elements, the gradients, the vector shapes (converted into DIV elements)

Instead of starting the skeleton of your responsive page  from scratch, you can get the visual design from Photoshop and start adding some responsive rules within Reflow. The connectivity with Photoshop is persistent: if you modify a layer in Photoshop, Generator will generate the updated asset in real-time and push it to Reflow CC.

My Photoshop Web Design and My Reflow project side by side. Generated in one click!

My Photoshop Web Design and My Reflow project side by side. Generated in one click!

I’m currently working on another tutorial to share the optimal workflow between Photoshop CC and Reflow CC. More to come on this blog… 😉

While you wait for my videos, you can check this great tutorial by Jacob Surber (Reflow product manager). He showcases all the features of the bridge between Photoshop and Reflow:

How to get Adobe Generator?

To try this new technology, you just have to join for free the Creative Cloud and download the last versions of Photoshop and Reflow. Have fun !!!

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)



  1. Mask Layers & Web Design | Creative droplets - […] has just introduced Adobe Generator for Photoshop CC, a great technology to automatically generate visual assets from Photoshop layers.…

Submit a Comment

Your email address will not be published. Required fields are marked *