Bugsp.ru

Ваша компьютерная помощь
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

Как создать анимированные баннеры в 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.

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

Чтобы использовать 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-моделей.

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

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

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

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

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

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

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

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

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

Читайте так же:
Ошибка обновления 80244010 в Windows 7

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

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

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

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

Google Web Designer

Google Web Designer — программа для создания баннеров и web-страниц, ориентированных на интерактивность со зрителем и на показ анимации. Конечный результат сохраняется в «формате» HTML5, а именно, в набор html, js, css файлов и контентных файлов изображений, видео, аудио.
Интерфейс программы спроектирован так, чтобы в ней мог работать человек без знания языков программирования, форматирования и разметки. Тем не менее, если пользователь знаком с Javascript, CSS и HTML то он сможет создавать сложные функциональные веб приложения.

Google Web Designer

Как видно из названия, программа создана компанией Google и по их задумке в первую очередь направлена на создание баннеров для рекламной сети Google AdWords. На самом деле возможности GWD гораздо шире.

Интерфейс

С интерфейсом программы познакомьтесь из интерактивной презентации: Полный экран

Эта презентация сделана, кстати, в программе ActivePresenter, о которой вы можете узнать подробнее и скачать на свой компьютер на странице «ActivePresenter — для создания профессиональных анимированных презентаций и тестов».

Принцип работы

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

Аудио тоже размещается на холсте, но на результирующей html странице не отображается. На аудио можно задавать какие-то действия типа старт, стоп, пауза.

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

Код. Пользователь, разбирающийся в HTML, CSS и Javascript может открыть код и вносить изменения прямо в нем. Кнопка [Код] находится вверху справа. Потом вернуться снова к визуальному редактору можно по соседней кнопке [Макет].

Просмотр и публикация. Текущий результат быстро просмотреть в браузере можно по кнопке [Предпросмотр]. А по кнопке [Опубликовать] вы сделаете результирующую сборку проекта в веб приложение.

Анимация. В вашем результирующем баннере/приложении объекты могут передвигаться, вращаться, менять прозрачность по расписанию или по событию. На шкале времени происходит работа по анимированию объектов по расписанию. Принцип заключается в расстановке кличевых кадров и в каждом таком кадре назначаются свойства того или иного, или сразу нескольких, параметров. После этого в промежутке между кадрами значение свойства будет меняться. Чтобы задать тип изменений (который по умолчанию lianer) — кликните на полоску между ключевыми кадрами и выберите интерполяцию.

События. Это могут быть клик по объекту мыши, наведение курсора на объект, загрузка страницы. На событие можно повесить действие, которое будет происходить с любым другим объектом или с ним самим. Этим делом в результирующем баннере/приложении будет заниматься Javascript и CSS, но пользователь GWD может без знания данных технологий в конструкторе событий все настроить сам.

Читайте так же:
Ошибка FineReader: нет доступа к файлу

3D в Google Web Designer

Программа предоставляет удобный инструментарий для управления css параметрами, отвечающих за трехмерность. Причем каждый из этих параметров можно анимировать и создать, например, такой 3d кубик, как вы видите слева. В этом примере шесть плоских картинок трансформированы в 3d пространстве для образования куба и объеденены в группу, для которой задана анимация вращения вокруг осей X,Y и Z.

У выделенного объекта на панели «Свойства» под плашкой «Преобразование, вращение и масштаб» вы увидите параметры X, Y и Z для перемещения в трехмерном пространстве и для вращения вокруг этих осей. Также под этой плашкой вы увидите радиобаттоны «Коррекция» и «Абсолютное значение». Если с «Абсолютным значением» все ясно — это значения, отсчитываемые от центра композиции, то про «Коррекцию» стоит сказать, что это настройка изменения значения относительно текущего состояния в тот момент времени, который обозначен ползунком на шкале времени. Если вы отметите радиобаттон «Коррекция», то все параметры будут выставлены в 0. Изменив значение какого-то параметра, вы автоматически создадите новый ключевой кадр для вашего объекта и они примет новое абсолютное значение параметра.

Более грубое и быстрое изменение значений 3d параметров возможно с помощью инструментов и — при выборе их на панели слева вы сможете мышкой вращать или передвигать выделенный объект в трехмерном пространстве.

Есть еще один 3d инструмент . Он служит для свободного вращения всей сцены. НО только для просмотра, на абсолютные значения это никак не влияет. Инструмент полезен для контроля того, как все у вас может выглядеть в трехмерности. Чтобы после применения этого инструмента вернуть сцену в первоначальное состояние надо на этой кнопке совершить двойной клик.

Компонент «Галерея»

Google Web Designer предлагает воспользоваться готовыми миниприложениями в виде компонентов, которые можно перетаскивать на холст мышкой из одноименной панели. Я освоил компонент «Перелистываемая галерея» и он мне понравился. Слева вы видите рекламный баннер на основе этого типа галереи.

После перетаскивание этого компонента на холст надо в его свойствах найти параметр «Изображения» и кликнуть по иконе в этом поле. Откроется окно, в котором по ссылке [Выбрать изображения] добавьте нужные картинки для будущего пролистывания в галерее. Ваши картинки смогут пролистываться как по клику, так и с помощью навигационной панели, вывод которой также есть в свойствах

HTML5-баннеры: методы разработки

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

Достоинства технологии

Анимированные баннеры, созданные на HTML5, такие же гибкие, как и сама HTML-разметка, благодаря чему изначально адаптированы под все браузеры, мобильные приложения и устройства.

Использование данной технологии дает важные преимущества:

  • Баннеры адекватно отображаются на экранах ПК и портативных устройств, не нужно использовать дополнительные расширения для браузеров.
  • В рекламные блоки легко интегрируются разнообразные приложения: кнопки соцсетей, карты, календари и т.д.
  • Баннеры на HTML5 в лучшую сторону отличаются от Flash — не тормозят загрузку страниц сайта в браузере, так как мало весят и используют минимум ресурсов.
  • Предусмотрен сбор статистики посещений и переходов по привязанным ссылкам — с помощью Google Analytics легко оценить эффективность рекламного объявления.

Крупные игроки мирового рынка, включая Apple , Amazon , Mozilla, постепенно отказываются от флеш-технологий. Google уже отключил поддержку флеш-анимации в своем браузере Chrome , а также полностью перешел на HTML5-баннеры в сервисах поисковой рекламы.

Методы разработки

Баннер HTML5 представляет собой отдельно созданную страницу. На сайт рекламное объявление встраивается как плавающее окно через тег «iframe». Для разработки баннера можно использовать разные методы.

Читайте так же:
Как отключить историю в Яндекс.Браузере

CSS3 и JavaScript

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

Но это задача для профессионала, владеющего специфическими навыками верстки. Кроме того, разработка баннера средствами CSS3 и JavaScript занимает много времени.

Adobe Edge Animate

Специализированная программа проста в использовании — для создания анимированного контента не требуется знать HTML5, CSS3 и JavaScript. Чтобы освоить Edge Animate, можно воспользоваться многочисленными видеоуроками и руководствами в Сети.

  • Значительная часть процессов автоматизирована, библиотека из трех десятков визуальных эффектов ускоряет и упрощает работу.
  • Поддерживается импорт популярных форматов: HTML, .gif, .jpeg, .svg, .png, поддерживаются аудио- и видеоформаты.
  • Готовый баннер отвечает всем техническим стандартам Google и Яндекса , адекватно отображается браузерами и мобильными приложениями.

К недостаткам относят отсутствие русифицированной версии. Также следует учесть, что проект Adobe Edge Animate был остановлен в 2015 году, обновлений нет и не будет. Программу можно найти в архиве Creative Cloud.

Adobe Animate CC

Из-за массовых отказов от использования технологии Flash, разработчики Adobe Flash Professional доработали свою программу и переименовали ее в Animate CC. Интерфейс практически тот же, но возможности уже иные.

Основные достоинства Animate CC:

  • Включена функция создания 3D изображений.
  • Ассортимент векторных кистей, использование возможностей растровой графики (недоступно для Edge Animate).
  • Регулярное появление обновлений, расширение функционала.
  • Предусмотрена русифицированная версия.
  • Конечные файлы экспортируются в JavaScript/HTML, gif, jpeg, mov, svg, png, oam. Чтобы ускорить загрузку баннера, его элементы можно сохранить в спрайтах одним нажатием кнопки.

У Animate CC есть два существенных недостатка:

  • Программу не очень просто освоить самостоятельно, а уроков пока создано не так много, не все функции полностью охвачены.
  • Отсутствует автоматизация многих функций (в отличие от Edge Animate), поэтому требуется тратить больше времени и сил для создания анимированных рекламных объявлений.

Google Web Designer

Бесплатный редактор от Google придуман для создания HTML5-баннеров, причем программа изначально ориентирована на AdWords — в нее встроены шаблоны рекламных блоков соответствующих размеров.

Google Web Designer порадует пользователя:

  • Простым интерфейсом.
  • Готовыми шаблонами для рекламных объявлений на площадках Google .
  • Русифицированной версией.
  • Возможностью создавать адаптивные баннеры, подстраивающиеся под ширину сайта — такие рекламные блоки эффектно смотрятся на экранах с любым разрешением.

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

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

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

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

При изменении ориентации экрана смартфона или планшета, на мониторах ПК и экранах ноутбуков с разным разрешением баннеры с адаптивным дизайном смотрятся одинаково эффектно. В стандартном варианте отзывчивый баннер имеет фиксированную высоту, а ширина автоматически подгоняется под размеры страницы. По сути, такой баннер представляет собой резиновую HTML5-страницу с использованием CSS3.

Программа Google Web Designer позволяет создать гибкий макет, в котором компоновка элементов баннера меняется при изменении ширины окна.

Создание адаптивной страницы

В начале работы программа Google Web Designer предлагает создать новый файл или открыть уже существующий. В первом случае далее требуется указать название и месторасположение нового файла, а затем ниже установить флажок «Адаптивный макет». Если открыт уже существующий документ, необходимо найти панель «Адаптивные» и поставить соответствующий флажок там.

Читайте так же:
Как добавить программу в автозагрузку

Обратите внимание: создание адаптивного макета доступно не для всех типов файлов.

Положение и размеры

Ширину и высоту адаптивного баннера задают на уровне 100% — в этом случае HTML5-документ будет занимать все отведенное для него место на странице сайта.

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

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

Изменение стиля

Функционал Google Web Designer позволяет обеспечить гибкое отображение визуального контента баннера в зависимости от размеров областей просмотра и их ориентации. К примеру, информация на мониторе может отображаться в два столбца, а на экране смартфона — в один.

Чтобы задать изменение (переопределение) стиля, следует на панели «Адаптивные»:

  • внести требуемые изменения в «Правила по умолчанию»;
  • указать выбранные размеры или их диапазон в «Правилах обработки мультимедиа», задать стили отображения.

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

Пошаговая инструкция по созданию баннера

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

Google Web Designer. Где скачать, уроки, создание баннеров, анимация и шаблоны

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

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

При использовании Google Web Designer любой пользователь сможет всего за пару дней освоить процесс создания HTML5 баннеров и не нужно будет учить большое количество уроков. Для простоты Google разработал базовые шаблоны, позволяющие сделать процесс создания креатива максимально простым.

Google Web Designer – картинка

Что такое Google Web Designer и как скачать

Google Web Designer представляет собой программу для персонального компьютера, которая может работать с платформами Windows (7 и выше) и Mac (10 и выше). Скачать которую можно пройдя по ссылке: https://webdesigner.withgoogle.com/.

Скачать Google Web Designer

Среди возможностей данного ПО:

  • Интерактивные баннеры. Данные креативы смогут не только двигаться, но и при наведении выдавать заранее продуманную информацию или же выполнять заданные инструкции;
  • Динамический ремаркетинг. Данная функция будет полезна сайтам с популярными предложениями, что позволит выдавать заранее подготовленные наборы продуктов с их ценами, названиями и изображениями. В этом случае можно будет создать несколько сегментов или аудиторий, посещающих разделы сайта и заранее возвращать их при помощи креативных баннеров и выгодных предложений;
  • Анимация. Позволяет объектам двигаться, например, реклама машины станет гораздо интересней, когда она едет по дорогам или можно имитировать движение букв, составляющих название бренда. Все это позволяет привлечь внимание и сделать баннер более привлекательным, обойдя конкурентов;
  • 3D. Для тех, кто любит сложные задачи или хочет удивить своих клиентов подойдут 3D баннеры, которые можно не только пускать в рекламу, но и использовать у себя на сайте, например, в карточках ключевых товаров;
  • Простые баннеры. Позволит создать базовый баннер без знаний фотошопа, а благодаря установленным шаблонам можно будет легко подогнать каждый креатив под рекламу в Google Ads.
Читайте так же:
Скачать Unity 3D Pro полную версию на русском языке

Уроки по Google Web Designer — баннер и анимация на русском

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

Если выбрать шаблон, то на экране можно увидеть такое:

Выбрать шаблон в Google Web Designer

Выбираем шаблон

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

Если Вы еще не знакомы с интерфейсом и возможностями Google Web Designer, то лучше начать с чистого листа для освоения.

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

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

Поле «библиотека файлов»

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

Добавляем в редактор логотип и три миниатюры из статьи

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

В итоге получаем двух секундный баннер, показывающий превью статей с лого на чистом листе с имитацией движения: https://web-rynok.ru/forbanner/banner5.html

Шаблоны в Google Web Designer

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

 Войти в программу Google Web Designer

После этого выбираем «Использовать шаблоны».

Галерея шаблонов

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

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

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

Выбор формат макета

В этом случае пользователь сможет подготовить баннер под любые размеры, к тому же они будут указаны. Соответственно, мы получаем готовый список размеров, базовый шаблон, в который останется только установить собственные картинки/видео и тем самым реклама в Google Ads сможет собрать как можно больше показов при высоком значении CTR.

Заключение

Google Web Designer это новый и удобный способ начать создавать привлекательные креативы, а также позволяющий маркетологам и директологам без знаний Фотошопа и других графических программ быстро научиться рисовать анимированные HTML5.

Данный инструмент упростит жизнь любому специалисту, работающему с рекламой и позволит повысить показатели рекламных каналов, за счёт привлекательных креативов.

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

голоса
Рейтинг статьи
Ссылка на основную публикацию