Icon Workshop #001: Text
--- Originally written by exp0se and added to by the moderator team of icons_concrit. Icons and guides used have been credited to their proper creators. Should anyone wish to have their work removed, please let us know. ---
WHERE DO I START?
If you've never added text to an icon before, do your homework first. Read tutorials and font guides. There are resources around the internet and on Livejournal for icon makers who are interested in adding text to their icons. We'll go into those later, though. After you've read some guides and tutorials you should hopefully have a firmer grasp on how the concept works. Next, get acquainted with your graphics program and its text and font options. Not all graphics programs are created equal. Photoshop, Paintshop and Gimp all have different ways of handling text. Get educated on how yours works. Once you're familiar with the ins and outs of your program and its text options you can move on to the next step -- adding the actual text to the icon.
BUT WHAT ABOUT INSPIRATION?
Take a look at the finished product, your icon. Obviously, the subject matter of the icon is going to heavily influence the text you add to it. Specific characters and scenes from tv shows and movies are probably the easiest to work with in terms of text. You can tap into so many things: dialogue, emotions, quotes. Use your surroundings to get inspiration. I like to turn on my radio and/or Ipod when I make icons. Music is the easiest and most fun text to add. Try to make your environment as distraction-free as possible. Watch the movie or episode of what you are iconning. Or take a look at the work of other icon makers to get ideas. Still at a loss at what to add? Just make it up as you go! There are no rules or regulations when it comes to adding text to your icons. The sky is the limit.
FONTS. OMG THERE ARE SO MANY! HOW TO CHOOSE?
Your computer comes pre-packaged with hundreds of fonts. That's a great place to start. Open up your graphics program and locate your text tool. Most often text options pop up in some sort of dialogue box with various options and settings. This is where you can find the fonts you currently have on your computer. The simplest place to start when it comes to choosing a font? Just scroll through what you have and try them all! When I add text to my icons, the majority of my font choices come through random scrolling, believe it or not. I literally will try out dozens of fonts before I settle on one that I feel works with the icon. And one font does not work on every icon. Sometimes the font is too large or too small. Or the placement just won't work. Random scrolling through your fonts can help you determine what will work best on your icon. The icon you've created can also influence what font you choose. Crowding large blocks of text over a subject's face or over a scene doesn't always work. Adding tiny cursive type fonts to icons with a lot of space to them can make the text barely visible or hard to read. Use your judgment. Put yourself in the shoes of the person who might be viewing your icons. If you can barely read the text or make it out chances are the person who's viewing your icons can't either. Trial and error really comes into play here.
DOWNLOADING FONTS FROM THE INTERNET: PROS AND CONS.
While having hundreds of fonts readily available on your computer is great and quite handy, it's also fun to explore your options and find fonts that may not be available on your system. I find it most helpful to ask around. Don't be afraid to reach out to other makers and ask them what fonts they use and where you can find them. A lot of makers have font guides they've created themselves or have access to font guides posted by others. That's the best place to start if you are searching for new and fun fonts to add to your system. Also, GOOGLE IS YOUR FRIEND. However, when you finally decide to start downloading fonts there are things to watch out for. For instance: the commercial font versus the free font. Commercial fonts are self-explanatory. You are required to pay before you can download it. I recommend avoiding commercial fonts because most of the time they are incredibly expensive. Free fonts are obviously free, LOL. Sometimes you can get lucky and find a clone version of a commercial font (clone meaning an exact or somewhat exact replica of a commercial font) available for free. Simply Google free fonts and voila! there are tons of websites that offer fonts for free. Dafont.com is the most widely recognized source of free fonts and an excellent place to begin your quest for a little variety in your text.
LESS CAN BE MORE. MAKING DO WITH WHAT YOU ALREADY HAVE.
So maybe you've explored your options and are not really finding particular fonts that catch your eye. That's ok! The fonts already installed on your computer should not deter you from adding text your icons. 99% of the icons I add text to use fonts that are already on my computer. Old stand-bys like Times New Roman, Georgia and Arial are probably the best fonts to use on icons, hands down. They're simple, yes, but can be used in pretty much any text situation. These fonts are very very versatile. You can do a lot of things with just a simple font already installed on your system.
WHAT ARE ALL THESE OPTIONS AND WHAT DO I DO WITH THEM?
Locate your text tool in your graphics program. There's that dialogue box again. And wow, there are so many options. Now, calm down and breathe. Yes, there are tons of options and settings but you don't have to be scared. Once you learn about each setting and get familiar with the ins and outs these options won't feel so overwhelming, I promise. Below I've added links to character palette guides for the most common graphics programs: Photoshop, Paint Shop Pro and Gimp.
Character Palette Guides for Photoshop, Paintshop Pro & Gimp
01. Photoshop Text Tutorial: The Character Palette
02. Working with Text tool in Paint Shop Pro
03. Basic Text Tool Usage in Gimp
WHAT IS A FONT GUIDE? WHERE DO I FIND ONE AND HOW CAN IT BE USEFUL?
A font guide can be many different things: a resource to find different fonts (say where a user has posted the fonts they most commonly use), a basic guide on how to use text and incorporate it into icons or simply a tutorial on various text options or how to achieve certain effects. A simple Google search for font guides can produce a variety of results. Also, places like icon_tutorial and good_tutorial have a variety of text-related tutorials and guides to choose from -- browsing the tags and memories of these communities is usually the best way to begin your search for guides and tutorials on text. A lot of icon makers have their own font guides or have access to font guides posted by others. DON'T BE AFRAID TO ASK AROUND.
Some essential font guides I've found useful:
01. Font Guide by exp0se
02. Font Guide by eamesie
03. A Font Guide by letsey_x
04. Font Tutorial by neversleeps
05. Fonts, Fonts, Fonts by emmahyphenjane
06. The Font Pimp Post by lemonpunch
07. Text Tutorial by januaried
08. Text Guide by absolutelybatty
09. Typography 101 and Typography 101 (pt.2) by icedragoncat
10. How to use Open Type Features in Photoshop by uglybusiness
Useful communities and entries related to fonts and text use:
01. Text-related memorable entries @ icon_tutorial - Text-related entries dating back to 2003. Covers the three most common graphics programs: Gimp, Paint Shop Pro & Photoshop.
02. fontaddicts - Inquire about fonts, ask text-related questions.
03. How to use Text tag at good_tutorial - Font guides and tutorials.
LYRICS, QUOTES & DIALOGUE ARE YOUR FRIENDS.
So now you've got a grasp on the text options in your program and are more familiar with various settings and fonts. Here comes the hard part. What to actually say. I find this aspect of adding text to icons to be the most daunting and frightening. It doesn't have to be, though. Simply tapping into the resources readily available on the internet and in your own environment can make this task less time consuming and scary. Various websites offer transcripts to certain tv shows and movies (say Supernatural Wiki for Supernatural and Buffyverse Dialogue Database for BTVS) if you are looking for direct quotes or lines of dialogue to add to your icons. Song lyrics are probably most commonly used on icons -- I use letssingit.com to find lyrics, and of course, Google is your friend. Or (and this is the simplest of all) MAKE SOMETHING UP. Use your imagination and just add one word or sentence from the top of your head. With a little creativity and imagination the sky can be the limit on what text you decide to add to your icons.
HOW TO RASTERIZE TEXT AND WHY
You can't use some of PS tools on the text layer unless you rasterize it first. You need to rasterize text to use the Blur tool, for instance, or the Gaussian Blur filter.
To rasterize text, select it in your layer palette and then go to Layer > Rasterize > Text. You can also right-click on the text layer and choose the Rasterize text option, instead.
Once rasterized, you can't use text options anymore. You won't be able to change the font, for example. Therefore, you may want to duplicate you text layer, rasterize the copy and work on that one, so that you can always go back to the original text layer.
TEXT TEXTURES: TIPS
Slapping a random text texture on your icon won't add that extra-something you're looking for. If you want to use a text texture, choose one that fits your icon and be creative!
First of all, the text meaning should match the mood of the scene/subject you're working with. You wouldn't add "SHE'S BROKEN" to a close up of Gandalf, would you?
Once you're satisfied with the one you chose, experiment with it: you can play with the Blending Mode, move it around the canvas, rotate it, change its colors and contrast, or resize it with the Free Transform tool.
Text textures can also be inspiring: if you don't like the meaning of the text, but you do like its placement, you can search for a similar font and recreate it with your own words.
MORE USEFUL HINTS, TIPS AND TRICKS
01. A combination of blurring and sharpening can do wonders for text and make it stand out nicely. Use moderation though. Fading is your friend.
02. Duplicate your text layer instead of using bold.
03. Use your color picker tool and sample from the colors in your icon(s) to create text. Standard white is nice, but color is good too.
04. Don't use the same font on your icon(s). Mix it up and add different fonts in different sizes or styles.
05. In Photoshop, use the Free-Transform tool to shrink text down and move it around the icon.
06. Don't be afraid to use tiny text. You can create your own too!
07. Text textures can be nice for just starting out, but if you want to be creative do not rely on them solely for adding text to icons.
FONT SUGGESTIONS & A DOWNLOADABLE ARCHIVE OF USEFUL FONTS
DOWNLOAD .ZIP @BOX.NET
DOWNLOAD .RAR @BOX.NET
GOOD TEXT GALLERY
Text in Negative Space
Text on Close Ups
juanxyo | spiffydaze | kawaii_chickenneversleeps | phaust_ | heartoutofstone
Using Different FontsUsing Fun Font Colors
theotherayn | crazyvictoria | sarisafaritalipuu | fuuurs | lilhellsangel
Lots and Lots of TextRotating Your Text
exp0se | jorge_2 | tinebrellaraiindust | absolutelybatty | kawaii_chicken
Different Font SizesTiny/Unreadable Text
blindbeats | rizny | ambiguous_opalgiulsss | longerthanwedo | mm3butterfly
Text TexturesText Only
dahliaxxx | erzsebet | pooja_rpiaresquare | ciudad | architects
Other Fun Text Effects
fromperdition (duplicate) | xmaidelx (shiny) | rabidline (split) fuuurs (blending) | born_butterfly (masked) | motorized (large)
And that concludes our workshop. Feel free to discuss in comments your favorite fonts or any tips and tricks related to text you find useful! Suggestions are also welcome. Thanks for reading! :)