(Автовыбор) — автоматически выбирается оптимизация как GIF или JPEG по результатам анализа изображения;

(Поименованные) — с выбором поименованного набора установок из раскрывающегося списка.

В областях 2-Up Settings или 4-Up Settings определяются параметры для четырех панелей (3-я и 4-я панели доступны только в виде 4-Up):

(Оригинал) — отображает на панели исходное изображение (значение доступно только для первой панели);

(Текущие) — отображает на выбранной панели изображение с текущими значениями параметров Optimize palette (значение доступно для всех панелей);

(Автоматически) — отображает наименьшую по размеру версию, сгенерированную автоматически ImageReady на основе текущих параметров Optimize palette (значение доступно для второй, третьей и четвертой панелей).

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

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

Выбор команды (Оптимизировать анимацию) из меню команд палитры (Анимация) открывает одноименное окно, в котором по умолчанию установлены флажки:

Граничная рамка — обрезает каждый кадр по размеру изменяемой области (файл с такими кадрами можно редактировать только в программах, поддерживающих этот режим);

Удаление избыточных пикселов — делает прозрачными все не изменившиеся пикселы в кадре (чтобы этот параметр работал, необходимо установить параметр (Прозрачность) в палитре и выбрать метод смены кадров Automatic).

Щелчок на кнопке ОК запускает оптимизацию.

Созданную анимацию можно сохранить в формате GIF либо как фильм QuickTime. Другие форматы файлов, такие как JPEG или PNG, сохранят только первый кадр изображения, не позволяя воспроизвести всю анимацию. Существует несколько способов сохранить оптимизированную анимацию для использования на Web-странице. В ImageReady достаточно выбрать команду (Файл>Сохранить оптимизированный), чтобы сохранить анимацию с установками, выбранными при предыдущем ее сохранении. Если это не первое сохранение, то диалоговое окно (Сохранить) не появляется и название файла и его параметры остаются теми же, что были присвоены ранее.

Выбор команды (Файл>Сохранить как оптимизированный) позволяет изменить имя файла и выбрать другое место его хранения. Кроме того, возможен выбор измененного параметра (Тип файла) из набора доступных значений:

(HTML и рисунки) — генерирует HTML-файл и сохраняет каждый изображение в виде отдельного файла;

(Только рисунки) — сохраняет только изображение в отдельном файле;

(Только HTML) — сохраняет только HTML-файл без файлов изображений.

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

Чтобы сохранить анимацию в формате QuickTime, следует выбрать команду (Файл>Экспорт начального) и из раскрывающегося списка выбрать значение QuickTime Movie (оно будет доступно, если на компьютере установлена программа QuickTime). Указав имя файла и его место расположения, щелчком на кнопке (Сохранить) создаем файл выбранного типа.

2. Разработка анимированного изображения в программе Adobe ImageReady

2.1 Создание интерактивных компонентов Web – страниц

При создании Web-страниц с помощью программ Adobe Photoshop или Adobe ImageReady следует принимать во внимание конкретные возможности каждого из этих приложений:

Photoshop обеспечивает подготовку статических изображений для Web с возможностью их деления на отдельные области, связанные гиперссылками с целевыми объектами;

ImageReady кроме всех возможностей, предоставляемых Photoshop, включает также инструменты для создания динамических элементов, таких как анимации и интерактивные кнопки.

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

2.2 Создание анимированного баннера для Интернет – портала

Создание баннера — в нашем случае формата 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.