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.

pngfun1

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

pngfun2

Masked out the rounded corners.

pngfun3

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

pngfun4

Lowered the duplicated layer’s Opacity to 75%.

pngfun5

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].

pngfun6

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:

  • <img src="images/my_image.jpg" alt="my image" class="frame" />

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”:

  • <img src="images/s60r01.jpg" alt="S60R framed" class="frame 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!

Comments Spill 4 Comments »

  1. May 20, 2008 9:29 pm????????????????????? - DesignWalker

    [...] Fun with Transparent PNG Images [...]

  2. November 11, 2008 1:58 pmchuckles92104

    Is there any way to multiply a PNG image? For example, I have a background color and a PNG image on top of that–the image is a texture. Is there any way to “multiply” the texture onto the solid color background? TIA chuckles

  3. January 24, 2009 6:23 amexcargot » Blog Archive » png ludique ?

    [...] Le PNG devient le format de prédilection de pas mal de monde. Les petits hacks permettant son affichage correct dans IE y sont probablement pour quelque chose. Photoshop Lab nous propose un article complet comprenant une méthode pour réaliser facilement des cadres en PNG sous photoshop et propose en téléchargement le script pour rendre lisible les png pour ie. http://www.photoshoplab.com/fun-with-transparent-png-images.html [...]

  4. May 18, 2009 4:04 pmDispelled.ca » links for 2009-05-18

    [...] Fun with Transparent PNG Images | Effects, Tutorials, Web | Photoshop Lab [...]

 
Leave A Comment TrackBack URL