Adding New “Icons” To Your Website

This is somewhat of a simple concept, but this week I was pretty intent on having all of my links be my own personalized icons. i.e. small pictures with the html of the other parts of my website programmed in them.

To do this you must first find a photo you want as an icon or make one up from scratch in photoshop. In my case I used a picture of a magnifying glass for my “I found” project.

One you have the photo you want or are just starting to make your “from scratch” photo you need to open up photoshop and make the necessary edits to the page. For multiple icons on a website page you would need to make them all a similar dimension so that one icon doesn’t stick out more than the other. In my case I made the width the same (100 pixels) To do this go under image then click on image size. From there it’s as simple as plugging in the numbers (make sure the height and width have a lock sign on them or you will mess up the dimensions of the picture). You may also need to rotate the picture, and add text that is big enough to read but won’t run off the image. This part can be a little bit of a challenge.

Here is my image after photoshop

Now you must add the href of the html page into the image:


<p><a href="ifound.html"><img border="0" src='Photos/Magnifying.jpg'/></a></p>

If you do want a border on the image just don't put in the "border="0"part.

You can see the finished project on my website.

Simeon Mellinger

~ by sim67fb333 on February 2, 2010.

One Response to “Adding New “Icons” To Your Website”

  1. Putting everything in a step by step process allows us, the reader, to follow your “how-to” easily. Examples of your pictures and actual html code that has to be included in the process of having pictures as icons to lead the viewer to a link are a great way of showing us how to put pictures as icons in photoshop then add links to these icons.
    In the beginning, you may want to describe “the other parts” in your website, because this can help others that are in your exact situation.

Comments are closed.

%d bloggers like this: