Как вырезать объект в фигме
Перейти к содержимому

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

  • автор:

Как обрезать картинку в Figma — 3 способа

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

Давай разбираться как можно вырезать фото в Фигме. Поехали!��

Мы рассмотрим три способа. Каждый под разные типы картинок и ситуаций.

Первый способ — с помощью инструмента заливка

Если стоит задача сделать что-то вроде такого����, то обрезаем следующим образом.

В данном случае сделать такую красоту можно в два клика, имея заранее заготовленную фигуру. Смотри видеоинструкцию ниже.

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

Итак, по порядку.

1. Создаем фигуру с помощью инструмента Pen

2. Затем эту фигуру заливаем инструментом Fill, после чего меняем местами в панели слоев так, чтобы слой с фигурой был под слоем фотографии. После чего выбираем оба слоя и нажимаем на кнопку Use as mask сверху ����

Третий способ — с помощью плагинов

Да-да. Иногда обрезать фотографию проще с помощью плагина. Это уместно когда тебе надо отделить картинку от фона, особенно хорошо этот способ подойдет, если фон без контрастных деталей.

Плагины, которые я использую для удаления фона:

  1. Icons8 Background Remover
  2. RemoveBG

Также, еще есть бесплатные сервисы в интернете, где можно отделить картинку от фона.

Всем приятного пользования и крутых интерфейсов ����

Как корректно обрезать обьект в Figma?

Обрезал фрагмент скриншота пером, выделился вектор, но сам кусок картинки не вырезался. Как вырезать его?

  • Вопрос задан более трёх лет назад
  • 29640 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 2

NewWingsAsya

Анастасия Свеженцева @NewWingsAsya
Веб-дизайн, интерфейсы и бренд-айдентика.

Принцип такой: обводим предмет пером, затем отключаем обводку/stroke у фигуры и включаем заливку/fill. После этого вектор перемещаем под изображение, выделяем оба слоя и включаем маску.

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

Figma-designer

Tony @Figma-designer

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

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

слайдер

  • Слайдер
  • +1 ещё

Как сделать слайдер через компонент в Figma?

  • 1 подписчик
  • 7 минут назад
  • 3 просмотра

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

Приветствую всех на своем блоге! Сегодня я оставлю заметку о том как просто вырезать любой объект в фигме. Я покажу Вам на примере авокадо. Итак поехали.

Открываем графический редактор Figma. я пользуюсь браузерной версией. Горячими клавишами ctrl + k вставляем наше фото.

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

Выбираем перо

Выбираем инструмент Перо

Горячая клавиша P

Обводим по контуру нужное изображение

Пером обводим по контуру

Замыкаем точки и нажимаем done

Когда все точки сомкнуты нажимаем Done

Выделенное изображение

Должно получиться вот так

Меняем цвет заливки с обводкой местами

Жмем shift+x

Меняем слои местами

Меняем слои местами, слой с фоном переносится вверх а с вектором вниз как на фото

Выбираем вектор и маску

Выбираем слой с вектором и нажимаем вверху на значок маска (use as mask)

Объект вырезан

Объект успешно вырезан!

Группируем слои

Для перетаскивания объекта выделите оба слоя и объедините в группу клавиши ctrl+g

Понравилась статья? Поделись с друзьями

автор блога веб разработчик Александр Пешков

Здравствуйте! Меня зовут Александр. Я веб-разработчик. Мне нравится верстка, дизайн и программирование и CMS WordPress . В свободное время пишу статьи на тему веб-разработки. Если у Вас есть вопрос Вы можете его задать в контактах ниже

0 0 голоса
Рейтинг статьи
Подписаться
Войти через
Я разрешаю создать мне учетную запись

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

Не согласен Согласен
Я разрешаю создать мне учетную запись

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

Как вырезать объект в Фигме: инструкция

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

Как отделить фрагмент изображения

Если у вас возник вопрос, как вырезать в Фигме нужный объект – значит, вы открыли нужную статью! Здесь мы подробно расскажем, как и что необходимо делать, чтобы отделить часть от общего изображения.

  • Открываем нужный файл, выделяем изображение щелчком мышки и находим на верхней панели иконку «Edit object» ;

  • После этого переходим к левой части экрана и ищем инструмент «Перо» – эту иконку трудно не заметить.

Именно перо поможет нам понять, как вырезать фигуру в Фигме! После того, как вы включите этот инструмент, можно будет начинать обводку по контуру: но сначала приблизьте изображение, чтобы вам было удобнее. После этого просто начинайте ставить точки прямо по контуру вашего предмета – поочередно, двигаясь от одного края к другому.

После того, как вы закончите с обводкой внешней части, контур пера появится по всему «периметру» изображения.

Полезный совет о том, как вырезать объект в Figma – когда вы пользуетесь пером, не забывайте про скругление ( «Bend Tool» ). Эта опция поможет вам, когда на картинке будут не только прямые углы. Значок скругления находится рядом с пером на верхней панели, также опцию можно активировать нажатием горячей клавиши Ctrl на Win или Command на mac.

Ранее рассказали для вас, как вырезать в Фигме изображение по контуру и отделить часть картинки.

Теперь переходим к обводке внутренней части! Делаем все тоже самое с помощью пера – и получаем вот такой результат.

Теперь, когда объект полностью выделен, можно переходить непосредственно к тому, как вырезать фото в Фигме!

  • Находим на верхней панели иконку «Pain bucket» в виде двухцветного прямоугольника и нажимаем на нее;

  • После этого щелчком мышки выделяем область внутри предмета и всю область снаружи;

  • Как только цвет полностью исчезнет, находим сверху голубую кнопочку «Done» и кликаем по ней!

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

Вместе мы научились тому, как вырезать предмет в Фигме – это просто и понятно! Поверьте, стоит вам лишь повторить процесс несколько раз – и вы сможете набить руку и быстро пользоваться пером.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *