Как вырезать картинку в фигме по форме
Вырезать картинку по форме (это называется обтравочная маска) в Figma очень просто. Вот несколько способов, от базового до более продвинутых.
Классическая обтравочная маска
Это самый популярный способ. Данный метод работает, когда вы хотите "вписать" изображение в готовую фигуру (круг, звезду, многоугольник и т.д.). Вот основные шаги:
Подготовка элементов
- Поместите ваше изображение на холст (Ctrl/Cmd + Shift + K чтобы импортировать).
- Нарисуйте фигуру (например, эллипс, прямоугольник со скругленными углами, звезду), которая будет служить "маской". Расположите эту фигуру поверх изображения.
Выделение обоих объектов
Кликните на фигуру, затем, зажав Shift, кликните на изображение. Важно: фигура-маска должна располагаться быть сверху.
Применение маски
Существует три способа, чтобы это сделать (результат одинаковый):
- Правой кнопкой мыши: Кликните по выделенным объектам - Use as Mask (Использовать как маску).
- Горячие клавиши: Ctrl/Cmd + Alt + M (Windows/Mac).
- Через меню слоев: В правой панели найдите значок с четырьмя точками внизу - нажмите на него и выберите Use as Mask.
Изображение будет обрезано по форме фигуры. Вы увидите в панели слоев, что оба объекта объединились в группу с маской. Фигура стала "маской", а изображение - ее содержимым. После того как вы создали обтравочную маску, часто нужно что-то поправить. Эта таблица показывает, как работать с ее элементами:
|
Что вы хотите изменить |
Что нужно сделать |
|---|---|
|
Положение или масштаб изображения |
Дважды кликните на маску на холсте, чтобы войти в режим редактирования. Затем перемещайте и масштабируйте изображение. |
|
Форму самой маски (например, радиус скругления) |
Выделите маску (векторный контур) в панели слоев и меняйте ее параметры в правой панели. |
|
Заменить изображение |
Перетащите новое изображение из панели слоев или с компьютера прямо на миниатюру старого изображения внутри маскирующей группы. |
|
Добавить обводку или тень |
Выделите маску (векторный контур) и добавьте эффекты Stroke или Drop Shadow в правой панели. Эффекты применятся к форме маски. |
Эти рекомендации помогут быстро сориентироваться, не разбирая маску на части. Таким образом, чтобы отредактировать маску после создания, нужно:
- Чтобы переместить изображение внутри маски: Двойной клик по маске (или клик по миниатюре изображения в панели слоев). Появится рамка, перемещайте и масштабируйте изображение как хотите.
- Чтобы изменить саму форму маски: Выделите маску в панели слоев и меняйте ее параметры (например, радиус скругления у прямоугольника).
Заливка изображением с обрезкой
Этот способ отлично подходит, когда вы хотите быстро "залить" фигуру картинкой. Основные действия этого метода:
Создание фигуры
Нарисуйте любую фигуру. Например, прямоугольник, круг и т.д. Убедитесь, что у фигуры включена заливка (Fill), иначе изображению негде будет отобразиться.
Заливка изображением
- В панели Design (справа) в разделе Fill выберите тип заливки Image (или нажмите на маленький значок с четырьмя ромбиками).
- Вы можете выбрать изображение из библиотеки, перетащить его прямо в область заливки или вставить из буфера (Ctrl/Cmd + V).
Настройка обрезки
- После того как изображение залилось, нажмите на иконку с тремя квадратиками в заливке. Откроется редактор обрезки.
- Здесь вы можете перемещать (Drag), масштабировать (Scale) и вращать изображение внутри фигуры.
Плюс этого способа: Фигура остается полностью редактируемой - вы можете менять ее размер, добавлять обводку (Stroke), тени и другие эффекты, независимо от изображения внутри.
Обрезка по контуру векторного объекта
Если вам нужна сложная, нестандартная форма для обрезки, используйте Перо.
- Создайте контур: Используя инструмент Pen (P), нарисуйте или обведите нужный вам контур. Это должна быть замкнутая фигура.
- Примените маску: Действуйте точно так же, как в Способе 1. Поместите векторный контур поверх изображения, выделите оба объекта и примените Use as Mask.
Важные моменты и советы
- Что сверху, то и маска. Всегда помещайте объект-форму поверх изображения перед применением маски.
- Чтобы разгруппировать маску: Выделите группу с маской и нажмите Use as Mask еще раз, или кликните правой кнопкой - Release Mask (Разгруппировать). Объекты вернутся в исходное состояние.
- Несколько объектов под одной маской: Вы можете поместить несколько фигур и изображений под одну маску. Для этого просто перетащите новый объект в маскирующую группу в панели слоев.
- Текст как маска: Вы можете использовать текст как маску. Просто напишите текст, поместите его поверх изображения и примените Use as Mask. Получится картинка, "залитая" в текст.
Помните, что маска скрывает часть изображения, но не удаляет ее безвозвратно - вы всегда можете отредактировать положение картинки или изменить форму маски.
Поэкспериментируйте с разными формами для создания уникальных композиций. Если результат вас не устроит, маску всегда можно отменить, и исходные файлы останутся невредимыми.
Вывод
Выберите способ, который больше подходит для вашей задачи. Способ 1 является универсальным, Способ 2 - наиболее быстрый для базовых фигур. Если вам нужна сложная анимация или интерактивность после экспорта, проверьте, как разные типы масок взаимодействуют с прототипированием.