Now that you know all about screen backgrounds, you need to learn about transparent image backgrounds. Sometimes you want to integrate an image into the design of a page rather than display it as a framed object in a gallery. If the background of the page is a solid color, you can accomplish this with PhotoShop by coloring the background of the image with the same solid color. In a page using a textured border, however, this approach no longer works.
The GIF format provides a way to deal with such situations. When you create a GIF file, you can specify that certain pixels should be treated as transparent. When displayed in a browser, the background will show through such pixels. The images below illustrate the difference between making a background white and making it transparent.
To see how this works, pick some image from which you know you can easily "Cut" the background. If you can't come up with anything else, you might want to try one of the plates I had you work with in lab 2 or the picture we took of you during that lab (if it was taken against a fairly plain background).
Open the picture you would like to work with. If it was a GIF file, change the mode from indexed color to RGB color.
Your first goal is to select the portion of the image that you don't consider the background. How you make this selection will depend on the image you chose, but here are some suggestions. Usually, the best way is to select the background and then choose "inverse" from the select menu to reverse the selection. Remember that holding down the shift key while selecting regions with the magic wand or marquee tool adds new pixels to your current selection. Also, recall that the "Grow" item in the "Selection" menu can be helpful.
Once you get the "foreground" item in the image selected, you will want to place a copy of the foreground on its own layer. To do this, choose "Copy" and then "Paste" from the "Edit" menu.
Now, click once on the "eye" icon next to the "background" layer to make the background disappear. You should now see the foreground image you selected displayed in front of a light checkerboard pattern. In the layer you are viewing, the original background has been replaced by a transparent one.
To save this version of the picture, select "GIF89a Export" from the "Export" submenu of the "File" menu. A dialog box appears giving you several options.
The "Transparency Index Color" determines the color that will be displayed as this image's background if the browser that displays it does not know how to deal with transparent pixels. It defaults to the default browser background color. Clicking on the gray square will give you access to a dialog from which you can pick an alternate default background.
The "Palette" option should be set at "Adaptive".
The "Colors" item lets you control how many distinct colors are used to store your image. For simple pictures you might want to select a number less than 255 from the menu next to this item.
Finally, checking the "Interlaced" option stores your image in a format that lets a browser display it incrementally as it arrives. If this box is checked, a rough version of the entire image will be displayed quickly and then refined to show details as additional data arrives through the network.
Once you fill in the dialog box, click "OK". Then, enter a name for your file and navigate to your lab6 folder to save it.
Add an IMG tag for this file and the original non-transparent image to the candy corn background page you created earlier to see how the transparency works out.
