Как вырезать объект из фото в Фигме — 3 способа

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

Если вы хотите использовать Figma и для более сложных задач, рекомендуем обратить внимание на курсы от Сontented и ProductStar. Они помогут освоить различные аспекты работы с этим инструментом, включая обрезку объектов, работу с фигурами и плагинами.

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

Инструмент перо в Figma

Этот инструмент подойдёт для работы с объектами, имеющими чёткие границы. Если перед вами стоит задача — убрать фон с картинки, где много мелких деталей, для этого лучше использовать Adobe Photoshop. Подробнее о функционале, создании проектов и возможностях программы мы рассказали в материале — текст легко найти в нашем блоге. В нём есть и другие интересные статьи. Figma тоже хороша для редактирования изображений, но немного в другой плоскости. Когда нужно быстро и качественно обрезать предмет с прямыми линиями — это самый подходящий способ.

Перо или Pen tool находится в верхней панели. Для обрезки необходимо просто увеличить фото с помощью «+» на клавиатуре. Затем — поставить точки на объекте, который нужно убрать. После этого обведите предмет по контуру — линии будут прямые. Если надо закруглить линию, необходимо поставить точку и немного потянуть курсор в сторону. Когда вы полностью обведёте предмет по контуру, используйте заливку. Залить фигуру поможет иконка плюс возле надписи Fill в меню справа. Если необходимо, пройдите по контуру предмета, нажав Shift, и внутри, чтобы выделить все границы. Следующий шаг — правило создания заливки шаблона внутренней области. У неё должен быть новый цвет —  можно сделать чёрный. В верхней панели сайта выберите контуры нарисованные пером и щёлкните на «Substract selection». Так вы удалите внутреннюю заливку.

У вас должна получиться фигура, повторяющая объект, который надо убрать с изображения. В слоях её надо поместить ниже, чем сам предмет — сделать это можно на панели слева под комментариями, просто переместив один слой под другой. Затем выделите всю фотографию и часть фигуры, используйте кнопку маска —  «Use as mask». Или сочетание клавиш Ctrl+Alt+M. Итог — просмотр главного объекта без фона.

Хотите научиться работать в Figma, но не знаете, с чего начать? На бесплатном курсе «Основы Figma» вы сделаете первые шаги в графическом дизайне. Узнайте основы работы с программой и начните создавать свои собственные проекты прямо сейчас!

Заливка 

Использовать заливку можно в том случае, когда предмет нужно убрать не по чётким границам, а по определённой форме. В качестве фигуры для вырезки подойдёт овал, прямоугольник или любая другая фигура. Заранее подготовьте её и добавьте на рабочее поле, чтобы показать границы и посмотреть на размер — соседний фрейм должен содержать фото или картинку, которую надо обрезать. Скопируйте файл, нажав кнопку Copy paste/as — Copy properties, а затем вставьте его в фигуру, выбрав пункт Paste properties. Переместить изображение внутри можно с функцией расширения и сужения. 

Если вы хотите освоить Figma и использовать её для создания сайтов, мы собрали для вас подходящие варианты обучения: 

• Графический дизайнер — Онлайн-институт Vill
• Графический дизайнер с нуля до PRO — МИПО
• Графический дизайнер со стажировкой — Eduson Academy

Плагины

Работа с бесплатными плагинами без рекламы облегчает процесс удаления для пользователей — начать обрезать изображение по контуру можно, подключив специальные дополнения. Особенно хорошо они справляются с теми картинками, где задний план однотонный, без ярких деталей. Обратите внимание на такие полезные дополнения для дизайна, как:

• Icons8 Background Remover
• PixCut remove background 
• Remove BG

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

• Exposure — экспозицией,
• Contrast — контрастом,
• Saturation — насыщенностью,
• Temperature — температурой.