creating crisp letter logos

[deltron23]

I use fireworks to create gifs with lettering. I utilize the smooth anti-alias tool for my fonts; unfortunately, they always turn out blurred. The crisp anti-alias makes my fonts look rigid. Does anyone have any advice in creating clean lettered gifs?

[Chuma]

It depends what program you use to create the images with lettering as some programs have different settings for anti-aliasing.

What I do when I don't want lettering in an image to appear blured is create it in a vector drawing program, take a screenshot and then import it into my favourite graphics program (it may be it a bit long winded but it works for me.)

Thanks.

[lorax]

deltron23,
Fireworks is able to create nice crisp text gifs. I assume your text is actually text and of one color. I also assume you've set the optimize option to some form of GIF as opposed to JPG. Set the anti-alias to crisp and make sure your zoom is set to 100%. If you're zoomed in more, then things will begin to look fuzzy. If you're creating a transparent GIF then be sure to use a matte background and set the color to match the background of whatever will be visible through the image.

[mivox]

If all else fails, try using a different font. I've found some that just look like garbage at small sizes, no matter what the setting, and then you might find a very similar one that just happens to be spaced differently enough to look much much better.

[john3012]

I'm trying to make small, crisp GIFs for navigation on my web site. They always end up looking blah -- blurred if anti-aliasing is on, sharp, but not so hot with it on. I'd love to emulate the nice navigation GIFs on [atomica.com,...] for example.

I've tried using a vector program [Corel Draw 8] to make text and port it over into Corel Photoshop to make the GIF, as suggested by Chuma, but the results aren't good. I've been using Copperplate Gothic because I like that there are no descenders. [Lower case is a smaller version of upper case.] I've also tried Verdana with similar results.

Can you folks point a newbie to a tutorial that would help me get a jump start on this? [I want to avoid Photoshop, because it's so powerful that I feel I'd spend most of my effort on the learning curve.]

[mivox]

If you want non-anti-aliased "pixel" text, use a web font like Verdana or Tahoma with anti-aliasing turned off... and watch your font size. I find 9 or 10 point works well.

Once you get into small pixel font style text, it's ALL about what font you choose. :)

[martinibuster]

The problem with small fonts is with the 72 dpi computer screen resolution. The smaller you go the cruddier the results. It's hard to beat the blurries with certain fonts.

I've recently said the hell with gif fonts for rollovers and I've been using css styled html rollovers. Why keep forcing gifs to do that what they cannot do? Html fonts look clean, and my clients are digging them.

[idiotgirl]

Ditto to mivox. Alternately, you can do the text in something like FrontPage or Dreamweaver on a background color and view through a browser (non-aliased), then screen capture it, drop the background for transparency, then slice your images for menu items. You can also do your text maybe 25-30% more than the size you want (aliased) in something like Fireworks or Photoshop, then->reduce ->sharpen ->slice to make it appear crisper than if you started with a smaller size. Problem is, you might retain more of the original background color (if there was any to begin with) if you are later removing the background for transparency.

Screen fonts, like atomica uses on the top menu bar, are only non-aliased system fonts like Arial or Verdana. Nothing super fancy there. Can be replicated creating the fonts at 10pt with aliasing turned off or a screen capture front FP or DW. Then again, using the same fonts you can specify absolute pixel size using css (martinibuster's suggestion) and avoid the hassle all together.

[kingkelly]

If youre worried about using tiny letters, search for pixel font, and you will be able to download a few free ones. Theyre special for small text use. No rounded corners, so no worrying about blurriness.

Excellent for use in Flash by the way

[martinibuster]

Hi idiotgirl, great tutorial.

Also forgot to mention that when using the css styled fonts (p= verdana 10 pixels, etc.), you can avoid using JavaScript for the rollovers altogether by using CSS. Thus increasing the download speed.

That said, there's also something to be said for a well done JS rollover when working with images.

[jfred1979]

Like many others have said, I have found that using the right font is crucial to getting good results with small sizes. In general I have found that using sans-serif fonts works better with small sizes IF you are going to anti-alias it. One trick I have used in Fireworks to smooth small text that doesn't respond well to anti-aliasing is to add a very thin glow or drop shadow with an offset of 0. Again results depend on which font you are using and you'll have to mess with the settings. Finally I have realized that I'm just being too damn picky and most users are not going to notice if a 10 point font is anti-aliased or not, other than when they are unreadable!

[john3012]

You folks are very helpful. I love the idea of "pixel fonts," but when I Googled for them, I got lost in a world of fonts w/o finding any to download. I'd be grateful for a suggestion of a specific site to download from(hopefully free).

[martinibuster]

This may be what you're looking for. It's a cool free minimalist font by Jason Kottke called Silkscreen. Just google Jason Kottke Silkscreen.