Tutorial - Creating Icons and Buttons

This tutorial will teach you how to save a button template from online, edit it to make it your own, and then upload it to the internet to show off!

Step One - Saving the Online Template

Right click the icon of your choice. A men u will pop up and click the option 'Save Picture As...'.

A dialog box will pop up prompting you to choose where you want your picture to be saved. Save it to a place you will remember where you saved it to easy.

Step Two - Editing the Template

After you have saved your icon, open up your image editing software of your choice. I use Paint Shop Pro, some Photoshop, yet others use the ever reliable MS Paint. I'll be using Paint Shop Pro in this example, but it will be easy to follow in any image editing software.

Open the icon you saved in your image editing software and decide what you'd like to do with it. For this example, I will make a 50 x 50 link button for Too Truthful.

Find your image editor's text tool and type in your website's name, your name, or anything else you can think of to put inside the icon.

Save the edited button in the place of your choice. Once you have finished editing the button, you've completed making it your own!

Step Three - Publishing the Icon or Button

To use your button, you can use a few different img tags to publicsize your work. First, you need to upload your button so that it's on the web. You will have to look at where you are going to use your button first.

1. If you are using this button for a personal webpage, you have two options. If you are using a free server like freewebs or geocities, free servers usually have a file uploader that will host the image for you. If you are hosted or own your own website, use your ftp software to upload the icon to the net.

2. If you are using this icon or button elsewhere such as message forums, online journals, blogs, things like myspace or facebook, then I suggest using a free picture storage site such as www.photobucket.com.

After uploading you can now store your icon or button anywhere on the internet.

Take your img tag and place it where you'd like.

Most places will use:

<img src=http://www.yourimageinfohere.gif>

But message forums will often use:

[img]http://www.yourimageinfohere.gif[/img]

To make a link out of your icon, use the following code:

<a href=http://www.yourlinkhere.com>

<img src=http://www.yourimageinfohere.gif>

</a>

Finished! Your icon is now viewable on your site!