Как вырезать в фигме
Уроки

Как вырезать в фигме: объект, изображение, картинку, фото, фон

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

Прежде всего отмечу, что эта инструкция подойдет для простых объектов. Если вам нужно удалить фон у сложного объекта (например где есть волосы), то это не поможет и лучше воспользоваться фотошопом. Используйте этот приём для простых объектов с прямыми сторонами: коробка, стул, стена и т.д.

Пример вырезанного объекта в фигме
Пример вырезанного объекта

Пошаговая инструкция как вырезать объект на фото с помощью пера в фигме

Выбираем перо для вырезания

Шаг №1. Выберите инструмент перо (Peen tool) в панели инструментов сверху.

Обводка объекта пером

Шаг №2. Увеличьте фотографию нажав на клавиатура на «+». Поставьте точку с помощью пера.

Работа с круглыми углами при обводке

Шаг №3. Обведите объект по контуру рисуя новые линии.

Скругление при работе с пером в фигме

Если на объекте есть скругление, то поставьте точку и потяните в сторону.

Нажмите на Shift и на точку левой клавишей мыши,
чтобы снова делать прямые линии

Чтобы появилась возможность рисовать прямые линии, нажмите на «Shift» и на точку после скругления.

Заливка контура для вырезания

Шаг №4. После того как вы обведете объект вокруг, сделайте заливку фигуры. Это можно сделать нажав напротив справа надписи Fill на иконку плюса.

Результат после заливки контура
Результат после заливки контура

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

Внутренний контур объекта для вырезания объекта в фигме

Шаг №5. При необходимости обведите объект внутри, как показано на скриншоте выше.

Заливка внутреннего контура

Сделайте заливку внутренней обводки.

Заливка внутреннего контура

Шаг №6. Поменяйте цвет у внутренней заливки. Включите отключенный ранее слой с первым контуром.

Substract selection

Шаг №7. Выберите контуры нарисованные пером и нажмите на надпись «Substract selection».

Результат обводки контура

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

Применение маски

Шаг №8. Поместите получившуюся фигуру вниз фото в слоях. Также выделите фото и фигуру и нажмите на иконку маски «Use as mask».

Результат вырезанного объекта в фигме
Результат вырезанного объекта

В результате мы получаем объект, без заднего фона сзади.

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

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

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

P.S. Получите практический урок по созданию дизайна сайта в Figma, перейдя по этой ссылке.

Автор статьи: Владимир Чернышов

Дизайн генератор — комплект figma

P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).

Теги