Fireworks Article

Creating Web 2.0 elements in Fireworks

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).

Figure 1. Sample Web 2.0 elements

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:

1. Create a rectangle of 167×38 or use any size you want and round the corners (see Figure 2).

   

   Figure 2. Creating a rounded rectangle

2. Choose the colors for the gradient (see Figure 3). I chose red (#BB0000) and orange (#FF6600).

   

   Figure 3. Choosing colors for the gradient

3. Make a copy of the rectangle by pressing Ctrl+Shift+D or use File > Copy and File > Paste. Make sure the copy remains in place above the original rectangle. Cut away half of the upper button shape using the Knife (see Figure 4).

   

   Figure 4. Duplicating the rectangle and cutting away the upper half

   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).

4. Reduce the opacity of the white layer to 34 or whatever works best for your color choices to give it the glossy effect (see Figure 5).

   

   Figure 5. Reducing the opacity of the white layer

5. Select the main layer with the one with the gradient color and add a Drop Shadow filter effect (see Figure 6). I set the Drop Shadow to Distance 2, Softness 2, Opacity 80%, and everything else left at their default values.

   

   Figure 6. Adding a Drop Shadow filter effect

6. Add text to the button (see Figure 7) and you're done!

   

   Figure 7. Final text on the Web 2.0 button

It's that easy. Give it a try!

Requirements

To view these samples, you need the following software and files:

Fireworks CS3

• Try
• Buy

Sample file:

• web_20_elements.zip (ZIP, 871K)

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the author