В интерфейсе Google Web Designer есть большая центральная область для работы над проектами и кодом. Вокруг нее располагаются панели инструментов и настроек выбранного инструмента, а также временная шкала и набор панелей, с помощью которых можно изменять элементы, добавлять компоненты, события и т. д.
Документ
Текущий документ располагается в центре интерфейса Google Web Designer.
Доступны два режима просмотра документа.
- В режиме просмотра макета текст, изображения и другие элементы документа выглядят так же, как в браузере. Белая часть рабочей области представляет видимую часть объявления или веб-страницы.
- В режиме просмотра кода показывается код страницы с цветовым выделением и форматированием.
Параметры режимов просмотра макета и кода можно задать в меню Настройки.
1. Панель инструментов. 2. Панель настроек инструмента. 3. Временная шкала. 4. Панели. 5. Панель просмотра.
Панель просмотра
Панель просмотра позволяет переключаться между режимами просмотра макета и кода, а также просматривать документ в браузере и публиковать объявления.
Инструменты
На этой панели находятся инструменты для создания элементов в рабочей области и управления ними. С помощью этих инструментов можно создавать текст и простые элементы страницы, выбирать цвета и работать с 3D-объектами.
| Инструмент | Описание |
|---|---|
Инструмент выделения |
Выбор и перемещение объектов в рабочей области |
Инструмент "Путь перемещения" |
Прорисовка путей перемещения для анимированных элементов. Эта функция недоступна для объявлений AMPHTML и графических объявлений. |
Инструмент "Поворот 3D-объекта" |
Вращение объектов в трехмерном пространстве |
Преобразовать 3D-объект |
Перемещение объектов в трехмерном пространстве |
Инструмент работы с элементами |
Создание любых HTML-тегов путем нажатия и перетаскивания на рабочую область |
| Инструменты "Перо", "Овал", "Прямоугольник" и "Линия" |
Создание рисунков SVG, в том числе простых фигур с помощью соответствующих инструментов, а также кривых Безье с помощью инструмента "Перо" |
Инструмент "Текст" |
Добавление или изменение текста |
Прямоугольная, овальная и многоугольная маски |
Добавление маски clip-path к элементу |
Инструменты "Прямоугольная заставка", "Овальная заставка" и "Многоугольная заставка" |
Добавление в HTML-код тега div с фильтром заставки. Эта функция доступна только для изображений и видеодокументов |
Инструменты "Заливка", "Контур" и "Градиент" |
Изменение цвета элементов в проекте, в том числе цвета контура, обычной и градиентной заливки |
Инструмент "Пипетка" |
Выбор цвета на элементе в рабочей области |
Инструмент 3D-вращения рабочей области |
Изменение трехмерного отображения проекта |
Инструмент "Рука" |
Изменение вида рабочей области |
Инструмент "Масштаб" |
Увеличение и уменьшение масштаба объявления |
 Инструмент работы с цветом заливки и контура |
Изменение активного цвета заливки и контура |
Настройки инструмента
На панели настроек инструмента вверху показываются все функции, доступные для выбранного инструмента. Например, если вы работаете с текстом, там будут появляться шрифты и функции для форматирования.
Временная шкала
Временная шкала позволяет анимировать объекты с помощью ключевых кадров. В быстром режиме анимация создается покадрово, а в расширенном режиме можно анимировать каждый элемент по отдельности.
Панели
В Google Web Designer есть следующие панели: Цвет, Свойства, Текст, Компоненты, CSS, Эффекты CSS, Адаптивные, События, Динамические, Библиотека, Инспектор объявлений и Структурный редактор. Можно изменять размер панелей, объединять их и менять местами. Подробнее о настройке панелей…
Вкладки документов
Документы открываются на разных вкладках. Переключаться между документами можно, нажимая на вкладки или используя быстрые клавиши Ctrl + Tab (переход к следующему документу) или Shift + Ctrl + Tab (переход к предыдущему документу).
Если вкладки не помещаются в одном ряду, то список всех открытых документов можно увидеть во всплывающем меню, нажав на значок 