Google Web Designer: панель свойств и компонентов

Приветствую, друзья! На связи Евгений Тридчиков и в этом видео мы разберем “Панель свойств и компонентов”, которая по умолчанию находится справа. Смотрите видео в конце записи!

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

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

  • “Цвет” – позволяет работать с заливкой, градиентом и границей выбранного элемента.
  • “Текст” используется для форматирования объекта типа “текст”, дублирует настройки соответствующего инструмента.

Вкладка “Свойства”

Вкладка “Свойства” содержит основные настройки элемента и положения на холсте.

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

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

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

“Положение и размер” – позволяют вручную задать расположение элемента на холсте по левому и верхнему краю, а также размеры. Это можно сделать как в пикселях, так и в процентах. “Скрепка” позволяет сохранять пропорции.

Панель свойств в GWD

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

Поле “Преобразование, вращение, масштаб” позволяет сориентировать объект в трехмерном пространстве относительно рабочей области.

  • Первая строка – положение объекта по осям x, y, z относительно холста.
  • Вторая строка – вращение объекта по осям.
  • Третья строка – масштабирование объекта по осям, то есть уменьшение-увеличение.

Переключатель “Абсолютное значение” изменяет значения относительно рабочей области, то есть в абсолюте.

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

Набор настроек “Стиль” содержит две группы: “Заливка” и “Граница” и по сути дополняют вкладку “Цвет”, рассмотренную ранее.

Цвет, стиль и другие свойства элементов: https://support.google.com/webdesigner/topic/7665756

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

  • “Цвет заливки” – понятно.
  • “Переполнение” – позволяет задать правило отображение элемента, если контент выходит за его рамки.
  • “Видимость” настраивает правило видимости элемента.
  • Ну группа полей “Границы”, я думаю, интуитивно понятна.
  • “Отступы” и “Поля” соответственно позволяют задать атрибуты margin и padding. Для примера укажу произвольные значения и перейду в “Режим кода”. Как видите, в описании класса, который присвоен этому элементу, появились значения полей и отступов.

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

Компоненты в Google Web Designer

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

Неподдерживаемые компоненты: https://support.google.com/webdesigner/answer/7313608#unsupported

Например, если рассмотреть “Компоненты взаимодействия”, то Google Adwords поддерживает только типы “Интерактивная область” и “Кнопка изображения”. При этом в итоге будет кликабельна вся рекламная площадь баннера, какие настройки интерактива вы бы не использовали.

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

Вкладка “CSS” содержит все правила стилей, которые определены для выделенного элемента. Если вы знакомы с “CSS”, то сможете вносить правки самостоятельно.  

Коротко про адаптивность в GWD

Вкладка “Адаптивные” используется для задания правил адаптивности документа. С помощью “Запросов мультимедиа” документ узнает у браузера разрешение экрана и ориентацию устройства. Если заданы правила обработки, то документ адаптируется под экран и устройство.  

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

“Правила обработки мультимедиа” переопределяют свойства элементов в зависимости от размера экрана и ориентации устройства.

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

И уже в рамках них настраивать точки адаптации, что является более дотошным подходом. В этом случае мы получаем адаптивный документ с двойной ориентацией.

Таким образом, в режиме “Главных правил” мы создаем элементы и настраиваем анимацию. А в режиме “Правил обработки” мы адаптируем документ под размер рекламного места и ориентацию.

Важное замечание: “Правила обработки” не позволяют создавать новые элементы. Идея в том, чтобы изменять CSS-свойства существующих, адаптировать для удобства просмотра. В том числе анимацию. Скрыть/отобразить элемент для определенной точки адаптации всегда можно с помощью вкладки “Свойства”.

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

Вкладка «Инспектор объявлений»

“Библиотека объектов” позволяет добавить медиа с компьютера или загрузить из аккаунта DoubleСlick Studio. Для удобства можно создавать папки и структурировать контент.

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

Вкладка “Динамическая” позволяет создавать креативы для динамического ремаркетинга с использованием фида данных.

Вкладка “Структурный редактор” появилась относительно недавно. Еще одно подтверждение тому, как активно развивается Google Web Designer.

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

Кроме того, мы можем использовать фильтры элементов по умолчанию: показать только изображения, компоненты, текст, фигуры. Или использовать окошко поиска, задав имя объекта.


Смотреть видео

Вот и все, что вам пока может пригодится для создания HTML-5 баннеров. Если видео получилось полезным, ставьте палец вверх и поделитесь с друзьями. В следующем видео мы рассмотрим “Временную шкалу” и простую анимацию. Поехали!


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