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
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 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.
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:
Pretty cool, huh? Let’s get Photoshop-ing…
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
2) Upload to your web server and integrate into your website.
Put this code in your <head> tag, making sure the paths are correct:
- var png_overlay = ‘ripped_frame.png’;
- var suffix = ‘_over’;
Then add the “frame” class to ANY image you want to transform:
- <img src="images/my_image.jpg" alt="my image" class="frame" />
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”:
- <img src="images/s60r01.jpg" alt="S60R framed" class="frame rollover" />
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!
- Posted at August 27th, 2006 03:28pm
- Posted by Tommy Maloney
- Filed under Web
- Tagged with Effects, png, transparent, Web
- 4 Comments have been made
- Web 2.0 Design Kit, Part 2
- Web 2.0 Design Kit
- Digital Painting with Light
- Peeling Sticker Effect
- Pixelated Mosaic Edges