Here we explain how to create transparent GIFs that blend seamlessly into a background color.

Quite often, you may wish to place an image or button, logo etc. onto a background with great contrast. This can often result in an unsightly "halo" around the image as in the top example to the right, so we need to use the Matte technique.

In the example above, the settings have been set to GIF for two main reasons - the image is simple with no gradients and few colors and also we need the transparent background (although you could use PNG. Make sure the "Transparency" option is checked. Under the GIF option you have a choice of "color reduction algorithms")

• Perceptual: Generates a color table on present colors focusing on how colors are perceived by the eye.
• Selective: Similar to Perceptual, but leans more towards preserving flat and Web-safe colors.
• Adaptive: Creates a table based round the dominant color spectrum found in an image.
• Web: Creates the smaller file size by shifting colors to those available in the Web-safe palette.

Next enter the page's dominant background color either by choosing one of the defined drop down options or more specific values, hexadecimal etc.

Photoshop also offers the "Defringe" option. Go to LAYER...Matting...Defringe. Start by shaving off one pixel and gradually working in for the best results.

So, which to use? Obviously every image varies but for a quick example, the image iTunes created in Photoshop incorporates a wide vaiety of textures - flat color, gradients, images etc. Here's what we found:

Original PSD document: Finished size 3.44 Mb.

Saved as JPG: Poor quality on the "sharp" areas and text. File size became 330.7Kb. An estimated download time of Broadband 1.0 Mb/sec (as were the remainder of the formats) was 4 seconds

Saved as GIF: Much better quality than before, however there was some dithering in gradient areas, which all but disappeared when the Colors were increased to 256. File size 125.9Kb, download time 2 seconds.

Saved as PNG-8: Slight dither in gradient areas otherwise excellent quality. File size 79.85Kb, download time 2 seconds.

Saved as PNG-24: No dither, excellent quality. File size 263.8Kb, download time 4 seconds.

<<1, 2, 3