HOME | DD
BluE3 β Anti-Aliasing Tutorial
by-nc-nd
Published: 2011-06-14 17:59:25 +0000 UTC; Views: 42486; Favourites: 888; Downloads: 470
Redirect to original
Description
A tutorial about anti-aliasing in pixel art... includes what anti-aliasing is, choosing colors for anti-aliasing, and placement of colors, along with a few other tips.Post any questions or comments about anti-aliasing here.
-- A community for pixel artists of all levels to learn and grow together.Β
Related content
Comments: 114
one question tho, should you have a lot of AA when you have two completely different colors? Or should you just not really care?
π: 0 β©: 1
Glad it was helpful.
To answer your question, "A lot" or "a little" depends on what you want to accomplish. The goal of AA is to hide pixels and make it seem like the image is not made from pixels.
The greater the contrast between two colors, the easier it is for the naked eyes to see the square edges of the pixels where the two colors collide.Β
If you want to "hide" the pixels that make up your image, then you should use AA wherever the shape of pixels stand out the most. All AA does is to trick the eyes so they don't see the pixels that make the lines in your artwork, and it essentially does this by reducing the contrast where two colors meet by adding intermediary colors, which is akin to blurring the two colors together.
Anti-aliasing is not necessary for straight lines at 0 degree (horizontal), 45 degrees (diagonal), and 90 degrees (vertical).
Horizontal and vertical lines do not have jagged edges, they are inherently smooth. The corners of the pixels on a 45 degree line are close enough that the eyes fill the gap and see almost a straight line, and trying to add AA on a 45 degree line will just make an undesired pillowy effect.Β
AA is more of a stylistic choice, in my opinion, although when used correctly it does feel like it is a higher quality of pixel art. However, some people choose to have a pixely look on purpose. It's up to you and what you want to create.Β
π: 0 β©: 0
thanks for the tutorial! I have been trying to figure out anti-aliasing for a while, but im a visual learner and i couldnt find any image heavy sources like this, so this was the key to me figuring out AA!
π: 0 β©: 0
Oooh this is fantastic! I'll have to utilize it at some point or another!
π: 0 β©: 1
This tutorial is a life saver. Like for real. Actually.Β
I was making pixel icons and when I finished them, I always thought they never turned out right. I had no idea WHAT was wrong with them, but it was just SOMETHING wrong. The problem was that I wasn't shading the icon right. I would shade it like I usually do with normal sized digital art. I didn't even begin to understand the longer process that it took to make pixels look good on such a small level. I stumbled upon a pixel icon tutorial that taled about AAing, and I had no clue what that was. They linked to this tutorial and after following this I finally understand the magical magical world of pixel arting. After using this technique (along with some from the other tutorial) I'm actually pretty satisfied with how my pixel looks now, and that I have you to thank for c: (This is what I made using this tutorial at the time of posting I literally JUST finished it )
This tutorial is definitely easy to follow and extremely helpful, you did a great job on this and it helped me SO much. Like you don't even understand how much this tutorial helped me out. I might post a before this tutorial and an after this tutorial thingy later on
But again I just have to thank you one more time for creating this <:
Ok I lied I'll thank you again. Thank you.Β
π: 0 β©: 1
Aw! You are quite welcome, and thank you for writing such a kind and beautiful post.Β
I am overjoyed that you've further advanced in your quest towards pixel art mastery.
Your icon is adorable! I like your pixel work, it is on par with some of the better DA icons I've seen.
I think you have the potential to become a master.Β
Keep studying and practicing.
May the pixel be with you!!~Β
Β
π: 0 β©: 0
This tutorial is really helpful and your comments were fun to read too
π: 0 β©: 1
Thanks! This helped me out with a few teamspeak icons. Great tutorial
π: 0 β©: 1
The only thing I dislike about anti aliasing is that when I put it in the pixel category it won't allow it to go through. Not sure ifΒ myΒ pixel art has too muchΒ anti aliasing though so I'll tone down on it because I kind of use it a lot. This tutorial was funny and helpful so thanks.
π: 0 β©: 1
I'm glad you liked the tutorial. What do you mean it won't allow it to go through?
π: 0 β©: 1
I mean as in it won't allow it in aΒ category I suggest and think It would possibly go in. Or else when you're loading a picture in gallery what you have to go through.Β For one of my pixel art picturesΒ I ended up having to put it in Anthro /digital media/ pixel art. My picture was not even close to Anthro. But at least I got it in a decent category since it was pixel art.Β
π: 0 β©: 1
huh, thats strange!
Β I just put all of my pixel art under digital art > pixel art > and then whatever category it fits most under... like characters > non-isometric.Β
π: 0 β©: 0
you forgot to use antialias in the last picture
π: 0 β©: 2
There is anti aliasing on that policeman though.
π: 0 β©: 1
But not on the rainbows.
π: 0 β©: 0
Kikigi, I was a bit lazy on the rainbow, wasn't I?
π: 0 β©: 0
ahh perfect tutorial. <33 much appreciated.
π: 0 β©: 1
Heh, thanks for the great tutorial. Nice when you can learn something and get a good laugh or two at the same time.
π: 0 β©: 0
Thank you for creating this tutorial! Just installed GraphicsGale today and hope I will create pixel art more often now. I will definitely read this tutorial several times as I consider this, along with shading, to be the most difficult aspect of pixel art.
π: 0 β©: 1
yesh! An Anti- Aliasing tutorial, and i can understand it for once. :3
Now if i just apply his to my work...
π: 0 β©: 1
Very helpful tutorial. Before I thought that AA was something that was used to give more depth to pixels, I now stand corrected. Thanks for posting this, it helped me understand it AA so much better.
Q's: The pixel program I'm using doesn't have a hue select bar like shown in your tutorial, what program were you using? Also I'm trying to AA orange and a dark gray color. The example uses two color next to each other in the spectrum, how would I find the correct colors of the two?
π: 0 β©: 1
You're welcome.
A's: I was using a program called "graphics gale." If you want to AA orange and dark gray, I would try two versions of grayish orange, one that is closer to the orange and one that is closer to the dark gray.
π: 0 β©: 1
Thanks! Hey, you wouldn't happen to know of a tutorial like this on pixel banding would you? I don't quite understand how it works.
π: 0 β©: 1
Pixel banding? Can you explain what that is or show me an example? I am not familiar with the term.
π: 0 β©: 1
Well I only know of it though a critique a friend of mine did for someone, but it hasn't been excepted yet but heres the link. [link]
It entails editing three rows of broken up/shift horizontal lines and using a little some AA to make them not so sharp, but the skill he referred to in banding. He did provide examples and corrections for the piece, so references are provided there.
π: 0 β©: 1
I have been very busy with projects, but I will attempt to read that when I get a chance.
This might show what it is:
[link]
It looks like it is trying to shade things on the same horizontal row rather than breaking it up vertically and diagonally. If you don't break up the shading, it looks like bands going across because pixels are squares so having them side by side will easily create bands.
I don't think this is a technique, but more just a word to describe this phenomena. Perhaps in certain situations, it may be intentional or desirable, but I can also see how one may not want that look in their artwork and how some artworks have it unintentionally because the artist is unaware of it or how to avoid it.
π: 0 β©: 0
FINALLY I UNDERSTAND. Thank you for posting~ the last tutorial on anti aliasing I read just confused me, this was much simpler
π: 0 β©: 1
Np!
Uh I mean, Well not exactly sure xD
but It could be taught by just using lighter tones along the edges of the base color "black"
n such...
π: 0 β©: 1
Ah, I think I understand. I could not find any good tutorials at the time, so I just made this, but that sounds like a good way, too.
π: 0 β©: 1
Oh
well it's good already...
People need tutorials like this!
π: 0 β©: 1
And tutorials like this need people!
π: 0 β©: 1
THANK YOU SO MUCH.
I've been trying to get a tutorial for anti-aliasing and this explains peeeerfectly. c:
Off to do some pixel art! Thanks for inspiring. C:
π: 0 β©: 1
glad to help
Hope you have fun!
π: 0 β©: 1
| Next =>