Рекламные баннеры как сделать
Как самостоятельно сделать рекламный баннер: обзор популярных сервисов
София Гаитбаева ppc.world (до 2021 года)
Что делать, если в команде нет дизайнера, работать в сложных графических редакторах вы не умеете, но нужно создать красивые рекламные баннеры? На помощь приходят специальные сервисы для создания графического контента. Мы выбрали шесть популярных онлайн-редакторов: Canva, Adobe Spark, Desygner, Bannersnack, Bannerboo и Fotor, протестировали их и готовы рассказать об их преимуществах и недостатках.
Canva
Сервис считается одним из самых популярных инструментов для создания графического контента. В нем много шаблонов открыток, постеров, презентаций, есть специальные форматы для соцсетей Facebook и Instagram.
Попробуем создать самые «ходовые» баннеры: большой прямоугольник 336×280, средний прямоугольник 300×250, полноразмерный баннер 728×90, а также большой мобильный баннер 320×100.
Чтобы начать работу с изображением нажимаем «Создать дизайн», затем — «Использовать специальные размеры».
Вводим параметры высоты и ширины баннера и переходим в редактор.
Сначала сделаем фон. Canva предлагает различные варианты оформления: однотонные, орнаменты, узоры, градиенты, флористические и т. д.
Чтобы добавить к фону элементы (логотип, дополнительные изображения) переходим в раздел «Мое». Сюда можно загрузить изображения с компьютера. Чтобы разместить их на баннере, просто перетащите загруженные картинки из галереи на рабочее поле. Удобно, что можно сразу загрузить в медиатеку все элементы, которые планируете использовать для создания баннеров, и потом по очереди перетаскивать и редактировать.
Теперь добавим текст.
Нам нужен простой баннер, поэтому текст призыва постараемся сделать в том же стиле, что логотип.
Изменение цвета текста, выравнивания и т. д. — в меню сверху. Текст можно перетаскивать, растягивать и сжимать.
Теперь добавим кнопку. Для этого заходим в раздел «Элементы» — «Фигуры». Мы хотим круглую кнопку, соответственно, из списка фигур выбираем круг. Перетаскиваем его в нижнюю часть баннера, корректируем размер и выбираем цвет.
Можно добавить стрелку на кнопку. Для этого переходим в «Элементы» — «Линии». Тут есть уже готовые стрелки, выбираем понравившуюся, перетаскиваем на кнопку, меняем размер и цвет.
Осталось добавить несколько простых декоративных элементов. В Canva нет возможности свободно выделить часть изображения, обрезать и вставить элемент в баннер, как в более сложных и продвинутых фоторедакторах. Если нужно добавить на баннер элемент изображения, придется обрезать его в другом графическом редакторе, сохранить и загрузить в медиатеку Canva. Зато в Canva большая библиотека фонов и иллюстраций. Так как дизайн нашего баннера простой, можно выбрать что-то из иллюстраций в библиотеке сервиса.
Сохраняем то, что у нас получилось, нажав «Скачать» в верхнем правом углу, и аналогичным образом делаем остальные баннеры:
Плюсы
Минусы
Canva — удобный и простой сервис с большой библиотекой бесплатных изображений и шаблонов оформления. Правда, отсутствуют многие полезные инструменты и функции более продвинутых графических редакторов, но новичок вполне может обойтись без них, особенно если дизайн простой и минималистичный.
Adobe Spark
Adobe Spark — это веб-приложение, им можно пользоваться с десктопа, также есть версия для iOS. У приложения три основных назначения:
Сервис позиционирует себя как инструмент для тех, кто не обладает навыками работы в сложных графических редакторах. Проверим, насколько легко с его помощью создать баннеры.
Спускаемся вниз страницы, нажимаем Create a graphic.
Сервис предлагает воспользоваться шаблонами, но мы будем создавать баннер самостоятельно, поэтому нажимаем Start from scratch.
Теперь нужно выбрать размер. Мы будем вводить параметры вручную, поэтому выбираем Custom и вводим значения ширины и высоты. Затем открывается библиотека изображений. Можно использовать что-то из выборки или ввести запрос в поисковую строку, чтобы система подобрала подходящие картинки. Также можно загрузить фото с компьютера, нажав Upload.
Переходим в редактор.
Начнем с логотипа. Чтобы загрузить его с компьютера, нажимаем на круглый значок с плюсом и выбираем Photo.
Затем выбираем расположение логотипа и корректируем размер.
Теперь добавим текст. Для этого нажимаем ту же круглую кнопку с плюсом и выбираем Text. Здесь интерфейс не такой простой и понятный, как в предыдущем сервисе, чтобы откорректировать каждый параметр (цвет, стиль шрифта, задний фон и т. д.), приходится заходить в разные вкладки на панели сбоку справа. Например, мне долго не удавалось понять, как сделать задний фон текста прозрачным. Оказалось, что фон текста редактируется во вкладке Shape. Зато набор инструментов этого редактора гораздо шире, здесь много интересных возможностей и функций.
Осталось добавить кнопку. Для этого снова нажимаем круглый значок с плюсом, выбираем Icon. Там много форм и размеров, выберем прямоугольник со скругленными краями. В этот раз кнопка будет не со стрелкой, а с призывом к действию. Пишем текст, накладываем на кнопку и выбираем цвет букв.
Сохраняем, нажав Download справа вверху. Когда один баннер готов, можно оставить макет и поменять размеры, перейдя во вкладку Resize на правой боковой панели и выбрав вариант Custom.
Как создать баннер, который заметят пользователи — советы экспертов
Как справиться с баннерной слепотой, что делают специалисты креативных агентств, чтобы пользователи заметили их рекламу, а также как создать заметный баннер, расскажем в этом материале.
Баннерная слепота — это способность пользователей на подсознательном уровне игнорировать рекламу на сайтах и в соцсетях. Она появилась с развитием интернета: люди стали потреблять больше информации онлайн, а веб-мастера — зарабатывать на этом, размещая все больше рекламных мест на сайтах. Так, игнорируя рекламу, пользователи ограждают себя от «информационного шума». Сейчас они стремятся быстрее найти данные, за которыми пришли на сайт, и получить при этом минимум ненужных сведений. К «ненужным» зачастую относится и информация из рекламы.
По данным исследования компании eMarketer, самые раздражающие форматы — видеореклама, которая автоматически запускается со звуком или без него. Примерно треть американских пользователей не любят статические баннеры, рекламирующие уже купленные товары, а еще треть — баннеры с рекламой товаров, которые пользователь просматривал, но не купил.
Зная о баннерной слепоте, дизайнеры и маркетологи считают вопрос «что нужно, чтобы пользователь кликнул на баннер?» второстепенным — сначала нужно добиться, чтобы он увидел объявление. Как это сделать, разберемся в этом материале.
Выделяйтесь — оформлением, цветом, текстом
Однотипных прямоугольных баннеров с текстом и ярким логотипом компании встречается много, и когда пользователи видят такую рекламу, они по умолчанию игнорируют ее как нечто неинформативное. Вот несколько примеров подобных баннеров.
Внимание пользователей привлекает нестандартный дизайн — например, использование геометрических фигур.
Eсли дополнить геометрию яркими цветами — не только традиционным красным, — то привлечь внимание пользователя будет легче. Главное — не перегрузить изображение насыщенной цветовой палитрой.
Выделиться можно не только используя яркие цвета, но и необычные изображения: чем нестандартнее для привычной рекламы они будут, тем вероятнее на них обратят внимание. Используя этот метод, помните, что креатив должен быть по смыслу связан с рекламируемым продуктом — иначе пустого скликивания не избежать.
Увидев баннер, пользователь решает: кликнуть на него или пролистать. Дополните яркие цвета и необычные креативы цепляющим текстом. Призыв должен быть понятным и конкретным: «Закажите аудит и узнайте, в чем ваша проблема», «Узнайте, почему ваша реклама не работает». Также в текст объявления можно добавить провокацию, как на примере ниже.
Пример яркого баннера с необычным изображением и провокационным текстом
Кристина Маринович digital директор СreativePeople
Есть несколько способов преодолеть баннерную слепоту. Главное, чтобы они не противоречили концепции кампании с баннерами и фирменному стилю бренда.
Не быть как все. Решение лежит на поверхности, но не всегда агентства так поступают. Например, баннер с лекарственными препаратами почти на 100% будет светлым, с размытым фоном и врачом и с лекарством на переднем плане.
Главное — отойти от стандартных канонов. Копните глубже и найдите одно преимущество, которое сможете обыграть. Так, взгляд пользователя может зацепиться за нетипичный цвет баннера или игру с типографикой — например, если на баннере будет написано всего одно слово.
Экспериментировать с анимацией. Движущиеся элементы считываются периферийным зрением лучше, чем статичные. Сейчас в тренде анимация и 3D. Все современные баннеры поддерживают HTML-анимацию, которая не требует больших ресурсов и отображается в 100% качестве, в отличие от GIF-анимации.
Недавно мы сделали новый формат рекламных баннеров с помощью Swirl от Google. В баннере есть 3D-модели, которые взаимодействуют с курсором. Пользователь может приблизить трехмерное изображение товара, прокрутить и переместить его. По результатам Google, новые баннеры в три раза увеличили уровень вовлеченности.
Главное правило в анимации — не увлекаться. Рекомендую сделать анимацию кнопки, заголовка и ключевого визуального образа — этого будет достаточно.
Больше воздуха. Часто в маленьком баннере размещено много контента, который сменяется через каждые три—четыре секунды. Пользователь не успевает запомнить посыл и просто уходит. Поработайте с копирайтером, чтобы емко подать текст. И не перегружайте баннер иконками и фотографиями, чтобы избежать перенасыщения.
Ярче не значит лучше. Даже пастельные и серые цвета способны обратить на себя внимание. От ярких образов быстро устают глаза. Иногда и вовсе не хочется смотреть на баннеры из-за броской цветовой гаммы. Советую выбрать палитру, которая дополнит основные элементы объявления — кнопку, фото товара, логотип, — и создаст контраст.
Качество материалов. Изображения на баннере должны быть качественными. Проследите за краями после обрезки фото и цветами, которые изменили. Например, часто в баннере оранжевый становится слишком ярким по отношению к остальным элементам.
Не используйте изображения из фотостоков, открывающиеся по запросу на первой странице. Все они уже были на сотнях баннеров, и потому приелись и не работают. Вспомните пример с Гарольдом, который скрывает боль.
Анна Гембель дизайнер TRIKO
В разработке и размещении баннеров наша команда использует следующие методы:
Подбор контента. Баннер, как и любая реклама, решает задачу пользователя, а не рекламодателя. Важно, чтобы баннер был релевантен пользовательским потребностям: его контент должен содержать нужные ключи, приятные для целевой аудитории эффекты (анимация, 3D, заметные цвета и другие). Также важно, чтобы дизайн не «выпадал» из общего оформления страницы сайта. Впрочем, баннер может сильно выделяться, но если так задумано, то такое визуальное решение должны быть рассчитано и оправданно.
A/Б-тестирование. Размещаем для показа нескольким группам пользователей два разных баннера, а затем анализируем, какой из них сработал лучше и почему.
Ротация. Рано или поздно баннер, показывающийся на одном месте, станет привычным — глаз пользователя натренируется его не замечать. Поэтому периодически мы меняем места размещения.
Оптимизация форматов. Нужно планировать размещение баннеров с учетом постоянного роста мобильных посетителей.
Лаконичность и простота оформления дают лучший результат, по сравнению с визуалом, перегруженным модными элементами дизайна. Среди «фишек», помогающих создать привлекающий внимание пользователя дизайн, отметим:
учет пропорций и размеров: слишком большой баннер может быть так же незаметен пользователю, как и слишком маленький;
гармоничная цветовая гамма без эффекта «кровь из глаз».
В любом случае разработка визуала должна базироваться на вкусах аудитории и предполагать несколько вариантов для тестирования, ведь в анализе ЦА можно допустить ошибки, и только тестирование in vivo позволит выбрать оптимальный вариант.
Персонализируйте объявления
Взглянув на баннер, пользователь должен сразу понять, какую проблему он сможет решить с помощью рекламируемого продукта. Чтобы добиться этого, рекламодатель должен хорошо знать свою аудиторию: ее интересы, боли, потребности, ожидания от конкретного продукта, способы поиска товара и алгоритм выбора — только так можно сделать привлекательное и адресное предложение.
Персонализировать объявления помогает динамический ремаркетинг. Пользователям показываются креативы с товарами, которые они просматривали, и с похожими продуктами. Они формируются автоматически на основе известных о пользователе сведениях.
В начале марта я выбирала себе кроссовки на сайте бренда ECCO. Мне приглянулась одна пара: я посмотрела все фото кроссовок, почитала отзывы, изучила характеристики и рекомендации по эксплуатации — в общем, провела на странице много времени. Я редко покупаю товары непервой необходимости сразу — беру паузу «на подумать». На следующий день меня начала «догонять» реклама кроссовок, которые я смотрела. Динамический ремаркетинг в деле. Реклама не дала забыть, что мне понравились кроссовки, и помогла убедиться, что я хочу именно их. В итоге через три дня показа объявлений я сделала заказ.
Не обязательно быть интернет-магазином, чтобы персонализировать рекламу. Сегментировать аудиторию по потребностям и делать разным группам ЦА адресные предложения, можно в объявлениях любого формата. Например, в этом кейсе агентство «Пиксель Плюс» сегментировало аудиторию и персонализировало предложения в поисковой рекламе.
Баннерная слепота — ответная реакция пользователей на любую ненужную информацию. И это хорошо — ваш баннер не будут скликивать случайные люди. Но если речь идет о потенциальном покупателе и формировании знания о бренде, реклама должна быть привлекательной для широкой аудитории. И тут в бой вступает креатив. Только не тот креатив, который про правильные кнопки и расположение текста на макете, а настоящий — про содержание, смыслы и крутой продакшн. Про идею, которая заворожит и заставит посмотреть рекламу до конца.
В этот Новый год производитель крабовых палочек Vici решил проблему подготовки праздничного застолья для тысяч домохозяек, когда запустил кулинарный Tinder для поиска рецептов с крабовыми палочками. CTR видеорекламы составил 0,39%, а VTR — 55%. Это на порядок выше стандартных показателей.
Дальше — дело техники: качественный таргетинг и грамотная медиастратегия с релевантной выборкой площадок для размещения помогут появляться рекламе на пути у «нужного» пользователя, который точно обратит на нее внимание. Плюс никто не отменяет специальные услуги у поставщиков трафика, которые размещают рекламу в видимой части экрана или красиво интегрируют ее в контент.
Фокусируйтесь на «своей» аудитории
Часто пользователи игнорируют рекламу, потому что она не отвечает их интересам. Избежать этого можно, размещая рекламу на сайтах близкой вашему бизнесу тематики. Например, в СМИ об интернет-рекламе можно продвигать курсы по контексту и таргету или специальные сервисы для маркетологов, на сайтах о здоровом образе жизни — оборудование для домашних тренировок и натуральные продукты питания.
В Яндекс.Директе за показ объявлений на подходящих сайтах РСЯ отвечают ключевые фразы — они определяют и тематику площадки, и интересы пользователя. В Google Ads используем особые аудитории с таргетингом на ключевые слова, URL и мобильные приложения — и так же, как в Директе, охватываем и релевантные площадки, и заинтересованных пользователей.
Несколько недель назад я скачала мобильное приложение InShot, чтобы монтировать видео для соцсетей, и мне начал показываться баннер их конкурентов — SUPA. Здесь вряд ли обошлось без особых аудиторий Google Ads.
Реклама должна показываться лишь тем, кому она может быть интересна. Чтобы охватить только целевую аудиторию, нужно не просто узнать о ней всё, но и выбрать правильные параметры при запуске кампаний в рекламных системах. Небольшая подборка материалов, которая поможет вам в этом:
Павел Козловский руководитель digital-направления Wonday Consulting
Против баннерной слепоты, по сути, есть только одно «лекарство» — правильный таргетинг. Он работает во всех случаях, кроме вывода на рынок нового продукта, у которого мало релевантных конкурентов. В этом случае реклама может быть направлена на все возможные сегменты, так как неизвестно, кому товар продается лучше, а для качественной контекстной рекламы не хватает брендовых запросов и целевых ключевых фраз в поиске.
Сейчас бренды используют баннеры на одном из трех этапов воронки.
Построение знания о бренде. Это вариант, о котором мы говорили в начале. Здесь нужно таргетироваться на крупные сегменты или на всех сразу.
Рассмотрение к покупке. В игру вступают programmatic-реклама с выбранной аудиторией, look-alike по ней и соцсети. Например, офлайн-бизнес может настроить гиперлокальный таргетинг на посетителей определенного ТЦ или жителей соседних домов. Тогда баннеры могут называть ТЦ, станции метро, улицы на понятном для местных жителей языке.
На этом этапе в креативах лучше работают максимально персонализированные предложения: пользователи уже знают ваш бренд и сегмент, вы можете закрыть готовую потребность группы клиентов. Добавьте в креативы товары по лучшей цене, укажите размер скидки и с помощью тестов оцените, что конвертируется лучше.
Чтобы охват был максимально качественным, запустите простые графические ролики длиной 6–10 секунд. У них хороший показатель досмотра и высокие показатели по качеству запоминания содержания.
Для точной оценки результата советую считать не только CPM, CPC, CPV, CPU, но и post-click, а также промерять кампании с помощью DoubleClick Campaign Manager (DCM) или пикселя Weborama.
Покупка. На этом этапе запускайте динамический ретаргетинг. Чем, если не просмотренными ранее модными кроссовками, можно привлечь внимание к баннеру в эпоху цифровой слепоты?
Как сделать рекламу заметнее
Нет универсального рецепта преодоления баннерной слепоты, которые будут работать в 10 случаях из 10. Реализуйте свои идеи, пробуйте новое и создавайте баннеры, соблюдая несколько простых рекомендаций:
Выделяйтесь. Создавайте нетипичные для вашей отрасли баннеры, выбирайте нестандартные цвета и изображения, добавляйте сильные призывы.
Готовьте качественные креативы. У изображений должно быть хорошее разрешение, края должны быть ровно обрезаны, а тексты — читаемыми.
Пробуйте разные форматы: анимацию, 3D и видеорекламу.
Запускайте полезную рекламу — она должна помогать пользователю решить проблему. Для этого изучите свою аудиторию: ее интересы, боли, ожидания от продукта, алгоритм выбора и способы поиска товара.
Грамотно настройте таргетинг. При разработке баннеров, учитывайте этап воронки, на котором находится пользователь, а при выборе настроек в рекламной системе — характеристики целевой аудитории.
Персонализируйте предложения. Создавайте уникальные объявления на основе истории поисковых запросов и портрета целевой аудитории: ее интересов, демографических признаков и геоданных.
Тестируйте. Это единственный способ узнать, что сработает лучше.
Желаем, чтобы ваша реклама была заметной и эффективной!
Как сделать баннер для сайта самостоятельно
Основная задача баннеров — обеспечить приток аудитории. Заранее позаботьтесь о том, чтобы точно измерять и анализировать эффективность рекламы с помощью нашего инструмента:
Виды баннеров
Бывает несколько основных видов баннеров:
Все эти разновидности размещаются в стандартных контейнерах определённых размеров. Их насчитывается около двух десятков и все мы приводить не будем. Для примера: 160×600, 240×400, 240×600.
Также существует множество более сложных баннеров, таких как HTML MPU — несколько HTML-креативов, Expandable — растягивающийся, Rich-media — баннер, содержащий сразу несколько медиа-форматов, и другие. Их создают и размещают профессионалы. Такие баннеры, в основном, разрабатываются отдельно для каждого проекта, в отличие от перечисленных выше, пригодных для использования в массовых рекламных сетях, также называемых баннерными.
Размещение баннеров
Есть несколько способов разместить баннер в интернете. Раньше это была процедура сугубо ручная — на сайте создавался блок, в котором администратором размещался тот или иной креатив.
Сейчас вряд ли понадобится ручное размещение — в интернете работают баннерные сети. Блок на сайте не заполняется креативом силами модераторов. Это просто пустое поле, которое принимает контент от третьей стороны — рекламной платформы. Уже там у рекламодателей есть кабинеты, с помощью которых они загружают свои баннеры.
Далее баннер адресуется не какому-то заранее определённому сайту. Работает RTB-алгоритм. Real Time Bidding — технология, с помощью которой осуществляется целевой показ рекламных объявлений. В зависимости от того, к какому потребительскому сегменту принадлежит посетитель страницы, которому будет продемонстрирован баннер, аукцион подбирает для него наиболее подходящее объявление согласно настройкам рекламодателя. Последний в рабочем кабинете определяет, какие именно сегменты пользователей будут видеть его баннеры, а площадки управления данными подбирают ту аудиторию, которая по результатам анализа подходит под описание. В результате, происходит моментальный подбор баннера — только в последние доли секунды загрузки страницы становится понятно, какой именно баннер система отобразит в блоке.
Сквозная аналитика
Площадки
В частных случаях вам может понадобиться только статичное размещение на одном или нескольких сайтах. Необходимо создать баннер подходящего формата — графический, слайдер или HTML, чтобы разместить его в блоке на сайте. В случае, если вы владелец ресурса, то вы сами решаете, какое место займёт баннер, и загружаете его в каталог. Либо вы договариваетесь с владельцем сайта о месте размещения, передавая ему исходники баннера.
Баннерные сети
Размещение баннеров в интернете обеспечивает перечень баннерных сетей, у каждой из которых свои требования к креативам.
Например, Rotaban.ru всё ещё принимает flash-баннеры, но запрещает HTML.
Более серьёзный игрок Adfox.ru предлагает широкий выбор. Рекламодатель вправе разместить графические и HTML-баннеры. В первом случае допустимы форматы png, gif, jpg, svg и файлы весом не более 300 Кб.
Сеть GinAds.com работает с разнообразными форматами, например: Топлайн, Слайдер, Видео, Боттомлайн, Fullscreen, HTML-баннеры.
Яндекс.Директ
Яндекс внедрил целый набор баннерных размещений для рекламодателей.
Google Ads
Более скромные, но вполне реальные возможности размещения баннеров предоставляет также Google. В рекламном кабинете можно обнаружить, что при создании кампании в КМС — контекстно-медийной сети — вам доступна загрузка баннеров. Тем не менее, в то время как графические объявления с анимацией и без разрешаются любому рекламодателю, HTML5 будет доступен только по запросу и при соблюдении требований:
Вместе с тем, летом 2018 Google по примеру других игроков создал формат адаптивных медийных объявлений. Эти объявления подстраиваются под пользователя с помощью динамического контента и могут быть созданы на основе фида.
Как сделать баннер для сайта и сетей
Начнём с того, что вам может понадобиться с наибольшей вероятностью.
Яндекс.Директ
Создаётся в меню Текстово-Графических объявлений. Загрузка креатива возможна с устройства, а также предусмотрено создание баннера с помощью конструктора.
Откроется редактор. В левой колонке пользователь отмечает необходимые размеры, а в правой изменяет дизайн и элементы баннера. В частности, можно загрузить изображение, изменить цвета заливки и рамки, цвет текста и многое другое.
Предусматривает те же шаги с той разницей, что в медийной кампании используются только графические объявления. В остальном, процесс загрузки и создания баннеров идентичен.
Для HTML-баннера необходимо подготовить zip-архив с кодом и креативами.
Необходимо пройти модерацию сайта, предварительно отправив документы: лицензии и сертификаты на продажу размещаемой и рекламируемой продукции.
Далее — загрузить фид — прайс-лист, составленный по шаблону.
Креатив создаётся предварительно пользователем. Требования:
Google Ads
Можно загрузить до 15 изображений и до 5 логотипов. Требования:
Сами объявления состоят из настраиваемых элементов:
Баннер с нуля
Специалисты рекомендуют различный софт, который позволяет делать баннеры самостоятельно — в том числе, HTML-баннеры, в которых код генерируется самой программой.
Так, среди популярного программного обеспечения выделяют:
Если у вас есть навыки вёрстки, то лучше самостоятельно прописать компоненты на CSS, javascript и HTML.
А еще, размещая баннеры с переходом на ваш сайт на сторонних ресурсах, установите скрипт коллтрекинга – он помогает отслеживать эффективность.