80×15 pixel web badges

(March 16 2006)

They're all over the web these days, in varying qualities – those little icons telling you how the site is made, served and affiliated.

Here's a selection I use (visible on the sidebars …) :-

• 
• 

The secrets to making them are well documented, once you get away from the windows “download this prog wot i rote” pages … The information at Zwahlen Design very concise, and provides links out to a few handy generators, if you don't want to try too hard with The “GIMP” yourself.

Basically, you should start with a decent font - and while Verdana might do, silkscreen from Jason Kottke is pretty much the state of the art. Pixel artists may have other small fonts available, but fundamentally when you're working that small, there isn't much you can do differently! Install silkscreen now!

If you try another font (especially a monospaced one), you should be prepared to do manual kerning. I've created loads of mobile phone operator logos using Courier fonts, and spent ages kerning - they end up great, but take ages.

For a pre-prepared collection, try Steal These Buttons

Making a badge …

Start your image editor … The GIMP, naturally :-) Create a new 80×15 image with whatever background you like (I generally choose plain white), and in Advanced Options, delete the comment - we're trying to make small images.

In black, create a 1 pixel border –

• Select / Select All
• Select / Shrink / 1 pixel
• Select / Invert
• Pencil tool – swipe all over the image, it's small ;-)
• Select / None

Now have a think about what colours you want to use. Should you limit yourself to the Web Safe palette of 216 colours? Lynda Weinman might say yes, but Webmonkey says only 22 colours !! Luckily for me, I like green … and I think 33FF66 is an OK colour.

So I'll have white on the left, and reallysafe green number 3 on the right. How about the split? I guess it all depends on the size of the words I'm using - after all, I can force graphics to conform by scaling them, but we're stuck with the font size for words. Zwahlen suggests a 23 – 52 pixel split where possible, so let's try that. (Large)

At the split, you either use a bar (black normally, or white) if the colours on both sides are the same; or leave it out in favour of the right-hand block.

Well, we're having a green block on the right, so let's create that now. It needs a 1px white border too …

• View / Snap to Guides – should be on
• Drag a guide in from the left ruler to x-position 26 pixels
• Drag another in to x-position 78 pixels
• If you like, pop in a couple of horizontal guides at y=3 and y=13
• Choose the Select Rectangular Regions tool
• Drag a rectangle in between your guide markers
• Select the bucket (“Fill with a color or pattern”)
• Choose your color as the foreground (or a gradient, if you're being very creative), and fill it in.

Now it's time for the text. Change the foreground colour to what you want (but probably standardising on either white or black is a good idea) and select the Text tool.

• Drag a new vertical guide in to x=29 – this will be the left-most limit of the text
• Select the Text tool, and in the tool options select the Silkscreen font.
• Turn off antialiasing, and select 8 point text (Silkscreen works best in multiples of 8 points; and there should be a 2 pixel space between all letters, so if you have other hinting settings that contradict this, get rid of them!)
• Type in your word/phrase …
• Select the Move tool, and position your text at the x=29 guideline. If your text is especially short, consider centering it instead (although you'll either have to measure it, or place by eye)

Do that again for your other text section, or munge an image into the space. Where possible, leave the 1px white border in place – but rules are meant to be broken and sometimes it looks effective to have the image breaking out a little bit. Your call. But make generous use of layers to help you try alternatives without breaking everything!

When you're happy with the visible image, try to reduce the final file size :-

• Save the XCF original file!
• Image / Flatten Image
• Image / Mode / Indexed
• Use custom palette (Web) and Remove unused colours
• Save As a png image
• Switch off all extra Save options, and use Compression = 9
• Hopefully you end up with a tiny image, only a few hundred bytes.
• Here's mine … – 302 bytes of juicy goodness!

Gosh … all these little images make me think about sparklines