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


Приветствую, друзья! На связи Евгений Тридчиков
и в этом видео мы разберем “Панель свойств и компонентов”,
которая по умолчанию находится справа. Как вы помните, с помощью
трех линий сверху можно перетаскивать панель влево
и вниз для организации рабочего пространства. Или повесить в любом месте. Также можно перетаскивать
сами вкладки в рамках панели. Определенные вкладки можно
прятать/показывать с помощью контекстного меню “Окно”. Вкладку можно свернуть/развернуть
с помощью одинарного клика. Три точки справа дублируют
эти команды. Кроме того, саму вкладку
можно растягивать для удобного расположения всех настроек. Теперь давайте разберем
каждую вкладку. “Цвет” – позволяет работать
с заливкой, градиентом и границей выбранного элемента. “Текст” используется
для форматирования объекта типа “текст”, дублирует
настройки соответствующего инструмента. Вкладка “Свойства” содержит
основные настройки элемента и положения на холсте. Поле “Элемент” нельзя
редактировать, потому что оно задает тип элемента:
div, изображение, видео, текстовый блок и так далее. Поле “ID” задает идентификатор
элемента, может быть пустым. Активно используется при
работе с временной шкалой и событиями, которые мы
рассмотрим в следующем видео. Например, при создании
непростой анимации может сложится ситуация, когда
на временной шкале десяток слоев. При этом условно половина
из них это элементы типа div. В таком случае ориентироваться
между анимацией элементов будет сложно. Задав для каждого элемента
идентификатор, мы решаем эту проблему. “Положение и размер” – позволяют
вручную задать расположение элемента на холсте по левому
и верхнему краю, а также размеры. Это можно сделать как в
пикселях, так и в процентах. “Скрепка” позволяет сохранять
пропорции. При работе с адаптивным
макетом это гораздо удобнее, чем перетаскивать объект
вручную на глаз. Скажем, можно зафиксировать
положение объекта на уровне 20% сверху. В таком случае при изменении
размера контейнера элемент всегда будет на уровне
20% от верхней границы. Поле “Преобразование,
вращение, масштаб” позволяет сориентировать объект
в трехмерном пространстве относительно рабочей области. Первая строка – положение
объекта по осям x, y, z относительно холста. Вторая строка – вращение
объекта по осям. Третья строка – масштабирование
объекта по осям, то есть уменьшение-увеличение. Переключатель “Абсолютное
значение” изменяет значения относительно рабочей области,
то есть в абсолюте. Переключатель “Коррекция”
изменяет значения относительно текущего положения объекта. В этом варианте текущее
положение объекта будет считаться нулевым. Таким образом, сначала
выбираем нужный переключатель, потом вносим корректировки. Набор настроек “Стиль”
содержит две группы: “Заливка” и “Граница” и по сути дополняют
вкладку “Цвет”, рассмотренную ранее. Здесь мы можем задать прозрачность
элемента. Это полезно в работе с анимацией,
когда нужно скрыть/отобразить элемент в определенный
момент времени. “Цвет заливки” – понятно. “Переполнение” – позволяет
задать правило отображение элемента, если контент
выходит за его рамки. “Видимость” настраивает
правило видимости элемента. Ну группа полей “Границы”,
я думаю, интуитивно понятна. “Отступы” и “Поля” соответственно
позволяют задать атрибуты margin и padding. Для примера укажу произвольные
значения и перейду в “Режим кода”. Как видите, в описании класса,
который присвоен этому элементу, появились значения
полей и отступов. Обратите внимание, что
у объектов разного типа могут появляться дополнительные
настройки на вкладке “Свойства”. Кроме того, свойства есть
и у самой страницы, рабочей области. Для просмотра просто кликните
на пространство за холстом. Вкладка “Компоненты”
– это набор интерактивных помощников. Как видите, они довольно
разнообразны. Но стоит учитывать определенные
ограничения, которые предъявляют рекламные платформы. Например, если рассмотреть
“Компоненты взаимодействия”, то Google Adwords поддерживает
только типы “Интерактивная область” и “Кнопка изображения”. При этом в итоге будет кликабельна
вся рекламная площадь баннера, какие настройки интерактива
вы бы не использовали. Обратите внимание, что
есть возможность добавлять пользовательские компоненты. Но это уже высшая материя
и вам не понадобится. Вкладка “CSS” содержит
все правила стилей, которые определены для выделенного
элемента. Если вы знакомы с “CSS”,
то сможете вносить правки самостоятельно. Вкладка “Адаптивные”
используется для задания правил адаптивности документа. С помощью “Запросов мультимедиа”
документ узнает у браузера разрешение экрана и ориентацию
устройства. Если заданы правила обработки,
то документ адаптируется под экран и устройство. “Главные правила” содержат
инструкции для отображения документа по умолчанию. В режиме главных правил
мы создаем элементы, настраиваем их стиль, анимацию. “Правила обработки мультимедиа”
переопределяют свойства элементов в зависимости
от размера экрана и ориентации устройства. Мы можем задать точки адаптации
и настроить отображение документа для каждой из
них. Кроме того, мы можем разделить
правила на две группы: правила для горизонтальной и вертикальной
ориентации устройства. И уже в рамках них настраивать
точки адаптации, что является более дотошным подходом. В этом случае мы получаем
адаптивный документ с двойной ориентацией. Таким образом, в режиме
“Главных правил” мы создаем элементы и настраиваем
анимацию. А в режиме “Правил обработки”
мы адаптируем документ под размер рекламного места
и ориентацию. Важное замечание: “Правила
обработки” не позволяют создавать новые элементы. Идея в том, чтобы изменять
CSS-свойства существующих, адаптировать для удобства
просмотра. В том числе анимацию. Скрыть/отобразить элемент
для определенной точки адаптации всегда можно
с помощью вкладки “Свойства”. “Инспектор объявлений”
проверяет документ на соответствие требованиям выбранного
контекста. В нашем случае это “Adwords”,
и пока все в порядке. Не забывайте заглядывать
сюда перед публикацией. “Библиотека объектов”
позволяет добавить медиа с компьютера или загрузить
из аккаунта DoubleСlick Studio. Для удобства можно создавать
папки и структурировать контент. Вкладка “События” позволяет
настраивать интерактив в ответ на действия пользователя,
настраивать сценарии работы документа и делать прикольные
штуки с анимацией. Например, зацикливание. Вкладка “Динамическая”
позволяет создавать креативы для динамического ремаркетинга
с использованием фида данных. Вкладка “Структурный редактор”
появилась относительно недавно. Еще одно подтверждение
тому, как активно развивается Google Web Designer. Данный редактор позволяет
работать с картой документа, если проводить аналогию
с картой сайта. На вкладке мы видим структуру
документа в виде дерева. По клику выделяется соответствующий
элемент на рабочей области. Кроме того, мы можем использовать
фильтры элементов по умолчанию: показать только изображения,
компоненты, текст, фигуры. Или использовать окошко
поиска, задав имя объекта. Вот и все, что вам пока может
пригодится для создания HTML-5 баннеров. Если видео получилось полезным,
ставьте палец вверх и поделитесь с друзьями. В следующем видео мы рассмотрим
“Временную шкалу” и простую анимацию. Поехали!

One Reply to “Google Web Designer: панель свойств и компонентов (2019)🌞”

  1. Всё здорово и замечательно, но чуть- чуть разжовонасти бы… и помедленнее. А то по 100 раз перематывать напрягает )

Leave a Reply

Your email address will not be published. Required fields are marked *