Создание баннера

Разделы: Информатика


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

С каждым днём увеличивается количество людей, которые приходят к выводу, что создание собственного сайта является необходимостью. Сам Интернет становится более доступным, тысячи людей каждый день заходят на разные сайты. Аудитория Интернета с каждым днём увеличивается.

Что такое хороший сайт? Он должен быть, во-первых, с хорошо продуманной дизайнерской идеей, т.е. красивым, не похожим на все остальные сайты. Во-вторых, простота в навигации, в-третьих, сайт должен быть "живым" и постоянно обновляться. Это все главнейшие составляющие. Но самое важное – это удобство и простота в нахождении искомого. При создании сайта необходимо учитывать наличие баннеров и соответственно выстраивать дизайн.

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

Как известно, свои персональные web-страницы создают не только художники и дизайнеры, но и самые разные, иногда не обремененные художественным вкусом, люди. Не все они "на дружеской ноге" с программами-рисовалками типа CorelDraw, многие, может быть, в школе со скрипом получали четвертки по предмету, высокопарно именуемому "изобразительное искусство", и до сих пор водят мышью по коврику примерно так же, как курица лапой.

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

Что же делать? Все очень просто: чтобы сделать привлекательный, более того, анимированный (мультипликационный) баннер, вовсе не обязательно быть художником. Ниже представлены несколько способов создания своего баннера.

Историческая справка

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

Энциклопедия Wikipedia утверждает, что первый графический рекламный модуль в Интернете, на который можно было кликнуть для перехода к информации рекламодателя, был продан в 1993 году на сайте Global Network Navigator, принадлежавшем американскому компьютерному издательству O'Reilly. Однако днем рождения баннера следует считать 25 октября 1994, когда на сайте Hotwired (принадлежавшем самому известному американскому журналу о технологиях Wired) был размещен баннер AT&T, который выглядел ужасно, но был инновацией. Размер баннера – 468х60 – впоследствии стал самым известным стандартом в Интернет – рекламе, хотя и был вытеснен более крупными форматами 10 лет спустя.

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

Что такое баннер?

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

Баннеры бывают статичные и анимированные.

  1. Статичный баннер представляет собой  яркое статичное изображение (форматы: *.jpg, *.gif).
  2. Анимированный баннер может разрабатываться на основе технологии Flash или в формате GIF.

Анимированный GIF-баннер представляет собой набор сменяющих друг друга статичных изображений (кадров) с интервалом в несколько секунд. Обычно состоит из 3-5 кадров. Недостатками GIF-баннера являются значительное “утяжеление” баннера с увеличением числа кадров и отсутствие возможности создания сложных анимационных эффектов.

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

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

Изготовление баннеров и стандартные размеры баннеров.

  • баннеры 468x60 пикселей;
  • баннеры 120х60, 150х60, 140х 60 – как видно из размеров, являются вариантами баннера 468х60;
  • баннер 120х240 пикселей – вариант вертикального баннера;
  • баннер 100х100 пикселей – квадратик, достаточно широко используется в интернет рекламе;
  • баннеры 88х31, 88х40, 81х63 – эти кнопочки для счетчиков, рейтингов, для обмена ссылок между сайтами.

Реже используются другие размеры баннеров, однако важно, чтобы размер банера в среднем не превышал 15 Кб. Однако придерживаться такой границы в размере достаточно сложно, используя формат flash.

Баннерная реклама

Основным показателем, который измеряет эффективность баннерной рекламы является показатель CTR, который обозначает отклик баннера, то есть количество кликов по нему. К примеру, показатель CTR, равный 5% означает, что на баннер из 100 показов кликнули только 5 раз. Естественно, что такой показатель встречается очень редко.

Средним значением, отклика баннера является значение в 2%. Существует несколько универсальных советов и правил, которые могут помочь повысить эффективность баннерной рекламы, в частности отклика баннера.

В каких целях используют баннеры?

  • Создание положительного образа компании в глазах потребителей.
  • Эффектное представление продукта или услуги.
  • Привлечение новых клиентов.

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

Создание баннера

Создать баннер можно несколькими способами:

1. Заказать создание баннера в какой-либо дизайнерской компании. 2. Нарисовать самостоятельно в графическом редакторе. 3. Сделать самому с помощью специализированного ПО.

Первый вариант является достаточно дорогим. Сегодня самый простой баннер обойдется минимум в 1000 р. Конечно, можно обратиться к веб-дизайнерам в частном порядке и договориться о цене, но куда приятнее самому научиться создавать баннеры. Второй вариант потребует от вас знания компьютерной графики и дизайна. Однако он является самым эффективным и творческим.

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

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

Урок создания анимационного баннера с программой Adobe Photoshop

В этом Фотошоп уроке будем создавать анимационный баннер для сайта.

1. Создайте новый документ нужных вам размеров. Размеры нашего баннера будут 380х50 px.

2. Разместите на ваш документ фоновую картинку, которая будет статичной.

3. Напишите текст.

Если текст состоит из нескольких строчек, то напишите каждую строчку на новом слое.

4. Встаньте на первый текстовый слой.
Кликните в палитре слоев на кнопочку "Добавить маску слоя"
Возьмите инструмент , выделите текст.

Затем нажмите Ctrl+Alt+D, чтобы сделать легкую растушевку, установите значение 2 px.
Теперь установите черный цвет, возьмите Заливку и залейте выделение при активной маске. Выделение должно оказаться белым.
Ctrl + D – снимите выделение.

Те же самые действия повторите с другими текстовыми слоями.

Вот как будет выглядеть ваша палитра слоев.

Найдите изображение подобное моим карандашам – они будут открывать слова.

Перейдите в Image Ready.

Для первого кадра закройте глазики у текстовых слоев и переместите карандаши в то место, где начинается первая фраза. У меня это "Видео-уроки..."

Нажмите на кнопочку "Дублировать кадр"

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

Кликните по маске, чтобы сделать ее активной.

Вернитесь в документ и правой стрелкой на клавиатуре стяните маску с текста, пока он полностью не откроется.

Старайтесь в этом уроке для перемещения пользоваться именно стрелками!!!

Нажмите на кнопочку "Размножить" и в окошке установите количество кадров 10 шт.

Дублируйте последний кадр и спрячьте слой с карандашами.

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

У меня в итоге получилось 38 кадров. Время по 0,1 сек

Теперь Файл – Сохранить оптимизированный как..., сохраните в формате GIF.

Вот, что у меня получилось (немного сокращенный вариант):

Что не следует делать в баннерах:

  1. Не надо вставлять в баннер размазаное изображение (портит баннер).
  2. Не делать шрифт больше 50.
  3. Когда используете большой шрифт не следует применять Bold Style (выделение жирным).
  4. Флэш баннер не должен маргающим или еще каким-нибудь, который будет раздражать посетителя.
  5. Размер флэш баннера не должен превышать 50кб, иначе на медленном модеме слишком долго будет грузится.
  6. Не вставляйте в баннер бессмысленный текст.