Photoshop Action – Selected Layers to Web Export in One Click

To speed up my Photoshop to HTML workflow, I’ve recorded a Photoshop Action that allows me to select any combination of layers (which may contain layer styles, vector shapes, text layers or smart objects), and instantly turn these into a flattened document which is passed to the the save for web dialogue.

The layers are rasterized, merged and cropped, but transparency is retained, if present. This saves a lot of time when preparing a comp for HTML export, and removes the need to use the slice tool for most situations.

Update: since the following article was published, I have created a newer version of this Photoshop action, with an accompanying post that outlines the changes. Find out more here

Download the ‘Layers to Web’ Photoshop Action.

Installation

Double-click on the downloaded file, it should launch Photoshop and add itself to your Actions palette. If this doesn’t work, install it manually by choosing ‘LOAD ACTIONS’ from the Actions palette contextual menu:

Then browsing for the file.

Instructions

1. Select the layers that contain the elements that you want to export as a single graphic.

2. Ensure the ‘layers to web’ action is active in the Actions palette.

3. Press the play button in the Actions palette.

4. Your selected elements now appear merged, cropped and ready to export in the save for web dialogue window!

Compatibility

The action was recorded using CS3. I haven’t tested it in CS4, but see no reason why it wouldn’t work in this or CS5. It requires smart objects to work, so is not compatible with any Photoshop versions lower than CS2.