Dingbat Fonts at RAHC

Do you know the difference between shareware, commercial, and freeware fonts? Many people don’t!

A lot of creativity, time, energy, and money goes into creating, maintaining and marketing quality dingbats and other fonts, so we all need to respect the creator’s time and energy by obtaining the appropriate license to use fonts.

What is a freeware font? It’s a dingbat or other font that is licensed at no cost to be used as specified by the font creator. In some cases this means that you are free to use them for any type of graphical creation, but font creators do set different terms. Please be sure to read the terms enclosed in the zip file for each specific font to make sure you understand the terms of use. Our freeware fonts may used to create graphics and designs, but may not be sold, shared, or added to any CD-ROM, website or  other font repository without our express consent.  Here we use two different freeware licenses: commercial freeware (or just plain old freeware), which you can use for any type of personal or business graphic, and non-commercial freeware which may not be used to make or attempt to make money in anyway.

What is a shareware font? It is the least understood and most often abused type of font. It’s a dingbat or other font that “TRY BEFORE YOU BUY”.  You can download the font for free to try it. A shareware license allows you to try it out, but before you use it for any projects that you share or publish in any form, personal or commercial, you need to purchase a license for the type of items you create to distribute or share or publish.  You may not create artworks or graphics with them that you share, post on the web, publish, print, or do anything else with until after you’ve bought the appropriate license.   If you will be using it only for personal things that you make no money whatsoever doing, such as your homepage where you do not have for-pay ads or other for-money things, then a shareware license works.  If you use it for anything at all that you make money on, websites with ads, graphics or publications for customers, any business or commercial work, you need to get a commercial license. Again, our shareware fonts may not be sold, shared, or added to any CD-ROM, website or  other font repository without our express consent.

What’s a commercial dingbat font? It’s a dingbat font that is licensed to be used for commercial and business purposes, as well as personal use.  If you use it for anything at all that you make or try to make money on or with, like websites with ads, graphics or publications for customers, any other business or commercial work, you need to get a commercial license. And as always, our commercial fonts may not be sold, shared, or added to any CD-ROM, website or  other font repository without our express consent.

To make it boil down to simplicity, if you’re going to do anything with the font that has a chance of making money, you need a commercial license unless the font creator specifically states that you may use the font to create commercial or for-money projects with it.

2009 Note: This article was written in 2001. Since Fontographer does not work natively with Windows XP or higher, the exact details are in many cases obsolete. However, the concepts can be used with any similar font creation program.

When I started using Fontographer, it was a trial by error process. I didn’t sit down and read the entire manual (but who does?). I did end up referring to it on an as needed basis, but I can’t say that it addressed most of my problems. Why? Because these were the type of things that are learned with time and experience (and a lot of head banging on the wall). What are the things I wish I had known when I started? Let me share.

1. That I should always clean up points (menu = Element/Cleanup Paths). Why? Because it makes for a cleaner, smoother and smaller font. In Fontographer each glyph is made up of several points. However, it does not necessarily mean that each point delineates a change in the character. A single line in Fontographer takes two points: one to start it and one to finish it. If you have a line with 50 points in it, you have 48 unnecessary points. Each of those 48 points has the potential to make your glyph jagged at larger sizes and each of those 48 points adds to your overall file size. Using the Cleanup Paths feature allows you to clear up your glyph of these unnecessary points in one fell swoop.

2. That I should correct the path direction (menu = Element/Correct Path Direction) before removing any overlaps (menu = Element/Remove Overlap). Paths alternate clockwise/counterclockwise, starting with the outer path (clockwise) and working toward the innermost path. So take the letter “o”. The outside circle would clockwise and the inner circle would be counterclockwise. But in the process of developing a font, sometimes that rotation gets disordered, especially in the cases where you clip and paste points. This will result in glyphs that won’t show up correctly. And it plays utter havoc on glyphs you are trying to remove overlaps from. The Remove Overlaps feature in Fontographer allows you to remove crossover portions of a glyph automatically. Take the letter “t”. It’s two rectangles intersecting. The Remove Overlaps feature would remove the intersecting part of the “t” automatically. However, if your paths aren’t cycling clockwise to counterclockwise correctly, you can end up with an absolute mess on your hands. A quick menu selection of Element/Correct Path Direction before removing overlaps will save you a lot of headaches in the long run.

3. That I can customize the guides. Wohoo! When I discovered this, I thought I had uncovered King Solomon’s treasure. This isn’t something I do on a regular basis. However, when I’m making interlocking dingbat fonts, this is invaluable. You can switch to the guide layer by highlighting “Guides” in the Layer palette. Use your normal tools to draw your guides and then transition back to the Outline layer. You will notice your custom guides are now green. This makes lining up interlocking fonts a snap!

4. That I can batch transformations from the main menu. One of my first fonts needed to have all the characters moved over about 20 units. So I dutifully went into each and every glyph and moved them over. Little did I know that I could have selected everything from the main menu and performed an Element/Transform from the menu. This would have moved all the glyphs over at one time. What a time saver. Now, I correct path directions, change weight, scale and move glyphs all from the main menu.

5. If possible, to put the majority of characters into lowercase letters. Why? It’s rather simple and it has nothing to do with technical expertise. It’s a courtesy to your users. Sample sheets display more lowercase than uppercase. If you have 26 glyphs and you put them all into uppercase, people can see only 1 or 2 characters in the scaled portion of the sample sheet. Better to put the 26 characters in the lowercase glyphs so they can get a better idea of what your font contains. After all, that’s the purpose of the sample sheet.

Fontographer

by Gabrielle Gaither, 2001

Okay, I’ll admit it to the world, I’m lazy. I’m REAL lazy. But in a good way. I’ll spend hours coming up with a way to shave off 5 minutes of weekly maintenance time. I’ll develop techniques which become patterns for me to follow so I don’t have to “rediscover” methods each time I do things. I like to whiddle things down to a few repetitve steps so that I can remember them. Hence, the 5 minute mouseover button. Initially, this tutorial should take approximately 10-15 minutes. But once you do this tutorial a few times, you’ll see that mouseover menus can be painless, efficient and take less than 5 mintues. Ready? Here’s what you’ll need:

PaintShop Pro
Super BladePro (free trial)
The WK1 Menus Sampler font (free)

***A basic knowledge of PaintShopPro is assumed. Make sure both the font and bladepro presets are installed before starting.***

1. Fire up PaintShopPro.

2. Create a new image which is 150×200 and has a background transparency

3. Rename Layer 1 background.

4. Flood fill this layer with a solid color of R128,G128,B255.

5. Change the foreground color to white.

6. Create a new layer and title it frame.

7. Using the font tool, place your cursor at 75×100 pixels. Click and select WKI Menus Sampler, letter “c”. Change the font size to 175. Make sure the Antialias is on, the Alignment is at left and Floating is checked. Press OK.

8. Without deselecting, activate the Bladepro Plugin. Select GG51.

9. Without de-selecting, apply a drop shadow with the following attributes:

Color: black
Opacity: 55
Blur: 4
Offset Verticle: 2
Offset Horizontal: 2

*Note* This is using Paintshop Pro’s Drop Shadow feature. If you are translating this tutorial to another application, simply use whatever drop shadow techniques you would normally use.

SANITY CHECK! Your graphic should look like this:

10. Deactivate selection. Create new layer and title it java off.

11. Using the font tool, place your cursor at 75×100 pixels. Click and select WKI Menus Sampler, letter “d”. Press OK.

12. Without de-selecting, activate the Bladepro Plugin. Select GG47.

13. Without de-selecting, apply two drop shadows using the following settings:

First time
Color: black
Opacity: 75
Blur: 4
Offset Verticle: -1
Offset Horizontal: -1

Second time change:
Offset Verticle: 1
Offset Horizontal: 1

SANITY CHECK! Your graphic should look like this:

14. Deactivate selection. Duplicate the “java off” layer.

15. Select All in the java off layer and move contents to the right 1 pixels and down 1 pixels. The pixel shown on the bottom should start out at 16,38 and should end up at 17,39 when done. Deactivate selection.

16. Create Two additional layers titled cutout1 and cutout2.

17. While you are still on the cutout2 layer, turn off the visibility of the copy of java off layer.

18. Using the font tool, place your cursor at 75×100 pixels. Click and select WKI Menus Sampler, letter “d”. Deselect the Floating option. Press OK.

19. Without deselecting, apply a cutout using the following attributes:

Interior color: White
Shadow color: Black
Opacity: 65
Blur: 4
Offset Vertical: 2
Offset Horizontal: 2

20. Click on the cutout1 layer. Without deselecting apply a second cutout changing the following attributes:

Opacity: 45
Offset Vertical: -1
Offset Horizontal: -1

SANITY CHECK! Your graphic should look like this:

21. Without deselecting, invert the selection.

22. Click on the Copy of java off layer. Delete Selection (not the layer, the selection).

23. Turn off the visibility for the background, frame and java off layers.

24. Merge visible layers. Rename merged layer to java on.

25. Turn the visibility back on for the background, frame and java off layers. By clicking the visibility for the java on layer on and off, you will be able to see the effects of your mouseover layer.

Then slice and dice!

Viola!! See how easy that was? I have actually gotten this method down to less than three minutes. With this technique, you’ll spend more time selecting your presets than you will doing the mouseovers!

Additional notes:
Depending on the darkness of the presets selected, you might want to adjust the opacity of the cutouts.

by Gabrielle Gaither, 2002

This tutorial gives the general idea of how to use a dingbat to make a graphic for a web page with a tabled “frame.” No actual frames are used for this type of page. You can use your favorite graphics program, as long as it has the capability to have separate layers or objects. This tutorial assumes that you have an intermediate or advanced knowledge of your program and do not need each mouse click laid out separately. Even if you are not as proficient with your program, this tutorial will still give you the concept of how this type of web page graphic is made. Since I don’t know what program you’ll be using, I’ll use the term “layers” as are used in Adobe Photoshop®, Jasc’s Paint Shop Pro® and many other programs. Layers are essentially equivalent in use for this tutorial to the objects used in programs like Macromedia Fireworks® and Ulead’s PhotoImpact®. so if you’re using an object oriented program, treat the “layers” as objects. I’m using a character from my RA Eye Frames font for this tutorial.

Open your favorite graphics program, and let’s go. 1) Create an empty graphic document the size you want the web page to be. Fill in any background pattern, if desired. Note: For this type of web page, make sure your document is no wider than the smallest screen resolution you want to be able to see the web page properly.
	2) Create a new layer and type the the dingbat font you want to use to create your page “frame” onto this new layer. Resize the character until it fits your document appropriately.
	3) Select the area inside the character that you want to fill with a contrasting color, then expand the selection by 2 pixels. Note: In this example, this area will also be where the text will be on the final html page. 4) Save the selection to alpha channel or another file. Then create another layer, and choose that layer, retrieving your selection. Note: In some programs you don’t have to save the selection, you can just create a new layer and choose that layer.
	5) Use the fill tool to fill in the color you want on the inside of your frame. Add any textures, filters, effects, etc. that you want to this layer. Note: If, as in this example, you plan to put text in this area in the final html page, make sure that this area is not too “busy” for text added later to be read.
	6) Repeat steps 2 through 5 for decorative areas or areas where you want rollover buttons.
	7) If you want to have rollover buttons, repeat steps 2 through 5 for an additional layer in the places you want the rollover buttons. Move the layer with the dingbat up to the top.
	9) Slice the graphic with your favorite graphic slicing tool, or by hand. Note: The center area shown by the red dotted lines shows where text will go in the final html page. this area must be clear of any curves. 10) Use the sliced graphic to make your html page.

by Robyn Harton