Create a contrasting background for the logo

The Cafe Townsend logo is not clearly visible because it's black and transparent against a dark background. You decide to place a lighter colored rectangle behind the logo to make it stand out more.

In the Layers panel, select the Logo layer.

In the Tools panel, select the Rectangle tool.

In the Property inspector, set the following properties for the tool:

Click the Fill Category box and select Gradient > Linear.

Click the Fill Color box next to the bucket icon and then click the button just above the Preset label in the dialog box that appears.

A pop-up window appears to let you pick the first gradient color.

Type F7EFE3 in the text box at the top of the window, and then press Enter.

The beginning color of the gradient changes to reflect your color choice.

Click the second gradient color button (on the right side of the dialog box) and click the white swatch with the eyedropper pointer.

The ending color of the gradient changes to reflect your color choice.

Click the Opacity button for the second gradient color, in the upper-right corner of the dialog box:

The Opacity pop-up window appears.

Use the slider to set the opacity of the second gradient color to 50%.

Press Enter to accept the settings, and then draw a rectangle over the Cafe Townsend logo in the banner.

When you release the mouse button, a semi-transparent rectangle appears over the logo.

TIP

Increase the document magnification to fine-tune your work

Select the Pointer tool (or press V) and drag the blue corner points of the rectangle to position and resize the rectangle so that it is within and slightly smaller than the logo.

The rectangle obscures the logo beneath it. You want to change the stacking order of the two objects so that the rectangle is beneath the logo.

In the Logo layer of the Layers panel, drag the rectangle object so that it is below the logo object (called "Group: 3 objects").

The logo is now properly displayed, with the rectangle highlighting rather than obscuring the logo.

Save your work.

Comments

piper1737 said on Jun 13, 2006 at 11:37 AM :

This is my first every tutorial using fireworks, so, please bear with me.
First when clicking the Fill Color box next to the bucket icon, the box is not displayed as in the tutorial. The Preset box is colored 'blue' instead of "white" and there are 4 gradient button's above the "Preset:" box and mixed colors in both the "Preview:" and gradiant box. Saying that, this sort of threw me off until I eventially figured it out.
I slide the two additional buttons in the middle just above the Preset label in the dialog box to the right, which I assumed now has a total of 3 buttons stacked on top above the Preset box.

Now after following steps 3d through 3f, the tutorial picture looks like the pictures shown except for the blue color in the "Preset:" box. The two extra gradient butttons I slide to the right are now gone. Now there are only the far left and far right gradient buttons above the "blue" preset box.

Thanks,
Bob Randall,
Student at Champlain College of Vermont

Question: is the blue color in the "Preset:" box changable and can the colors remaining from a previous setting be reset before starting?

No screen name said on Aug 7, 2006 at 4:07 PM :

Up until I got to this point evrything was great. What I would like to know is how, in the cafe Townsend .ai graph, is the border transparented out (for a lack of a better word) right above the lettter "F". Because of this tutorialal I am learning great deal but, I am trying to look at this from the prespective that I am creating everything from scratch. I had no problem name and border. But for 2 days I have been searching for how to create that effect above the "f", in the border. I am hoping that it a part the application tools and not a manual fix.

Current page: http://livedocs.adobe.com/fireworks/8/fwhelp/gs_05_w7.htm