Tutorial: Text-Only Icons

grrliz's Guide to Making Text-Only Icons

That's guide, not tutorial. :)

Samples

Choosing Textures

You can make text-only icons on plain, solid backgrounds but what fun is that? Choosing to place all your text on top of a texture gives the icon more depth, which is something you usually need considering you have no imagery to seduce the eye with. Textures can often define the way a text-only icon shapes up, so it's important to choose something that works with your goals right from the beginning.

	This is a great texture to use for a text-only icon because while it provides lots of different degrees of colour and tone, it still leaves a large enough area for you to place text in without the texture being obtrusive. Texture by inxsomniax.
	Like the previous texture, his is another good one to use for a text-only icon because it gives a splash of colour while leaving a wide open area for the text to occupy. Texture by 77words.
	At first glance this texture may seem too busy to use as a base for a text-only icon, what with that cloud texture occupying most of the space. But because the different colours in the cloud portion are relatively of the same value (i.e. light vs. dark), it's easy to compensate for this by putting text of a dark colour right on top. Presto! Texture by grrliz_icons.
	This is a terrible texture to use for a text-only icon because, as you might have guessed, it's way too busy; the various polka-dots and half-tone patterns would compete visually with your text and it would be an all around retinal nightmare. Texture by grrliz_icons.
	This one is the type of texture that works in some situations and not in others. I've seen it used with the stripes running veritcally and it's worked out in a satisfactory way; using it horizontally would mean your lines of text compete with the stripes, and this can create problems. With textures like this you have to be careful how you use them: sometimes they work and sometimes they don't. Texture by grrliz_icons.

Don't forget as well that you don't have to use textures exactly as you find them in resource communities. You can:

• add brushes to grunge them up further
  
• add gradient maps to change the colour scheme completely
  
• play with curves / raster layers to make subtle changes to the colouring
  
• resposition the texture and/or paste other textures on top to create something brand new

The key word here is EXPERIMENT.

Choosing Fonts

This may seem obvious, but your font choices can make or break a text-only icon. The key here is to vary your fonts with an icon: while I have occasionally used a single font on a text-only icon, usually I use two different but complementary typefaces. Why use different fonts for different words? To create emphasis without having to use punctuation. If there is a word or string of words that you want to highlight, choosing a font that is different from what you've used on the rest of the words on the icon will draw attention to it/them.

fonts I often use for regular text

fonts I often used for emphasized text

You'll notice that I often like to keep font types together: if I use a unique serif font to emphasize certain words, I like to use a common serif font (Times New Roman or Georgia, etc.) for the unemphazied words. The same is true for sans-serif fonts: I'll use a unique sans-serif type face and then use Arial or Frankling Gothic Medium Condensed for the unemphasized words. This creates a consistency between the fonts without having to use the same font for everything.

Sizing and Positioning Words

As I said in the previous step, choosing different fonts can create emphasis on certain words without the need for punctuation. The same is true of font size and position: by organizing your words in certain ways on your icons, you can have it read the same way as it would if you were properly punctuating it. Plus variation in size and position creates more visual dynamism than having the same sized fonts placed haphazardly on the icon.

BAD

vs.

GOOD

In the "BAD" example, all the words are relatively the same size and they're positioned in a very boring centred justification. Ho hum. Even though I've used a different font for the words "born" and "dying", they still get lost somewhat amongst the rest of the text.

However, in the "GOOD" example I've made the size of the unemphasized words smaller to further unemphasize them; you can now see "born" and "dying" that much clearer in comparison. I've also repositioned all the words. Positioning the words is probably the trickiest part of making a text only icon, and the best advice I can offer is pay attention to letter shapes and proportions. In this example, the words "being busy" are roughly the same length as the word "born", which I find helps in keeping the icon visually stable. The words "is busy" are tucked nicely beside/underneath/above the words "born" and "dying" because the letter forms allowed me to do so. You'll have to experiment a lot with this type of thing and it won't always work as well as you'd like it to, but the point is to keep experimenting with it.

---

And that's about it! If you put all the steps together, you should end up with something like this:



Only, you know, smaller. If you've made any icons using this tutorial, let me know so I can check them out! :)