Сегодня я вас научу делать картинку с кликабельными частями. Думаю, в первую очередь этот урок пригодится тем, кто имеет собственный сайт, т.к. такая картинка открывает новые просторы для дизайна.
Итак. Открываем Фотошоп. Делаем там там все, что вам надо, обрабатываем, пишем текст.

1. Переходим в Image Ready ()

2. Достаем палитру карты ссылок (Окно - Карта ссылок - ставим галочку).


3. Берем инструмент "Прямоугольная карта ссылок".


4. Выделяем то, что нам нужно (то, что будет кликабельно).


5. В палитре нам нужно написать URL сайта, это обязательный параметр. Имя не имеет значения, Alt - надпись, которая покажется при наведении ссылки.


6. После того, как вы выделите все объекты, которые вам нужны, останется сохранить картинку. (Файл - Сохранить оптимизированный как)


7. Внимание! Картинка сохраняется в GIF. И если вы обрабатывали многоцветное фото, то, скорее всего, качество получится ужасным. Поэтому не закрывайте Image Ready, возвращайтесь обратно в Фотошоп и сохраняйте картинку в JPG (Файл-Сохранить для Web).
Теперь можете смело закрывать Image Ready и Фотошоп. Заходим в папку, куда вы сохраняли картинку. Находим файл index.html, жмем по нему правой кнопкой мыши - открыть с помощью - блокнот. Из кода нам понадомится не все, а только то, что выделено (см. картинку ниже).


8. Копируйте это к вам на страничку, где вы хотите разместить картинку.
Теперь берем вашу JPG-картинку, заливаем ее на любой фотохостинг (radikal.ru), например. Копируем первую ссылку на нее (если не уверены, какую именно, она должна кончаться .jpg) и вставляем ее вместо того, что я подчеркнула ниже (только не стирайте кавычки "!):


Всё :) Думаю, что у вас всё получилось ;)
Источник: banana-art.ru