Photoshop обеспечивает подготовку статических изображений для Web с возможностью их деления на отдельные области, связанные гиперссылками с целевыми объектами;
ImageReady кроме всех возможностей, предоставляемых Photoshop, включает также инструменты для создания динамических элементов, таких как анимации и интерактивные кнопки.
С помощью ImageReady можно создать целую анимированную Web-страницу, использующую комбинацию текстов, рисунков и графических объектов. При этом предварительно следует продумать очередность их появления и перемещения в пределах страницы, которая должна иметь стандартный размер, чтобы полностью отображаться в окне обозревателя. Однако чаще всего ImageReady используют для создания таких интерактивных компонентов Web-страницы, как графические карты либо анимированные кнопки.
Создание баннера — в нашем случае формата 468 пикселей на 60 — начинается в Photoshop. На рисунке 3 показано диалоговое окно создания нового файла.
В соответствии со старыми традициями ставится рамка в один пиксель, как видно на рисунке 4 она находится в отдельном слое, хотя это не необходимо. Принято считать, и мне кажется не без оснований, что рамка в баннере придает ему некоторую аккуратность.
Начинаем рисовать элементы нашего баннера. В данном случае я собираюсь нарисовать нескольких абстрактных человечков, один из которых будет резко отличаться по цвету от остальных, также я планирую создать надпись «design different» — подражание слогану компании Apple Macintosh «Think different». Я хочу, чтобы и надпись и оранжевый человечек мигали. Человечков рисую в данном случае попиксельно (то есть увеличиваю изображение до 1600% и заливаю краской каждый пиксель вручную). Это даёт колоссальную экономию в размере файла. Если на рисунке 5 голова человечка имеет по краям области светло-серого — это хорошо видно при сильном увелечении, то в последствие я переведу вручную все светло-серые пиксели в один цвет и сделаю голову более примитивной, на качестве прорисовки это не отразится, зато даст экономию в размере файла.
Обратите внимание, на рисунке 6 есть выделенная пунктиром область. Она будет залита белым в отдельном слое 2, он «выше» текста и за счет включения/выключения этого слоя получиться мигание слова «different». Аналогичная ситуация с мигающим человечком, оранжевый находиться в слое yell.
Как видите баннер готов. Он еще не мигает и никак не оптимизирован. Сохраняем в его формате psd и нажимаем на значок ImageReady, значок подсвечен на рисунке 7. После чего Photoshop автоматически запустит ImageReady, причем наш psd файл уже будет открыт в ImageReady.
На рисунке 8 мы видим небольшую область окна ImageReady. Попробую пояснить. Внешне ImageReady на 80% похож на Photoshop. Но его основная область работы — веб, поэтому у него свои выкладки. Например, в случае с баннером нам понадобятся две выкладки — Анимация и Оптимизация. И та и другая хорошо видны на рисунках 9 и 10. Про оптимизацию позже, а сейчас несколько слов об анимации. Выкладка анимации позволяет создать кадр (рисунок 7, левее корзинки; в ImageReady — Дублирование исходного кадра), назначить время его проигрывания (всплывающее меню на рисунке 8), проиграть. Техническое отступление. Помимо Анимации есть еще две выкладки: Часть и Прокрутка. Первая позволяет «резать» наш рисунок и оптимизировать отдельные его фрагменты с различными установками. Например, есть большой рисунок, в одной его части есть пустая область, в другой кусок фотографии. Сохраняя каждую область рисунка отдельно мы получим очень большую экономию общего размера. Кроме того, когда грузится не один большой рисунок, а много маленьких, создается впечатление, что страница грузится быстрее. Выкладка Прокрутка позволяет работать с картинками, html и JavaScript, с тем, что принято называть роловерами — графическими событиями, происходящими при прохождении курсора мышки по области рисунка. Например, мы хотим нарисовать меню, при наведении мышки на которую пункты меню будут менять свой вид (технически это просто смена картинок). С помощью выкладки Прокрутка этот процесс будет сведен к минимуму: нарисовать рисунок, его вариант реакции на курсор мышки (например, слои), задать условия Прокрутки и сохранить Сохранить оптимизацию как… кликнув галочку Update HTML.
На рисунке 9 в нашей анимации существует всего два кадра (в терминах ImageReady — кадр). Первый кадр длится 1 секунду, второй — 3. Отличия кадров я не показываю, но, как я уже упоминал, я включаю\выключаю слои, за счет чего в конечном файле формата gif мы получим мигание. Напомню: мы все еще работаем с файлом psd. И нам еще доступны слои. Когда мы сохраним анимированный gif и попробуем открыть его в том же ImageReady, то мы получим анимированный gif, причем не будет никаких слоёв — только кадры. Если открыть этот gif в Photoshop'е, то мы увидим лишь первый кадр анимации.
На рисунке 10 у нас уже 7 кадров. Обратите внимание, все кадры имеют разное время показа. Собственно баннер готов. Нажав кнопку Воспроизвести анимацию мы увидим, как будет выглядеть наш анимированный gif файл. Осталось оптимизировать и сохранить.
На рисунке 9 — оптимизация. Я выбираю 16 цветов, хотя в данном случае можно выбрать три цвета, так как в баннере использованы темно-серый, белый и оранжевый. Вообще вопрос оптимизации gif прежде всего сводится к сокращению количества используемых цветов. В некоторых случаях приходится задействовать другие пункты выкладки Оптимизация. Но четких советов тут дать нельзя — экспериментируйте. Кстати, на рисунке 8 видно, что окно нашего баннера имеет несколько закладок: Оригинальная — для psd, Оптимизированная — баннер выглядит в соответствии с нашими установками меню Оптимизация, 2-Up — 2 рисунка для сравнения настроек, 4-Up — 4 рисунка для сравнения. Все эти закладки созданы, чтобы помочь максимально точно установить оптимизационные настройки. Рекомендую после установки оптимизационных настроек проиграть наш файл в закладках 2-Up и 4-Up. Так можно будет увидеть в сравнении результат работы.
Для сохранения нашего баннера в формат gif открываем меню Файл и выбираем пункт Сохранить оптимизацию как… Даём файлу имя, нажимаем Ok, баннер готов.
Вот результат: примитивный анимированный баннер, цель выполнена. «Вес» файла 2,53 Кб. Для анимированного баннера такого формата (468 на 60 пикселей) стандартный размер около 12-16 Кб. Причина такого малого «веса» моего баннера — применение всего трех цветов, попиксельная прорисовка и минимум элементов.
В заключении хотелось бы отметить, что, сохраняя изображение для использования в качестве элемента Web-страницы, можно одновременно сгенерировать HTML-файл, который будет содержать информацию для обозревателя о том, как воспроизводить элементы страницы при загрузке. Этот файл включает ссылки на изображения (в формате GIF, PNG или JPEG), HTML-текст, гиперссылки и код JavaScript для создания интерактивных эффектов (rollover effects). Хотя для большинства эффектов можно выполнить предварительный просмотр непосредственно в программах Photoshop или ImageReady, но зависимость демонстрируемых Web-страниц от операционной системы, типа обозревателя и системы отображения цвета требует выполнения просмотра в каждом конкретном обозревателе.
ImageReady поддерживает создание интерактивных объектов, добавляя код JavaScript в результирующий HTML-файл, обеспечивающий смену состояния объекта при наведении на него указателя мыши. Для создания интерактивных объектов служит палитра Rollover, совмещенная с палитрой (Анимация). На ней отображаются возможные состояния объекта, каждому из которых может соответствовать свое изображение или даже целая анимация. При сохранении такого объекта, как элемента Web-страницы каждое состояние сохраняется в отдельном файле.
В настоящее время у Adobe ImageReady появляется большое количество конкурентов в области анимирования изображений, но благодаря тому что программа успешно обновляется, можно сказать, что программа Adobe ImageReady является удобным программным комплексом по созданию и внедрению анимированных изображений в сеть Интернет.
1. Аксенов П.П. Самоучитель работы на Adobe ImageReady CS2. – М., 2006
2. Дж. Эрсон. Создание интерактивных компонентов Web-страниц. – Спб., 2004
3. Мануйлов В.Г. Мультимедийные компоненты, Информатика и образование №12 – 2004, №1, №2, №5 – 2005
4. Фигурнов В.Э. IBM PC для пользователя Краткий курс М.: Инфра-М, 2000.- 480 с.; 2001.- 480 с. 1997
5. Лавров С.М. Adobe ImageReady:сб. примеров и задачи М.: Финансы и статистика, 2003
6. Макарева Н.В. и др. Информатика: учебник- 3-е изд М.: Финансы и статистика, 2003
7. Информатика Базовый курс Учебное пособие для студентов вузов СПб.: Питер, 2003
8. Хэлворсон М., Янг М Эффективная работа с Adobe ImageReady.- СПб.: Питер, 2000