Antialiasing
Antialiasing, also known as anti-aliasing, antialias or AA for short, is a technique where you place intermediate pixels on strategical places in order to smoothen it.
![[Image: b33e1ced081c9bcc08fdbdf052ca2b0b.png]](/image.php?src=http%3A%2F%2Fi.gyazo.com%2Fb33e1ced081c9bcc08fdbdf052ca2b0b.png&hash=005dacc68904a0e3617248e3f68632e1)
Left: A pixel line. Right: The same line, with 3 gray tones of AA.
Usually, lines are anti-aliased on the corners and diagonal lines, where the irregularity is more apparent. Since pixelart deals with squares as the smallest graphical element, the places where "half a pixel" are painted are rendered with a mix of the main color and the background.
![[Image: 59ed171c371572a981f3c08ddda10ebe.png]](/image.php?src=http%3A%2F%2Fi.gyazo.com%2F59ed171c371572a981f3c08ddda10ebe.png&hash=67fee731fae233cf9c0ae01e22de3f34)
Diagram representing zoomed pixels on a screen. Notice that the pixels that are partially painted gets a lighter tone in order to render the line.
To successfully antialiase a pixelart, you need to pick a color that is intermediate between the line and the background. So, if the line were to be red against a white background, the anti-alias lines should be lighter versions of red to properly blend the line. Notice that overdoing anti-aliasing is not a wise idea and the more shades you create to smoothen, the more blurred your sprite will be.
Due to its nature, antialiasing should be limited to details inside the sprite's outline than outside, in order to conserve readability, sharpness and use. Antialiasing outside the object should only be done if it's not supposed to move or be used in any other background.
![[Image: 5c6a966d14c94922cedeaceed8c3b047.png]](/image.php?src=http%3A%2F%2Fi.gyazo.com%2F5c6a966d14c94922cedeaceed8c3b047.png&hash=a7c7ee2802a9c2c710e85312c4e2195a)
Left: A crudely pixeled Mario head. Mid: Same head, but with AA dots for a gray BG. Right: Same as Mid, but now against a light red BG. Notice the gray AA dots contrasting with the BG, filling the piece with unwanted noise.
Antialiasing properly is the key of pixelart proficience. Some methods I use are as follows:
![[Image: 49a7579d1b82a9008a4f6d4b22693ad9.png]](https://i.gyazo.com/49a7579d1b82a9008a4f6d4b22693ad9.png)
Types of antialiasing employed.
There are 4 sets of lines, in 1x, 2x and 4x zoom for your convenience. The leftmost set has no antialiasing, while the rest has different styles of antialiasing.
Figure 2 has the most basic antialiasing method: placing gray dots where the line breaks. Notice that it is not placed in every single corner - only the corners that need extra care should be worked on. Try to picture where the pixels would be "half-painted", and antialiase them accordingly.
Figure 3 is a development of the basic antialiasing. It uses two antialiasing shades, with the darker shade touching the corner and the lighter shade placed tangentially. This makes the line smoother, but also appear thicker. Use wisely as you don't want to make it extra blurry.
Figure 4 is what I call "split-line antialiasing". This is because the antialiasing dots split the line. This requires at least 2 shades to look good, but it's as smooth as Figure 3 and doesn't look as thick.
You can try and come up with different ways to do antialiasing, such as increasing the gray dots' length, or combining split-line with traditional. As long as it looks good and in-style, everything is doable.
Remember that antialiasing is not to be used exaggeratedly, or else you'll make the pixelart very blurry and harder to work on later. For animated characters in games, 1 or 2 shades often work well, but static images can have more shades for it.
Antialiasing, also known as anti-aliasing, antialias or AA for short, is a technique where you place intermediate pixels on strategical places in order to smoothen it.
Left: A pixel line. Right: The same line, with 3 gray tones of AA.
Usually, lines are anti-aliased on the corners and diagonal lines, where the irregularity is more apparent. Since pixelart deals with squares as the smallest graphical element, the places where "half a pixel" are painted are rendered with a mix of the main color and the background.
Diagram representing zoomed pixels on a screen. Notice that the pixels that are partially painted gets a lighter tone in order to render the line.
To successfully antialiase a pixelart, you need to pick a color that is intermediate between the line and the background. So, if the line were to be red against a white background, the anti-alias lines should be lighter versions of red to properly blend the line. Notice that overdoing anti-aliasing is not a wise idea and the more shades you create to smoothen, the more blurred your sprite will be.
Due to its nature, antialiasing should be limited to details inside the sprite's outline than outside, in order to conserve readability, sharpness and use. Antialiasing outside the object should only be done if it's not supposed to move or be used in any other background.
Left: A crudely pixeled Mario head. Mid: Same head, but with AA dots for a gray BG. Right: Same as Mid, but now against a light red BG. Notice the gray AA dots contrasting with the BG, filling the piece with unwanted noise.
Antialiasing properly is the key of pixelart proficience. Some methods I use are as follows:
Types of antialiasing employed.
There are 4 sets of lines, in 1x, 2x and 4x zoom for your convenience. The leftmost set has no antialiasing, while the rest has different styles of antialiasing.
Figure 2 has the most basic antialiasing method: placing gray dots where the line breaks. Notice that it is not placed in every single corner - only the corners that need extra care should be worked on. Try to picture where the pixels would be "half-painted", and antialiase them accordingly.
Figure 3 is a development of the basic antialiasing. It uses two antialiasing shades, with the darker shade touching the corner and the lighter shade placed tangentially. This makes the line smoother, but also appear thicker. Use wisely as you don't want to make it extra blurry.
Figure 4 is what I call "split-line antialiasing". This is because the antialiasing dots split the line. This requires at least 2 shades to look good, but it's as smooth as Figure 3 and doesn't look as thick.
You can try and come up with different ways to do antialiasing, such as increasing the gray dots' length, or combining split-line with traditional. As long as it looks good and in-style, everything is doable.
Remember that antialiasing is not to be used exaggeratedly, or else you'll make the pixelart very blurry and harder to work on later. For animated characters in games, 1 or 2 shades often work well, but static images can have more shades for it.