Как вырезать объект в Фигме (Figma)
Figma — гибкий инструмент. Ранее мы рассказывали, как добавить новый шрифт в программу. В этой статье эксперт Hello World Соныгина Марина покажет, как в Фигме вырезать часть объекта несколькими способами. Необязательно использовать разные редакторы, плагины. Вы сможете выбрать несколько методов в одной Figma!
Инструмент «Перо» (Pen Tool) для вырезания частей объекта
Хотите освоить Figma? Когда вы делаете творческое задание, бывает, что нужно убрать определённую часть изображения. Например, задний фон. Для этого в Фигме есть инструмент «Перо» (Pen Tool). Он помогает обвести контур вручную, даже если форма сложная. Наш эксперт предлагает вам познакомиться поближе с пером!
1. Откройте проект и добавьте изображение. Вы можете перетащить файл на рабочую область или нажать File → Place image. Разместите вырезанный элемент так, чтобы нужная часть была хорошо видна.
2. Выберите инструмент Pen. На панели внизу будет иконка «Перо». Можно нажать клавишу P (английская раскладка);
3. Начните обводить изображение по контуру. Кликните по нужному месту. Это будет первая точка.
4. Перемещайте курсор вдоль края. Выделяйте иллюстрацию по контуру,. ставьте точки по мере необходимости. Если форма сложная — ставьте больше точек. На прямых участках достаточно двух. Вы увидите точку с красным крестом, когда дойдёте до начала. Замкните круг, соединив обводку.
5. К выделенному фрагменту примените заливку. Выбрать можно любой цвет. Нажмите иконку баночки с краской.
6. Во вкладке Layers (панель слева) поменяйте слои местами. Зажмите левой кнопкой мыши Vector 1, перенесите его вниз под Image 2.
7. Выделите два слоя. Зажмите Shift, левой кнопкой мыши кликните по объектам.
8. Правой кнопкой мыши нажмите на выделенные слои. Появится окно → выберите Use as mask.
9. Готово! Вы выделили нужный фрагмент! Марина Соныгина советует: не бойтесь неточности. Позже можно подправить каждую точку отдельно.
Pen Tool используется, чтобы вырезать нужный предмет с фото, где фон сложный (например, дерево с листьями). Метод помогает получить вырезанный объект из сложных изображений. Важно помнить, что инструмент работает только с векторными фигурами. Изображение в Figma остаётся целым. Вырезание — это результат наложения слоёв.
Заливка (Fill) для вырезания простых форм
Дополнительные стили текста можно взять свободно из онлайн-библиотек. Их не нужно покупать — достаточно скачать и установить на компьютер. Эксперт Hello World подготовил для вас подборку проверенных ресурсов, где можно найти шрифты для любого проекта.
1. Перейдите к панели инструментов внизу. Выберите фигуру. У нас будет прямоугольник. Добавьте его на холст.
2. Поверх квадрата нарисуем звезду. Можете выбрать другую фигуру, размер или цвет.
3. Выделите оба слоя. Можете нажать клавишу Shift, левой кнопкой мыши выбрать слои. Второй способ — выберите инструмент Move. Затем на холсте выделите элементы.
4. Перейдите к панели справа. Наверху есть иконка двух квадратов. Нажмите на неё, выберите функцию Subtract (или Вычесть).
5. Фигма удалит фигуру звезды. Остается только вырезанная часть. Под получившийся объект можно добавить свою картинку. Вставьте изображение, поменяйте слои местами.
Готово! Этим способом вы можете создавать дизайнерские рамки для фото, коллажи, уникальные творческие идеи.
Инструмент маска (Mask)
Инструмент «Маска» показывает только то, что попало внутрь. Подходит, когда вам надо скрыть лишнее без удаления фотографии. Удобно пробовать разные формы. Главное — не бояться экспериментировать!
1. Откройте фото в Figma, которое хотите изменить. Перетащите его в программу, или добавьте через File → Place image.
2. Поместите картинку в удобное место на холсте. Скорректируйте её размер и положение.
3. Нарисуйте нужную форму поверх картинки: звезду, квадрат или круг. Фигура будет сразу с заливкой.
4. Важно поменять слои местами. Переместите круг, квадрат или фигуру под изображение. Зажмите левой кнопкой мыши первый слой и опустите вниз.
5. Выделите оба слоя, нажав клавишу Shift. Можно использовать курсор, как мы показывали ранее. Выделение показано синей рамкой.
6. Правой кнопкой мыши кликаем по слоям. Выбираем пункт Use as mask.
Всё получилось! Кликните Mask group (раздел Layers), выделите все слои. Вы сможете перетащить объект в нужное место рабочей зоны.
Для редактирования положения внутри маски, выберите один из слоёв и скорректируйте результат.
Как вырезать сложный объект в Фигме
Сложности могут появиться, когда нужно вырезать только часть объекта у фотографии. Потому что оставить определённый силуэт, перенести его на другой проект звучит как много сложных действий. Развеиваем ваши сомнения! Марина Соныгина подготовила для вас понятную инструкцию, чтобы у вас всё получилось!
1. Открываем нужное фото в Figma. Располагаем удобным образом. Поправьте размер изображения, чтобы было удобно вырезать фигуру.
2. Для вырезания сложных фигур лучше использовать Pen Tool. Ранее мы рассказывали, как им пользоваться. Пером получится сделать несколько вырезаемых объектов на фото. Сначала обведите одно место, затем перейдите к другим
3. Затем используйте заливку (Fill). Иконка баночки с краской (панель инструментов внизу). Цвет может быть любым, по умолчанию — серый.
4. Переносим слой Vector 1 с помощью мышки под изображение. Выделенное изображение станет полупрозрачный.
5. Выделите оба слоя, кликните правой кнопкой мыши по ним. Выберите функцию Use as mask из выпадающего списка.
5. Выделите оба слоя, кликните правой кнопкой мыши по ним. Выберите функцию Use as mask из выпадающего списка.
Этим способом вы можете создать сложную композицию без ошибок. Например, вырезать только лицо, оставив волосы или фон. Важно не торопиться, а следовать инструкции.
💡 Большинство операций зависит от точного понимания, какой вырезаемый фрагмент нужен, какую форму нужно придать изображению. Выбор подходящего инструмента важен для хорошего результата. Проведение чётких линий даёт точный результат. Будьте внимательны на всех этапах! Экспериментируйте с разными возможностями, изучайте комбинации клавиш!
Комбинации клавиш для вырезания в Figma
В каждом редакторе есть универсальные горячие клавиши. Они экономят много времени. Их удобно использовать, когда вы уже немного умеете работать с объектами в Figma. Вы можете увидеть горячие клавиши напротив каждого действия. Марина Соныгина выделила базовые комбинации для вашего удобства. Сохраняйте себе в закладки, чтобы не потерять!
💡 Помните, что умение работать с обозначением контуров, правильной обработкой вырезаемых объектов в Figma. Навык открывает школьникам новые возможности для творческих идей. Сохраняйте промежуточные версии проекта, чтобы иметь возможность вернуться назад. Подборка комбинаций поможет вам сделать всё быстро!
Заключение
Мы постарались подробно, просто рассказать, как вырезать объект в Figma несколькими способами. Вы можете выбрать удобный вам вариант. Начните с малого — попробуйте выделить предмет по контуру и использовать маску. В Hello World School мы вдохновляем учеников создавать шедевры. А родители становятся первыми зрителями их открытий!
Хоменко Алексей
Закончил Волжский институт строительства и технологий по специальности «Инженер строительно-дорожных машин». Проходил переобучение на маркетолога в Я. Практикуме, более 7 лет самостоятельно обучался дизайну в Figma.
Как вам статья?
Похожие статьи
