Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this


  1. 1.  Anti-aliasing for image and text.
  2. 2. In This Chapter, you’ll learn on:  Introduction  Aliasing  Usage of Anti-Aliasing  Limitations of Anti-Aliasing
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 