Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
search engine submission service.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


search engine listing.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

Design Tip:
Saturate Your Graphics

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

     
  
July 2001
Vol. 4, No. 13
 • Promotion Tip
 • Design Tip
 • Beginner Tip
  

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
Original image before saturation applied. The logo is easy-to-read, but not very colorful.
Slightly Saturated
File Size:10k
Slighted saturated image with more vivid color. The logo is brighter and more colorful, but the file size is slightly larger.
Completely Saturated
File Size:11k
Completely saturated example image. 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
Completely desaturated image.

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.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.