Создание анимационного баннера.

Нагорный Игорь
igor@artdesign.ru

   Баннер - это рекламная полоска, размещаемая на чужих страницах для рекламирования вашего ресурса. Чаще всего в Сети можно встретить баннеры в виде анимированных gif-файлов (формат gif89a). Данный формат позволяет поместить в один файл несколько изображений gif и чередовать их одно за другим.
   Перед началом разработки вашей рекламы следует уточнить на узле, где она будет размещаться, все требования к ней, такие как размер изображения, размер файла. Для разных узлов эти характеристики отличаются. Баннеры могут быть любого размера, но в России наиболее распространенными и часто используемыми являются 468 на 60 пикселов и новый стандарт, который появился в русскоязычной части Интернета в мае этого года, формат 100 на 100 пикселов.
   Еще один из важных параметров – это размер (вес) баннера в килобайтах. Для многих узлов размер рекламы ограничен 12-15.5 Кбайт для баннеров размера 468 на 60 пикселов и 10 Кбайт, для 100 на 100 пикселов. Это обусловлено тем, чтобы минимизировать время загрузки – и не отпугивать посетителей.
   Если все параметры для рекламы вы узнали, то теперь стоит приступить к разработке самой рекламы. Неплохо бы было, уже в начале вашей работы определить необходимое количество кадров. Вторым шагом нужно выбрать безопасную палитру цветов Web Safe Colors пакета PhotoShop (в меню Swatches нужно выбрать команду Replace Swatches и найти Web Safe Colors палитру в папке Goodies). Для чего это нужно? Все это хорошо перевел на русский и объяснил Тема Лебедев и пошел даже дальше, выпустив плакат в номере 11 журнала “Интернет” с безопасными цветами. Смею его процитировать: “Когда вы создаете изображения для публикации на Интернете, главной проблемой является правильная передача цветов на разных типах компьютеров, мониторах и броузерах. Когда броузер не в состоянии правильным образом передавать тот или иной цвет, он подбирает другой цвет или смешивает несколько соседних цветов (dithering). Иногда цвет может быть заменен на что-то совершенно неподходящее. Обычно результат такого искажения легко определить по точкам, которыми покрывается картинка”. Одним словом, в нашем примере, можно избежать смешения цветов, которое увеличивает размер файла.
   Что же еще увеличивает размер баннера? Курсивные и рукописные шрифты, шрифты со сглаживанием, картинки в true color и это далеко не полный набор того, что должно учитываться при создании вашей рекламы.
   Какой инструментарий нужен для создания анимационных баннеров? Для этого подойдет всем известный Adobe PhotoShop www.adobe.com и программа, которой пользуется ваш покорный слуга, при разработке баннеров Animagic GIF Animator Version 1.06 http://www.rtlsoft.com/animagic.
   Третий шаг в создании фона. Поскольку анимированный gif состоит из статического изображения, на фоне которого отражаются изменяющиеся картинки, то нужно подобрать фон таким образом, чтобы он был как можно меньше по размеру. При создании баннера для компании “Джоби - Контакт” www.jobi.ru, который я привожу в пример, я выбрал фон синего цвета. После того, как фон готов нужно приготовить новый документ, с учетом кадров анимации (в нашем случае 13 кадров). Количество кадров вашего баннера зависит от количества и сложности Вашего баннера, а также не надо забывать про первые два шага, что вы ограничены в размере (весе) анимации. Придерживайтесь правила, размер кадра анимации равен 1 Кбайт. Новый документ заливается уже приготовленным фоном (команда Fill (залить) из меню Edit) и при помощи направляющих разделяется на горизонтальные полосы по 60 пикселов шириной.
   Ну вот, кадры анимации готовы, и к тому времени, я надеюсь, вы уже придумали оригинальную идею вашей рекламы. Ведь удачная идея баннера это залог хорошей посещаемости рекламируемого объекта. Далее я буду описывать, каким образом получить рекламный баннер-пример.
Как вы можете видеть, первый кадр анимации остается чистым, это наш фон. Далее в левом верхнем углу, исходя из идеи рекламы, а рекламируем мы в нашем случае конкретные товары, а соответственно стекловолокнистые обои, клеи краски, шпаклевки и чипсы, но не те, что вы думаете, а строительные чипсы для декоративного покрытия стен, пишем шрифтом FuturaPress, желтого цвета, размер 20 пикселов, надпись “стекловолокнистые обои”. На втором кадре, но немного правее и побольше шрифтом (29 пикселов) пишем надпись “клеи”. Эту операцию следует повторить для кадров с 3 по 9.

   С девятого кадра, как вы видите слово “чипсы!” размывается, чтобы плавно перейти к URL рекламируемого узла. Очень важно, чтобы посетители могли видеть URL. Размытее слова “чипсы!” происходит следующим образом. В десятом кадре текст со словами, подвергнем операции Render Layer (Превратить в слой) в меню Layers (Слои) щелкнув правой кнопкой мыши на тексте. Затем в разделе Filter (Фильтры) меню Blur (Размытие) выбираем команду Motion Blur (Размытие в движении) с параметрами Angle (Угол) 0 градусов и Distance (Дистанция) 10 пикселов. Операцию, описанную выше, проделываем с кадрами 11 и 12, но только поле параметра Distance (Дистанция) для 11 кадра - 30 пикселов, а для 12 кадра - 50 пикселов.
   Чтобы избежать в законченной анимации “прыгающих” изображений, следует убедиться, что все элементы, начиная с 9 по 13 кадр, тщательно выровнены. После завершения работы над баннером его нужно сохранить как новый файл и слить слои командой Flatten Image (Слить слои) из меню Layers (Слои). Исходный файл также нужно сохранить, так как в него по мере необходимости всегда можно будет легко внести изменения. После того как все слои слиты, выбираем инструмент Marque (Область) и копируем по очереди кадры с первого по тринадцатый. Затем в разделе Image (Рисунок) меню Mode (Способ), выбираем команду Indexed Color (Индексированные цвета) с параметрами Palette (Палитра) - Adaptive (Адаптированная), Color Depth (Глубина цвета) – 3 bits/pixel, Colors (Цвета) – 8, Dither (Смешение) – None (Нет) и Color Matching (Цветопередача) – Faster (Быстрая) эти кадры сохраняем в формате gif. Color Depth (Глубина цвета) зависит от того, “проседает” (теряется качество, какие-то цвета изображения) ваша картинка или нет. Если посмотреть на готовый баннер, то мы увидим, что надписи “загораются”, а потом “гаснут”. Для этого делаем кадр такого же цвета что и фон, но количество цветов Colors (Цвета) в нем будет равно 1, так как используется один синий цвет.
   Четвертый шаг – экспорт готовых кадров в программу “Animagic GIF Animator”. В данной программе, чтобы создать анимацию нужно открыть при помощи команды Open (Открыть), последний кадр анимации, в нашем случае это тринадцатый кадр. Затем в этот же документ по очереди вставляются новые кадры в порядке уменьшения с 12 по 1 (12, 11, 10 и т.д.) при помощи команды Insert Frames (Вставить кадры) из меню File (Файл), но не забудьте после каждого кадра с 2 по 5 вставлять пустой кадр с цветом фона. Если обратить внимание, то в палитру цветов при добавлении новых кадров постоянно прибавляются те цвета, которые используются в кадрах анимации. После того, как все кадры анимации вставлены, нужно сохранить вашу анимацию под любым новым именем. После этого шага нужно выбрать из меню Frames (Рамки) команду Set restore method (Установить метод восстановления) выбрать все кадры анимации и дать значение Restore to background (Восстановить к фону). Далее следует выбрать опцию зацикливания (команда Loop Count из меню Animation) параметр Infinite Loop (“Вечное” зацикливание). Такая реклама будет прокручивать свои кадры до тех пор, пока страница с ним загружена на экран. Пока анимация проигрывается в ней можно изменять значения, которое определяет, как долго каждый кадр остается видимым. Эти параметры можно изменять в меню Animation (Анимация) командой Frame Rate (Чередование кадров).
   Последний шаг – оптимизация кадров и цветовой палитры. Оптимизация кадров значительно сокращает размер файла, поскольку каждый кадр обрезается, таким образом, чтобы в нем остались только изменяющиеся элементы. Оптимизация палитры, как и оптимизация кадров значительно уменьшает размер анимации и это не стоит списывать со счетов. В нашем случае цветовую палитру оптимизируют кнопкой в меню программы Reducing color depth до 16 цветов. Правильно разработанный баннер после оптимизации может уменьшится на 60-80 процентов. Баннер-пример, который мы рассматривали в нашей статье, занимает 21 кадр и размер 14533 Кбайт.

   Если все прошло удачно, то вашу рекламу увидят многие тысячи людей в сети Интернет. В противном случае следует просмотреть все анимационную последовательность и найти те элементы, которые можно было бы отбросить, чтобы еще больше сократить размер файла.
   И напоследок маленький совет. Баннерные объявления быстро надоедают, особенно если проходит очень крупная и массированная рекламная кампания, поэтому их следует заменять как можно чаще.

   Желаю вам творческих успехов.

Turn your web on !^TM

Включи свой веб !^TM