Практическая работа № 1
Работа с векторными формами.
Зарегистрируйтесь в фигме, определитесь с какой версией будете работать, создайте свой первый фигма-файл, дайте название файлу: лаб1_сокращенное название предмета_Группа_Фамилия. Например: лаб1_ИСиТ_3115д_Вещина.
Регистрация https://www.figma.com/
Скачать фигму и приложения https://www.figma.com/downloads/
Задание 1. Создание векторных объектов.
1. Создайте фрэйм с помощью клавиши F или нажав на соответствующий значок на верхней панели инструментов слева. Размер фрейма задайте произвольно.
2. Двойным нажатием на название Frame 1 поменяйте название фрейма на "задание 1".
3. Создайте прямоугольник (клавиша R) или квадрат (Shift R), используя клавиатуру, или нажав на соответствующий значок на верхней панели инструментов слева.
4. Поменяйте заливку фигуры, нажав на код цвета во вкладке Fill на боковой панели инструментов справа.
5. Поменяйте обводку фигуры с ее цветом с помощью Shift X. Изменение параметров обводки на боковой панели справа. Увеличение/уменьшение толщины возможно стрелками на клавиатуре вверх/вниз соответственно. Добавление обводки к заливке цветом. Нажать на + на боковой панели справа, убрать можно также нажав на панели .
6. В Figma возможно создание и других векторных объектов. Через верхнюю панель инструментов справа. Потренируйтесь: создайте разные векторные объекты через панель или через горячие клавиши (указаны справа от каждого объекта).
Попробуйте инструмент для свободного рисования Pen: клавиша P или на верхней панели слева. Выход из режима свободного рисования с помощью клавиши Esc.
Пример выполнения работы:
Задание 2. Работа с векторными объектами.
1. Создайте фрэйм с помощью клавиши F или нажав на соответствующий значок на верхней панели инструментов слева. Размер фрейма задайте произвольно. Назовите фрейм "задание 2".
3. Создайте прямоугольник (клавиша R) и квадрат (Shift+R), используя клавиатуру, или нажав на соответствующий значок на верхней панели инструментов слева.
3. Продублируйте прямоугольник и квадрат.
4. Измените радиус закругления углов у второй серии прямоугольника и квадрата, потянув за ползунки по углам фигуры. Также это можно сделать на боковой панели инструментов справа.
5. Поменяйте заливку фигуры 1, нажав на код цвета во вкладке Fill на боковой панели инструментов справа.
6. Поменяйте заливку фигуры 2, нажав Fill>нажмите на цвет>на верхней панели из выпадающего списка выберите пункт Linear>задайте цвета.
6.1. выберите пункт Fill
6.2. выберите пункт Linear
6.3. выберите цвета
7. Поменяйте заливку фигуры 3, нажав Fill>нажмите на цвет>на верхней панели из выпадающего списка выберите пункт Radial>задайте цвета.
8. Поменяйте заливку фигуры 4, нажав Fill>нажмите на цвет>на верхней панели из выпадающего списка выберите пункт Angular>задайте цвета.
9. Создайте круг(Shift+O), нажав Fill>нажмите на цвет>на верхней панели из выпадающего списка выберите любой эффект>задайте цвета.
10. Создайте звезду, нажав Fill>нажмите на цвет>на верхней панели из выпадающего списка выберите пункт Diamond>задайте цвета.
10. Создайте треугольник, нажав Fill>нажмите на цвет>на верхней панели из выпадающего списка выберите пункт Image>выберите изображение.
Пример выполнения работы:
Задание 3. Работа с эффектами.
-
Создайте фрэйм с помощью клавиши F или нажав на соответствующий значок на верхней панели инструментов слева. Размер фрейма задайте произвольно. Назовите фрейм "задание 3".
-
Создайте два квадрата (Shift R) и поместите их друг над другом
-
Задайте квадратам контрастные цвета
-
Выберите верхний квадрат
-
Настройки эффектов наложения в панеле выбора цвета знак Blend Mode (капля) справа
-
Выберите опцию наложения Multiply.
-
Поработайте с другими видами наложения.
-
Создайте новый фрэйм (F)
-
Создайте круг (O) и создайте несколько копий (зажатием левой кнопки мыши + Alt(Option)
-
Задайте всем кругам одинаковый цвет
-
Эффекты находятся в боковой панели справа
-
Создайте тень для первого круг через Effects/Drop shadow
-
Измените цвет и настройки прозрачности тени
-
По аналогию с предыдущим пунктом:
-
создайте внутреннюю тень для второго круга через Effects/Inner shadow.
-
создайте эффект размытия для четвертого круга через Effects/Layer blur
-
создайте копию круга и создайте прямоугольник
-
поместите круг над прямоугольником
-
уменьшите прозрачность цвета круга
-
увеличьте силу эффекта размытия.