Баннерная реклама на сайт — как сделать баннер для сайта?

  1. Чтобы CTR (соотношение кликов к показам) был высоким, баннер нужно делать очень контрастным, чтобы он ни коим образом не сливался с общей цветовой гаммой сайта, но при этом и не пестрил в глазах.
  2. Не стоит подробно расписывать все, что вы знаете о товаре – это только оттолкнет пользователя. Самое главное, чего хотят люди – узнать название товара, цену на него и есть ли скидка/акция.
  3. На баннере должен присутствовать обязательный призыв к действию. Обычно этим самым призывом выступают слова “Купить”, “Заказать” или “Подробнее”.
  4. Как бы вы не креативили с баннером, главное изображение (товар) должно находиться в центре внимания.

Исходя из выше сказанного, макет баннера размером 300×600 будет выглядеть так:

image

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

Что касается кнопки, то ее тоже можно скачать в Google картинках, но нам не составит труда создать ее в Фотошопе.

Давайте добавим 3 этих элемента:

image

Смотрите также: “Как изменить размер изображения в Фотошопе CS6 и CC”

При создании баннера необходимо соблюдать его привлекательность. Для это все должно быть плюс-минус симметричным, а надписи желательно создавать используя единый шрифт. В нашем случае мы использовали Fira Sans. Это, естественно, не касается логотипов и кнопок с плашками.

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

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

Берем инструмент “Градиент”:

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

Остается только залить фон. Если вы не знаете, как работать с этим инструментом, то советуем для начала ознакомиться с этим уроком: Как залить фон в Фотошопе CS6 и CC

У нас получился такой результат после заливки:

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

Смотрите также: “Как выделить слой в Фотошопе”

Чтобы баннер был законченным и смотрелся аккуратно, стоит потратить время на выстраивании симметрии. Поэтому подвигаем немного объекты.

Для этого нам включаем линейки и, благодаря направляющим, выравниваем объекты:

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

На этом все! Благодаря программе Фотошоп и простым действиям мы смогли оперативно сделать баннер. Надеемся этот урок помог вам. Не стесняйтесь задавать свои вопросы в комментариях.

До встречи в наших следующих уроках!

Сегодня баннерную рекламу в той или иной форме используют все компании. Да да, даже для таргетированной рекламы в социальных сетях вы рисуете баннеры! Это неудивительно, ведь она является идеальным инструментом повышения узнаваемости бренда, доступна и главное —  измерима. Но в интернете так много баннеров и временами они настолько незаманчивы, что мы, потенциальные клиенты, их игнорируем.

Давайте представим, что у вас заказали баннер, который должен стать мегакликабельным. Что обязательно нужно учесть, чтобы баннер кликали, а не игнорировали?

Цвета

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

Например, наш сервис динамического ремаркетинга при трансляции объявлений учитывает, чтобы цветовая схема объявлений соответствовала сайту магазина (цвет кнопки и фона). Так мы напоминаем пользователям какими товарами и на каком сайте они интересовались. Объявления выглядят как небольшая копия сайта и работают на подсознание. А оно, как известно, есть у всех.

Визуальная иерархия

Обязательные составляющие баннера:

  •  Логотип.

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

  •   Сообщение.

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

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

  • Призыв к действию.

Это главный элемент баннера, который побуждает пользователя кликнуть. Используйте кнопки с фразами “Купить”, “Узнать больше”, “Зарегистрироваться”.

Пример баннера Jaguar:

Наш пример:

Размеры

Загружайте в Гугл Эдсенс баннеры самых конверсионных размеров:

  • 336×280 большой прямоугольник
  • 300×250 средний прямоугольник
  • 728×90 шапка
  • 160×600 “небоскреб”.Идеальное место для показа баннера — первый экран, в окружении основного контента страницы.

Наш сервис работает с Google Adwords. У Google порядка 400 шаблонов и под каждый сайт он самостоятельно подбирает подходящий размер.

По нашей статистике средний сtr по баннерам у нас колеблется от 0,5% — 1,50% в зависимости от аудиторий на тематических площадках Google.

Дизайн

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

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

Рассмотрим в качестве примера наш баннер и расскажем, что в нём учтено. На объявлении есть логотип и основные преимущества жилого комплекса: метро, невысокая стоимость квартир, скидка. Нет кричащих цветов, каждая мысль акцентирована, на баннере изображена знакомая символика метро.

Кнопки на баннерах

Кнопки определяют кликабельность (CTR) баннера. Разместите их под основным содержимым или справа внизу в зависимости от размера баннера. Следите за их единообразием в наборе баннеров.

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

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

Границы, обводка

Убедитесь, что содержимое баннера использует все пространство.

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

Пример баннера Сбербанка:

Наш пример:

Текст

Заголовок и текст должны быть разного размера и занимать не более четырех строк. Откажитесь от курсива, капслока и шрифта мельче 10.

Изображения

Подбирайте изображения, имеющие отношение к вашему сообщению и усиливающие его. Не можете сфотографировать моделей, оформите подписку на сток.

Реклама джинс от Levis является тому примером:

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

Соответствие стилю компании

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

В качестве примера приведем наш баннер с дальнейшим переходом на целевую страницу:

Соответствие дизайну сайта

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

Ощущение срочности

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

Анимация

Анимированные баннеры могут быть эффективнее статических. Но только в том случае, если анимация не отвлекает от основного сообщения.

Используйте простую анимацию не дольше 15 секунд и не больше трех повторений. Финальный кадр — призыв к действию.

Интерактивность

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

Формат файла

Сохраните баннер в формате, который поддерживается в сети. Помните, что не все устройства поддерживают flash-баннеры. Стандартные форматы — png и jpg для статических и gif для анимированных баннеров.Выбирайте их и не ошибетесь!

Размер файла

Чем меньше, тем лучше. Google Adwords рекомендует ограничить размер баннера до 150 Кб. Баннер должен загружаться быстро, иначе посетитель страницы пропустит его.

Заключение

Подведем итоги. Понятная цель, призыв к действию, релевантность и соответствие стилю компании — главные составляющие кликабельного баннера.

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

Автор: Елена Крыкина, Директор по маркетингу Reenter

Компании и сервисы: Levi’s, Сбербанк России, reEnter, Google Ads
Автор: Анна

Нельзя представить сайт в Интернете без собственного баннера. Такая реклама не только позволяет привлечь посетителей, но и является “лицом” сайта, его имиджем. А об имидже всегда изрядно беспокоятся. Потому сделать баннер – задача первоочередная и очень ответственная. Сделать это можно несколькими способами.

1Зачем необходим баннер?

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

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

Изготавливаться баннеры могут по традиционной или более совершенной технологии. Традиционный баннер представляет собой графическое изображение в формате JPG или GIF. Чтобы привлечь внимание к такой рекламе, разработчики могут сделать ее “живой” – анимированной.

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

Особенностью “продвинутых” баннеров будет еще и то, что к ним можно прилагать звук. Дорожка будет проигрываться, когда пользователь будет просматривать рекламу или, когда он будет выполнять определенные действия.

Баннеры, в каком бы формате они не были выполнены, выполняют такие основные задачи:

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

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

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

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

2Как создать баннер с помощью онлайн-программы?

Это наиболее популярный метод сделать баннер своими руками. Для этого не нужно скачивать или приобретать специальные программы. Все функционирует в онлайн-режиме.

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

Преимуществом этого сервиса будет еще и то, что тут имеется внушительное количество примеров – шаблонов, на основании которых можно сделать свою рекламу. Это особенно важно для новичков, когда нет опыта и навыков разработки своего варианта.

Чтобы получить свой баннер, необходимо:

  • выбрать размер и фон для баннера в редакторе. Они могут быть выбраны из шаблона или введены вручную;
  • выбрать категорию “Текст” и установить размер шрифта, его вид, цвет и т.д.;
  • добавить эффекты в виде теней, рамок и т.п.;
  • сохранить баннер в необходимом формате. Можно выбрать PNG, GIF или JPG.

3Создать баннер с помощью вспомогательной программы

Необязательно искать сложную программу, которая справится с задачей. Подойдет даже самая простая, но функционально “подкованная”. Такой является Easy GIF Animator. Программа платная, но большой ее плюс – можно бесплатно сделать 20 пробных запусков. Этого хватит, чтобы сделать несколько баннеров.

Интерфейс программы понятен даже тому, кто далек от графических редакторов. Алгоритм создания баннера схож с процессом, описанным выше. Это наиболее простая, но доступная программа для быстрого создания своего “детища”.

Также можно выбрать программы:

  1. Banner Maker Pro – простой интерфейс и ограниченные функциональные возможности. Разработана для создания элементарных баннеров.
  2. Ulead GIF Animator – сложное управление, но большой выбор инструментов и возможностей разработать идеальный баннер.
  3. Banner Designer Pro – профессиональная программа для создания “продвинутых” вариантов. Не самый простой интерфейс, но зато софт имеет большой выбор инструментов, чтобы воплотить свои задумки.

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

Сегодня я вам расскажу, как сделать баннер. Любое дело оказывается простым, когда знаешь, как его исполнить. Купив баннер у заказчика, может возникнуть ситуация, что необходимо заменить текст или потребовался еще один баннер для нового сайта, или нужно сделать еще один баннер с другим текстом или в другом формате, или…, или… Все это стоит определенных денег. А не проще ли сделать баннер самому и бесплатно, чтобы не зависеть от кого-то.

Итак, начинаем. Банеры бывают обычно следующих форматов: 468х60, 120х120, 100х100 или 88х31. Для наглядности предлагаю сделать баннер 468х60. Создавать будем в фотошопе. Я делаю это в версии 6.0, но все инструменты, о которых я буду говорить, присутствуют версиях выше 6.0.

1. Открываем фотошоп. Верхнее горизонтальное Меню -> Файл -> Новый. В открывшемся окне вписываем размеры в пикселях: для нашего случая ширина 468, высота – 60, разрешение 150пикс/дюйм, содержимое – прозрачность, далее жмем «ОК».

2. На баннере размещают логотип или любую желаемую картинку, а также необходимый текст, например «как увеличить посещаемость сайта«. Этим мы сейчас и займемся. Слева в фотошопе имеется вертикальное меню (вы видите его на блоге тоже слева). Левой клавишей мышки нажимаем на левое окошко палитры цветов и для примера выбираем зеленый. Жмем «ОК».

3. Выбираем инструмент «ведро». Если вы не видите инструмент, о котором я буду говорить, тогда нажмите правой кнопкой мышки на место предполагаемого инструмента, и вы увидите весь набор инструментов для данного окошка меню. После выбора «ведра», жмем по баннеру левой кнопкой мышки. Баннер окрасится в зеленый цвет. Получилось?  Должно быть как на кртинке ниже.

4. Теперь будем помещать картинку на баннер. У меня картинка, например, для RSS-подписки с изображением шахматной фигуры в виде коня. Она имеет расширение jpg, но можно и расширение gif. Открываем картинку в фотошопе. Будет лучше, если мы поместим не всю картинку, а только изображение коня. Идем:  Меню -> Изображение -> размер изображения. Запоминаем размер картинки.

5. Верхнее горизонтальное Меню -> Файл -> Новый. Для нового документа пишем размеры, как у картинки с конем (у меня 84х84), содержимое – «прозрачный».

Сделать баннер легко

6. Выбираем инструмент «Перемещение» и перетаскиваем коня в новый документ. Перетаскивать надо, нажав инструментом «перемещения» по коню, чтобы сделать картинку активной и перетащить затем в новый документ.

7. Выбираем инструмент «волшебная палочка», щелкаем им по фону вокруг коня. Если фон достаточно контрастный, то большая его часть выделится. Нажимаем клавишу «del» и удаляем выделение. Если не удалось за одно нажатие «волшебной палочки» удалить фон, то нажимайте на оставшийся фон и повторяйте процедуру необходимое количество раз. В нашем случае, я сделала это за 2 раза. См. ниже.

8. Теперь необходимо сделать так, чтобы конь поместился в баннере. Далее идем: верхнее горизонтальное Меню -> Изображение -> размер изображения. Пишем высоту 60 (по высоте нашего баннера). Обратите внимание, чтобы внизу стояла галочка «сохранять пропорции». Жмем «ОК», при этом картинка должна изменить размеры.

9. И снова инструмент «перемещение», нажимаем на коня с уменьшенным размером, чтобы сделать картинку активной, и перетаскиваем его на баннер. Размещайте картинку там, где требуется. В нашем случае я поместила ее справа.

10. Осталось написать текст. Выбираем инструмент «Текст» и цвет текста, как в пункте 2. Для нашего случая это белый. Пишем, например, «Подпишитесь на RSS-ленту». Инструментом «перемещение» вы можете установить текст так, как вам это требуется.

11. Верхнее горизонтальное Меню -> сохранить как … -> присваиваем имя лучше с расширением .jpg и сохраняем на своем компьютере. После этого заливаем, полученный баннер, на хостинг и прописываем путь к нему в следующей ссылке. Ссылка на баннер имеет вид: < а href=»URL ВАШЕЙ СТРАНИЧКИ»>< img srс=» URL БАННЕРА » >< /а>. Данный код вы устанавливаете в том месте сайта, где хотите видеть ваш баннер.

Поздравляю!!! Наш баннер готов! С гордостью используйте свое творение. В следующий раз я расскажу, как сделать анимированный баннер.

Читайте также:

Новости компании Как создать идеальный рекламный баннер —>

Как правильно создать дизайн для баннера наружной рекламы

Несмотря на то, что наружную рекламу сейчас считают не эффективной, она все еще отлично работает. Но работает только у 5% рекламодателей. Остальные 95% просто висят на щитах и придают яркости улицам. Так происходит потому, что для работы рекламы важно ее дизайнерское оформление.

Ниже приведены правила для создания рабочего дизайна баннера наружной рекламы

1. Принцип пустого пространства.

Пространство на баннере не должно быть полностью забито текстом. Текст и картинки независимо от размера баннера должны занимать не больше 30-40% всей площади. Остальное пространство заполняется не привлекающим внимание фоном.

image   image

2. Один баннер- одно сообщение.

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

image   image

3. Один баннер- одна картинка.

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

image   image

4. Чем короче, тем лучше.

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

image   image

5. Не более одного контактного номера.

Не тратьте время и место баннера на добавление нескольких номеров телефона и ссылок на социальные сети. Люди должны за короткое время успеть прочитать, вникнуть в суть и номер телефона запомнить. Номер должен быть простым, например, 555-555.

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

6. Баннер-лицо компании.

На подсознательном уровне все люди могут отличить красивое от безобразного. Поэтому на баннере все должно быть в порядке и текст, и линии выравнивания, и поля.

7. Грамотность-залог успеха.

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

8. Баннер должен быть читаемым.

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

9. Без дизайнера не обойтись.

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

Советы для правильного оформления рекламных баннеров

· Выбрать правильный цвет.

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

· Работать с контрастом.

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

· Реальная нереальность.

С помощью современных фоторедакторов можно создать самые разные изображения. «Нереальные объекты» сложно не заметить. Увидев, например, квадратный арбуз, ваш мозг запомнит этот образ.

· Креатив.

Креатива хорошо в меру. Пытаясь привлечь внимание потенциального клиента не перестарайтесь. Потому что это может испортить всю рекламу.

Следуя этим правилам, вы сможете получить максимально эффективную рекламную компанию.

Оцените статью
Рейтинг автора
4,8
Материал подготовил
Максим Коновалов
Наш эксперт
Написано статей
127
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий