Silent Storms

As a mem­ber of the fan­list­ing com­mu­nity, I’ve come across quite some link back but­tons (com­monly called “codes” in the fan­list­ing world) that I wouldn’t want to use to link back with. I usu­ally make my own code if those pro­vided don’t look good or if there aren’t any in my pre­ferred size. Occa­sion­ally though, I don’t join that par­tic­u­lar fan­list­ing at all. I’m prob­a­bly not the only one that has ever decided to not join a fan­list­ing because there weren’t any nice look­ing codes to link back with. This means that if you don’t know how to make your codes look good, you might be miss­ing poten­tial mem­bers. This also goes for any other site, if you don’t pro­vide nice look­ing link back but­tons, peo­ple will not link back, or at least not as many as oth­er­wise might be link­ing back. As there is no real dif­fer­ence between link but­tons and codes, and to make this eas­ier to read, I’m not going to keep refer­ring to both codes/link but­tons, but will use the word link but­tons through­out the tutorial.

This is a guide to mak­ing link but­tons, con­sist­ing of two parts. I’m using Pho­to­shop but you should be able to use any other graph­ics pro­gram to do the same things. In this first part I’ll start with a bad exam­ple, explain what’s wrong with it, then tell you the very basics of mak­ing nice look­ing link but­tons, and in the sec­ond part of the tuto­r­ial I’ll give some exam­ples of fancy things you could add to your link but­tons to make them stand out more, as well as sev­eral fast meth­ods of mak­ing codes. I’ll be mak­ing a 75x50 sized link but­ton as an exam­ple, but you should be able to make a link but­ton of any size with this tuto­r­ial. The image I used comes from iStock­photo.

What NOT to do
The fol­low­ing image is an extreme exam­ple of what could be done to make a link but­ton look bad. It’s not really that extreme, and I have actu­ally seen link but­tons that looked some­what like this. The image is resized out of pro­por­tion, the text is not in a clear font and it’s anti-aliased, and there’s no bor­der around the link but­ton. It could be even worse if the text didn’t have an out­line either, as that would make it even less read­able.

The very basics of mak­ing a link but­ton look good include proper resiz­ing and crop­ping of the image, adding a bor­der and using pixel fonts.

Resiz­ing and crop­ping the image
When resiz­ing an image, you will need to keep the pro­por­tions as they are. In Pho­to­shop, make sure to check the Con­strain Pro­por­tions set­ting when resiz­ing an image. For any other graph­ics pro­gram, you will need to find out how to resize while keep­ing the image in pro­por­tion your­self. (It’s usu­ally not hard to find though.)

Hav­ing resized the image while keep­ing it in pro­por­tion, may leave you need­ing to crop the image.

Select the Rec­tan­gu­lar Mar­quee Tool.

Select an area as big as you want your link but­ton to be. I’m mak­ing a 75x50 link but­ton.

Move the selec­tion to the part of the image that will fit the link but­ton best (the face of a per­son, the main fea­ture of an object, etc.). Crop the image (In Pho­to­shop, go to Image > Crop). Depend­ing on your image, you might want to sharpen as well. For the sharp­en­ing, just try sharp­en­ing once or even twice and see what looks best (unsharp­ened, once sharp­ened, sev­eral times sharp­ened). Depend­ing on your image, you might also have to play around with bright­ness and con­trast.

Adding a bor­der
Adding a bor­der is pos­si­bly the sim­plest thing to do with a link but­ton, so why I’ve come across link but­tons with­out bor­ders is beyond me. For a sim­ple bor­der, you can either draw it on (in Pho­to­shop the best way to draw a bor­der is with the pen­cil tool set to 1px with 100% hard­ness), or you can use your program’s fea­tures. In Pho­to­shop, there’s two sim­ple ways to add a bor­der (apart from draw­ing it). You can select the entire image, and, with any of the selec­tion tools active, right-click the image and click “Stroke…”. In the box that pops up, you’ll want to set the width to 1px and select a colour that goes well with your image. Another way is to right-click the layer in the Lay­ers panel, click “Blend­ing Options…” and select Stroke. Here, you’ll want to set the size to 1px, posi­tion Inside, and then select a colour that goes well with your image again.

If you’re using a dif­fer­ent graph­ics pro­gram, either draw on the bor­der or find out if your pro­gram has a fea­ture to eas­ily add a bor­der to images. In some pro­grams, the eas­i­est way to add a bor­der is by select­ing the entire image, con­tract (shrink) the selec­tion by 1px and invert the selec­tion so you then have a 1px selec­tion around the image, which you then fill (looks like a paint bucket in most if not all pro­grams) with the colour you want.

Now you know how to resize and crop an image, and add a bor­der, let’s look at the text.

Adding text
To add clear text to your link but­tons, you’ll want to use pixel fonts. Pixel fonts are made to be read­able and look good at small sizes. My per­sonal favourites are and (click to go to their down­load pages), and you can find a mas­sive amount of other pixel fonts at DaFont. Set the font size to 8pt/8px for 04b_24, or 10pt/10px for wendy. If you’re using another pixel font, the size usu­ally should be 8pt/8px, but you’ll have to try it out and see at which size it looks good. Also, occa­sion­ally the text turns out to be a big­ger size than it should be at 8px (04b_24) or 10px (wendy), I believe this is some­how caused by the image you’re using. No prob­lem, just set the size to 6px (04b_24) or 8px (wendy) instead. If it doesn’t work out, just try sev­eral sizes and see at which size it looks good. You can use dif­fer­ent sizes than those listed in the drop down list by just typ­ing it in the size box. Depend­ing on your pref­er­ence, you might want to add the text in ALL CAPS when using 04b_24.

When using pixel fonts, make sure to turn off anti-aliasing to keep the font clear and easy to read. Depend­ing on your pref­er­ence, you may want to add an out­line to the text. I per­son­ally like it much bet­ter when an out­line is added, but it can also look good with­out adding an out­line, so that’s really up to you to try and see what looks best. I per­son­ally pre­fer using white text (or very light coloured), and adding an out­line using the same colour as the bor­der. To add an out­line to the text in Pho­to­shop, right-click the text layer, select Stroke, set the size to 1px, the posi­tion to Out­side and select the colour you want to use. Alter­na­tively, select the text and expand the selec­tion by 1px (Select > Mod­ify > Expand), add a layer under­neath the text layer, and fill the selec­tion with your cho­sen colour.
Text is usu­ally placed in one of the cor­ners (or just a few pix­els from the cor­ner), but if your image allows, it can look really great to be placed some­where else entirely. With Wendy’s pixel font, the * (aster­isk) is a heart which can also be nice to add.

Now that’s a very basic but good look­ing link but­ton. If that’s enough for you, you may stop here. There’s plenty of things to make your link but­tons stand out, though. Con­tinue to part 2 if you want to do some­thing extra.

This entry was posted on Monday, November 9th, 2009 at 15:12 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.