24 March 2008
Web 2.0 design effects are a "must have" demand by my clients. They want their websites and logos to have the innovative, modern look and feel of "Web 2.0"—a term used to describe the next wave of design and development across the web.
Creating Web 2.0 elements in Adobe Fireworks CS3 is easier than you might imagine. There are no difficult effects to apply; simple layering of graphical elements can do the trick. It can be quick and easy to create the modern look of Web 2.0. It took me about 20 minutes to create the graphics in the attached sample file (see Figure 1).
The great thing about working with Fireworks is that I don't have to create a new graphic every time I want to add a button or tab. I can create each element once and use it again and again, making simple visual changes to meet the needs of my clients.
Web 2.0 is not only about shine and reflections; colors also play a major role. Download the PNG source file to see how easy it is to create these graphic with simple layered effects.
For example, here is how I created the glossy button:
As shown in Part 2, make the new shape about two pixels less in width, and move it about one pixel lower from the top. This helps give more detail to the glossy effect. Change the shape color to white (#FFFFFF).
It's that easy. Give it a try!