Как сделать рекламный лед баннер

Добавил пользователь Валентин П.
Обновлено: 04.10.2024

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

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

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

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

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

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

Как создать анимированные баннеры, если вы не дизайнер

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

Что такое Google Web Designer

Google Web Designer – это бесплатное приложение для создания объявлений и других видов онлайн-контента в формате HTML5. В нем существует как визуальный редактор, так и редактор кода. В визуальном редакторе можно создавать изображения с помощью инструментов рисования, добавлять текст и трехмерные объекты, а также анимировать элементы и события на временной шкале. В редакторе кода можно создавать файлы CSS, JavaScript и XML.

Google Web Designer будет полезен web-дизайнерам и маркетологам, которые хотят попробовать себя в сборке баннеров.

Я расскажу и покажу, как создавать баннеры формата HTML5 для загрузки в Google Ads и Yandex Direct. Для этого нам пригодится как визуальный редактор, так и редактор кода.

Как он выглядит

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

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


Выбираем платформу Google Ads или Внешнее объявление и задаем размер. Многие рекламодатели предпочитают заказывать креативы, которые подойдут и для Google Ads, и для Yandex Direct.

Какие разрешения мы можем использовать на обеих площадках:

160×600, 240×400, 300×250, 300×600, 320×50, 320×100, 336×280, 728×90, 970×250.

Вес каждого из них не должен быть более 150 КБ.


Режим анимации можем выбрать любой – в окне создания креатива есть кнопка, которая их переключает:

Быстрый режим анимации — для создания креативов покадрово (сцена за сценой).

Расширенный — для редактирования анимации каждого элемента в отдельности.


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


Посмотрим, как выглядит рабочая область Google Web Designer:

1. Панель инструментов. Тут находятся инструменты для создания и управления элементами в рабочей области. Здесь нам понадобятся инструменты выделения, пути перемещения, рука и масштаб. Здесь также можно создавать маску объекта, различные фигуры и кривые Безье. Есть пипетка и создание текста. Если понадобится, тут даже можно работать с 3D-объектами.

2. Панель настроек инструмента. Если выбрать какой-либо инструмент — в этой панели отобразятся все доступные действия с ним.

3. Временная шкала. На ней есть 2 режима управления анимацией – быстрая (покадрово) и расширенная (с каждым элементом на холсте). Именно с помощью этой панели мы будем делать анимацию.

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

5. Рабочие панели. Выбор цвета, форматирование текста, структурный редактор, в котором находятся слои, как в Adobe Photoshop. Также есть инспектор объявления — он показывает, все ли условия нами соблюдены и можно ли загрузить баннер на рекламную площадку. Есть и другие панели, но мы рассмотрим только те, с которыми будем работать при создании баннера.

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

7. Холст документа. На нём мы будем создавать наш баннер.

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

Создаем анимированный баннер с чистого листа

Выбираем изображения

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

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

Изображения можем поискать на фотостоках, таких как Shutterstock, Usplash, FreePik или Pngtree. Для баннера выбрали четыре формата: 240×400, 300×250, 300×600 и 336×280. Подготовили изображения нужных размеров в Adobe Photoshop.


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


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


У всех изображений прозрачный фон, они в формате PNG, за исключением фона. Только фон у нас непрозрачный, в формате JPEG.

Верстаем баннер для Google


Давайте теперь соберем наш первый баннер для Google Ads, формат 300х250.

Добавим все элементы, которые будут участвовать в этом баннере на холст.


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


Следующим идет изображение фруктов. Просто переносим, зажав мышкой, картинку на холст. Обращаем внимание на Инспектор — нам уже придется уменьшить все наши креативы. Не проблема — в сети достаточно бесплатных конвертеров. Для примера используем iLoveIMG.


Сейчас уже лучше. Поставим замочки на эти слои – они не будут участвовать в анимации.


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


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




Для большей реалистичности добавим немного завершающего движения с вращением в Ease-out. Пример можно увидеть на временной шкале ниже.


Пришло время для появления логотипа. Давайте сделаем его появление из ниоткуда. Центрируем лого по вертикали, изменим масштаб до 0.05 и заливку до 0, а в последнем ключевом кадре вернем показатели по умолчанию.




Сделаем так, чтобы кнопка мигала. Копируем через каждые 4 клетки ключевое действие и чередуем заливку и масштаб 0,9 и 0,9 и 1 и 1. В первом ключевом кадре заливку оставим 0. Так сделаем 7 раз. Итого у нас получается 14 ключевых кадров. В конце заставим ее полностью исчезнуть — масштаб и заливка будут равны 0.


С логотипом мы поступим иначе — заливка будет равна нулю, но масштаб выставим 4. Логотип будет будто наезжать на экран. А после этого заставим фрукты укатиться за кадр с динамикой Ease-in.


Зациклим нашу анимацию, чтобы она повторялась. Добавляем ключевые кадры до начала анимации каждого объекта и до последней секунды. Делаем это для того, чтобы объекты повторялись идентично друг другу. Не забудьте выставить заливку 0 у логотипа и призыва к действию для того, чтобы эти объекты оставались невидимыми. Затем задаем повтор анимации 2 раза. Общее время должно быть не более 30 секунд, а так как мы создали повтор, то в итоге наша анимация теперь составляет 11.5 х 2 = 23 секунды.



Верстаем баннер для Яндекса

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


Возвращаемся к предыдущему объявлению. Мы должны снять все замки, выделить все компоненты во временной шкале, скопировать и вставить в новый документ. Все элементы и анимация скопированы полностью.


Теперь переходим в режим кода.

И делаем следующее:


meta name="environment" content="gwd-genericad"

вставляем такой код:

где width и height — ширина и длина нашего баннера.

Так как у нашего баннера размеры 300х250, вставляем строчку:

meta name="ad.size" content="width=300,height=250"

Не забудьте поставить скобки <> перед началом строчки и после нее


Находим абзац с телом баннера body. Со следующей строки, после открытия тела кода, вводим:


Находим /gwd-genericad в теле кода и закрываем тег:


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

script

document.getElementById("click_area").href = yandexHTML5BannerApi.getClickURLNum(1);

/script

Также не забудьте о скобках в начале и конце тега, как на скриншоте:


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

Сохраняем изменения и публикуем баннер как в прошлом разделе. Баннер для Яндекс.Директа готов.

Верстка других форматов и модерация объявлений

Остальные 3 формата, 240×400, 300×600 и 336×280, мы можем создать используя уже готовый баннер 300×250. Эти советы помогут ускорить работу:

Создайте новое объявление нужного вам размера и откройте уже созданный вами баннер. Скопируем некоторые объекты в новый баннер для ускорения процесса.

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

Из временной шкалы предыдущего баннера скопируйте движущиеся объекты на новый. Нужные объекты можно выделить с помощью SHIFT и скопировать / вставить Ctrl+C / Ctrl + V. Они копируются вместе с анимацией.

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

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

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


Давайте добавим созданные нами объявления в кабинеты площадок. В Google Ads объявления одобрены.


В Яндекс.Директе объявления одобрены.


Как Google Web Designer упрощает рабочие задачи

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

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

— Можно проводить А/В тесты, анализировать поведение и реакцию нашей аудитории, обновлять баннеры так часто, насколько это требуется, чтобы увеличить показатели эффективности рекламы.

— Теперь, благодаря GWD, совсем не обязательно владеть JavaScript, CSS и HTML для того, чтобы создать баннер HTML5.

— Интерфейс интуитивно понятен. Например, если вы уже знакомы с интерфейсами Adobe Photoshop и Illustrator, то разобраться в интерфейсе GWD вам будет еще проще.

— Приложение бесплатное и постоянно обновляется. Дополнительную информацию об использовании GWD и его функциях можно найти в справке. Она доступна и на русском языке.

Рекламный баннер для сайта: как сделать самостоятельно

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

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

Что такое баннер и как он работает

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

Баннер – это графическое изображение с текстом или без него. Оно даёт представление посетителям сайта о компании или продукте, привлекает их внимание, предлагает совершить покупку. К тому же, по клику пользователь легко может перейти с рекламного блока на страницу ресурса, который его заинтересовал.

Стоит начать с простого: как сделать статистический баннер для сайта. Это вид креатива, в котором все детали неподвижны и отображаются одновременно. Анимированный же баннер будет выглядеть интереснее и привлечёт больше внимания посетителей ресурса, однако и делать его сложнее Такой Html5 баннер – это динамичное изображение с большим количеством возможностей.

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

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

Где взять идеи и какими программами воспользоваться? Что такое Html5 баннер? Как сделать дизайн самостоятельно? Обо всём этом поговорим далее, но сначала давайте разберёмся с азами визуальных искусств, а именно – что должен содержать баннер?

Дизайн баннера для сайта всегда включает в себя:

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

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

Классификация рекламных баннеров

Выделяют следующие виды баннеров для сайта:

Перечисленные выше виды интернет-баннеров имеют разные размеры. Большой популярностью пользуются web-баннеры 240 на 400 Html5. Но размеры большие и меньши также активно используются создателями рекламных блоков. Подбор размера зависит от вида сайта, пожеланий, задач, которые он должен решать.

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

  • pop-up, то есть открывающиеся в отдельном окне и перекрывающие весь главный экран;
  • pop-under, открывающиеся в отдельном окне под предыдущим изображением;
  • top line – занимает всю верхнюю часть страницы.

Размещение баннеров

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

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

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

Например, сеть контекстной рекламы Яндекс.Директ предлагает загружать баннеры исключительно заданных форматов. Сайты, которые сотрудничают с поисковиком, подобраны таким образом, чтобы на их страницах было место именно для таких форматов. Наиболее распространённые из них: баннер 240 на 400 пикселей, 240 на 600, 300 на 250, 300 на 300.

Способы создания баннеров самостоятельно

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

Воспользоваться услугами специалиста или агентства

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

Как создать интернет-баннер с помощью графического редактора

Использовать конструктор баннеров для сайта онлайн

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

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

Онлайн-редактор Canva

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

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

Html-баннер: как делать

Html-формат потребует чуть больше усилий, чем остальные виды баннеров, однако даст ряд весомых преимуществ. Среди них:

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

Например, программы компании Ulead Systems Ulead Gif Animator и Easy GIF Animator Pro. В них есть множество настроек и возможностей, а встроенный мастер поможет подобрать оптимальный вариант размера для созданной gif-картинки.

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

Как вставить html5-баннер

Способ вставки html5-баннера зависит от места сайта, в которое вы хотите поместить креатив, а также от используемой CMS. Например, в WordPress достаточно поместить скопированный код в необходимый виджет.

Для вставки в баннера в шапку сайта потребуется найти файл header.php. А для размещения в тексте – просто скопировать необходимый код и разместить в формате HTML в статье.

Рекомендации по созданию наиболее эффективных баннеров

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

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

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


от Наталья Мамбетова 19.06.2019 Обновлено 19.07.2020

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

Инструменты для создания баннеров и инфографики

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

Графический дизайн без лишних хлопот с Canva

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

Графический дизайн без лишних хлопот с Canva

4 бесплатных инструмента для создания баннера и любой инфографики

Мастерская баннеров — Bannersnack

Bannersnack — это онлайн программа для создания статических и анимированных баннеров, которая включает в себя множество функций, позволяющих пользователям разрабатывать и создавать баннерную рекламу, а также управлять и реализовывать баннерные рекламные кампании на нескольких интернет-каналах. Предназначен для частных лиц, а также средних и крупных предприятий. Является очень простым и понятным инструментом, который может создавать баннеры, совместимые с различными типами сайтов, и запускать их автоматически на Facebook, Twitter, Youtube, IAB, Pinterest или LinkedIn. Способен поддерживать различные форматы, такие как HTML5, Flash, JPG, GIF, PNG или MP4. С помощью баннер-генератора можно сгенерировать более 20-ти разных размеров сразу, но такая функция доступна только в PRO версии.

Мастерская баннеров - Bannersnack

Популярные типы баннеров и обложек Bannersnack.

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

Мастерская баннеров - Bannersnack

Генератор баннеров Bannersnack.

Графический редактор Crello

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

Графический редактор Crello

Рабочая панель Crello — баннер для рекламы в Facebook.

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

Комбайн для креативного инфодизайна — Adobe Spark

Комбайн для креативного инфодизайна - Adobe Spark

Выбор шаблонов Adobe Spark.

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

Вот несколько типов контента, которые идеально подходят для одностраничных сайтов созданных в Adobe Spark:

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

Adobe Spark

Рабочая панель Adobe Spark.

Заключение

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

Типы шаблонов дизайнерской графики доступные на этих сервисах:

  • Фотоколлажи;
  • Видеоролики и анимация;
  • Рекламные баннеры для Google Ads, Facebook Ads и других сетей;
  • HTML-5, GIF и AMP-баннеры;
  • Социальные обложки, фон, посты, истории для Instagram, Facebook, Twitter, Pinterest, YouTube и др.;
  • Вдохновляющие цитаты;
  • Фоны для рабочего стола;
  • Плакаты и листовки;
  • Изображения для печати на ткани;
  • Приглашения и объявления;
  • Мемы;
  • Заголовки событий;
  • Деловая графика;
  • Слайды и презентации;
  • Обложки профиля, резюме;
  • Заголовки и баннеры блога;
  • Портфолио, целевые страницы.

Почти все редакторы имеют полный или частичный перевод на русский язык, к тому же всегда можно воспользоваться браузерным расширением для перевода веб-страниц. Если что-то непонятно, то блоги этих сервисов содержат инструкции и полезные советы. Несмотря на некоторую схожесть задач, каждый из сервисов имеет свои плюсы. Чтобы выбрать для себя лучший инструмент, попробуйте каждый из этого списка. Или используйте все сразу. Вам даже не нужно создавать учетную запись, придумывать логин и запоминать пароль, при регистрации используйте свои учетные записи Facebook или Google. Профессиональным дизайнерам или бизнесменам рекомендуется приобрести PRO доступ и использовать сервисы на полную мощность. Успехов!

Как создать анимированные баннеры, если вы не дизайнер

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

Что такое Google Web Designer

Google Web Designer – это бесплатное приложение для создания объявлений и других видов онлайн-контента в формате HTML5. В нем существует как визуальный редактор, так и редактор кода. В визуальном редакторе можно создавать изображения с помощью инструментов рисования, добавлять текст и трехмерные объекты, а также анимировать элементы и события на временной шкале. В редакторе кода можно создавать файлы CSS, JavaScript и XML.

Google Web Designer будет полезен web-дизайнерам и маркетологам, которые хотят попробовать себя в сборке баннеров.

Я расскажу и покажу, как создавать баннеры формата HTML5 для загрузки в Google Ads и Yandex Direct. Для этого нам пригодится как визуальный редактор, так и редактор кода.

Как он выглядит

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

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


Выбираем платформу Google Ads или Внешнее объявление и задаем размер. Многие рекламодатели предпочитают заказывать креативы, которые подойдут и для Google Ads, и для Yandex Direct.

Какие разрешения мы можем использовать на обеих площадках:

160×600, 240×400, 300×250, 300×600, 320×50, 320×100, 336×280, 728×90, 970×250.

Вес каждого из них не должен быть более 150 КБ.


Режим анимации можем выбрать любой – в окне создания креатива есть кнопка, которая их переключает:

Быстрый режим анимации — для создания креативов покадрово (сцена за сценой).

Расширенный — для редактирования анимации каждого элемента в отдельности.


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


Посмотрим, как выглядит рабочая область Google Web Designer:

1. Панель инструментов. Тут находятся инструменты для создания и управления элементами в рабочей области. Здесь нам понадобятся инструменты выделения, пути перемещения, рука и масштаб. Здесь также можно создавать маску объекта, различные фигуры и кривые Безье. Есть пипетка и создание текста. Если понадобится, тут даже можно работать с 3D-объектами.

2. Панель настроек инструмента. Если выбрать какой-либо инструмент — в этой панели отобразятся все доступные действия с ним.

3. Временная шкала. На ней есть 2 режима управления анимацией – быстрая (покадрово) и расширенная (с каждым элементом на холсте). Именно с помощью этой панели мы будем делать анимацию.

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

5. Рабочие панели. Выбор цвета, форматирование текста, структурный редактор, в котором находятся слои, как в Adobe Photoshop. Также есть инспектор объявления — он показывает, все ли условия нами соблюдены и можно ли загрузить баннер на рекламную площадку. Есть и другие панели, но мы рассмотрим только те, с которыми будем работать при создании баннера.

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

7. Холст документа. На нём мы будем создавать наш баннер.

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

Создаем анимированный баннер с чистого листа

Выбираем изображения

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

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

Изображения можем поискать на фотостоках, таких как Shutterstock, Usplash, FreePik или Pngtree. Для баннера выбрали четыре формата: 240×400, 300×250, 300×600 и 336×280. Подготовили изображения нужных размеров в Adobe Photoshop.


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


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


У всех изображений прозрачный фон, они в формате PNG, за исключением фона. Только фон у нас непрозрачный, в формате JPEG.

Верстаем баннер для Google


Давайте теперь соберем наш первый баннер для Google Ads, формат 300х250.

Добавим все элементы, которые будут участвовать в этом баннере на холст.


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


Следующим идет изображение фруктов. Просто переносим, зажав мышкой, картинку на холст. Обращаем внимание на Инспектор — нам уже придется уменьшить все наши креативы. Не проблема — в сети достаточно бесплатных конвертеров. Для примера используем iLoveIMG.


Сейчас уже лучше. Поставим замочки на эти слои – они не будут участвовать в анимации.


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


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




Для большей реалистичности добавим немного завершающего движения с вращением в Ease-out. Пример можно увидеть на временной шкале ниже.


Пришло время для появления логотипа. Давайте сделаем его появление из ниоткуда. Центрируем лого по вертикали, изменим масштаб до 0.05 и заливку до 0, а в последнем ключевом кадре вернем показатели по умолчанию.




Сделаем так, чтобы кнопка мигала. Копируем через каждые 4 клетки ключевое действие и чередуем заливку и масштаб 0,9 и 0,9 и 1 и 1. В первом ключевом кадре заливку оставим 0. Так сделаем 7 раз. Итого у нас получается 14 ключевых кадров. В конце заставим ее полностью исчезнуть — масштаб и заливка будут равны 0.


С логотипом мы поступим иначе — заливка будет равна нулю, но масштаб выставим 4. Логотип будет будто наезжать на экран. А после этого заставим фрукты укатиться за кадр с динамикой Ease-in.


Зациклим нашу анимацию, чтобы она повторялась. Добавляем ключевые кадры до начала анимации каждого объекта и до последней секунды. Делаем это для того, чтобы объекты повторялись идентично друг другу. Не забудьте выставить заливку 0 у логотипа и призыва к действию для того, чтобы эти объекты оставались невидимыми. Затем задаем повтор анимации 2 раза. Общее время должно быть не более 30 секунд, а так как мы создали повтор, то в итоге наша анимация теперь составляет 11.5 х 2 = 23 секунды.



Верстаем баннер для Яндекса

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


Возвращаемся к предыдущему объявлению. Мы должны снять все замки, выделить все компоненты во временной шкале, скопировать и вставить в новый документ. Все элементы и анимация скопированы полностью.


Теперь переходим в режим кода.

И делаем следующее:


meta name="environment" content="gwd-genericad"

вставляем такой код:

где width и height — ширина и длина нашего баннера.

Так как у нашего баннера размеры 300х250, вставляем строчку:

meta name="ad.size" content="width=300,height=250"

Не забудьте поставить скобки <> перед началом строчки и после нее


Находим абзац с телом баннера body. Со следующей строки, после открытия тела кода, вводим:


Находим /gwd-genericad в теле кода и закрываем тег:


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

script

document.getElementById("click_area").href = yandexHTML5BannerApi.getClickURLNum(1);

/script

Также не забудьте о скобках в начале и конце тега, как на скриншоте:


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

Сохраняем изменения и публикуем баннер как в прошлом разделе. Баннер для Яндекс.Директа готов.

Верстка других форматов и модерация объявлений

Остальные 3 формата, 240×400, 300×600 и 336×280, мы можем создать используя уже готовый баннер 300×250. Эти советы помогут ускорить работу:

Создайте новое объявление нужного вам размера и откройте уже созданный вами баннер. Скопируем некоторые объекты в новый баннер для ускорения процесса.

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

Из временной шкалы предыдущего баннера скопируйте движущиеся объекты на новый. Нужные объекты можно выделить с помощью SHIFT и скопировать / вставить Ctrl+C / Ctrl + V. Они копируются вместе с анимацией.

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

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

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


Давайте добавим созданные нами объявления в кабинеты площадок. В Google Ads объявления одобрены.


В Яндекс.Директе объявления одобрены.


Как Google Web Designer упрощает рабочие задачи

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

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

— Можно проводить А/В тесты, анализировать поведение и реакцию нашей аудитории, обновлять баннеры так часто, насколько это требуется, чтобы увеличить показатели эффективности рекламы.

— Теперь, благодаря GWD, совсем не обязательно владеть JavaScript, CSS и HTML для того, чтобы создать баннер HTML5.

— Интерфейс интуитивно понятен. Например, если вы уже знакомы с интерфейсами Adobe Photoshop и Illustrator, то разобраться в интерфейсе GWD вам будет еще проще.

— Приложение бесплатное и постоянно обновляется. Дополнительную информацию об использовании GWD и его функциях можно найти в справке. Она доступна и на русском языке.

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