What happened? Let's go back to the Save for Web dialog box again and examine the options. You will notice that when you click on Transparent, there is also an option to the right that says Matte. The Matte is the color against which the edges of the transparent GIF will blend. The default for this in Photoshop is white, which accounts for the white "fringe" when the image is placed against a dark background. So, when you are going to be placing your image against a white or light colored background, the white Matte option works fine. When you will be placing it against a dark background though, this does not work too well.
Let's go back to the original image and select File - Save for Web again. This time, instead of leaving the Matte color at the default white, select Black.
In the preview, the GIF looks rather bad. But when placed against a black background as in the table below, it looks just right. Against a white/pale background as in the right side cell, you see the black "fringe".
Other Matte options
What other options are there for Matte colors? You will see None, white, black, Background, Eyedropper and Other. White and black are obvious. Background is the color of the background layer you have in your original Photoshop file. However, if you want to create a transparent GIF, you will have to make the background layer invisible (by clicking the eye next to the layer in the layer palette) before going to the Save for Web dialog window.
If you select Eyedropper as the Matte color option, you will need to select an eyedropper color. This is done either by clicking on any color in the image itself, or in the color palette, or by clicking in the little color swatch right under the Eyedropper tool on the left side of the Save for Web screen. This will bring up the familiar color picker window. (Hint: this last option is the same as the "Other" matte option, so if you want to select a color directly from the color picker, just select Other rather than Eyedropper.)
Here, for instance, we've selected red as the Matte color with the eyedropper, and saved the circle again. See how it blends in perfectly with the red background.
The "Other" color option is also useful when you want an image that does not have a smooth edge to it to overlay a patterned background. A good example of this is an image with a drop shadow that sits on top of a background image. In this case, first select a dominant color in your background graphic with the eyedropper tool, and use that as the Matte color. However, this only works on very subtly patterned backgrounds. Below is an example:
The last remaining Matte color option is "none". None essentially means that your image will be saved with no matte at all. This is equivalent to turning off anti-aliasing, and gives you a clear, jagged edge. Below is our circle again, saved with Matte=none. There is a noticeable jagginess, especially on the lighter colored backgrounds.
Using a neutral grey matte for different backgrounds
When you have a single colored background or a similarly hued background, in many cases the best option is to set your Matte color as the same or similar to the eventual background color. However, what if you have a patterned background, or you want to re-use the same basic shape or graphic several times?
In such cases, one compromise option is the "neutral grey" background. Grey is generally neutral to the human eye, and in very small amounts blends in with just about any color.
In the top row of the table below, we have saved our circle again, this time with a light neutral grey matte color of hex color #666666 which is about 50% grey, and set it against a few different patterned backgrounds. While the edges don't blend perfectly, they blend acceptably regardless of the background, in contrast to the bottom row, where the same backgrounds are used behind a circle with a white matte. cell which has a circle with a white matte. Pay attention to how light or dark your general background is, and select the lightness/darkness of your neutral grey matte color accordingly. For example, the last background (a rather dark radial gradient) the 50% grey is too light, while the black blends in better. Keep in mind that black is essentially 100% grey, and white is 0% grey.
Creating type elements for transparent GIFs
One of the most common uses of transparent GIFs is for graphic type elements that are used for page headers and such. When you create type, remember to have anti-aliasing turned on in the type dialog box. Experiment with the "crisp", "strong" and "smooth" options to see which one is best for the typeface and size you have selected.
Once you have created your type, saving as a transparent GIF is the same as with the circle image above.
Below is a text element saved as a transparent GIF with various settings. (typeface: Minion)
Importing graphics from Illustrator
Many times it's convenient or preferable to create your graphic or text element in a vector graphics program such as Adobe Illustrator, and to bring them into Photoshop for converting to a raster/bitmap format such as GIF.
The easiest way to bring graphics from Illustrator into Photoshop is to select the whole graphic in Illustrator and copy (Edit--Copy, or keyboard shortcut Ctrl/Cmnd-C) it.
Then in Photoshop, choose File -- New. A dialog box will appear; usually the image size is exactly what you need for your Illustrator graphic. The one thing to be aware of is to make sure that you change the Mode to RGB color (the default for Illustrator 8 is CMYK, but for online use you need RGB.) Click OK, and then Paste (or Command/Ctrl-V) to paste your graphic. Choose Paste as Pixels, and to preserve the smooth edges of the graphic, check the box next to anti-aliasing. Here, you can see the difference between anti-aliased and non-anti-aliased pasted images.
After you have imported your Illustrator graphic into Photoshop, the saving procedure is the same. Here are some examples of the same Illustrator graphic imported and saved in different ways.