Как вырезать в фигме с помощью пера

Когда стандартных инструментов кадрирования и примитивных фигур уже недостаточно, на сцену выходит «Перо» - инструмент для профессионалов в Figma. Он позволяет не просто обрезать, а именно вырезать объекты по произвольному, идеально точному контуру, который вы определяете сами.

Вы можете создать интернет магазин за 1 вечер. Просто выберите готовый шаблон интернет магазина и установите его. Останется только наполнить его своими товарами.

Хотите ли вы создать сложную маску для фотографии, вычесть из одной фигуры уникальный фрагмент или подготовить патч для последующей анимации, умение работать с пером является обязательным навыком. В этой статье мы детально разберем, как выполнить такое вырезание, и подведем итоги в наглядной таблице, чтобы у вас всегда была под рукой шпаргалка с алгоритмом действий.

Вырезание части объекта 

Прежде чем браться за сложные маски, важно освоить фундаментальный принцип работы с векторными формами. Этот метод основан на Булевых операциях - математических действиях, которые позволяют объединять, вычитать и пересекать фигуры.

Предисловие к этому пункту объяснит, почему этот подход идеален, когда вам нужно создать новую, сложную геометрию из простых исходных элементов, и когда результат должен остаться чистой, редактируемой векторной формой.

Допустим, у вас есть прямоугольник, и вы хотите вырезать из него треугольный кусок.

1. Создайте основную фигуру (например, прямоугольник).
2. Нарисуйте контур выреза с помощью Пера (P): Выберите инструмент «Перо», а после кликните, чтобы создать опорные точки по контуру той области, которую хотите вычесть. Например, нарисуйте треугольник внутри прямоугольника. Важно: Ваш контур должен быть замкнутым (т.е. начальная и конечная точки должны совпадать).
3. Выделите обе фигуры. Кликните на прямоугольник, затем, зажав Shift, кликните на контур, созданный пером.
4. Примените Булеву операцию «Вычитание»: На панели инструментов над холстом найдите иконку с двумя кругами («Boolean operations»). Выберите вариант «Subtract» (Вычитание).
5. Альтернативно: кликните правой кнопкой мыши на выделенных фигурах и выберите «Subtract selection» в контекстном меню.

В результате фигура, созданная пером, будет «вычтена» из основной фигуры.

Создание сложного выреза с помощью маски

Когда задача выходит за рамки простой геометрии и требует обрезки фотографий, градиентов или сложных композиций, на помощь приходит более гибкий и мощный инструмент - обтравочная маска. Следующий раздел посвящен этому неразрушающему методу.

Здесь вы узнаете, как контур, созданный пером, становится «окном», сквозь которое видно только нужную часть содержимого, предоставляя вам невероятную свободу для последующих правок и экспериментов.

Этот метод идеален, когда вам нужно «обрезать» изображение или сложную группу объектов по произвольной форме.

1. Поместите объект для обрезки (например, фотографию или группу фигур) на холст.
2. Нарисуйте контур маски с помощью Пера (P): Создайте замкнутый контур той формы, по которой вы хотите обрезать ваш объект. Этот контур будет «окном», через которое будет видно содержимое.
3. Расположите контур маски поверх объекта, который нужно обрезать.
4. Выделите и объект, и контур маски.
5. Создайте маску: Нажмите Ctrl+Alt+M (или Cmd+Option+M на Mac). Или кликните правой кнопкой мыши и выберите «Use as Mask». Или нажмите на значок «Заполнение» на панели свойств и выберите «Mask» в выпадающем списке.

Теперь всё, что находится за пределами контура, созданного пером, будет скрыто. Само перо станет невидимым (если у него нет заливки/обводки), выполняя роль чистой маски.

Ключевые возможности и советы по работе с пером

Инструмент «Перо» обладает своей логикой, и его эффективное использование - это своего рода искусство. Чтобы ваша работа с ним была не только результативной, но и быстрой, важно знать несколько профессиональных приемов.

В этой заключительной части мы собрали ключевые возможности и практические советы - от создания идеальных кривых Безье до хитростей редактирования готовых контуров. Это тот самый список, который превратит новичка, борющегося с точками, в уверенного пользователя, способного воплотить в Figma любую, даже самую замысловатую форму.

Точность как фундамент

В основе работы с пером лежит бескомпромиссная точность. Не стоит полагаться исключительно на глазомер - вашими верными союзниками должны стать встроенная сетка и направляющие. Увеличивайте масштаб для проработки мелких деталей и используйте клавишу Shift для фиксации линий под идеальными углами в 45 или 90 градусов. Помните, что каждая лишняя точка усложняет контур и делает его менее гладким, поэтому старайтесь обходиться минимальным их количеством, достигая нужной формы.

Магия кривых безье

Истинная сила пера раскрывается в мастерстве управления кривыми Безье. Чтобы создать плавную изогнутую линию, недостаточно просто кликнуть - нужно кликнуть и, удерживая кнопку мыши, потянуть, вызывая к жизни рычаги управления. Эти векторы касательных определяют и направление, и интенсивность кривизны. Чем длиннее рычаг, тем более пологой и длинной будет дуга. Умение предугадывать поведение этих рычагов - это и есть главный навык, отличающий профессионала.

Искусство редактирования

Создание контура - это лишь половина дела. Не менее важно уметь его редактировать. Для тонкой настройки переключитесь на инструмент «Edit Object» - ваша основная стрелка. С его помощью вы можете не только перемещать любые опорные точки, но и заново позиционировать их рычаги, шлифуя форму до совершенства. А если вы допустили ошибку, не спешите начинать заново: просто наведите курсор на сегмент, чтобы добавить новую точку, или на существующую точку, чтобы удалить её.

Власть над углами

Плавные кривые прекрасны, но мир состоит не только из них. Для создания резких, четких углов и изломов существует простая, но мощная клавиша Alt. Зажмите ее, кликая на опорной точке, чтобы разорвать связь между двумя рычагами. Это позволит вам независимо настроить кривизну сегментов до и после точки, создавая острые вершины и сложные комбинированные формы, где плавные линии встречаются с резкими переломами.

Понимание этих принципов - от экономии точек до виртуозного владения рычагами и клавишей Alt - откроет вам двери в мир векторной графики, где любая, даже самая сложная форма, становится вам подвластна.

Вывод

Инструмент «Перо» открывает путь к векторной точности в Figma. В отличие от простых методов обрезки, он позволяет создавать вырезы любой сложности - от геометрических фигур до органических кривых. Главное - понимать разницу между двумя основными методами их применения. Вот сводная таблица для быстрого сравнения этих методов:

Характеристика	Вырезание (Булевы операции)	Создание выреза (Маска)
Суть метода	Преобразование фигур: одна фигура вычитается из другой.	Создание «окна» (маски), скрывающего часть содержимого.
Результат	Создается новая, единая векторная фигура.	Создается группа «Mask» с маской (контуром пера) и подмасочным содержимым.
Идеально для	Создания сложных составных фигур, иконок, логотипов.	Обрезки изображений, градиентов или групп объектов по произвольной форме.
Гибкость	Редактируемо, но исходные фигуры объединяются. Можно «разъединить» (Shift+Ctrl+G).	Очень гибко: содержимое или маску можно легко редактировать, перемещать независимо внутри группы.
Ключевое действие	Subtract (Вычитание) на панели Boolean-операций.	Use as Mask (Создать маску), горячие клавиши Ctrl+Alt+M.
Визуальный результат	Вырезанная часть исчезает безвозвратно.	Вырезанная часть скрыта, но ее можно «вернуть», изменив маску или переместив содержимое.

 

Выбирайте Булевы операции, когда работаете с чистой векторной графикой и вам нужна конечная фигура. Используйте Маски, когда вам нужна неразрушающая обрезка сложного контента, особенно растровых изображений.