Tuesday, August 30, 2011

The Idiot's Guide to Creating Blog Buttons

Before i forget: This is August's Good Cheer giveaway, and it ends this Friday, Sept 2nd, so go ahead and enter it!



-----------------




Lovely Danielle of Tongue Tied in Awe did a lovely birthday giveaway of a chance for readers to sponsor her page for free! (so much giveaway love in the blogosphere, i likey!)

She has kindly given me a spot on her page to advertise my page, but first i had to make a button she could put on her page. I was stumped and had no idea where to start. Making my Etsy banner was one major roadblock. My images always came out blurry. Now i had to resize things to make an even smaller button?

So after a day or five of fiddling around on my Powerpoint and on Flickr, I came up with a simple and foolproof method to making blog buttons. And now i'd like to share it with you. However, if i'm doing this in a tedious manner and you have 101 other shortcuts, please share some tips! I could use some help and become a little more blog savvy! :)



I like my blog buttons simple. So if you're not into anything fancy, here goes nothing...


------------



#1
I google the internet for an image of a plain background. That will act as the base color of my buttons. Or you could simply open up Powerpoint (PP) and create a shape and add a color to your liking.

For the sake of visual continuity, i have chosen the same linen background as my blog. I save this image on my desktop.


#2
I figure out the size requirements of the button I will be making.

This is what I think is going on. Most people will ask for a size in pixels. When I opened up PP to create my button size, I found out that it measures images in height and width instead of pixels. So i went to this website Image Size Calculator/ Convertor to convert my pixels into height and width (in inches).

My button has to be 184 x 70 pixels. When i plug in the numbers into the calculator, it gives me


2.45" (width) x 0.93" (height)



#3
I open up PP and insert picture (my linen background) on a new document. Then i double click the image to format it. On the left column, you will see the option 'Size'. Click on that.


Picture 1


Then plug in the numbers you have obtained from the calculator/convertor, in this case 0.93" (height) and 2.45" (width). Click OK and your image would have be resized to the required measurements. Right click and save this image on your desktop.


#4
Now for the fun bit : Designing your button.

I uploaded my button image onto Flickr. Then I click on 'Actions' and scroll down to the option 'Edit photo in Picnik' (third one from bottom)


Picture 2


You will be taken to this page with tabs at the top of the page. Play around with them! To add text, I click on 'Text' tab. For images, I choose 'Stickers'. There are so many options to play around with you can make a million different buttons.

And guess what? These are the simplest buttons you can make. If you are a premium Flickr member and any more tech-savvy than i am, you could probably churn out tons of beautiful buttons in a flash.

P.S. I use a Mac, so the instructions above may differ for non-Mac users. but I don't really think so.


In my excitement, I made a few: which one do you like?



blogbutton3 elelove_blogbutton2

blogbutton3 blogbutton4







6 comments:

  1. cute, i like the bottom right
    ;)

    xoxo

    ReplyDelete
  2. Ahhh this is so easy! I'm not very Photoshop-savvy, so this makes me feel better!

    ReplyDelete
  3. awww they look so cute :) my hubs helped me make mine .

    ReplyDelete
  4. I love the one with the hearts!! Great tutorial for those who don't have Photoshop or any other design programs.

    ReplyDelete
  5. I like....well I like all of them, but my favorite is the bottom left.

    ReplyDelete
  6. your buttons look fantastic!!! a great tutorial, with a super adorable result :) thanks for posting this!

    ReplyDelete

I appreciate you stopping by and reading my blog! Do leave me a note!

Related Posts Plugin for WordPress, Blogger...