Coppola / Discuss

ElectroLund says:

Callum recommended I post this, so here ya go!

I use custom transparent category images on my iBlog.

For the year I was a .Mac member, I really loved the Apple image repository. They had some great free stock photos, so I swiped 'em! Most of them were easy enough to drag-and-drop right from Safari. Others were kinda tricky, but I just used Grab and was undeterred. :-)

The reason I wanted transparent images became obvious the more I played with my CSS design and templates like Coppola. Whenever the background behind the category image was anything besides white, bingo we have a problem. All of those nifty Apple shots with the great lighting have brilliantly white backgrounds.

Now, every browser in the world supports GIF, and there's a variant of GIF called GIF89 which supports 2-bit transparency. But 2-bit anything sucks terribly.

Enter PNG. PNG supports 8-bit alpha transparency, which rocks hard. It's edges are smooth and beautiful. But, which browser in the world would you suppose does not support it? Still, after all these years, after 6 major revisions? That's right, folks, Microsoft Internet Explorer.

But there's a nifty java script work-around which I'll cover in another post.

First the category images.

Step 1: Grab your image and make it square. Crop it down to the very last pixel, but save room for any shading if there's a shadow. In Photoshop, change the canvas size to a square dimension. Then resize the image to whatever size you want (I use 50x50 pixels, not too small, not too big).

Step 2: In Photoshop, use the magic eraser tool (a real godsend!) and erase all white background. Some images might not work too well if they have bright spots that might be confused for white background. If so, then first select portions of the image to be erased or select the portions which won't be erased and do an inverse selection option. On some images, you might have to resort to scrubbing manually with a standard eraser tool. It's worth it though!

Step 3: Save it as a PNG and you're done!
Posted at 3:35PM, 31 March 2005 PDT ( permalink )