Как сделать баннеры html

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

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

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

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

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

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

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

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

Web Designer поддерживает изображения, видео и аудиофайлы.

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

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

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

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

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

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

Затем открываем вкладку «Объявление Google — Переход».

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

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

Аналогично можно посмотреть заданные стили CSS.

Также доступен предварительный просмотр баннера в браузере — «Предпросмотр — Chrome».

Чтобы скачать итоговый вариант, кликаем на «Опубликовать — Локально».

Выбираем путь для сохранения.

Созданный баннер можно скачать в zip-архиве с Google Диска:

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

Загрузка баннеров в Google Ads

HTML5-баннеры загружаются в Google Ads так же, как и другие креативы. Чтобы использовать созданный баннер в рекламе, необходимо перейти в рекламную кампанию во вкладку «Объявления» и нажать на добавить.

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

Загрузите баннер с компьютера, введите конечный URL и сохраните объявление.

Подписывайтесь на наш канал в Яндекс.Дзен

Источник

HTML5 баннер: что такое и как создать

У нас случились HTML5-баннеры. Клиентам резко их захотелось. Мы обычно делаем в gif, так быстрее. Но если уж сильно хочется, то можно. С ними мы разобрались, заодно и вам поможем понять, что за зверь такой — этот html5 баннер и как его приручить.

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

Если кратко, html5-баннер — это динамическое рекламное изображение на сайте, которое видит пользователь. Но если привычные всем баннеры делаются на основе растровой и векторной графики, то в этом случае используются html-элементы.

В чем главный плюс баннеров в html5?

1. Креативная и привлекательная анимация, создающаяся за небольшое количество времени. Согласитесь, html5 баннеры в сравнении со статичными jpg-овскими изображениями и даже gif-ками выглядят свежо.
2. Возможность встраивания в баннер кликабельных кнопок: кнопка вызова и sms, карты, ссылки на социальные сети, календари и т.д. Интегрировать можно что угодно, даже приложения.
3. Не придется разбираться в коде. Свои html5 баннеры мы делаем в Google Web Designer, программа сама генерирует код. Удобно, если для вас код — это просто набор странных цветных символов и букв. Но у собранного программой кода есть пара нюансов, про которые мы поговорим чуть позже.
4. Легкий вес html5 баннера даже несмотря на анимацию в нем. А легкий вес баннера, как мы знаем, не влияет на скорость загрузки страницы.
5. А еще html5 баннеры — это тренд (:

Где создавать html5 баннер?

Баннеры можно собирать на разных сервисах с шаблонами, типа Canva или Bannersnack. Есть специальные конструкторы, такие как Adobe Animate, но за подобные сервисы надо платить.

А можно сделать как ТРУ-дизайнер в Google Web Designer. И вот почему:

1. Несложный интерфейс самого Google Web Designer: почитал инструкцию, потыкал и, считай, уже разобрался.
2. Легко и быстро создать простенькую, но красивую анимацию. А если уж сильно постараться, то и не простенькую создать тоже получится.
3. Google Web Designer бесплатный (:

Нюансы при создании html5 баннеров

Собрать сам баннер html5 не так уж и сложно, если есть обывательские навыки в Photoshop (:
А вот правильно «собрать»‎ код уже сложнее:

1. Изучите технические требования от площадки на которой хотите разместить баннер. Иначе будете биться в истерике, когда баннер не захочет загружаться в рекламную кампанию.
2. Не пренебрегайте поиском информации в интернетиках, если не понимаете как, куда и зачем вставлять скрипты. Как говорится, Гугл (или Яндекс) в помощь.
3. Обратите внимание на начальные настройки: если вы планируете размещать html5 баннер в Яндекс.Директе, а создаете его в Google Web Designer, то в пункте «платформа» выберите «внешнее объявление». Иначе Яндекс будет ругаться на внешние ссылки от Google. У них между собой какие-то терки, но лезть мы в это, конечно же, не будем (:
4. Следите за объемом документа. Если архив получится «жирненьким» — он не пройдет и это не из-за того, что «кто-то слишком много ест!». Запоминаем: и в Яндекс.Директ, и в Google Ads размер файла не должен превышать 150 КБ.

Лайфхаки от дизайнера

Зацикленная анимация

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

Сделать это можно в несколько простых шагов:

Добавляем событие в завершающей части вашей анимации, кликая на рабочую зону правой кнопкой мыши:

Теперь переходим к началу временной шкалы, добавляем ярлык подобным образом и присваиваем ему имя, например, «start»:

Затем нам снова предстоит путешествие в конец шкалы времени, чтобы добавить событие к только что созданному ярлыку:

В выпадающем окне выбираем «Временная шкала» — «gotoAndPlay» — получатель: page1 — ярлык «start» и нажимаем «ОК»

Поздравляем, теперь вашими трудами можно любоваться бесконечно!

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

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

В интерфейсе Google Web Designer заходим в режим кода;

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

Далее нам нужно «завернуть» рабочую область в ссылку с определенным идентификатором и вызвать метод «getClickURLNum» как показано в следующих действиях:

Находим тело баннера в коде и «заворачиваем» его в ссылку, добавляя строчку сразу после

Ниже вызываем указанный на фото метод, его можно скопировать из справочной информации Яндекс.Директа в разделе «Медийная кампания» —«Требования к HTML5-баннерам»

Проделав данные методы с кодом, html5 баннер без проблем загрузится на рекламную площадку. Желаем успехов!

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

Автор: Ксения Лазарева — специалист по интернет-рекламе

Автор: Мария Климовских — дизайнер

Источник