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:

On HTML Slice Options:

On Using DIV’s instead of Tables: