Quick Tutorial: Anti-aliasing
I have plans to write a full tutorial on common text issues that I encounter in the world of icon making, but at the moment I have fifteen essays to write before the end of November, so the expanded version will have to wait until Christmas break. However, I have encountered several people not knowing what anti-aliasing is in the past few days, and I feel that this aspect of the tutorial simply cannot wait, especially in light of the current jcontest. So I give you a whirlwind tutorial, mostly consisting of a few basic visual aids, on the important issue of anti-aliasing.
Anti-aliasing is a fancy term we use to refer to the smoothing out of jagged bits in a graphic or piece of text. For a slightly longer definition, look here. In icon-making, it comes into play in regards to text: pixel fonts, having been built pixel-by-pixel, should never be anti-aliased; it gives them a slightly blurry, too-smooth look that bothers overly critical people like myself and the other icon makers. Almost every other font should always be anti-aliased unless it is a sans serif (arial, helvetica) or serif (courier new, times new roman) used very small. Because I am a firm believer in visual aids, here are examples of what I mean:
The difference is obvious here. It is sometimes less obvious when opacity and text colour make the text stand out less from the icon, but once you know about anti-aliasing, I guarantee you, you will never be able to unsee this flaw. I've seen many beautiful icons ruined by un-anti-aliased text.
The difference with pixel fonts is less obvious in a case like this, but with smaller fonts like grudblitter or bm mini it can make more of a difference. Also, it can make a huge difference in a constrained space like a 100 by 100 icon, so while not as glaringly ugly as the first example, it is still very important.
See the weird scuzz that comes up when you anti-alias a serif font like courier new or a sans serif like arial used small? It's often less obvious with fonts like times new roman, and necessary for sans-serif fonts when used large, but should be avoided at small sizes because it creates weirdness and blurriness and blurriness leads to unreadability. Which, presumably, you want to avoid with text.
You may still be confused as to how, exactly, to use anti-aliasing. With a lot of programs, it is simply a check box on the text toolbar, but in photoshop and recent versions of paint shop pro it is a drop-down menu. I do not have an older version of PSP to show you, but here are screenshots of PS and PSP, respectively:
This is PS.
This is PSP7.
This is PSP9.
Note the scuzzy, overly-compressed quality of the first and last images. That's another issue that is really important in icons but not so much in tutorials, where I prefer quick loading time over prettiness. If you are confused about compression, check our tutorials, since this is a mistake that should never ever be made in icons.
As you can see, photoshop has several different types of anti-aliasing available that PSP does not have. They make small but subtle differences; whether or not you employ them depends on the icon and the effect you want to convey. So long as you do not anti-alias pixel fonts and their weird small sans serif and serif friends and do anti-alias everything else, I don't care which levels you use.
Now please stop making mistakes with anti-aliasing. It makes everyone really sad.
I can't think of anything else to say about anti-aliasing. If you have any questions, please ask. I'll try to help if you're still confused. If I can't explain it, maybe Ty or one of the other designers can.
Anti-aliasing is a fancy term we use to refer to the smoothing out of jagged bits in a graphic or piece of text. For a slightly longer definition, look here. In icon-making, it comes into play in regards to text: pixel fonts, having been built pixel-by-pixel, should never be anti-aliased; it gives them a slightly blurry, too-smooth look that bothers overly critical people like myself and the other icon makers. Almost every other font should always be anti-aliased unless it is a sans serif (arial, helvetica) or serif (courier new, times new roman) used very small. Because I am a firm believer in visual aids, here are examples of what I mean:
The difference is obvious here. It is sometimes less obvious when opacity and text colour make the text stand out less from the icon, but once you know about anti-aliasing, I guarantee you, you will never be able to unsee this flaw. I've seen many beautiful icons ruined by un-anti-aliased text.
The difference with pixel fonts is less obvious in a case like this, but with smaller fonts like grudblitter or bm mini it can make more of a difference. Also, it can make a huge difference in a constrained space like a 100 by 100 icon, so while not as glaringly ugly as the first example, it is still very important.
See the weird scuzz that comes up when you anti-alias a serif font like courier new or a sans serif like arial used small? It's often less obvious with fonts like times new roman, and necessary for sans-serif fonts when used large, but should be avoided at small sizes because it creates weirdness and blurriness and blurriness leads to unreadability. Which, presumably, you want to avoid with text.
You may still be confused as to how, exactly, to use anti-aliasing. With a lot of programs, it is simply a check box on the text toolbar, but in photoshop and recent versions of paint shop pro it is a drop-down menu. I do not have an older version of PSP to show you, but here are screenshots of PS and PSP, respectively:
This is PS.
This is PSP7.
This is PSP9.
Note the scuzzy, overly-compressed quality of the first and last images. That's another issue that is really important in icons but not so much in tutorials, where I prefer quick loading time over prettiness. If you are confused about compression, check our tutorials, since this is a mistake that should never ever be made in icons.
As you can see, photoshop has several different types of anti-aliasing available that PSP does not have. They make small but subtle differences; whether or not you employ them depends on the icon and the effect you want to convey. So long as you do not anti-alias pixel fonts and their weird small sans serif and serif friends and do anti-alias everything else, I don't care which levels you use.
Now please stop making mistakes with anti-aliasing. It makes everyone really sad.
I can't think of anything else to say about anti-aliasing. If you have any questions, please ask. I'll try to help if you're still confused. If I can't explain it, maybe Ty or one of the other designers can.