Web Development & Design Foundations with HTML5

Skip to Content 9th Edition

Adobe Fireworks CS5 Tutorial: Creating a Logo Banner Page 4

Using the Fireworks Tool Panel

Select the Text ToolSelect the Text Tool in the Vector Area on the Tools Panel.

Your cursor changes to an "I Beam".



Click on your checkerboard canvas. A blue outline for a text area appears. See the image below.

The I-beam cursor displays

Notice the Property Inspector panel in the lower center of the window. The Property Inspector configures the properties of the text area.

Property Inspector Panel

Place your cursor in the blue text area and type "Acme Web Design".

Entering Text

Your text might look different from the sample shown above. That is OK, you will configure your text in a moment. You will notice the sample text happens to start on the left side of the canvas. Move the text closer to the left side of the image canvas (as shown in the screen shot below) by selecting select the Pointer Tool (see page 2), using it to select the text area, and dragging the text area closer to the left side of the image canvas.

Moving text with the Pointer tool

Now you will configure your text to be appropriate for a company logo banner. Examine the Property Inspector shown below. There are controls that configure the properties of the text, including the font, size, color, style (bold, italic or underline), and orientation (horizontal or vertical).

Select the text area in your image and configure the Property Inspector as shown below:

  • Arial font,
  • size 64,
  • a shade of blue
  • italic

The Property Inspector panel

Notice that the text on the image canvas was changed to match your configuration. You may need to use the Pointer Tool again to position your text so that it completely displays. Your image canvas should be similar to the one shown below.

The text is configured

Let's adjust the kerning from 0 to 100 — this will provide more space between the letters in the logo. See the Property Inspector panel below.

Adjust the kerning

Your image canvas should be similar to the one shown below.

Kerning has been applied

Continue to further customize your company banner logo.

Page 5Next Page