How to Create a Transparent GIF

In Photoshop 4 and 5

Transparent means something which you can see through it. And in web design, it is used for photo or some other arts to keep the back ground visible from the other part of the photo which is not needed. For example, you in this page we have a color background, if we put some photo as an art then it will be in a fixed dimensions of length and width (rectangle) and will cover all the background color. Like this art:

Now if you look at it; it has covered the background. There is two ways to solve this problem. The first one is to create the art with the same background color as the HTML file's background which, mean every time if you change the background color of the HTML file, you have to create another art file or you MUST have the same background color as GIF art background's color. The second way is to create a transparent GIF which, can fit in any color and do not cover the back ground color. Of course you can select the colors to be transparent. So the above GIF file is changed to Transparent GIF file and looks like this:

STEP 1

If you have the photo file, just click on File>Open. If you want to Copy and Paste it from another program, after selecting and copying the that conents, start your Photoshop program and click on File and New

Now you will see the followning window. Just select RGB and click on OK. You can name it too. Bu it is not important at this moment.

STEP 2

Now paste it to the Photoshop. Click on Edit and Past or you can do it by pressing Ctrl and V (Ctrl+V)

Now after editing or changing the color or any other modifications, when you finished it click Layer control menu which is located somewhere in the screen. If you can't find the Layers menu, click on Window on the main menu and select Show Layers. When you got the Layers menu, click on the little arrow on the top right corner and then click on Merge Visible. This merges the pasted file to the background which is needed to be single layer file for GIF.

STEP 3

Now it is time to change the file to Indexed Color. Click on Image then Mode then Index Color as follow:

You will see the following window:

In here is which you make the file size big or small. If the number of colors are high, the file size is high. So in Palette menu select Adaptive and then type the number of the color you want to have. For example for the file which we want to work we need only two colors. As you type the number of the color, you will see the effect immediately(You don't need to save and then see. You while you type the number, you will see the change of the color). So if you typed 5 in the color field and you saw the photo lost the color, then type 6 or 7 or 10 until you get the correct color you want then click OK.

STEP 4

The important step is to export it for transparency effict. Click on File then Export and then GIF89a Exprot.

The following screen apears

With color picker (the one wich looks like eye drop) select the colors which you don't to be apear on the HTML file. For exampel at the above file I don't want to have the white color to be apeared. I have selected white color. And then click on OK. You will see this screen to save and name it.

STEP 5

You will see the GIF extention. Type the name and you will have that file wiht transparent back ground.

If you don't want to have some back ground. After doing step 3, click on File and then Save As...

You will see this menu

Now if you can't see the GIF extention click on the pul down menu and select the GIF. Remember if you haven't changed the mode in STEP 3, then you won't be able the GIF extention. So do STEP 3 and come then this stpe.