Google Web Designer: пошаговая инструкция по созданию HTML5 баннеров

Google Web Designer — это бесплатный софт для веб-дизайнеров, позволяющая создавать баннеры и страницы в стандарте HTML5 и CSS3.

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

Данные типы баннеров адаптивные и анимированные, позволяющие добавлять элементы анимации или движения, делая их привлекательными и интересными. Также среди других преимуществ данных типов креативов:

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

Пример HTML5 баннера (из пошаговой инструкции)

https://seopulses.ru/for-banner/banner-netpeak-new.html

Шаблоны в Google Web Designer

При создании баннера будет предложено:

  • Создать файл с нуля;
  • Использовать шаблон.

Среди доступных шаблонов:

  • Динамический ремаркетинг. Один из самых популярных шаблонов для показа сразу нескольких предложений (товаров или услуг). Например, можно показывать туры, недвижимость, автомобили, товары, авиабилеты и многое другое;
  • App Install. Поможет при создании креатива для рекламы мобильного предложения;
  • Banner for Display. Специальный формат, который может быть размещен на каждом сайте;
  • Баннер для Google Ads и AdMob. Универсальный формат, легко продвигающийся среди мобильных устройств.
  • Data Driven. Показывает по очереди преимущества бренда;
  • Demonstration. Баннер с интерактивными элементами, например, вывод текста при наведении;
  • Expandable. Показывает один большой баннер и несколько маленьких, позволяя продвигать связные товары/услуги;
  • Floating. Редкий формат, показывающийся только на ПК;
  • In-stream video. Показ видео вместо баннера, что становится достаточно популярным;
  • Interstitial & in-app. Баннер для планшетов для продвижения мобильных приложений;
  • Lightbox. Универсальный формат, способный использовать видео, карты и картинки для продвижения товаров и услуг;
  • Parallax. Создает красивую иллюзию сразу нескольких слоев и обладает быстрой скоростью загрузки;
  • Rising star. Редкий формат для компьютеров, создающий интерактивный эффект.
Интерфейс Google Web Designer

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

Шаблоны в Google Web Designer

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

Создание шаблона и использование макета в Google Web Designer

При нажатии на кнопку «Предпросмотр» появляется возможность подобрать другой размер для данного шаблона и при необходимости открыть пример в браузере (например, Google Chrome).

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

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

Инструкция по созданию баннеров HTML5 в Google Web Designer

В качестве примера создадим баннер для двух инструментов Netpeak:

  • Spider;
  • Cheker.

Мы будем использоваться баннер 300*600 пикселей, для чего потребуется в блоке «Свойства» изменить соответствующие поля.

Свойства объекта в Google Web Designer

После в блоке «Библиотека объектов» загрузим все составные части для нашего проекта это:

  • Задний фон;
  • Логотип Netpeak Software;
  • Логотип Netpeak Spider;
  • Логотип Netpeak Checker;
  • Лого Netpeak.

Для этого кликаем правой клавишей мыши и выбираем «Добавить объект».

После загружаем все необходимые части.

Библиотека объектов в Google Web Designer

Далее расставляем составные части по нужным местам (при необходимости изменяя их размеры, через «Свойства»).

Созданный баннер в Google Web Designer

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

Инструмент вставить текст в Google Web Designer

В итоге получаем такой баннер.

Баннер в Google Web Designer

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

Добавление события в к объекту в Google Web Designer

Далее «Мышь»-«Click».

Событие

В блоке «Действие» выбираем «Переход».

Событие

Здесь только 1 пункт – «gwd-ad».

Выбор страницы для перехода gwd-ad в Google Web Designer

Теперь в URL ставим ссылку на нужную страницу.

Ввод ссылки для перехода на сайт в Google Web Designer

Все готово и проводим аналогичную операцию со всеми элементами в проекте.

Элементы баннера в Гугл Веб Дизайнер

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

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

Создания сюжета и анимации в Гугл Веб Дезайнер

Расставляем объекты на странице так, как они будут появляться во время анимации.

Создание кадров и шагов в Google Web Designer

Далее нажимая на «+» мы копируем исходный кадр и получаем его полную копию, делаем в ней изменения и копируем его и делаем изменение дальше. 

Создание кадров и шагов в Google Web Designer

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

Временная шкала в Google Web Designer

После этого проверяем баннер нажимая на кнопку «Воспроизведение».

Теперь осталось только сохранить баннер кликнув в правом-верхнем углу на «Файл»-«Сохранить как ZIP-файл».

Сохранение файла в zip в Google Web Designer

Пример полученного баннера:

https://seopulses.ru/for-banner/banner-netpeak-new.html

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

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

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