Creating shiny web 2.0 buttons with Fireworks

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:

pro-glossy-01

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

button1

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

button2

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.

button3

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)

button4

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

button5

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.

button6

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.

morebuttons

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.

You may also like...

16 Responses

  1. awsome man \m/_(-_-)_\m/ says:

    ohohoho it is cooool x)
    i think i just might urinate myself cause of its awsomeness
    keep up the good work!

  2. Sexy7 says:

    This is a nice FIreworks tutorial. However, for those who does not have Fireworks or knowledge of designer and wants create their own button with easy, I will suggest Cool Button Designer. Cool Button Designer can generate buttons for all three states on the fly, mouse over, mouse pressed and normal states. It gives you ability to control the light and reflection, add icon to your button, to gazillion of shapes, etc… Very nice software to create Web 2.0 style button. Cool Button Designer also generates you the HTML code for you to use. It saves the templates, that you can resize any time without loosing the quality of your button.

    You should try it, its not a joke, and with 3-5 minutes you can build this button from scratch.

    I am using it myself for my projects, and very glad to find it.

    Try it, google for Cool Button Designer. Official website has a free trial, limited with watermark only.

  3. devo says:

    Hi i wondering if you can help me, i understand the tutorial and how to create the button but i struggling with the quality issues when exported

    should i create a button in a high dpi (300 / 600) to create a smoother fill or design everything in 72/120 dpi

    and what are the best export option and what actually affect the button so it looks as nice as possible

    many thanks

    • Calvin says:

      72 or 300 doesn’t matter. save the button as JPG (at least 80 quality) for the gradient to appear smooth. PNG would be best if you want to retain a transparent background but it typically generates a bigger file size.

Leave a Reply

Your email address will not be published. Required fields are marked *