How To Create a Hyperlink in Photoshop

By now you are very familiar with the term hyperlink.  It can be a word or combination of words or an image that has an html encoding to direct you to and open a website. For most web designers it is quite easy to write an html script to create a hyperlink. The html code is what tells the website what to do, where the images and text are to be placed, what colors and fonts and font sizes and types to be used and to which page a user will be directed if a hyperlink is clicked. There are also accessory programs that you can use to create a hyperlink, but if you want to use an image that you have edited or created in Photoshop as a hyperlink, this is what you need to do.

  • Photoshop has different versions and have different capabilities when it comes to creating hyperlinks. Photoshop CS and CS2 will need its companion program, Image Ready to create the actual hyperlink. In the higher versions of Photoshop the functionality is already included in the numerous features of Photoshop.
  • Launch Photoshop and open the image file that you want to edit and add a hyperlink to.  Edit the image file as you see fit. It could be a photograph or a graphic that you have created. It you know the size of the image that you will need for your website, you can change the size of the image now or do it later.
  • Create a new folder in your desktop or whichever drive you using to save the files that you are going to use for your website so that the files will only be in one location. Save the file after you have finished editing it. Give a name to the file, which is easy to remember and use the .psd extension.
  • Launch Image Ready and open the image file that you have just saved. If you have not reduced the size of the image yet, you can do that in Image Ready. Once you have edited the file to your liking locate the Image Map from the tool bar and click it. With your finger pressed on the left mouse button, drag it across the image to select the area that will be used for the hyperlink.
  • Locate the Slices button at the lower right corner of the Image Ready editing window. Click on the button so that you can give the image file a new name. There will be a space below the name where you should paste or type the URL of the website where you want to link the image.
  • Image Ready will automatically create an html code for the hyperlink. Give the file a name and save the file, choosing the Save as Optimized option and select HTML and Images in the format section. Make sure that this file is saved in the folder that you have created earlier.
  • Check if the file has been saved as it should be. Locate the folder and open it. Look for the image file. You will that there will be slices of the image you have selected as well as an html code for the hyperlink.

That is the process of creating a hyperlink in Photoshop. Remember that you have to specify the location of the image and paste the html code for the hyperlink in the html script for the page where the hyperlinked image will appear. Remember, too, that you have to edit the html script if you moved the file to another location in your computer.


Share this article!

Follow us!

Find more helpful articles: