
This is our 2nd post to Blog DIY!
This week we will be creating a button for your sidebar. I am using a simple Copy/Paste Method instead of layering which is highly detailed and I figured it was better to start off small! And again,remember, I am NOT a web designer, just a new beginner so feel free to ask any questions if you don’t undertstand anything:)
To start off, you’ll need a Photo Editor Workshop such as PaintPro or PhotoShop. Both these programs are pretty expensive but I’ve found an alternative that is Free to download called GIMP and does just about the same as the pricier models, it works fine just for what I need it for and the reviews were pretty good just for doing simple work. I’ve been using it for about 3 weeks now but there is so much more to it that I’ve yet to learn!
Now that you have your Photo Editor, you’ll need an image that you’ll be working on.It can be an image straight from your computer or you can download free images from the web as well. Here are a few sites to help you get started:
Free Stock Photos
Photo Rack
ImageBase
For practice, I suggest using a small picture of 1 item!! Now that you armed with your image/photo in place, on to the making of your button.
The usual dimensions of a button are :
width: 125″
height: 125″
Step 1.
Open up Gimp:
You will notice that will be 2 windows that open up, one panel is your toolbar, this one you will be using a lot. The other panel is for layers, channels and such, we won’t be using that one right now. You can just close that panel.
Try hovering around the toolbar to know what tools are available and become familiar with them.
Step 2.
Go to the toolbar and under File you will go to New> Open
This will open up a pop up window where you will enter the dimensions of your button
Click Ok
You will now see a window open up with a blank button inside
Step 3.
Now to add the photo/image
Go back to your toolbox panel and click File>Open>Choose Picture
Choose your image and then click open
This will open your image in another window
At this point, you should have 2 windows open: 1 with the blank button and 1 with your image
Step 4.
Here is where we will copy the image to paste onto the button
Right click on your image, go to Edit>Copy
Step 5.
Here you will paste the image onto the button
Go to the window with the blank button and right click on it, go to Edit>Paste Your image should now be on the button
If you find that your image may be too large for the size of the button this is where the crop feature in the toolbar comes in handy as well as the eraser. Just crop the dimensions to fit.
Step 6.
If you want to add wording:
In the toolbar, click on the Letter A and then hover over new image, click on the image and a message box will pop up where you can type your message
In the toolbar area you can also set the measurement of the lettering to fit within the button as well as change the font.
You’ll need to play around with this to get used to it!!
Step 7.
Now after your button is all complete and you are satisfied, you will need to flatten it as it is in layers.
Go to image at top of window, then click on “Flatten Image”
This will compress it for saving
Step 8.
You will need to save your button.
Click File>Save as
You will see a pop up window appear and you will need to save the image as a image as an XCP (Gimp) file.
After you’ve saved as a GIMP file, go back again to File>Save as and save as a jpg file which will be stored on your computer. A pop up window will appear asking you to export it, click export now and your done!
Final Step:
Now go to where you saved it on your computer and load onto your site!!
Just a quick note: any mistakes can be undone quickly! Just right click on the image and go to Edit>Undo to correct it!!
I hope this tutorial was helpful and that you’ll be able to create your own button . It seems difficult at first, but it gets to be so quick & easy! I made this real quick just experimentiong with the paintbrush for colors!!

Next week, we’ll talk about how to add a border to your button and how to add a scrolling text box so that others can grab your button to display on their site!!
If you have any questions please feel to email me! Let me know if this is helpful to anyone, I want to make sure that I am on track with helping you get the hang of all this Bloggy Work!!