Как создать карту изображений с помощью Photoshop

Когда вы щелкаете часть изображения веб-сайта, и ваш браузер переходит на другую веб-страницу, вероятно, за это действие отвечает карта изображений. Дизайнеры сайтов могут написать HTML-код, который создает интерактивные горячие точки на любом изображении. Создание карт изображений вручную требует много времени, поскольку вы должны определить точные координаты каждой горячей точки. С помощью инструмента «Фрагмент» в Photoshop вы рисуете горячие точки на изображении для автоматического создания нужного HTML-кода.

Создать карту изображений

Шаг 1

Запустите Photoshop и откройте изображение, которое хотите преобразовать в карту изображений. Нажмите и удерживайте инструмент «Обрезка», чтобы отобразить меню, содержащее другие инструменты. Щелкните инструмент «Разрез», чтобы выбрать его.

Шаг 2

Щелкните точку внутри изображения и перетащите инструмент «Фрагмент», чтобы нарисовать ограничивающую рамку вокруг той части изображения, которую вы хотите сделать доступной для щелчка. Photoshop рисует дополнительные «автосрезы» вокруг других частей изображения. Эти автоматические фрагменты гарантируют, что все части изображения будут включены в фрагмент.

Шаг 3

Щелкните правой кнопкой мыши внутри созданного фрагмента и выберите «Редактировать параметры фрагмента», чтобы открыть окно «Параметры фрагмента». Введите URL-адрес, который вы хотите связать с фрагментом. Вы также можете заменить имя по умолчанию, которое Photoshop дал фрагменту, введя новое в текстовое поле «Имя».

Шаг 4

Нажмите «ОК», чтобы закрыть окно «Параметры фрагмента» и вернуться к изображению. Щелкните другую точку внутри изображения и перетащите инструмент «Фрагмент», чтобы создать дополнительные фрагменты по мере необходимости.

Настройка фрагментов карты изображения

Шаг 1

Выберите «Инструмент выбора фрагмента» на панели инструментов и щелкните внутри фрагмента, который хотите переместить.

Шаг 2

Удерживая левую кнопку мыши, перетащите фрагмент в новое место.

Шаг 3

Наведите курсор мыши на один из краев среза, и появится линия со стрелками на каждом конце. Щелкните эту линию, удерживайте левую кнопку мыши и перетащите мышь, если вам нужно увеличить или уменьшить фрагмент.

Сохранить карту изображения

Шаг 1

Нажмите «Файл», а затем «Сохранить для Интернета», чтобы открыть окно «Сохранить для Интернета».

Шаг 2

Нажмите «Предустановка» и выберите один из появившихся вариантов типа файла. Возможные варианты:GIF 128 Dithered, JPEG High и PNG-24.

Шаг 3

Нажмите «Сохранить», чтобы открыть окно с файлами и папками на жестком диске. Перейдите к папке, в которой вы хотите сохранить файлы карт изображений, и введите имя для карты изображений в текстовом поле «Имя файла».

Шаг 4

Щелкните раскрывающееся меню «Формат» и выберите «HTML и изображения». Нажмите «Сохранить», чтобы сохранить все файлы в указанной папке.

Совет

Photoshop сохраняет каждый фрагмент как отдельное изображение в папке изображений. Программа также сохраняет HTML-документ с тем же именем, что и имя, которое вы ввели в текстовом поле «Имя файла». Если вы найдете этот HTML-файл в проводнике и дважды щелкните файл, ваш браузер откроется и отобразит карту изображения. Щелкните разные части карты изображения, чтобы перейти к URL-адресам, назначенным фрагментам. Например, если вы разделили карту США на штаты, создав фрагмент для каждого штата, вы можете щелкнуть штат, чтобы перейти к URL-адресу, присвоенному фрагменту этого штата.

Дайте фрагментам осмысленные имена, и вам будет легче их идентифицировать, если вы когда-нибудь захотите настроить HTML-код, сгенерированный Photoshop. Например, если вы создали срез, окружающий штат Айова, вы можете назвать этот срез Айова.

Вероятно, вы захотите сохранить изображения карты изображений в том же формате, что и исходное изображение. Например, если это JPEG, выберите один из параметров JPEG в раскрывающемся меню «Предустановка» в окне «Сохранить для Интернета». Выберите, например, «JPEG Low», и Photoshop создаст изображения JPEG низкого качества. Чем ниже качество изображения, тем быстрее оно загружается в веб-браузере.

Предупреждение

Эта статья применима к Adobe Photoshop CC версии 2014. Некоторая информация может отличаться в других версиях программного обеспечения.