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.
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: http://helpx.adobe.com/photoshop/using/generate-assets-layers.html
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.
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 !!!