Monday, October 1, 2012

Create a Fireworks Nav Bar

Use Fireworks to create a working navigation bar.

Step 1: Open Fireworks and create a new document the size of your navigation bar, such as 900px wide by 30px high.

Step 2: Create a rectangle the size of one of your buttons. For instance, if my nav bar has 6 buttons, I divide 900 by 6 to get 150px for each button.

Step 3: Convert the rectangle to a button symbol - Modify --> Symbol --> Convert to Symbol

Step 4: double-click the Button Symbol to enter "Button editing" mode

Step 5: Add text and center it on the rectangle (use your longest text field to create this template

Step 6: Add any filters to enhance the appearance of your button, such as bevels or drop shadows

Step 7: Go to the Over State and copy the Up graphic.. make a change to the rectangle or the text appearance so you will have a rollover effect.

Step 8: Go to the other states and copy the previous graphic

Step 9: Return to "Page 1"

Step 10: Clone your button to fill the document window with as many buttons as you need

Step 11: Change the Text in the Properties Inspector for each instance of the button.

Step 12: Export your navigation bar to Dreamweaver (make sure you click outside of all your buttons before exporting or you will export only one button)

You can watch this on YouTube video HERE

No comments:

Post a Comment