Skip To Content

Introducing Adobe Generator & “Trim and save for web” Photoshop Action

Kevin Doherty

Creative Director

Date

Sep. 17, 2013

Save for web and trim Photoshop Action

For a couple of years now I’ve been using this amazing Photoshop Action for my website design. That I downloaded from a site (I think it was net.tutsplus.com) which saved me hundreds of hours (just a guess) in my workflow. Essentially it allows you to select a layer or a group and when you run the action (I run mine by a preset key command). It takes your selection, creates a new doc, trims any excess canvas and loads the save for web dialogue. I found I was saving my assets at record speed and it was a life saver. If you’d like to take it for a spin, feel free to download the action from here: http://bit.ly/1bLr6Te

Photoshop CC Adobe Generator

Ok, now after using the above photoshop action. I was more than happy with how I gathered my assets. And wasn’t even in the market looking for an alternative workflow method. I wish I recalled the original place where I heard about this AMAZING! a new feature that is exclusive to Creative Cloud members using the Photoshop CC version 14.1 called Adobe Generator.

Now, what does this new feature do? It allows you to name your actual layers and groups with various formats and file extensions in the naming convention and as you save your Photoshop file. It automatically outputs your assets into a directory for you!!! Think of the most simple/common example. You have a logo which you normally would save for web. Choose a transparent .png format and save to your projects images directory. Now with this new feature, all you have to do is name your layer “logo.png32”. The 32 is added for 32-bit transparency support.

There are a whole string of other variations you can add to some of the formats such as quality settings, adding 2X to your vector shape layers for retina, even using a comma-separated list for your layer names to save out more than one size/format on a per layer basis!

Now, I haven’t put it to the full test just yet and I have heard a few buggy things in the community in certain situations with the shape layers and a bit of aliasing but for a first outing, I applaud you Adobe (slow clap).

To read the original article and Adobe’s announcement take a peek here: http://adobe.ly/1avreqk Here is a great article on actual use cases with great examples: http://adobe.ly/17OK8As

Book with us

Let’s accomplish what you are looking for, our team of experts are here for you.

Let's work together

Warning: Working with our team may result in excessive creativity, uncontrollable 'aha' moments, and an addiction to perfect pixels. Please proceed with caution.