Photoshop Tip of the Week (11/20/00)

The Photoshop Tip of the Week for the Clients and Friends of Ben Willmore (www.digitalmastery.com):

This week we're going to concentrate on web graphics. I find that a lot of images on the web have been saved with less than ideal compression settings (too slow, too blurry, etc.). I'll share with you some techniques for salvaging these images and then Iíll throw in some random techniques until my finger gets sore from typing. In general, the JPEG format should be used for photographs, and the GIF format should be used for graphics. If you need to convert a photograph that has been saved as a GIF file, and contains a lot of dithering (dithering=random specks), then the file is 4-5 times the size it would be if it was saved in the correct format. To solve the problem, convert the image from Indexed Color Mode to RGB mode, then choose Image>Image Size, turn on the Resample checkbox and reduce the size of the image to 80%. If the dithering is still visible, then choose>Filter> Noise>Despeckle. This should get rid of the dithered look and smooth out the image overall. If you need the image to appear sharper, choose Image>Adjust> Levels and move the upper left triangle over until the dark areas look good. Finally, resave the image in the JPEG file format.

If you need to salvage an image that has been saved using high compression JPEG settings, try this: Open the image in Photoshop and then choose Filter>Blur> Smart Blur. Set the Threshold to 100 and then change the blur setting until the preview image looks smooth. Then lower the Threshold all the way down to .1, and slowly increase it until the compression artifacts have been lessened. An alternative technique would be to choose Filter>Noise>Median, using the lowest setting available, then choose Edit>Fade (Filter>Fade in Photoshop 5) and lower the opacity setting until the image retains enough detail.

Use minimal sharpening when saving an image in the JPEG file format. The more sharpening you apply, the larger the file will get. In fact, you can blur an image to dramatically reduce its file size. So, why not select the unimportant areas of your image (like the background) and blur those areas slightly?

In Photoshop 6.0, you can make a selection of an important area of your image, choose Select>Feather to soften the edge of the selection and then use that selection when compressing your image. Here's how it works: Once you've made a selection, choose Select>Save Selection and give it a memorable name. Now choose File>Save for Web and then choose the file format you desire (GIF or JPEG). Next, look for a small symbol that looks like a dotted circle inside a rectangle. You'll find that only on certain options, but when you click it, you will be presented with a special dialog box that allows you to use different optimization settings on different parts of your image, all based on the selection you saved.

When creating gradients to use on the web, turn off the Noise checkbox in the Options palette, it will make your file size larger.

If you need to show a screen shot on a web page, you'll often need to scale it down so it doesn't dominate your web page. You can find many screen shot utilities at www.shareware.com. To scale the image, choose Image>Image Size, make sure the Resample checkbox is turned on and then change the width of the image at the top of the dialog box. After scaling the image, be sure to choose Image>Adjust>Levels and move the upper left and center sliders until the text in the dialog box is dark enough to be readable.

Have a great Thanksgiving!

-Ben Willmore
Founder, Digital Mastery