Tutorial: Using the Character Palette in Photoshop 7
Okay, in case you didn't know, sometimes we post tutorials here at obsessiveicons. I definitely recommend you check out the saving and compression tutorials at that link. We've noticed in the contest entries that some people are giving themselves a poor start by saving at a low quality, which really does make a difference. If you're a Photoshop user, check out Ty's tutorial here, and if you're a PSP user, check out Ariel's tutorial here. I don't think the designers use any other programs, so if yours hasn't been covered, check out the memories at icon_tutorial. That's a really great resource, where you can learn so much just by looking at previous posts, and you can even ask questions of your own if you still have them.
Anyway, this is going to be a tutorial about text. I haven't used PSP in a fairly long while, so for now this is just a Photoshop tutorial. Specifically, I use version 7, but things are similar in all versions of PS, so you can probably figure out how it applies to your version. Cutting this, so if you're just here for the pretties and don't make your own icons, scroll on by :)
So let's start out with the character palette. Open a document you want to work on, and then go to Window > Character. You'll have something that looks like this:
Starting from the top, and going left to right, the first drop down you come across is where you select the font you want to use. If the font has options such as italic or bold, you select them from the next dropdown (currently set to Regular). Sometimes a font file doesn't have built in options for italic and bold, but Photoshop has another solution for this, which we'll come to later. On the next line, you have the size, currently at 24pt. All straightforward so far.
The next dropdown sets the leading. This is basically just the space between rows. Leave this on (Auto) unless you know you want to space out the lines more, or compress them together. This is very useful for icons, where space is of the essence. Quite often you can get away with smooshing the lines together a bit without losing any clarity. It takes a bit of fiddling around to see what each point setting does, but here's an example for Decker with the font size at 24pt:
The next setting is kerning, which you can happily leave alone. Next up, we have tracking. This is what you want to mess with if you want to squish the letters together horizontally. Another example!
I've just realised that I had the tracking set to 100 on the last post I made to obsessivefonts, and probably the previous ones too. Oops. So remember to set this back to 0 when you've finished ;)
The next two I hadn't played with before, but now I know they're for scaling the text either vertically or horizontally. They make interesting effects, as you can see by my examples.
Vertically scale:
Horizontally scale:
You can combine these too, by having vertically scale at 50%, and horizontally scale at 150%, or whatever numbers you choose. It's pretty ugly though, but maybe it's a specific effect you're going for:
Okay, back to our palette. Our next option is baseline shift, which seems to raise the text in the air by however much you choose. I don't see the uses for this, since I could just position it higher if I wanted it up there! So I'm not going to show you that. No doubt it has a use for someone, somewhere.
Next up, color. This one's easy. Just click the square of color, and you'll be presented with a color picker! If you want to use a colour from the image itself (highly recommended, since that way the text and the base all ties in together nicely), just move your mouse over to your picture, and select a color.
You can't tell exactly where I clicked from the screenshot, but you get the point. Click around and find a nice colour from the base that works for your text. Don't worry about making it stand out more yet; that's still to come!
Next up, we have a whole lot of little buttons that do various things to your text (those buttons that have T, Tt, etc). Here's what they do, moving left to right on the character palette:
Remember earlier I said that some fonts don't have options for bold and italic in that top dropdown? Here's where Photoshop gives you the option of making them bold or italic anyway, which is why they're called faux bold and italic. The normal kind of bold and italic consists of separate font files, one for regular, one for bold, one for italic, and sometimes one for bold and italic together.
Almost at the end now. Leave the language dropdown on its default, mainly because I don't know what changing it does ;) Something about spelling and hyphenation, apparently. Last, but by no means least, we come to anti-aliasing. In a nutshell, anti-aliasing smoothes edges. The part where it can get confusing is that sometimes you want it on, and sometimes you want it off. Not content with just two options, Photoshop has a whole range. Let's go through them, using the font Decker again.
As you can see, this font with anti-aliasing switched off looks horrible. Jagged around the edges and very amateurish. The rest give very similar results, but sometimes there are subtle differences that can be important. Play around with any of sharp, crisp or smooth until you think it looks right. Strong is just another way to get a bold effect on your font.
Now, that's straightforward enough. Anti-aliasing turned on to make it look smooth. However, when you start using pixel or bitmap fonts, the rules change. Silkscreen is a pixel font, which you can get from DaFont. Pixel fonts are meant to be used at certain sizes only, and look funny and distorted if you get the size wrong. These sizes seem to vary slightly for each person and each computer, so play around with it until it looks good. I've used Silkscreen set to 8pt, with anti-aliasing set to none and smooth for comparison:
See how ugly that second one is? For pixel fonts, anti-aliasing is BAD! If you anti-alias your pixel fonts, you're automatically disqualifying yourself from winning an award in our contests, because it just drives us mad. Similarly, if you don't anti-alias your standard fonts, you're out. Okay, so if your icon is otherwise outstanding, and all the rest just don't compare, you'll still get an award. But you're putting yourself at a serious disadvantage by getting this wrong.
And that just about wraps up this tutorial. This isn't the end of things to learn about text though. I'm going to go into outer glows and drop shadows in another tutorial, because you create them in a different place than the character palette. And this is probably long enough :) Congratulations to anyone who's read through all of this; you're now very well equipped to start using text properly in images :) I hope this has been helpful, and feel free to ask me any questions. I apologise to all the PSP users out there, but maybe one of our resident PSP designers will produce a tutorial for you sometime soon.
Anyway, this is going to be a tutorial about text. I haven't used PSP in a fairly long while, so for now this is just a Photoshop tutorial. Specifically, I use version 7, but things are similar in all versions of PS, so you can probably figure out how it applies to your version. Cutting this, so if you're just here for the pretties and don't make your own icons, scroll on by :)
So let's start out with the character palette. Open a document you want to work on, and then go to Window > Character. You'll have something that looks like this:
Starting from the top, and going left to right, the first drop down you come across is where you select the font you want to use. If the font has options such as italic or bold, you select them from the next dropdown (currently set to Regular). Sometimes a font file doesn't have built in options for italic and bold, but Photoshop has another solution for this, which we'll come to later. On the next line, you have the size, currently at 24pt. All straightforward so far.
The next dropdown sets the leading. This is basically just the space between rows. Leave this on (Auto) unless you know you want to space out the lines more, or compress them together. This is very useful for icons, where space is of the essence. Quite often you can get away with smooshing the lines together a bit without losing any clarity. It takes a bit of fiddling around to see what each point setting does, but here's an example for Decker with the font size at 24pt:
The next setting is kerning, which you can happily leave alone. Next up, we have tracking. This is what you want to mess with if you want to squish the letters together horizontally. Another example!
I've just realised that I had the tracking set to 100 on the last post I made to obsessivefonts, and probably the previous ones too. Oops. So remember to set this back to 0 when you've finished ;)
The next two I hadn't played with before, but now I know they're for scaling the text either vertically or horizontally. They make interesting effects, as you can see by my examples.
Vertically scale:
Horizontally scale:
You can combine these too, by having vertically scale at 50%, and horizontally scale at 150%, or whatever numbers you choose. It's pretty ugly though, but maybe it's a specific effect you're going for:
Okay, back to our palette. Our next option is baseline shift, which seems to raise the text in the air by however much you choose. I don't see the uses for this, since I could just position it higher if I wanted it up there! So I'm not going to show you that. No doubt it has a use for someone, somewhere.
Next up, color. This one's easy. Just click the square of color, and you'll be presented with a color picker! If you want to use a colour from the image itself (highly recommended, since that way the text and the base all ties in together nicely), just move your mouse over to your picture, and select a color.
You can't tell exactly where I clicked from the screenshot, but you get the point. Click around and find a nice colour from the base that works for your text. Don't worry about making it stand out more yet; that's still to come!
Next up, we have a whole lot of little buttons that do various things to your text (those buttons that have T, Tt, etc). Here's what they do, moving left to right on the character palette:
Remember earlier I said that some fonts don't have options for bold and italic in that top dropdown? Here's where Photoshop gives you the option of making them bold or italic anyway, which is why they're called faux bold and italic. The normal kind of bold and italic consists of separate font files, one for regular, one for bold, one for italic, and sometimes one for bold and italic together.
Almost at the end now. Leave the language dropdown on its default, mainly because I don't know what changing it does ;) Something about spelling and hyphenation, apparently. Last, but by no means least, we come to anti-aliasing. In a nutshell, anti-aliasing smoothes edges. The part where it can get confusing is that sometimes you want it on, and sometimes you want it off. Not content with just two options, Photoshop has a whole range. Let's go through them, using the font Decker again.
As you can see, this font with anti-aliasing switched off looks horrible. Jagged around the edges and very amateurish. The rest give very similar results, but sometimes there are subtle differences that can be important. Play around with any of sharp, crisp or smooth until you think it looks right. Strong is just another way to get a bold effect on your font.
Now, that's straightforward enough. Anti-aliasing turned on to make it look smooth. However, when you start using pixel or bitmap fonts, the rules change. Silkscreen is a pixel font, which you can get from DaFont. Pixel fonts are meant to be used at certain sizes only, and look funny and distorted if you get the size wrong. These sizes seem to vary slightly for each person and each computer, so play around with it until it looks good. I've used Silkscreen set to 8pt, with anti-aliasing set to none and smooth for comparison:
See how ugly that second one is? For pixel fonts, anti-aliasing is BAD! If you anti-alias your pixel fonts, you're automatically disqualifying yourself from winning an award in our contests, because it just drives us mad. Similarly, if you don't anti-alias your standard fonts, you're out. Okay, so if your icon is otherwise outstanding, and all the rest just don't compare, you'll still get an award. But you're putting yourself at a serious disadvantage by getting this wrong.
And that just about wraps up this tutorial. This isn't the end of things to learn about text though. I'm going to go into outer glows and drop shadows in another tutorial, because you create them in a different place than the character palette. And this is probably long enough :) Congratulations to anyone who's read through all of this; you're now very well equipped to start using text properly in images :) I hope this has been helpful, and feel free to ask me any questions. I apologise to all the PSP users out there, but maybe one of our resident PSP designers will produce a tutorial for you sometime soon.