"A little off the top please."

The Solution:

Here we have a transparent version of the above image.
The transparency in this version was created using the same steps outlined in Session 9. Notice the fuzzy edges here? Ugly huh? Well we're going to give this image a trim that will clean it right up.

Let's start by taking the first version of our image (no transparency) and redo the steps to prepare it for its transparent area.
First you need to make a simple text image like the one you see here.
It doesn't matter what size the image is, or what you type in the image. It also doesn't matter what colour your background is either, just so long as you do use a different colour than your text. I choose colours that had a lot of contrast to each other. That way i could really make sure i was getting rid of *all* the edges when i created my transparent area.

Your image should end up having 2 layers. One for the background, and another for the text. Once you have your image created in Photoshop, save it as a *non-flattened* .PSD file.
Now before we convert our image to Indexed Colour so we can make our transparent area, we are going to create a MASK of our image using the Channels in Photoshop.

If you've ever wondered what kind of uses the Channels could have, this is a good one.

NOTE: You can fill any selection up to about 4 or 5 times before the selected area is absolutely filled to the brim, and will not show any difference if filled further. This can be useful in making edges quite clean and sharp. But be careful too when doing this, because you may not want all your edges that sharp looking. And for transparent gifs, filling your Mask 4 or 5 times can *cut away* some of your image around the edges. Twice should be sufficient for our image here.

Ok so now we have our image ready for exporting, using the Gif89a plugin. The plugin is found under the FILE menu and within the EXPORT submenu. It's usually the top name on the list.
Before exporting though we have to SAVE our image again as a *non-flattened* .PSD file. Do that now. Then convert your image to Indexed Colour - (Image/Mode/Indexed Color). Let Photoshop flatten the image, and leave the settings for the colour palette at their defaults.
Now open the File menu and go down to the Export menu, choose the Gif89a plugin. Once it opens, take notice of the options you have for saving your image.

Here's what the dialog box looks like:


Take a look at the drop-down menu in the dialoge box. In that menu you will see the name of the Mask that we created for our image. It's default name is #2. Choose that from the list instead of the "Choose Colors" option.
Once you do choose it you'll see your image change right away. The background colour will dissappear leaving your text nice and clean, without a hint of the fuzzies! From this point, just save your image as usual. Keep in mind also that unless your image is over 10 kb in size, there is no need to check-off the "Interlace" option.
Here's what my version looks like using the Mask to create the transparent area of my image. Pretty clean huh? No fuzzies at all!

to the Top