How to add clickable link in photoshop?

Hello 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we will learn more clickable areas by adding new slices in Photoshop.

Table of contents

  • Horizontal type tool.
  • Select the slice-tool.
  • Drag the cursor over the page to create a slice.
  • Slice options.
  • Save for Web.

Let’s start with the first step.

Step 1: Horizontal type tool.

Create a new page in photoshop. Go to the File menu, click New, open the pop-up dialog box and select Height and Weight, click OK.

How to add new page in photoshop?

Select on type tool, click on page write now text.

Photoshop, type-text-tool

Step 2: Select the slice Tool.

By using the Slice Tool in Adobe Photoshop Cs6 or cc, you can turn any text or image, or part of an image, into a clickable hyperlink.

it should be something large enough to show up well in a Web browser. Select the “Slice Tool” from the Toolbox. If it’s not visible, click and hold the bottom-right corner of the Crop Tool, or other tool in its group that is visible, then select the “Slice Tool.”

Photoshop, slice-tool

Step 3: Drag the cursor over the page to create a slice.

Drag the cursor over the area that you want to be clickable. To create a single hyperlink on an image, you can drag the cursor over the entire image. And right click on mouse and select on edit slice options.

Photoshop, edit-slice-options

Step 4: Slice options.

Double-click a slice with the Slice Tool to open the Slice Options window. To create a hyperlink, you must type the Web page’s address in the “URL” field. While the other fields are optional, using a name will help distinguish one link from another. Adding “_blank” to the Target field specifies that the link should open in a new Web browser tab.

Photoshop, slice-options

Go to file and click on save for web.

Photoshop, save-for-web

Step 5: Save for Web.

Select “Save for Web” from the File menu once your links are complete. Select either “PNG-24” or “JPG” as the Preset, then click the “Save” button. Click the “Format” menu and select “HTML and Images.” This changes the file format to HTML. After you click “Save,” Photoshop creates a single HTML page using the image and the links you created. The image file itself is saved in an Images folder.

Photoshop, save-for-web100

when click on save button then open save optimized as,

  • File name: .html
  • Format: HTML and image
  • Setting: Default setting
  • Slice: All slice click on Save button.

Photoshop, save-optimized-as

Go to there save your file and click on your file.


Finaly we have ceate clickable link in photoshop.

Photoshop, click-me-html

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us


Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Related Posts