Nov 11 2010

Save your fingers with Photoshop Actions

If you are like many designers out there, when designing a website, you most likely build the layout using Adobe Photoshop, slice up the necessary imagery, and then save the images as individual files. This process can be broken down to five basic steps.

  1. Make a selection in Photoshop.
  2. Copy said selection to the clipboard.
  3. Create a new file based on the size of the copied data.
  4. Save the new file for web.
  5. Close the new file.

These steps are likely repeated hundreds of times during a typical site build out. To save time and fingers, I'm going to take the five steps noted above and turn them into an action that can be ran with a single keystroke. Most of you are probably familiar with actions, but there is a bug you need to look out for if using Photoshop CS3.

Steps in a perfect world - For Non CS3 versions of Photoshop.

  1. Create a new document in Photoshop CTRL + N.
  2. Double Click the Background Layer in the Layers Panel and Click OK in the New Layer dialog box to convert the Background Layer to Layer 0.
    Note: This must be done for your Copy Merged Layers to register in the action.
  3. Select the entire document CTRL + A.
    Note: The selection size does not matter as it will not be part of the action.
  4. Click the Create New Action icon at the bottom of the Actions Panel.
    1. Give your action an appropriate name.
    2. Choose a Function Key of your liking that will run this new action.
    3. Click the Record button.
  5. Copy the selected area. CTRL + SHIFT + C
  6. Create a new document. CTRL + N
    Accept the default settings in the New document dialog box.
  7. Paste the copied contents into the newly created document.
  8. Save the new document for web. CTRL + SHIFT + ALT + S
    Accept the default settings in the Save For Web & Devices dialog box.
  9. Close the newly created document without saving.
  10. Click the Stop Playing/Recording icon at the bottom of the Actions Panel.
Completed Actions with
Export Dialog Active

Congratulations! You now have an action you can run by pressing the Function Key you chose in step 4-2.

Before rolling this new action into your production process, there are a few tweaks you should consider.

First, you'll most likely want to change the settings in the Save for Web & Devices dialog bog for each file specifically. As it stands, the action simply bypasses this dialog box. To prevent this behavoir, simly click the empty square (Toggle dialog on/off) to the right of the check mark for the Export entry in the Actions panel.

Second, If you are using Photoshop CS3 like myself, then you'll need to alter the above action considerably due to a bug in this specific version of Photoshop. You can read all about this bug on Steven Sacks blog, but more importanlty you should download the copymerged.zip file from the bottom of his blog post. We are going to use this file in our Action to address the Photoshop CS3 bug.

Steps in the real world...(Photoshop CS3)

Completed Actions for CS3 with
Export Dialog Active
  1. Download and unzip the copymerged.zip file.
    Copy the copymerged.jsx file to a permanent location on your computer.
    I placed my copy in the root directory for Photoshop.
  2. Delete the Action we created in the previous ten steps.
  3. Create a new document in Photoshop CTRL + N.
  4. Double Click the Background Layer in the Layers Panel and Click OK in the New Layer dialog box to convert the Background Layer to Layer 0.
    Note: This must be done for your Copy Merged Layers to register in the action.
  5. Select the entire document CTRL + A.
    Note: The selection size does not matter as it will not be part of the action.
  6. Click the Create New Action icon at the bottom of the Actions Panel.
    1. Give your action an appropriate name.
    2. Choose a Function Key of your liking that will run this new action.
    3. Click the Record button.
  7. Load the copymerged.jsx script file you downloaded in Step 1 via
    File -> Scripts -> Browse... (Navigate to the copymerged.jsx script file
    A new document will be created for you by deafult containing the copied contents.
  8. Save the new document for web. CTRL + SHIFT + ALT + S
    Accept the default settings in the Save For Web & Devices dialog box.
  9. Close the newly created document without saving.
  10. Click the Stop Playing/Recording icon at the bottom of the Actions Panel.

Congratulations! You now have an action that works properly in CS3!

Hope this saves you some time and finger strain in the future.

Cheers!