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 Adobe Illustrator for just about everything, but I know most people don’t own Illustrator, and even fewer know how to use it. If you have Photoshop or Photoshop Elements, those will work just fine, and there are free programs such as Gimp, 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 use 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 because 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. Work with good quality graphics so they don’t get fuzzy or pixelated. I prefer to work with vector graphics because they never get fuzzy.
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.
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!
UPDATE: To link your button to your site, you just need to use a code like this:
<a href=”http://www.musingsofahousewife.com”><img src=”http://i268.photobucket.com/albums/jj12/dcrdesign/SMB.gif”>
Or here is a generic example:
<a href=”YOUR BLOG URL”><img src=”YOUR IMAGE URL”>
To create the box under the button with the code, see my post How To Create A Blog Button Code.
Awesome Awesome Awesome! thank you so much for the tutorial!!!!!
http://theawesomemagicattic.blogspot.com/
thank you so much! You’re amazing
like the blog button?
You are a handy gal to know! Thanks!
Thanks for the great tip! You make it so simple and easy.
Great post. I like making buttons they are fun! I am happy to see a suggested size though – I always wing it. I know I made one for a friend that is too big – I think today I will go fix that!
June, good question. In fact, I’m realizing there is a LOT more I could have said in this post.
Blog buttons are great 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!
What do you use a button for? Don’t get annoyed with me! I really don’t know.
I love this how to section your doing. I know how to make a button.. my issue is over designing stuff. I like the tips you had in there about fonts and size.
Hi Jaime! I purchase my points in bulk. If I can afford it, I purchase 300 at a time. But usually, I purchase 120.
Do you have a subscription for istockphoto.com? I checked out their prices for images and saw the credits and the subscription plans (or pay per image.) Which do you feel you get the most value out of? Thanks!!
There is a HU-HUGE difference between Illustrator and Photoshop. NIGHT AND DAY. I should write a post about it. But the nutshell version is this. Illustrator is vector graphics. That means shapes are defined by lines. You can enlarge them and reduce them and no matter what you do, it maintains the quality of the original graphic. Photoshop is pixel graphics. So when you enlarge the image, you lose the quality of the resolution. I can fit what I know in Photoshop on the head of a pin. It drives me nuts. Illustrator is so intuitive. It’s AWESOME. But it’s pricey. I only bought it b/c I knew I was going to be designing for a biz. If you can afford it, go for it. You’ll NEVER regret it. But if not, get Photoshop Elements and learn how to use it. You’ll be just fine.
Thank-you for explaining the button. My daughter and I are new to blogging and love to learn as much as we can. I will be back to check out more info. I have one question right now- What is the biggest difference between Illustrator and Photoshop?
I need to get busy making a button. This is really just so much fun.
A great “How To”.
Thanks
Oh and happy St Patrick’s Day too (only a few days late!)
What an easy to follow tutorial!
What a great post! Thank you for walking us through this step-by-step. Especially the part on how big to make the button. I’ve wondered about that.
I’ve always wanted to design blogs and buttons. I just don’t have the software. I’m hoping to one day get a REALLY NICE design. It would be real cool if I could learn to do it myself!
This is SO good. I’ve tried my hand, but you make it seem so simple.
We’re doing a big big books giveaway for Mother’s Day at 5minutesforbooks, and I want a button. I was going to ask my friend who works for me for free (ha), but I might try it before bugging her. Hmmmm.
All good questions! What a lot of people do is put up their own button on their own site with a little box beneath it including the code for their button linking to their site. Anyone desiring to add the button to their site can grab that code an add it. It’s an open invitation.
I would caution you, however, about posting buttons to the blogs you read because blog buttons are like weeds — they will very shortly overtake your sidebar.
Some people do this, but I tend to keep the blogs I read/recommend on my blogroll page and save my buttons for causes I want to promote or sites that I am a member of.
Thanks for your clear instructions. Since I went into this knowing nothing, I’ve been figuring it out step-by-step as I put my blog together.
I always wondered about those ad boxes.
Here are my possibly too-elementary-for-words-questions, kind of a piggy-back back on June’s. You said blog buttons can be used to promote one’s blog on another blogsite. I’m clueless how you do that. Wait for an invitation? Do they need a URL/link/programming code, etc., with it?
Thanks again.
God bless!
I just love these tips! Now I am off to read how to make a blog header, except I love mine. I very talented mom/blogger/web designer did it for me
p.s. what software do you use on that cool mac of your’s…
Such a helpful post! Thank you! What fonts do you typically use/recommend for buttons?
Stephanie, I have about 100 fonts I choose from, lol!! If the button coordinates with a blog header I’ve designed, then I usually use the font from the header. Otherwise, I just choose whatever I feel matches the design and is legible. Sometimes I try several fonts before deciding on one. That’s part of the fun!
Courtney I use Illustrator and I LOVE IT. It’s a vector program so it uses lines and fill color instead of pixels so no matter how often you re-size, it never loses its perfect resolution. LOVE the Illustrator!
How do you get the boxes for the button code?
Hi, Thanks for the lesson on the logo/buttons. My question is I use a wordpress blog. How to I put the button in the side bar and hyperlink it. I know it is easy but mind has gone blank and cannot find the answer.
Thanks
Andrew
Andrew, you want to create a widget and then write a code that looks like this. <a href=”http://www.musingsofahousewife.com><img src=”http://i268.photobucket.com/albums/jj12/dcrdesign/button3-1.jpg”>
once you have created the button how do you create a html code for others to use the button??
I googled “how to make a blog button,” and yours was the first post to show up. Thanks so much for the tips, I just finished mine! =)
Love your blog!
Thanks for the info on how to design the button…but my question is same as Sheila, Andrew and Andrea….still have no clue how to make that .jpg to be put on the side of the blog with the box and the html code.
What´s a widget? where do I get the code?
I´m lost, but need to find the answer.
Please H.E.L.P!!
Thanks!
Here is a post with the code for making the box under the button.
http://www.musingsofahousewife.com/2009/05/how-to-create-a-button-code.html
Thanks so much. I just used this to create a new button for my life is therapy series. Thanks!
Thanks a bunch for this tutorial! I’m going to try this soon.
Wow. thank you! I am clueless when it comes to this stuff! I feel so much better now!
Thank you so much for your advise – Erin at House of Turquoise suggested I read this to help me create my own button. I will be very busy this weekend!
Thanks for the great post – and the one about the code, too! This is what I thought I had to do, but reading it made my trust myself. And I definitely didn’t know the code part. Thanks for the help!
I just made my blog button, but how do I use it? How do I add a hyperlink (if that is the right word) to it? Sorry. I am new at this.
Hi Lila. This post tells you how to display the button with a code box under it (most people put this on their sidebars in a widget.) http://www.musingsofahousewife.com/2009/05/how-to-create-a-button-code.html
If you just want the code to link your button to your blog, then I have just added that to this post.
I searched “how to make a blog button” and I found this awesome post. Thank you so much for such a great tutorial…I think I might actually be able to do this…I am anxious to try!
Thanks for sharing…
The Gimp program makes no sense. I can figure out pretty much any software program, but this one doesn’t do what you think it should and the tutorial/help is not helpful. I guess that is what you get for free.
Awesome! I just created two buttons in less than 5 minutes! That was so easy! Your tutorial made me feel so HTML savvy!
lol
-Autumn
P.S. here are the links to both of my blogs if anyone is interested:
http://www.anautumnday.blogspot.com
ww.aspiringauthoress.blogspot.com
Hoep someone ejoys my blogs.
P.S. oops! I forgot a “w” in the last web address. sorry!
I downloaded illustrator, but I can not figure out how to use the program based on these instructions. They are too vague and if someone has never used illustrator these instructions do not help. Could you give a bit more instruction?
You are correct, these instructions assume that you already know Illustrator or another graphics software. Illustrator is a powerful program, and I’m afraid I can’t give an adequate tutorial on it. I highly recommend Illustrator for Dummies if you are interested in learning to use it. That’s the book I used, and I was making graphics within a week.
I have also downloaded gimp wich was not helpful at all and am now downloading photo shop. Jeepers…I’m hoping I can figure out one of these programs. Your site was the only one that has given any instruction on how to make our own banners and so far I’m not having any luck. If photo shop doesn’t work, I suppose I will have to resort back to using mybannermaker.com . grrrr.
But thank you for your help Jo-Lynn, I’ll let you know how photo shop goes.
Yeah, I don’t care for gimp. Illustrator is a really heavy program. I got it b/c I was planning to be a blog designer and make a job out of it. It’s a fabulous program, but you will probably need to get a book if you’re going to teach yourself. I’m sure there are online tutorials, but I don’t learn well that way.
Well, I only downloaded the trial version, so I’m not sure its worth the time and money to learn a program so I can make a button. Considering I can through a website together in a matter of a couple of hours this is quite frustrating, trying to make a simple button that looks good. And there are no free programs online (that I can find) to do this. Maybe you should reconsider getting into the business of making buttons. I’d pay you!
LOL! I do! http://www.dcrdesign.com
I guess I need to make that more prominent on this post!
Awesome Work…I may end up calling you! (i just realized i had the wrong url in my link) what do you charge for just a button?
I see the price now.. forgive me.
Laura, I emailed you!
Great tutorial, Jo-Lynne!
I wanted to add that a free Illustrator alternative is: Inkscape. A great little program and free. GIMP is to Photoshop as Inkscape is to Illustrator, though not as far along in development.
http://inkscape.org
I’m enjoying reading your design tutorials.
thank you, thank you! Very easy to follow.
I’m new to blogging and needy : ) thanks for the tutorial!! I’ll be working on this.
thank you so much for such an excellent tutorial!! You even included trouble shooting for the bugs I encountered with the smart quotes!!
Thanks again!
Thanks for the button instructions. Your instructions seem simple and easy. I am glad that I found your blog. cleverlychanging.com
Like others I found your tutorial through a google search. I am having trouble creating the graphic because I don’t have any program to work with. Do you know of any program that is free or inexpensive that would work with Windows Vista and Google Chrome or Internet Explorer?
Hello, I am making a button, finished it, and now where do I put it in my wordpress blog? In a text widget or image?
Thanks
Hi, thank you for sharing this great information. I am so new to blogging (this week in fact) and am learning so much, but have so much to ask too!
Following the instructions above, I ‘get’ how to make a button, but from this point on (please forgive my naiivity) but where do you then save the image or how do you tie the html to the image in order that anyone using your button links back to your site? As opposed to it just being a graphic? Does that make sense?
i totally accept with that simply as im from italy and my english isnt that cracking im not convinced if i understood everything right. I would like if you could post a translated edition of your posts, so i can unterstand them more easily. Hope to read over again soon here!
Hello there Jo-Lynne, I just found your blog by googling “how to make blog buttons” and wow, what an awesome blog you have here! In fact even though I know how to design my little button already, there were some great tips. AND you linked to another post about how to create the code, which is exactly what I was looking for when I first googled. Anywho, just wanted to stop by and say thanks.
God bless!
Maybe you should change the blog name title How to Create a Blog Button — Musings of a Housewife to something more catching for your content you make. I loved the blog post yet.
Thanks I was looking for a code to make an ad button without the shareable link. Yours is simple and easy to understand. TY!
Thanks for this great blog post. With no coding skills at all, I figured out how to make a blog button. YAY!
I tried using your tutorial to make a button. I used picnik then saved it on flickr. I tried filling in the areas of the code but I can’t get my button to show up. This is what my html looks like:
Can you tell me what I did wrong?
grr computers aren’t liking me today. It automatically turned my link into a hyperlink in my last comment and it didn’t write out the code. I’m going to repost it with spaces. So any blank spaces i did on purpose so hopefully it won’t repost the same way
ok never mind, it won’t work
Thanks so much for this! I am wondering if you can send me the info on how to add the scroll bar below my button?
Thanks!
Good day! I simply want to give an enormous thumbs up for the good data you have got right here on this post. I can be coming again to your weblog for extra soon.
Great tutorial Jo-lynne, I am going to start cracking on trying this so I can add unique buttons to my blog http://www.parentingviews.com.
Thanks so much, you learn something new everyday!
This was so easy!
Thanks,
Kendra
http://www.abusywomanslife.om
Hi there! I have a question ~ I am trying to create a blog button that will link my photography blogspot page to my actual website ~ but when I get the button to show up somehow blogger has referenced my blogspot page, so when I click on my button it gives me an error and says the page doesn’t exist within the site (blogspot). Any ideas of how to keep blogger from automatically add my blogspot address before my website address??
Thanks!
Lori
Lori, blogger shouldn’t add anything to your address. Do you want to send me your code, and I’ll look at it.
Thanks so much! <3
This was very helpful. Simple, well laid out and fantastic. Thanks so much!
This was unbelievably helpful. Great post, and great blog overall!!!
thanks for sharing link to iStockphoto.com. this service was helpful for me!
Hi. I hope you can help. I have two buttons for my blog but my blog name has changed. How can I change the name? Would I still need Adobe Illustrator? Thanks for your help.
Lilac
You would need the original files and then it depends on what format they are in. If you have jpeg images, you may be able to write over them depending on the background. It might be better to start from scratch and make new ones.
Hope that helps!
Thank you for these awesome tutorials on creating a blog button! They were a big help to me and I’ve included them in my roundup of blog button tutorials here: http://www.thecraftyscientist.com/2011/06/roundup-blogging-resources-blog-buttons.html. Check it out and grab a featured button if you want! : )
Hi! I want to first say thank you! I used your tutorial to create a “grab button” for my blog, and I love it. Now down to business, I would like to create a tool bar of sorts which has buttons that link to my Facebook, Twitter, and Pinterest accounts. Any tips or suggestions would be greatly appreciated.
Thanks again,
jenci Smith
You should be able to do that with Blogger’s menu functions, yes?
Excellent tutorial!! Thank you! :0)
Thanks so much for making it so easy. I spent hours working on this from some other sites and this one just took a few minutes…and it worked!
Thank you for this tutorial! I’m new to blogging as well as to Photoshop. But your step-by-step guide enabled me to create my very first, albeit simple, logo. And thanks to user-friendly WordPress, it was easy to place my logo/button on the sidebar as a widget. I am realizing that blogging can really stretch your mind, imagination and creativity. There’s an endless possibility out here. Again, thanks! And I love visiting your site.
Thanks you sooooooooo much for sharing this!!
Hello. I may just be a complete idiot when it comes to this, but I need to make a blog button for another girls blog. I have the pic sized and everything, I used picnik, but I have no idea where to go from there. PLEASE HELP!
Ok.. I guess I’m not very computer literate! I tried to get gimp, but it won’t download onto my PC.. I really want a button for my own blog, any help would be greatly appreciated!!