Интерфейс Google Web Designer

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

Обзор интерфейса

Документ

Текущий документ располагается в центре интерфейса Google Web Designer.

Доступны два режима просмотра документа.

  • В режиме просмотра макета текст, изображения и другие элементы документа выглядят так же, как в браузере. Белая часть рабочей области представляет видимую часть объявления или веб-страницы.
  • В режиме просмотра кода отображается код страницы с соответствующим цветовым выделением и форматированием.

Настройки для режимов просмотра макета и кода можно задавать в меню Настройки.

1. Панель инструментов 2. Панель настроек инструмента 3. Временная шкала 4. Панели  5. Панель просмотра

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

Панель просмотра позволяет переключаться между режимами просмотра макета и кода, а также просматривать документ в браузере и публиковать объявления.

Инструменты

На панели инструментов находятся инструменты для создания элементов в рабочей области и управления ними. С помощью этих инструментов можно создавать текст и простые элементы страницы, выбирать цвета и работать с 3D-объектами.

Инструмент Описание

Инструмент выделения
Выбор и перемещение объектов в рабочей области

Инструмент "Путь перемещения"
Прорисовка путей перемещения для анимированных элементов Эта функция недоступна для объявлений AMPHTML.

Поворот 3D-объекта
Вращение объектов в трехмерном пространстве

Преобразовать 3D-объект
Перемещение объектов в трехмерном пространстве

Инструмент работы с тегами
Создание любых HTML-тегов путем нажатия и перетаскивания на рабочую область

Инструмент "Текст"
Добавление текста

Инструмент "Перо" и инструменты добавления фигур
Создание рисунков SVG, в том числе простых фигур с помощью соответствующих инструментов, а также кривых Безье с помощью инструмента "Перо"

Инструменты цвета
Изменение цвета элементов в проекте, в том числе цвета контура, обычной и градиентной заливки

Инструмент 3D-вращения рабочей области
Изменение трехмерного отображения проекта

Инструмент "Рука"
Изменение вида рабочей области

Инструмент "Масштаб"
Увеличение и уменьшение масштаба объявления

Инструмент изменения размера области просмотра
Изменение размера области просмотра до необходимого Эта функция недоступна для объявлений AMPHTML.

Настройки инструмента

На панели настроек инструмента отображаются все функции, доступные для выбранного инструмента. Например, если вы работаете с текстом, там будут показываться шрифты и функции для форматирования.

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

Быстрый режим
Расширенный режим

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

Панели

В Google Web Designer есть следующие панели: Цвет, Свойства, Текст Компоненты, CSS, Адаптивные, События, Динамическая, Библиотека, Инспектор объявлений и Структурный редактор. Можно изменять размер панелей, объединять их и менять местами. Подробнее о настройке панелей

Вкладки документов

Документы открываются на разных вкладках. Переключаться между документами можно, нажимая на вкладки или используя быстрые клавиши Ctrl + Tab (переход к следующему документу) или Shift + Ctrl + Tab (переход к предыдущему документу).

Если вкладки не помещаются в одном ряду, то можно просмотреть список всех открытых документов во всплывающем меню, нажав на значок  справа от вкладок. Чтобы перейти к документу, выберите его. Чтобы закрыть документ, наведите указатель на его название и нажмите значок x.

Эта информация оказалась полезной?
Как можно улучшить эту статью?