Креативный директор MDA
Куратор курса:
Профессия: Веб-дизайнер
Соберете первый экран сайта в Figma
1. Создайте фрейм размером 1400х800 пикселей.
2. В пункте меню выберите инструмент текст. Курсором в виде плюса нажмите на фрейм и введите Логотип.
5. С зажатой клавишей Alt/Option скопируйте слово логотип и напишите цену.
3. В пункте меню выберите инструмент Rectangle и нарисуйте условный пункт меню. С зажатой клавишей Alt/Option скопируйте прямоугольник простым перетаскиванием и создайте условные пункты меню.
4. То же самое повторите с нижним блоком, после чего в пункте меню выберите инструмент Ellipse и с зажатой клавишей Shift нарисуйте условный круг выбора цвета. Скопируйте еще два круга.
6. В пункте меню выберите инструмент Rectangle и нарисуйте прямоугольник. Поверх этого прямоугольника с зажатой клавишей Alt/Option скопируйте текст и напишите слово кнопка.
7. В пункте меню выберите инструмент Rectangle и нарисуйте условный прямоугольник, в котором будет картинка.
1. Создайте фрейм размером 1400х800 пикселей.
2. В правой части меню в пункте Layout Grid выберите колонны (Columns), и задайте им следующие параметры: Count = 12, Margin = 80, выберите любой цвет.
8. Нарисуйте прямоугольник с размерами 700х800 пикселей и в параметре Fill выберите пипетку, после чего выберите необходимый цвет.
9. Поместите прямоугольник ниже всех на панели слоев, а также в правый угол на фрейме.
3. Из вашей папки перетащите в окно фигмы картинку с логотипом, выставив ее по левому краю сетки.
4. Далее, с помощью инструмента текст, создайте пункты меню.
5. Выделив все пункты меню, задайте им следующие настройки:
начертание = Regular, размер пунктов = 16.
6. В правом верхнем углу в панели меню выравниваем элементы относительно
друг друга.
7. В параметре More Options выберите пункт Tidy up, после чего в окне расстояний укажите число 80 (80 пикселей).
10. С зажатой клавишей Alt/Option скопируйте текст из пункта меню и напишите заголовок "Race max logic pro", задав ему необходимые параметры.
11. То же самое, проделайте с текстом "Артикул: 000000001"
12. В пункте меню выберите инструмент Ellipse и с зажатой клавишей Shift нарисуйте круг, после чего скопируйте еще два. Для первого круга в параметре Fill выберите белый цвет, а также добавьте параметр Stroke (обводка) шириной 2 пикселя черного цвета. Добавьте цвет для остальных кругов.
13. Выровниваем по левому краю.
14. С помощью инструмента Rectangle нарисуйте прямоугольник размером 400х84 пикселя и покрасьте его в черный цвет.
15. Скопируйте текст и напишите "Добавить в корзину", выбрав для него белый цвет. Поместите текст на панели слоев выше слоя с прямоугольником. Выравниваем по правому краю.
16. Скопируйте текст и напишите "12 933", после чего задайте ему необходимые параметры. То же самое, проделайте для слова "Рублей".
17. Выравниваем по сетке.
18. Из вашей папки перетащите в окно фигмы картинку с кроссовком, с зажатой клавишей Shift, вы можете поменять ее размеры, потянув за ее углы.
19. Поместите картинку по центру.
20. В пункте меню выберите инструмент Ellipse и нарисуйте овал, в параметре Fill придайте ему более серый оттенок.
21. Далее в параметре Effects выберите эффект Layer Blur со значением 50, после чего в параметре Fill в окне с процентами задайте прозрачность заливке на 49%.
22. Установите слой с тенью на панели слоев ниже слоя с кроссовком.
23. Скопируйте текст и напишите слово "krossovki". Задайте ему следующие настройки: шрифт = 200 пунктов, межбуквенное расстояние = 19,5%, буквы заглавные, цвет серый.
24. Скопируйте этот текст и напишите слово "povsednevnie".
25. Расположите текст на панели слоев под слоями с картинкой кроссовка и его тенью