Fun with Transparent PNG Images

Transparent PNG images have been always been a great tease to web designers. This tutorial will show you a few tricks to working with transparent PNG files.

Transparent PNG's themselves are great, it's their lack of support from the most used web browser in the world that makes them flawed. Thanks Microsoft! Until the new version is widely adopted, which I predict should be a few years little longer than most developers would like, we can resort to using a nice Javascript to cure our transparent-PNG-in-Internet-Explorer woes.

Another hassle, recently brought to my attention, is the gamma correction that some browsers like to apply to PNG images. Here are two very useful links on how to correct the gamma correction problem that plagues less "modern" web browsers.

The Script

Download the PNG examples, including the Javascript here.

The PNG repair script for IE works by taking an image and replacing it with a span tag. It then takes the image source and sets it as the source for the AlphaImageLoader filter used by IE.

PNG Framing

The pngFrame function works by finding images with a class name "frame" and setting the background of the image the same as the source. It then sets the original image source as the PNG frame image. Let's see it in action:

>> Example 1
>> Example 2
>> Example 3

Pretty cool, huh? Let's get Photoshop-ing...

Photoshop

The one downside to this whole thing is that it lacks some flexibility. Depending on the design, you might have to match the background color of the page that the images are on in the "frame". This might become a hassle on patterned backgrounds. But, on the upside, it has a lot of great uses... only as extensible as your creativity.

Let's first see how I made the Example 1 image.

Added a Solid Color Fill Layer Layer > New Fill Layer > Solid Color

Masked out the rounded corners.

Duplicated the layer with Ctrl + J, then moved it slightly left and up.

Lowered the duplicated layer's Opacity to 75%.

To create the PNG "frame", I hid the Background layer by clicking on the Eye-icon in the Layers palette F7. Then I saved it for web as a PNG-24 with transparency Ctrl + Alt + Shift + S.

How to Use

1. Download the png.js file (and supporting examples) here (.zip 49kb)

2. Upload to your web server and integrate into your website.

Put this code in your <head> tag, making sure the paths are correct:

<head>
<script type="text/javascript">
var png_overlay = 'ripped_frame.png';
var suffix = '_over';
</script>
<script type="text/javascript" src="png.js"></script>
</head>

Then add the "frame" class to ANY image you want to transform:

Rolling Over

Another cool feature of this script is the ability to easily add rollovers to your "frames". All you have to do is give your image the additional class name of "rollover":

Then just create an image for your rollover state with the suffix you set in the Javascript (above). EG. normal = "roll.png", rollover = "roll_over.png".

Check it out in action in Example 3.

There are a ton of uses I can imagine for this, patterned overlays, dynamic cropping, watermarking, etc... Hopefully you can find a couple good uses for it yourself!