Photoshop, Tech, Tips & Tricks

Tips & Tricks: Create A Hyperlink in Photoshop

 

tips and tricks banner-min
 

 

Mother/Gamer/Writer recently went through a huge overhaul and if you’re like me and living on a budget, sometimes it’s just not feasible to hire someone to do a job you can ultimately do yourself. Yes, it may take a lot of trial and error and a massive amount of time especially for newbies (don’t worry I’m one too), but it can be done. And once you figure out how to tweak your blog or website on your own, it’s gratifying – at least it has been for me. Which means, if I can do it, you dear reader can do it too!

 

In this edition of Lasers ~N~ Lipstick Tips and Tricks I’m going to show you something that took me FOREVER to figure out. Because why? I refused to google the answer! Crazy I know, but I wanted to figure it our for myself.

 

 

 

 

how to hyperlink banner-min
 

 

What You’ll Need…

  • Photoshop (I’m using CC for this tutorial)
  • You Image or Images
  • The Links

 

 

 

 

Step One … Open Your Image

 

 

Create a new document and place your image or open one that you’ve made and want to embed with a link. For the sake of this tutorial I’m using an image I’ve already created and want to use in my sidebar.
 

 

 

 

Step Two … Locate The Slice Tool

 

 

how to hyperlink 2-slice tool-min
 

Now that you’ve created an awesome work of art, next you need to locate the “Slice Tool”. If the tool is not visible upon opening Photoshop (it wasn’t for me), then click and hold the bottom right corner of the “Crop Tool” and select “Slice Tool” from the list of choices.
 

 

 

 

Step Three … Create Your Slice

 

 

how to hyperlink 1-min
 

 

Use the “Slice Tool” to select the area on your image you want to add the link and make clickable to viewers. You can select a small portion of the image or select the entire area. You can also make more than one hyperlink in the same image by doing this step again. In the above example I’ve created four “slices” where I will place links.
 

 

 

 

Step Four … Add The URL

 

 

how to hyperlink 3-select area and edit-min

 

 

Once you have your clickable area selected, double click (or right click) the “slice”, and the “Slice Options Window” should open. Inside this window you can now add the webpage address in the “URL” field. A URL is required to make the hyperlink work.

 

how to hyperlink 4-add urls and alt tags-min
 

Quick Tips

Adding _blank in the “Target” field will open the link in a new web browser or tab

Adding content to the “Message Text” field will change the default message in the browser and your message will be displayed in place of the URL in the status bar

Do step four to add a hyperlink to all the “slices” you’ve made in the image
 

 

 

 

Step Five … Save For Web

 

 

how to hyperlink 5-save as-min
 

Now that all your links are ready it’s time to save your fabulous image! Go to “File” and select “Save for Web”. If “Save for Web” is not visible (again, it wasn’t for me), go to “File” and select “Export”. There you should see the “Save for Web” option (where the options are located will depend on your version of Photoshop). Here you can also preview the image to make sure your link works correctly.

 

how to hyperlink 6- save for web-min
 

how to hyperlink 6- save for web-min2
 

 

Next, select the type of file you want to save: “PNG”, “JPEG”, High  Quality, Low, etc. and then click save. Lastly, set the format to “HTML and Images” and make sure the field Slices is set to “All Slices”.

 

 

 

 

 

 

how to - you did it banner-min
 

 

 

 

Did you try it? Let me know if it worked for you!

 

 

Diayll Sig LNL
 

 

 

 

 

 

Helpful links:

On Saving The Image: http://tinyurl.com/q8jq998

On HTML Slice Options: http://tinyurl.com/o3jy7tm

On Using DIV’s instead of Tables: http://tinyurl.com/q9nnfgp