ECGTD Transparent GIFs


Return to Elftown CG Tutorials.
Return to ECGT Adobe Photoshop.
Return to ECGT Deiscorides Photoshop Tutorials.


Click on link to view full image.

Part A - Creating the file:

Creating a transparent GIF image file for use on the web so that it will appear on any background is easy. I will be showing you the easiest way to make a transparent GIF image file. I won't bore you with the details behind Alpha channels and all that, but instead I'll just flat out tell you how to do it. I'll be using plain text as an image so, one extra step to rasterize the text layer will be needed. I do not show that step, but all you have to do is try to draw or erase on the text layer and it will ask you if you want to rasterize it. Take note that I am not showing how to create a fading transparent GIF or an image that has contained several layers each using a different Layer Style which would cause you to Flatten the image instead of Merge the layers. That requires more steps, forcing you to erase the areas which you want transparent.

Steps 1 and 2
Determine how big you want your image to be and create a New image file with the dimensions needed. Create a new layer or paste something into your image, which will create the new layer. Hide the background by clicking on the Eye to the left of the layer in the layer window. Then create your image with no background. When you are done, make sure that you merge all layers except the hidden background layer. To merge them you can click on the top most layer to highlight it, then press Ctrl+E on your keyboard. That layer will then merge down to the next layer. Do this for all the layers except the hidden layer. If you want you can completely delete the hidden layer. It is not needed.


<URL:stuff/Deiscorides_tutorials_TransGIFs_Large_Part_A_01.jpg>


<URL:stuff/Deiscorides_tutorials_TransGIFs_Large_Part_A_02.jpg>


<URL:stuff/Deiscorides_tutorials_TransGIFs_Large_Part_A_03.jpg>


<URL:stuff/Deiscorides_tutorials_TransGIFs_Large_Part_A_04.jpg>

Steps 3-10
Now, press and hold down the Ctrl key on your keyboard while clicking on the main layer that has your image on it. This action will select everything in that layer and nothing else. Click on your Channels tab to see the RGB channels. Click on the "Create New Channel" button shown in step 5. Make sure that the newly created Alpha channel is the only thing visible. Your image should turn a solid colour like black with the dotted selection lines still in place. Once you have done that you can click on one of the Marquee tools. With a Marquee tool right-click on the image itself. In the menu that pops up click on, "Inverse Selection". This will select everything on that layer that is not a part of your image and will be transparent. Use the Paint Bucket Tool, select the colour White and click on the areas that are to be transparent. Make sure all areas that are to be transparent are White and all areas that are to be seen are Black. When you are done with that, unhide the RGB, R,G,B channels. Your image should now turn an odd red colour and its outer areas that are to be transparent should be transparent.


<URL:stuff/Deiscorides_tutorials_TransGIFs_Large_Part_A_05.jpg>


<URL:stuff/Deiscorides_tutorials_TransGIFs_Large_Part_A_06.jpg>


<URL:stuff/Deiscorides_tutorials_TransGIFs_Large_Part_A_07.jpg>


<URL:stuff/Deiscorides_tutorials_TransGIFs_Large_Part_A_08.jpg>

Part B - Saving the image as a Transparent GIF file:

Steps 1-4:
Now to save your file as a Transparent GIF file. Simply click on File in the top left of the screen and then click on "Save As". In the Save window, make sure to select the "CompuServe GIF (*.GIF)" file type Format, using the drop down box labeled "Format". Type in your filename and click on the Save button. Next a new window will pop up. Please, take note of the settings I am using in the step 3 image, below. The check box "Transparency" is the most important and must be checked otherwise you won't have a transparent GIF when you are done. Click on OK when you are done changing the settings. A very small window will open and all you need to do is click on OK again. You should now have a transparent GIF image to use.


<URL:stuff/Deiscorides_tutorials_TransGIFs_Large_Part_B_01.jpg>


<URL:stuff/Deiscorides_tutorials_TransGIFs_Large_Part_B_02.jpg>


<URL:stuff/Deiscorides_tutorials_TransGIFs_Large_Part_B_03.jpg>


<URL:stuff/Deiscorides_tutorials_TransGIFs_Large_Part_B_04.jpg>

Finished Image:




Return to Elftown CG Tutorials.
Return to ECGT Adobe Photoshop.
Return to ECGT Deiscorides Photoshop Tutorials.



http://www.pro-counter.com/signup.htm - get your own site-counter.