Making Buttons with Layers in Fireworks MX 2004

You should have completed the initial tutorial on Layers before you attempt this section. If you experience some difficulty with this tutorial, we suggest you re-visit the previous Layer tutorial.

We recommend you attempt to follow this tutorial by also working along in Fireworks. You should launch Fireworks, create a canvas of about 500 x 500 and toggle back and forth between this tutorial and Fireworks as you learn more about layers.
1) We will start with a rectangle filled in Blue.

You will need to set the screen percentage to 100% in order to see the buttons and text the way it will appear on your web pages.

Click on the down-arrow beside the percentage you have and select 100%.
2) The next thing to do is to size the dimensions of your button down. You can drag the corners some, but you may wish to use the Property Panel and change the dimensions to the desired dimensions directly.
For this project, we recommend you start the button with dimensions around 100 x 25. If this proves too small to support the text you will be placing on top of the button, we will expand the rectangle later.
3) Now we need to create a second layer that will contain the same button but display this button in another color - Red.

We will first duplicate this layer that contains the Blue button.

We will drag the Layer 1 on top of the Duplicate Folder. This will make Layer 2, which is exactly like Layer 1.

At this point, your canvas should not have changed. You have placed a Blue rectangle on top of the old Blue rectangle. We will make the Blue Rectangle in Layer 2 into a Red rectangle.

 
4) To make it easier to work on what you think you are working on, turn off the Blue Rectangle in Layer 1 by clicking on the eye.
Scroll around until you see the eye beside the Blue Rectangle. Click on the eye and the eye will disappear. This means the Blue rectangle in Layer 1 is turned off. What you are viewing in the Canvas is the Blue Rectangle in Layer 2.
5) Select the Blue Rectangle and change the fill color to Red.

You should see a Red rectangle on your canvas.

In order to achieve some comfort with the layers, you might wish to cut off the Red rectangle and cut on the Blue rectangle. This will help you get used to using the "eyes" to toggle between off and on.

Next we are going to build the text. You should begin building the text on top of the buttons with the word that has the most letters. We will start with ACTIVITY.

 

6) We will start with the Blue Rectangle On and the Red Rectangle Off. Create a Text Field and try to locate it over the Blue Button. Don't be too concerned if the text field laps over just a little.
7) We can do some adjusting to the Font, the Font Color, and even the Font Size.

In this example, the Font, Font Size, Font color are easily read from the Property Box. Not so obvious is that the text is also centered. This will be important.

Now we want to size the text box to the dimensions of the button (100 x 25) to make sure the button size is OK with our longest word.

We find it much easier to fine-tune the dimensions from the Property Panel.

Adjust the location of the Text over the button. You may use the arrow keys on the keyboard to move 1-pixel at a time when you get close.

When the two objects are aligned, you are almost finished with the project...just the rest of the text boxes to go.

 

If you want to get the feel of the different buttons, you might want to toggle the Red and Blue Rectangles off and on to see the effect.

 
8) Before we move on to the next text, let's make things a little easier for us to keep up with what is happening. Let's label the text in the Layers Panel.
Click on the word Text to open the renaming field. Type something 'short' to remind you of the contents of the text on this Panel. We recommend a single word or an abbreviation. The field space to display is limited.


We need a new text layer to make the next button. At this point it doesn't matter the order that you use since you have already made the button with the largest number of letters. If you remember how we copied the button layer, you are set.

 
9) Duplicate the Activity Layer.

Drag the Activity layer to the folder icon to make a duplicate layer. You will have two text layers exactly alike. The text is already formatted and you are reasonable assured of having visual uniformity between your buttons.

We strongly suggest you first cut one text layer off by clicking on the eye. This lets you view only one text layer....the one you are going to change.

CAUTION: Try not to move the location of the text layer on top of the button.

Delete the letters of ACTIVITY and enter the letters of the new text, like HOME. Home should be centered, have the same font, same font size, and sit on the button exactly where the previous word (Activity) sat.

 

A couple of important points here....the efficiency of making button sets through layers is to almost "automate" the process and still have every button shape the same size and every text label look the same.

Attempting to locate the text field the exact same place over and over again is avoided by getting it "right" once. You then duplicate that button and make the associated text changes for each of the new buttons you need.

 

10) When you have finished making all of the buttons you need by continuing the process described above, you are ready to export the buttons as "products" from your button project. We highly recommend that you save your button project. You may want to come back to this project and make some changes....like different colored buttons or buttons with special effects (bevel, shadow, etc.)

As with all of your image construction projects, you will crop around the button or adjust the canvas size until the canvas is the size of the button 100 x 25.

 

11) Turn off all text layers. Turn off one Rectangle Color and leave the other on. One at a time you should cut on a text layer and export. Turn this text layer off and cut on another. Keep repeating this until you have exported all the buttons of a single color. Repeat with the other Rectangle color turned on.

This should give you a complete set of button-pairs to use for rollover images.