Fireworks CS6 – Easy Rollover Buttons

Adobe Fireworks CS6 is still the application of choice when it comes to creating easy rollover buttons. Fireworks CS6 can also export your navigation/rollover buttons into any HTML document with fairly clean CSS or HTML. Very cool time saver. I started using Adobe Fireworks CS6 back when it was Macromedia. Today most web designers will search Google for Fireworks CS6 vs. Photoshop CC. Both are similar, and even though I prefer Photoshop for many reasons, there are certain things Fireworks CS6 just does better. If you need a stand alone application to help you in your design process, you really should to check out Adobe Fireworks CS6.


Create Graphic Symbols In Fw CS6

In this tutorial I will show you how to create a Graphic Symbol in Fireworks CS6. This is a program that I use on a daily basis. I hope this step by step tutorial helps you. If you have any questions at the end of the Fireworks CS6 tutorial please post your comments below.

Lets create a Graphic Symbol in Fireworks CS6

1. Open Fireworks CS6 and create a new document, any size will do. Once Fireworks is open, you can do create a new document by pressing Command + N on the Mac / Control + N on Windows, or go to the Menu and click on File > New.

2. In this example we will use the Vector Rectangle tool and draw out a box, any size box will do.

3. While your vector object is still selected, go to the Menu and click on Modify > Symbol > Convert Symbol. Or you could do what I do and press F8.

4. This is the window you will name your Graphic Symbol and make sure the name you use relates to your object. For purposes of this tutorial I named mine A Graphic Symbol. Make sure you put a check in “Save to Common Library”.  Then click OK.

5. Our Graphic Symbol was saved to our Common Library to use over and over in any Web project. Very handy and a great time saver when working in Fireworks CS6.

Fireworks CS6 Convert Image to Symbol


6. In your Document Library, you should see the Graphic Symbol we created. FYI, your Document Library is where all of your “Symbols” get saved to, this includes Buttons and Animations. In Fireworks you can convert any Object or Image into a Graphic Symbol for you to use in any Web Design project.