Menus with Beauty and Brains 3 pg 2: Production Graphics with Wendy Peck at | WebReference

Menus with Beauty and Brains 3 pg 2: Production Graphics with Wendy Peck at

Menus with Beauty and Brains 3: Fireworks and CorelDraw Antialiasing

  Although Fireworks technically produces vector text, it handles antialiasing like a raster program. In fact, there is little difference between Fireworks and Photoshop for this subject. Like Photoshop, Fireworks offers several settings for antialiasing.


Various settings for antialiasing in Fireworks.


Fireworks Antialiasing
To adjust the antialiasing intensity in Fireworks, simply select the desired setting from the dropdown list as shown at the left. The effect will not show in the text box, but is shown on the canvas as the setting is changed. If you are not sure which setting to use, make sure that you can see the canvas as you work in the text box. In the sample below, the magnified version of the text shows the antialiasing on the canvas, but the text in the Text Editor shows no antialiasing.

The Fireworks settings for antialiasing are described below to serve as a rough guideline. As with any text, though, it is best to attempt several settings, since every color and font behaves in a slightly different way.

None: Adds no antialiasing. Edges may be jagged, but this setting is almost always used for small type sizes.

Crisp: Adds minimal antaliasing to maintain a sharp edge. This setting is the least invasive antialiasing you can apply, and is the one that I use most often.

Strong: Adds antialiasing to create a thicker look to the characters. This can be used when the normal font is a little light, but the bold version is too heavy.

Smooth: This setting is designed to give you a very smooth edge, and is used most often for very large sized type. You will often find that there is little difference between this setting and the Crisp setting.


Screen font text created with no antialiasing in Fireworks.

Fireworks does a very good job with specially designed screen fonts like the collection shown at the left. These small fonts are designed to be used with antialiasing turned off and at a specific size.




CorelDraw Antialiasing
Illustration programs, like CorelDraw, handle text antialiasing in a completely different way. Since vector programs do not use pixels to form the shapes in a design, there is no antialiasing needed until the objects are converted to raster format. The sample image at the left is a small section of the character "x," magnified 5000 times. Note that the edges are smooth, with no jagginess or antialiased color added. (See Graphic Underworld: Behind the Pretty Pictures for more information on vector and raster formats.)

As long as your objects remains in vector format, you have no need to do anything to keep your text smooth. However, we cannot use vector format graphics on the Web, and must convert to GIF or JPG format. On conversion, you must state whether antialiasing is added. In CorelDraw, the command is included in the Export window as shown at the left. Checking the Antialiasing option adds antialiasing to the exported object.

The two samples shown at the are the same text, created with and without antialiasing specified on export. If you look closely at the diagonal lines in the text of the lower sample, you will see the jagged edges of the text. With text this size, you will almost always apply antialiasing.


However, for small font sizes, antialiasing cannot be used, or the result will be fuzzy characters. If you are exporting text alone, this does not cause a problem. The sample at the left shows a sample of Tenacity font at 10 points, with no antialiasing added on export.



Top sample exported with antialiasing turned off and lower sample exported with antialiasing turned on.


If you are an experienced CorelDraw user, though, you may see the problem knocking at the door. In a raster program, different layers can have different antialiasing properties. Not so in a vector program, since the antialiasing is added on export. Our text only sample was a breeze and turned out so well. But what if you have a menu item with small text and another graphic element that does require antialiasing

The top sample at the left has been exported with antialiasing turned off. Note how the text is very clear, but the oval has jagged edges. Not good enough.

The next sample has been exported with the antialiasing turned on. This is better, but note how the text is not as clear as in the first sample.


Convert the oval to a bitmap image in order to add permanent antialiasing.

There is a solution, though. Once you have completed your design, and will not be editing the oval again, you can convert that object to raster format and apply antialiasing as you rasterize. Select the object and choose Bitmap>Convert to Bitmap from the main menu. Select Anti-aliasing and set the other parameters you desire for the raster image. Your object is now a raster object, and the antialiasing will remain regardless of export settings.



On export, antialiasing is not added to this sample, which leaves the text crisp. The smooth edges on the oval remain, since the object has been converted to a bitmap.

When you export the text and oval together, specify that no antialiasing is to be added. The result will be a smooth oval with crisp lettering as shown in the final sample at the left.

Vector programs are very good for initial planning, since objects can be manipulated and moved so easily. By doing a little forward planning, you can also produce very high quality menus containing small text as well.


Next page

Menus with Beauty and Brains 3: Tutorial Index

Small Fonts Continued
Fireworks and CorelDraw Antialiasing
Special Antialiasing for Flash
Creating Unified Menus
Finding the Fonts

Front page2345

Created: March 20, 2001
Revised: March 20, 2001