Processing Images For The Web (Part 4) - Sharpening (not just for knives)
After an image has been sized to the proper dimensions, it should be sharpened. Sharpening is a process that enhances the contrast between light and dark areas of an image. Ironically sharpening is done in Photoshop through a filter called Unsharp Mask. Starting with Photoshop CS3 there is also the Smart Sharpen filter which provides more options for the sharpening process.
For this article I’ll use Unsharp Mask. The first step is to view your image at 100% magnification. You can select the View menu and then Actual Pixels. Then scroll the image around until you can see a good location to evaluate your sharpening settings. You will not be able to properly review the results of sharpening unless you are viewing the image at full size (actual pixels).
Now select the Filter menu, then Sharpen, then Unsharp Mask.
Adobe Photoshop CS3 Unsharp Mask Dialog
For a good explanation of why it is called Unsharp Mask, see the Wikipedia article on Unsharp Mask. The article also explains the three sliders: Amount, Radius and Threshold.
Each image is going to be different, and an image sized for the web will not require much in terms of Amount and Radius. The Amount slider changes how much sharpening is applied. The Radius slider changes how wide the sharpening effect becomes. Increase the Threshold slider to make sharpening work on the areas of the image where contrast is greatest.
Start by having Amount around 50 and Radius around .3, and Threshold at zero. Use the Preview checkbox to see what happens before and after the change. Then adjust Amount way up to 200 and run the Preview checkbox a few times. The change in the image is very pronounced. I call this popping. You want the image to pop a little, but not too much. Play around with the Amount and Radius until it pops how you like. Of course this is subjective, so do what works for you.
Conclusion
Determine what size you want your image. Size it for that specific use. Sharpen it appropriately. Create an IMG tag that works for that image.
Processing Images For The Web (Part 1) - Introduction
Processing Images For The Web (Part 2) - The IMG Is Everything
Processing Images For The Web (Part 3) - Proper Resizing
