Как сделать рекламный баннер самостоятельно — пошаговое руководство

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

Рекламный баннер привлекает внимание аудитории и быстрее текстового объявления доносит суть предложения. Картинка не рассказывает, а показывает: пользователь видит товар, хочет узнать о нем больше и кликает по рекламе. Даже если на изображении нет фотографии товара, оно визуально передает настроение бренда и транслирует конкретный посыл. Текст играет вспомогательную роль — например, объясняет, о чем это объявление или обращает внимание на акцию или скидку.

Подготовка к созданию рекламного баннера

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

Сначала — подготовка:

1. Определите рекламный канал и изучите технические требования:

   • выберите платформы, где будете размещать баннер — например, Яндекс Директ, VK Рекламу или Telegram;

   • узнайте требования площадки к объему, формату и размеру изображения, чтобы баннер корректно отображался на платформе: например, требования Яндекс Директа для кампаний «Текстово-графические объявления» и «Реклама мобильных приложений» можно найти в справке Яндекса, ВКонтакте — в разделе «Помощь».

   Читайте по теме:

   • Форматы объявлений ВКонтакте — примеры и требования к ним

   • Форматы объявлений в Рекламной Сети Яндекса

2. Изучите правила контента:

   • стандартные правила любой площадки — чтобы баннер был качественным и не похожим на спам, не рекламировал запрещенные товары и услуги (алкоголь, табак и т. д.) и был этичным, то есть не оскорблял конкурентов или отдельные группы людей — например, по национальному признаку;

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

3. Сформулируйте цель и определите ключевые элементы баннера:

   • четко определите, что, кому и зачем вы рекламируете;

   • сформулируйте емкий, привлекательный и крупный заголовок, используйте для генерации идей нейросети;

   • разработайте подзаголовок в одну-две строчки;

   • подберите один-два дополнительных элемента — например, логотип и картинку;

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

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

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

Основы композиции: как расположить элементы, чтобы баннер работал

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

Для этого нужно выполнить три шага.

Шаг 1: подберите цвета и шрифты

А именно:

• используйте фирменные цвета, логотип и шрифт, если они есть, чтобы сохранить стиль компании;

• если фирменных элементов нет, подберите контрастные цвета с помощью цветового круга — они расположены друг напротив друга;

• выберите читаемые шрифты без засечек, которые проще воспринимаются;

• настройте межстрочный интервал так, чтобы строки не сливались и не создавали визуального разрыва;

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

Шаг 2: соберите композицию

Продумайте элементы, которые хотите видеть на баннере. Предположим, это короткий текстовый слоган с УТП, фотография товара и ваш логотип. Соберите их вместе — можно просто на белом фоне, поменяйте местами, покрутите.

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

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

Для управления его вниманием можно:

• написать самое важное крупным шрифтом, а второстепенное — шрифтом поменьше;

• выделить главное цветом или цветовой плашкой;

• использовать точечные детали: звездочки, эмодзи, маленькие иконки.

Шаг 3: оцените готовый баннер

Чтобы предугадать, как воспримет баннер аудитория:

1. Посмотрите на баннер глазами человека, который видит его впервые: понятен ли посыл с первого взгляда?

2. Проверьте, нет ли перегруженности элементами, достаточно ли «воздуха» на баннере.

Посмотреть на изображение глазами клиента и узнать, что в оформлении баннера нужно улучшить, клиенты eLama могут бесплатно на маркетплейсе инструментов с помощью сервиса AICAP Predict.

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

Правило «20% текста» и визуальная иерархия

Требования рекламных площадок к изображениям помогают сделать рекламу более эффективной и не раздражать пользователей. Например, во ВКонтакте действует правило, согласно которому текст не должен занимать более 20% от общей площади баннера. Это помогает сделать рекламу привлекательнее и снижает риск того, что объявление будет воспринято как спам. Проверить изображение на соблюдение этого правила можно, например, с помощью сервиса Робби.

Также важно грамотно выстраивать визуальную иерархию элементов на баннере. Она помогает:

• быстро привлечь внимание к главным сообщениям;

• облегчить восприятие информации;

• сделать баннер более эстетичным и профессиональным.

Например, в удачном рекламном баннере:

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

• кнопку «Купить» выделяют контрастным цветом;

• а мелкие детали располагают так, чтобы они не отвлекали от главного, но были заметны при более внимательном рассмотрении.

Всё это помогает управлять вниманием аудитории и повышать CTR — кликабельность баннеров.

Использование нейросетей для генерации идей и фонов

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

Например, в сервисе отложенного постинга SMMplanner, бесплатного для клиентов eLama на маркетплейсе, доступны ИИ-помощники, которые помогут найти нестандартные идеи, улучшить качество изображения или подобрать цепляющий заголовок для баннера.

Инструменты для создания баннеров: что доступно в России

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

• SUPA — целая библиотека идей для баннеров под любые задачи. Удобный редактор с простым интерфейсом, в котором можно указать площадку, выбрать шаблон с современным дизайном и кастомизировать его для задачи. Кроме баннеров, здесь можно создать изображения для соцсетей, видеокреативы, лендинги и другой визуал. Всё это бесплатно для клиентов eLama: инструмент доступен на бесплатном маркетплейсе eLama.

• Bannero — конструктор графических и HTML5 баннеров для Яндекс Директа, VK и не только. Креативы, созданные тут, учитывают требования рекламных систем и законодательства: получаются в нужных размерах и необходимыми пометками. Здесь легко создавать баннеры по шаблонам или без, массово вносить правки в несколько баннеров сразу, например, для А/Б-тестов, а также скачивать. Клиенты eLama также использую этот конструктор бесплатно на маркетплесе.

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

• «Холст» — редактор, доступный после регистрации в SMMplanner, в котором также можно подобрать шаблон, фон, картинки, шрифт и заменить любые элементы в изображении онлайн. Затем готовое изображение можно выгрузить в нескольких ресайзах, в зависимости от задачи, для которой оно будет использовано. SMMplanner также бесплатно доступен клиентам eLama на маркетплейсе инструментов.

• Figma — более продвинутый редактор. В бесплатной версии можно создать свой проект, посмотреть два-три урока на YouTube и сделать баннер почти как у дизайнера. Этот вариант сложнее конструктора с готовыми шаблонами и придется пройти небольшое обучение, зато добавит +1 навык в копилку всего, что вы умеете делать сами.

Как создать баннер в SUPA

Клиенты eLama могут использовать SUPA бесплатно в разделе «Маркетплейс инструментов» личного кабинета и экономить 11 880 руб. в год, потому что eLama оплачивает сервис за вас. Подключить Supa в личном кабинете на маркетплейсе eLama →

Авторизуйтесь через eLama и согласитесь на передачу персональных данных — это нужно, чтобы инструмент предоставил вам бесплатный доступ.

Вы попали в рабочее пространство SUPA. Нажмите «Создать креатив», и окажетесь в библиотеке шаблонов.

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

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

Интерфейс редактора прост и интуитивно понятен. Здесь можно:

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

• отредактировать настройки анимации или отключить ее;

• заменить текст, его шрифт, стиль и размер и другие детали;

• добавить в шаблон графику и диаграммы;

• заменить, повернуть или сделать прозрачнее любой элемент.

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

Если вам нужны похожие баннеры для A/B-тестирования, создайте копию и измените в ней некоторые детали.

SUPA автоматически сохраняет все изменения, а готовый креатив вы найдете на вкладке «Мои креативы».

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

Адаптация под мобайл: как не испортить баннер на смартфоне

Адаптировать баннеры под мобильную версию экрана важно не только из-за эстетики. Если не учесть ограничения мобильных экранов и некорректно расположить элементы, баннер может вообще не сработать — например, если его заголовок обрежется при просмотре на смартфонах.

Тогда каким бы привлекательным ни было предложение, оно не принесет отклика, так как потенциальные клиенты его не прочитают.

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

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

Типичные ошибки, из-за которых баннеры не проходят модерацию

Чаще всего баннеры не проходят модерацию из-за этих ошибок:

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

2. Несоответствие техническим требованиям площадки:

   • неправильные размеры и качество изображения;

   • неподходящие форматы файлов;

   • нарушение требований к ключевым элементам.

3. Проблемы с текстом и оформлением:

   • текст занимает более более 20% от объема изображения, если вы размещаете баннер во ВКонтакте;

   • трудночитаемый шрифт;

   • перегруженность макета деталями;

   • некорректное отображение текста.

4. Проблемы с содержанием и предложениями:

   • ложная информация;

   • нереалистичные обещания;

   • реклама запрещенных товаров и услуг;

   • отсутствие необходимых дисклеймеров.

5. Ошибки в оформлении ссылок и кнопок:

   • неработающие ссылки;

   • плохо заметные или неудобные кнопки призыва к действию.

Чек-лист для проверки готового баннера перед запуском

Перед запуском баннерной рекламы проверьте:

1. Технические требования: размеры, формат и качество изображения должны соответствовать правилам площадки. Если запускаете рекламу в Директе, проверьте, настроены ли смарт-центры — самые важные области баннера, которые нельзя обрезать.

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

3. Текст и оформление:

   • убедитесь, что текст не превышает 20% площади баннера, если есть такое требование, а макет не перегружен деталями;

   • проверьте читаемость шрифта и отступы между строками.

4. Визуальная иерархия и композиция:

   • проверьте, выделены ли ключевые элементы, считываются ли они сразу;

   • оцените баланс между текстом и визуальными элементами.

5. Содержание и посыл:

   • убедитесь в понятности посыла и отсутствии ложной информации;

   • проверьте наличие необходимых дисклеймеров.

6. Адаптируйте изображение под разные устройства и ориентации экрана.

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

Кажется, ваш баннер готов! Удачного запуска!