C & G web

Anti-Aliasing

As you've just learned, images are made up of small squares or pixels. So how do you make curved edges look smooth? A curve is always made up of square pixels.

An anti-aliased image
A magnified anti-aliased image To make this look smooth, your image manipulation package will add some pixels to the edge of the curve. Although this gives nice smooth edges it can cause problems when making transparent backgrounds. The small 'C' on the left is anti-aliased. The larger image is magnified to show the extra pixels the image software added to make the image appear smooth.

For example, if you have a background of stars in a black sky, and you want to put an image of a planet on top of it you will need to make the image of a planet on a black background to start with.

If you make a planet on a white background with a smooth edge, your image manipulation software will anti-alias the image, making pale grey pixels around the edge of the circle. The edges appear smooth, but on a black background you will get an ugly 'halo' of white pixels.

Here is an example.

planet - Image made on black background
Image made on white background
planet - Image made on black background
Image made on black background

When you are making an image with a transparent background remember to construct the image on the same or a similar colour to the background of your web page.

Previous page...

Back to Top of Page

Computeach International Ltd

Christopher Ward London Limited

Christopher Ward London Limited