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:
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.
You might also be interested in:
- Creating a Web 2.0 Shiny Text in Fireworks
- Creating the “reflection” effect in Fireworks
- Creating an iPhone App style icon in Fireworks
- Creating the “Aqua Sphere” effect in Fireworks
Filed under: Fireworks Tutorials
ohohoho it is cooool x)
i think i just might urinate myself cause of its awsomeness
keep up the good work!
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.