Иллюстрированный самоучитель по Adobe Photoshop 6

Photoshop для WWW

Карты ссылок

Изображения на Web-страницах часто используются как карта ссылок (image map). Щелчки курсором мыши в окне браузера на различных участках такого изображения приводят к загрузке разных страниц. Очевидно, что такое изображение можно разрезать на нужное количество частей и присвоить каждой из них особую гипертекстовую ссылку. А что делать если форма фрагментов должна быть сложной, непрямоугольной? Тогда проще всего сделать изображение картой ссылок. Для реализации этого механизма отдельным фрагментам изображения необходимо сопоставить различные гипертекстовые ссылки.

Карта ссылок реализована в языке HTML. В код Web-страницы включается описание участков изображения и соответствующих им ссылок. Карты ссылок могут обрабатываться либо сервером (требует специального сценария-обработчика на сервере), либо браузером пользователя. HTML-код для этих случаев несколько отличается, но результат остается тем же. ImageReady генерирует для них код автоматически, и вам не придется осваивать программирование.

HTML позволяет определять участки круглой, прямоугольной и многоугольной формы. Последний вариант используется для представления участков произвольной формы. Многоугольником с достаточным количеством сторон можно описать фигуру сколь угодно сложной формы.

Photoshop и ImageReady

В недалеком прошлом Photoshop, хотя и был, бесспорно, одним из главных инструментов каждого профессионального Web-дизайнера, не мог решить многие из повседневных задач, в первую очередь таких, как:

  • Создание анимационных GIF-изображений.
  • Создание интерактивных элементов навигации: кнопок и панелей.
  • Оптимизация изображений при экспорте в форматы, принятые в Internet, – GIF и JPEG. "Штатные" фильтры экспорта не позволяли достичь требуемой компактности графических файлов.
  • Создание карт ссылок на основе изображений.
  • Разрезание изображений на фрагменты, их независимая обработка и последующая сборка на Web-странице.

Для решения этих задач Web-дизайнеру приходилось использовать либо подключаемые модули для Photoshop сторонних фирм, либо вообще отдельные приложения. Фирма Adobe, зная о нуждах Web-дизайнеров, предложила им отдельный редактор растровых изображений ImageReady 1.0. Он представлял собой Photoshop, облегченный за счет изъятия некоторых инструментов и функций, которые применяются при подготовке изображений для полиграфического тиражирования. Особенно это относится к цветовой и тоновой коррекции, управлению цветом, работе с каналами, печати. Программа существенно удешевилась и, кроме того, в нее были внесены дополнения, необходимые именно для Web-дизайнера, в первую очередь, связанные с оптимизацией изображений. Судя по всему, программа не пользовалась достаточной популярностью, поскольку была лишена той гибкости и богатства возможностей, которые обеспечили Photoshop безусловное лидерство на рынке. Первая версия ImageReady стала последней ее самостоятельной версией. Новый вариант ImageReady 2.0 был включен в Photoshop 5.5. Таким образом, пользователям Photoshop не пришлось расставаться с любимой программой для реализации недостающих функций. Новая версия Photoshop 6.0 содержит и новую версию ImageReady 3.0.

Примечание
Подчеркнем, что ImageReady используется только в сфере Web-дизайна. Если вы готовите материалы для полиграфического тиражирования, то можете не устанавливать этот компонент и не читать настоящую главу
.

О том, насколько хорош ход, сделанный Adobe, можно поспорить. Вместо одной программы, Web-дизайнеру все равно приходится пользоваться двумя. Это не просто недостаточно удобно, но и приводит к неоправданной трате ресурсов компьютера: разработчики рекомендуют при одновременном использовании обоих компонентов дополнительные 32 Мбайт оперативной памяти и больше дискового пространства (для размещения виртуальной памяти обеих программ). Трата ресурсов эквивалентна дополнительному вложению денег в оборудование и потерям времени на переключение между приложениями. Что бы ни говорили рекламные буклеты об интеграции Photoshop и ImageReady, это все-таки отдельные программы. Даже передача изображений из одной программы в другую происходит через файл на диске, хотя это и скрыто от пользователя.

  1. Создайте в Photoshop новый документ небольшого размера.
  2. Нажмите кнопку Jump to Photoshop (Открыть в Photoshop) на панели инструментов или используйте комбинацию клавиш CTRL + SHIFT + M. Таким образом осуществляется переключение между программами.

    Примечание
    Для переключения между приложениями в меню File (Файл) каждого из них имеется специальный список Jump to (Перейти к). Он содержит названия программ, к которым возможно переключение. Программа установки поместит в него ссылки на все приложения фирмы Adobe: Illustrator, GoLive, PageMill и др. Вы можете самостоятельно дополнить этот список подходящими программами других производителей, если вам приходится работать с ними. Для этого нужно всего лишь создать ярлык (shortcut) выбранной программы в соответствующей папке, вложенной в папку \Helpers каталога Photoshop. Если вы, например, хотите внести в меню Jump to (Перейти к) ссылку на Microsoft Frontpage, то поместите его ярлык в папку \Helpers\Jump To HTML EditorV
    .

  3. Затем автоматически запустится ImageReady (если эта программа не открыта) и документ будет в нее загружен.

Подобная интеграция имеет и еще один отрицательный аспект. ImageReady не поддерживает редактирования цветовых и альфа-каналов изображений, хотя правильно их воспроизводит, и даже позволяет создавать.

Несмотря на перечисленные проблемы поверхностной интеграции Photoshop и ImageReady, вместе они дают в руки Web-дизайнера исключительно мощный инструмент. Когда вы приобретете достаточный опыт работы с этим комплектом, недостатки их совместного использования покажутся сущей мелочью в сравнении с неограниченными техническими возможностями.

Поскольку большинство специальных функций пакета, ориентированных на Web-дизайн, сосредоточено в ImageReady, в настоящей главе мы рассмотрим именно эту программу, лишь отмечая наличие сходных возможностей в Photoshop.

Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.