Как добавить гиперссылку в Photoshop и Illustrator

Photoshop web design on PC.

Введение

Добавление кликабельных ссылок в растровые и векторные макеты — частая задача при подготовке промо‑баннеров, лендингов, интерактивных PDF и электронных рассылок. В отличие от текстовых редакторов и презентаций, в графических редакторах Adobe это не тривиально: ссылки привязывают к фрагментам изображения (Photoshop) или «скрывают» в интерактивном PDF (Illustrator). Ниже — подробные инструкции, практические советы, альтернативы и контрольный список для передачи результата разработчику или менеджеру проекта.

Important: метод выбирайте по целевому носителю. PDF и веб‑страница требуют разных подходов.

Основные варианты и когда их применять

Веб‑изображения (HTML): используйте Photoshop + Slice или экспорт изображений и правьте HTML вручную. Подходит для баннеров и макетов, которые будут встраиваться в сайт.
Интерактивный PDF: используйте Illustrator, прячьте URL‑текст и экспортируйте в PDF. Подходит для электронных буклетов, презентаций и загрузочных материалов.
Печать: гиперссылки не работают в печатных материалах — используйте QR‑коды.

Как добавить гиперссылку в Photoshop

Photoshop не умеет вставлять активные ссылки прямо в PSD, зато инструмент «Slice» позволяет пометить области изображения URL и экспортировать HTML с соответствующими ссылками. Это классический рабочий приём для веб‑дизайна.

Шаг 1: Откройте файл в Photoshop

Photoshop with social page of web design.

Откройте PSD или растровый файл. Решите, какие элементы должны быть кликабельными: текстовые кнопки («Забронировать», «Подробнее»), логотипы, иконки социальных сетей. Метод работает с плоским изображением и с многослойным макетом.

Примечание: если макет содержит интерактивные элементы, их удобнее располагать на отдельном слое или помечать для удобства при экспорте.

Шаг 2: Используйте инструмент Slice

Slice Tool in Photoshop.

Инструмент Slice спрятан под Crop в панели инструментов. Нажмите и удерживайте Crop, затем выберите Slice (иконка ножа). Быстрая клавиша — C.

Sliced areas in Photoshop tool with Slice menu open.

Нарисуйте область (slice) вокруг каждой кликабельной зоны.
Будьте точны: размер области определяет, куда пользователь может кликнуть.

Совет: используйте направляющие и сетку для выравнивания области по кнопке или иконке.

Шаг 3: Добавьте URL к слайсу

Photoshop Slice Options menu.

Правый клик по слайсу → Edit Slice Options.
В поле URL укажите полный адрес (https://пример.сайт).
В поле Target можно указать _blank чтобы открыть ссылку в новой вкладке. В некоторых экспортируемых HTML‑шаблонах это поле преобразуется в атрибут target=”_blank”.
В поле Alt Tag укажите альтернативный текст для доступности — он станет атрибутом alt у результирующего изображения.

Accessibility note: корректные Alt‑теги и описания помогают людям, использующим экранные читалки.

Шаг 4: Экспорт в HTML и изображения

Photoshop Save For Web menu.

File → Export → Save for Web (Legacy).
Выберите предустановку JPG/PNG в зависимости от компрессии и прозрачности.
Нажмите Save.

Photoshop save for HTML image menu.

В диалоге в поле Format выберите HTML and Images.
Photoshop сгенерирует HTML‑файл и папку с изображениями. В HTML‑файле вы увидите теги , таблицы и теги с соответствующими ссылками.

Пример выходного фрагмента HTML (упрощённо):

Important: экспорт через Save for Web создаёт HTML на основе таблиц и абсолютных координат. Для современного сайта рекомендуется использовать полученные изображения как ресурсы и встраивать их в современную HTML/CSS структуру (div, img, background-image, position) с семантическими ссылками.

Альтернатива: если нужно оставить одно встроенное изображение и сделать несколько кликабельных зон, используйте HTML image map или реализуйте оверле‑блоки на CSS/JS.

Когда метод Photoshop не подходит

Если вам нужен чистый современный HTML/CSS без таблиц — лучше экспортировать изображения и сверстать страницу вручную.
Если целевой формат — интерактивный PDF — используйте Illustrator.
Для печати — используйте QR‑коды вместо ссылок.

Как добавить гиперссылку в Illustrator

Illustrator не экспортирует HTML с кликабельными слайсами так же удобно, как Photoshop. Зато Illustrator отлично подходит для создания интерактивных PDF с активными ссылками.

Шаг 1: Откройте или создайте файл в Illustrator

Image open in Adobe Illustrator with a QR code on it.

Решите, какие элементы будут кликабельными. Интерактивные PDF удобны для буклетов, руководств и презентаций, которые будут просматриваться на экранах.

Шаг 2: Добавьте видимые URL как текст

Adobe Illustrator layers panel with one locked layer.

Закрепите слой с дизайном (иконка замка) и создайте новый слой для ссылок.
Выберите инструмент Text (T) и кликните по артборду — не растягивайте текстовый блок.
Вставьте полный URL, включая протокол (http:// или https://). PDF‑генераторы распознают это как кликабельную ссылку.

Text tool in Adobe Illustrator. Text is URL links.

Шаг 3: Растяните текст по области клика

Stretched hyperlinks on Illustrator file.

Измените размер и форму текста так, чтобы он покрывал всю кликабельную область.
Временно поменяйте цвет текста для наглядности.

Colored and stretched URLs on Illustrator document.

Совет: используйте направляющие и сетку, чтобы точно покрыть кнопки и иконки.

Шаг 4: Спрячьте ссылки

Есть два надёжных способа сделать ссылки невидимыми, но сохраняющими активность в PDF:

Установка прозрачности слоя ссылок в 0%:

Adobe Illustrator opacity slider.

Выберите все объекты ссылок → Window → Properties → Opacity → 0%.
При этом текст остаётся кликабельным в PDF, но невидимым пользователю.

Отправить объекты ссылок за основной контент:

Reverse layers on Adobe Illustrator.

Правый клик → Arrange → Send to Back или измените порядок слоёв в панели Layers.
Объекты останутся интерактивными, но будут закрыты видимыми элементами.

Adobe Illustrator Send to Back options.

Важно: оставляя текст невидимым, не убирайте его полностью (не удаляйте и не экспортируйте как неактивный объект) — иначе ссылка перестанет работать.

Шаг 5: Сохраните как интерактивный PDF

Save as PDF on Mac.

File → Save As → выберите формат PDF.
В параметрах экспорта убедитесь, что включены опции сохранения интерактивных элементов (в зависимости от версии Illustrator это может называться differently — настройте сохранение «Preserve Illustrator Editing Capabilities» и убедитесь, что экспорт в PDF ориентирован на цифровое распространение, а не на печать).

Interactive PDF open in Adobe Acrobat.

Откройте результат в Adobe Acrobat или другом PDF‑ридере и проверьте кликабельность.

Когда метод Illustrator не подходит

Если вам нужен готовый веб‑HTML с картинками и ссылками — лучше экспортировать изображения и собрать HTML вручную или использовать Photoshop.
Для печати используйте QR‑код.

Альтернативные подходы и интеграция с разработкой

HTML image map: создаёт несколько координатных зон на одном изображении. Подходит, когда нужно сохранить файл как одно изображение, но сделать несколько зон кликабельными.
CSS‑оверлей: экспортируйте изображение как фон и создайте полупрозрачные, абсолютные блоки с ссылками поверх вёрстки.
SVG: векторный формат поддерживает встроенные внутри SVG и удобен для адаптивных интерфейсов.

Мини‑методология для передачи разработчику:

Руководство по выбору метода (decision tree)

flowchart TD
  A[Цель экспорта?] -->|Веб| B[Нужен HTML с изображениями]
  A -->|PDF| C[Интерактивный PDF]
  A -->|Печать| D[Печатный файл]
  B --> E[Использовать Photoshop Slice или экспорт изображений и сверстать вручную]
  C --> F[Использовать Illustrator, добавить URL, скрыть и сохранить PDF]
  D --> G[Создать QR-код для ссылок]
  E --> H{Нужен чистый HTML?}
  H -->|Да| I[Экспортировать изображения и сверстать руками]
  H -->|Нет| J[Save for Web — HTML and Images]