Transparency made clear

by Joe Gillespie — Jun 1, 2004

Using transparency with a GIF or PNG file can solve a lot of problems when it comes to overlaying type on backgrounds..

The GIF file below has a background color that matches the page's background. As the GIFs background is exactly the same color as the background, and the background is a plain color, it works just fine.

gif

This PNG also has a background color the same as the pages, at least it is supposed to.

png

Even though the background color seemed to be the same when I saved the file, converting it to a PNG has shifted the color slightly, but enough to be visible.

Color shifts like this can be introduced for several reasons – an error in the graphics program's file format, allowing a color profile to be embedded that is inappropriate or simply the difference in color color depth of your screen and the reader's. A 16-bit screen can not display the same RGB values as a 24 (or 8-bit) screen.

And, what happens if the background is not a plain color but a pattern or image? It would be virtually impossible to get the registration of a foreground and background image perfect in every situation.

transparent

The answer is to make the image's background transparent. The process involved is not complicated but does cause some confusion.

t t clear

Only the solid background color should be made transparent – nothing else.

This blow-up of the letter 't' shows the anti-aliased fringe that blends the color of the type smoothly into the background. There is a series of intermediate colors between the required type color and its background. Any colours won't do, they have to be exactly the right ones to work. If the type is a different color, or the background, then the blending colors need to be be different too.

You have to start by setting the type against a color that is the same as the eventual page background, or pretty close. If the background is not plain, but a pattern or image, you need to set the type against a plain color that is the average of all the colours in the background pattern.

Here, I'm using Photoshop's 'magic eraser' tool. It is set to zero tolerance and no anti-aliasing so that it will only erase the plain background color and leave the type's anti-aliasing intact. If you are using another program, use the magic wand tool – also set to zero tolerance and no anti-aliasing – to select only the plain background colour and no other, then hit delete to clear it.

When you save the file, make sure that transparency is switched on and that there are enough colours available to accommodate the 'fringe' colors – usually 8 colors will be sufficient to blend single colour foregrounds and backrounds.

Placed on top of a plain colour, pattern or image on your Web page, the type should blend-in perfectly.

shadow shadow clear

The other situation where transparency becomes very useful is if you want a soft shadow like the drop shadow on this type.

If PNG-24 was better supported in browsers, you could use its 256 levels of transparency to achieve this effect – albeit with a pretty large file size overhead.

With PNG-8 (or GIF), again it is a matter of setting the type on the 'eventual' background color and then selecting and deleting only that one color leaving the anti-aliasing and the gradated shadow tones intact.

A soft shadow like this does need quite a lot of colors to get the smooth transition between the page colour and the darkest part of the shadow. Where you can get off with an 3-bit color depth (8 colors) with single type colour and background colors, you will probably need to go to 5-bits (32 colors) to keep the subtleties of the soft shadow.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float