Working With Images in PHP - Part 1: Rotation
Topaz Simplify 3 Review
Happy Labor Day!
The Secret to Effective HTML Page Title Tags
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
Page 1 of 1 Thierry Lorey has been a Fireworks enthusiast since version 3 and is now Fireworks Zoneâs webmaster, Fireworks beta tester and author for Community MX. He is the first European Fireworks enthusiast to write an article for Fireworks Developer Center. After some translation and training jobs, he is now the full-time Fireworks Zone's webmaster. His job includes writing news, tutorials, creating graphics, and maintaining and developing the website to keep the content new and fresh.
Web 2.0, a term coined by O'Reilly describes the new trends in design and development appearing across a flood of innovative web sites. This tutorial will show you how to create some of the most popular "Web 2.0" design effects using Adobe Fireworks.
In this easy, step-by-step tutorial I am going to show you how to design a simple, professional and glossy "Download" button. I am just using download as an example here, it is really a multi-purpose button. These kinds of buttons are being used a lot on Web 2.0 sites lately, so get with the times!
In this tutorial you learn how to:
To give you an idea of how things will look by the end of this tutorial, here is the completed image:
Start by creating a new document to make your button. I created a large document sized 800 x 800 px. Now you need to make the shape of your button. Select the Rectangle Tool and draw a rectangle about 237 x 84 px then apply a roundness of 30. Fill your shape with a grey (#D6D6D6). Your button should now look something like this:
Figure 1 - The rectangle with round corners
Time to add a nice, glossy shine to the button. We need the top half of the button to produce the glass effect. Use the Intersect Tool to punch a vector and create a new path formed by the area common to the rectangle and the oval (see Figure 2 Green area). Start by drawing out an oval with the Ellipse Tool and set its opacity to 35.
Figure 2 - Rectangle and oval common area
Right-click the rectangle, choose Edit > Clone and lock the second rectangle (see Figure 3) to avoid it being punched. A padlock icon indicates that the layer is locked. Please note that you could have cloned the rectangle earlier in Step 1.
Figure 3 - Layers panel with padlock icon
Now, select both the oval and rectangle shapes to punch the common area and choose Modify > Combine Paths > Intersect.
Figure 4 - New closed path
Select the new path and fill it with white (#FFFFFF) and apply a blending mode (Average or Soft Burn) or adjust the opacity of the object to 35.
Figure 5 - New path with fill and blending
Before applying a drop shadow, unlock the rectangle layer (otherwise you won't be able to apply an effect) by clicking on the padlock icon and then apply a drop shadow to it with these settings:
Figure 6 - Drop Shadow applied the rectangle
This text effect requires 2 text layers. Select Text Tool, choose the Arial font, size 30 and type "Download", make it a grey color (#999999) and clone it as in Step 2. We have now 2 text layers of the same colour.
In the layers panel select your duplicated text (the second "Download") and change the text color to white.
With the second "Download" still selected, press the Down arrow key of your keyboard once then the Right arrow key (see Figure 7). Select both layers and group the 2 text layers (Modify > Group).
Figure 7 - Text effect with Arrow Keys
Now place your text on top of the rectangle and you are done!
Figure 8 - Completed Web 2.0 button
Easy as pie! Now you can experiment with your new skills and make things spiffier than ever! Have fun, and enjoy.
Page 1 of 1 1
Keywords
button, web, 2.0, gloss
