В Figma способы обрезки картинок и фотографий не столь очевидны, а ведь иногда бывает такое, что нужна не вся картинка, а только её часть.
Давай разбираться как можно вырезать фото в Фигме. Поехали!🚀
Мы рассмотрим три способа. Каждый под разные типы картинок и ситуаций.
Первый способ — с помощью инструмента заливка
Если стоит задача сделать что-то вроде такого👇🏼, то обрезаем следующим образом.
В данном случае сделать такую красоту можно в два клика, имея заранее заготовленную фигуру. Смотри видеоинструкцию ниже.
Кстати, фигуру я создал с помощью плагина Blobs — рекомендую.
После добавления свойства этой фигуре, свойства можно менять справа в настройках заливки Fill.
Второй способ — с помощью инструмента маска
Этот способ пригодиться тебе, если нужно вырезать какую-то делать из фотографии. Тут будет сложнее и не столь очевидно, но за то гибкость решения «зашкаливает». Пример ниже.
Чтобы обрезать картинку в Figma с помощью маски нам нужно создать фигуру с помощью инструмента Pen. Сделать заливку этой фигуры, а затем создать маску.
Итак, по порядку.
1. Создаем фигуру с помощью инструмента Pen
2. Затем эту фигуру заливаем инструментом Fill, после чего меняем местами в панели слоев так, чтобы слой с фигурой был под слоем фотографии. После чего выбираем оба слоя и нажимаем на кнопку Use as mask сверху 👇🏼
Ура, готово!:)
Третий способ — с помощью плагинов
Да-да. Иногда обрезать фотографию проще с помощью плагина. Это уместно когда тебе надо отделить картинку от фона, особенно хорошо этот способ подойдет, если фон без контрастных деталей.
Плагины, которые я использую для удаления фона:
- Icons8 Background Remover
- RemoveBG
Также, еще есть бесплатные сервисы в интернете, где можно отделить картинку от фона.
Всем приятного пользования и крутых интерфейсов 💪🏼
Хочешь упорядочить проекты, финансы и клиентов? Регистрируйся в O!task и наведи порядок в проектах.
