Text on a Path

Aligning text onto a pre-drawn path is a very effective (and very simple) way of spicing up the text content of your page. Whether you're designing a banner, or just fooling around with headings, this is an eye-catching method of livening up the page.

And it's so simple...!

Aligning Text to a Path

As the name of this tutorial suggests, you need to create 2 items for your canvas - some text and a suitable path, so:

Stage 1

Create a canvas large enough to hold your text and path (you can always change the canvas size while working if you need to by clicking MODIFY>CANVAS SIZE and entering the new dimensions in the appropriate fields). Click on the Text tool and then click in the canvas. A text editor window should now appear which will allow you to choose your required font, font size, style (bold, italic etc) and text colour.

Once you have made these decisions, type the required text into the text window. When you're done with that, click O.K. and the new text block will be entered onto your canvas.

Stage 2

Click on the Pencil Tool. You can actually use any of the vector tools available to you through the Toolbox (such as the Pen Tool, or even any of the regular "shape" drawing tools), but the Pencil is a good place to start. Draw the path shape along which you wish to align your text. A curve, a squiggle, whatever! Just don't draw a straight line (because the Text Tool does that all by itself!). And try to avoid very sharp turns, as these will cause problems later (see Stage 4). The finished path will be highlighted in Fireworks' normal blue.

Stage 3

Get rid of the Pencil by clicking to select the Pointer Tool.

Press Shift and click on the text block created in the first step. Both the path and the text block will now be highlighted.

Click TEXT>ATTACH TO PATH and your text will glue itself to the Path drawn in stage 2!

Stage 4

For all your attention to detail, you may now find that the idea in your head does not quite come up to your expectations once it's on the page! The text may appear "squished" or jumbled up somewhat (largely depending on the nature of the path you have aligned it to!), so you should now explore the many options for "fiddling" with your creation further (using TEXT>ALIGN, or TEXT>ORIENTATION), to improve the appearance of your message. You can also experiment with the SKEW option (MODIFY>TRANSFORM>SKEW) for added impact.

The above image has had vertical orientation and skew applied to it.

Stage 5

Now all you need to do (if you haven't already!) is apply any of the desired effects available through the Effects panel to your text ("Drop Shadow" is a good one to start with!) and BINGO! Instant, eye-catching Web graphics, with a message all of their own!