2. In This Chapter, you’ll learn on:
Introduction
Aliasing
Usage of Anti-Aliasing
Limitations of Anti-Aliasing
3. Introduction
Images have two fundamental limitations for supporting elements.
First, rather than being vector-based (as are text and graphics
created in programs such as Freehand and Illustrator), images are
a collection of pixels. Second, images are always rectangular.
Aliasing is the jagged edges on curves and diagonal lines in a
bitmap image.
Anti-aliasing is the process of smoothing out those jaggies.
Font smoothing software provides anti-aliasing for on-screen type.
Graphics software programs have options for anti-aliasing text and
graphics. Enlarging a bitmap image accentuates the effect of
aliasing.
4. Introduction
Left side of image shows aliasing or jaggies
in the curved lines. Right side of image
shows the effect of anti-aliasing to smooth
out the jagged edges.
5. Aliasing
The term aliasing pertains to the process of sampling
something smooth and continuous using a series of
discrete measurements. If the measurements do not
accurately represent the function, unwanted artifacts
which are not present in the original will appear.
The appearance of these artifacts is referred to as
aliasing.
In our case, the smooth and continuous feature we are
interested in is vector data, such as text or an illustration.
The sampling that occurs is due to rasterization: the
process of converting vector data into pixel data.
6. Aliasing
The limitation of this representation is that while
vector data can represent limitless shapes and has
infinite resolution; pixels are square and are
relatively large.
The limitation isn’t visible when dealing with
rectangular objects, as in the images below:
Rectangular features,
even when magnified
(right) suffer from no
visual artifacts.
7. Aliasing
As soon as we deviate from rectangular shapes,
however, we begin to see some unwanted artifacts.
These unwanted artifacts, often called stairsteps or
jaggies, are a form of aliasing. They’ll appear
whenever we attempt to represent a shape that
deviates from a rectangle.
Diagonal lines are rendered
less accurately. A magnified
view demonstrates jaggies.
8. Usage of Anti-Aliasing
As you have probably surmised, anti-aliasing refers
to methods of eliminating (or most often, reducing)
these unwanted artifacts. In the context of
rasterizing images, anti-aliasing refers to the
reduction of the jagged borders between colors.
The example below demonstrates the most
effective technique of anti-aliasing graphics: taking
advantage of the many levels of color that our
monitors can represent.
9. Usage of Anti-Aliasing
Here is a simple image that is still complex enough
to show jaggies when rendered. This is even more
noticeable in the detail image.
A large atmark rendered
without anti-aliasing
10. Usage of Anti-Aliasing
Here is the same image rendered using anti-
aliasing. Note how much smoother this image
appears and how much better integrates into the
background.
Anti-aliasing smoothes out
the jaggies.
11. Usage of Anti-Aliasing
The detail image should demonstrate the basics of
how anti-aliasing works with images. Rather than
only using black and white pixels, intermediate
levels of gray are used to blend the pixels together.
The amount of black or white used represents how
much the original graphic covers a pixel. A fully
covered pixel will be black. One that is not covered
at all will be white. One that is halfway-covered will
be gray.
12. Usage of Anti-Aliasing
In this case, the border pixels are shades of gray
because the foreground is black and the
background is white. If the foreground were red,
however, the border pixels would be shades of pink.
With a red foreground and a white background,
intermediate pixels are pink.
13. Usage of Anti-Aliasing
In most image editing software, you can use anti-aliasing from the
Character Palette.
As refer to the diagram on the left, in order to smooth out the
jagged edges of your type; use the ‘Anti-aliasing’ drop-down list
to choose an anti-aliasing setting.
The diagram below shows type that is anti-aliased and type that
is not.
14. Usage of Anti-Aliasing
As had mentioned earlier, anti-aliasing is
used to describe the blending created
between an object’s edges and the
background. When an object is anti-
aliased, increasingly transparent pixels
are added to the object’s edges to help
smooth the transition. If an object is not
anti-aliased, its edges appear sharper
because there is no blending transition.
The figure on the left shows an anti-
aliased image (left) with an area
magnified (right) to make the anti-
aliasing more apparent.
15. Usage of Anti-Aliasing
When saving an image for the Web, you can
control how much anti-aliasing is used in the image
by using the Matte setting. This setting is available
when you use the ‘Save for Web’ command in
Photoshop.
16. Usage of Anti-Aliasing
Refer to the diagram above; do put a check in the
Transparency check box to preserve any transparent
pixels in the image. If Transparency is unchecked, any
transparent pixels will be colored with the currently
selected Matte color. The Matte color is selected in the
next step.
Selecting a Matte setting is to control how partially
transparent pixels along the edge of an image blend
with the background of the Webpage. If you know what
the color of the Webpage background is, use the Matte
drop-down list to select the color. You can also select
None, Foreground Color or Background Color.
17. Limitations of Anti-Aliasing
There are some limitations to the usage of anti-
aliasing. For example, anti-aliasing introduces more
colors into an image it stands to reason that an anti-
aliased version of an image can be somewhat
larger than its aliased counterpart. Application of
anti-aliasing on very small text can also be a
problem. Anti-aliasing tends to blur the letters when
the font size is really small, hence compromising the
readability, particularly on screens.
