Here the piece, "3bar3grey.gif" is shown against a white background, and here's a couple of close-ups of just what makes 'em what they are.

Let's start out with a 2 layer Photoshop document sized at 24x564 pixles. The 'background' layer gets filled with the average color of your WWW background image, and the top one is blank for now.

Working on the top layer, start with a foreground color of black. Using the 'marquee' tool to create a box 3 pixels tall, by 540 pixels wide. Use the "Marquee Options" pallette to set the rectangular selection at a fixed size. This way you can click on your image, and drag the selection around, it's not fixed until you let go. Watch the "info" pallette, and set it up with the top left corner at an X,Y of 12,10. Fill it with the foreground color of black (option+delete).

Now all you need to do is flatten the image, reduce it to indexed color, and save as a transparent GIF89a using the background color as transparent. This is as far as you *need* to go, but I'm now going to direct you to the Transparency2 tutorial to see how to get that pixellated shadow. Have fun!

Here's 4 examples of what you can do with this, technique, limited only by your imagination. Have at it!

Here's another bit of handiness. You've got your GIF89a file, and it works great on your present background. So what happens when you change backgrounds? It's easy to change the color of these GIFs, here's how...

Open up the original GIF, in this case "540grey.gif". Change your color depth from "Indexed Color" to "Greyscale". This purges the color from the piece. Now change your mode again to "RGB" and we're ready to work. Create a new layer, and fill it with the average color of your new background. Set the mode of that layer to "color", which will colorize your image to that tone. When you flatten this image back to indexed color, Photoshop will by default show a setting of "exact", with a certain number of colors, (47 for this image). You haven't introduced any new tonal ranges with this effect, you've just changed the value of this pixels. Trust Photoshop in this case, there's no sense re-dithering.

Getting the average to your background file is easy. Open the background, and give it a "Gaussian Blur" of 32 pixels. Do it a couple of times, so it all looks the same. Now take your eyedropper tool and select that color. You can dump it into your pallette for later use. You'll also want to note down the RGB code for that color, so you can translate that into #hex for use as your BGCOLOR.

Note! DO NOT use this image as a solid color, because it's not, really. It may *look* all like one color, but it's probably still a dozen, similar colors. That's what the eyedropper is for.

Another thing you DO NOT want to do is hit the "Save" key at this point. What a bummer to over-write your background image with a nearly solid color. Select "Do Not Save..."