The Secret to Effective HTML Page Title Tags
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
Quickshot - Using Subqueries and Count to Display Membership Counts Per RegionThe CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
Formatting Currency Values in JavaScriptMany people have a difficult time trying to generate icons and other common shapes, and spend a great deal of time and energy searching for free clip art that contains the images they need—without ever realizing that they already have access to an entire library of icons right on their computers.
Both the Wingding and Webding fonts that come installed on most computers already contain many common images suitable for use as button icons, or any number of other images that you may need. With Fireworks' powerful ability to convert text to vector paths, these images can be typed directly onto your canvas, and then converted to vector shapes that can be manipulated as if you had painstakingly drawn them yourself.
With the large number of operating systems available these days, it isn't possible to list each method for gaining access to a map of fonts. However, you should know that the easiest method for using Webdings and Wingdings is to use the character mapping utilities found in your computer OS to see them visually instead of trying to figure out the correct keystroke combinations. Depending on your OS, you have several options.
In Windows XP (Home and Professional) you can open the Character Map utility by selecting Start > All Programs > Accessories > System Tools > Character Map. That will open up the character mapping utility that you see in the screen capture below. If you're following along at home, set the font to Webdings from the menu at the top of the window.
As you click on the thumbnail images on the character map, the image of the text object will be slightly enlarged so you get a better idea of how it will look when entered into your document. Now, to capture that little picture all you need to do is click the Select button at the bottom of the window. If you only need the one character, then click the Copy button and you'll be ready to paste the character into your favorite MX application—Fireworks, Freehand, or Flash.
Freehand will automatically read the font type when you paste the character in place, so a simple Ctrl/Cmd+V will do the trick. With Fireworks and Flash you're better off to first create a text box, set the font type to the same one you copied, and then paste your object into the text box.
On a Macintosh system you actually have two choices for reading fonts that are in the fun "Ding" families. The standard method is to choose Applications : Utilities : Key Caps and open that utility to insert your fonts. The Key Caps interface gives you a miniature keyboard that will display the characters for each font once you have selected the font in the Menu bar. Press the keys on the virtual keyboard or press them on your real keyboard and the characters you enter will appear above the keys. Select the characters then choose Edit > Copy, or press Cmd+C, and your text characters will be ready for use in Fireworks, Freehand, or Flash.
Unfortunately, none of the MX applications will automatically read the correct font type when you paste your copied text into a document. So, for Mac users, you'll have to paste the text object in place, and then change the font type to the correct format to see your miniature pictures appear.
Luckily, for users of OS X, there is another solution that's a bit easier to use, the Character Palette. The Character Palette is a nifty little utility that runs in the background and is accessible all the time no matter what application you're using. To access the program you just click its icon in the Menu bar, always found to the right of Help, and the tool opens right up. Now, the trick is that you have to know how to turn this guy on. Easy enough - open System Preferences and click on the International category. Click on the input Menu tab, and check the box that says Character Palette, as you see below.
Once you close System Preferences you'll see the Character Palette appear in
the Menu bar as you see here.
The Character Palette is a true floating palette that will remain at the front of your screen, regardless of the program that you have open. In the screen capture below, you see the best method for using the Character Palette for inserting ding type fonts. In the top drop-down menu set the View to All, and then click on the Glyph Catalog tab. You'll see all of the characters for the selected font in this view, and the insertion of a text object is a simple process. In Freehand, Fireworks, or Flash, just create a text box with the font set to the same one you're accessing through the Character Palette, select the character you want to use, and then click the Insert button. Below you see the settings for the Character Palette that are most effective for using ding style fonts.
Alrighty then. Now that you know how to get these cool little pictures into a document let's look at how they can be edited for some instant graphic effects.
Once you have your object on the canvas in Fireworks, you can modify it in many different ways. The key is a simple operation where the text object is converted to vector paths. With the text object selected choose Text > Convert to Paths. Your text object will now become an editable vector graphic and can be scaled, skewed, and transformed as if you'd drawn the image yourself.
For even greater editing choose Modify > Ungroup to convert the object to paths that can be modified with the Subselection tool, or changed in other fundamental ways. Finally, to take the object to the highest level of editability choose Modify > Combine Paths > Split. Your little picture will now become a series of individual path objects that can be changed easily, as you see in the example below.
The process of editing a ding style font in Freehand is very similar to the way changes are made in Fireworks. Only the command sequences have been changed to protect the innocent. To convert a text object to a vector object, chose Text > Convert to Paths. Follow this with Modify > Split, and your text object will consist of editable paths. Below you see an ambulance along side the original text object that was modified in Freehand.
Things are even easier in Flash. To convert a text object to editable vectors you need merely select Modify > Break Apart. Your text object will now become completely editable; it can be incorporated into a movie, scaled, and have its basic fill and stroke properties modified. All of those steps were used to create the little sample movie you see below, which consists of a single Wingding font object that has been broken apart and turned into a simple animation.
In this article, you've seen some best-practices for inserting Webding and Wingding font objects into an MX application. As you've seen, rather than memorizing a set of keyboard strokes to get the miniature images into your documents, using either the Character Map (Windows) or the Character Palette (Mac) allows you to preview these fun little objects, and then insert them directly into your documents. Follow that up by converting the text object to editable vector paths, and you'll have a surprisingly sophisticated little image all ready for incorporation into your designs.
Approximate download size: 180k
Keywords
character map, webdings, wingdings, character palette
