Want to learn how to make one yourself?
To start, you will need some type of graphics editing software. I usually use Photoshop, but this tutorial will be using Pixlr, a free online program that is quite comparable to Photoshop. (You do not have to download any software to use Pixlr.)
Remember to click on an image to enlarge it.
1. Go to http://pixlr.com. Click "Open Photo Editor".
2. Click "Create a New Image" from the pop-up screen.
3. A window will pop-up allowing you to choose the size of your image. This is up to you. My button is 125 x 125 pixels. If you want something more rectangular, you could do 150 x 100 pixels as you see below:
Click OK and your new blank image will open.
4. This next part is up to you. You can design your button however you like. I do suggest that you make your button match or at least be similar to your blog header or overall blog design. This is an advertisement, so show them on your button what they can expect to see on your blog.
If you do not need help with the design, skip to step 5.
If you would like help, follow me as I create a button for a fishing blog.
Crazy-4-Monograms called "Big Catch". To add elements from her kit, I did the following:
4a. Click "File" (from the black menu at the top) and then "Open Image" (Ctrl+O). Select the image you would like to use in your design. Repeat this for all of the images you would like to use on your button. Here's what you might see:
You may need to rearrange your windows so that you can see your blank button image. (Use the Navigator box to zoom in and out of your images. Just slide the lever to the left or right. Also, use the bottom right corner to resize your image windows.)
4b. Notice that my fishing button has a thin blue border around it. To get this, I filled the first layer on my button with the blue color you see below. To do this, click on the Paintbucket tool and click anywhere on your image.
You will have to click on your image with the Paintbucket tool for your background to match the new color you chose.
4c. Now you will need to transfer your images one by one onto your button image. Each image will create a separate layer on your button image. The Layers box will show you each of the layers as we add them.
I'm going to start with my wavy blue paper. To copy it to my button, I need to select the window with the wavy blue paper and click "Edit" and then "Select All" (or Ctrl+A). Once it is selected, choose "Edit" and then "Copy" (or Ctrl+C).
Make sure that you use only the corners to adjust the size. Otherwise you will distort the image. If you find that the shape does not match the shape of your button, i.e. it is too long on one side, you can cut out the part you don't want.
|I moved the wavy pattern with my arrow keys on the keyboard until it was positioned so that my background color showed up around the edges.|
4f. The steps to add all of your other images are pretty much the same. However, let me show you how to add effects like shadows. Below you can see that I have added all of my graphics. I now want to add a shadow on the fish to make it stand out. With my fish layer selected, I am going to click on the "Layer Styles" icon at the bottom of the Layers box. It is a square with a star in the corner.
Your button is now done and ready to be saved!
5. To save your button in Pixlr, go to "File" and then "Save". Save it to your Computer, Enter a name for your button and then choose a format. I recommend saving your image twice. The first time, save it as a PXD (a layered Pixlr image). This saves all the layers and styles that you added to your image. The second time, save it as a JPEG. This will flatten the image (remove all the layers) which you need to put it on your blog. (Once you hit OK, find a folder on your computer to save it to.)
6. Before we can post this button to your blog, you need to upload it to the web. To do this, you need an image hosting site. Photobucket is a great image hosting site that is free and gives you plenty of storage. Set-up your account by following the instructions on their site. Once you are logged in, click the green "Upload now" button. Click the green button "Select photos and videos" and Browse to find your jpg file. When the image is uploaded, click the small box next to the file name so that there is a check mark. Then click "Choose action" and select "Generate link codes for selected".
Paste the following code, changing the part in red to match your blog button codes.
<center><a href="Your Blog Address"><img src="Your Direct Link (the code you pasted from Photobucket)"/></a></center><br/>
<center><div style="border: 3px solid black; overflow: auto; height:
125px; width: 125px; color: black; background-color: white;"> <center><a href="Your Blog Address"/><img src="Your Direct Link (the code you pasted from Photobucket)"></a></center></div></center>
Here's what it would look like if for my blog:
Click "Save" and then "View Blog".
Your button appears with an HTML code box below it for others to use to place your button on their blog!
Did this work for you? Let me know how you did!