Fireworks Create tabbed Web navigation bars

Now tabbed Web navigation bars are very common in many large sites, and this article tells you how to use fireworks to make this type of tabbed navigation effect. First let's look at the final effect:

1, open the FW 8.0 (the author is using the 8.0 version, of course, other versions are also possible)

2. A new one with a steady size 760x400

3, with a rectangular tool to draw a gradient rectangle, where this rectangle is to be used as the background of the navigation bar, so you can deploy your favorite color.

4, then use the line tool to draw two lines, see the following figure, as a separator line to use.

5, and then press and hold Shift+g to the two lines to synthesize the object, copy this object, from the window alignment panel finally see the following figure:

6, down these several is more key, press the shortcut key Ctrl+f8, the New Component window Select button.

If you see this dialog box then you are right.

7, let us create the button here! Use the rounded Rectangle tool to draw the image below, the gradient is shown below, and the border is one pixel.

8, and then copy this graphic to remove the border, adjust the size of the button has a protruding feeling.

9, now we do the following triangle I use the path.

(1) Right-click on the top of the graph just now to select and cancel the combination

(2) Choose Folding Pen Tool in the following path plus three nodes see the following figure:

Select the White Arrow tool and drag down the middle node into a triangle

(3) Write the text

(4) In fact, we have completed a diameter of 70% of the workload. We continue to look down:

See component Edit area Here's the slip, press ...

Click to slide over, press ....

And each step will be selected to copy the Bouncing graphics, this is where to see the following figure:

If you can not find it, you open your eyes hard to find!

(5) Here is not urgent to finish, but first go back to release the button background graphics deleted, do not delete the text Ah!

(6) Click Finish.

10, now we go back to the scene, press F11 open the Library panel to drag out the button from the library.

11. You can drag out the number of buttons you need according to the number you want to do.

12. Select the button individually and enter different text in the property bar.

13, adjust the distance between the button.

14. Select "File"-> "Export"

Here must choose "to the Image folder", or your picture will be out.

OK, in the browser to see if it is OK. Of course, you can also fall to the DW processing code, you can also use more exquisite art effect to make the label more beautiful, I do not say more here.