Как создать баннер для сайта: онлайн и бесплатно

How to create a banner for a website

Баннер – картинка с рекламным контентом для размещения на web-страницах с целью привлечения внимания клиентов, их информирования о товарах, услугах или формирования имиджа бренда в интернете. Создать баннер для сайта или landing page может не только дизайнер, это под силу любому, даже если вы не имеете навыков работы с графическими редакторами. Рассмотрим, как это сделать бесплатно – стоимость проекта будет нулевой.

Требования к изображениям

Google и Яндекс предъявляют разные требования к изображениям, где содержится реклама, в том числе персональная. На личном или корпоративном сайте соблюсти рекомендации порой сложно.

Google Ads для контекстной рекламы приводит десятки расширений файлов графических объявлений от минимальных 88 × 31 до 300 × 1050 или 1024 × 768 пикселей по большей стороне. Размер адаптивных объявлений – 600 × 314 px.

Баннерные изображения для Яндекс.Директ должны быть в формате HTML5, PNG, GIF, JPG, SWF и даже FLV со стандартными размерами от 260 × 71 до 900 × 900 или 1456 × 180 пикселей. Максимальный объём – 150 КБ для маленьких или 300 КБ для больших картинок, а для 336 × 280 px – до 512 КБ.

Использовать flash-анимацию не рекомендуется, её поддержка прекращена.

Для соцсетей требования будут иными, причём каждая предъявляет собственный список форматов, размеров для различных баннеров.

Роль рекламного баннера в продвижении сайта

Рекламные баннеры в контекстно-медийной сети Google могут отображаться на ~2 000 000 веб-сайтов и мобильных приложений, аудитория которых – миллионы человек. Они решают ряд проблем рекламодателей:

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

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

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

  • Выделяется на общем фоне, но не вызывает отторжения, подозрений.
  • Соответствует техническим требованиям площадки, для которой его делают: размеры, объём, формат файла.
  • Не содержит запрещённого законодательством и нежелательного контента.
  • Короткий, хорошо различимый цепляющий текст, желательно с призывом к целевому действию.
  • ~2/3% площади занимает нейтральный фон.
  • Отсутствие мелких, едва различимых объектов.
  • Гармония – равные расстояния от краёв к объектам, выравнивание текста.
  • Брендирование – создайте личный стиль, добавьте на баннер логотип компании.

При размещении минимального количества элементов дизайна всё внимание пользователь посвящает тексту, его содержимому, а оно должно быть ассоциативным. Также надписи можно придать эффекта важности, срочности: «Последний день», «Успейте», «Заканчивается», «Сейчас».

Инструкция

Рассмотрим, как сделать рекламный баннер, соответствующий трендам 2023 года, без помощи продвинутых инструментов для дизайна вроде Figma или Canva. Для его создания используем простые инструменты: нейросеть Midjourney и графический редактор Adobe Illustrator (скачать можно с официального сайта).

Первую применяем для генерирования изображений мужчин разного возраста: условно 20 – junior, 30 – middle и 40 лет – senior при помощи бота в Discord (доступен бесплатно), правда, для работы с ним в приложении нужна регистрация. Зарегистрироваться в сервисе можно с компьютера или мобильных устройств на платформах iOS или Android.

  • Авторизуемся в программе Discord, после перейдите на сайт Midjourney, на нём внизу справа нужно кликнуть «Sign in».
Midjorney,
  • Знакомимся с политикой конфиденциальности, подтверждаем авторизацию.
подтверждаем авторизацию
  • Посещаем канал Midjourney через интерфейс Discord.
Посещаем канал Midjorney
  • Настройка завершена.

Вверху справа задаём запрос для поиска сгенерированных другими пользователями изображений. Мы ввели следующие фразы: 20 years boy, затем 30 и 40 years old man

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

Выберите подходящие картинки

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

Можно запускать Adobe Illustrator.

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

  • Выбираем «Монтажные области»«Подогнать по границам иллюстрации». Если кнопки на панели справа не обнаружите, ищите соответствующую команду в пункте главного меню «Окно».
Выбираем «Монтажные области»
  • Вызываем трассировку изображений через пункт меню «Окно» или панель правее, выбираем стиль «Фотография высокой чёткости».
Выбираем «Монтажные области»
  • Можете увеличить количество поддерживаемых цветов для сохранения деталей, если нужно уменьшить размер изображения – снизьте число цветов – произойдёт сглаживание контуров.
  • Кликаем по картинке, в главном меню нажимаем «Объект»«Разобрать»«ОК».
произойдёт сглаживание контуров
  • Удаляем фон: подведите к нему курсор, кликните левой клавишей, нажмите Delete.
Удаляем фон
  • Вы можете изменять размеры картинки, включая увеличение в разы, без ущерба для качества. Для этого зажмите Shift и растягивайте холст при помощи мыши.
  • Сохраняем изображение комбинацией Ctrl + S и выбираем подходящий формат, рекомендуем PNG.
  • Аналогично обработайте остальные картинки, предварительно можете подретушировать их в стороннем приложении, если умеете работать в таких, чтобы сделать более привлекательными для целевой аудитории. Только слишком усердствовать не стоит.
Если вам удобно работать в других приложениях для редактирования векторной графики, пожалуйста. Illustrator имеет понятный настраиваемый русскоязычный интерфейс, все нужные нам операции выполняются в несколько кликов, особенно удаление фона. В программе есть возможность многократного масштабирования изображений с сохранением качества.

Осталось добавить новый фон, текст, подобрать шрифт, при необходимости разместить элементы стилизации: эффекты, эмодзи, иконки. 

Итоговый результат

Итоговый результат

При этом сет баннеров можно сохранить как шаблон, если планируете создавать подобные логотипы для web-сайтов или соцсетей в будущем. Можете прибегнуть к помощи GIF-анимации. Она работает эффективнее статичного изображения, но не переусердствуйте с длительностью и насыщенностью кадров информацией. Лучше всего себя показали ролики длительностью до 15 секунд, содержащие один призыв и логотип бренда.

Видео

Быстрый Старт: Сет Векторных Баннеров для Сайта за 10 Минут!

Как создать баннер для сайта: онлайн и бесплатно

Мы будем рады услышать ваши мысли

      ОСТАВИТЬ ОТВЕТ

      Реклама. Информация о рекламодателе по ссылкам в статье.
      eddu.pro
      Logo
      Зарегистрировать новый аккаунт