Как создать анимированный баннер в HTML5: пошаговая инструкция

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

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

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

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

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

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

https://webdesigner.withgoogle.com/
Google Web Designer скачивание приложения

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

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

О работе с шаблонами в 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-моделей.
Галерея шаблонов в Google Web Designer

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

Использование макета для динамического ремаркетинга в Google Web Designer

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

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

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

Шаблон динамического ремаркетинга для Google Ads в Google Web Designer

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

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

Создание нового баннера HTML5 в Google Web Designer

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

Создание нового файла в Google Web Designer

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

Ввод данных для создания нового HTML5 баннера в Google Web Designer

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

Интерфейс Google Web Designer

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

Изменение размера шаблона в Google Web Designer

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

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

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

Переход в библиотеку в Google Web Designer

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

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

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

Панель инструментов в Google Web Designer
Инструменты изменения цвета в Google Web Designer
Инструменты для текста в Google Web Designer

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

Добавление нового кадра в Google Web Designer
Добавление новых элементов в временную шкалу в Google Web Designer

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

Воспроизведение HTML5 баннера в Google Web Designer

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

Добавление нового события в HTML5 баннере в Google Web Designer

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

Добавление нового события клик мыши в HTML5 баннере в Google Web Designer

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

Добавление нового события клик мыши и переход в HTML5 баннере в Google Web Designer

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

Добавление нового события со ссылкой HTML5 баннере в Google Web Designer

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

Добавление ссылки для перехода HTML5 баннере в Google Web Designer

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

Созданные события в Google Web Designer

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

Созданные стили CSS в Google Web Designer

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

Предпросмотр HTML5 баннера в браузере Google Chrome в Google Web Designer

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

Публикация HTML5 баннеров в Google Web Designer

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

Публикация нового баннера HTML5 в Google Web Designer

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

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

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

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

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

Создание нового медийного объявления в Google Ads

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

Загрузка нового медийного объявления в Google Adwords

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

Загрузка файла архима для HTML5 баннера
Загруженный HTML5 баннер в Google Ads

Подписывайтесь на наш канал в Яндекс.Дзен

Подписывайтесь на наши социальные сети

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (6 оценок, среднее: 5,00 из 5)
Загрузка...