»» Feathered Transparency with Photoshop & Dreamweaver - Part 1

In this post we will see about the mode of working with feathered transparency in Photoshop and Dreamweaver. If you've been working in the world of web design for more than a day, you know all about the struggles and frustrations surrounding the issue of transparency. Well thankfully, with a little 21st century technology and a wee bit of CSS, which we'll do in Dreamweaver, we can actually achieve some pretty amazing transparent effects - across all the popular web browsers. To do so, we'll be making use of the PNG (Portable Network Graphics) file format, a format that offers up a lot of potential, but that's sadly been forgotten by most designers and developers.

Before we really get going, here's some quick background info. Way back in the web's stone-age (circa 1995, to be precise), PNG was developed as a response to the licensing controversy surrounding the GIF file format. But developers sought not just to replace GIF, but to vastly improve upon it. And they succeeded. What they wound up creating was a file format that combined the best features of both GIF and JPG, that uses loss less compression, handles a variety of color spaces, 24-bit images, and most importantly, supports feathered transparency. As a matter of fact, PNG comes in two flavors: PNG-8 and PNG-24. It's PNG-24 that we'll be looking' at here. He's the version that'll support feathered transparency.

Now GIF, PNG's main rival, measures up like a wet noodle in comparison. GIF can only handle 8-bit images with a maximum of 256 colors, compression is often weaker than PNG's, producing larger file sizes, and GIF only supports binary transparency - that is, in a GIF image, a color is either 100% transparent or it's 100% opaque. Whereas with PNG, we can have degrees of transparency, known as alpha transparency.

To be continued in Part 2.....