Transparent GIF’s in Photoshop

The format GIF’s can be transformed to create a transparent background or element to the image, meaning a background colour or image of the website you are using your GIF files on can be seen through the particular areas which you define to become transparent. To create transparency first you need to –

• Open the image that you would like to add transparency to, if the image has already been highly compressed to prepare for use on the web when you zoom into the image you will notice all the pixels are distorted around the edges, pixilation will be especially high if the compressed image was originally saved as a highly compressed JPEG format. If the image was originally created in Photoshop and saved as a PSD then pixilation wont be a problem but if the image has come from another source then it will more than likely have this problem.
• Before you can start working on the image you will need to get rid of all the extra dots around the edges so you can make a clean selection around the image itself, the cleaner the edges of a image the easier it will be to later get a perfect selection with the Magic Wand Tool. The same applies if your image is part of a larger image; everything surrounding it needs to be removed.
• Using the Zoom Tool zoom into your image so you can see all the edges clearly and then use to Eraser Tool to remove the extra pixels from the edges of the image, including any extra white space, the more precise you are the better your final transparent GIF will be, especially if your final outcome is going to be placed on a contrasting coloured background.
• Once you have cleaned up your image use the Magic Wand Tool to select the white space around your image and you should have a perfect selection around the white space (non image) area of the document, drag this layer onto the New Layer Icon and this will make a copy. Select the new copy of the layer and press Delete which will remove the surrounding white space, then click onto the background layer and go Select > All > Delete, click on the eye icon on the background layer and this will hide the layer and show you the transparent areas – CTRL & CLICK on the new layer and your selection will appear back around the image.
• In Channels make a new channel and fill the selection of the image with white, then press CTRL & D – this will deselect.
• Return to the layers palette to make your image layer active, go to Image > Mode > Indexed Colour and click OK, then go to File > Export > GIF89a. A drop down will appear called Transparency from, choose Alpha 1 and you should see your image turn greyed out in the preview, showing the areas which will be transparent, click OK and then test your image on your web page.