Google Web Designer — это бесплатный инструмент от компании Google, позволяющий создавать баннеры стандарта HTML5 и CSS3. Сегодня я расскажу, как начать работать в Google Web Designer и создать там первый свой баннер для рекламы в КМС.
Что такое HTML5-баннеры
HTML5 баннеры — это анимированные баннеры, которые используются во многих рекламных системах, в том числе Яндекс.Директ, Google Ads, «ВКонтакте» или Facebook. Их основные преимущества:
- адаптированы под все браузеры: благодаря использованию HTML-разметки могут показываться во всех браузерах;
- подходят для любого типа устройства;
- относительно малый вес: в отличие от Flash HTML5-баннеры весят заметно меньше, поэтому при их загрузке страницы не тормозят и не грузятся долго;
- в них легко интегрировать несколько кнопок или элементов;
- будут поддерживаться в дальнейшем: практически все компании, разрабатывающие браузеры (в частности Google, Mozilla, Apple и другие) отказываются от Flash-технологии и переходят на HTML5.
![Пример HTML5 баннера](https://seopulses.ru/wp-content/uploads/2020/12/1-1.gif)
Начало работы
Чтобы использовать Google Web Designer, необходимо сначала скачать его с сайта.
![Google Web Designer скачивание приложения](https://seopulses.ru/wp-content/uploads/2020/12/1-2-1-1024x487.png)
После скачивания и установки приложения на компьютер можно:
- создать новый баннер с чистого листа;
- создать баннер по шаблону.
![Использование шаблона в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-3-1-1024x658.png)
О работе с шаблонами в 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](https://seopulses.ru/wp-content/uploads/2020/12/1-4-1-1024x653.png)
Выбрав нужный шаблон, нажимаем на «Использовать макет».
![Использование макета для динамического ремаркетинга в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-5-1024x657.png)
Далее выбираем из выпадающего списка размер, задаем название файла и папку, куда сохранится баннер.
![Создание нового баннера HTML5 на основе шаблона в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-6-1024x624.png)
Теперь можно приступать к редактированию шаблона.
![Шаблон динамического ремаркетинга для Google Ads в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-7-1024x794.png)
Создание баннера HTML5 с нуля в Google Web Designer
Чтобы создать баннер с нуля, при запуске программы выбираем «Создать файл».
![Создание нового баннера HTML5 в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-8-1024x792.png)
А если мы уже открыли другой файл с баннером, то необходимо кликнуть на «Файл» (левый верхний угол) и выбрать «Создать».
![Создание нового файла в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-9-1024x801.png)
Вводим название для будущего файла и выбираем его расположение.
![Ввод данных для создания нового HTML5 баннера в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-10.png)
Далее начинается работа с чистого листа. В первую очередь заходим в «Свойства».
![Интерфейс Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-11-1024x803.png)
Здесь задаем размеры будущего баннера.
![Изменение размера шаблона в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-12-1024x799.png)
Затем переходим в «Библиотеку» и добавляем составные части будущего баннера: элементы и наброски, из которых будет состоять все изображение. Для примера, который указан ниже, все составные части можно скачать из папки:
Web Designer поддерживает изображения, видео и аудиофайлы.
![Переход в библиотеку в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-13-1024x801.png)
Добавить объект можно просто, перетянув его из библиотеки.
Теперь объекты можно перемещать и изменять их размеры — для этого выделите нужный элемент и в свойствах задайте размеры.
После этого можно начать использовать весь инструментарий, расположенный на панелях слева, справа, вверху и внизу. С его помощью можно создать несколько кадров одного баннера, добавить текст, разместить графические элементы.
![Панель инструментов в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-14-1024x805.png)
![Инструменты изменения цвета в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-16-1024x519.png)
![Инструменты для текста в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-17-1024x519.png)
Далее расставляем кадры в нижней части экрана на временной шкале. Сделать это можно при помощи кнопок «Добавить» между кадками и в конце списка — после клика будет создана копия действующего кадра, в которой можно сделать изменения.
![Добавление нового кадра в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-19-1024x804.png)
![Добавление новых элементов в временную шкалу в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-20-1024x522.png)
После завершения расстановки кадров можно посмотреть итоговую работу, кликнув на «Смотреть».
![Воспроизведение HTML5 баннера в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-21-1024x803.png)
Теперь для каждого элемента баннера нужно добавить ссылки так, чтобы логотип вел на главную страницу сайта, а клик на раздел — на другую страницу. Для этого добавляем события в кадр: кликните правой клавишей мыши и выберите пункт «Добавить событие..».
![Добавление нового события в HTML5 баннере в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-22-1024x598.png)
Выбираем «Мышь — сlick».
![Добавление нового события клик мыши в HTML5 баннере в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-23.png)
Затем открываем вкладку «Объявление Google — Переход».
![Добавление нового события клик мыши и переход в HTML5 баннере в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-24.png)
Кликаем на gwd-ad.
![Добавление нового события со ссылкой HTML5 баннере в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-25.png)
Вводим идентификатор показателей (ярлык, облегчающий понимание отчетов, принципиального влияния на работу не оказывает) и URL — ссылку на страницу, на которую будет переходить пользователь по клику на баннер.
![Добавление ссылки для перехода HTML5 баннере в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-26.png)
Посмотреть все созданные события можно в специальной вкладке в левой части экрана.
![Созданные события в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-27-1024x521.png)
Аналогично можно посмотреть заданные стили CSS.
![Созданные стили CSS в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-28-1024x519.png)
Также доступен предварительный просмотр баннера в браузере — «Предпросмотр — Chrome».
![Предпросмотр HTML5 баннера в браузере Google Chrome в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-29-1024x517.png)
Чтобы скачать итоговый вариант, кликаем на «Опубликовать — Локально».
![Публикация HTML5 баннеров в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-30-1024x519.png)
Выбираем путь для сохранения.
![Публикация нового баннера HTML5 в Google Web Designer](https://seopulses.ru/wp-content/uploads/2020/12/1-31.png)
Созданный баннер можно скачать в zip-архиве с Google Диска:
А увидеть — по ссылке (отключите блокировщик рекламы, чтобы баннер отобразился).
Загрузка баннеров в Google Ads
HTML5-баннеры загружаются в Google Ads так же, как и другие креативы. Чтобы использовать созданный баннер в рекламе, необходимо перейти в рекламную кампанию во вкладку «Объявления» и нажать на добавить.
![Создание нового медийного объявления в Google Ads](https://seopulses.ru/wp-content/uploads/2020/12/1-32-1024x479.png)
В выпавшем списке выбираем «Загрузить медийные объявления».
![Загрузка нового медийного объявления в Google Adwords](https://seopulses.ru/wp-content/uploads/2020/12/1-33-1024x461.png)
Загрузите баннер с компьютера, введите конечный URL и сохраните объявление.
![Загрузка файла архима для HTML5 баннера](https://seopulses.ru/wp-content/uploads/2020/12/1-34-1024x464.png)
![Загруженный HTML5 баннер в Google Ads](https://seopulses.ru/wp-content/uploads/2020/12/1-35-1024x462.png)
Подписывайтесь на наш канал в Яндекс.Дзен
Подписывайтесь на наш Telegram-канал
Подписывайтесь на наш Youtube-канал
Подписывайтесь на нашу группу ВКонтакте
А я пользуюсь бесплатным сервисом pikaban
http://pikaban.com/
Там можно сразу во всех форматах и кучу размеров баннеров сделать. Удобнее, чем web designer
Добрый день, спасибо за обратную связь, спасибо за уточнение данным сервисом не пользовался.
При открытии баннера на мобайле, он не адаптирован, почему? Как сделать, чтобы сразу адаптивился под все устройства?
Добрый день, спасибо за обратную связь, в данном случае Вам потребуется встроить его через верстальщика, чтобы на сайте он отображался на всю ширину экрана а не оригинальный размер.