Привет, друзья!
Спустя длительное время я решил вернуться к потрясающему продукту от корпорации добра — Google Web Designer. Краткий обзор этого продукта доступен по ссылке — если интересно, читайте, ставьте лайки и делитесь 🙂
Если же вы хотите узнать о методе добавления простой фигуры — просто листайте дальше.
Итак, нам понадобится:
1. Создать проект.
Как видно из скрина — все достаточно стандартно. Указывается путь, куда будет сохранен ваш рабочий файл, указывается тип контекста, размер, и анимация (имеется быстрая анимация, и режим эксперта). Важно отметить, что сегодня мы будем работать с обычным баннером — остальные варианты рассмотрим позднее. В моем случае используется быстрая анимация, и размер баннера 300х600 пикселей.
2. После активации проекта мы получаем нечто подобное:
Как видно — размер проекта уменьшен до 50% — я работаю с ноутбука, а при размере в 100% будет недоступен полный вид баннера.
3. Теперь добавим простую фигуру. Начнем с квадрата. Для его добавления потребуется активировать инструмент работы с тегами:
После этого удерживая клавишу Shift на клавиатуре и левую кнопку мыши создаем квадрат. Если же клавишу Shift не удерживать — мы получим прямоугольник. В панели «Свойства», которая расположена справа мы можем указать свойства создаваемой фигуры — цвет заливки, толщину и цвет рамки:
Для наглядности я залью квадрат красным цветом и обозначу толщину границы в 10 пикселей:
4. А теперь попробуем добавить круг. Круг — это производная от квадрата, а значит — вначале рисуем квадрат, а потом трансформируем его в круг. Аналогично с пунктом 3 — удерживая кнопку Shift на клавиатуре и левую клавишу мыши с помощью инструмента работы с тегами создаем квадрат. Для контраста у меня он будет желтым:
После этого нам нужно перейти в правую панель «Свойства» и с помощью параметров скругления углов трансформировать квадрат в круг:
так у нас было …. А вот так — стало:
Интересно отметить, что меняя параметры скругления каждого из углов отдельно вы можете получить более оригинальные фигуры, однако, об этом чуть позднее.
Итак, сегодня мы научились создавать простые базовые фигуры в Google Web Designer: квадрат и круг. Завтра-послезавтра (как только дойдут руки) — мы попробуем анимировать трансформацию одной фигуры в другую. Обещаю — все будет очень и очень просто!
Следите за новостями и не забывайте делать репост на свою страницу в соц.сети 🙂 Есть вопросы? Пишите!