CREATING GRAPHICS FOR THE WEB

The best rule of thumb is to use the GIF file format for Web graphics that are composed of less that 256 colors and contain large areas of uniform color (such as logos, cartoons, simple art work, line art, graphs, and charts). Use the JPEG file format for Web graphics that are composed of textures and gradations of many colors and hues (such as three dimensional and beveled objects and scanned photographs).

Why? Because the GIF graphic file format only supports 256 colors whereas JPEG supports millions, but more importantly, JPEG supports millions of color gradations. A blue sky, for example, is composed of millions of gradations of the color blue. Each gradation counts as one color. If your scanned photograph of this blue sky contains more than 256 shades of blue, some of these shades of blue will have to be eliminated when you convert the graphic to GIF format. Reducing colors in this fashion causes unsightly banding. In addition, you can greatly reduce the file size of some Web graphics by using the JPEG format's built in compression.

The downside, however, with using the JPEG format is that JPEGs cannot be interlaced or transparent. Also, if your Web graphic has a large area of solid color that is not one of the Web safe colors, the JPEG format may create an unsightly dither pattern. Dithering appears as a pattern of tiny dots.

A word or two about scanning... When creating graphics for the Web, it is always best to scan image in at 300 dpi with as many colors as your scanner supports in RGB mode. Then, reduce the resolution to 72 dpi and reduce colors by converting from RGB to Indexed Color in Photoshop (for GIF graphics, not JPEGs) where you have more control over which colors are cut. Never scan at 256 colors.

GIF

Before you can save any graphic as a GIF, you must first convert it from RGB Color to Indexed Color. When you do this, you are reducing colors from thousands or millions to a color palette of only 256 colors. This creates a graphic with a small file size, and when it comes creating Web graphics, that's the name of the game. The challenge, of course, is maintaining image quality while reducing file size.

To convert to Indexed Color: From the Image menu, select Mode and in the dropdown menu, select Indexed Color. (In addition, when you want to edit a GIF — apply type, paint, etc. — you should convert the GIF from Indexed Color to RGB Color Mode, make your changes, and then convert back to Indexed Color. Otherwise, you may end up with jagged type and edges.) The Indexed Color dialog box will appear:

When you convert an image to Indexed Color, you have a choice of 8 different color palettes to choose from:

• Exact: If your graphic is only composed of 256 colors or less, then you can select this option and Photoshop will create a palette using only those colors. If your graphic has more than 256 colors, this option will be grayed out.
• System (Windows): Uses a Window's 8-bit color palette.
• System (Macintosh): Uses a Macintosh's 8-bit color palette.
• Web: Uses an 8-bit Web safe color palette — the palette used by Web browsers. Use this palette when creating GIF graphics for the Web that are primarily made up of solid (continuous — no shading) colors to prevent dithering (unsightly array of dots).
• Uniform: Creates a palette by sampling colors.
• Adaptive: Creates a palette by sampling colors that appear most often. This is the best palette to use if the graphic you want to convert is made up of more than 256 colors.
• Custom: Allows you to use your own custom palette

When creating graphics for the Web, I always use the Exact palette, if possible, and if not, the Adaptive palette for images with gradations of color (graphics with lots of shading used for things like beveled buttons, etc.). However, in most cases, for these type of graphics, I use the JPEG format rather than GIF whenever possible (i.e. when I don't need transparency). I use the Web palette for graphics that are predominantly made up of solid colors only (cartoons, logos, clipart, etc.), and quite frankly, in all instances where the Web palette does NOT turn the GIF into a complete piece of crap. I always keep dithering off.

Once you convert to Indexed Color, you are ready to save your graphic as a GIF. There are two ways to do this in Photoshop 5 — the wrong way and the right way. The wrong way is to save it as a Compuserve GIF in the Save or Save As dialog box drop-down menu. The right way is to Export it as a Gif89a Export.

To save as Gif89a Export: Under the File menu, scroll down to Export, and in the pop-up menu that appears, select Gif89a Export. The GIF89a Export module makes smaller GIFs (i.e. smaller in file size) and also allows you to make the GIFs transparent and interlaced.

When you select Export to GIF89a, the GIF89a Export dialog box appears:

Click the Interlaced box to create GIFs that appear gradually as they are downloaded to a Web browser. To make a GIF transparent (i.e. get rid of the background), click on the eyedropper icon and then click anyplace on the thumbnail of the image in the dialog box where you want transparency. That area will turn gray.

Click OK, name your new GIF, and save it. Note that when you export to Gif89a, you are creating an entirely new graphic. The graphic that you exported the new GIF from remains on your screen, and this is NOT the exported GIF you have just created. To view the exported GIF you have just created, you must open it. (In other words, Export does not work the same way as Save As).

When creating graphics for the Web from scratch in Photoshop, work in RGB mode and convert to Indexed Color as a last step. Use the Web Safe Color Palette that comes in the Goodies folder with Photoshop 5. To load this palette, make sure the Swatches palette is showing (if not, select Show Swatches from the Window menu). Click on the little triangle on the top right corner of the Swatches palette. A pop-up menu will appear. Select Replace Swatches, and in the dialog box that appears, navigate to the Goodies folder, select Color Palettes, and inside Color Palettes, select Web Safe Colors. Web Safe Colors will not dither when the graphic is viewed in a Web browser so you should get into the habit of picking your colors from this Swatches palette rather than using the Color Picker.

JPEG

Unlike the GIF graphic file format, which only supports 256 colors, JPEG supports millions of colors and allows for graphic compression. Most people use JPEG for Web graphics that contain a multitude of colors and gradations—like photographic images. Thus, for JPEG images, you DO NOT have to convert to Indexed Color, but rather, keep your images in RGB Color mode.

When you first Save a graphic in JPEG format (or Save As from another file format), the JPEG Options dialog box appears:

Before you can save the graphic, you must pick the amount of compression you want to apply to the graphic. Compression makes the graphic file size (in kilobytes or megabytes) smaller but too much compression can also degrade the quality of the graphic and result in unsightly banding. Your best bet is to save your original graphic in TIFF or Photoshop format, and then Save As to JPEG format with different amounts of compression, and compare and contrast image quality, as well as file size.

At the bottom of the JPEG Options dialog box, you have the option of selecting from one of three formats:

• Baseline ("Standard") is the format recognizable by most Web Browsers and as such, the format you should use.
• Baseline Optimized JPEG format produces better color and a somewhat smaller file size but is not supported by all Web browsers.
• Progressive format creates JPEGs that display gradually as they are downloaded to the Web browser, much like interlaced GIFs. Progressive JPEGs are larger in file size and are not supported by all Web browsers.

It is important to note that saving a graphic to JPEG format with compression should be a last step. Compression effects are cumulative. If, for example, you save a graphic in JPEG format with a compression of 7, and later decide that you want to save it with a compression of 3, DON'T recompress the graphic that already has a compression of 7. Go back to your original, and save it with a compression of 3. Otherwise, your image will suffer the consequences. JPEG format has a "lossy" compression scheme. That means that every time you compress, you are tossing away data (photographic detail) that you can't get back.