I won't go into the specifics here of how transparency is possible with the Gif format. That in itself can take up an entire book!

But what this also means is that you no longer have to just create images that have four corners. You can use any shape you wnat now! And you can put these images anywhere you want on your web page too, without covering up the background of your page. Let's move on now and see this in action.

Ok for our example i'm going to be using an image that has not only a square shape to it, but also has a circle extending beyond the lower right corner of the square. This will show you how transparency can be most useful to us.
Take a look at the image to the right. Notice how i've added a background colour to it so you can see just what part of the image we want to hide or mask from the visitor to our web page. There are a couple of ways that i myself mask out image backgrounds. The first one is to remove the background colour when you are in the Gif89a plugin, and about to save your image to your hard disk.

This is how we would do that:
Say you've just finished your image and are ready to save it as a Gif. The first thing you have to do in Photoshop is to convert your RGB image into an Indexed image. To do this, go up to the IMAGE menu and choose MODE / INDEXED COLOR. When the dialog window opens, you will have a few choices to make. For our purposes here though, we will leave these settings at their defaults.

Be careful during this part. When converting to Indexed Color mode, Photoshop will ask you to flatten your image. Make sure you have saved your work as a Photoshop .PSD file first, so you can Revert back to it if you need to make further changes.

to the Top

Follow this path:

• Open the FILE menu and choose EXPORT / GIF89a. When the dialog box opens you will see a few options to choose from for your export settings.
• Use the tiny hand tool to move your image, if you can't see your background colour in the preview window.
• Use the Eyedropper tool and click it on the colour or colours you want to remove from your image. (yes, you can choose more than just 1 colour. And it doesn't neccessarily have to be the background either) Be careful here however. If your background colour is also anywhere in your image, that part of your image will also become transparent. If this happens when you choose a colour do this to put that colour back in your image and make it non-transparent again:

  PC users hold the Ctrl key down / Mac users hold the Command (or Apple) key down. You'll notice that the tiny plus sign on the Eyedropper will turn into a minus sign. Click on the colour that you didn't want removed, and it will become non-transparent again. You can click on a colour in either the preview window (zoom in) or in the tiny palette at the bottom.

• Once you've chosen your colour or colours, click OK to apply it and save the file to your hard drive.
  
  

  Here's what the above example image looks like with a transparent background.

  What's that you say? You can see a fuzzy outline around the circle? Hey!? So can i! Well we'll just have to fix that right up huh? In the next Session of course {:?)>

to the Top