Transparent Overlays in Dreamweaver CS4 - Part 1
For part 2 of this Dreamweaver Tutorial follow this link: Transparent Overlays in Dreamweaver part 2
Transparent overlays in Dreamweaver
In this Dreamweaver Tutorial you will learn how to take a transparent image and create a transparent overlay in your website. A transparent overlay (sometimes called a translucent overlay) is an image with the opacity tuned to around 50% to allow any background image or design to show through it. In other words; it is a see through Image. Check out this example of a page created for the above video tutorial: Transparent Overlays Example.
You can download the Dreamweaver transparent overlay exercise files by clicking here. Alternatively there is a link just below where you can download the exercise files instead.
The transparent layer was created in Adobe Fireworks and is a transparent PNG file.
What you need to know about Transparent PNG’s
When creating a transparent layer or a transparent PNG in Fireworks, Photoshop or Illustrator and saving it out as a PNG for your website, it is important to export the file as a 32bit PNG file. This is the only way to get a truly transparent image. It is somewhat of a misnomer that you can export an image as a PNG 24 in Photoshop; it is actually exported as a 32bit PNG. The reason a transparent PNG overlay must be exported at 32 bits is because a PNG format requires that the red, green and blue channels have 8 bits each. In other words your RGB carries 8 bits per channel and equates to 24 bits. To get your image to be a transparent PNG requires an extra 8 bits for the Alpha channel and hence the need to export at 32 bits. You can export from Photoshop at 24bits with a transparency and it will add the 8 bits you need for you. However, if you are exporting from Fireworks as a PNG 24 it will not carry the transparent layer effect with it. Got it? Good!
Related Dreamweaver Tutorials:
Transparent Layer Overlay's - Dreamweaver Article