Google Web Designer — создание простой фигуры

Привет, друзья!

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

Если же вы хотите узнать о методе добавления простой фигуры — просто листайте дальше.

Итак, нам понадобится:

1. Создать проект.
google-web-designer-создание-проекта
Как видно из скрина — все достаточно стандартно. Указывается путь, куда будет сохранен ваш рабочий файл, указывается тип контекста, размер, и анимация (имеется быстрая анимация, и режим эксперта). Важно отметить, что сегодня мы будем работать с обычным баннером — остальные варианты рассмотрим позднее. В моем случае используется быстрая анимация, и размер баннера 300х600 пикселей.

2. После активации проекта мы получаем нечто подобное:
google-web-designer-рабочий-проект

Как видно — размер проекта уменьшен до 50% — я работаю с ноутбука, а при размере в 100% будет недоступен полный вид баннера.

3. Теперь добавим простую фигуру. Начнем с квадрата. Для его добавления потребуется активировать инструмент работы с тегами:
google-web-designer-инструмент-работы-с-тегами

После этого удерживая клавишу Shift на клавиатуре и левую кнопку мыши создаем квадрат. Если же клавишу Shift не удерживать — мы получим прямоугольник. В панели «Свойства», которая расположена справа мы можем указать свойства создаваемой фигуры — цвет заливки, толщину и цвет рамки:
google-web-designer-свойства-объекта

Для наглядности я залью квадрат красным цветом и обозначу толщину границы в 10 пикселей:
google-web-designer-граница-и-заливка

4. А теперь попробуем добавить круг. Круг — это производная от квадрата, а значит — вначале рисуем квадрат, а потом трансформируем его в круг. Аналогично с пунктом 3 — удерживая кнопку Shift на клавиатуре и левую клавишу мыши с помощью инструмента работы с тегами создаем квадрат. Для контраста у меня он будет желтым:
google-web-designer-желтый-квадрат

После этого нам нужно перейти в правую панель «Свойства» и с помощью параметров скругления углов трансформировать квадрат в круг:
google-web-designer-скругление-углов
так у нас было …. А вот так — стало:
google-web-designer-скругление-углов-круг

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

Итак, сегодня мы научились создавать простые базовые фигуры в Google Web Designer: квадрат и круг. Завтра-послезавтра (как только дойдут руки) — мы попробуем анимировать трансформацию одной фигуры в другую. Обещаю — все будет очень и очень просто!

Следите за новостями и не забывайте делать репост на свою страницу в соц.сети 🙂 Есть вопросы? Пишите!