40 Chapter 3 – Web Design Principles for Print DesignersGraphics on the Web
Web Design in a Nutshell, eMatter EditionWeb Graphics Production Tips
The following is a collection of tips for maintaining quality in web graphics.Work in RGB modeWhen you are creating graphics for the Web, it is important to work in the RGB
color mode. Because graphics are converted to indexed color mode when saved
in the GIF format, you’ll often need to make corrections to indexed color images.
If you only need to crop an image or make an adjustment that doesn’t require the
addition of new colors (such as changing a pixel color to another color in the
existing palette), you can work directly in indexed color mode. However, if your
changes include resizing, or the addition of new or anti-aliased colors, it is impor-
tant to convert indexed color images back to RGB before making any changes to
the image.
When an image is in indexed color mode, the colors are restricted to those in its
defined Color Table and no new colors can be added. This prevents the color
blends and adjustments that occur when image elements are transformed (resized,
rotated, etc.) or when adding anti-aliased text. When the image is in indexed color
mode, any text you add will automatically have aliased (stair-stepped) edges.
The typical steps that should be taken when editing an image are:- Open the GIF in the image editing tool.
- Change it to RGB color mode (in Photoshop, select ImageÝModeÝRGB
Color). - Edit the image as necessary.
- Change it back to indexed color mode, setting the desired palette and bit-
depth. - Save or export to GIF format.
Resizing tipsThe following tips pertain to resizing web graphics:
Convert to RGB Before Resizing
As mentioned earlier, in order to resize an image, Photoshop (or any bitmap
image editing tool) needs to create new transitions between areas of color in
the image. Indexed color images (such as GIFs) are limited to the colors in
the image’s color table, which does not give Photoshop enough colors to
create convincing “in-between” colors for these transitions.
Don’t Resize Larger
As a general rule, it is a bad idea to increase the dimensions of a low-resolu-
tion image (such as 72ppi images typically used on the Web). Image editing
tools cannot add image information to the file—they can only stretch out
what’s already there. This results in a pixelated and blotchy image.