Fireworks

A recently received a letter from a reader asking if I knew of any plug-in programs to create text effects in Fireworks MX. The reader seemed a bit surprised when I wrote back and told them that Fireworks already had the tools to get the job done. "Where is the button?" they asked. Many users feel that if a button isn't on the toolbar, the program can't do it.

In this article, we're going to create some stunning text effects with just a few simple steps and, more importantly, no additional plug-in programs.

Good text effects start with a good variety of fonts. Fortunately, there are a variety of Internet locations for downloading great fonts for free. One of my favorites is www.highfonts.com.

Once you've downloaded the fonts you want, check the directions for your operating system with regard to proper installation. Remember, you don't install the fonts just for the program but for the OS.

Three-Dimensional Text
Here is a simple way to create three-dimensional text. Once you master this basic technique, it will be easy to vary it for your own needs.

1. Open a new canvas to the dimensions you need. I usually like to start with a much larger size and then adjust it down later on. This gives me extra room to work and move things around. For this little exercise 500 pixels wide by 400 pixels high is sufficient.
2. I find that fonts with rounded edges make for nicer three-dimensional effects. After selecting the Text tool, I used the Property Inspector to select the Comic Sans MS font. I set the size to 100 pixels and the font to bold. Of course, you'll need to adjust these settings for your own particular needs.
3. For this example, I'm just going to type the word Welcome as our working text. You could use whatever text you want.
4. Once typed, you want to make sure that your whole text box is selected so that any settings you make will apply to all the text and not just where the insertion point is. I usually instruct my beginner students to click on the Pointer tool, click away from the text, and then once on the text again. This should ensure that the whole box is selected.
5. The next step is to clone the text by selecting Edit @> Clone.
6. In my own work, when I create layers I like to move the cloned text, temporarily, to a different area of the canvas. I find this makes it easier to see fill effects.
7. Open the Layers panel. You should see two layers now. Click on the two layer icons to see what layer goes with what text. It's always good to name your layers. Name the original layer Bottom_Text, and the cloned layer Top_Text.
8. Make sure the Top_Text layer is selected and open the Fill Color Box in either the Tool panel or the Property Inspector. Once open, select Fill Options…
9. For this example, I'm going to select the Fill Category of Gradient and a pattern of Linear. For the color, I'm going to use silver. Later on, once you have this basic technique, you could try any combination of settings. I like textures also.
10. Your Top_Text layer should now have a metallic look. We 'll leave the Bottom_Text layer set for black.
11. From here on in, the 3-D effect is easy. Using the Pointer tool, drag the Top_Text layer over the Bottom_Text layer and offset it a little to the left. You can use the arrow keys to move the text one pixel at a time. This allows you to adjust the amount of 3-D that you want.

You now have great looking 3-D text that was easy to create and, more importantly, very easy to control in terms of offset, colors, patterns, etc. (see Image I).

Attaching Text to a Path
Sometimes you might want to curve your text around an ellipse. For example, we can use the technique you are about to see have the text surround an image.

1. Start a new canvas. For this second demonstration, let's make the canvas 500 by 400 once again (as before).
2. We are going to begin by drawing the path we want our text to follow. Let's select the Ellipse tool and draw an ellipse approximately 475 pixels wide by about 250 pixels high. If necessary, set the fill color to none and the stroke color to black so that we just see the outline.
3. For the time being, we just want to use the top half of the ellipse as the guide. The bottom half will be used shortly. In order to split the top and bottom of the ellipse, select the Knife tool from the Tools panel. While slicing the ellipse from left to right, use the Shift key to keep the slice straight. After doing that, you can select each half and, if you want, move them apart slightly.
4. In the Layers panel you should now see two Path layers. Name the layer associated with the top half Top_Half. Name the bottom layer Bottom_Half.
5. Select the Text tool. For this exercise, I am once again using the Comic Sans MS. Set it to 75 pixels and Bold. I'm using black as the color, but you can use any color you want. To help position it properly on the guide, set the alignment to Center (using the Property Inspector).
6. Type the text Welcome To. Name this layer Top_Text. Its position on the canvas is not critical at this point.
7. Using either the canvas or the Layers panel, select the Top_Text layer. Using the Shift key, select the Top_Half layer. You should see both layers selected.
8. Select Text @> Attach To Path. (Note: If that option is unavailable, you don't have both paths selected.) Your text should now be aligned with the Top_Half path (see Image II).

   Notice that the two paths are now merged together.

9. Select the Text tool again and, with the same settings, type Fireworks MX.
10. Name this layer Bottom_Text.
11. Like before, select the Bottom_Text and Bottom_Half and, again, Text @> Attach To Path.
12. Your text is probably backwards and upside down. Unless you want to keep it like that, it is easily fixed by selecting Text @> Reverse Direction. Your finished result should look something like Image III.

You can fill in the center with an image of your choice. Also, the two halves can be moved at will.

Filling Text in with an Image
Here is a very startling effect: we're going to fill in the text with an image. For this one, I selected a photograph taken by a friend, June Daniel, in New York State. Also, to make this effect stand out, you should use a thick font. I am going to use an Arial Black set to 90 pixels and bold.

1. For this demonstration, I'm using a canvas set to 800 pixels wide by 275 pixels high. I imported my friend's JPEG image, taken with a digital camera, and stretched it to accommodate the canvas.
2. Name this layer Base_Photograph.
3. I select the Text tool and, as discussed, use Arial Black set to 90 pixels and bold. Type Fall In New York.
4. Name this layer Fill_Text.
5. Use the Pointer tool and position the text so that it is approximately centered on photograph. Precise placement is not critical. Image IV will show you the initial setup.
6. Select the Base_Photograph layer and select Edit @> Cut.
7. Click on the Fill_Text layer and select Edit @> Paste Inside. The results will be something similar to what you see in Image V.

The photograph is now inside the font as a fill. Of course you could change the background to anything you want to create some interesting effects.

Freeform Text
For a final demonstration, we're going to give each letter a life of its own.

1. Start a new canvas and decide what size you want.
2. Select a font and size it so that the words Fireworks MX fit on the canvas.
3. As before, use the Pointer tool and select the entire text box.
4. We are now going to break the text apart. Select Text @> Convert to Paths. This converts each letter to a vector path. Select Modify @> Ungroup. Each letter is now a layer of its own with its own life.
5. In addition to moving each letter around, you can use the Pen tool to reshape the letters. Image VI is an example of what is possible.

Summary
As you can see, we created some great effects by using some simple, built-in tools. In addition, they were not very difficult to create. Try combining two or more of the above effects to do even more.

There is no question that plug-in filters add a lot of great functionality. In addition, most are very easy to use. However, before you go out and spend money, take a look at what you can do with existing tools. You might be pleasantly surprised.

Next month we're going to look at built-in, and third-party, filters for Fireworks MX.

Add Your Feedback

In order to post a comment you need to be registered and logged in.

Register | Log in

Please wait while we process your request...