Graphics Tutorial (Intermediate): for Adobe Photoshop

Recommended prerequisite knowledge: some experience with Photoshop 5.5 or later. What you will learn: how to optimize your transparent GIFs for web pages.

Transparent GIFs, Part 1: Creating and Optimizing

by Makiko Itoh

This is part 1 of a 2-part article about creating and using transparent GIFs. The screenshots are from the Mac version of Photoshop, but it works exactly the same in Windows Photoshop. Users of other programs can utilize the ideas here about transparent GIFs and matte colors too.

One of the advantages of using GIF as the image file format over JPEG, is that GIF supports transparency. (For more about the difference between GIF and JPEG, see this article.) Transparency means that the background image or color can "show through" the areas that are designated as being transparent.

Long-time Photoshop users were very happy when the Save for Web dialog box was added to version 5.5, since this helped to save a lot of steps which had been necessary before. This includes making transparent GIFs.

What is GIF transparency, and when should it be used?

GIF transparency is "binary". That basically means that a pixel in a GIF graphic is either on (colored), or off (transparent). This is different from the multiple levels of transparency in graphics programs such as Photoshop, or even the 254 levels of transparency possible with PNG files.

What this means is that when you have a transparent GIF, one of the critical things to watch out for are the edges. A well prepared transparent GIF blends in as seamlessly as possible with the background color or picture.

Certain effects are not suited for transparent GIFs. One good example of this is a text headline with a drop shadow. The edges of shadows are fuzzy and have subtly changing levels of transparency; therefore, when you are creating a drop-shadow element, it is rather meaningless to save it with transparency. Below is a text with drop shadow, saved with some transparency. As you can see, on anything other than a white background, it doesn't look very good at all.

Therefore, a good general rule of thumb is to use transparent GIFs when you have smooth-edged graphic elements, which you wish to lay over backgrounds that are colored or patterned.

The basic procedure for creating transparent GIFs
with Photoshop 5.5 +

First, let's open a new file, specified at 80 x 80 pixels and 72 dpi. We will set the background to "transparent", and create a circle on it with the elliptical marquee tool. The selection option is set to "anti-aliased" (meaning that pixels will be added to the edges to make them appear smooth). Click here for a short explanation of anti-aliasing.

Click on the File menu and Save for Web. A dialog screen appears. In the options, check the box next to "transparent" and you will see the Preview view change to show the circle with a transparent view. In the screenshot below, you will see the dialog box options for a GIF, showing "transparent" checked.

Here is a larger view of the "Save for Web" window, showing the save option selected. You see that it shows the grey-and-white checkered background which indicates the background is transparent. Click OK and save the file.

Below is the resulting GIF with the transparency. In the left cell of the table, it's on a pale yellow background and looks great. However, in the right side cell which has a black background, you see that it has an unsightly white "fringe".

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:

image on black background to show the matte	image on patterned background

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.

					circle with "100% grey" (aka black) matte

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)

Anti-aliasing: none, Matte: none. The edges are jagged.	Anti-aliasing: Crisp. Matte: white. Note the smooth edges on the pale background.	Anti-aliasing: Crisp. Matte: white. Notice the "fringes" that appear when the background is dark.	Anti-aliasing: Crisp; Matte: #000099 (the same color as the background.)

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.

A non-anti-aliased GIF with transparent background, set on a dark green background, Matte set to none. The image is slightly jagged on the edges.	Anti-aliased image saved with dithering turned on. See the "dottiness" in the white part of the basket.	Anti-aliased image saved with dithering turned off. The white part of the basket is smooth.
The same image as no. 3, on a dark green background; see the white fringes (the matte).	The image with a dark green Matte color, set on a dark green background.	The image with a dark green Matte color, set on a white background.

Next time, we'll talk about using transparent elements in animated GIFs, and some more transparent GIF tricks and tips.

Makiko (Maki) is principal of PRODOK Engineering, a company near Zürich, Switzerland specializing in low-paper workflow solution consulting for clients worldwide. She is a graphic designer with more than 5 years experience in print design prior to switching almost exclusively to the web 4 years ago; currently she also provides CSS/JavaScript consulting for PRODOK clients. She is also an Adobe Certified Expert in Photoshop, having used it and Illustrator since about 1990. She has written for PlanetPDF.com, Digital-Web.com, and WebReview.com.

Learning Podcasting by Carolyn Wood.

Complete list of past tutorials.