Creating Transparent Images for the Web! Creating a New Transparent Text Image

Here we will create a simple transparent button with text on it. This will give you a shaped image (text, in this example) on your page with no background color around it. Here is my finished product: 1. Make a new 16+ million color image a little larger you'll want the final version to be. 2. Fill the background with a solid color close to what you'll have on your web page. (NOTE: The "transparent" background option you have in the psp format is NOT the one that works on the web!) 3. Write the text (I will use "Diane") using whatever font you like. Make sure the foreground color box is filled with the color you want the text to be. 4. Add drop shadow if you want. I suggest you do NOT use any "blur" on this because the transparencies work best with clearly defined edges. 5. Go to Colors: Reduce: and reduce to 256 colors. 6. Right-click to de-select the text. 7. Make sure your background color is a little different from any of the colors you're using in your text image. (Because any place it's found in the image will become transparent!) 8. Make sure your background color (the one you DON'T want your viewer to see!) is selected in the color palette's background box (bottom of the two connected ones). 9. Go to Colors: Set Palette Transparency. Select "Set the transparency value to the current background color." 10. Click OK. 11. 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 almost 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 text image. You can uncheck this "View Palette" option to see the image 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 8 - 10 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