Web Design with HTML and CSS

106

Saving as a PNG

Web Design with HTML and CSS Digital Classroom

8 Using the Gradient tool, click and drag from the right side of the image to the left, and

release the mouse when you reach the y in the word Healthy.

Click and drag with the Gradient tool across the image area.

By creating a mask for the group and applying a gradient to it, you have created a gradient

mask that fades the banner layers to 0-percent opacity.

9 Choose File > Save for Web & Devices. When the Save for Web & Devices window

appears, choose PNG-24 from the Preset drop-down menu. PNG-24 supports varying

levels of transparency in the image.

Select PNG-24 to use the fade to transparency feature.

10 Click the Preview button at the bottom of the Save for Web & Devices window to see a

preview of your PNG fi le in a browser.

11 Once you have previewed your image, close the browser window and return to the Save

for Web & Devices window.

12 Click Save. In the dialog box that appears, browse to the web05lessons folder, name the

fi le we b0506_banner.png, and click Save. Choose File > Close to close the fi le.