Main Page Content
Using Photoshop Actions To Prepare Web Photos
If you have been using Photoshop for the web for any length of time, you have probably run into a situation where you find yourself doing the same operation over and over again. For me, it's preparing a directory full of photos (usually from my digital camera) for use on the web. My camera captures big (1344 x 960 or something like that) .JPG or .TIFF files that need a little work before they'd be what I would consider 'web ready'. What do I think of as 'web ready' for a photograph? Depends on the context, but for the most part images should be 'small' both in terms of pixel dimensions and file size, sharp and adjusted for contrast/color balance. 'Web ready' photographs often times have an associated thumbnail image.
Why thumbnails?
If you already know why, you can skip this section. Bandwidth is always an issue when preparing content for the web. Photos (especially high-quality ones) are especially hungry for bandwidth. Say you have 12 images you want to display on a page. If each photograph is 30 K, you're looking at a final page size upwards of 360 K! That only counts the photos. What if there are graphics, icons, maps and supporting text? Common sense suggests that 400 K pages are not user friendly. So what are our options? We can either give users only small photographs, give them only text links to the large photos or we can give them thumbnail versions. The thumbnail versions are a great bandwidth saver, because they not only allow the user to download a quick index of the images (the thumbnails page), but also to make informed choices about which files they will download to view. I have heard it suggested that one solution would be to put only large images on the server, and constrain them to thumbnail display size with the height/width attributes, but that completely defeats the purpose of having thumbnails. The user is still forced to download big, heavy photos of your Aunt Betty's birthday party. Small, lightweight thumbnails make navigating through an images directory a breeze for the users. Let's help the user out!
The Process
For the purpose of this article, we will perform what has become a fairly routine practice for me — saving 'web ready' photographs (with corresponding thumbnails) for use in our website. For an example of the final product, see a thumbnail gallery I prepared for a client.
Yes, I know there's a 'Web Photo Gallery' option in Photoshop. Why don't I use it instead? Because I want flexibility! I want the freedom to do whatever I want with my thumbnails and larger images. Maybe I want JavaScript links that open the images in a new window, or maybe I want a PHP script that automatically generates the thumbnails and links based on the contents of a directory, or maybe I want to do the slick alpha fade on my thumbnails. The point is, the technique that I've used on this page is:
- exported a large, optimized .jpg to the folder 'large'
- exported a small, optimized .jpg to the folder 'thumbs'
- written a PHP script that gets all the image filenames from one of the directories, and writes the appropriate <img> tags and links.
The whole process took about 20 minutes, though more time could be spent fine-tuning image brightness, contrast, color, etc. The particular needs of this page were just to display the images I'd shot with my camera during this one day. Due to the large number of files, I didn't pay too much attention to each photo's color and detail. Your mileage may vary.
Some of this work has to be done manually in Photoshop, but many of the repetitive tasks (e.g., applying commands with their parameters to individual files) can be automated.
To get started, identify a directory full of photographs that you would like to turn into a 'web thumbnail photo gallery'. Important! Back up your files! Do not practice this or any other new methods on your only copy of a photo! OK, presumably, these images are ready for what I'll call 'pre-production' — the requisite steps before actual production can begin. :)
First, open all of the images in Photoshop just to look at them. If you take
photos like me, you'll have a bunch of 'portrait' format shots that will need to be rotated, as well as 'landscape' format photos that will be fine as they are. Go ahead and rotate all of those images, Image > Rotate Canvas > 90� CW /90� CCW.Look at each of your images. This is really the most important step. Do you plan on using all of them? Do you really even need to keep all of them? I almost always wind up with images that are either under or over exposed, poorly composed, blurry or just plain ugly. Good thing for digital "film", huh? Anyway, the point here is to isolate all of the images that will ultimately have scripted actions applied, and be used in our website. For each photo that you have (and this is true of every photo I ever opened in Photoshop) you will want to adjust levels or curves and apply the unsharp mask filter.
Levels/Curves
Levels Command
Image > Adjust > Levels (ctrl + L) accesses the Levels command. This command presents the user with a Histogram, which is a graphical representation of all of the pixels in your selection. The width of the histogram represents all 256 possible brightness values from 0 (white) to 255 (black), right to left. A detailed analysis of using the levels command and all of its features is beyond the scope of this article (and beyond my capacity for articulation!) but here's how I use it. See the 3 little pointers under the histogram? I slide the right one to the left until it hits the first pixels in the histogram. Then I do the same thing with the black one, slide it toward the center of the histogram until it lines up with pixels. Then I slide the middle one around until the graph has an equal number of pixels on each side of the pointer (did that make sense?). Here, look at the screenshots...
See how the lights and darks are more balanced? The sky is light and
the shadows on the ground are dark. In fact, that's exactly what this command can do - lighten lights and darken shadows. That's what I use it for. Note that these pixel brightness value adjustments are applied to all of the pixels in the image. You can select to apply them only to pixels in one color channel (Red, Green, Blue) to have great color correction control. I know, adjusting color is scary, but it doesn't hurt to try (if you've remembered to back up your photos). Next time you have a scan that's too red, blue, or green, try playing with the values for only those colors until you think it's getting better. Take heart — I used to be mortified by this stuff and now I'm pretty comfortable adjusting color with this tool.Search 'Photoshop levels command' at Google
Curves Command
Image > Adjust > Curves (ctrl + M) accesses the Curves command. This command is essentially similar to Levels, but with a different sort of graphical representation. The other important difference is that instead of adjusting 'actual' pixels, you're adjusting 'relative' values...this is particularly relevant to a discussion of automated processes. Curves is probably the most powerful, flexible color adjusting tool around. What it allows the user to do is to map any brightness value in an image to absolutely any pixel brightness value. I know, it's complex terminology and a detailed discussion is beyond the scope of this article (not to mention completely unnecessary, considering the vast amount of documentation available for this command). Try it, learn more about it, use it — you'll love it!
The cool thing about this tool is that it's effects are relative, which means that settings can (almost always) be applied to many images. Try it: with one of your open images, open the 'Curves' command panel (ctrl + M). Place the cursor near the bottom-left corner of the graph and grab the line, then drag it down a little bit. Next, grab the line near the top-right and drag it toward the top of the graph. What I generally do with this tool is push the bright pixels a little brighter, the darks a little darker, and adjust the mid-tones to suit the photo. If I have a kind of dark image, I'll push the midtones a little lighter and vice versa. The key is restraint. Don't over adjust. Fortunately newer versions of Photoshop allow you to see the effects of the command dynamically as they are being applied. Push, pull, go a little too far and then back it off a little bit. The only way to really learn is to experiment.
Applying saved Levels or Curves settings works best on images with similar histograms. If you take 45 photos indoors, with a flash, at Aunt Betty's birthday party, it is likely that they are all generally similar in their exposure. In cases like this, saving a levels or curves setting with the 'Save' command can be very useful for applying that setting automatically to our process later. When I use this feature, I try to keep my adjustment to a minimum to avoid overdoing it on any one of the images that have the setting applied to it.
Search 'Photoshop curves command' at Google
Unsharp Masking
I don't have any idea why they call it that, but Aardvark sent me this
link that presumably explains the history of 'unsharp mask'. What does 'unsharp' mean anyway? Truth is, this is the only useful sharpening tool in Photoshop, and the only one I ever even use. The command palette consists of 3 parameter settings: amount (expressed in percent) , radius (expressed in pixels) and threshold (expressed in some arbitrary Adobe value). Unsharp mask finds edges in your image, defined by adjacent pixels of differing brightness values. The pixel radius value determines the 'size' of the sharpening effect, or how broadly it will be applied to edges. The threshold value specifies which edges will be sharpened and which will be ignored. The higher this value is, the more pixels/edges are ignored in the sharpening process. For creative/artisitic effects, you can use this in all kinds of wacky ways to create near-psychedelic effects.To effectively
sharpen photos, you'll find that this range of values usually works best: amount = 80% - 120%, radius = .7 - 1.1 pixels, threshold = 4 - 9. Start with the settings somewhere near that range and then adjust one parameter at a time until you get the results you want. Photoshop saves the settings used so that the next time you use the filter, the last used values will be present in the command by default. Again, this is helpful for applying the same values to a group of images.The Stage is Set
By now you should have viewed your images, rotated the 'portrait format' ones to be upright and adjusted exposure values to suit each image. If you have a group of images to which the same Levels or Curves setting will be applied, then you have saved those settings in the directory containing all of your raw files. We're ready to do some automation.
Rolling it all together!
Photoshop provides powerful automation tools, available in the 'actions' palette (which shares space with the 'History' palette in windows). The actions palette allows the user to create, apply and edit sequences of Photoshop commands. Pretty straightforward. To create a new action, click the 'new' icon to the left of the trash can at the bottom of the palette. You can name your action and save it in the 'action set' of your choice. Now you have a new, empty action... useless until you put some commands in it. To add commands to this action, click the 'record' icon (the one that looks like a little dot) at the bottom of the actions palette. Now that we are recording, every command we issue in Photoshop will be added to our action. With one of our raw files opened, we'll go through the process of creating prepared images for our thumbnail gallery, step by step.
If we are applying a saved levels/curves setting to our images, now is the time. I don't know if there is supporting evidence, but I have always had a gut feeling that finer exposure adjustments can be made to images with more data. I always adjust color, brightness, contrast and saturation of images in their rawest, largest state. So if you have a saved setting you want to apply, apply it now via either the levels or curves command ( load > select levels/curves settings file will choose the settings to apply).
Take the size down a little: Our large image will be sized to fit in a website, so that means it is limited to ~580 pixels (or, an 800px wide window + chrome + my HTML template). We can resize the image to 580 pixels wide by right-clicking in the images title bar, selecting 'Image size' from the dropdown, and filling in the appropriate value. Now, what about those portrait formats that these settings will also be applied to? Do we want those 580 pixels wide too? If we do that, they'll be about 900px high; maybe that's too much. What to do? One solution is to specify the resized value as a percent, based on our initial pixel value. Photoshop does the math for you, just enter your 580px width, select the units to the left (pixels) and change that to percent. Bingo, now all the images to which this action is applied will be scaled down to this percentage, if they are all the same width, they'll all come out to 580px. Those that are narrower (but taller) will still be scaled the same amount. Note : Make sure the 'constrain proportions' box is checked as you apply this step.
Apply 'unsharp mask': I usually apply the unsharp mask filter with minimal sharpening values anytime I resize (scale down) an image. It seems to help put a little contrast back in the edges after throwing out some of the data. At this step (especially if I've already applied this filter once), I will use the settings at the very low end (or lower) of the range of typical settings presented earlier. Play around. Find settings that work for your image.
Export the large version. Let's save our large version for the web, 'file > Save for web' calls up Photoshop's cool web optimization feature. Our photos will be saved as .jpg files. Choose 'JPEG' in the 'settings' dialog in the right column and adjust for the proper trade-off between file size and quality. Know your audience, deliver what they want. When you have the settings right, click OK and save the exported .jpg in a subfolder called 'large'. Leave the filename the same.
Resize to create a thumbnail. OK...I like my thumbnail images 80px tall. Use your own experience to determine what size you want. Generally, the more thumbnails I will display per page, the smaller I want them to be. Smaller than 80px high though, and they become difficult to see.
Apply 'unsharp mask'...again: See step #3
Export the thumbnail version. Now we follow the same steps used to create the large, web-ready file to create the thumbnails. I usually save these at a lower quality/higher compression since they're so small and difficult to view for content anyway. Mine tend to come out in the 2-3K range. Experiment, find the settings that work for you.
Close the file. Don't save your changes or you'll have turned your nice master into a tiny, useless 80px high thumbnail :)
Stop recording the action. Hit the 'stop' icon at the bottom of the actions palette.
OK, what you should now have is:
- All of your original files, in the state that you last saved.
- A sub-folder called 'large' containing the large versions of the file you used to record the action, saved with the same filename.
- A sub-folder called 'thumbs' containing the thumbnail versions of the file you used to record the action, saved with the same filename.
I save mine with the same filenames to make script access easy, you don't have to do it that way.
Playing the action
Now it's time to boogie. If it seems like we've done a lot of work to save two files, it's about to all be worth it. The 'automate' tools are under the File menu. Find them there and choose 'batch'. Select the action set and action that you recorded and saved earlier. This is the action that will be applied. Next, you must choose the files upon which to perform the action. Options are 'Folder', 'Import' and 'Opened Files'. You can either select your images folder, or open all of the files you wish to thumbnail and choose 'opened files'. Click 'Override Action Open' commands only if you included opening the image as part of your recorded action. Select a destination folder. Clicking 'override action save in' will override the recorded command to save the file in your action, but we never saved the file in our action - we exported a .jpg for the web. This is a critical difference even though the effect is the same. I choose a folder in this dialog and leave everything else blank.
Before we click OK and play the action, let's go back a little bit. See in the
'actions' palette the little boxes to the left of each command recorded in your action? (You may have to toggle expansion of the commands list by clicking the action name.) If the box is checked, as the action plays through each iteration, you will be presented with the dialog box for that command and asked to confirm its values. This can be helpful if you want to apply precise, specific settings to any one of the commands issued (like fine tuning of .jpg compression settings). This option can be a pain if you want to get up and make coffee as all of your thumbnails are created. Weigh the benefits/cost and decide what can be generically applied and when. For some purposes, ballpark .jpg compression settings are often good enough, and if I want such specific control over my final images I can turn on the option to see the dialog box for that command and apply those settings individually.When you click 'OK', the magic happens. If you have a lot of images, you'll be amazed as you sit idly at your monitor, watching image after image open, sharpen, resize, save for web, sharpen, resize, save for web, close ... over and over again. This is called 'working smart'. :)
Where to go from here
This article was meant as an introduction to some concepts in Photoshop and not as an exhaustive summary of the features mentioned. My intent was to give beginner Photoshop users awareness of some of its capabilities so that they can go on to explore other applications and grow in their command of the tool. That's all. Photoshop is a huge application and a complex system. You will not teach yourself how to use every feature it has. Dig deeper, explore and learn how to apply this amazing set of tools to your own needs.
