Tips & Tricks: Create A Hyperlink in Photoshop
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.
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
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
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
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.
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
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.
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”.
Did you try it? Let me know if it worked for you!
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