How to Make a Blog Button

I have been umming and ahhing over making this tutorial for sometime now. Yet, after receiving several questions relating to making a blog button I thought it would be easier to put it into a post that can be referred to as and when, rather than trying to explain. I have a selection of buttons which you can view here. It came about when I was offering button swaps and wanted to offer a variety to other bloggers. A one size fits all doesn't always cut it when fitting in with another bloggers aesthetics. It should be mentioned that I use Picmonkey to make my buttons. Its a free online editor, you don't need to download, just go to www.picmonkey.com and its ready to use immediately. So lets get started. For the purpose of the post I have chosen one of my simple buttons below. I will try to keep this as short and sweet as possible for you guys but this could end up a long one...

First we are going to click on 'edit a photo' which should bring up your files where you can choose a photo. You can pick any photo, as we are going to edit it anyway to make it blank etc.

The image you have selected should now appear on the right hand side. Now click on 'resize' which is the last button on the left. Make sure you un-tick the 'keep proportions' box and then change the size. Mine is 250px x 150px however this can be any side you wish but most sidebars average about 250px width. Your image will now look slightly distorted. Thats fine because we are not using the image. You now want to click on overlays on the left hand side, fourth down under the P and click on Geometric.

Once you have clicked on Geometric it will bring up several shapes. I find the easiest and simplest to use is the first one (rectangular) as it allows you to re-size in all directions. It will appear black over your image. You can change the colour via the overlay tool bar on the left. You want to now re-size this to cover your entire original image so that you are left with a blank canvas.  Note: You will see on my button that I have a lace background. To do this you need to have a background pattern saved on your computer and instead of clicking Geometric, you will click 'your own'. You can then select your background pattern and follow the steps above as usual. If you are going to use your own then its worth having a large background pattern big enough to cover your original image without having to stretch it, as stretching it could distort the pattern. 

For the purpose of the tutorial I have just used a simple grey background. Then to achieve the button above I had added another 'overlay' using the same rectangular shape which I re-sized and moved around until I was happy. I changed the colour to white and then set the fade bar to 50% to allow for the background colour/pattern to show through. 

Finally I added some text. Simply select the text icon on the left hand-side which is denoted by a  P,  choose your font style and then click 'add text'. A box should appear over your image for you to add your blog title and whatever other info you want to include - you can then resize/change the colour etc until you are happy!

Once you are happy click the save button at the top of the page and save it in your computers files. You can then either upload it to a photo sharing site such as Photobucket and upload it to your blog via HTML or you can just save it as an image and upload it onto your blog as an image. 

I then like to leave a selection on a seperate page with a HTML box underneath like this...but I will touch on that another time :).