Разновидности баннеров *

Баннер (с англ. banner) в Интернет-рекламе - рекламный носитель, при нажатии на который пользователь попадает на конкретный ресурс с рекламируемым продуктом/услугой. Может быть статическим, либо анимационным. Второй тип привлекает к себе больше внимания.

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

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

1. Краткий обзор видов и форматов баннеров.

Лет 6-7 назад реклама в сети выглядела, как правило, простой гиперссылкой, сейчас же пользователь порой просто теряется от обилия видов рекламных носителей. Говоря о самых распространенных видах, не обходимо выделить такие как:

- Классические flash-баннеры всевозможных размеров. На украинских баннерных площадках самые популярные ресайзы: 468х60 (ширина/высота, в пикселях), 240х350, 730х90, 180х300 и тд. Как правило, такой баннер представляет собой зацикленный анимационный ролик, то есть сюжет повторяется "по кругу";

- Интерактивные баннеры. Один из самых эффективных видов баннеров. Побуждение пользователя к какому-то действию. Как результат - высокий коэффициент СTR (соотношение количества показов баннера к кол-ву нажатий на баннер пользователями). Может быть выполнен в виде игры, небольшого мультфильма с участием пользователя или что-то в этом роде.
Ниже приведен пример такого баннера, выполнен как Screen-Glade, при наведении мышкой он открывается и предлагает пользователю произвести какое-то действие. В закрытом состоянии представляет собой обычный баннер

В обычном состоянии представляет собой обычный баннер 468*60.


После наведения мышкой баннер увеличивается до 468*120 пикселей. Когда мышку убираешь с баннера, он возвращается в первоначальную форму.

- Peel-away - выполнен в виде отгибающейся странички в углу браузера, нажав на которую пользователь может увидеть развернувшийся полноэкранный ролик.

В левом верхнем углу немного отгибается листик открывая за собой какую то информацию, обычно вызывает у пользователей интерес и желание посмотреть что за ним.


При нажатии на уголок, на весь экран разворачивается странница и при нажатии на кнопку «закрыть» снова сворачивается в уголок.

Говорить о видео-баннерах, полноценных играх-баннерах, мультиках- баннерах и т.п. нет смысла, поскольку пропускная способность украинских каналов существенно отличается от западных, где реализуются подобные вещи.

2. Технология изготовления flash-баннеров.

Анимационный редактор Flash от компании Macromedia стал необычайно популярным инструментом в изготовлении flash-баннеров. Это произошло благодаря тому, что разработчикам удалось выполнить две главные задачи: создать простую в использовании программу для создания анимации и совместить ее с мощным встроенным векторным редактором.

Основная масса баннеров делается для баннерных сетей, которые предъявляют свои технические требования к баннерам. Самое главное требование, которое следует учитывать - это ограничение по весу. Например, некоторые баннерокрутилки принимают баннеры размером 240х350 весом не более 25 килобайт, некоторые - 30-45 килобайт. Хороший и динамичный баннер - это разумный компромисс, между количеством графики и качеством анимации, поскольку и то и другое оказывает решающее значение на суммарный вес баннера. Поэтому оптимизация графики - один из существенных компонентов процесса изготовления баннера.

3. Графика и ее оптимизация.

Графика используется двух типов: растровые изображения, и векторные. Растровая графика (jpeg, gif, png и пр.) - используется как правило с разрешением в 72 dpi с целью экономии веса, к тому же Flash добавляет свою компрессию (сжатие), которое регулируется в процентах. Здесь необходимо искать разумный баланс качества, поскольку если в Photoshop при экспорте поставить, скажем, 50% качества изображения, а потом во Flash еще раз сжать его на 50% - то на выходе получится растровое изображение с «пережатыми цветами», т.е. очень плохого качества.

Для примера, на первой картинке растровое изображение в изначальном качестве, на втором после сжатия с целью снижения веса.

Один из методов оптимизации графики - это уменьшения цветовой палитры, т.е. уменьшение количества цветов, конечный результат можно сохранить лишь в формате *.gif. Png - расширение графического файла, которое тоже довольно часто используется при разработке баннеров. Одна из особенностей - прозрачные края изображения, что дает возможность использовать его в анимации, накладывая на свои фона и пр. Актуально при разработке pop-up баннеров неправильной формы. Недостаток - занимает много места по весу баннера.
Векторная графика. Как упоминалось выше, во Flash есть собственный встроенный графический редактор, который позволяет создавать довольно сложные изображения, включая градиенты, прозрачность, сглаживание краев вектора и пр. Размер векторного изображения можно увеличивать или уменьшать и это не отразится на качестве картинки. Для примера приведем разницу между увеличением растровой и векторной картинки

1. Увеличили растровую картинку

2. Увеличили векторное изображение

Flash дает возможность, помимо своей графики, также использовать стороннюю векторную графику, т.е. созданную в профессиональных векторных редакторах. Во Flash возможен импорт файлов с расширением *.ai, *.eps (Adobe Illustrator), *.cdr (Сorel Drow), *.ft, *.fh (Free Hand) и т.д. Иногда импортированная графика требует дополнительной оптимизации: уменьшения количества углов, замену цветов (если импортированное изображения было создано в цветовой модели СMYK, поскольку сам Flash работает в модели RGB).

4. Особенности анимации во Flash.

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

Автоматическая анимация служит для создания простых перемещений, когда пользователь задает лишь начальную и конечные точки движения, а все промежуточные кадры Flash просчитывает сам.

Программная анимация. Создается с помощью встроенного языка Action Script. Можно реализовывать очень яркие вещи, в том числе и псевдо-трехмерные движения, но здесь есть пару существенных недостатков: во-первых - далеко не все умеют программировать, и во-вторых - зачастую программная анимация занимает много ресурсов процессора, видеокарты, оперативной памяти компьютера пользователя, что недопустимо.

Для создания анимации существует главная шкала, где по горизонтали идут кадры, по вертикали - слои. Как правило, каждый обьект размещается в своем слое. Слоев может быть очень много.

Для снижения веса баннера советую каждый объект делать «символом», в итоге вес символа считается только один раз во всех кадрах, что позволяет делать небольшие по весу flash-ролики.

Видео/аудио. Также возможна работа с видео- (*.mpeg, *.avi, *.mov), аудио-файлами (*.mp3, *.wav). В программе, как и для растровых изображений, есть свой алгоритм дополнительной компрессии для аудио-файлов. Также есть свой формат видео-файла - *.flv.

Action Script. встроенный язык программирования, который является прекрасным дополнением для создания стильных и динамичных роликов. Некоторые вещи в программе можно реализовать только с помощью этого языка, например, рендомальные (случайные) действия (падение снега, как один из вариантов). На Action Script пишутся движки для игр, сайтов и целые приложения. Единственный минус - слишком сложные скрипты (код) забирают много ресурсов копьютера пользователя. С помощью экшн можно задействовать внешние данные, т.е. импортировать в ролик графику, динамический текст, звуки, видео, другие flash-ролики.

Экспорт готовых роликов Flash делает в своем основном формате: *.swf. Также можно на выходе получить такие форматы, как: animated gif, *.avi, *.wav, *.png. Но их итоговое качество не всегда адекватно, поэтому лучше пользоваться специализированным софтом и всякого рода конвертаторами. Например, программа-конвертатор swf2video, для корректной конвертации файлов *.swf в видеофайлы.

5. Технология изготовления gif-баннеров

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

Статический gif - просто графический файл, наподобие файла *.jpeg, который можно получить из любого графического редактора, такого как Photoshop.

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

При разработке анимационного gif-баннера используется приложение к графическому редактору Adobe Photoshop - Adobe ImageReady, либо подобные программы, типа Gif Animator и пр.

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

На выходе можно регулировать количество цветов, и выбирать наиболее оптимальный баланс между качеством картинки и весом баннера.

В анимации gif-баннеров, для получения качественного продукта, используется весь арсенал фильтров и эффектов Photoshop.

6. Креатив в изготовлении баннеров.

Креатив в изготовление баннеров можно определить, как нестандартный подход в разработке. Это может быть:

- необычный дизайн (картинка);
- нестандартные сочетания цветов/расположение объектов;
- звуковое сопровождение, видеовставки;
- интерактив (взаимодействие пользователя и ролика);
- остроумный и запоминающийся сюжет;
- динамичная анимация, когда весь ролик смотрится "на одном дыхании";