Web Design with HTML and CSS

Using the color table

Lesson 5, Graphics, Color, and Transparency 101

3 Test your image by clicking the Preview button at the bottom of the Save for Web &

Devices window. The preview window matches the matting color you selected so you

can see the image in the same background color in the browser.

4 Once you are done previewing your fi le, close the browser, return to the Save for Web

& Devices window, and click Save. In the Save As dialog box, browse to locate the

web05lessons folder. Name the fi le web0504_optimized.gif, and then click Save.

5 Choose File > Close to close the web0504_work fi le.

Animating a GIF

Where appropriate, animated GIFs add interest to a web page. In the following steps, you will

create an animated GIF.

1 In Adobe Photoshop, choose File > Open. In the Open dialog box, locate the image

named web0505.psd in the web05lessons folder. The original image fi le for the last image

you worked on is now open.

2 Choose Window > Animation to open the Animation window. If you are using

Photoshop Extended, the Animation (Timeline) panel appears. Click the convert to

frame icon in the lower-right corner. The Animation panel changes to Frames mode.

The Animation panel in the Timeline mode.

The Animation panel in the Frames mode.

In Photoshop, frames are like a fl ip book. Each frame appears for the amount of time you

specify, creating a simple animation.