How I Made a Button for my Blog: Part 1

Now, I am very unqualified to be telling people how to make little bits and pieces for their blog.  My knowledge of HTML coding is limited to the bare minimum.  Every time I want to try something I need to Google "How to make a..."

But you may be in a similar sort of zone.  If that's the case, I can save you a whoooooole heap of trouble and lengthy Google searching AND hours pulling out your hair wondering why something didn't work.

Because if The Mouse can do it ['it' being techno wizbang stuff], then anyone can do it.  Nothing will be explained here that I haven't already done.

The other reason for this post is that I keep saving little bits of HMTL code in random Word documents, and then I can never find them again.  If I put it all here I'll be able to find it again.  Theoretically.

Okay, let's begin with the making of pretty things.

Buttering sandwiches...


Picking blackberries...


Cueing bird songs...


1. I sign into Picnik and upload the photo I want to use for the base of the button.

Behold, the photo which is going to become a (hopefully) snazzy-looking button.

2. If you don't want the whole enormous photo in your little button then it's just a matter of doing a little cropping.  Snipping, trimming and... you know.  Cutting out the boring bits.

Cropping on Picnik means clicking 'Crop' in the 'Edit' tab.  Nice and obvious.

3. A button's only a button when the size is right.  So I need to resize the cropped photo.
I have discovered (through much pain and suffering) that my blog sidebar takes buttons of 200 poxels by 200 poxels.  I think it's pixels actually.  Pixels poxels, no difference right?

Your blog may vary in size so the best thing to do (to avoid much pain and suffering) is to measure it.  Now DON'T laugh.  I have found that the best way to measure is to use the glaringly obvious...a ruler.  Not a virtual ruler.  Just a plain ruler.  The ones you used to use to draw straight lines and whack your little brother with.
Get the ruler.  Hold it up to the computer screen and measure the sidebar of your blog (or wherever you want the button).  Take note of measurement.  Now when we resize photo we use ruler to see what will fit.  Works every time!

4.  Okay we now have out little button-sized photo.  Time to make it look less like photo and more like a button.
We travel to the 'Create' tab in Picnik and begin to play with different 'Effects'.

Here, I boost the photo to bring out the red in my very red scarf.

I like to blur some of my button to cut out distracting elements in the photo.  This will make it easier to read the writing on top.  Theoretically.

I use here 'Focal Soften' to blue out everything except me.

A button has round edges right?  Even a square one.

[Random thought: Why on earth are these little picture things on blogs called buttons?]

5. Time to add the writing so people know where your button takes them.

Also in the 'Create' tab of Picnik we find the 'Text' feature.  There are tons of interesting fonts to choose from.
Here I stick with signature Mouse Files font.

Then there are the little ears.  Can't forget the ears.

[I use circle stickers from the 'Sticker' feature in the 'Create' tab.]

6.  I am now satisfied with my button.  Time to save.

Do not save to your computer.  Save to an internet-based site such as Picasa Web Albums, or Photobucket, etc.  You will need a web-address/linky to your photo, you see.

I chose to save to my account in Picasa Web Albums.

Coming soon....

How to turn that photo into a button with a little twist of the wrist (and HTML coding).