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

Это не так сложно, как кажется на первый взгляд. Усвоив основные принципы анимирования GIF-файлов, вы сможете создавать не просто баннеры, а настоящие произведения искусства. Работать мы с вами будем в одной из лучших программ для GIF-анимации — 3D GIF Designer.

Основы моделирования

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

1.Окно структуры — по мере работы с заготовкой баннера в этом окне будут отображаться все основные элементы. Кликните на любой из них — в окне настроек появятся все функции данного элемента.

2.Рабочая область — здесь расположена заготовка будущего баннера.

3. Окно настроек — в этом окне отображаются настройки элементов баннера. Выделение можно сделать как в окне структуры, так и на рабочей области.

Первое, что нам надо сделать, создать заготовку для анимации. Для этого входим в меню File и выбираем пункт New File.

Определимся с размером изображения. Пусть это будет стандартная болванка размером 468x60 пикселей. Если вы ничего не меняли в настройках программы, наша заготовка уже должна иметь такой размер. В противном случае заходим в меню View / Animation Size и выбираем там нужные габариты. Здесь же находится пункт Custom Size (произвольный размер), сейчас он нам не нужен, а вот в будущем, когда вы начнете делать свои баннеры с нестандартным размером, вам придется часто пользоваться этой функцией. Установим фоновый цвет баннера. Для этого в окне структуры нажимаем на кнопку Background — в окне настроек появится меню свойств цвета.

Украшательства

Определимся с фоном. Нажимаем на кнопку From: Color и выбираем основной цвет. Как только вы это сделаете, заготовка будет перекрашена. Теперь в меню Depth (глубина) установим значение в 2 пикселя: по краям заготовки появятся каемочки. Этот параметр не относится напрямую к анимированию — просто украшательство. Нажимаем на кнопку Highlight: Color и выбираем белый цвет. Теперь нужно определить цвет теней — кликаем на кнопку Shadow: Color и выбираем понравившийся вариант.

В интернете вы наверняка видели баннеры, имитирующие системные сообщения Windows. Сделаем нечто похожее. Создадим строку названия ( title bar ) — это синяя полоса сверху любого окна, где обычно пишется название программы. Для того чтобы у нас на заготовке была такая же, заходим в меню Insert (вставка) и выбираем пункт Rectangle — на заготовке появится новый элемент. Необходимо закрасить его в синий цвет. Для этого снова нажимаем на кнопку From: Color и определяем оттенок. Растянем новый объект: можете использовать мышку (растягиваем точно так же, как и любое окно в Windows) либо воспользоваться параметрами настроек блока Size в окне настроек.

Чтобы добавить на баннер надпись, снова заходим в меню Insert и выбираем пункт 3D Text — на заготовке появится новый объект. Не удивляйтесь, если его размер слишком большой, габариты можно легко подправить при помощи мышки. В окне настроек устанавливаем переключатель в положение Simple text и печатаем текст сообщения в расположенном чуть ниже окне.

Теперь необходимо задать фон для надписи — желательно, чтобы он соответствовал фону title bar. После этого останется только разместить надпись в верхнем левом углу заготовки на строке названия. Для того чтобы title bar смотрелся реалистичней, добавим на него несколько кнопочек, которые обычно располагаются в правом верхнем углу любого окна (закрыть, свернуть, развернуть). Для примера определим только одну кнопку — «Закрыть». Заходим в меню Insert , выбираем пункт Preset и в раскрывшемся окне ищем кнопку Button Close. На заготовке появилась соответствующая иконка, ее-то и нужно разместить в правом углу title bar.

Еще немного красоты

Продолжим украшать нашу заготовку. Допустим, вы создаете «предупреждающий» баннер. В Windows в таких случаях на сообщении выводится восклицательный знак. Добавим этот элемент на форму. Заходим в меню Insert/Preset и кликаем на кнопку Exclamation Icon : на баннере появился соответствующий знак. Разместим его под основным сообщением.

Пришло время написать основной текст нашего послания интернетчикам. Перемещаемся в меню Insert/3D Text , в окне настроек ставим кнопочку в положение Simple Text. Не забудьте прописать сам текст сообщения в окошке рядом. После этого устанавливаем цвет шрифта и цвет фона надписи (как это делать, вы уже знаете).

Чтобы баннер смотрелся еще красивее, добавим к нему кнопку Оk. Возвращаемся в Insert/Preset и жмем на пункт Button Ok. Оформление баннера закончено. Ваша заготовка должна выглядеть приблизительно как на рис. 5.

На нашем диске

На нашем диске находятся программа 3D GIF Designer и баннер, который должен получиться у вас после того, как вы проделаете все описанные в статье операции. Там же располагается заготовка баннера в формате 3D GIF Designer.

В движении — баннер

Сделаем так, чтобы по баннеру двигался указатель мышки и нажимал на кнопку Ok. Добавим указатель. В меню Insert/Preset кликаем на параметр Cursor : на заготовке появится указатель в форме стрелки. Не снимая выделения, заходим в меню Sprite / Sprite Motion и нажимаем на кнопку Linear Motion. На баннере должны отобразиться два кружочка: зеленый находится там, где размещен указатель мышки, а красный — в конечной точке следования указателя, на кнопке Ok. Чтобы переместить метки, просто щелкаем по ним левой кнопкой мышки и, не отпуская кнопки, тащим указатель.

Теперь нужно сделать так, чтобы в момент, когда указатель достигнет кнопки Ok , она нажималась. В меню Insert/Preset выбираем пункт Button Ok pressed. На заготовке появится изображение кнопки в нажатом состоянии. Располагаем эту картинку поверх изображения не нажатой кнопки. Теперь в меню Sprite/Sprite Appearance кликаем на кнопку Add Sprite Appearance. В окне настроек указываем время, которое указатель находится над кнопкой. Время изменяется бегунками Start step (когда указатель только подошел к кнопке) и End step (указатель отползает от кнопки).

Если запустить анимацию, мы увидим, что когда указатель курсора достигает кнопки, он скрывается под ней. Чтобы исправить этот недочет, найдем в окне структуры и нажмем левой кнопкой мышки на пункт Sprite 8. Обратите внимание, что восьмой спрайт вы выбираете только в том случае, если делали баннер в точности так, как описано в данной статье: в других ситуациях нужно определить тот раздел Sprite, в котором вы устанавливали кнопку Button Ok pressed. Снова заходим в меню Sprite и нажимаем кнопку Move Sprite Down (to Back) — после этого указатель курсора не будет заходить под кнопку.

Виды баннеров

Рассмотрим основные виды баннеров, которые вы можете ежедневно обнаружить на многочисленных интернет-страничках.

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

Промо-статья — не столько баннер, сколько полноценный рекламный материал. Открывается случайным образом вместо какой-либо страницы сайта. Прочитав такой материал, пользователь может кликнуть на кнопке перехода и оказаться на сайте-рекламодателе.

Streaming pop-up и простой pop-up — графическая реклама, которая открывается в дополнительном окошке браузера.

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

Content Ad — изображение рекламы намертво «приклеивается» поверх некоторых страничек сайта, избавиться от него можно, только обновив страничку. Иногда и это не помогает: приходится заходить на сайт повторно.

Skycraper , Streaming Skyscraper — узкие вертикальные графические баннеры, располагающиеся на полях сайта слева или справа.

Fullbanner , Streaming Fullbanner — это так называемый верхний баннер, он же голова, хед, шапка. Размещается в самом верху странички. Обычно Fullbanner стоят больше всего и максимально эффективны.

* * *

Основная часть работы проделана. Осталось сохранить заготовку и экспортировать ее в формат GIF. Заходим в меню File и нажимаем кнопку Export. Прописываем имя файла, не забывая отвечать на вопросы, касающиеся оптимизации GIF-файла.

На этом наш урок закончен. Вы научились создавать простой баннер. Он не очень сложный, но когда вы освоите приемы создания простых анимированных изображений, вам не составит труда сделать более сложный и красочный баннер.