March 25, 2005

PNG Headers

PNG Headers:

I'm a big fan of PNGs, for a number of reasons. Alpha channels are number one on this list (have you ever spent a couple of hours on different machines trying to match a GIF to a background color on both Macs and PCs? Then you'll understand while I like alpha channels.) But this also brings up the nice fact that with alpha channels, layered images actually can be used and useful:

The technique is fairly straight forward. You layer 2 images on top of each other. The top image is a PNG with an alpha-channel that makes some areas transparent and other not transparent. The bottom image is a plain JPEG or GIF that shows through the transparent parts of the overlaying PNG file. The implication is that you can design a header for a website template (for example) that is attractive and orderly but still allows novice users/bloggers to personalize their site in a meaningful way. Upload a new image to a site and change one URL in that sites CSS and you can change the content of the banner.
It's worth a look for anyone who's interested in web layout, and hasn't succumbed to the Cult of Flash yet.

Posted by Ted Stevko at March 25, 2005 04:16 AM