В этом уроке поговорим как вырезать фон вокруг объекта, у изображения, картинки или фото в фигме. По итогам урока вы сможете делать простые изображения с прозрачным фоном. Простыми словами вы сможете удалить не нужный фон на фото.
Прежде всего отмечу, что эта инструкция подойдет для простых объектов. Если вам нужно удалить фон у сложного объекта (например где есть волосы), то это не поможет и лучше воспользоваться фотошопом. Используйте этот приём для простых объектов с прямыми сторонами: коробка, стул, стена и т.д.
![Пример вырезанного объекта в фигме](https://web-design.center/wp-content/uploads/2021/03/1-kak-virezat-v-figme-1024x576.jpg)
Пошаговая инструкция как вырезать объект на фото с помощью пера в фигме
![Выбираем перо для вырезания](https://web-design.center/wp-content/uploads/2021/03/2-pero-v-figma-1024x568.jpg)
Шаг №1. Выберите инструмент перо (Peen tool) в панели инструментов сверху.
![Обводка объекта пером](https://web-design.center/wp-content/uploads/2021/03/3-obvodka-figuri-1024x568.jpg)
Шаг №2. Увеличьте фотографию нажав на клавиатура на «+». Поставьте точку с помощью пера.
![Работа с круглыми углами при обводке](https://web-design.center/wp-content/uploads/2021/03/4-obvodka-perom-1024x569.jpg)
Шаг №3. Обведите объект по контуру рисуя новые линии.
![Скругление при работе с пером в фигме](https://web-design.center/wp-content/uploads/2021/03/5-skruglenie-pero-1024x570.jpg)
Если на объекте есть скругление, то поставьте точку и потяните в сторону.
![Нажмите на Shift и на точку левой клавишей мыши,
чтобы снова делать прямые линии](https://web-design.center/wp-content/uploads/2021/03/6-tochka-1024x568.jpg)
Чтобы появилась возможность рисовать прямые линии, нажмите на «Shift» и на точку после скругления.
![Заливка контура для вырезания](https://web-design.center/wp-content/uploads/2021/03/7-frame-249-1024x558.jpg)
Шаг №4. После того как вы обведете объект вокруг, сделайте заливку фигуры. Это можно сделать нажав напротив справа надписи Fill на иконку плюса.
![Результат после заливки контура](https://web-design.center/wp-content/uploads/2021/03/8-figura-v-figma-fill-1024x569.jpg)
Результат после заливки контура вокруг будет таким. На время отключите этот слой нажав в левой панели на иконку глаза.
![Внутренний контур объекта для вырезания объекта в фигме](https://web-design.center/wp-content/uploads/2021/03/9-kontur-1024x570.jpg)
Шаг №5. При необходимости обведите объект внутри, как показано на скриншоте выше.
![Заливка внутреннего контура](https://web-design.center/wp-content/uploads/2021/03/10-kontur-inside-1024x569.jpg)
Сделайте заливку внутренней обводки.
![Заливка внутреннего контура](https://web-design.center/wp-content/uploads/2021/03/11-filled-oblast-1024x568.jpg)
Шаг №6. Поменяйте цвет у внутренней заливки. Включите отключенный ранее слой с первым контуром.
![Substract selection](https://web-design.center/wp-content/uploads/2021/03/12-substract-selection-1024x568.jpg)
Шаг №7. Выберите контуры нарисованные пером и нажмите на надпись «Substract selection».
![Результат обводки контура](https://web-design.center/wp-content/uploads/2021/03/13-contur-filled-1024x570.jpg)
В результате у фигуры вычитается внутренняя заливка. Получается фигура, которая полностью повторяет объект, который нужно вырезать.
![Применение маски](https://web-design.center/wp-content/uploads/2021/03/14-use-as-mask-1024x567.jpg)
Шаг №8. Поместите получившуюся фигуру вниз фото в слоях. Также выделите фото и фигуру и нажмите на иконку маски «Use as mask».
![Результат вырезанного объекта в фигме](https://web-design.center/wp-content/uploads/2021/03/15-result-1024x567.jpg)
В результате мы получаем объект, без заднего фона сзади.
Шаг №9. При необходимости отредактируйте получившийся объект, выбрав одну из векторных точек. Также можно отредактировать фото, чтобы оно вписывалось в окружающий фон вокруг. Как это сделать, смотрите в видео выше.
Если хотите сохранить изображение к себе на рабочий стол, то выбирайте для этого формат PNG. Это позволит сохранить прозрачный фон у фотографии. Вот инструкция по экспорту изображений из фигмы.
Таким образом вы можете удалять задний фон у фото. Безусловно, это сработает для простых объектов. Если вам нужно вырезать более сложный объект, то лучше воспользуйтесь фотошопом. Почему? Простой потому что фигма подходит больше для работы с векторной графикой.
P.S. Получите практический урок по созданию дизайна сайта в Figma, перейдя по этой ссылке.
Автор статьи: Владимир Чернышов
![Дизайн генератор — комплект figma](https://web-design.center/wp-content/uploads/2021/09/banner-design-generator.png)
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).