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

1. Що таке банер?
2. Збираємо шматочки в ціле
3. Розкадрування: сценарій анімації
4. Статичний в анімований
5. публікація банера
6. Три важливі моменти, друзі
7. Дивитися покрокове відео

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

Щоб креатив виглядав гідно, вам потрібно заздалегідь підготувати статичний варіант, наприклад, в фотошопі. Поставте завдання дизайнеру або зробіть самостійно, якщо вмієте працювати з графічним редактором.

Таким чином, у нас на вході PSD-документ зі зрозумілими шарами. Завдання - анімувати і завантажити в рекламний аккаунт Adwords.

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

Якщо ви не знаєте, як повинен виглядати банер, ось коротка інструкція.

Основні елементи банера:

1. атмосферний фонове зображення або патерн
2. ємний оффер, тобто заголовок
3. CTA, тобто заклик до дії, в якості якого, як правило, виступає кнопка

Це три обов'язкові елементи, які роблять банер банером. Звичайно, можна обійтися без бекграунду, але текст з кнопкою на білому тлі складно назвати креативом. Додатково можна використовувати опис або підзаголовок, логотип, Булет. Але не всі типові розміри дозволяють це реалізувати, а невеликий текст не читабельний.

Продовжуємо рух. Переміщаємося в фотошоп, відкриваємо банер і зберігаємо медіа по верствам. Для цього я приховую всі верстви і по черзі включаю їх. Фонове зображення, лого, заголовок.

Тема, лого, кнопки зберігаю в .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я докладний набір вимог і відповідність ім.

публікація банера

Прийшов час для публікації. Вибираємо "Локально", в діалоговому вікні залишаємо налаштування за замовчуванням. Додавати кордон не будемо, тому що 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, готово. Якщо архів містить помилки, ми відразу побачимо повідомлення в цьому вікні.

Три важливі моменти, друзі

Зверніть увагу, що тільки що створений банер сам по собі нікуди не пересилає. Місце приземлення користувача ми задаємо в кінцевому 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