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


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


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)


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


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


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


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


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


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


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


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


The Results
Some examples of adapting the button for use


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.

how_to_guide button Fireworks COMMENTS (0) Jun 2nd, 2010