Step 1:

Open Photoshop and create a new document with 500X500 and transparent background. Then using a photoshop brush make a nice frame just like in this picture:

(I use deviantart.com for a nice brush)

Then cut out the center of the frame using Rectangular Marquee Tool , and using another brush make an old paper effect with 50 % opacity, and place it in the center of the frame just like below:

Then export the frame and save it png-24 whith transparent background, call it frame.png

Step 2:

We know that IE 5.5 and 6 doesn’t support PNG alpha channel so we’ll use the AlphaImageLoader, and javascript for browser detection.

For browser detection i use a script from
http://dithered.chadlindstrom.ca/javascript/browser_detect/index.html
browserdetect_lite.js
And for opacity i use opacity.js

Step 3:

Next open dreamweaver or what program are you using for html and css coding and make a new html page.
In the head of the page don’t forget to include the javascript:
…..
<script language=”javascript” src=”browserdetect_lite.js” type=”text/javascript”></script>
<script language=”javascript” src=”opacity.js” type=”text/javascript”></script>
</head>

Make a new div whitch will contain the background photo (use any photo you want to put in the frame).
I use this photo:

The photo must be the size of the center area of the frame so it could fit perfectly.
Then display the png using Variable Opacity Rules:

<div style=”background:url(picture.jpg) no-repeat center; width:344px; height:396px;”>
<script language=”javascript” type=”text/javascript”>
od_displayImage(’myImg1′, ‘frame’, 344, 396, ”, ‘Variable Opacity Rules’);
</script>
</div>

Step 4:
Test your page , new no matter if you are using IE or Firefox you png frame will look perfectly:

Download example: demo.zip

Good luck

Sunday, January 13th, 2008 at 7:08 pm - Tutorials
You can leave a response, or trackback from your own site.