Как вырезать объект из изображения в Figma

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

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

Как выделить объект

В этой статье-инструкции мы будем обращаться к инструментам в разных частях экрана Figma — нужно следить одновременно за тремя сторонами экрана:

• Слева — только слои.
• По центру — инструменты и фигуры.
• Справа — основные действия: заливка, маска, экспорт.

Как работает Pen

Откроем рабочую область Figma и выбираем инструмент Pen — это «перо» или «ручка». Каждый раз, когда мы кликаем по макету, ставится точка. А между несколькими автоматически появляется линия. 

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

На картинке ниже мы скруглили линию с помощью «усиков» или направляющих кривой Безье — они автоматически появляются с двух сторон от точки. Чтобы освоить принцип их работы, достаточно потренироваться, нарисовать произвольную линию с помощью Pen.

Как обвести фигуру по контуру

Загружаем картинку, увеличиваем масштаб, выбираем Pen и начинаем точка за точкой рисовать контур вокруг нужного нам объекта. Обязательно заканчиваем в первой поставленной точке — так программа поймет, что мы замкнули контур.

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

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

Мы получили точный и живой, естественный контур объекта.

Как вырезать объект

Теперь нам нужно из векторного контура сделать фигуру — изображение под ней проявится, а все элементы вокруг будут «спрятаны». Например, фон и лишние детали. 

Как создать фигуру

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

Затем перемещаем эту серую фигуру в панели слоев на задний план — под картинку. 

Как применить маску

Кликаем правой кнопкой мыши по композиции и выбираем «Use a mask». Либо по аналогичной кнопке в правом верхнем углу — она похожа на эмодзи полумесяц.

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

Чтобы сохранить работу на устройство, нужно в правом нижнем углу кликнуть на «Export» и выбрать формат. Затем можно перейти в Adobe Photoshop, Illustrator, GIMP или другой графический редактор.

Как вставить объект в сложный макет

Можно продолжить работу внутри Figma — поставить объект на фон или вписать в общую композицию. Мы попробуем разместить пса внутри кружка так, чтобы голова выходила за пределы фигуры. Для этого снова потребуются слои и маски.

Сначала создадим копию пса, два отдельных круга и прямоугольник. 

Разместим собаку поверх кружка так, чтобы она полностью в него вписывалась и не было видно обрезанного края объекта. Затем выделим оба слоя и кликнем «Use a mask». 

Пес обрезался по контуру круга, а у самой фигуры пропала заливка.

Теперь мы перемещаем этого пса поверх второго кружка с заливкой. Нижняя часть сложной композиции готова — у картинки аккуратный, ровный низ. 

Следующая задача — дорисовать голову. Для этого ставим прямоугольник позади второго пса и применяем маску — картинка обрежется по границам фигуры.

Размещаем голову поверх остального пса 🙂

Как заменить объект на фоне

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

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

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

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

Затем нарисуем новую фигуру поверх лишней детали — таблицы в левой части. Перекрасим ее в любой заметный цвет. 

Затем размещаем все элементы на панели слоев в таком порядке:

1. Фигура с контуром вокруг лишнего объекта.
2. Фигура с контуром нужного нам объекта.
3. Исходное изображение.

Нам нужно выбрать обе фигуры и на правой панели в выпадающем меню кликнуть функцию «Exclude» — исключение или вырезание верхнего вектора из нижнего. 

Теперь мы выделили контуром только то, что должно остаться после применения маски. 

На панели слоев слева ставим исходное изображение поверх новой фигуры, выделяем оба слоя и кликаем «Use a mask» на правой панели или по клику правой кнопкой мыши.

Как вырезать объект с неровным контуром

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

Но бывают изображения, где контуры размыты — солнечные лучи, пышные волосы, шерсть животного. Такие фотографии вырезать в Figma гораздо сложнее из-за десятков отдельных «элементов». 

Но сразу переходить в другой сервис не стоит. Вместо этого можно намеренно нарисовать неровный контур — с зазорами, как будто изображение вырезали ножницами из журнала. 

Кратко: шпаргалка по вырезанию объекта

Мы собрали основные действия из инструкции в две короткие шпаргалки. Они помогут закрепить знания и быстро выполнить манипуляции в Figma.

Как вырезать объект

Как удалить лишние детали с изображения