I've always had a hell of a time making text icons, although you'd think they'd be the easiest. And everybody else seemed to have no problems fitting entire paragraphs onto a 100x100px image and making it a.) clear, b.) readable, and c.) interesting.

Anyway, I'm going to post up this tutorial on how to do all the basics to adjust your fonts in Photoshop and hopefully make your graphics more interesting.



Okay, my first problem I had as a noob was that I didn't realize people were using fonts other than the standard pack you get with Photoshop. To remedy this, head on over to dafont.com and browse your little heart out.

Download the font and save it to a folder you can find easily. Once you've expanded the zip file, open the font folder and right click the file, the select Install. If PS is open, it should import directly into your font list.

GENERAL

Okay, the first thing to do is Know Thy Toolbar.



Your life is going to be a lot easier if you know which buttons do what instead of having to redo layers or look through menus.

TEXT ORIENTATION

I used to erase text layers and change my font orientation on the side toolbar and then retype the layer. Instead of being an idiot like me, just select your text and click the Orientation button. You don't even need to highlight the text.



ANTI-ALIAS

This is something you'll need a lot when you're working with small font-size (as you always have to with icons). Sometimes when you shrink the font, it gets blurry and hard to read. The solution might be as simple as switching the anti-aliasing from smooth to crisp or strong. Just highlight your text and select from the drop down box.



WARP TEXT

This is an interesting tool that I don't use much, possibly because of being forced to make warped bubble text for every single PowerPoint presentation from middle school onwards. It runs the risk of looking kitschy and I am hyper aware of it. However! Like most tools, if you use it correctly you can make it your bitch add an effective, dynamic layer to your graphic.

First, select your text and click the Warp button. If you have any added effects like bold or italics, it will ask you to remove them and continue.



I selected the classic arc, and modified my angles from there.



This is something I could see myself setting to a blending mode like Color Burn or Soft Light and using it to create motion within the tiny, tiny square box that is an icon.

TOOLBAR HINTS

* I'm assuming everybody knows how to change their font color so I'm skipping the images--highlight your text and click the colored box on the toolbar. Voila!

* When changing font size, you aren't limited to the numbers they give you. Type in any value you want, from 1-1000. I know I've changed my font size to something like 600 before when making a wallpaper.

* If you are having trouble with your font size not being what you're expecting (e.g. if you select font size six and it's still taking up most of your graphic), check your image resolution. (Image-->Image Size, or Ctrl+Alt+I) Images made for the web should have a resolution of 72, images to be printed out should be closer to 300. The higher your resolution, the bigger your font size appears.

TOOL BOX

I don't know that this thing actually has a real name, but I think of it as my tool box. It's like the top toolbar's hot older sister. I do most of my text editing in this box, because with it you can change pretty much everything about your font.



Most of these tools affect the spacing of the letters, which is pretty much the most important part of making text fit into a small space.

Leading

This changes the space between the bottom of one line of text and the top of the next. It's really useful to be able to adjust, because sometimes the default settings are just not what you need to work with.

Here's a classic example--huge gap between the lines of text, but I want that last line on the icon, too. How else will we know that the block of text is made with letters??



Oh how convenient! I just go to the Leading drop down box (with my text highlighted) and select 24 instead of Auto! (Or whatever. This number varies with every font.)




Tracking

But wait, one of my words is cut off. The best way to fix this is to adjust the tracking--the space between the letters. Highlight text and change from 0 up or down as you need.



Again feel free to type any value you want into the drop down box.

Scaling

Scaling adjusts the height and width of letters themselves. This goes a long way toward making your font say as much as the text itself does--my basic serif font went from being pretty square to being short and stout. Play with this to give a tone to your font that fits the message.



Baseline Shift

Use this to shift words or lines up text up or down. You'd think you could just use the Superscript or Subscript buttons (beneath all these drop down boxes), but that makes the letters smaller. Highlight your text and type in a positive or negative value to shift your text up or down from the baseline.





Okay, I said "super long" in the cut text, but that really got super long (what with wanting to cover ALL the bases) so I'm going to wrap it up for this session and continue tomorrow with Type Masking, Effects, and Tips.

Part 2: Type Masking