Glossy Web 2.0 button

Description

This tutorial helps you to create a Web 2.0 Contact button.

Requirement

Fireworks CS3 and higher

Completed image

To give you an idea of how things will look by the end of this tutorial, here is the completed image:

Instructions

1. Base

Now you need to make the shape of your button. Select the Rectangle Tool and draw a rectangle about 240 x 86 px.

• Then apply a roundness of 11px,
• Add a stroke of 3 with the Photoshop Live Effects,
• Fill your shape with a linear gradient,
• Last effect is Drop Shadow.
Your button should now look something like this:



Figure 2: Effects

2. The glossy part

Time to add a nice, glossy shine to the button. We need the top half of the button to produce the glass effect. Clone the base, and add a rectangle on the upper part of the base for punching.

Use the Intersect Tool to punch a vector and create a new path formed by the area common with the round base and the rectangle. Select the base and the rectangle and Modify > Combine Paths > Intersect.

If you are not sure about the Layers organization check my tutorial on Community MX: Creating a Web 2.0 Button In Fireworks



Figure 3: Intersect

Fill the new path with some white color: #F6F6F6. To curve the glossy area, insert an anchor point with the Pen Tool (1), then with the Pen Tool drag the control handles (right and left) (2) and finally pull the anchor point downwards (3). Final result (4).

If you don't want to use the Pen Tool, press the Down Arrow key until you are satisfied with the result.



Figure 4: The Glossy Area/p>

3. Create A Text Effect

This text effect requires 2 text layers. Select Text Tool, choose the Arial font, size 30 and type "Contact", make it a grey color (#999999) and clone it. We have now 2 text layers of the same colour.

In the layers panel select your duplicated text (the second "Contact") and change the text color to white.

With the second "Contact" still selected, press the Down arrow key of your keyboard once then the Right arrow key . Select both layers and group the 2 text layers (Modify > Group).



Figure 5: Final Result