It’s with a great amount of dread that I’m finally posting this ‘tutorial’. While making it I more than once thought to myself: “What the F*uck was I thinking? A TEXT tutorial???”.
 
 This will most probably be even more scattered than normal, but I’m gonna try to let you in on how I’m thinking while working with text on icons – and larger graphics as well.
 
 Before we begin let me make one thing clear: This is how I do it and how MY mind works. This is NOT in any way a “Do it like this – or else…” because like anything, text and the way you use it is totally subjective. It all comes down to personal taste. But maybe you can get some inspiration or at least a good laugh at my expense. 😛
 
 Ready? This is VERY image heavy.
 
 Here goes….
 
 

Using text in icons
 
 
 
 Depicted above are the fonts I use the most at the moment. Most of these are default with Photoshop, but a few I’ve downloaded from daFont.
 
 The fonts in this example are all written in 14 pt size, tracking 200 and the Anti-Alias set to Crisp. Before I even start with explaining ‘tracking’ and ‘Anti-Alias’, let’s make sure we’re on the same page! Or at least have the same crap opened up in Photoshop.
 
 The Text Tool
 
 
 
 The text tool is filled with different cool stuff, but I’m gonna concentrate on just a few of them. The rest I’m sure you’ll be able to find yourself.
 
 If you haven’t this tool opened on your work space it’s easy to find in the top menu under ‘Window’.
 
 To get the Text tool just make sure that ‘Character’ has a tick beside it – if not, just click it.
 
 This is what will pop up on your work space:
 
 …and these are the main things that I’m gonna try to show you.
 Size: Pretty selfexplanitory….
 Space between…: …as is this.
 Tracking: Space between the characters in your text
 Color picker: Font color
 Anti-Alias: Helps you produce smooth edged characters that ‘melts in’ with the graphic.
 
 Anti-Alias
 
 
 
 I personally always uses Anti-Alias. Text to me is part of the graphic – just as a texture or a brush or any other element, so it has to ‘fit’ and not off set the balance. Confusing? Check these two examples out:
 
 
 In the left icon the text is more or less a separate object – in the right it’s much more unified with the rest of the graphic.
 
 Tracking
 
 
 
 Tracking and size goes very much together for me. It all boils down to What Do I Want To Say. Tracking isn’t just for making sure the text will fit, but can also be used to convey a feeling in the written word. Check this obvious example out:
 
 
 The caption I want is ‘distance’ and there’s a million and two ways of doing that, but I’ll settle for showing you two. In the left icon the text is put there mainly ‘to be there’. I want the word. I like the font. Ergo: I type the word in. Done! Or? To me that text doesn’t really say much more than ‘Hey! I know how to type a word here!’. By playing with the tracking, size and even the anti-alias and color I get an effect that in my view enhances the feeling I’m trying to convey.
 
 Misc Tips ‘n Tricks
 
 
 
 So. Fonts. There’s probably MILLIONS of different fonts floating around out there, so which one do I use?? Again – it’s a matter of taste. I usually know if I want a serif or sans serif font for any particular graphic. But that’s about it. Serif fonts has these little “edges” on them – like Times New Roman. Sans Serif doesn’t – like Verdana or Arial. I think the serif fonts are more strict and ‘somber’ while the sans serif ones generally are more playful. But that is not an absolute truth or anything. Best way to figure out what font to use at any given moment is to just try out a bunch of them until you find the right one. I know some of you where sort of hoping for a ‘recipe’ for this – but I’m sorry. There aren’t any.
 
 What about color? A lot of new icon makers don’t pay too much attention to the color they put in the font. A simple trick is to actually use one of the colors that are already there in the icon itself. That way you get a font that is automatically more in harmony with the rest. Click the ‘color picker’ square in the text tool and a bigger color pick window pops up. When you move your mouse over your icon your pointer will transform into a eye drop tool and you can pick up colors from the icon and try them out.
 
 In this example the font uses a light blue picked up from Justin’s cheekbone.
 
 
 
 But lots of times you’ll notice another problem….
 WHERE DID THE TEXT GO???
 
 By using the colors in the icon it’s very possible that the text will ‘vanish’ into the background and be hard to see. But of course there’s ways around that too! One is like I did in the ‘distance’ example. I simply used a darker color – also picked from the icon – and made a square on a separate layer behind the text.
 
 
 Another trick is to blur the background behind the font using the blur tool (Explained here), set to a medium strength and a small soft size.
 
 The result is very subtle, but sometimes that’s just what you need.
 
 The trick I use the most is Outer Glow. A lot of people uses a Drop Shadow to get the text to ‘pop’, but I find this gives a much better result.
 
 With the text layer activated click the ‘Add a Layer Style’ symbol in the layers palette: and choose Outer Glow from the drop down menu. In the window that pops up, play with the Blend Modes, Opacity, Size, Spread, Color… etc.
 This is what I decided on in my example below:
 
 
 
 
 
 Usually I try to keep the caption down to max three or four words, anything more than that and it tends to get cluttered and overbearing. Again – text is one element of an icon, not the whole thing. Unless it’s a text-only icon that is. 😛
 
 When you have more than one word it’s fun to mix it up a bit. I do that a lot using different fonts and different colors. I have a couple of personal preferences when it comes to fonts though. Like, I almost never use the same font for many consecutive words, and I (almost) never use scripted fonts only. Like this:
 
 
 Usually I mix font styles, and I try to come up with fonts that work well together – again, ‘try and try again’.
 
 A general rule is to only mix scripted with non-scripted fonts. But that different non-scripted fonts can work together.
 
 I also almost never use capital letters in the beginning of a sentence. I either settle on all capitals or not (the exception being the word ‘I’…).
 
 Text should also in my view ‘be connected to each other’. That is – not too much space in between the lines unless there’s a purpose for it.
 
 For ‘tiny text’ I actually write it myself most of the time. I set the size to 2 pt and write something. Then I try out different fonts, color, tracking and anti-aliases to get the effect I’m after. I find this almost always works much better than using a tiny text brush.
 
 Some examples of text-y icons I’ve made that uses a lot of the tricks I’ve described here:
 
 
 
 (yeah, yeah – I know. That last one is SPN, but I haven’t done any QaF ones using the same technique yet…)
 
 As for knowing what to say and where to put the text…. that’s something every person has to find out for themselves. Sorry.
 
 Hm. That’s all I’m gonna say about this for now. This is all naturally MY way of looking at text when I make stuff. I am in no way saying this is The Law about it because we all work differently and want different things from our stuff. This is just me.
 
 Hope I didn’t confuse and or bore you to death with this!
 
 All icons in this tut is naturally shareable. Credit me and if you want to see my resource list there’s a link in my graphics journal ai_graphics. No hotlinking and… I almost said that ‘textless icons are not bases’, but there isn’t much of that in here, is it…. 😛
 
 OK!
 Over.
 Out.

Comments are lovely, and so are questions. If you do end up using this I would love to see what you make out of it!
 
COMMENTS & QUESTIONS: HERE You can leave anonymous comments as long as you mentioned you are redirected from Reminiscent-Designs!