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

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

Для наглядности я помещу на холст пару дивов и залью их разным цветом. Приступим.

#выделение

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

Два круга в центре предназначены для вращения элемента. Малый позволяет указать точку оси вращения. Наведите на него курсор, переместите в нужное место. А большой круг вращает объект.

Инструмент выделение и его настройки

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

Здесь следует отметить, что в качестве контейнера может выступать не только холст, то есть рабочая область, как в нашем случае. Контейнером может выступать другой Div, в который мы положим эти элементы. Но такие вложенные структуры нам вряд ли пригодятся.

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

Последние кнопки отвечают за перемещение элементов по глубине относительно друг друга. Мы можем двигать элементы наверх и вниз, выносить на передний и задний план. Обратите внимание на временную шкалу. Элементы здесь представлены в качестве слоев и мы начинаем двигать слои вверх, вниз. Происходит наложение слоев друг на друга, как в фотошопе.

#путь перемещения

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

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

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

#3д-моделирование

Далее следуют инструменты работы с 3D-объектами. На панели настроек вы можете выбирать локальное или глобальное изменение. Выделите элемент для редактирования. Как видите, появляется инструмент работы с осями x, y, z и мы можем вращать объект по нужной оси. Опять же, это вам не пригодится.

#теги

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

Интерфейс и инструменты Google Web Designer: https://support.google.com/webdesigner/answer/3187129

#контуры

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

Если переключиться в “Режим кода”, то можно заметить, что контурные инструменты создают объекты формата .svg. Не уверен, что этот набор вам пригодится.

#текст

Инструмент “Текст”, полагаю, в комментариях не нуждается. Как видите, панель настроек говорит сама за себя. Единственное, хочу отметить, что для работы со шрифтами Google Web Designer предлагает не что-нибудь, а библиотеку Google Fonts с удобным фильтром.

Сортируйте по кириллическому начертанию и берите в работу популярные, стильные и проверенные временем шрифты. Например, семейства Roboto. Мне они очень нравятся.

#заливка и градиент

Двигаемся далее. Набор инструментов “Заливка, контур, градиент”. С заливкой и контуром не должно возникнуть проблем. “Заливка” позволяет залить объект сплошным цветом, “Контур” – соответственно, задать оформление границ элемента, а инструмент “Градиент” используется для корректировки уже существующего градиента у элемента. Все примерно как в фотошопе.

#рука

Инструмент “Рука” позволяет ухватиться за точку в рабочей области, включая область вне холста, и двигаться таким образом.

#масштаб

“Масштаб” вам уже знаком. Упрощенный вариант дублируется в правом нижнем углу рабочей области.

#область просмотра

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


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


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