Macromedia Fireworks: How to Create a Rainbow Beveled Menu

In this Fireworks tutorial I will show you how to create the rainbow beveled menu in my image. Please see the image that I have provided to see the outcome of this tutorial. This menu has the colors of the rainbow and it has a beveled effect applied to it. That is why I named it the rainbow beveled menu. There are two parts to this menu. The first part is creating the background of the menu and the second part is creating the buttons for the menu. I will write this Fireworks tutorial in detail so that the new Fireworks users can create this menu too. Go ahead and open your Fireworks program and we will get started.

How to Create a Rainbow Beveled Menu in Fireworks

First, we will create the background of the menu. Go ahead and create a new canvas to work on. If you don't know how, click File > New. When the window pops up, create your canvas 500 pixels by 500 pixels. You can crop your menu at the end. Select the color background that you need.

Next, we will draw the menu using the rectangle tool from the toolbar. Select your rectangle tool and draw the menu on your canvas. The size of the menu will depend on the number of button you are going to need. You can resize the menu as you go by grabbing the corner of the menu and pulling it in or out.

The next step of this Fireworks tutorial is to apply the effects to the menu. First, you will need to apply the solid color to the menu. Drop the solid color box down and enter # 28a2f1 in the color box. Next, we will work with the Stroke Properties. Apply the following in the Stroke Fields.

Color - # 0000FF
Tip Size - 19
Stroke Category - Unnatural > Outline
Edge Softness - 100
Texture Name - Grain
Amount of Texture - 0
Rectangle Roundness - 0

Next, we will apply a drop shadow to the menu. Click Effects > Shadow and Glow > Drop Shadow. Apply the following to the drop shadow fields.

Distance - 7
Color - # 999999
Opacity - 65%
Softness - 4
Angle - 315

Click off of the box to close it.

Now we will create the buttons to go on the menu. Select the rectangle tool and draw a button on your menu. We will draw and apply the effects to the first button and then we will duplicate the other buttons.

Next, we will apply a gradient effect to the button. Click on the box that says Solid. When that box pops up, click Gradient > Linear. Then click on the color box to change the color. You will need to add another color to the gradient. Click in the middle of the two arrows to add another color. The two end colors will be # 8664BC. The middle color will be white. Change those colors and click off of the box.

Now we will need to turn the line on the button. Click on the button to select it. Notice the line going across the button. Grab the line with your mouse and turn it vertically. Then size the line down so that it goes from the top of the button to the bottom of the button.

Now we will apply the stroke options. Apply the following to the stroke fields.

Color - # 8FF6E2
Tip Size - 1
Stroke Category - Basic > Soft Line
Edge Softness - 50
Texture Name - Grain
Amount of Texture - 0
Rectangle Roundness - 0

Click off of the box to close it.

Now you are ready to duplicate the other buttons that you need. Right click on the button that you just created and click Edit > Duplicate. Then drag the duplicated button below the original button. Continue doing this until you have all of the buttons that you need.

The last step of this Fireworks tutorial is to add the text to your buttons. Select your Type Tool from your toolbar and draw a text field on your button. Then type your text. Repeat this step until you have all of your text added to your buttons.

You can crop your menu if you need too by using the crop tool in your toolbar. If you have any problems with this Fireworks tutorial, please feel free to leave me a comment at the bottom of this page.