• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

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. Working with text in Fireworks should be fairly familiar.

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 updates to reveal text formatting options, including font face, size, bold and italics, alignment, and more.

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 are creating a default format before you start typing anything.


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).

Click anywhere on 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 you'll format the J and V in a special way, so 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 and position each word (or, in this case, part of a word) individually.

Repeat Step 3 to 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.

Use the Pointer tool to select the J text block. In the Property inspector, change the Font to Georgia, the Size to 50, make it Bold, and set its Color to #FF9900, a bright orange.

The J is much more prominent than before.

Likewise, change the V to Georgia, 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 logo—at least until you reposition the various text blocks.

Use the Pointer tool to reposition the text blocks, so they appear as in the screenshot.

Remember, in addition to dragging objects with the Pointer tool, you can also nudge them using the arrow keys on the keyboard.

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.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint