Transparent GIFs in Photoshop




These notes were written originally for Photoshop 5.5. However, they should also work for later versions.

Introduction

Transparent gifs allow you to create images and put them on a web page so that the image doesn't look like it's in a rectangular shape.

The transparent areas of the gif allow the background image or colour of the page to show through those areas.


Starting the image that's going to end up as a transparent GIF:

1) Choose File>New to start a new document in PhotoShop

2) Make sure you choose the "Contents" of the new image to be "transparent", rather than "white" or "background colour". This is very important. As long as you keep that transparent background in PhotoShop (which looks like a light grey checkerboard), you will be able eventually to save the GIF so that it looks decent on whatever colour web page background it will end up on.


Working on your GIF:

Then go ahead and work on your GIF. You can work on your image in RGB mode, and PhotoShop can take care of the indexed colour mode and GIF format issues for you when you are finished all your changes and ready to do the final save. But until you are all finished the image, save it in PhotoShop format (matching filename extension for this format is .psd). When you are ready for the final save, follow these steps below...


Saving the transparent GIF, and other final steps:

  1. Think about what the background of the page the image is going to appear on. What colour is it, or, if it is a background image on the page, what colour is most dominant or widespread? (A background image that has widely varying hues or values will make your job of putting a transparent image on the page and having everything look seamless quite difficult -- which of those varying colours will you pick? That's the problem.)
  2. Using the colour picker, go in and select that dominant background page colour as if you were going to paint with it. But before you say OK to that colour in the colour picker window, look at the hex code for the colour and write it down (like the illustration below indicates). Then you can hit OK or Cancel as you like.

  3. Save the image one last time in PhotoShop format.

  4. Choose File>Save for Web

  5. A window will open up.

  6. In the window, click on the "Optimized" tab (or "2-Up" or "4-Up") at the top of the new window. If you chose "2-Up" or "4-Up" tab, one of the display versions will be your original image, and the display version of the image with the selection around it is the version that you are changing the settings for. If you chose the "Optimized" tab, the version of the image you are seeing is the one you can change settings for.

    Here are settings you need to set or play with:

    • You must choose GIF format to make a transparent GIF.

    • Choose a palette for the GIF (usually you would pick "adaptive," "selective," or "web") - and, to the right of the palette, choose the number of colours for the GIF to have (don't change the number of colours if choosing web palette).

    • Choose to have dithering ("diffusion," "pattern," "noise," etc) or "none" - and, to the right of the dithering setting, the percentage (affects the pointillism effect you get with your dithering setting).

    • Make sure to put a checkmark beside transparency. Beside transparency (to the right of it) look for Matte settings. Hold down on Matte to see the choices. Matte chooses what colour to blend the edges of the non-transparent parts of your image to (so the edges blend nicely) - like to black, to white, to some other colour, etc. If this doesn't make sense to you, it will soon because I have example images to show you with different Matte settings and different web page background colours.

      Choose either "none," "black," "white," or "other..." for your Matte setting. "Other" tends to be best, unless the background colour of the web page the GIF is going to be on is actually pure black or white, in which case you should choose the appropriate one. If you choose "other," a window will open so that you can choose which colour to blend to. You need to type in the number you wrote down from step 1, and then choose OK. This colour-choice window should close, returning you to the other window.

    • Interlaced option - no checkmark here usually, because you don't usually want your GIFs interlaced.

  • After having adjusted all the above settings, click on OK at the top of the window.

  • A different window will open to let you choose place to save the image -- check that the name is correct (should end with .gif)

  • Save your image in the desired location.

    Put the image in a folder with the page it's going to appear on, and use an image tag to make it load on the page. The transparent GIF should look quite decent on the page, and should not have any light or dark halos suddenly appearing around the edges of the non-transparent part of the image.

    Light or dark halos around the edges of the non-transparent part of the image are a problem with the Matte setting for the transparency. The Matte setting chooses what colour to blend the edges of the non-transparent parts of the image to - if the wrong colour is chosen, it shows up as an ugly halo. If the right colour is chosen, the halo blends in with the background colour or image of the web page the GIF is on, and you don't notice it.

    Examples of Matte settings good and bad:

    Here is the same transparent gif, saved with 4 different Matte settings (none, white, black, and red). Each different Matte version is placed on 5 pages with different background colours. Again, the Matte setting should ideally be the same colour as the dominant background colour of the web page that the transparent gif is appearing on. When the Matte setting and the web page background colour don't match, you get ugly halos, as you'll see.

    These example pages will open in a new window:




    back to top