Как создать анимированные баннеры в Google Web Designer
С помощью бесплатного сервиса Google Web Designer можно создать анимированные HTML5-баннеры для рекламы даже без опыта в дизайне. Чем хороши анимированные объявления и как с помощью Web Designer создать такой баннер для КМС с нуля, рассказал автор блога SeoPulses Ильхом Чакканбаев.
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, необходимо сначала скачать его с сайта.
После скачивания и установки приложения на компьютер можно:
создать новый баннер с чистого листа;
создать баннер по шаблону.
О работе с шаблонами в Google Web Designer
Google предлагает больше десяти шаблонов под разные задачи, форматы и рекламные системы:
App Install — шаблон для привлечения установок приложений;
Banner for Google Ads and AdMob — баннер для Google Ads и AdMob;
Demonstration — креатив с интерактивными элементами;
Dynamic remarketing for Google Ads — специальный формат для динамического ремаркетинга в Google Ads;
Expandable — объявление с двумя размерами: исходным и увеличенным; исходный подходит для рекламного места стандартного баннера, а больший — выходит за его границы, раскрывается автоматически или после нажатия или прокручивания. Такой формат показывает один большой баннер и несколько маленьких, подойдет для продвижения акции: можно указать несколько товаров, участвующих в ней;
Floating — формат только для показа на десктопах;
In-stream video — показывает видео вместо стандартного баннера;
Lightbox — универсальный формат, подходит как для видео, так и для изображений, продвигающих товары;
Rising star — формат с интерактивным эффектом;
Swirl for Display & Video — креативный формат с использованием 3D-моделей.
Выбрав нужный шаблон, нажимаем на «Использовать макет».
Далее выбираем из выпадающего списка размер, задаем название файла и папку, куда сохранится баннер.
Теперь можно приступать к редактированию шаблона.
Создание баннера HTML5 с нуля в Google Web Designer
Чтобы создать баннер с нуля, при запуске программы выбираем «Создать файл».
А если мы уже открыли другой файл с баннером, то необходимо кликнуть на «Файл» (левый верхний угол) и выбрать «Создать».
Вводим название для будущего файла и выбираем его расположение.
Далее начинается работа с чистого листа. В первую очередь заходим в «Свойства».
Здесь задаем размеры будущего баннера.
Затем переходим в «Библиотеку» и добавляем составные части будущего баннера: элементы и наброски, из которых будет состоять все изображение. Для примера, который указан ниже, все составные части можно скачать из папки. Web Designer поддерживает изображения, видео и аудиофайлы.
Добавить объект можно просто, перетянув его из библиотеки.
Теперь объекты можно перемещать и изменять их размеры — для этого выделите нужный элемент и в свойствах задайте размеры.
После этого можно начать использовать весь инструментарий, расположенный на панелях слева, справа, вверху и внизу. С его помощью можно создать несколько кадров одного баннера, добавить текст, разместить графические элементы.
Google Web Designer: пошаговая инструкция по созданию HTML5 баннеров
Google Web Designer — это бесплатный софт для веб-дизайнеров, позволяющая создавать баннеры и страницы в стандарте HTML5 и CSS3.
Что такое HTML5 баннеры?
Данные типы баннеров адаптивные и анимированные, позволяющие добавлять элементы анимации или движения, делая их привлекательными и интересными. Также среди других преимуществ данных типов креативов:
Пример HTML5 баннера (из пошаговой инструкции)
Шаблоны в Google Web Designer
При создании баннера будет предложено:
Среди доступных шаблонов:
После того, как основной макет выбран, каждому пользователю предоставляется возможность выбрать из любого формата.
Выбрав, например, Динамический ремаркетинг потребуется дополнительно подобрать одну из разновидностей шаблона и подходящий размер.
При нажатии на кнопку «Предпросмотр» появляется возможность подобрать другой размер для данного шаблона и при необходимости открыть пример в браузере (например, Google Chrome).
При выборе подходящего макета следует нажать на «Использовать шаблон», после чего начинается работа с интерфейсом.
Инструкция по созданию баннеров HTML5 в Google Web Designer
В качестве примера создадим баннер для двух инструментов Netpeak:
Мы будем использоваться баннер 300*600 пикселей, для чего потребуется в блоке «Свойства» изменить соответствующие поля.
После в блоке «Библиотека объектов» загрузим все составные части для нашего проекта это:
Для этого кликаем правой клавишей мыши и выбираем «Добавить объект».
После загружаем все необходимые части.
Далее расставляем составные части по нужным местам (при необходимости изменяя их размеры, через «Свойства»).
Добавляем текст к баннеру через панель инструментов.
В итоге получаем такой баннер.
Теперь потребуется расставить кнопки для перенаправления на нужные страницы, для чего кликаем правой клавишей мыши на нужный объект и выбираем «Добавить событие».
В блоке «Действие» выбираем «Переход».
Здесь только 1 пункт – «gwd-ad».
Теперь в URL ставим ссылку на нужную страницу.
Все готово и проводим аналогичную операцию со всеми элементами в проекте.
Следующий этап — это создание анимации, для чего используем временную шкалу ниже.
Для примера мы будем использовать упрощенный редактор, но также можно перейти в расширенный при помощи нажатия на соответствующую клавишу.
Расставляем объекты на странице так, как они будут появляться во время анимации.
Далее нажимая на «+» мы копируем исходный кадр и получаем его полную копию, делаем в ней изменения и копируем его и делаем изменение дальше.
Так проводим работу со всеми кадрами пока картинка не будет собрана полностью.
После этого проверяем баннер нажимая на кнопку «Воспроизведение».
Теперь осталось только сохранить баннер кликнув в правом-верхнем углу на «Файл»-«Сохранить как ZIP-файл».
