24 replies to this topic

[green fairy]

In this tutorial I will show you how to create links in your image. I'm shore there's a lot of different ways you can do this, but I'll just show you how to do it real easy.

1) After creating the image you want to add links to in photoshop, make shore the mode is set to RGB Color. Just go to Image -> Mode -> RGB Color.

2) Go to File -> Jump To -> Adobe ImageReady. Your image will now load into ImageReady.
For this tutorial I will be using this image that I found:

I will make the buttons of this navigation bar into links.

3) Press K to select the slice tool in ImageReady.

4) Use the slice tool to create a square shaped slice where you want the link in your image. I created a slice around the first button in my image like this:


5) Double click your slice to make this box appear. Use your own settings to create the link you want.

Now you have made a link in your image!

6) Repeat step 4 and 5 everywhere you want a link to appear in your image.

7) When you've finished creating links, you simply go to File -> Save Optimized As... Save your image as HTML and Images.

That's all! The whole thing is saved as a html document, so all you need to do is include that html wherever you want your linking image to appear on your site.

Hope someone can make use of this. It's not at all hard once you know how to do it

[snlildude87]

Thanks for the tutorial, green fairy! I've been wanting to know how to embed links in imageready, and now I know.

[Kubi]

Wow that's pretty cool, I didn't know you could make images links in photoshop. What I did to make images link was just use php code. But that was a pain when I just had the image and didn't feel like getting the code.

Thanks!

[SarCasM]

Heh, nicely done. I rarely use PS layouts(mainly because I suck at them) but I never knew you could make the links IN IR o.O, I always had to seperate the pics and do it in the index file, heh, much easier.

[eXtreme]

Indeed, very nice tutorial. Specially for the new people who are still learning how to slice their designs, and gifing links to, for exemple, buttons.

Good work.

[Saint_Michael]

not a bad idea to do it in image ready it saves you the time of doign the old fashion way of the image map, might use this when i deside to do another layout in ps.

[gregak]

Ok, great tutorial. but after i've done that, how do i go about uploading it to the internet to make a web page?

[Albus Dumbledore]

you would go to Save Optimized As -> then just hit save, and wherever you saved it to go there, and there should be a folder called images, and then an html document, then just go into the HTML Document, add it to your layout... but be sure to upload the images as well....

[AlanDS]

Thanks for this great tutorial. I have done the same and its working...

[AnGeL KiSS]

I had no idea how to use ImageReady before but now I have a image on how to use it. :]