97
2025-11-25 14:39:22

Как в фигме обрезать картинку по фигуре

В Figma есть несколько способов обрезать картинку по фигуре. Перечислим основные методы, как это сделать просто и эффективно.

Использование масок

Это самый простой и популярный способ:

  1. Создайте фигуру (круг, прямоугольник, многоугольник и т.д.).
  2. Поместите картинку поверх фигуры.
  3. Выделите оба объекта (фигуру и картинку).
  4. Правой кнопкой мыши - "Use as Mask".
  5. Или используйте горячие клавиши: Ctrl/Cmd + Alt + M.

Изображение будет обрезано по границам вашей фигуры. Для дальнейшей корректировки просто дважды щелкните по маске, чтобы переместить или масштабировать картинку внутри обтравочной области:

Действие

Результат

Примечание

Двойной клик по маске

Открывает контейнер для редактирования

Позволяет перемещать и масштабировать изображение внутри маски

Перетаскивание изображения поверх фигуры

Автоматическое создание маски

Быстрый метод без выделения нескольких объектов

Использование горячих клавиш Ctrl+Alt+M

Применение маски к выделенным объектам

Работает при выделении как фигуры, так и изображения

 

Использование Fill с обрезкой

Этот метод позволяет заполнить любую созданную вами фигуру изображением, как если бы оно было заливкой. Начните с создания векторного контура, например, круга или звезды.

  1. Создайте фигуру.
  2. В панели Design найдите раздел Fill.
  3. Перетащите картинку на образец заливки.
  4. Настройте обрезку:
  • Щелкните по образцу заливки.
  • Отрегулируйте положение и масштаб картинки.
  • Выберите тип заполнения: Fill, Fit, Crop и т.д.

 

Этот способ отлично подходит для создания стильных аватарков или декоративных элементов.

 

Составные фигуры Boolean operations

Для обрезки картинки с помощью составных фигур создайте поверх изображения векторный контур желаемой формы, например, круг или многоугольник. Важно, чтобы эта фигура полностью перекрывала область кадрирования.

  1. Создайте нужную фигуру.
  2. Поместите картинку под фигурой.
  3. Выделите оба объекта.
  4. В панели Boolean operations выберите "Intersect".

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

Полезные советы по обрезке картинки по фигуре

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

  • Для редактирования маски: дважды щелкните по маске.
  • Чтобы изменить положение картинки: выделите картинку внутри маски и перемещайте.
  • Для изменения формы: редактируйте фигуру-маску.
  • Быстрая маска: можно сразу создать фигуру, залить ее картинкой и настроить обрезку.

Вывод

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

Сделайте первый шаг
Выберите готовый шаблон сайта и запустите свой интернет-магазин уже сегодня
Начните бесплатно