Jump to content
xisto Community
Sign in to follow this  
green fairy

Creating Links In Images Using ImageReady

Recommended Posts

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:

Posted Image

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:

Posted Image

 

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

Posted Image

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 :P

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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....

Share this post


Link to post
Share on other sites

Ive been looking for a tut like this and i thought i would of never found it! Man ive been needing this for a long time! Great tut, ill be sure to use it and thanks. I hope you make some more tuts like these in the future! Such a great tut!

Share this post


Link to post
Share on other sites

jump%20to

Creating Links In Images

 

My "jump to" doesn't work...

It's grey meaning I can not select it.

Is there something I need to do before this beside have the mode is RGB?

 

Thanks!

 

-anna

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.