How to add a hyperlink to a jpeg in photoshop tutorial

by

One of the many useful features of Adobe Photoshop is being able to add hyperlinks to images in photoshop. This is primarily done using the slice tool. Photoshop adds HTML or CSS to sliced images that load links in web pages. If different parts of one image are sliced, they are reassembled and load as one seamless image with separate hyperlinks saved. In the following article, I’ll guide you step by step on how to add and save single or multiple hyperlinks to image files in Adobe Photoshop.

How to add a hyperlink to a jpeg in photoshop

  1. Open the image you want to add hyperlinks to in Adobe photoshop. You can do this by dragging the image from its location on your PC onto photoshop, or go to File>Open or File>Place.
  2. Add any text layers or buttons that you want to have hyperlinks. When you click the texts or buttons they will open their own links if you follow this method.
  3. Select the slice tool. It’s usually hidden under the crop tool. If so, click and hold the crop tool and it will open up a drop-down with the different tools that include the slice tool.Select the slice tool- how to add a hyperlink to a jpeg
  4. Click and drag on the areas of the image you want to have the hyperlink. Slice the necessary text, buttons and other areas you need.Click and drag on the areas of the image you want to have the hyperlink
  5. Right-click a sliced area and select “Edit slice options” to get the slice options pop-up window. In the options, name your slice to make it easier to identify. Add the URL you want that part of the image to link to. In the target field, type _blank if you want the link to open in a new tab in the browser. Then click ok once you’re done with the options.hyperlink slice options
  6. Do the same for all the other slices and add their respective URLs. If you just want one URL for the whole image you can slice the image as a whole. Just click and drag from one corner to another.
  7. Save your image with the hyperlinks. Go to File>Export>Save for Web…save hyerlink images in photoshop
  8. In the Save for Web settings, choose JPEG or PNG-24 in the preset field. Then click Save. Save for Web settings- hyperlinks
  9. In the Save As options, go to the location you want to save the file to on your PC. Name the file. In the format field, select HTML and Images. Then click Save. select HTML and Images. Then click Save-how to add hyperlinks in photoshop
  10. To test your image, go to the save location on your pc. You’ll see an images folder and a HTML file. Open up your HTML file in your browser. Then click on your hyperlinks. They should open to the URLs you set them to.images folder and a HTML file- adding hyperlinks in photoshop

Now you know how to add hyperlinks to jpeg images with Adobe Photoshop.

You may also like to learn: How To Find and Add Pantone Colors in Photoshop

FAQs

What are hyperlinks?

Hyperlinks are text strings or images that direct you to URLs when you click them. They are the means to connecting web pages to other web pages and documents. Without hyperlinks, we’d have to know the URLs to every webpage we need to visit and type it into the address bar on your browser. Hyperlinks can be added to images using different programs including Adobe Photoshop as outlined in this article above. Learn more about hyperlinks by clicking this text hyperlink to the mozilla developer site.

Where do we use hyperlinks?

Hyperlinks are used on webpages where the reader or viewer needs access to information on a different webpage on the internet. Clicking the hyperlink directs them to the address they need to access. Hyperlinks can include a target that instructs the browser to open in a new tab. For example if you click a link in the description of a youtube video, it will open and load in a new tab. This helps the user to switch between the youtube tab and the tab with the link they followed. Read more about using hyperlinks on Wikipedia.

Do hyperlinks work in JPEG?

You can’t save image formats like JPEG and PNG with hyperlinks. However you can create a HTML file with image areas containing hyperlinks as we’ve shown in the steps above using Adobe Photoshop. There are other programs like Outlook and Dreamweaver that allow you to add hyperlinks to images as well. Learn how to add hyperlinks to an image in Microsoft Outlook here . To learn how to add hyperlinks to images in Adobe Dreamweaver, click here for a wikihow article.

Can images be hyperlinks?

Yes, you can make image hyperlinks by adding URLs and saving them as HTML images through the steps above. However, image formats like JPEG and PNG cannot be saved as hyperlinks since they are not mark-up languages.

How do I insert hyperlink images in an e-mail?

You can upload an image format like JPEG or PNG to Gmail and add a URL hyperlink to it. Follow this guide by How-to Geek to learn how.

Conclusion

You can add hyperlinks to JPEGs and PNG by opening in Photoshop, using the slice tool and saving as HTML images. This creates an HTML file and a folder with your image resources. You can add this to webpages and the separate slices will reassemble into a single image with separate hyperlinks for each slice.

I hope you found this article helpful. Subscribe to our mailing list and be the first to get such articles and freebies first. Comment below for any queries or compliments. Thanks for the read!

1 thought on “How to add a hyperlink to a jpeg in photoshop tutorial”

  1. Pingback: How To Find and Add Pantone Colors in Photoshop - Graphics Mob

Comments are closed.