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: квадрат и круг. Завтра-послезавтра (как только дойдут руки) — мы попробуем анимировать трансформацию одной фигуры в другую. Обещаю — все будет очень и очень просто!

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

Support the Blog!

Running a blog takes a lot of effort, time, and passion. Your donations help improve the content, inspire new ideas, and keep the project going.
If you’ve enjoyed the blog’s materials, any support would mean the world to me. Thank you for being here! ❤️

PayPal Logo Donate via PayPal

Revolut Logo Donate via Revolut

Одна мысль про “Google Web Designer — создание простой фигуры”

Комментарии закрыты.