How to Design a Blog Button

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.

button-1

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.

button

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.

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 created a dotted border and used a gradient as the background, to add dimension and give it a softer look. 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.  I subscribe to the KISS philosophy of design — Keep It Simple, Silly! :-)

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.

UPDATE: To link your button to your site, you just need to use a code like this:

<a href=”http://www.jolynneshane.com”><img src=”http://i268.photobucket.com/albums/jj12/dcrdesign/SMB.gif”></a>

Or here is a generic example:

<a href=”YOUR BLOG URL”><img src=”YOUR IMAGE URL”></a>

To create the box under the button with the code, see my post How To Create A Blog Button Code.

Comments

  1. says

    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!

  2. Jo-Lynne says

    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! :-)

  3. Jo-Lynne says

    Hi Jaime! I purchase my points in bulk. If I can afford it, I purchase 300 at a time. But usually, I purchase 120. :-)

  4. says

    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!! :)

  5. Jo-Lynne says

    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.

  6. girlsgoneveggie says

    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.

  7. says

    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.

  8. Jo-Lynne says

    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.

  9. says

    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!

  10. Jo-Lynne says

    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! :-)

  11. Jo-Lynne says

    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!

  12. says

    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

  13. Jo-Lynne says

    Andrew, you want to create a widget and then write a code that looks like this. <a href=”http://www.jolynneshane.com><img src=”http://i268.photobucket.com/albums/jj12/dcrdesign/button3-1.jpg”>

  14. says

    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!

  15. jay anderson says

    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!

  16. says

    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!

  17. says

    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…

  18. says

    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.

  19. says

    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?

  20. Jo-Lynne says

    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.

  21. says

    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.

  22. Jo-Lynne says

    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.

  23. says

    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! ;)

  24. says

    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?

  25. says

    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. :D

  26. says

    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!

  27. says

    Thanks for the button instructions. Your instructions seem simple and easy. I am glad that I found your blog. cleverlychanging.com

  28. says

    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?

  29. Amanda Lynne Designs says

    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

  30. says

    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?

  31. Porfirio Yarrell says

    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!

  32. says

    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!

  33. says

    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.

  34. says

    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

  35. Valium says

    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.

  36. says

    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

    • Musings of a Housewife says

      Lori, blogger shouldn’t add anything to your address. Do you want to send me your code, and I’ll look at it.

  37. Lilac says

    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

    • Jo-Lynne says

      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!

  38. says

    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

  39. says

    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.

  40. says

    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! :)

  41. says

    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!!

  42. says

    Sweet blog! I found it while surfing around on Yahoo
    News. Do you have any suggestions on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem to get there! Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>