Saturate Your Graphics

Share |

Use the color level controls in your graphics program to make graphics more attractive and effective. Often, you can increase the intensity of colors with only a small change in file size. A small company logo with rich, saturated color can be just as compelling as a larger one with so-so colors and a larger file size.

Richer, More Vivid Color

When you saturate a color, you're making the color richer and more vivid. It's like a applying a fresh coat of lipstick because the previous application is looking a little faded and blah. When you desaturate a color, you're stripping the colors out of it. Experiment with both techniques to find the best combination for your Web site.

You may have problems working with primary colors that are already very bright. Those colors already contain a majority of one color, so you the result you get after saturating the graphic may not be what you expect! Always work on a copy of your graphic, not the original.

Saturation Effects

Compare the logos below for an imaginary cafe/bookshop. The top image is a logo designed in Photoshop using a clip-art image with some text added. The other two images are copies of the first, but with different levels of saturation applied.

Original
File Size:9k

The logo is easy-to-read, but not very colorful.

Slightly Saturated
File Size:10k

The logo is brighter and more colorful, but the file size is slightly larger.

Completely Saturated
File Size:11k

The logo is more garish, with ragged edges and much less definition in the text.

Although saturation does affect your file size slightly, you can often offset that effect by making the graphic's display size smaller. Since the colors are more intense after saturation, you don't need to use a large picture to create the same visual impact.

But remember that some HTML editors let you change a graphic's display size, but the actual file size doesn't change. Avoid this pitfall by using a graphics package to modify image size.

Create Black And White Images

You can also use the Saturation effect to strip color out of your graphics. That's called Desaturation in some graphics programs. Many Web designers create compelling Web sites with a combination of gray scale and color graphics. This is also helpful if you're planning to export the graphic for use on company letterhead or other uses that don't require color.

Desaturated
File Size:8k

Note that desaturation doesn't work well at all with this particular design because you lose almost all the picture details. A logo that looks great on your Web page may look awful in print. Remember: if you're paying for printing, many different colors will increase the cost of your letterhead or brochures. Just to be sure, use the Desaturation function on a copy of your logo to check how it will look in black in white.

Check Your Graphics Package

Exactly how you modify color in your graphics depends on the type of graphics package you're using. Adobe Photoshop, Microsoft Image Composer, and Paint Shop Pro all support the Saturate and Desaturate effects. Search on the Help section of your favorite package for details, but be sure you're searching under the correct terms. Try HSB (Hue, Saturation, Brightness) or HSL (Hue, Saturation, Luminance) if you can't find instructions under Saturate.

Be careful when you start changing graphics files. Never work on your original! Instead, make several copies and change them so you can easily compare effects. Keep your file size in mind too. Saturation will increase the size of your graphics files - but not by much if you're careful.

After you've worked with your new graphics files, optimize them with GIFBot, NetMechanic's free graphics optimization tool. Use GIFBot to decrease the size of your graphics files without sacrificing the quality of the graphics.