Крис Макгрегор

Разработать эффективное баннерное рекламное объявление для Web — это все равно, что написать 30-секундное выступление по радио всего из десяти слов. Одних ограничений на размеры файлов и допустимые форматы вполне достаточно, чтобы заставить сдаться любого дизайнера. Но, несмотря ни на что, дизайн баннеров можно превратить в удовольствие.

Чаще всего среди рекламных объявлений в Web можно встретить баннеры в виде анимированных GIF-файлов (или GIF89a) — формате, который позволяет поместить в один файл несколько изображений GIF. При просмотре таких файлов через браузер изображения показываются одно за другим по принципу листания книжных страниц. Разработчик может задавать скорость воспроизведения анимации GIF, а также определять, будут ли изображения меняться по циклу и нужен ли для их просмотра через браузер специальный дополнительный модуль.

Планирование

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

Наиболее часто используемые размеры баннеров — 468 Ё 60 пикселов, но они могут варьироваться в пределах от 400 Ё 50 до 600 Ё 75 пикселов. Поскольку пропорции этих файлов довольно близки, переделать объявления под разные размеры, как правило, довольно просто. Если общая концепция подходит для размеров 468 х 60, для преобразования изображений под другие размеры потребуется внести лишь незначительные изменения.

Длительность анимации определяет, как долго будут «прокручиваться» все ее кадры. На многих узлах длительность анимаций не ограничивается, но на других существует 8-секундное ограничение, а также запрет на баннеры с циклами.

Еще один важный параметр — это размер файла. Для многих узлов Web размер баннерной рекламы ограничен 12 Кбайт, чтобы минимизировать время загрузки — и не отпугивать посетителей. Но, даже учитывая все упомянутые ограничения, у дизайнера остается вполне достаточное поле для творчества и возможность добиться высокого рейтинга для созданного им объявления, хотя при этом придется сузить диапазон используемых цветов и применять выразительную, но простую графику.

Используя цвета из палитры цветов Web Safe пакета Photoshop (во всплывающем меню Swatches (Образцы) нужно выбрать команду Replace Palette (Заменить палитру) и найти Web Safe Color Palette в папке Goodies), можно избежать смешения, которое увеличивает размер файла. Поскольку системы с Windows отображают цвета на несколько градаций темнее, чем Macintosh, важно убедиться в точном соблюдении цветового баланса, проверив созданный баннер на обеих платформах.

Курсивные и рукописные шрифты, а также шрифты с засечками могут увеличивать размеры файлов GIF, поэтому лучше выбирать шрифт без засечек. (В баннере на рисунке был использован Verdana Bold — бесплатный шрифт компании Microsoft.) Добавить и изменить текст можно при помощи инструмента Text (Текст) пакета Photoshop. Для набора мелким шрифтом лучше применять растровые начертания. Шрифт со сглаживанием при небольших кеглях читается плохо, к тому же в нем используется гораздо больше цветов, чем в растровых начертаниях. Только отключением опции сглаживания текста в Photoshop можно уменьшить размеры файла на сотни байт.

Mobilis in mobile

Для дизайна рекламных баннеров на платформе Macintosh великолепно подойдет комбинация всего двух инструментов — Adobe Photoshop и условно-бесплатной программы GifBuilder (http://iawww.epfl.ch/staff/Yves.Piguet/clip1gif-home/GifBuilder.html) компании Yves Piguet. Неплохо дополняют Photoshop и Macromedia Fireworks, а также Adobe ImageReady, которые работают на платформах Macintosh и Windows. Программы, ориентированные исключительно на Windows, например, PhotoImpact компании Ulead, Extensis PhotoAnimator и Astound WebMotion, также могут использоваться с Photoshop или другими растровыми редакторами.

Первые шаги в создании баннера — разработка и оптимизация фона. Поскольку анимированный GIF состоит из статического изображения, на фоне которого отображаются изменяющиеся картинки, чем будет меньше размер файла фона, тем больше останется «места» для творческого содержания. При создании баннера-примера автор начал работу в Photoshop, выбрав для заливки фона голубой цвет и поместив поверх него маленький черный прямоугольник, содержащий в верхнем левом углу название компании.

После того, как фон готов, нужно выбрать все содержимое изображения ("Command-A" на Macintosh и "Control-A" на PC). Далее выполняют команду Define Pattern (Задать шаблон) из меню Edit и создают новый документ для всех кадров. Количество кадров зависит от количества и сложности элементов баннера, а также максимально допустимого объема файла. Лучше придерживаться «золотого» правила, по которому размер кадра равен 1 Кбайт. Баннер-пример размером 468 Ё 60 пикселов состоит из восьми кадров, поэтому размеры нового документа равны 468 Ё 480 пикселов. Изображение при помощи направляющих разделяют на горизонтальные полосы по 60 пикселов шириной. Новый документ заливается фоном (командой Fill (Залить) из меню Edit) со 100% непрозрачности: для получения восьми копий фона баннера, повторяющихся сверху вниз до конца документа, следует использовать опцию Pattern (Шаблона) в окне диалога Fill. Каждая из этих копий станет основой кадра анимации будущей GIF.

Ниже описывается, каким образом получить рекламный баннер Turn On the Power с двумя лампочками, которые загораются, когда на объявлении появляются слова. После рисования двух «выключенных» лампочек на новом слое во втором кадре следует продублировать изображение и при помощи фильтра Offset (команды Filter, Other, Offset) сместить их на 60 пикселов вниз в третий кадр. В этот же кадр добавляется копия заголовка, набранная серым шрифтом.

Затем дублируется уже копия заголовка и перемещается в четвертый кадр со смещением 60 пикселов. Для замены исходных лампочек на «включенные», их добавляют на новый слой слева и справа от текста заголовка. Чтобы уменьшить размер файла законченной анимации и избежать в ней «прыгающих» изображений, следует убедиться, что все элементы кадров тщательно выровнены.

Для создания пятого кадра дублируется слой с «включенными» лампочками и перемещается на 60 пикселов вниз. Используя те же параметры инструмента Text, между лампочками добавляют текст заголовка (белым цветом со 100% непрозрачности) — таким образом имитируется «включение» заголовка.

В кадрах с 6 по 8 используются такие же элементы — лампочки и заголовок — как и в кадре 5, поэтому достаточно дублировать слои с лампочками и заголовком, и переместить их вниз в соответствующие кадры.

В седьмом кадре название компании заменяется на призыв к действию («Для получения информации щелкните здесь»), а внимание посетителей привлекает красный прямоугольник с белым текстом. В восьмом кадре призыв к действию заменяется уже на URL узла. Очень важно, чтобы посетители могли видеть URL.

После завершения работы над баннером его нужно сохранить как новый файл и слить слои (командой Flatten Image (Слить слои) из меню Layers (Слои)). Исходный многослойный файл Photoshop также нужно сохранить, поскольку при необходимости в него можно будет легко внести изменения. Затем выбирается инструмент Marquee (Область). В палитре Options (Опции) задается стиль Fixed Size (Фиксированный размер) с высотой 60, шириной 468 и растушевкой 0. При помощи Marquee выбирается и копируется первый кадр.

Экспорт кадров

Переключившись в GifBuilder (или другую графическую программу для Web), создают новый файл. Открываются окна Frames (Кадры), Preview (Предварительный просмотр) и Color (Цвет); в новый документ вставляется первый кадр; и, наконец, выбирается палитра цветов, оптимизированных для Web (в GifBuilder представляется как 6 Ё 6 Ё 6 Palette в подменю Colors меню Options). Эту палитру следует использовать для всех GIF-анимаций в Web. Не нужно выбирать опцию Remove Unused Colors (Удалить неиспользуемые цвета).

Теперь остается лишь последовательно скопировать и вставить все кадры из Photoshop. После того, как все кадры вставлены, следует выбрать опцию зацикливания (в пакете GifBuilder — команда Loop из меню Options). Для баннера-примера задан «вечный» цикл; такое объявление будет прокручивать свои кадры до тех пор, пока страница с ним загружена на экран.

Чтобы инициировать цикл анимации, нужно выбрать команду Start ("Command-R") в меню Animation. Пока анимация проигрывается, в ней можно изменять значение Interframe Delay (Задержка между кадрами), которое определяет, как долго каждый кадр остается видимым; кадры с текстом следует задерживать подольше.

Далее браузеру нужно сообщить, что делать с кадрами, которые уже были отображены. Лучше всего оставить опцию Unspecified (Не задано), поскольку она позволяет браузеру принять решение по отображенным кадрам самому, что обеспечивает максимальную совместимость анимации со всеми программами просмотра Web. В окне Frames (Кадры) выбирают все кадры и задают для них опцию Unspecified (ее можно найти в подменю Disposal Method (Метод обработки отображенных кадров) меню Options).

Последний шаг — задание оптимизации кадров. Это значительно сокращает размер файла, поскольку каждый кадр обрезается таким образом, чтобы в нем остались только изменяющиеся элементы. Правильно разработанный баннер после оптимизации может уменьшиться на 60—85 процентов. Весь баннер на узле Web Publish (www.publish.com) занимает 7 Кбайт.

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

Разработка баннерной рекламы для Web требует терпения и понимания того, как сжимаются файлы GIF, но дополнительные усилия окупятся. Если баннерную рекламу сравнивать с многостраничным узлом Web, то она представляет собой сфокусированный объектив, нацеленный на единственное место, куда рекламодатель изо всех сил стремится «заманить» посетителей.

Крис Макгрегор — издатель узла Internet Type Foundry Index (www.typeindex.com) — разработал сотни баннеров для Web.