Рецепт: создание векторной иконки в Фигме
Как сделать векторную иконку в Фигме за 4 минуты: рецепт Ольги Дударевой.
Читайте рецепт: https://bureau.ru/soviet/20230412/
Предложите свой рецепт: https://bureau.ru/soviet/become-recip...
Рецепты — это пошаговые инструкции, как сделать анимацию, трёхмерный объект, реалистичную текстуру и другие красивые штуки. Рецепты выходят раз в две недели по средам.
00:00 Создайте файл. Откройте Фигму. Нажмите New design file.
00:05 Создайте фрейм. Нажмите F, чтобы начать создание фрейма. На правой панели свойств задайте размеры фрейма как на видео.
00:10 Создайте палитру. Зажмите Option/Alt и перетащите копию фрейма вверх. Так же создайте еще две копии фрейма. Измените значение Fill для трёх верхних фреймов, для первого — E82DE0, для второго — FFDC5E, для третьего — 03D466.
00:18 Включите сетку и направляющие. На панели свойств в правом верхнем углу нажмите View → Pixel grid или сочетание клавиши Shift + ’, чтобы включить пиксельную сетку. На панели свойств нажмите View → Rulers или сочетание клавиш Shift+R, чтобы включить линейку. Поставьте курсор на линейку слева так, чтобы стрелочки на нём появились с двух сторон. Зажмите и потяните с зажатой мышью. Расположите направляющую по центру фрейма.
00:24 Нарисуйте половину кружки. Выберите инструмент Pen на верхней панели инструментов или нажмите горячую клавишу P. Кликните один раз на фрейм, чтобы создать первую опорную точку. Вторую точку поставьте внизу. Удерживайте зажатой мышь и тяните ус вправо, чтобы изогнуть кривую. После — нажмите Return/Enter. Нажмите Edit object в центре верхней панели инструментов или клавишу V, чтобы перейти в режим редактирования опорных точек. Поправьте расположение опорных точек. Нажмите на первую опорную точку и потяните появившийся ус так, чтобы появился изгиб.
00:30 Нарисуйте блюдце. Выберите инструмент Pen на верхней панели инструментов или нажмите горячую клавишу P. Поставьте первую опорную точку. Затем поставьте вторую опорную точку. Удерживайте зажатой мышь и тяните ус вправо.Выделите получившуюся фигуру и нажмите сочетание клавиш Cmd/Ctrl+C и Cmd/Ctrl+V, чтобы ее скопировать. Выделите копию фигуры, нажмите правую кнопку мыши и выберите Flip horizontal либо используйте сочетание клавиш Shift + H, чтобы отразить фигуру по горизонтали. С зажатым Shift потяните копию фигуры вправо. Выделите обе фигуры и нажмите сочетание клавиш Cmd/Ctrl+E, чтобы объединить их в одну векторную фигуру. Нажмите Edit object в центре верхней панели инструментов или кликните два раза на получившуюся фигуру. Выделите две нижние точки и нажмите Cmd/Ctrl+J, чтобы соединить их линией. Повторите для верхних точек.
00:40 Дорисуйте кружку. По аналогии с блюдцем, скопируйте и отразите половину кружки. Выделите обе фигуры и нажмите сочетание клавиш Cmd/Ctrl+E, чтобы объединить их в одну векторную фигуру. Кликните два раза на получившуюся фигуру. Выделите две нижние точки и нажмите Cmd/Ctrl+J, чтобы соединить их линией.
00:47 Нарисуйте оставшиеся элементы. Нарисуйте ручку кружки. Нарисуйте чайный пакетик. Чтобы создать пар, используйте инструмент Pen и нарисуйте опорные точки зигзагообразной линии. Чтобы линия пара стала плавной, в режиме редактирования точек нажмите Bend tool в верхнем меню или горячую клавишу Cmd, а затем кликайте на опорные точки. Используйте сочетание клавиш Cmd/Ctrl+C и Cmd/Ctrl+V, чтобы дважды скопировать линию пара.
01:09 Раскрасьте иконку. Выделите блюдце. На правой панели свойств в разделе Stroke нажмите на квадратик с цветом. В открывшемся окне откройте выпадающий список режимов цвета и поменяйте сплошной цвет — Solid на градиентный — Linear. Настройте градиент, используя пипетку и цвета из палитры. Чтобы добавить третий цвет в градиент, в панели настроек кликните два раза по прямой перехода цвета. Измените направление градиента. Выносите крайние цвета за пределы фигуры, чтобы градиент получился более плавным. Раскрасьте все элементы.
Готово!