Calvin’s Hub

Shiny web 2.0 buttons have been around for quite some time but they still look classy and lots of sites still use them. Here’s an example:

There are lots of Photoshop tutorials out there for this button effect but this guide is made for Fireworks which I think is more suitable for web design. I’m using Macromedia Fireworks MX 2004 but you can use older versions as long as it can create rounded rectangles easily.

So let’s get it on.

1. First let’s create a rounded rectangle. For my example, my rectangle has the following properties:

• Width = 200
• Height = 50
• Rectangle roundness = 60
• Color = #FF6600

2. Change the fill to a vertical linear gradient with the top color being slightly lighter than the bottom color. Here are my colors.

• Top color = #FF9966
• Bottom color = #FF6600

3. Then let’s add an Inner Shadow effect on our rectangle. This is optional but it would add style to our button. Accept the default values but change the width to 2 and the color to #663300.

4. Ok, it’s time to create the shine effect. Create another rounded rectangle that is shorter in height and more rounded then place it on the top part of our button. Here are the properties that I used:

• Width = 190
• Height = 20
• Rectangle roundness =100
• Color = #FFFFFF (white)

5. We have to change its fill to a vertical linear gradient. The top color would be white and the bottom part would be the same color as the top gradient of our main rectangle. Got that? Well here are my gradient colors:

• Top color = #FFFFFF (white)
• Bottom color = #FF9966

There you have it. Your own Web 2.0 shiny button. You can add your own images or text to it and use it on your blog or web site. Export it as JPG or PNG to preserve the gradient quality. Here’s what mine looked like after adding some text and the RSS icon.

If you want to change the color of the exported image. You can easily do that by using Filters > Adjust Color > Hue / Saturation and play around with the values.

If you want to add more class to your button, you can apply the reflection effect to it. Better use this button style before it gets really old.

• Creating a Web 2.0 Shiny Text in Fireworks
• Creating an iPhone App style icon in Fireworks
• Creating the “Aqua Sphere” effect in Fireworks
• Creating the “reflection” effect in Fireworks

Filed under: Fireworks Tutorials