Adding Type
With the background in place, now you'll add some text. Text in Fireworks works like a hybrid between the way text works in a word processor and the way Fireworks handles vector lines and shapes.
1. | Select the Text tool. |
The Text tool is represented by the A icon in the Vector section of the Tools panel. Notice that as soon as this tool is selected, the Property inspector reveals text formatting options, including font face, size, bold and italics, alignment, and more.
Tip
You can also access the Text tool using the keyboard shortcut: T.

2. | Use the Property inspector to change the Font to Arial Narrow, the Size to 26, and the text Color to medium gray (hexadecimal #999999). |
You can format text after it's been created, or you can create a default formatting. In this case, you're creating a default format before you start typing anything.
Tip
Text, like any closed vector shape, can have both a stroke and a fill. By default, in Fireworks and almost all computer applications, the text color is specified as a fill, and the text has no stroke (or, more precisely, a transparent stroke).
[View full size image]

3. | Click anywhere on the canvas. Type ade . Switch to the Pointer tool, and then switch back to the Text tool. Click anywhere on the canvas away from the first text block, and type alley . |
This text is for Jade Valley, of course, but because you'll format the
J and
V in a special way, it's easier to keep them separate.
When you switch temporarily to the Pointer tool, you make it possible to type "alley" into its own text block. You can globally format each word (or, in this case, part of a word), and then position each one individually.

4. | Repeat Step 3 and type the letter J and the letter V into their own text blocks. |
Positioning doesn't matter just yet. The important thing is to have four separate text blocks at the end of this step.

5. | Use the Pointer tool to select the J text block. In the Property inspector, change the Font to Georgia, set the Size to 50, make it Bold, and set its Color to #FF9900, a bright orange. |
The
J is much more prominent than before.

6. | Change the V to Georgia, set its Size 50, and set its Color to #669900. Do not make it bold. |
Now the design has two of the primary colors used in the site. Of course, it probably looks more like scrambled eggs than a logoat least until you reposition the various text blocks.
7. | Use the Pointer tool to reposition the text blocks, so they appear as in the figure. |
Remember, in addition to dragging objects with the Pointer tool, you can also nudge them using the arrow keys on the keyboard.

8. | Save and close logo.png. |
You're finished working on the logo for now. In Lesson 3, you'll optimize and export your logo for use on the Web, but for now, just save the file.