Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Follow Us on Twitter Our YouTube.com Channel Facebook Page

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



blog comments powered by Disqus


Dreamweaver Website Templates

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials

paypal