In this Macromedia Fireworks tutorial, I will show you how to create the metal horizontal menu in my image. Please see the image that I have provided to see the ending results. There are a few steps to creating this menu. This metal menu really isn’t that hard to make, it just takes patience. I will write this tutorial in detail so that the new Firework users can create this metal menu too.
How to Create a Metal Horizontal Menu in Macromedia Fireworks
The first step is to create a new canvas to work on. If you just opened Fireworks, a window will pop up and ask what do you want to do. Click on Create a New File. Then enter the size canvas that you want. 500 pixels by 500 pixels is a good size canvas for creating this menu. You can crop the menu at the end. Set the background color to the color that you need. Then click the OK button. If you already have Fireworks open, click File gt; New to create a new canvas.
You will see your new canvas in the Fireworks window. Make sure that the view is at 100%. Sometimes when you open Fireworks and create a new canvas, it will drop the view to 60%.
Next, you will need to select the Rectangle Tool from your toolbar and draw a horizontal rectangle. The length will depend on how many buttons you will need. You can always stretch it as you go.
Next, we will need to apply a gradient effect to the rectangle. Look down in the Properties box and drop the Solid box down. Then click Gradient gt; Linear. Now this is where is will get a little complicated if you are new to Fireworks. You will see the Gradient Color where the solid color was. Click the box to open your Gradient box. Now you will need to add another color to the Gradient. Click in the middle of the box to add a color. Now you should see three arrows on the gradient box. Now you will need to change the three colors. The middle color will be white. The two end colors will be #CDCDCD. Click on your canvas to close that box.
Next, we will need to turn the Linear. Click on your rectangle to select it. You will see an arrow on your rectangle. Grab the end of the arrow and pull it back to the left to make the arrow smaller. Now you will need to turn the arrow up. Grab the middle of the arrow with your mouse and turn it. The arrow should be the same length as the menu. If it isn’t then make the arrow smaller.
Now we will need to apply a stroke to the menu. This will make a border around the menu. Click on the menu to highlight it. Drop the Stroke field down and enter this color # CFCFCF.
Next, we will add the bars to separate the buttons. Select your Line Tool from your toolbar. Draw a line down the menu. Change the line color to # 999999. Now we will apply the effects for the line. Click Effects gt; Bevel and Emboss gt; Inner Bevel. This is located in your Properties window. When the box comes up Drop the top box down and select Ring. Drop the bottom box down and select Inverted. Click off the box to close it.
Now you can duplicate that line to create the other lines. Right click on the line and click Edit gt; Duplicate. The slide the line over to where you want it. Continue doing this until you have all of the lines that you need.
Once you have finished with the lines, you can start adding your text for your links. After you add your text, you can crop your canvas and export it. If you have any problems with this Macromedia Fireworks Tutorial, please feel free to leave me a comment at the bottom of this page.
