How to use Automate Batch Photoshop

Photoshop is an essential part of our web design workflow. We use it for a variety of tasks including photo manipulation, color correction, cropping, and making advanced selections. These are the kind’s of tasks Photoshop was designed to do, of course. But as web designers, one common issue we run into is having optimized images for web. Here’s an example: Our client sends us images or shares images with us using dropbox but each of those images is direct from the photographer. They are huge files that are not compressed and appropriately sized for websites. Our clients are not always aware of this and so we take on the task of optimizing them for web production, no big deal. Now, using Photoshop we could open each photo, resize it and then save for web. This would be a manual process that could take several hours…or Instead we use a tool called automate, built into Photoshop and based on a custom action. Here’s how we do it:

Step 1: Set up Your Folders

For this first step, you’ll want to make sure you have one source folder with all of the large images, or images you wish to modify in anyway. Create this folder called make sure all of the images you wish to modify at once want are in that folder. Next, make another folder and name it something different, this is where the modified images will be saved to automatically.

Step 2: Create your Action

For this step we will use the action panel. The action panel allows us to record a series of edits and save them to be applied later to a batch or file. Go to window and click “actions” to open the panel if not already open.

With the action panel open click on new action:

Create the new action. In this case we are calling it “Save Down”.

Step 3: Record your Action

When you press record, Photoshop will begin saving every action you make within the program. So we can go ahead an start our process of batch resizing. With the record option on, signaled by the red circle in the bottom of the action panel, go ahead and open the first image from the original source folder. You’ll notice in the action panel it’s recording the “open” action.

Step 4: Adjust Image Size

This particular image was 1440 pixels wide. We decided to use 1000 pixels as our resize width, so set the image size to 1000 and make sure the height adjusts proportionately. *note this action is recorded and so all of the images in the batch will be sized to 1000 pixels.

Step 5: Export for Web

This is where we use photoshop to save our images for web. The dialog box allows us to customize the output type and compression of images. For most color images that don’t need transparency we can use JPEG and with a quality of medium to high, typically above 50. When ready, click save and make sure it’s in the destination folder you created earlier in step 1.

Step 6: Automate

At this point you can stop recording in the action panel. It should look something like this:

Go to File > Automate > . This is where we will setup the batch automation based on our before and after folders. You can set it up like the example below. The important part is to makee sure you have the action set correctly to the one you recorded earlier as well as the source and destination folders. When it all looks good, click OK and watch as Photoshop will now process all the images in the source folder exactly as you recorded and into web ready format!

As you can see from the steps above this tool drastically saves us time when converting large images into web ready ones. We hope this trick helps with your photoshop needs.

Need help with photoshop ? Contact us