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