Date: 01/16/10; Version 13
Adobe Photoshop is an incredible program. It's the tool of choice for many different kinds of image creation. Preparing pictures for the web is just one of its many functions, and for that purpose, most of its hundreds of controls won't help, but will in fact make your picture look worse. To make your picture look better, you need only a few of Photoshop's capabilities.
Here is the path through Photoshop that I follow when putting pictures on the Web, starting from either a scanned image or a digital camera picture. I am sure there are many more things I could do, if I understood Photoshop better, but this procedure is what I have learned so far, by trial and error.
(I use Adobe Photoshop CS3 but these notes apply to earlier versions too.)
(If you're a Linux user, you can adapt these instructions to The Gimp. But I like the real Photoshop a lot better.)
The Photoshop manual has lots of information on scanning and color management. I won't repeat it or try to summarize it here. RTFM.
I have used several different ways of getting my pictures into the computer.
Scanning. It used to be conventional wisdom to scan at twice the target DPI, so 144 DPI given that web display is nominally 72 DPI. Scanner drivers have improved a lot since then, and scanning at 72 DPI is now OK if you are going to shrink the scanned picture. (The basic idea is that you don't want to try to make more pixels in Photoshop than you got from your input source.) Some scanner drivers have built-in sharpening and color correction: again, it used to be best to turn these off and use Photoshop's more sophisticated features, but now drivers have improved and these features may be acceptable. Experiment if you can; otherwise, scan at higher resolution and you can shrink things later. You can scan prictures, slides, or negatives. Good scanners are not expensive.
Scanning services. You send film, or slides, or negatives, or prints to these services, and they scan them. You can then download the images, or order copies on CDs. I have used several of these services. ScanCafe scanned hundreds of old slides for me at a good price: took about 6 weeks.
Digital camera. A digital camera produces picture files you can load onto your computer without a scanning step. Cameras vary widely in optical quality and features. One factor in choosing a camera is the number of pixels, but there are many others. I can't go into all the factors: do some research. Modern digital cameras do significant adjustment and processing onboard, and may make some kinds of Photoshop adjustment unnecessary. The camera I use (Nikon) produces a pre-sharpened JPG file with more pixels than I need for web pictures, so I read it into Photoshop and adjust the size. Phone cameras can take decent pictures too.
In order to prepare your pictures for web use, you need to make some decisions about who's going to look at the pictures. The variables are
Average user's bandwidth (line speed). Are your web pages intended mostly for people who use high-speed connections?
User patience and interest in your page.
Decide what image size (in pixels) you want before you start, based on your page design. You may wish to have a small version, or thumbnail image, that the user can click to see a larger image.
Also decide what file size you want your picture to take up. The size of a picture not only uses up disk storage on your web server account, but also consumes download time. There's a tradeoff between picture size, picture quality, and load time: if your page loads too slowly, viewers will leave without looking. My rule of thumb is that a picture that's the only thing on a page can be up to 75 or 80K, but small inline pictures should be much smaller. Aim for 20K or less. There are tools on the web that will test a page's loading speed: try them out.
Storage format is the fourth variable in the tradeoff. JPG compresses photographs better than GIF, so I use it for most photographs.
Here are the steps I use:
Read the picture in. The way you do this depends on your source. Get your image into RGB mode.
Straighten. I often have trouble keeping the horizon level. There's a trick with the Photoshop ruler tool: use it to draw a horizontal line from left to right, or a vertical line from bottom to top, along a line in the picture you want horizontal or vertical. Then Choose Image/Rotate/Arbitrary. The box will come up with the rotation angle necessary to make your line level.
Crop. If you rotated your picture, you have to crop it. You may still want to for composition.
Adjust levels: many other controls actually do some part of what the Levels control does. e.g. the Contrast and Hue controls, as far as I can tell, adjust certain levels. Anyway, this is the most important control for making your picture look good.
Image/Adjust/Auto Contrast. Try this first. Usually it improves the picture noticeably.
Image/Adjust/Auto Levels. Try this next. Sometimes it helps, sometimes it makes the picture worse, or shifts colors. Undo if you don't like it.
Manual Levels adjustments. Many pictures benefit from bringing up the Image/Adjust/Levels control and moving the center triangle under the histogram to the left a little: this lightens the picture and makes shadow detail visible.
pictures often look darker in the browser than in Photoshop, and adjusting this knob a little brighter than you think you need to may help. Sometimes, moving the righthand triangle to the left will increase contrast and make the picture crisper. Occasionally, you'll want to operate on individual colors separately instead of working on RGB.
Pictures are darker on the PC than on the Mac. This is because the default gamma is different on the two platforms. Since some users look at my pages from a PC, I choose a setting that looks better on the PC, and let the Mac images be a little light.
Other editing. If you want to remove an unwanted wire, blemish, or background from your picture, using the many tools Photoshop provides, do this now. The Clone tool is especially useful here.
Size the picture. Use Image/Adjust/Image Size to resize your picture. Tell it to resample and constrain proportions. I assume you are working with more pixels than you need. Resizing smaller will discard pixels and resample, and Photoshop is far better at this than other picture manipulation tools. You want to have done your Levels work before you do this, so that resampling will have an easier job. (Don't try to take a little picture and resize it bigger.)
Sharpen or Unsharp Mask. After you resize, you will want to sharpen the picture. Filter/Sharpen/Unsharp Mask is what the experts use. Percentage should probably be between 50 and 100 for Web page use. Too much and you get white halos around every edge. Sometimes, the Sharpen control does almost the same thing as Unsharp Mask, especially if your scanner or camera did some sharpening already.
Save for Web. I save my pictures as JPGs, usually 30 quality. Photoshop's Save For Web control lets you experiment with various modes and parameters of saving and shows what the size and final appearance will be. Some pictures need higher quality to avoid funny JPG artifacts in large flat areas like sky. Other pictures look just the same at quality 3 as they do at 30, and take much less storage.
Check Your Work. Until you've done a bunch of picture conversions, it's important to check your results on both PC and Mac, using various screen resolutions and browsers, on LCD and regular video screens, using a dialup line. Sometimes what looked great in Photoshop doesn't look so good in a browser: sometimes when you load your page from the server, you find that it takes too long.
I make my standard pattern into two macros, one for landscape pictures and one for portrait, and invoke the macro after rotating and cropping. If I like the result, I'm done. If not, I go back to Open in the history window, and do the steps one at a time, inserting variations and experimenting.
The Image/Adjust/Curves control has rescued some pictures that wouldn't come right with Levels alone. Anything you can do in Levels, you can do in Curves, plus a whole lot more. Here is what I know so far:
To bring out detail in the middle tones of a picture, lightening the whole picture at the expense of some detail in the highlights and shadows, pull the center of the curve up and to the left, making the curve into a concave-downward shape. This is often good for snapshots and flash pictures.
To increase the contrast in a picture, making the light areas lighter and the darks darker, make the curve take an s-shape by pinning the center and then pulling the upper half up. I use this to make shapes and patterns more dramatic.
Use the tool very cautiously.. a little motion has a big effect.
Some pictures scanned from film look washed out and are improved by increasing the color saturation a little.
You can select just part of your image and apply different corrections to individual parts. One of the Photoshop advice sites cautions that this may produce pictures that look unnatural: human perception is quite sensitive to mismatches between parts of a picture that should have the same illumination.
This tool brings up multiple thumbnails and shows what happens if you put more or less of a color into the highlights, shadows, and midtones of a picture. I suspect that it doesn't do anything that you can't do with the Curves control.
The Filter/Distort/Lens Correction filter in CS3 has a quick way to rotate pictures, and to cure various kinds of distortion.
For scanned pictures, sometimes it helps to use the Filter/Noise/Despeckle filter before sharpening. Most other filters besides the sharpening filters will make the picture look interesting, and worse than the original.
Channels and layer masking are a mystery to me. I've never found a way to use them to improve a picture. Easy to make a picture look worse though, in many different ways.
I used to use Photoshop to make thumbnail images of pictures for web galleries. I switched to ImageMagick, a powerful package that contains many useful picture whacking tools: in particular, it provides the "convert" command, which I use as follows:
convert -geometry 60 blah.jpg ../thumbs/blah.jpg
for a landscape-orientation picture. "60" is the size in pixels of the longest dimension. For a portrait-orientation picture, use "x60".
Some users run with images disabled or are unable to see pictures. It is a courtesy to these users to provide enough text that they can at least navigate your page, and if the photographs are not the primary message themselves, to use ALT tags and descriptive text to allow them to get your message.
There's plenty of information on the Web about this subject. Use a search engine to look for it.
Vincent Flanders has a useful list of links to information about graphics on his Web Pages that Suck.
Copyright (c) 1995-2011 by Tom Van Vleck.