Карта ссылок

Изображения на Web-страницах, созданные описанным выше образом, часто используются как карта ссылок (image map). Щелчки курсором мыши в окне браузера на различных участках такого изображения приводят к загрузке разных адресов страниц (URL). Однако, для создания карт ссылок обычно используют не Photoshop, а Image Ready. Когда карта ссылок определена, функция Preview in (Предварительный просмотр) позволяет протестировать карту ссылок еще до ее экспорта HTML-кода и самого изображения на локальный диск. После того, как карта ссылок оттестирована и найдены параметры оптимизации изображения, можно выполнить команду File (Файл) | Save Optimized As (Сохранить оптимизированное как). После выбора параметров сохранения карты ссылок и нажатия кнопки Сохранить (Save), файлы графических фрагментов и HTML-код будут сохранены на диск.

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

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

Что такое GIF - анимация?

Выше мы познакомились с графическим форматом GIF (Graphics Interchange Format), который является собственностью известной компании CompuServe Inc., имеющей исключительное право на переопределение, видоизменение или модификацию этого формата. Одной из особенностей формата GIF является то, что он позволяет создавать простую анимацию - чередующиеся кадры. Конечно, это не сравнимо с полноценными форматами хранения анимации (такими как AVI), но зато даёт возможность создать компактный симпатичный ролик - например, для баннера.

Широкое распространение анимированный GIF получил в Интернет: стоит только набрать любой адрес, и вашему взору предстанет ряд рекламных баннеров, заставок, логотипов и других " двигающихся" изображений, выполненных в формате GIF. Они, безусловно, вносят определенное разнообразие и оживление в Web-страницы, но многие, увлекшись созданием анимированных изображений, к сожалению, забывают следить за их размерами. Если размер файла окажется слишком велик, это может вызвать раздражение у посетителя вашей страницы, работающего через телефонную линию (модем), которому просто надоест ждать, пока ваша анимация загрузится.

Для создания анимаций на основе GIF-файлов существует немало специальных редакторов, называемых GIF-аниматорами. Бесплатные пробные (или бета-версии) этих аниматоров, а также других подобных им редакторов можно найти по следующим адресам в Интернет: www.freeware.ru, www.listsoft.ru, www.winfiles.com, www.tucows.com, www.nonags.com, www.thefreesite.com, www.mediabuilder.com, www.fileworld.com.

В предыдущих версиях в Photoshop входила программа ImageReady, которая представляла собой мощный WISIWYG-редактор для создания сайтов. Эти два продукта были объединены вместе еще в пятой версии Photoshop. В ImageReady возможно:

• cоздание анимационных GIF-изображений;

• cоздание интерактивных элементов навигации: кнопок и панелей;

• оптимизация изображений при экспорте в форматы, принятые в Internet;

• создание карт ссылок и ролловеров на основе изображений;

• многое другое.

Итак, в прежних версиях Photoshop приложение ImageReady, ориентированное на веб-дизайн, поставлялось вместе с Фотошопом. В последней версии Photoshop убрана клавиша быстрого перехода между этими программами и большинство возможностей ImageReady импортированы в Photoshop CS3. В частности, это касается и анимации изображений. Ранее она выполнялась в ImageReady, а теперь ее можно сделать непосредственно в Photoshop CS3.