Создание анимированного баннера с помощью Adobe Photoshop
и ImageReady
Я как-то обнаружил, что в Сети нет нормальных статей (руководств) о создании баннеров. Признаюсь, я искал только в рунете, западные источники даже не пытался посмотреть. Кроме того некоторые мои друзья спрашивали о том, как делаются баннеры, и мне некуда их было отправить. Такой жуткий пробел стоит заполнить. Надеюсь, что данная статья (руководство) кому-нибудь поможет. После появления на рынке графических программ редактора от компании Adobe — Photoshop'а версии 5.5 со встроенным продуктом той же компании — ImageReady 2.0, все программы создания анимированной графики безнадежно отстали. Дело в том, что до этого процесс создания баннера (а баннер и есть анимированная графика, неанимированные баннеры в данном руководстве не рассматриваются) обычно сводился к следующему: создание в Photoshop'е (или любом другом графическом редакторе) файлов, которые впоследствии станут кадрами баннера; компоновка этих кадров в один gif (в анимирующей программе, например, Animagic, Ulead GIF Pro, GIFLine Pro, GIF Movie Gear и другие; таких программ очень много, достаточно зайти в соответствующий раздел любого сайта с программами); оптимизация (тут тоже применяются другие программы, как правило оптимизационные способности аниматоров весьма слабы). Три ступени, причем каждая из них требовала отдельной программы, так как хорошо все эти процессы одновременно выполнять не умела ни одна программа. Хотя надо признать, что два из трех некоторые программы осилили. Например, пакет PaintShop Pro от Jasc и его аниматор Animation Shop превосходно работает с анимацией и созданием сложной графики (пакет в общем-то является попыткой Jasc догнать Adobe Photoshop), но оптимизация в этой программе стоит на первобытном уровне. Данная статья описывает процесс создания баннера с помощью Adobe Photoshop'a и ImageReady, версии 5.5 (последняя 6.0) и 2 (3) соответственно. Что нужно иметь? Голову, компьютер, Photoshop версии 5.5 и выше (ImageReady входит в стандартный комплект установки Photoshop'а 5.5 и выше); иметь мало, нужно еще и владеть. Статья рассчитана на людей с минимальными знаниями Photoshop'a и ImageReady. Создание баннера — в нашем случае формата 468 пикселей на 60 — начинается в Photoshop'е. На рисунке 1 показано диалоговое окно создания нового файла (команда file\new).
В соответствии со старыми традициями ставится рамка в один пиксель, как видно на рисунке 2 она находится в отдельном слое, хотя это не необходимо. Принято считать, и мне кажется не без оснований, что рамка в баннере придает ему некоторую аккуратность.
Начинаем рисовать элементы нашего баннера. В данном случае я собираюсь нарисовать нескольких абстрактных человечков, один из которых будет резко отличаться по цвету от остальных, также я планирую создать надпись «design different» — подражание слогану компании Apple Macintosh «Think different». Я хочу, чтобы и надпись и оранжевый человечек мигали. Человечков рисую в данном случае попиксельно (то есть увеличиваю изображение до 1600% и заливаю краской каждый пиксель вручную). Это даёт колоссальную экономию в размере файла. Если на рисунке 3 голова человечка имеет по краям области светло-серого — это хорошо видно при сильном увелечении, то в последствие я переведу вручную все светло-серые пиксели в один цвет и сделаю голову более примитивной, на качестве прорисовки это не отразится, зато даст экономию в размере файла.
Обратите внимание, на рисунке 4 есть выделенная пунктиром область. Она будет залита белым в отдельном слое Layer 2, он «выше» текста и за счет включения/выключения этого слоя получиться мигание слова «different». Аналогичная ситуация с мигающим человечком, оранжевый находиться в слое yell .
Как видите баннер готов. Он еще не мигает и никак не оптимизирован. Сохраняем в его формате psd и нажимаем на значок ImageReady, значок подсвечен на рисунке 5. После чего Photoshop автоматически запустит ImageReady, причем наш psd файл уже будет открыт в ImageReady.
На рисунке 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.
На рисунке 7 в нашей анимации существует всего два кадра (в терминах ImageReady — frame). Первый кадр длится 1 секунду, второй — 3. Отличия кадров я не показываю, но, как я уже упоминал, я включаю\выключаю слои, за счет чего в конечном файле формата gif мы получим мигание. Напомню: мы все еще работаем с файлом psd. И нам еще доступны слои. Когда мы сохраним анимированный gif и попробуем открыть его в том же ImageReady, то мы получим анимированный gif, причем не будет никаких слоёв — только кадры. Если открыть этот gif в Photoshop'е, то мы увидим лишь первый кадр анимации.
На рисунке 8 у нас уже 7 кадров. Обратите внимание, все кадры имеют разное время показа (delay). Собственно баннер готов. Нажав кнопку Plays animations мы увидим, как будет выглядеть наш анимированный gif файл. Осталось оптимизировать и сохранить.
На рисунке 9 — оптимизация. Я выбираю 16 цветов, хотя в данном случае можно выбрать три цвета, так как в баннере использованы темно-серый, белый и оранжевый. Вообще вопрос оптимизации gif'а прежде всего сводится к сокращению количества используемых цветов. В некоторых случаях приходится задействовать другие пункты выкладки optimize. Но четких советов тут дать нельзя — экспериментируйте. Кстати, на рисунке 6 видно, что окно нашего баннера имеет несколько закладок: Original — для psd, Optimized — баннер выглядит в соответствии с нашими установками меню Optimize, 2-Up — 2 рисунка для сравнения настроек, 4-Up — 4 рисунка для сравнения. Все эти закладки созданы, чтобы помочь максимально точно установить оптимизационные настройки. Рекомендую после установки оптимизационных настроек проиграть наш файл в закладках 2-Up и 4-Up. Так можно будет увидеть в сравнении результат работы.
Для сохранения нашего баннера в формат gif открываем меню file и выбираем пункт Save Optimized As… Даём файлу имя, нажимаем Ok, баннер готов.
Вот результат: примитивный анимированный баннер, цель выполнена. «Вес» файла 2,53 Кб. Для анимированного баннера такого формата (468 на 60 пикселей) стандартный размер около 12-16 Кб. Причина такого малого «веса» моего баннера — применение всего трех цветов, попиксельная прорисовка и минимум элементов.
