Компания Adobe Systems известна, прежде всего, как разработчик целого созвездия профессиональных графических пакетов, предназначенных, в первую очередь, для полиграфии. В то же время, сориентировавшись в конъюнктуре рынка и правильно оценив все возрастающую роль Internet, компания решила расширить сферу влияния за счет редактора web-страниц PageMill, который, по замыслу руководства, должен был перетянуть на себя часть рыночного пирога подобных приложений. Однако состязаться на равных с такими «грандами», как FrontPage от Microsoft и Homesite от Allaire он не смог. Поэтому в руководстве Adobe решили сконцентрироваться на своем «родном» направлении графических пакетов, и создать специализированный редактор графики под Web. Его успех был предопределен заранее, поскольку база в виде Photoshop уже существовала и от разработчиков потребовалось внести в нее лишь незначительные дополнения. В результате получился очередной хит — ImageReady, вторая версия которого из маркетинговых соображений была интегрирована в Photoshop 5.5. Таким образом, новая версия популярного пакета содержит все необходимое для создания графики, независимо от ее предназначения — будь то web или печатный станок.
Основная задача ImageReady — придание Web-страницам интерактивности при помощи разнообразных графических элементов, таких как карты изображений, анимационные последовательности и динамические кнопки.
Использование карт изображений (image map, в которых части одного изображения играют роль ссылок на различные ресурсы Internet) помогает придать разнородным ссылкам на сайте целостность восприятия. Анимация добавляет статичной картинке «живость». Такой же эффект дает использование вместо чисто текстовой ссылки красиво оформленных кнопок, видоизменяющихся при прохождении курсора над ними. Что касается пользы от применения ссылок в виде изображений, несущих смысловую нагрузку — то она очевидна. Ведь, кроме чисто эстетического удовольствия, они помогают посетителям лучше ориентироваться по сайту, особенно если он обширный.
Сходства с Photoshop...
От своего «родителя» ImageReady, кроме удобного и элегантного интерфейса, унаследовал все основные операции для работы с изображением, он поддерживает даже маски прозрачности — в общем, впечатление такое, что это — самый настоящий Photoshop. Даже формат хранения web-информации в изображении использован все тот же — универсальный PSD (в него вписываются новые тэги). Поэтому после внесения изменений в файле, отредактированном в Photoshop, ImageReady сразу же «почувствует» это и предложит его обновить, так что никаких дополнительных проблем параллельная работа в обоих редакторах не создает. Для облегчения переходов между программами предназначена специальная команда Jump to.
Единственное, чего ImageReady не поддерживает — векторные пути и корректировочные слои (adjustment layers), но при оформлении web-страниц без них спокойно можно обойтись, тем более что в пакете существует функция изменения цвета, действие которой аналогично некоторым корректировочным слоям.
... и различия
Кроме инструментов, предназначенных для реализации интерактивности на web-страницах, ImageReady, как полноценный редактор web-графики, имеет свои специфические возможности и, в этом плане, даже предпочтительнее самого «мэтра». С моей точки зрения, было бы неплохо, если бы некоторые из них появились в Photoshop, поскольку аналогичные задачи иногда приходится выполнять и для полиграфии.
 |
| Рис.1 |
К таким возможностям относятся динамические эффекты по наложению повторяющегося рисунка (pattern) или же цветовой растяжки (gradient), действие которых распространяется на всю площадь слоя. Особенно интересны возможности последнего эффекта, поскольку ничего подобного в Photoshop нет. Так, в ImageReady через
 |
| Рис.1 |
Еще одна палитра, которой нет в Photoshop — Type, служит для точного управления всеми параметрами текста (даже кернингом!), позволяя манипулировать им с такой же легкостью, как и в программах для верстки, так что форматирование больших текстовых блоков не представляет никакой сложности — достаточно выделить определенную его часть и задать ей новые параметры.
Но еще более интересна панель Styles. Ее основное предназначение — автоматизировать оформление однотипных элементов, и в этом она похожа на возможности Actions. Поскольку при оформлении web-страничек часто используются объемные кнопки, именно поэтому в новой панели собрана обширная коллекция заготовок, а также предусмотрено создание собственных заготовок. В принципе, эту панель можно сравнить с панелью стилей текстового редактора, например, Word. Вместо параметров форматирования текста, в ImageReady стиль содержит информацию о степени применения и параметрах эффектов, существующих в программе, и проявляет себя в соответствующей палитре как обычный эффект («развернув» его, можно увидеть все настройки). Однако, в отличие от Actions, возможности стилей ограничены использованием только динамических эффектов (drop/inner shadow, inner/outer bevel, bevel and emboss, color fill, gradient/pattern), хотя, с появлением новых типов, они становятся практически неограниченными. Для того чтобы оформить выделенный объект определенным образом, следует просто перетащить иконку нужного стиля на объект. Таким образом, использование стилей позволяет значительно сократить время, затрачиваемое на оформление странички.
Что касается фильтров, то к существовавшим в Photoshop добавились еще два — DitherBox и Tile maker (меню Filter/Other). Первый позволяет управлять подмешиванием цветов при имитации сложных цветов dither при экспорте изображения в формате gif, второй — создавать фоновые заливки на основе небольших повторяющихся изображений (либо обычным способом, либо с эффектом калейдоскопа).
А теперь перейдем к возможностям ImageReady по приданию интерактивности элементам web-дизайна.
Карты изображений
Одна из основных задач ImageReady — создание карт изображений. Для этого изображение делят на отдельные фрагменты (в терминологии Photoshop — slices), которые и будут выполнять роль ссылок. При этом активной областью (которая реагирует на положение мышки) может выступать как вся площадь slice, так и некоторая его часть (hotlight).
 |
| Рис.2 |
Один из вариантов создания slices — открыть созданный в Photoshop файл со слоями и после этого преобразовать все слои во фрагменты (Create Slice From Selection, помните, что любой слой преобразуется в выделенную область по команде Select/Load selection/Layer transparency). Если же изображение слоев не имеет, его можно очень точно разметить направляющими и выполнить аналогичную операцию (Create Slices From Guides). Еще один вариант — вручную определить фрагменты с помощью Slice tool (попросту «ножа»). В любом случае все изображение разделится на фрагменты. Информация и свойства каждого фрагмента отображаются в одноименной палитре, предоставляя полный контроль за ними, а частичная информация отображается прямо на экране, что облегчает оперативное управление (рис. 2). Однако с русскими буквами программа не дружит — наверняка это связано с кодировкой символов по умолчанию, программа-то англоязычная. При изменении размеров некоторых фрагментов программа автоматически пересчитывает их для всех остальных. При необходимости, фрагменты можно дробить на более мелкие части, или же наоборот, укрупнять — при этом нужно помнить, что все изображение будет состоять из файлов, равных по количеству фрагментам.
Что касается hotlight, то они предназначены для очень точного задания границ активных зон, поскольку могут иметь любую форму (slices — только прямоугольную). Для использования hotlight достаточно выделить нужную часть изображения, перейти в палитру слоев, выбрать Create New Layer (создать новый слой) и включить Use layer as Image Map. ImageReady поддерживает несколько стандартов для описания границ активных областей: CERN и NCSA, допускает генерирование кода Java-script для его обработки как на клиентской, так и на серверной стороне, а также для совместимости с GoLive.
Динамические кнопки
Без сомнения, «живые» web-страницы имеют явное преимущество перед статичными. Именно поэтому для их создания ImageReady предлагает на выбор несколько способов. Один из них — сформировать изображение, которое бы меняло свой вид при задержке курсора поверх него (чаще всего этот прием используется при создании динамических кнопок). Для этого сначала создают на отдельных слоях столько изображений кнопки, сколько планируют использовать ее состояний. Лучше всего пользоваться для этого настроечными слоями и эффектами — в большинстве случаев для разных состояний меняются только цвет кнопки и/или размер фаски (состояние нормальное/вдавленное). В первом случае можно наложить эффект Color Fill (он перекрашивает весь слой в другой цвет), а во втором — Inner/Outer bevel.
 |
| Рис.3 |
И хотя для создания динамических кнопок знание java-script не понадобится, тем не менее, без понимания основных состояний, используемых для смены изображений, не обойтись. Over соответствует расположению мышки поверх кнопки, Down — во время нажатия, Click — после нажатия, Up — при отпускании кнопки, Out — при выходе за пределы активной зоны. (рис. 3). При выделении любого фрагмента изображения его образ автоматически заносится в состояние Normal (мышка вне кнопки) на панели Rollover. Для получения других состояний сначала создают новое, указывают его тип и затем, путем включения/выключения видимости слоев получают новое изображение фрагмента.
Естественно, ролловеры можно использовать в комбинации с картами изображений, причем программа позволяет осуществить и достаточно сложные эффекты: например, мышка может проходить над одной частью картинки, а изображение будет меняться в другой или же нескольких частях сразу.
Анимация
 |
| Рис.4 |
ImageReady поддерживает различные форматы сжатия графических данных: GIF, JPEG, PNG8 и PNG-24. Для тех, кто не хочет вдаваться в премудрости настроек (а их тут великое множество), предусмотрена опция Optimize to file size (уложиться в заданный размер), и программа автоматически подберет необходимые параметры компрессии. Для большей гибкости каждому фрагменту изображения отдельно можно задавать свой тип компрессии, указывать разные параметры, что позволяет добиться оптимального соотношения качество/размер для всего изображения целиком.
Для размещения в Internet программа создает HTML-файл (Save Optimized), а все картинки собирает в отдельном каталоге. При обновлении этого файла (Update HTML) ImageReady вносит изменения только в свою часть и не затрагивает остального содержимого, внесенного другим редактором (например, FrontPage).
Таким образом, ImageReady будет незаменим для тех, кто знаком с Photoshop и хочет украсить сайт за счет использования карт изображений, анимации и динамических кнопок. Работать с программой приятно, а мощные функции управления превратят вашу работу в легкое занятие.
ImageReady
Рейтинг: *****
Требования: РС: Pentium, 64 Мбайт оперативной памяти, 125 Мбайт дискового пространства; Macintosh: PowerPC, 64 Мбайт оперативной памяти, 125 Мбайт дискового пространства
Заключение: Еще один потенциальный хит от известного производителя. Имеет все необходимое для создания интерактивных web-страничек при помощи карт изображений, динамических кнопок и анимации.
Производитель: Adobe Systems
