Sunday, November 18, 2012

Blogging 101: How to Create a 150x150 Blog Button

When I first began blogging, I relied on the generosity of other bloggers. Posts about content, tips and practical stuff were a godsend to me. I would type my question into Google and benefit from the how-to posts of all the bloggers before me. Now that I've been blogging for almost a year, I thought I'd start posting tutorials as well. I'm by no means an expert, but I hope you find something useful here!

I decided to create a quick, picture tutorial on an aspect of blogging that everyone can benefit from. Buttons. People are far more likely to click on buttons than on text links. Having an attractive button on your site (and on other people's sites) is a great way to create a cohesive theme on your blog or shop and ultimately drive more traffic to you. Buttons are a small snapshot of what you are offering, so the idea is to attract readers who will enjoy your content. The ideal button will:

  • Represent YOU. Whether thats an Etsy shop or blog.

  • Will intrigue buyers and/or readers

  • Should have readable text, or no text at all

  • Should have minimal clutter


How To Make A Button Using Picmonkey

Picmonkey is a free photo editing service. If you are like me, you want to have great photos without having to spend a lot of time editing them. Picmonkey is a great resource for bloggers and Etsy shops. I use it for all my photo editing, and its a great place to make buttons, headers and other visuals for your blog and shop. So, in order to make your button, head on over to Picmonkey to get started!

Congratulations, you're in the right place!

This tutorial is going to focus on creating a 150x150 button from an existing photo. You can also create a button using a blank white canvas, but I find starting with a photo you like works well too. Click on "Edit a photo" to find one you like:


 Choose a simple photo with very few details. You are not going to resize the entire photo into your button. You are going to choose a section that is visually appealing, edit it, mess with the colors and add text. I like to start with a completely unedited photo. 

Don't crop a 150x150 button just yet. It will be way too small to work with. Start with a large section. I like to go with 1000x1000 so I have a lot of room to play with. You'll resize the button at the very end.

Now you've got a square button to work with. Start with easy things first. Lighten it up. Play with the color temperature. Try some of the interesting features like "Orton" or "Yesteryear". Not all of the features are free, but the majority of them are. If you find a monkey has been added to your picture, you've accessed one of the "not free" features. Just click "undo" and the monkey will go away. To get the above effect I simply lightened the photo, turned the color temperature up and "tinted" it pink. Play with the features until you get something you like!



 If you want to add a cute graphic, click on the 5th section from the top. This will open up hearts, stars, arrows and other symbols. The default color is black but you can easily change it to other colors. 


 If you like rounded corners, click on the "frames" section and add them. Make sure to click "transparent corners". I don't typically add rounded corners but thought I'd give it a try this time around.
Now you're ready to add text. Choose something readable, you don't want any confusion when it comes to your shop name or what you sell. If you choose a cursive font, try not to choose one with too much embellishment. Remember this button is only 150x150, if you're text is too small or too embellished it won't be readable.

 Lastly, you want to get it to 150x150. Click on "resize" and make sure to check the box marked "Keep Proportions". You're done!


You're 150x150 button is complete and ready to share!

If you haven't got the time to make a button, check out my Sponsor Page.
I make buttons for a small fee:)





24 comments:

  1. Lovely tutorial! I haven't done any blog or shop buttons yet, but it'll definitely be something to look forward too. Thanks!

    ReplyDelete
  2. Great tutorial! I really struggle with this stuff and I didn't know about picmonkey. Thank you!
    -Jamie
    http://chatterblossom.blogspot.com/

    ReplyDelete
  3. where were you when i needed you 6 months ago! i too typed my query into google and followed the wisdome of the bloggers before. i found some really useful 'blog tutorial' blogs which helped me out a great deal in creating these lovely things for my blog. this is no different. thank you!

    ReplyDelete
  4. You've given me an idea! Will think about it, and maybe - because if I start to do it myself, I'll screw it up - get back to you. Think ColdhamCuddlies are about ready for a button and I'm trying to boost the blog followership at www.ColdhamCuddliescalling.blogspot.com too. Maybe we should "meet"!

    Best of luck. Isobel

    ReplyDelete
    Replies
    1. Buttons are great! You'll have to share your idea with me:)

      Delete
  5. Thank you so much for this tutorial. I'm going to have to try to make myself some new buttons one of these days. If you only knew how many HOURS I have FOUGHT with my computer trying to make buttons. *Sigh* At least I can do it easily now, thanks to you!
    xo
    Jacinda

    ReplyDelete
  6. This is so helpful! I am making a new one soon so this'll be great! =]

    ReplyDelete
  7. This is a great tutorial!! I'm so glad you found Romance on a dime and linked up! Hope to see you tomorrow.

    ReplyDelete
  8. This is great! Where do you get the code to share it with?

    ReplyDelete
    Replies
    1. I should totally make a part 2 that covers that! In the meantime, here is a site that will get you started. You'll need to upload your button to photobucket to do this step.

      http://www.quackit.com/html/codes/html_scroll_box.cfm

      Delete
  9. Thanks so much for sharing this at the Open House party. I am "Pinning" it for future use.

    ReplyDelete
  10. Great tutorial! I just created a button for my business blog. Thanks so much!

    ReplyDelete
  11. Thank You very much.I am waiting to read/ how to make blog batton.Thanks for sharing.Happy New Year!

    ReplyDelete
  12. This is a great tutorial!!I just created a button for my blog,Thanks!
    http://vse-nemi-ostava-vreme.blogspot.com/2012/12/blog-button.html#links

    ReplyDelete
  13. This is very helpful tutorial ! Thanks for sharing it !

    ReplyDelete
  14. Thanks for this easy tutorial to follow. Look forward to your future tuts!

    ReplyDelete
  15. Thanks for this great tutorial! I have been blogging since last April, recently opened an Etsy shop and created a business facebook page, and am planning to open a second Etsy shop soon!
    I too have gotten by with the kindness/tutorials of other bloggers, and trial and error. I started posting tutorials on my own blog to help others. It's nice to learn more, you feel like you have more control.

    ReplyDelete
  16. Eliza, Huge thanks from me too. This is something I've wanted to try, and now I can. Also your PICMONKEY tips are wonderful. I've tried the program but got so stuck. Thanks

    ReplyDelete


  17. I have a question,how to add code to the button? Thanks!!!

    ReplyDelete

I love comments! I always try to reply, so feel free to leave questions, suggestions etc!