Abcol Logo

You have now reached Chrissie's web pages for

Webpage Design

Tutorial - Applying Transparency to a .GIF Image.

As you will have noticed, this page uses a coloured background.

Now it may be that you would like to use a GIF on this background, but don't want the image to be "square". Mainstream photo editing applications such as Paint Shop Pro often have tools installed for creating transparent backgrounds.

Mars on a black background

Mars on a Transparent Background

In this version, you can clearly see the black background, which does not look very professional!

See how much more realistic this looks...

You can also do this with Microsoft Photo Editor, which usually comes installed as part of Microsoft Office. It will be well hidden though, so you will have to find it first using Start >> Search >> PhotoEd.exe

Click on the icon The icon for Photo Editor should look like this! to start Photo Editor. When it loads, open up your image file. (Remember that transparency only works with .gifs. If you are starting with a .jpg, you will have to save it as a .gif first.)

Image opened in PhotoEd.Exe, ready for editing

Image is opened ready for editing.

You then choose which of the colours you want to be transparent, using the colour picker tool (the middle tool on the furthermost right-hand section of the toolbar - in between a "sun" and a rotating square). You can choose whether to apply transparency to ONLY that colour, or within a similar range.

Window showing which colour will be converted to transparency

Here we have chosen to make the almost-black background transparent.

After the tool is applied, the parts of the image that will be transparent will appear as a grey-and-white check.

Colour picker tool has been applied to the background, making it transparent

Transparency applied - the background will now "disappear"!

If you don't want "holes" in your .gif, it's best to ensure that the background is a completely different colour from any of the other colours within the picture itself. You may have to re-colour the background first, using MS Paint or similar, then apply the transparency.

animated fireworks heading West

Effective results can be achieved when combining transparency and animation, like these fireworks. Digital photos of some real fireworks were cropped, saved as gifs, had transparency applied and finally, animated using Ulead Gif Animator.

animated fireworks heading East

Architecture Home Pascal Home Web Design Home Java Stuff Home Extra Stuff Home Other Stuff Home

Comments? c.nyssen@abcol.ac.uk
Last updated - 27/06/03

Best viewed at 800x600 in 16-bit high color with Trebuchet MS installed. If you do not have this font, click here