16 PAGES | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

10 simple steps to create a shiny button in Fireworks

Posted by David on Jun 2nd, 2010

The start of several how to guides on using Fireworks.

Creating buttons is probably the most important aspect of using Fireworks, and it does not have to be complicated.

This guide will show how simple it is to create a button using Adobe Fireworks from here we can then adapt our buttons and create new buttons, which we will do in future guides.

Creating this button
Download the PNG file

Enjoy and please leave your feedback if you have anything to say or suggest, even if there are any specific guides you would like to see in the future.

1. Create a small rectangle
My button is quite large at 270 x 60 pixels
Button step 1

2. Make the edges 100% round
If you prefer a squarer box then adjust the roundness as you see fit
Copy this for later (Select it and hit CTRL + C Win or cmd + C Mac)
Button step 2

3. Add a Style of your choice
There are many styles available in Fireworks, plastic styles work well on this kind of button.
Button step 3

4. Create a small circle
Use align to align vertically centre and adjust it by manually nudging to the right edge
Button step 4

5. Type your text
I have added two lines of text; main text at 18 point and the smaller instruction text at 11 point.
Button step 5

6. Add inner shadow to circle
The default level of shadow is good but adjust as required
Button step 6

7. Add drop shadow to rectangle button
Visually it is best to use the same shadow settings as previously used in step 6
Button step 7

8. Paste the original rectangle back on top of itself
Using CTRL + V Win or cmd + V Mac
Change the outline to light grey at 2 pixels
Change inner colour to none or transparent
Button step 8

9. Add arrow to circle using autoshapes
Or any other symbol available in symbols library or autoshapes
Button step 9

10. Final tweaks of text colour
Try to be consistent and use the same colour at key points; main text and circle, small text and outline
Button step 10

The Results
Some examples of adapting the button for use
Button final step and samples

Create a blank canvas button, as seen in position 4 of the sample, which can be used as a background for adding text within the web page using HTML.

Download the file

Download the sample file containing the 4 examples buttons shown above.