Tips for Doing It Yourself: Text Design

Hi!

As you may have noticed, I'm trying to blog more. It's part of my regime for "do it yourself" publicity. So I'm going to do a "do it yourself" post.¹ /preamble

Not everyone wants to spend $100, or even $1000 dollars, on a logo for their web site, band, car, company, you name it. After all, a lot of basic "logo" design is pretty much, as my girlfriend put it, "your name in a font."

Still, even for some people, the art of making a basic logo or banner graphic for their blog proves difficult. This is due to the fact that, as we use about 15% (or is it 11%?) of our brain, most of us use only about 10% of Photoshop. Or less, if you're not a Photoshop nerd. This could also be due to the fact that you don't spend hours and hours of your time staring at graphics for web sites. This could also be due to the fact that you are a snake and lack arms, color vision, and a registered copy of Creative Suite 3.

Well, that's OK, Mr/s. Snake, because I have Tips & Tricks for you!²

Disclaimer: Why are you doing this? Isn't this part of your job? Only my part-time job, good sir. Plus, people are going to make their own logos and things whether or not they're aware that I could do such a thing for them for almost free. I am doing this because it pains me to see very simple steps skipped, transforming what could be a great DIY graphic design job into a sad and kind of amateur-looking DIY graphic design job. After all, if all you really need/want is just your name in a font, you might as well make it the best your name in a font it could be!

Step 1. Pick a font.

I'm not going to tell you what font to pick, because I imagine you already have one picked out. And picking out a font takes a while. So forget that. Here are the two most important things you MUST know before choosing a font. Raise your hand (or tail, snake) and swear:

1. If I use a font I will check if I need to buy a license for it before using it as my commercial logo
2. I will never use Comic Sans. For anything. Ever.

Swear.

Swear, dammit.

Step 2. Pick a color.

Again, I'm not here to teach you about color theory (but you can try out this online color wheel which will pretty much do it for you). Here are the down and dirty basics:

If in doubt, go black and white. Seriously. There is nothing wrong with classic black and white. If you're unsure, but still feeling a little daring, try grey and one color. And if that's too much, go back to black and white.

If you pick a color, don't change it. Your "color" is as important to your logo/banner/whatever as the font you pick and what it says and what you put it on. I recently visited The Swivet, read a guest blog, and left without even realizing it was the Swivet until I went back to the Swivet particularly for something Swivetty. Why? Because sometime between the last time I looked and today, the blog has gone from red, burnt orange and grey to white, grey, and neon aqua. For those of you with your color wheels out, yes, those are opposite colors. What if I were illiterate and couldn't read? I wouldn't know it was the same site. I would also probably not be pretending to read a literary agent's blog.


[Note: Also, when trying to find a screenshot of the old blog colors, I found the old-old blog. Which apparently used the blue umbrella picture thing. So now it turns out I was twice fooled!]

Qwest did this to me recently, too. I think the idea is they're trying to look more green, in the most literal way possible:

No, I won't believe the benefits -- who are you, weird green snake logo company?

Anyway, not to be critical, but there is risk when you change colors. Especially ones people are used to seeing.

Step 3: Use Anti-Aliasing

Anti-aliasing is essentially Pantene Pro-V for your text (and other things). You know those commercials with the animation of the conditioner smoothing out your hair follicles? Anti-aliasing is like that for your letters (except it actually works). Seeing is believing:

(first is not antialiased; second is. Image from Wikipedia commons)

Here's how to anti-alias your text in Photoshop:


NOTE: You should NOT use anti-aliasing when designing for print on fabric. The anti-aliasing "border" will interfere with the crispness of the screen printer. Instead, design at a very very high resolution with no anti-aliasing, then let the printer take care of the rest.

Step 4: Save that Sucker! ...Properly, sucker!

I have seen many-a-logo go astray at the very last seconds. You have a good font, you have it in neon pink, it's not Comic Sans, it's anti-aliased, everything is beautiful... But it still looks all grainy and crap! Why??


Because you have JPEG artifacts. This is caused by the compression when you saved. See, back in the day when JPEGs were invented, we had our computers plugged into our phone lines and "dialed up" to get onto the interweb. To save space, images were condensed into mushy packages. But, now that internet is breathable, we can pop a 2MB graphic up on a website and no complaints (not that saving your normal-sized JPEG will be 2MB. But. If it were.).

So, when saving your JPEG (and I do recommend JPEG), make sure your compression settings are set to 9 or 10:

Mine's a 12.

And you will get a nice result!

(Also worth noting: Facebook and Blogspot both resize/recompress images on upload. Photobucket and Flickr, or your own web server, are more reliable to maintain integrity/make your images nice.)

That's about it.

There. Information. Education. Stimulation. And the end of this post. Good luck!

<sup>1. I also like to write about how I'm writing about what I'm doing. Like right now, and up there. That's the meta-part. Also, this is the footnote part.

2. This does not validate your pirated copy of CS3, however.</sup>