[TUT] - Antialiasing

[effectica]

Antialiasing

Author : effectica




INTRODUCTION:

Rectangular shapes, even when magnified suffer from no visual artifacts.

Example :



As soon as we deviate from rectangular shapes, however,
we begin to see some unwanted artifacts.

Example :



These unwanted artifacts, often called stairsteps or jaggies,
are a form of aliasing.They'll appear whenever we attempt to
represent a shape thatdeviates from a rectangle. Antialiasing is
very much and edge-enhancemenmt technique.



ANTIALIASING

Antialiasing reduces the prominence of jaggies by
surrounding the stairsteps with intermediate shades of gray
(for gray-scaling devices) or color (for color devices).
Although this reduces the jagged appearance of the lines,
it also makes them fuzzier.

Comparison :





IN PHOTOSHOP:

There is nothing worse than a graphic design with unwanted
jagged or blurred edges.So yes, antialiasing is very important.
If you want to produce quality graphics, antialiasing is something
you must put in your list of priorities.Photoshop gives you the
option to chose between applying antialiasing to a shape or not,
simply because in some cases with certain shapes or fonts
antialiasing could produce unwanted results.

DRAWING LINES:

Lines are drawn with the Line Tool tool



Horizontal and vertical lines are best drawn with antialiasing off



Oblique lines are best drawn with antialiasing on



Comparison :

DRAWING ELIPTICAL/CIRCULAR SHAPES:

These shapes are drawn with the Ellipse Tool tool



and are best drawn with antialias on



Comparison :



DRAWING ROUNDED ANGLE SHAPES:

These shapes are drawn with the Rounded Rectangle Tool tool



and are best drawn with antialias on



Comparison :



TEXT:

Many Photoshop beginners, don't give much importance to the l
ook of text intheir designs.Text (especially in banners, buttons or
forum sigs) is not just an ornament.

Text in a design is usually the first thing that catches the eye and
that gives some sort of information to the person that is looking
at your work...and we all agree that it is a pain to read text
when it is not clear. Text is a very important visual element.

The problem comes from using fonts that were designed for printing
and not for screen display. Printer fonts are intended to work with
high resolution output devices not on low resolution computer
screens.Usually the problem starts when you have to write
small sized text.The best fonts for screen display at small
sizes are 'pixel fonts'.

Comparison :



Some pixel fonts display better at specific sizes. It
depends on the pixel font you are using.

There are many sites on the web where you can
download them for free, just google them up.

Here is a free one I found for you:

>> silkscreen pixel font <<

Best pixel fonts I have ever seen (commercial):

>> minifonts <<

END .

[20past4]

Fantastic tutorial fede, that should help clear up any confusion people have about anti-alias fonts.

Also note that pixel fonts are usually best viewed if you stay in proportions of "2" or "4". So for example if you are using size "8" font and need it to be bigger, don't use size 9 or 11. Just go up by 2 or 4 pixel sizes. So try font size "10" or "12" instead to retain best quality.

[kay8]

thanks, that wil improve my work.

[D3athAng3l]

If only i had read this sooner...would save me a lot of time

[Urban]

ANTIALIASING= a Good idea, thx for tut

[MaccaDin]

great tut gonna have to remember that one save a dumb question in the future

[Sprinky]

Wonderful explanation!
I bet that will help somebody a lot!

[Hard2Guesss]

I was wondering about anti-alias and then I saw this tut. Very informative.

Searching the forum well worthed

Thank you.

[SoulFlame]

AA has been a part of our lives as gamers, gfx artists, etc for a long time. And I've had it explained to me a number of different ways.

I must say, this is by far the best break down, explaination and implementation I've seen or heard about! Great job and thanks for clearing the air!

[Bonedigger]

Thanks for posting this tut for us newbies.... I knew that antialias was better for making curves, but just did not quite understand all the science behind it...great tut.