Google Web Designer: обзор интерфейса (2018)

Приветствую, друзья! На связи Евгений Тридчиков, и этим видео я начинаю пошаговый видеокурс по Google Web Designer для начинающих. Сразу оговорюсь, что данные уроки рассчитаны на специалистов по контекстной рекламе…

Это означает, что мы не затронем сложную анимацию, на которую могут рассчитывать дизайнеры с опытом. Но могу заверить, что в результате вы научитесь работать с этим инструментом и делать стильные анимированные баннеры HTML-5 для Google Adwords, Яндекс Директ и для размещения на сайте.

Результат зависит от вашей фантазии, навыков работы с графическим редактором и требованиям, которые вы предъявляете к дизайну креативов. Данный урок посвящен обзору интерфейса Google Web Designer. Поехали!

Шаблоны в Google Web Designer

Скачать программу вы можете на официальном сайте: https://www.google.com/webdesigner/

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

Нажав на кнопку “Использовать шаблон”, вы попадаете в галерею шаблонов. Как видите, их немного. Есть удобный фильтр, но все варианты помещаются на одной странице, поэтому его назначение не совсем понятно. Видимо, галерея планирует расширяться.

Выбрав определенный шаблон (например, “Banner”), вы можете отметить макет в его коллекции и начать работу. Кнопка “Предварительный просмотр” запускает превью макета в браузере.

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

В то же время особого внимания заслуживает вкладка “Мои шаблоны”. Эта библиотека позволяет использовать пользовательские шаблоны документов и полезна, когда вы работаете с несколькими проектами и готовите баннеры со схожим набором элементов. Как сделать из документа собственный шаблон, то есть заготовку, мы рассмотрим в следующих видео.

Конфигурация документа

А пока возвращаемся в стартовое меню и выбираем “Создать файл с чистого листа”. Перед нами открывается конфигурация пустого файла. Рассмотрим ее настройки.

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

Слева расположено меню выбора типа документа. Оно делит все документы на две категории: Объявления и Другие. Основную часть окна занимают настройки документа. Как видите, у разных документов разная начальная конфигурация.

Интересно, что Google Web Designer изначально позиционируется, как инструмент для создания анимированных баннеров в формате HTML-5. В то же время он позволяет создавать CSS, JavaScript и XML документы.

Настройки объявления типа «Баннер»

Итак, мы будем работать с объявлениями типа “Баннер”. Разберем настройки документа. “Название” и “Место” сохранения – в объяснении не нуждаются с той лишь оговоркой, что имя документа максимум 50 символов. “Контекст” – это рекламная платформа, для которой готовится документ.

С технической точки зрения контекст – просто мета-тег, который добавляется в исходный код документа. Однако в зависимости от контекста, к баннеру предъявляется различный набор требований, которые мы рассмотрим позже в “Инспекторе объявлений”.

Конфигурация объявления типа Баннер

Обратите внимание, что каждая рекламная платформа поддерживает определенные типы документов. Так, Adwords не поддерживает раскрывающиеся объявления или так называемые лайтбоксы. Их вы можете создавать только в интерфейсе аккаунта.

Мы будем готовить баннер для Google Adwords. Поэтому выбираем соответствующий контекст в выпадающем меню.

“Размеры” – позволяет установить фиксированный размер холста. Вы можете выбрать один из предустановленных либо определить пользовательский размер.

Требования к размерам и форматам HTML-5 объявлений: https://support.google.com/adwords/answer/1722096

Галочка “Адаптивный макет” позволяет начать работу с адаптивным документом.

Технически это означает, что страница документа получит свойства ширина=100%, высота=100% в отличие от фиксированного размера в пикселях. Работу с адаптивными баннерами мы рассмотрим в следующих видео, поэтому галочку не ставим.

“Режим анимации” – позволяет задать тип временной шкалы. Однако это не важно, потому что в рамках документа вы можете переходить между режимами анимации в один клик. Я оставляю “Расширенную”, потому что именно с ней мы будем работать.

Кнопка “Окей”. Поздравляю, новый документ готов!

Итак, перед вами интерфейс Google Web Designer. Ничего не напоминает? Правильно – фотошоп. Поэтому если вы имеете опыт работы с этим графическим редактором, то разберетесь быстро! А я вам помогу.

Обзор интерфейса Google Веб-дизайнер

Для удобства разделим интерфейс на 7 областей.

Контекстное меню

В самом верху находится контекстное меню: “Файл”, “Правка”, “Вид”, “Окно”, “Справка”. Оно включает базовый набор настроек документа, поэтому объяснять здесь нечего. Внимания заслуживает меню “Правка” — “Настройки”.

Здесь есть несколько полезных вкладок, которые помогут вам задать отображение документа по умолчанию. Например, предустановить “Тип объявления” и “Контекст” или отключить отображение “Контура” у элементов, как это сделал я для удобства. И даже выбрать цветовую тему для режима “Просмотр кода”.

Интерфейс Google Веб-дизайнер в справке: https://support.google.com/webdesigner/answer/3187129

Ниже контекстного меню располагается панель вкладок для переключения между открытыми документами.

Панель просмотра

В правом верхнем углу находится “Панель просмотра”, которая содержит несколько вкладок.

  • “Справка” открывает поп-ап со справочной информацией по Google Web Designer.
  • “Режим просмотра” – в нем мы сейчас находимся.
  • “Режим кода” открывает исходный код документа, начинку.
  • Вкладка “Предварительный просмотр” позволяет выбрать браузер и увидеть превью документа. Стоит отметить, что иногда отображение бывает некорректным.
  • Вкладка “Опубликовать” позволяет выбрать тип публикации документа: Локально, на Google диск или прямо в DoubleClick Studio. Мы будем публиковать баннеры локально.

Обратите внимание, что Google Web Designer удобен для работы как разработчикам, которые привыкли работать с исходным кодом, так и для людей, которые плохо знакомы с html, как мы с вами. Для работы нам больше подойдет “Режим просмотра”.

Режим кода в Google Web Designer

В то же время мы можем использовать “Режим кода” для устранения неполадок и для интересных наблюдений. Например, обратите внимание на строку номер 8: мета-тег с именем «environment» это контекст, который мы задали при создании документа. Как видите, он принимает значение «gwd-adwords». Если при создании документа мы выбираем другой контекст, то мета-тег принимает иное значение.

Или строка за номером 53: как видите, здесь размер страницы принимает фиксированные значения в пикселях, которые мы определили шагом ранее. Если мы ставим галочку “Адаптивный” при создании документа, то значения ширины и высота здесь принимают значения 100%.

Поэтому далее в процессе работы рекомендую обращаться к “Режиму кода”. Так вы можете наблюдать зависимость между появлением новых элементов на холсте и их фактическим описанием в исходном коде. Это прокачает вас и поможет ближе познакомиться с Google Web Designer.

Панель инструментов

Движемся дальше по интерфейсу и слева видим “Панель инструментов”. Возможности инструментов я подробно опишу в следующем уроке, поскольку это тема для отдельного видео. Здесь же я бегло пробегусь по нашему арсеналу.

Инструмент “Выделение” позволяет выделять, перемещать и трансформировать объекты на холсте. “Путь перемещения” позволяет корректировать линию движения анимации. Далее два инструмента для работы с 3D-объектами, мы не будем использовать их в рамках курса.

“Теги” для прошаренных, “Контуры” для гиков, “Текст”, “Заливка и градиент”, “Вращение рабочей области”, “Рука”, “Масштаб”. И, наконец, “Область просмотра” для работы с адаптивными документами.

Панель настроек инструмента

Двигаемся далее. Правее “Панели инструментов” находится “Панель настроек инструмента”. Как видите, каждый инструмент имеет уникальный набор настроек.

Панель свойств и компонентов

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

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

Временная шкала

Двигаемся далее, и внизу видим “Временную шкалу”. Она предназначена для создания анимации. Если вы помните, при создании документа я выбрал “Расширенный” режим анимации и сказал, что переключение на “Быстрый” делается с помощью одного клика. Это действительно так, вот кнопка переключения.

Временная шкала в GWD

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

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

Для того, чтобы проделать это с “Временной шкалой”, просто тащите ее за шапку. Такие перемещения помогут вам организовать интерфейс в удобном виде.

Рабочая область

Ну и последнее, “Рабочая область” – центральная часть интерфейса, которая занимает основное место и где происходит самое интересное. В центре находится холст заданного размера. По бокам линейки, как в фотошопе. Линейки мы будем использовать для работы с точками адаптации.

Перемещаться по рабочей области можно с помощью скролла (я делаю это тачпадом) или с помощью инструмента “Рука”. Изменить масштаб можно в правом нижнем углу.

В левом углу находится инструмент для навигации между страницами. Он позволяет создавать, копировать и удалять страницы в рамках документа. Это пригодится в работе, например, с межстраничным объявлением. Кроме того, он показывает уровень вложенности тегов. В рамках курса он нам не пригодится.


Что ж, друзья. Вот такой вот он – интерфейс Google Web Designer. Если видео получилось полезным, ставьте палец вверх и поделитесь с друзьями. А если у вас остались вопросы, задайте в комментариях, буду рад помочь!

В качестве дополнительного материала рекомендую пройти экспресс-курс “Google Web Designer Basics” на официальном портале “Academy For Ads”. Он бесплатный и доступен сразу после регистрации. Ссылку прикладываю ниже: https://academy.exceedlms.com/student/path/1025

Кстати, если вы что-то запороли, перетаскивая панели, вы всегда можете откатить изменения. Для этого выберите “Окно”, “Рабочая область” (здесь есть предустановленные пресеты) и выберите “Исходный вариант”. Ну а в следующем уроке мы подробно рассмотрим “Панель Инструментов”. Поехали!


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