рисунок 2

рисунок 3

рисунок 4

Как видите баннер готов. Он еще не мигает и никак не оптимизирован. Сохраняем в его формате psd и нажимаем на значок ImageReady, значок подсвечен на рисунке 5. После чего Photoshop автоматически запустит ImageReady, причем наш psd файл уже будет открыт в ImageReady.

рисунок 5

На рисунке 6 мы видим небольшую область окна ImageReady. Попробую пояснить. Внешне ImageReady на 80% похож на Photoshop. Но его основная область работы — веб, поэтому у него свои выкладки. Например, в случае с баннером нам понадобятся две выкладки — animation и optimize. И та и другая хорошо видны на рисунках 7 и 9. Про оптимизацию позже, а сейчас несколько слов об анимации. Выкладка анимации позволяет создать кадр (рисунок 7, левее корзинки; в ImageReady — Duplicates current frame), назначить время его проигрывания (всплывающее меню на рисунке 6), проиграть. Техническое отступление. Помимо Animation есть еще две выкладки: Slice и Rollover. Первая позволяет «резать» наш рисунок и оптимизировать отдельные его фрагменты (slices) с различными установками. Например, есть большой рисунок, в одной его части есть пустая область, в другой кусок фотографии. Сохраняя каждую область рисунка отдельно мы получим очень большую экономию общего размера. Кроме того, когда грузится не один большой рисунок, а много маленьких, создается впечатление, что страница грузится быстрее. Выкладка Rollover позволяет работать с картинками, html и JavaScript'ом, с тем, что принято называть роловерами — графическими событиями, происходящими при прохождении курсора мышки по области рисунка. Например, мы хотим нарисовать меню, при наведении мышки на которую пункты меню будут менять свой вид (технически это просто смена картинок). С помощью выкладки Rollover этот процесс будет сведен к минимуму: нарисовать рисунок, его вариант реакции на курсор мышки (например, слои), задать условия Rollover и сохранить Save Optimized As… кликнув галочку Update HTML.

рисунок 6

рисунок 7

На рисунке 8 у нас уже 7 кадров. Обратите внимание, все кадры имеют разное время показа (delay). Собственно баннер готов. Нажав кнопку Plays animations мы увидим, как будет выглядеть наш анимированный gif файл. Осталось оптимизировать и сохранить.

рисунок 8

На рисунке 9 — оптимизация. Я выбираю 16 цветов, хотя в данном случае можно выбрать три цвета, так как в баннере использованы темно-серый, белый и оранжевый. Вообще вопрос оптимизации gif'а прежде всего сводится к сокращению количества используемых цветов. В некоторых случаях приходится задействовать другие пункты выкладки optimize. Но четких советов тут дать нельзя — экспериментируйте. Кстати, на рисунке 6 видно, что окно нашего баннера имеет несколько закладок: Original — для psd, Optimized — баннер выглядит в соответствии с нашими установками меню Optimize, 2-Up — 2 рисунка для сравнения настроек, 4-Up — 4 рисунка для сравнения. Все эти закладки созданы, чтобы помочь максимально точно установить оптимизационные настройки. Рекомендую после установки оптимизационных настроек проиграть наш файл в закладках 2-Up и 4-Up. Так можно будет увидеть в сравнении результат работы.

рисунок 9

Для сохранения нашего баннера в формат gif открываем меню file и выбираем пункт Save Optimized As… Даём файлу имя, нажимаем Ok, баннер готов.

рисунок 10

Вот результат: примитивный анимированный баннер, цель выполнена. «Вес» файла 2,53 Кб. Для анимированного баннера такого формата (468 на 60 пикселей) стандартный размер около 12-16 Кб. Причина такого малого «веса» моего баннера — применение всего трех цветов, попиксельная прорисовка и минимум элементов.