SITEMAP

Graphics > Scanning : File Format : Linework : Photos : Image Manipulation : Filesize : Transparency : Animation : Banners : Buttons : Backgrounds : Protecting Your Artwork

transparency

Of the two fully web-compatible graphics formats, gifs are the only one that can support transparency. This allows you to produce graphics that appear not to be rectangular, as in the example at the right and the banner above.

You've probably seen transparency where a picture has messy-looking bits showing in the background or around the edges. As can be seen on the lower image where I've made the background colour very different to the intended underlay colour, this problem is caused by anti-aliasing to a colour that isn't close enough to the intended underlay colour. I actually used a white background when producing this graphic, but as you can see in the top version, that's close enough to this page's background colour to look fine. Getting this right is much more difficult if you do use backgrounds of a solid colour. If you do choose to use an extreme solid background on your website (say like that green) then you'll need to actually produce your graphics with that colour background, even if you are making the graphic's background transparent. Trust me, that's a much bigger hassle than working to a light or dark background.

If you want to know more about anti-aliasing, I'll be covering that in detail in the fonts section. Basically, it's averaging colours on the edge of a line to create the impression of a curve. After all, pixels are square.

Only one colour can be nominated as the transparency colour, so you need to make sure that the bits you want to become invisible are a solid block of one colour. Changing the "invisible" colour temporarily in Colors/ Edit Palette to something completely different can help you make sure you've cleaned up any stray bits, since they're easier to see. Working with a relatively small palette makes it easier to get nice clean transparency - the top example is 16 colours. Or if you only use two colours like the bottom example, there's no anti-aliasing so it will look clean on any background. But it looks a bit chunky, eh?

Once you have one colour you want to become invisible, you do so in Colors/ Set Palette Transparency (in PaintShop Pro, that is).