The 88x31 Button Resolution Trick

If you have surfed around graphics-related websites for awhile, you have certainly come across those fancy little 88x31 pixel buttons. They are the standard for linking websites these days, as they are functional, stylish and save space over those huge banners of yesteryear. Granted, you can't display entire ads on the buttons; their size is a bit restrictive in this regard. When done right they can be incredibly attractive, just begging a person to click and see the wonders beyond.

I receive several requests for a link button through the course of a week, but had procrastinated in generating one because, quite frankly, I couldn't seem to achieve the resolution that so many of these buttons displayed. Animating the thing wasn't a problem; Image Ready takes care of that rather nicely. The problem stems from creating text that a viewer can actually read. Even crisp fonts set to 6-8 points would turn out fuzzy or otherwise unimpressive when applied to the buttons.

So what is the answer? Well, for me it was choking down a bit of pride and actually asking another webmaster how they did it. The response I received was a real head-slapper… I should have known.

First, the fonts: The primary concern here is resolution, something the true type font style has a problem with when reduced to 6-8 points. This is resolved by downloading a few bitmap or pixel wide fonts; these were designed to give you great resolution in a small viewing area.

Here are a couple resources to download fonts of this caliber:

Miniml.com

www.geocities.com/Area51/Shadowlands/7677/

www.04.jp.org/extra/bitmap

Another trick used by the 'Button Masters' deals with single pixel offset beveling. Say you want to add a bit of texture or depth to your button… too much is going to distort the image beyond recognition. The size simply doesn't allow for much in the manner of styles. When you decide to apply a bevel, reduce the bevel settings to a single pixel… this will still give the illusion of depth. The eye expects subtlety… you brain will recognize the size of the image and say' hey, that's small, so the effects should be small'.

The last tip deals with the Highlight and Shadow modes for the bevel. Instead of using the standard Screen/Multiply modes, use the Color Dodge/Color Burn modes respectively. This helps to further draw contrast out of small characters, creating legible text.

After all this, here's the button I came up with for http://actionfx.com:

Crisp, stylish, and catchy… just what a button is supposed to do.