Web Design with HTML and CSS

Saving images as GIFs

Lesson 5, Graphics, Color, and Transparency 95

4 Click the White background. The Background layer converts to Layer 0 and the

background becomes transparent.

5 Choose File > Save as, and in the dialog box that appears, navigate to the web05lessons
folder. Name the fi le web0504_work, and keep it in the Photoshop .psd format. Click
Save. Keep the fi le open for the next part of this lesson.

Optimizing the GIF image.

In the following steps, you will determine the best settings for optimizing your GIF image.

You will use a color table to aff ect the appearance of the fi nal optimized image.

1 With the web0504_work image still open, choose Image > Image Size. In the Image

Size dialog box, change the Width to 200 pixels and click OK.

2 Your image might appear smaller on the screen than it actually is. Double-click the

Zoom tool ( ) to view your image at 100 percent.

3 Choose File > Save for Web & Devices. The Save for Web & Devices window appears.

4 Choose GIF 64 No Dither from the Preset drop-down menu, and check the Transparency
check box. Notice in the GIF preview that the image size is now about 10K.

Select a GIF preset.