Расскажите о вашей задаче
Гостевой пост

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

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

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

Преимущества HTML5 баннеров

Данные типы баннеров адаптивные и анимированные, поэтому выделяются в выдаче на фоне статичных баннеров.

Кроме того:

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

Шаблоны в Google Web Designer

При создании баннера сервис предложит создать файл с нуля либо использовать шаблон.

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

  1. Динамический ремаркетинг. Один из самых популярных шаблонов для показа сразу нескольких предложений (товаров или услуг). Например, можно показывать туры, недвижимость, автомобили, товары, авиабилеты и многое другое.
  2. App Install. Поможет при создании креатива для рекламы мобильного предложения.
  3. Banner for Display. Специальный формат, который может быть размещен на каждом сайте.
  4. Баннер для Google Ads и AdMob. Универсальный формат, легко продвигающийся среди мобильных устройств.
  5. Data Driven. Показывает по очереди преимущества бренда.
  6. Demonstration. Баннер с интерактивными элементами, например, вывод текста при наведении курсора на изображение.
  7. Expandable. Показывает один большой баннер и несколько маленьких, позволяя продвигать товары/услуги для кросс-сейла.
  8. Floating. Редкий формат, отображается только на ПК.
  9. In-stream video. Показ видео вместо баннера, в последнее время довольно популярная опция.
  10. Interstitial & in-app. Баннер для планшетов для продвижения мобильных приложений.
  11. Lightbox. Универсальный формат, в котором удобно использовать видео, карты и изображения для продвижения товаров и услуг.
  12. Parallax. Создает красивую иллюзию сразу нескольких слоев и быстро загружается.
  13. Rising star. Баннеры с интерактивным форматом, правда, редко используются из-за отображения только на ПК.

баннеры в Google Web Designer

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

Какой формат баннеров выбрать в Google Web Designer

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

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

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

Начало работы с интерфейсом в Google Web Designer

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

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

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

Начало работы в Google Web Designer

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

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

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

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

Как самостоятельно сделать баннер в  Google Web Designer

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

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

Как сделать в гуглвебзийнер баннер с анимацией для рекламы

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

Как сделать анимированный банер в  Google Web Designer для рекламы

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

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

Далее нажмите «Мышь» и затем «Click».

Как бесплатно делать баннер в Google Web Designer

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

Анимированныйе баннеры в Google Web Designer для рекламных кампаний

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

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

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

Гайд по созданию баннера в Google Webdsigner

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

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

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

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

Как перейти в расширенный редактор в Google Webdesigner

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

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

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

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

Как сделать в Google Web Designer баннер с анимацией для рекламы

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

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

Как работать в гугл веб дизайнер

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

Я сохранил на Google Drive архив с баннером, чтобы можно было рассмотреть подробности на каждом этапе создания изображения.

51
3
2
Обнаружили ошибку? Выделите ее и нажмите Ctrl + Enter.

Комментарии (7)

Последние комментарии

    Чтобы оставить комментарий, нужно войти

    Чтобы оставлять комментарии, переключитесь на профиль читателя

    Подписаться

    на самую полезную рассылку по интернет-маркетингу

    Самое

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