Что в видео-уроке:
В уроке разбираем три способа удаления фона: автоматический сервис, ручную обтравку через Pen и маску в Figma и работу с масками в Photopea. Сравниваем способы и учимся выбирать подходящий под конкретное изображение.
Выбираем способ под конкретное изображение
Обтравка позволяет отделить объект от исходного фона и использовать его в композиции как самостоятельный элемент. Единственного универсального способа нет: метод зависит от сложности изображения, качества исходника и необходимости редактировать результат позже.
В уроке рассматриваем три варианта:
- автоматическое удаление фона через онлайн-сервис;
- ручную обтравку в Figma;
- работу с маской через Photopea.
Для простых объектов быстрее использовать автоматический сервис, а сложные контуры иногда удобнее вырезать вручную.
Удаляем фон автоматически
Первый способ подходит для изображений с достаточно однородным фоном и хорошо различимым объектом. Фотографию загружаем в сервис удаления фона, после чего он автоматически определяет объект и формирует прозрачную область вокруг него.
Перед загрузкой важно учитывать ограничения сервиса по размеру изображения. В примере исходник уменьшается примерно до 4000 px по большей стороне. Этого достаточно для качественной работы в макете и одновременно удобно для дальнейшего использования в Figma.
Автоматическая обтравка существенно экономит время, но результат нужно обязательно проверять. Алгоритм может ошибочно удалить участки объекта, близкие по цвету к фону, или неточно обработать мелкие детали.
Обтравливаем объект вручную через Pen
Если автоматический способ даёт плохой результат, объект можно вырезать непосредственно в Figma.
Инструментом Pen постепенно обводим нужный объект по контуру и создаём замкнутую векторную фигуру. Необязательно стремиться попасть в каждый пиксель — важнее аккуратно сохранить характерную форму и значимые детали.
На сложных участках приближаем изображение, а для перемещения по увеличенному макету используем Space. Если точка поставлена неправильно, можно сразу отменить действие через Ctrl+Z.
После завершения контура убираем Stroke и оставляем Fill, чтобы получить цельную фигуру.
Создаём маску
Полученную фигуру размещаем вместе с исходным изображением и используем инструмент Use as Mask. В результате остаётся видимой только та часть фотографии, которая попадает внутрь созданного контура.
Главное преимущество такого способа — редактируемость. Исходное изображение не уничтожается, а форма маски остаётся доступной для изменений.
Если край оказался неточным, достаточно открыть векторную фигуру, переместить узлы или скорректировать кривые. Острые углы также можно сделать более плавными.
Вырезаем внутренние области
Иногда недостаточно убрать только внешний фон. Например, внутри объекта могут быть участки, которые также должны стать прозрачными.
Для этого создаём дополнительные фигуры инструментом Pen и вычитаем их из основной формы через Subtract Selection. После этого полученную фигуру снова используем как маску.
Так можно сформировать более сложный контур с отверстиями и при этом сохранить возможность дальнейшего редактирования.
Используем Photopea для более детальной работы
Ещё один способ — работать через Photopea. Принцип остаётся похожим: изображение открывается в редакторе, создаётся маска, а нужные области выделяются с помощью Pen.
Здесь важно работать именно с маской, а не удалять пиксели непосредственно с исходного изображения. При редактировании маски ненужные участки можно скрывать и возвращать обратно с помощью белого и чёрного цвета.
Если удалить часть самого изображения, вернуть её после сохранения будет значительно сложнее. Поэтому маска безопаснее, когда есть вероятность дальнейших правок.
Сохраняем возможность вернуться к исходнику
Главное различие между способами заключается не только в скорости, но и в степени редактируемости.
Автоматический сервис быстрее всего справляется с простыми объектами. Маска в Figma позволяет полностью контролировать контур и в любой момент его корректировать. Photopea даёт более привычную логику растрового редактора и позволяет детальнее работать с масками.
Поэтому перед началом стоит определить, нужен ли полностью готовый PNG или важно сохранить возможность вернуть удалённые области и продолжить дорабатывать вырезку.
Ручная обтравка расширяет возможности дизайнера
Автоматические инструменты удобны, но полностью зависеть от них не стоит. Навык ручной обтравки позволяет работать со сложными изображениями, самостоятельно исправлять проблемные участки и создавать более сложные коллажи.
Чем увереннее дизайнер работает с инструментом Pen, масками и булевыми операциями, тем свободнее он может комбинировать изображения и формировать собственные визуальные композиции.
