Task 2 How to Build GIF Files for the Web

GIF files are efficient, compact files perfect for use on the Web. GIF files enable 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. Select File, Save for Web. The Save For Web dialog box opens, and Photoshop creates a duplicate image, leaving the original image untouched. Click the Optimized tab to preview the file compression results based on your settings.

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 to 100 and Dither to 0. To reduce the file size (displayed under the preview), keep the Dither value as low as possible and the Lossy value as high as possible. The image is up dated to reflect the changes you make. Watch the image changes to help make a final decision when it comes to applying the various settings. If the image is too grainy, lower the Lossy slider. If it appears solarized and graphic, raise the Dither value.

4. 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.)

5. Set the Image Size

You can further reduce file size by reducing the image size. You also should ensure that your image is small enough to be seen fully without any zooming (usually less than 800 pixels wide and 600 pixels in height). Click the Image Size tab and enable the Constrain Proportions check box. Enter an appropriate height and width and then click the Apply button to preview the new size.

6. Save the File

Click Save 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, 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).