|
 |
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
  
|
|
|
|
|
