Creating Transparent Images for the Web! Creating a Transparency from an Existing Image

Here you'll learn to make a simple existing image into a GIF transparency for the web. In this first exercise, the image has a relatively plain background. A second exercise will be available with added information to help when a more complex background is present. Here is the finished product of this exercise: A major requirement for creating a transparency is to make your image's background one solid color in order to set it up as transparent. (NOTE: The "transparent" background option you have in the 16m color .psp format is NOT the one that works on the web!) **Always begin working on an image by making a COPY of the original and working on this COPY. This way you always have your original available in case of mistakes, accidental deletions, etc.** Use your selection tool to select the background completely so you can fill it with one solid color -- NOT a color that is in your actual image, if possible. Best is to make it a color that's close to the color of the page you'll be using it on. And a browser safe color is best of all because it won't dither (mix colors) when you reduce the image to 256 colors. If you have a question about browser safe colors, please go to my explanation on my Color page. (As of May 1999, I only have a few tutorials up so far; the Home Button and all colored links are active.) Two things that will help in selecting the background: 1. In the case where your image touches the edge, and you can select only a part of the background, do this: Select part of the background. Now, HOLDING the SHIFT KEY down, select each of the other bits of background until you've got them all. This process adds each section so that when you're done, all of the background is selected at the same time, and now you can go ahead and do what you want with it (fill it with one color). 2. If the image you're working with is a .jpg, the background is not going to be one solid color (say white) because of the artifacting effect of the jpg process. What that means is that there will be several subtle shades close to white, rather than pure white. The best way to cope with this is to raise the tolerance. After choosing the magic wand, look at your control palette. If your tolerance is set at 0, then it will only select pixels that are exactly the same color as the one you click on. Try setting the tolerance at 15. Click on your image and see if that's enough. If there are still bits of the "white" background" not selected, up the number to 20 or more. Keep experimenting with the number until the tolerance is high enough to select the background, but not so high that it picks up parts of your image. (On the control palette's other choices for the selection process, I usually leave the "match" selection at RGB. I leave antialias UNchecked, and feather at 0. These are my "default" settings, and I only change them temporarily for certain special effects.) Now fill the selected background with a solid color close to what you'll have on your page. If your image is in 16m colors, go to Colors: Reduce: and reduce to 256 colors. A. Make sure your background color (the one you just filled in and DON'T want your viewer to see!) is selected in the color palette's background box (bottom of the two connected ones). B. Go to Colors: Set Palette Transparency. Select "Set the transparency value to the current background color." C. Click OK. Save (this is very important!) as a .gif . After you select Compuserv .gif in the file type choices, go to the Options button and make sure you have Version 89A checked. This is the ONLY widely recognized format that can be viewed as transparent on the web. (I would also recommend you make sure "Noninterlaced" is checked, too, for smaller file size.) I leave my .gif options on these settings all of the time. You now have a transparent image! You can make sure by going to Colors: View Palette Transparency. When you check this option, you should some version of the checkerboard background around your "BACK." You can uncheck this option to see it again without transparency. (Voice of experience: DON'T hit "undo" to remove the "view transparency." It doesn't undo that...it undoes the actual transparency step!) If you ever open the image up again to make any changes, or hit undo, or even if you just open it and hit "save" instead of just closing it, you'll need to go back and redo steps A B C again. That always has to be the very last thing you do before saving. ***** If you have comments, questions, or would like further information, please sign my guestbook or contact me at my e-mail address. Thanks!

5acreart@usa.net

All original graphics on this site
Copyright 1999
by Diane at
Five Acre Graphics