Ad Button

For my How To column this week, Stephanie requested a tutorial on how to design a blog button. (By the way, Stephanie had her baby on Friday, so go on over and give her a big ol’ cyber hug!)

Before I started designing blogs, I had never so much as designed a simple button. I had never designed ANYTHING! Really, mine is the story of an unlikely designer; I should write a post about that sometime!

But designing a button is pretty simple to do, if you have a graphics program. I use Illustrator for everything. But I know most people don’t own Illustrator, and even fewer know how to use it. So if you have Photoshop or Photoshop Elements, those will work just fine. And I’m sure there are other programs too. Use what you have and what you know; the basic principles are the same no matter what. (Gimp is a free program that you can download if you want to learn but don’t care to shell out the big bucks. Or any bucks.)

1. Create Your Canvas

Start a new document. A typical size is 150×150 pixels, but you can make it whatever size you like.

2. Add Text

Decide what you want it to say, and keep it short and sweet so that it is legible. Create a text box and type your text inside.

Choose a pretty font. Then select a color. Or you may wait to do that until you have your graphic and know what colors you’re using. In my case, I’m matching it to my blog, so…

3. Pretty It Up

Select or create an image. Use a photo or an illustration; it doesn’t matter. Of course it can be all text, but I usually have an image of some sort. Place the image in the box. Then fool with the words and the image until you like the way it looks.

4. Give It the Finishing Touch

If you desire, you can create a border around the button and give it a background color. I’m going to stick with a white background, but I do want a black border. Which I kinda already had b/c it was how I defined my square back at the beginning. But typically I add that last, when I know what color I want it to be. Then you can just reorder your layers so that everything shows the way you want it to. So here’s my final product:

EXTRA TIPS:

1. Sarah has some excellent suggestions for avoiding fuzzy graphics in her Works For Me Wednesday post yesterday. I did the best I could with these, but the coffee mug is still fuzzier than I like. I prefer to work with vector graphics (they never get fuzzy!), but these graphics happen to be the jpeg kind.

2. Don’t go crazy with fonts; use 2 at the most. If you use 2, there should be some contrast. You don’t want two similar fonts. Make one scripty and one typed; make one thick and bold and one more delicate; make one italicized and the other plain — you get the idea. In a button, I usually use just one font. In a blog header, I often use two. I rarely use more than two; that gets dicey from a design standpoint. I subscribe to the KISS philosophy of design — Keep It Simple, Stupid.

3. You can buy images at iStockphoto.com. That is where I buy 99.9% of my images for DCR Design. In the case of my current blog design and the sample button in this post, I had that graphic custom made by Steve at NovakIllustration.com — he’s fabulous and affordable if you ever want something that no one else has!

Feel free to ask questions in the comments! I’ll do my best to answer them.

June asked in the comments what a blog button is for — good question! I answered in the comments, but in case you don’t go back and read those, blog buttons are for promoting your own site on other blogs. They are a way to promote carnivals (like the What I Learned This Week button on my sidebar). They are also used as ads (see the six square ads on my sidebar.) There is a myriad of uses!