Task 4 How to Build GIF Files for the Web

GIF files are efficient, compact files perfect for use on the Web. As you see in the tasks that follow, GIF files allow you to build in transparency and animation while keeping the file size small. GIF files do not handle photographic images well, however. If you want your photographic images to maintain detail, consider the JPEG file format.

1. Open and Save File in Photoshop

   Open the file you want to convert to GIF format. Choose File, Save for Web. The Save For Web dialog box opens, and Photoshop creates a duplicate image, leaving the original image untouched.

   

2. Select Optimized File Format

   From the first drop-down menu in the dialog box, select GIF. Leave the next two options set at Selective and Diffusion (these options refer to the color conversion and dither patterns).

   

3. Set Lossy and Dither Sliders

   Set the Lossy and Dither sliders. Start by setting Lossy at 100 and Dither at 0. To reduce the file size, keep the Dither value as low as possible and the Lossy value as high as possible. The image is updated to reflect the changes you make. Watch the image changes to help make a final decision when it comes to applying the various settings.

   

4. Preview Your Settings

   Click the Optimized tab to preview the file compression results based on your settings. If the image is too grainy, lower the Lossy slider. If it appears solarized and graphic, raise the Dither value.

   

5. Set the Number of Colors

   Your next goal is to create a GIF file with as few colors as possible. Shoot for 32 or 64 (some graphics files can use as few as 8 or even 4 colors without compromising the image much). Click and hold the Colors drop-down list and select the number of colors. (Alternatively, highlight the number in this field and type the desired value.)

   

6. Save the File

   Click OK to close the Save For Web dialog box. The Save Optimized As dialog box opens. Verify the name and location of the file and click Save to save the file.

   

How-To Hints

Using 2-Up or 4-Up Comparison Tables

If you're unclear about multiple compression settings, click the 2-Up and 4-Up tabs in the Save For Web dialog box. These tabs enable you to compare options side by side.

Previewing in Browsers

If you're unsure about how an image will look in a given browser, use the browser preview feature. While still in the Save For Web dialog box, you can either click the Browser Preview button or use the Select Browser menu to select the desired target browser. Both the button and the menu are at the bottom of the dialog box (in these examples, the button shows the Internet Explorer icon; access the menu by clicking the arrow next to this button).