In Fireworks, create a new document larger than you expect your button to be. My initial document
was 300 x 200. You can, of course, create a document the same size as your button image,
but Fireworks??™ Fit Canvas feature makes trimming the excess canvas area a one-click operation.
2. Using the Rectangle tool, draw an object slightly larger than the expected width and height of a
single button; my image is 150 pixels wide by 50 pixels high. The image is to be used in the background
of your navigation element and should be large enough so that it does not tile.
3. Style your rectangle however you choose. I used an orange solid fill (#FF9900) and applied a Vein
texture at 80%. It??™s a good idea to create your graphics with the dual states in mind. I??™ll be able to
create a darker version of my image for the rollover just by altering the texture percentage.
4. Choose Fit to Canvas to trim the excess canvas from your background image.
5. Export in either JPG or GIF format. This serves as the background for my initial button (also
referred to as mouse-out), so I??™ve named this image listnav_out.jpg and stored it in my
Dreamweaver site.
6. Alter the graphic to represent the rollover state. I simply lowered the Vein texture setting to 60%,
which darkens the image significantly.
Pages:
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981