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


Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

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.

Related Posts