Главная » Adobe Photoshop CS2 » Разрезание изображений


Разрезание изображений

Разрезание изображений
Множество разнородных графических элементов Web-страницы могут потребовать для оптимизации различных параметров, или даже форматов. В таких случаях большое изображение можно разрезать на фрагменты и задать для каждого фрагмента индивидуальные параметры. Сборка фрагментов в единое изображение осуществляется HTML-кодом страницы. Разрезание изображения также удобно для организации ссылок и необходимо при создании ролловеров (см. ниже).
На приведен пример заголовка Web-страницы, где разрезание приводит к существенному выигрышу в размере и качестве. Основная часть заголовка полноцветная, и займет наименьшее место при сохранении в формате JPEG. В кнопках-ролловерах использованы всего два цвета. Для них наиболее выгоден формат GIF.
Ролловеры
В последнее время в Web-дизайне все чаще используются языки программирования и языки сценариев: Java, JavaScript и ActiveX. Наибольшую популярность приобрел JavaScript, поскольку поддерживается подавляющим большинством новых браузеров на всех платформах и не требует значительных ресурсов компьютера. С помощью JavaScript программируются самые разнообразные интерактивные элементы: кнопки, меню, формы и т. д. Далеко не все дизайнеры-любители хотят в дополнение к своей основной профессии осваивать совершенно не связанную с ней область программирования. ImageReady дает возможность получать эффектные интерактивные элементы дизайна страниц, не занимаясь программированием и даже не набирая ни строчки кода. Для создания таких элементов используется JavaScript, но весь .код сценария генерируется ImageReady автоматически. Остается только вставить его в текст готовой страницы или добавить к созданной автоматически странице основное содержание.
Ролловер представляет собой динамический элемент, изменяющий внешний вид, когда на нем оказывается курсор мыши или делается щелчок ею. Он базируется на нескольких изображениях, соответствующих отдельным состояниям: ролловер в покое, на ролловер наведен курсор мыши, и т. п. Код JavaScript обрабатывает движение мыши и показывает в зависимости от этого разные изображения. По определению ролловер должен представлять собой целое изображение. Если же требуется создать его только на каком-либо фрагменте, то изображение придется разрезать. Поскольку Photoshop предлагает удобные средства для разрезания изображений и автоматическую генерацию HTML-кода, создание ролловеров оказывается совсем несложным делом.
Карты ссылок
Изображения на 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, то поместите его ярлык в папку HelpersJump To HTML EditorV
3. Затем автоматически запустится ImageReady (если эта программа не открыта) и документ будет в нее загружен.
Подобная интеграция имеет и еще один отрицательный аспект. ImageReady не поддерживает редактирования цветовых и альфа-каналов изображений, хотя правильно их воспроизводит, и даже позволяет создавать.
Несмотря на перечисленные проблемы поверхностной интеграции Photoshop и ImageReady, вместе они дают в руки Web-дизайнера исключительно мощный инструмент. Когда вы приобретете достаточный опыт работы с этим комплектом, недостатки их совместного использования покажутся сущей мелочью в сравнении с неограниченными техническими возможностями.
Поскольку большинство специальных функций пакета, ориентированных на Web-дизайн, сосредоточено в ImageReady, в настоящей главе мы рассмотрим именно эту программу, лишь отмечая наличие сходных возможностей в Photoshop.

Comments are closed.