Содержание

что такое и как создать

Обсудить …

24.11.2020     👁 16276

У нас случились HTML5-баннеры. Клиентам резко их захотелось. Мы обычно делаем в gif, так быстрее. Но если уж сильно хочется, то можно. С ними мы разобрались, заодно и вам поможем понять, что за зверь такой — этот html5 баннер и как его приручить. 

Что такое HTML5 баннер?

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

В чем главный плюс баннеров в html5?

  1. Креативная и привлекательная анимация, создающаяся за небольшое количество времени. Согласитесь, html5 баннеры в сравнении со статичными jpg-овскими изображениями и даже gif-ками выглядят свежо.
  2. Возможность встраивания в баннер кликабельных кнопок: кнопка вызова и sms,  карты, ссылки на социальные сети, календари и т. д. Интегрировать можно что угодно, даже приложения. 
  3. Не придется разбираться в коде. Свои html5 баннеры мы делаем в Google Web Designer, программа сама генерирует код. Удобно, если для вас код — это просто набор странных цветных символов и букв. Но у собранного программой кода есть пара нюансов, про которые мы поговорим чуть позже.
  4. Легкий вес html5 баннера даже несмотря на анимацию в нем. А легкий вес баннера, как мы знаем, не влияет на скорость загрузки страницы.
  5. А еще html5 баннеры — это тренд (: 

Где создавать html5 баннер? 

Баннеры можно собирать на разных сервисах с шаблонами, типа Canva или Bannersnack. Есть специальные конструкторы, такие как Adobe Animate, но за подобные сервисы надо платить.

А можно сделать как ТРУ-дизайнер в Google Web Designer. И вот почему:

  1. Несложный интерфейс самого Google Web Designer: почитал инструкцию, потыкал и, считай, уже разобрался.
  2. Легко и быстро создать простенькую, но красивую анимацию. А если уж сильно постараться, то и не простенькую создать тоже получится. 
  3. Google Web Designer бесплатный (:

Нюансы при создании html5 баннеров

Собрать сам баннер html5 не так уж и сложно, если есть обывательские навыки в Photoshop (:

А вот правильно «собрать»‎ код уже сложнее:

  1. Изучите технические требования от площадки на которой хотите разместить баннер. Иначе будете биться в истерике, когда баннер не захочет загружаться в рекламную кампанию.
  2. Не пренебрегайте поиском информации в интернетиках, если не понимаете как, куда и зачем вставлять скрипты. Как говорится, Гугл (или Яндекс) в помощь.
  3. Обратите внимание на начальные настройки: если вы планируете размещать html5 баннер в Яндекс.Директе, а создаете его в Google Web Designer, то в пункте «платформа» выберите «внешнее объявление». Иначе Яндекс будет ругаться на внешние ссылки от Google. У них между собой какие-то терки, но лезть мы в это, конечно же, не будем (: 
  4. Следите за объемом документа. Если архив получится «жирненьким» — он не пройдет и это не из-за того, что «кто-то слишком много ест!». Запоминаем: и в Яндекс.Директ, и в Google Ads размер файла не должен превышать 150 КБ.

Лайфхаки от дизайнера

Зацикленная анимация

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

Сделать это можно в несколько простых шагов:

Добавляем событие в завершающей части вашей анимации, кликая на рабочую зону правой кнопкой мыши:

Теперь переходим к началу временной шкалы, добавляем ярлык подобным образом и присваиваем ему имя, например, «start»:

Затем нам снова предстоит путешествие в конец шкалы времени, чтобы добавить событие к только что созданному ярлыку:

В выпадающем окне выбираем «Временная шкала» — «gotoAndPlay» — получатель: page1 — ярлык «start» и нажимаем «ОК»

  

 

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

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

Директ

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

В интерфейсе Google Web Designer заходим в режим кода;

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

Далее нам нужно «завернуть» рабочую область в ссылку с определенным идентификатором и вызвать метод «getClickURLNum» как показано в следующих действиях:

Находим тело баннера в коде и «заворачиваем» его в ссылку, добавляя строчку сразу после

Ниже вызываем указанный на фото метод, его можно скопировать из справочной информации Яндекс.Директа в разделе «Медийная кампания» —«Требования к HTML5-баннерам»

Проделав данные методы с кодом, html5 баннер без проблем загрузится на рекламную площадку. Желаем успехов!

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

      

Автор: Ксения Лазарева — специалист по интернет-рекламе

Автор: Мария Климовских — дизайнер

 

Google Реклама Кейсы Контекстная реклама Маркетологу Медийная реклама РСЯ Яндекс. Директ

Обсудить в телеграм-канале

Показать еще статью

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

Google Web Designer — это бесплатный инструмент от компании Google, позволяющий создавать баннеры стандарта HTML5 и CSS3. Сегодня я расскажу, как начать работать в Google Web Designer и создать там первый свой баннер для рекламы в КМС.

  • Что это;
  • Начало работы;
  • Шаблоны;
  • Создание баннера;
  • Загрузка в Google Ads.

Что такое HTML5-баннеры

HTML5 баннеры — это анимированные баннеры, которые используются во многих рекламных системах, в том числе Яндекс.Директ, Google Ads, «ВКонтакте» или Facebook. Их основные преимущества:

  • адаптированы под все браузеры: благодаря использованию HTML-разметки могут показываться во всех браузерах;
  • подходят для любого типа устройства;
  • относительно малый вес: в отличие от Flash HTML5-баннеры весят заметно меньше, поэтому при их загрузке страницы не тормозят и не грузятся долго;
  • в них легко интегрировать несколько кнопок или элементов;
  • будут поддерживаться в дальнейшем: практически все компании, разрабатывающие браузеры (в частности Google, Mozilla, Apple и другие) отказываются от Flash-технологии и переходят на HTML5.

Начало работы

Чтобы использовать Google Web Designer, необходимо сначала скачать его с сайта.

https://webdesigner.withgoogle.com/

После скачивания и установки приложения на компьютер можно:

  • создать новый баннер с чистого листа;
  • создать баннер по шаблону.

О работе с шаблонами в Google Web Designer

Google предлагает больше десяти шаблонов под разные задачи, форматы и рекламные системы:

  • App Install — шаблон для привлечения установок приложений;
  • Banner for Display & Video 360 — формат практически для любого типа устройств;
  • Banner for Google Ads and AdMob — баннер для Google Ads и AdMob;
  • Data Driven for Display & Video 360 — формат, показывающий преимущества бренда;
  • Demonstration — креатив с интерактивными элементами;
  • Dynamic remarketing for Google Ads — специальный формат для динамического ремаркетинга в Google Ads;
  • Expandable — объявление с двумя размерами: исходным и увеличенным; исходный подходит для рекламного места стандартного баннера, а больший — выходит за его границы, раскрывается автоматически или после нажатия или прокручивания. Такой формат показывает один большой баннер и несколько маленьких, подойдет для продвижения акции: можно указать несколько товаров, участвующих в ней;
  • Floating — формат только для показа на десктопах;
  • In-stream video — показывает видео вместо стандартного баннера;
  • Interstitial & in-app — межстраничные объявления, которые всплывают над страницей на десктопе и занимают весь экран на мобильном устройстве;
  • Lightbox — универсальный формат, подходит как для видео, так и для изображений, продвигающих товары;
  • Parallax for Display & Video 360 — формат красивых объявлений с несколькими слоями, имитирующих объемную картинку, показывается на мобильных устройствах;
  • Rising star — формат с интерактивным эффектом;
  • Swirl for Display & Video — креативный формат с использованием 3D-моделей.

Выбрав нужный шаблон, нажимаем на «Использовать макет».

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

Теперь можно приступать к редактированию шаблона.

Создание баннера HTML5 с нуля в Google Web Designer

Чтобы создать баннер с нуля, при запуске программы выбираем «Создать файл».

А если мы уже открыли другой файл с баннером, то необходимо кликнуть на «Файл» (левый верхний угол) и выбрать «Создать».

Вводим название для будущего файла и выбираем его расположение.

Далее начинается работа с чистого листа. В первую очередь заходим в «Свойства».

 Здесь задаем размеры будущего баннера.

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

https://drive.google.com/drive/folders/1Ts3QnqzGXYQi-rwbCEmb7IH6c2i93GAO?usp=sharing

Web Designer поддерживает изображения, видео и аудиофайлы.

Добавить объект можно просто, перетянув его из библиотеки.

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

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

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

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

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

Выбираем «Мышь — сlick».

Затем открываем вкладку «Объявление Google — Переход».

Кликаем на gwd-ad.

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

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

Аналогично можно посмотреть заданные стили CSS.

Также доступен предварительный просмотр баннера в браузере —  «Предпросмотр — Chrome».

Чтобы скачать итоговый вариант, кликаем на «Опубликовать — Локально».

Выбираем путь для сохранения.

Созданный баннер можно скачать в zip-архиве с Google Диска:

https://drive.google.com/file/d/1BETheW3T9XHOq8w51WjqYuL4UMCUZNIF/view

А увидеть — по ссылке (отключите блокировщик рекламы, чтобы баннер отобразился).

Загрузка баннеров в Google Ads

HTML5-баннеры загружаются в Google Ads так же, как и другие креативы. Чтобы использовать созданный баннер в рекламе, необходимо перейти в рекламную кампанию во вкладку «Объявления» и нажать на добавить.

В выпавшем списке выбираем «Загрузить медийные объявления».

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

HTML5 Banner Creator — создавайте анимированные баннеры HTML5

Вдохновитесь нашими шаблонами анимации

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

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

Просмотр библиотеки шаблонов

дизайн и редактирование

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

  • Выберите шаблон

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

  • Настройте свой баннер

    Воспользуйтесь редактором HTML5 и добавьте или измените любой графический элемент. Вы можете легко анимировать свой баннер HTML5 с помощью нашего Magic Animator. Настраивайте его, пока не почувствуете, что он соответствует вашему бренду.

  • Создание нескольких размеров

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

  • Загрузите свою работу

    Когда вы закончите редактирование, вы можете загрузить свои дизайны в формате AMP или HTML, которые совместимы с объявлениями Google HTML5, и подготовиться к запуску вашей кампании.

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

Эрик Джексон-Саркани, стратег по формированию спроса — Д2Л

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

Винсент Морин, соучредитель — Panja.io

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

Джорджио Руссо — Байтовый проект

Предыдущий Следующий

Универсальный конструктор объявлений HTML5

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

Начните бесплатно

Генератор дизайна

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

Показ рекламы

Доставьте анимацию вашего баннера HTML5 прямо из Creatopy в нужную рекламную сеть независимо от размера и формата файла. Вносите изменения в живые объявления в режиме реального времени, не загружая их повторно.

Бесконечные творческие варианты

Ускорьте создание рекламы, создав несколько вариантов дизайна оригинального произведения на основе файла CSV. Смешайте его с надстройкой Ad Serving и наслаждайтесь мощью творческой автоматизации.

Плавное редактирование видео

Используйте временную шкалу для редактирования рекламы и экспериментируйте с предустановками анимации, пока не найдете лучший вариант.

Добавьте плавные переходы и сделайте свою анимацию HTML5 заметной, когда дело доходит до доставки сообщения.

Выравнивание бренда

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

из нашего блога

Вдохновение для дизайна

HTML5-анимация

Узнайте несколько простых способов создания HTML5-анимации для своего веб-сайта или онлайн-рекламы. Присоединяйтесь к нам на 5-минутном прочтении о самых быстрых способах создания анимированного контента!

Прочитать статью

Примеры баннеров

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

Прочитать статью

HTML5 против GIF

Независимо от того, какое место вы занимаете в команде HTML5 или GIF, невозможно игнорировать преимущества обоих этих форматов. Каждый из них имеет свои преимущества и недостатки.

Прочитать статью

Узнайте больше о возможностях

GIF-баннер

Объявления с возможностью покупки

Изготовление баннеров

Мобильные баннеры

AMP-реклама

Баннер электронной почты

Анимированный баннер

начало работы

Создавайте рекламные баннеры HTML5 на совершенно новом уровне

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

Начать бесплатно

Как создать баннерную рекламу HTML5 в 2023 году?

Как создать баннерную рекламу HTML5 в 2023 году?

Категории

PPCexpo

  • Дом
  • Инструменты
  • Цены
  • Свяжитесь с нами
  • Направляющая КПП
  • Блог
  • Карта сайта
  • © 2023 PPCexpo, все права защищены.

    No related posts.