HTML-5 баннер для Google Ads в Google Web Designer

Приветствую, друзья! На связи Евгений Тридчиков и в этом видео мы сделаем HTML-5 баннер для Google Adwords фиксированного размера с простой анимацией. Рекомендую к просмотру видео в конце записи!

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

Таким образом, у нас на входе PSD-документ с понятными слоями. Задача – анимировать и загрузить в рекламный аккаунт Adwords.

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

Если вы не знаете, как должен выглядеть баннер, вот краткая инструкция.

Основные элементы баннера:

  1. атмосферное фоновое изображение или паттерн
  2. емкий оффер, то есть заголовок
  3. CTA, то есть призыв к действию, в качестве которого, как правило, выступает кнопка

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

Готовим медиа для Google Web Designer

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

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

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

Сохраняем по слоям

Особого внимания заслуживает кнопка. В Google Web Designer я планирую задействовать компонент “Кнопка изображения”. Для этого мне понадобится три состояния элемента: спокойное, при наведении, при клике. Я позаботился об этом заранее и сохраняю каждый слой отдельно.

Собираем кусочки в целое

Отлично, мы разбили статичный вариант баннера на слои и сохранили в папку. Перемещаемся в Google Web Designer. Создаем новый документ с чистого листа. Баннер, фиксированный размер 300х250 пикселей, контекст – Adwords. Это вы уже умеете.

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

Накидываем бекграунд, выравниванием по центру. Логотип, по центру. Заголовок: строка 1, строка 2. Выравнивание по центру.

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

Раскадровка: сценарий анимации

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

  • Первый кадр – только бекграунд.
  • Второй – появление логотипа из точки, который резко увеличивается, потом резко уменьшается, затем принимает нормальный размер и теряет непрозрачность.
  • Третий кадр – появление заголовка построчно с настраиваемой динамикой. Я буду использовать Bumps, о котором рассказывал в прошлом видео. Благодаря этому заголовок будет выезжать с отскоком.
  • Четвертый кадр – появление кнопки в стиле логотипа с резкими скачками размера.
  • Пятый – появление курсора и два щелчка по кнопке.

Это немного сложнее, чем стандартная анимация графических шаблонов, которые предлагает библиотека Google Adwords. Но далеко не все, на что способен Google Web Designer. Поехали!

Статичный в анимированный

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

Выделяю первый кадр, свойста объекта, преобразование, абсолютное значение, третья строка отвечает за масштаб. Жму скрепку для сохранения пропорций, ставлю 0.1, разделитель точка. Таким образом, в первом кадре лого не будет видно, это просто точка.

Выделяем второй кадр, ставим 1.5. Во втором кадре лого сильно увеличиться.

Третий кадр – масштаб примерно 0.5.

Четвертый кадр – масштаб в норму.

И наконец пятый кадр – поправим масштаб на единицу, а на вкладке “Стиль” изменим уровень прозрачности на 0.5.

Динамику поставим везде “Easy-In-Out” за исключением последнего интервала. Здесь пускай будет линейная по умолчанию. Проверим, что получилось. Хорошо.

Добавляем анимацию

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

Заголовок 1 будет появляться слева. Поэтому я выделяю первый кадр и устанавливаю относительное положение по горизонтали -50%. Выделяю второй кадр и устанавливаю положение по центру.

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

Выделяю оба интервала и задаю пользовательскую динамику, о которой я рассказывал в прошлом видео. Эффект отскока. Проверим, что получается. Отлично.

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

Итак, в первом кадре кнопка начинает появление из точки. Стало быть, идем в свойства, преобразование, масштаб. Ставим ноль. Во втором кадре гипер значение. И в последнем нормальное, то есть 1. Динамику поставим везде “Easy-In-Out”. Проверим промежуточный результат. Хорошо.

Теперь курсор. Начинает появление сразу после кнопки, значит делаем слой видимым, ставим ползунок в нужную точку, добавляем ключевой кадр. Напомню, что по моей задумке курсор-рука делает двойной клик. Значит у меня будет несколько ключевых кадров.

Первый – когда он начинает движение за кадром. Второй – когда он приехал на кнопку. Третий – когда он уменьшился, как бы кликая. Четвертый – когда увеличился. И так дважды. Итого шесть ключевых кадров. Нулевой удаляем.

Так, выделяем первый кадр. Свойства – Положение. Здесь курсор находится в положении 100% вправо относительно холста. Во втором кадре соответственно примерно здесь, приехал на кнопку. Во всех остальных аналогично, поэтому выделяем ключевые кадры с помощью зажатой клавиши Command и устанавливаем значение сразу для всех.

Так, если во втором он приехал, то в третьем он должен уменьшиться. Идем в преобразование, масштаб и ставим примерно 0.7.  Четвертый кадр без трансформации. Пятый опять уменьшение. Шестой без изменений. Динамика по умолчанию. Запустим превью и проверим, что получилось.

Двойной клик можно оставить, а вот появление хочется сделать более активным. Для этого изменим динамику на “Easy-In-Out”. Годится.

Обратите внимание, как реагирует компонент “Кнопка изображения” на взаимодействие с баннером. Кнопка имеет три состояния: спокойное, при наведении и при нажатии. Благодаря этому эффекту мы и заморочились с тремя слоями. Зато интерактив.

Вернемся в интерфейс. Обратите внимание на вкладку “Инспектор объявлений”. Как видите, он подсчитывает размер баннера автоматически и сообщает о запасе прочности. В выпадающем списке содержитcя подробный набор требований и соответствие им.

Интересный момент: если перейти в режим кода и удалить мета-тег, который отвечает за определение контекста документа, то “Инспектор объявлений” поменяет свой норматив на норматив по умолчанию – DoubleClick. А это уже другие требования к размеру и прочим атрибутам. Имейте это в виду.

Публикация баннера

Пришло время для публикации. Выбираем “Локально”, в диалоговом окне оставляем настройки по умолчанию. Добавлять границу не будем, потому что Adwords этого не требует.

Слева представлена “Сводка” публикуемого документа. Здесь вы можете видеть контекст, размер в полном и сжатом виде, количество медиа, страниц или холстов, а также соответствие требованиям контекста, то есть рекламной платформы.

Даем названием файлу, выбираем место сохранения и жмем “Опубликовать”. Поздравляю, вы только что создали и упаковали свой первый HTML-5 баннер для Google Adwords! Аналогичные действия вы можете проделать для других типовых размеров. На следующем шаге мы загрузим креатив в рекламный аккаунт.

Проверяем с помощью HTML-5 валидатора

Но прежде вы должны узнать о “HTML-5 Validator”. Это онлайн-сервис от Google, который позволяет проверить креативы перед загрузкой в аккаунт Google Adwords. Ссылку прикладываю под видео.

HTML-5 Validator: https://h5validator.appspot.com/dcm/asset

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

Вкладка “Объявления и расширения”, “Загрузить медийные объявления”. Выбираем .zip на компьютере, вставляем конечный URL, готово. Если архив содержит ошибки, мы сразу увидим уведомление в этом окне.

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

Три важных момента, друзья

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

Но если бы мы установили в баннере перенаправление по клику (а это делается с помощью вкладки “События” в Google Web Designer), то его значение все равно переопределится конечным URL, вот этим значением.

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

Поддерживаемые размеры баннеров в Google Ads

Далее – “Поддерживаемые размеры и форматы”. В этой таблице вы найдете ответ на вопрос: баннеры каких размеров мне нужно делать? Если вы осилите все – это подвиг. Но начать можно с самых популярных, например: 300х250, 120х600, 300х600, 728х90.

Третий важный момент: вся рекламная площадь объявления кликабельна. Это значит, что транслируемый баннер сработает по клику в любом месте: здесь, здесь, здесь, везде. По большому счету мы могли ограничиться простой кнопкой. Но этот прикол с компонентом делает баннер интерактивным и более стильным, согласитесь. Как поступить в итоге – решать вам.

Ну и последнее. Вы могли заметить, что в этом видео я не делал подробные остановки на инструментах Google Web Designer. Я подробно описал интерфейс и назначение инструментов в первых видео. Если у вас остались вопросы, посмотрите их обязательно.


Я приложу под видео баннер, который получился в результате данного урока, чтобы вы могли открыть его в Google Web Designer и разобраться. Если видео получилось полезным – ставьте палец вверх и поделитесь с друзьями. На связи был Евгений Тридчиков и я желаю вам великолепного дня!

Скачать исходники из видео: https://yadi.sk/d/FQiu7-Do3ZLvBv


comments powered by HyperComments
(2 оценок, среднее: 5,00 из 5)
Загрузка ...
Блог Евгения Тридчикова