Transparency and Matting

Transparency and Matting

No matter the shape of an image inside the graphic, the actual document will always be some form of a rectangle—this is where transparency comes in. Transparency allows you to make colors invisible so they are not seen in the browser. This gives the illusion that you have a nonrectangular image on a page (see Figure 6-1).

1.	Create a new document and select Transparent background (see Figure 6-2). Figure 6-2. The New document window with Transparent background selected.
2.	Make the new document 2 inches x 2 inches.
3.	Using the Elliptical Marquee, create a yellow circle (see Figure 6-3). Figure 6-3. A yellow circle on a transparent background.
4.	When you save this document as a GIF, the background will not automatically disappear. It will be surrounded by a white background.
5.	Let's get rid of the white background so we can drop this image on top of a colored background. We want it to look just like a yellow circle on a lime green browser background.
6.	From the top menu bar select File>Save For Web.
7.	Select GIF from the styles menu on the right.
8.	Notice that the transparency is missing in the main image (see Figure 6-4). Figure 6-4. GIF options automatically add a white background to a transparent background.
9.	Click on the Transparency option. You'll notice that the white background will disappear (see Figure 6-5). Figure 6-5. Clicking Transparency removes the white background.
10.	If you zoom up on the image you will see a white “halo” around the yellow circle.
11.	Let's get rid of that. Click on the color swatch on the left side of the dialog box.
12.	It will bring up the Color Picker.
13.	Click the Only Web Colors check box in the bottom left (see Figure 6-6). Figure 6-6. Select Only Web Colors from the dialog box
14.	Click on a lime green color.
15.	Go to the right side of the dialog box and select Eyedropper color from the Matte option (see Figure 6-7). Figure 6-7. Selecting Eyedropper Color from the Matte options.
16.	Zoom in on the image and you'll see a lime green halo around the yellow circle (see Figure 6-8). Figure 6-8. Now you have a halo the color of the page the yellow circle will be on.
17.	Click OK.
18.	Now you can drop this image on an HTML page with the same color background as the halo on the yellow circle.