Webmasters Gallery

You have a picture of a stuffed penguin. It’s not just any stuffed penguin, though. It’s the  latest and greatest in stuffed penguin technology, the hot item that everyone will want under their Christmas trees this year. You’ll make a fortune with this penguin, if only you can start selling it online in time for the holidays. “But wait!”, you say. “I can’t just put this picture on the Internet looking like that! It’s too big! It needs a border! It needs a drop shadow! What shall I ever do?”

OK, maybe not. Your penguin won’t lead to fame and fortune, and you can easily edit your image with Photoshop. So let’s change the scenario a bit: your client has a picture of a stuffed penguin, and a picture of a stuffed owl, and a stuffed gopher, and a stuffed wallaby, and a stuffed flamingo… You get the idea; hundreds of pictures from their Stuffed Animals from Around the World catalog.

Before you can load all of the pictures into your client’s fancy new e-commerce site, you need thumbnails with simple borders and drop shadows for each and every image. Simple, yes, but tedious. And you’ll get to do it all over again when they release next year’s line of stuffed animals.

Photoshop Droplets Save the Day

Fortunately, Photoshop includes a helpful tool for processing large batches of images: droplets. By creating a droplet, you can tell Photoshop to perform the same set of operations for every file in a folder.

Note: The instructions below are for Photoshop CS2. Menu items may have moved or had their names changed slightly in other versions of Photoshop.

Step 1: Plan Your Action

Before you create your droplet, carefully plan out what you want it to do, sparing no detail. Start by specifying what you have and what you want the results to look like.  In our case, we start with folder full of product images of various sizes. We want to end up with another folder full of product images that all have the following characteristics:

• No more than 200px wide and 200px tall
• A 1px grey border
• A 5px drop shadow cast to the bottom right of the image on a white background
• JPEG compression

Open up your first image and determine exactly what you need to do with that image to get the results you want.

1. Resize the image to fit within your maximum dimensions, minus 5px in each direction to allow room for the shadow.
   1. Select File->Automate->Fit Image.
   2. Set the width and height constraints to 195px.
2. Add a border to the image.
   1. Select the whole image (Select->All).
   2. Modify your selection so you have the border selected.
      1. Select->Modify->Border, and set the width to 1px.
   3. Fill the border with your chosen color
      1. Edit->Fill.
      2. Use->Color… and set the color to #808080.
   4. Deselect everything
3. Add a drop shadow to the image.
   1. Make the background into a layer.
   2. Add the Drop Shadow layer style.
   3. Set the angle to 135 degrees, the distance to 3px, and the size to 5px (this will fit within our extra 5px).
   4. Resize the canvas, adding 5 pixels to the right and bottom, so the shadow will be visible.
4. Flatten the image.
5. Save the image in a different folder.
6. Close the image.

Step 2: Record Your Action

You can save your process as an action, which is simply a series of steps that you record and then play back as many times as you like. The process of recording a new action is quite simple.

1. Open one of the images you want to edit.
2. Open the Actions palette (Window->Actions).
3. Create a new set of actions, called “My Actions” (or anything you want).
4. Create a new action in that set, called “My Neat Action” (or, again, anything you want).
5. Make sure Photoshop is recording (if not, press the “Begin Recording” icon in the Actions palette), then go through the steps listed above to modify your image, save it, and close it.
6. Press the “Stop Playing/Recording” icon in the Actions palette.

Step 3: Create a Droplet

Now that you have your action recorded, it’s time to save it as a droplet. Select File->Automate->Create Droplet… There are a few options you’ll need to set, such as the file name for the droplet and the location to save your modified images. It is very important that you check the “Override Action ‘Save As’ Commands” box. This will let the droplet save the files with the name and location you specify, rather than the name and location specified in the action you recorded earlier. When you click “OK”, Photoshop will create an EXE file. You use it by dragging images or folders onto that file’s icon.

 

Step 4: Let the Droplet Work Its Magic

You now have your droplet all set up and ready to go. Now, simply take a folder full of images and drag it onto the droplet file you created. Photoshop will run the set of actions you recorded earlier for each image in that folder, sending the results to the folder you specified when you created the droplet file.

A special note for Windows Vista users: when you first try to run a new droplet, you might get an error message from Windows, saying “Adobe Photoshop CS2 has stopped working.” If you get this error, Windows’ User Access Control restrictions are preventing the droplet from running properly. To fix it, right click on the droplet file and choose “Properties”. On the Compatibility tab, check the box labeled “Run this program as administrator”. You’ll have to click the “Allow” button every time you start a new batch.

Do More with ImageMagick

At this point, you’ve impressed your client with your quick turnaround on the project. So much so that you get an even bigger job. More than just stuffed animals, their full catalog includes stuffed fruits, stuffed rocks, stuffed small appliances. You name it, they stuff it. You need to prepare tens of thousands of images for your client. Try running that folder through your droplet and you’ll come back to your computer a few hours later to find that Photoshop has crashed. There is no hard and fast limit to how many files you can process at once; but the more you have, the more likely it is that Photoshop will get overwhelmed and stop responding. If you need to process extremely large batches of images, you might want to consider using ImageMagick.

What is ImageMagick?

Like Photoshop, ImageMagick is software for creating and editing raster images, featuring a rich set of tools. Unlike Photoshop, you’ll do most of your work in ImageMagick outside of the comfortable embrace of a graphical user interface. Instead, you open a command line, tell ImageMagick what you want it to do, and it goes about doing that without the need to display the images to you. ImageMagick is freely available open source software, with versions for Windows, OS X, and Unix. Chances are, if you have shell access to your web host, you’ll find ImageMagick already installed there.

Working with Files

You call ImageMagick from the command line using the command “convert“, along with various options to tell it exactly what to do. We’ll start by going through the commands necessary for each of the modifications we want to make to our image.

1. Resize the image to so it is no larger than 192px x 192px.

   convert input.png -resize 192x192 output.png

2. Add a 1px grey border to the image.

   convert input.png -bordercolor "#808080" -border 1 output.png

3. Add a dropshadow to the image.

   convert input.png »
       ( +clone -background black -shadow 75x2+2+2 ) »
       +swap -background white -layers merge +repage -chop 2x2 output.png

4. Save as a JPEG

   convert input.png output.jpg

Now that we know exactly how to do the individual step, we can mash everything together into one command to turn our original penguin into the thumbnail we’re after:

convert input.png -resize 192x192 -bordercolor "#808080" -border 1 »
    ( +clone -background black -shadow 75x2+2+2 ) +swap »
    -background white -layers merge +repage -chop 2x2 output.jpg

We need an easy way to apply the command to every file in our folder. The simplest way is to create a loop that grabs every file name in the folder (”%f” in the example below) and calls our command for that file name, creating an output file with the same name in a different directory (”../out/%~nf.jpg“).

This example works in a Windows command line; it can be modified to work on OS X or Unix:

for %f IN (*) do convert %f »
    -resize 192x192 -bordercolor "#808080" -border 1 »
    ( +clone -background black -shadow 75x2+2+2 ) +swap »
    -background white -layers merge +repage -chop 2x2 ../out/%~nf.jpg

Written exclusively for WDD by Jonathan Brinley.

Have you worked with ImageMagick or Photoshop droplets? Share your experiences below.