Fringe Benefits

by Joe Gillespie — Nov 1, 2002
fringe

Anti-aliasing has to gradate between the foreground (text) color and the background behind it or it will have a nasty 'halo'. In this instant, the text is crossing two slightly different backgrounds so they have to be combined into one composite image.

I made a rectangular selection containing the text and its two backgrounds and 'copy merged' it into a new document. What I wanted was just the text on a transparent background but with an anti-aliased fringe derived from the background layers.

select text

I used the 'magic wand' tool in Photoshop set to a low tolerance to select the text.

expand selection

The selection was expanded by 1 pixel to include just a little of the background.

inverse selection

Then the selection was inversed to select everything but the text ...

clear selection

... and cleared leaving just the anti-aliased text with the correct colors surrounding it. The image was finally saved as a 32-color, transparent GIF.

final result on page

Now, when it is placed on the final Web page across two background images, it blends into them seamlessly.

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