DIGITAL MEDIA FUNDAMENTALS

Anti-aliasing for image and text.

Anti-aliasing for image and text.

In This Chapter, you’ll learn on: Introduction Aliasing Usage of Anti-Aliasing Limitations of Anti-Aliasing

Anti-aliasing for image and text.

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.

Anti-aliasing for image and text.

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.

Anti-aliasing for image and text.

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. 

Anti-aliasing for image and text.

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

Anti-aliasing for image and text.

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

Anti-aliasing for image and text.

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.

 

Anti-aliasing for image and text.

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

Anti-aliasing for image and text.

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.

Anti-aliasing for image and text.

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.

Anti-aliasing for image and text.

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.

Anti-aliasing for image and text.

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.

Anti-aliasing for image and text.

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.

Anti-aliasing for image and text.

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.

Anti-aliasing for image and text.

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. 

Anti-aliasing for image and text.

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.