buttons! a tutorial

When you bloghop - and I know you do - you may notice that some blogs have advertising sponsor spaces with cute, eye-catching buttons running along the sidebar. I'm going to be honest with you and admit that I've always been intimidated by the eye-catching buttons, thinking I don't have the talent or know-how to put one together.

Creating a Sidebar Button

First you need to go through your photographs and find a kick-ass really nice photo with a decent amount of "negative" space - and by that I mean space where you can place your logo, business, or blog name without having it compete with your background.

I've picked two of my photos, shown below.

This would make a great rectangular button.

This photo gives lots of gray area and would make a great square button.
Time to crop.

Squared image.

Now, we have two images, the top for a rectangular button and the last for a squared off button.

Time to add the type.

I've found that Picnik is a great editing tool for adding type. First you'll need to export your image at maximum quality, full size. Go to picnik.com and click on "upload your photo".

Once your image is uploaded, you will click on the "Create" tab.

Click the "Text" tab and you'll see a little box to your left. I begin by typing "Waterstone", then I scroll down to select a font. Click "Add". Waterstone will appear white. You can then play with the pop-up box to select a color. Click the size button to adjust your size and then control/click to move your type around.

Because I have a longer name, I discover that it's too long to work with this image. I decide to try vertical type. Just click on the center button and rotate your word. Don't be afraid to play around.

Remember: your button will be small, so your objective is to have your type a large as possible and contrasting against the background as much as possible.

When you're happy, click the "Save & Share" tab and save your image. Next, I add it back to my collection of photos, iPhoto and then I can export the image at medium quality at the size I need, which in most cases is 150px wide.




I think the easiest way to send this new image is to upload it to Photobucket or Flickr and send it along as an html image. However, different people have different requirements.

Taking it a step further:
If you'd like to add the "grab a button" html so that folks can add your new button to their website or blog, simply follow this set of instructions. It's not difficult at all.

Have you made buttons? Please let me know if you do it differently.