Creating Web 2.0 elements in Fireworks
Created
24 March 2008
Requirements
User Level
Beginning
Required products
- Fireworks (Download trial)
Sample files
- web_20_elements.zip (868 KB)
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:
- Create a rectangle of 167×38 or use any size you want and round the corners (see Figure 2).
- Choose the colors for the gradient (see Figure 3). I chose red (#BB0000) and orange (#FF6600).
- 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).
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).
- 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).
- 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.
- Add text to the button (see Figure 7) and you're done!
It's that easy. Give it a try!
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License
More Like This
- Designing a website application with Fireworks CS4
- Creating an icon in Fireworks
- Animated logos in Fireworks
- Industry trends in prototyping
- Designing and prototyping Flex applications using Fireworks
- Prototyping for the Apple iPhone using Fireworks
- Creating standards-compliant web designs with Fireworks CS4
- Prebuilt CSS templates in Fireworks
- Exporting CSS with Fireworks CS4
- Designing a media player skin in Fireworks
| 09/07/2011 | How do I use FXG XML markup in Shape subclasses? |
|---|---|
| 10/15/2010 | Flex4 Dotted Line |
| 06/25/2010 | ComboBox that uses a NativeMenu (Air API) |
| 05/21/2010 | Localizing a Creative Suite 5 extension |
