Page Banner

Fireworks Lesson 1-3:
Working with Text

Once you have created a text element, you can treat it just as any other object, applying gradients, patterns, textures, and live filters. You can also add a stroke to the letters and then control the look of the outlines.

Sometimes, you may wish to arrange your text other than in a straight line. It is possible to attach a text object to any vector path object to make curved or shaped text.


Task 1 - Text Effects

  1. Start a new Fireworks canvas 400 pixels wide by 300 pixels high. Save it in your Lesson3 folder as Lastname TextEffects.png.

  2. Add font objects:
    1. Using one or mor interesting fonts or your choice, create three new text objects - one containing your first name, and one containing your last name, and one containing a short phrase about you.
    2. Make them large enough to fill the canvas well.
      It is a good idea to choose a fairly solid font, and or bold it, in order for the effects you will add to show up well.

  3. Experiment with Text effects:
    1. Using the first two text objects, experiment with gradients, patterns, textures and live filters to create an interesting effect on both names.
    2. On the third text object, click the stroke icon in the Tools panel. Choose a stroke color. In the Properties Panel, you will now see a stroke icon with the color you chose.
    3. Change the fill color to none.
    4. Click the stroke color box and click the Stroke Options... button.
      Here you have all the options available for strokes on vector object.
    5. Experiment with the options and create an interesting looking text object, from just the outline. Often the stroke effects take up more room than is normally available between the letters. When this happens, you can use the Kerning option (A\V box) to spread out the letters.
    6. You can also experment with the text direction, if you would like your first or last name to read from top to bottom on the canvas, instead of across.

  4. Add one or Live Filters to each text object.
  5. Adjust your completed text objects to create an attractive arrangement. Save and close your file.


Task 2 - Attaching Text to Paths

  1. Begin by creating a new document, 400 x 400.  Choose a canvas color.  Save immediately in your Fireworks folder as Lastname TextInsideOutside.png.

  2. Create the objects to work with:
    1. Use the Ellipse tool to create a large circle or oval to cover 2/3 to 3/4 of the canvas. Make an stroke with no fill.
    2. Copy and paste the shape twice, leaving the copies in place on top of each other.
    3. Locate and copy a good-sized paragraph of Lorem Ipsum text.
    4. Create a text object a little wider than your shape. Choose a simple font and paste the text into it. Include enough text so it looks like you have much more than needed to fill the shape.
    5. Create another text object with a larger font, and type Curving Around the Outside.
  3. Place text inside a closed object:
    1. Select the Lorem Ipsum text and one ellipse shape.
    2. From the Text menu, choose Attach in Path.
      The text now is filling the shape.
      Note the arrangement - it is close the left edge, but jagged on the right.

      If you see a small red indicator at the lower right, it means you have more text than will fit into the shape. You will have to reduce the font size, or else edit or delete text until you have what you want.


    3. Use the Selection tool to select the text object. on the Properties panel, click the justified button - the text shoudl now fill the shape side to side.
    4. Experiment with font size until you are satisfied with the appearance of the filled shape, then delete any extra text.

  4. Place text outside a closed object:
    1. If the Layers panel is not visible at the right, either click its tab if available, or choose Window > Layers.
    2. Click the 'Curving around..." layer, hold Ctrl and click one of the two remaining elipses.
    3. From the Text menu, choose Attach to Path. Adjust the font size to 40 or more.
      The text curves around the outside of the ellipse.
    4. If the text does not curve evenly, you can use the Scale tool or choose Free Transform from teh Modify menu to rotate the object until it looks right to you.

  5. Finish the design:
    1. Use the Layers panel to select the last ellipse.
    2. Add an interesting edge effect, increasing the thickness slightly.
    3. Change colors as you choose.
    4. Arrange the layers so that the curved text is on the top and the inside text is on the bottom of the stack.
      You can drag layers to rearrange, instead of using the Modify menu.

  6. Make any additional adjustments you feel are needed, and when you are satisfied, save and close the file.


Task 3 - Text On a Freeform Path

  1. Begin by creating a new document, 400 x 400.  Choose a canvas color.  Save immediately in your Fireworks folder as Lastname TextonPath.png.

  2. Select the Text tool, a font of your choice, medium size, and any color. Click on the canvas and type Text on a path can be any shape you want.

  3. Create and edit a freeform path:
    1. Next click on the pen tool in the Vector section of the Tools panel.
    2. Click once to begin your path. Move the pen tool to another place and click and hold the mouse button, then drag to make the path curve.
    3. Continue this process to create several more points to make a curve. Double-click on the last point to end the shape. Don'worry if it is not perfect - you fix it next.
    4. Deselect the curve. With the subselect tool, select the curve, then click on one of the path points - you can move or adjust any of the points to arrange your curve the way you like.
    5. Adjust the path until you are happy with how it looks.

  4. Attach and adjust the text and path:
    text-path-4.gif
    1. Now select both the text and the path.
    2. With the text and shape selected, click the Text menu and choose Attach to Path. The text moves to be along the path, and the path disappears.
      If you need the path to show, you must make a copy of it before attaching the text to one of the copies.

    3. You can still edit your text once it's attached to the path, all you need to do is just double click the text and go into the text editor.
      You can also adjust the position of the text on the path by changing the alignment of the text. Right, left, center, justify, or by adding spaces.
    4. Test the alignment buttons to see the effect on your text.
    5. You can also still adjust the path, if necessary, by using the subselect tool.

  5. Make any adjustments you wish, then save and close your file.


Place a copy of all three files in the WebDesign Turn-in folder on the Common drive.