The Complete (Almost) Vectorized Webding Catalog

By: Kim Cavanaugh

Page 1 of 2

Set for printing



Way back in December 2003 I wrote a free article here at Community MX called Fun with Webdings and Wingdings which is consistently in the Top Ten of our most viewed tutorials. As of this writing the tutorial has been viewed over 55,000 times. And why not? First of all, the tutorial is free, and secondly, Webdings and Wingdings are lots of fun to play around with. They can also serve some really useful purposes. Depending on the font in that family of "Dings" you can get all sorts of little miniature pictures by just typing in the correct character using the Fireworks Text tool.

The only problem with the method I described earlier was that you did have to take some extra steps just so you could see what you'd get when you typed a character. In Windows that involves accessing the Character Map while on the Mac you need to enable and view the Character Palette to see all the fun character fonts that are available to you. Not always so convenient, even if you do remember where to find the character listings.

Recently I needed some small icons for a design project so I took a little different path. Instead of searching through a character listing I decided to just start up Fireworks and create my own reference library for the Webding font family. And while I was at it, I decided to go ahead and convert all of the text objects into vector shapes. What you'll find here is a somewhat later version of the same file, just a tad better organized. You can use this file for your own design purposes or use it as a reference for creating your own library of characters. In addition there are two source files included in this download—both a Flash and a Fireworks source file that make use of the webding vector shapes included in the library for your examination.

The Fireworks Source File

Included with the download is the Fireworks source PNG file, webding_catalog.png, that contains all of the vector objects created by converting the webding fonts to paths. Actually, what you'll find is nearly all of the characters available in the Webding font family since some of the characters did not survive the conversion in Fireworks from text to paths. While I tested this on several different computers on both platforms, there didn't seem to be any way to get some characters to convert properly. Still, there are a boatload of tiny images included in the source file.

The catalog file is organized into layers based on where on the keyboard the characters were found. You'll find layers for upper and lower case letters, as well as the characters generated by combinations using the ALT key. You can use the Layers panel, shown below, to turn off or turn on visibility of each layer as well as locking layers to prevent selecting objects unintentionally.

Figure 1: Use the Layers panel to identify how the characters were inserted and for file management.

As you can see with the samples shown above, the images created by Webdings are basic little shapes that can be used however you'd like. In the examples you'll see on the next page the compositions were started by simply selecting the shape that was desired from the catalog file, copying the shape, then pasting the shape into another Fireworks file or directly into Flash. For that matter, if you have the screen real estate you can simply drag and drop the shapes from the catalog file into an open Fireworks or Flash document. Since they are vector shapes they'll come across smoothly and cleanly and be ready for you to apply your own edits.

What do you get in terms of images? Well, you'll have to open the file up to see all of the little pictures that Webdings create, but here are a few samples.

Sample webding characters

To keep things simple the objects in the catalog file are all approximately the same size (60 X 60 pixels) and all feature a black fill. You'll find that the canvas is fairly large at 2100 pixels wide, but you can zoom in or out as needed to have a look at the different objects.

So, enjoy! On the next page you'll find two sample files that were created with Webding character objects.

Page 1 of 2 1 2 Next

Download Extension

Downloads are disabled during your trial period.

webdings, webding, ding fonts, vectors