Создание баннеров. Баннеры для сайта
Мы уже немного касались темы создания изображений особого формата — как сделать демотиватор или нечто аналогичное, вы уже знаете. Сегодня рассмотрим пример создания баннера для сайта, призванного привлечь особое внимание посетителей. Делаются баннеры для следующих целей: перевести посетителя на внутреннюю страницу своего сайта (если баннер стоит на вашем сайте), или пригласить пользователя на свой сайт, разместив баннер на сайте рекламодателя. Два типа баннеров, статичные и динамичные, подразделяются еще на размеры и на тип динамики. В одном случае для эффекта движения используется технология смены сцен в формате GIF — это мы подробно описали в статье про то, как создавать анимации. Во втором случае используется технология flash, позволяющая значительно облегчить объем баннера и сделать микрофильм. Если обратите внимание на самые известные сайты российских СМИ, то там всегда можно увидеть именно flash-баннеры, с длительностью до полутора-двух минут. При всем при том, что это вовсе не видео, как может показаться на первый взгляд.
Открываем уже освоенный нами редактор Gimp. В зависимости от требований к ширине и высоте баннера для сайта, создаем изображение командой «Создать» из первой строки меню выпадающего списка. В нашем случае будет создан баннер в 900 пикселей шириной и высотой в 180 пикселей. Обратите внимание на следующее. Формат GIF — это изображение как бы «над», поверхностная пленка на любую основу. Вспомните детские игрушки с нарисованными на полиэтиленовой пленке узорами, представьте себе орнамент скатерти из прозрачной пленки на белом фоне матерчатой скатерти, находящейся снизу — именно так схематично изображение GIF укладывается на любой фон. Баннер GIF может иметь как прозрачное поле (холст), так и залитый фон. Для первого случая характерны баннеры, которые нужно как бы вписать в основной фон страницы, без четкой границы или рамки. Как и баннеры для сайта статичные, они могут иметь разные размеры, но типовые шаблонные размеры таковы:
- 125 X 125
- 250 X 250
- 468 X 60
- 88 X 31 (кнопка)
Итак, мы создаем статичный баннер для сайта размером 900 X 180. Как создать баннер GIF, вы можете узнать из урока по анимации, и используя нужные вам размеры. Для привлечения внимания важно использовать элементы, не отталкивающие и не настораживающие. В последнее время в сети распространена практика чуть ли не запугивания (тизеры) посетителей громкими предсказаниями, имеет место и откровенное введение в заблуждение — когда в окошке баннера высвечивается текст предупредительного характера. Не используйте данные методики, так как это уже анахронизм.
Созданный нами белый слой можно залить градиентом. Мы сделаем это с использованием цвета градиента «германский флаг». Основной фон готов, теперь приступаем к заполнению нашего баннера. Мы напишем красивым текстом zasnezhenniy слоган www.hitech.tomsk.ru. Выделив волшебной палочкой шапки букв изнутри, зальем их белым цветом, используя инструмент «Заливка». Сохраняем файл в формате jpg-jpeg, и открываем заново — теперь предстоит окончательная обработка баннера для сайта. Находим вкладку «Фильтры», в выпадающем списке — Декорация-Скругленные углы. Выбираем радиус края и размывания -15, смещение по обеим осям — 0, добавляем фон и работаем с оригиналом. Здесь возникает проблема — готовый баннер увеличился в размерах вследствие обработки рамки. Это легко исправимо, вкладка «Изображение» - изменить размер изображения, разорвав цепочку и выставив параметры 900 Х 180. Теперь можно сделать плавающий баннер, если открыть его, выделить волшебной палочкой белый фон рамки, удалив его при помощи выделения слоя, прозрачности, добавления в альфа-канал. Обезличенная рамка вокруг баннера для сайта позволяет придавать ему форму любой геометрии. Главное здесь — сохранить его в формате GIF или PNG.
Код баннера
Ну, а теперь приступим к формированию кода баннера сайта. Итак, для использования баннера достаточно будет прописать следующий код:
и вставить его в нужное место на сайте. Данный код теперь можно править, изменяя адрес страницы, на которую требуется ссылаться, но путь к изображению должен оставаться в коде баннера неизменным. У нас ширина страницы позволяет вставить наш баннер под текст, что мы и делаем:
