Как сделать красивый баннер для рекламной сети Яндекс (РСЯ)

Всем привет! В этой статье я расскажу вам, как сделать эффективный, красивый рекламный баннер для рекламной сети Яндекс (РСЯ) в фотошопе. Вы узнаете о самых важных составляющих баннера и о том, на что следует обращать внимание клиента, чтобы получился отличный баннер.

О требованиях рекламной сети к баннерам вы можете прочитать в статье Требования рекламной сети Яндекс (РСЯ) к баннерам.

Что должен содержать эффективный баннер:

  • Текст. Текст не должен быть длинным. Часто клиенты просят разместить огромное количество информации в баннере и потом удивляются, почему он не работает. Пользователь в интернете — «ленивый» и не будет тратить время, вчитываться и перебирать весь список преимуществ клиента. Так что просите клиента предоставить вам один текст в двух вариантах: один – короткий, для маленьких баннеров, и второй – длинный, для больших баннеров.
  • Изображение. Важно понимать, что баннер должен быть изначально привлекательным. Содержание – дело второе. Важно использовать изображения, вызывающие определенные эмоции, связанные с деятельностью клиента.
  • Кнопка. Призыв к действию очень важен. Кнопка должна выделяться среди всех элементов баннера.

Пример готового баннера

Стоит понимать, что не всегда кнопка вообще должна присутствовать на баннере для РСЯ. Выясните, что необходимо клиенту. Помните, что есть различные виды рекламы. Основные:

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

Пример дизайна баннера для РСЯ

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

  1. Для того, чтобы создать красивый баннер РСЯ, который не будет противоречить содержимому сайт, мы заходим на сайт и обращаем внимание на общий стиль сайта. Узнаем, какие шрифты используются на сайте клиента и используем их в баннерах (как установить новые шрифты в фотошоп). Для определения шрифта, необходимо установить расширение в браузер или определить шрифт через CSS в интернет инспекторе. Так же обязательно надо попросить клиента, чтобы он прислал вам ключевые изображения (логотип обязательно) в хорошем качестве. Если вам необходимо купить шрифты со стоков, то вот статья по тому, как можно купить фото со стоков недорого.
  2. Теперь начинаем делать рекламный баннер в фотошопе. На сайте клиента использованы темно желтый, синий и темно-синий. Данный цвета на их сайте отлично передают дух ответственности и фундаментального подхода к своей работе. Мы сделаем баннер в аналогичных цветах. Установите себе расширение для браузера, чтобы пипеткой определять цвета на сайте или определяйте цвета через интернет инспектор в CSS:
  3. Создаем новый документ размером 300х250 и устанавливаем разрешение 72 пикселя на дюйм, цветовой режим RGB:
  4. Нам клиент помимо логотипа предоставил также фото основателей компании:
  5. По нашей задумке эти люди будут расположены на темно-синем фоне, и рядом с ними будет расположен логотип и текст. В самом низу будет располагаться кнопка.
  6. Так как два человека находятся на фоне города, то наша задача удалить этот фон. Про то, как удалить фон на фотографии можно почитать тут.
  7. Теперь создаем новый слой с фоном темно-синего цвета. Для этого берем инструмент “Прямоугольник” горячая клавиша U:
  8. После того, как мы его нарисовали, нам нужно изменить его цвет на темно-синий #111e2d. Для этого два раза кликаем по миниатюре слоя и вставляем код цвета в специальное поле: 
  9. После того, как мы создали основу для наполнения баннера, нам нужно разместить логотип, текст и заранее подготовленных людей. Перетаскиваем из папки, в которой у нас лежит логотип, и бросаем его примерно в верхний левый угол. Пока не устанавливаем его в точное место, так как при добавлении текста и всех остальных элементов, нам придется очень много их двигать чтобы найти идеальную композицию:
  10. Добавляем персонажей:
  11. Добавляем текст и примерно выравниваем его с логотипом:
  12. Вот у нас уже вырисовывается баннер с неплохой композицией. Персонажи у нас обрезаны по пояс и это добавляет трудностей, так как мы не можем их увеличить полностью из-за того, что они перекроют большую часть баннера и будут отвлекать от текста, баннер будет перегружен. Надо это как-то исправлять. Мы решили просто сделать плашку поверх персонажей, которая будет немного светлее фона, и тем самым она будет создавать иллюзию объема. Вот так это получилось:
  13. Так как правила Яндекса не позволяют использовать баннеры без обводки, мы ее должны сделать. Для этого берем инструмент “прямоугольник” (горячая клавиша U) и отключаем его заливку. Далее включаем обводку. Обводка не должна сливаться с элементами рекламного баннера, и мы ее сделали синего цвета, светлее всех элементов баннера:
  14. Вот так она выглядит на баннере:
  15. Теперь рисуем кнопку. Для нее мы выбрали акцидентный цвет. Так как на сайте заказчика сделаны кнопки не объемные, то и мы не будем изобретать велосипед. Берем инструмент “прямоугольник” (горячая клавиша U) и рисуем в нижней части баннера. Не добавляем тени и другие эффекты. Кнопка готова:
  16. Осталось добавить текст:
  17. Напоследок мы решили нижнюю часть отделить от верхней. Для этого нам просто нужно добавить обводку нижнему прямоугольнику:
  18. Для этого зажимаем клавишу Ctrl и кликаем по нему, чтобы найти слой. После переходим в свойства и активируем обводку. Цвет обводки берем с цвета логотипа:
Кстати, почитайте эту статью тоже:   Как сделать gif - баннер

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