как обрезать фото в фигме

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

1. Загрузка изображения в Figma

Чтобы начать, нужно сначала загрузить изображение в рабочее пространство Figma:

Откройте файл, в который хотите добавить изображение.
Перетащите изображение из вашего файлового проводника (или используйте команду Ctrl + Shift + K или Cmd + Shift + K на Mac) и вставьте его на холст.
Вы также можете выбрать инструмент «Place Image» в меню File > Place Image или использовать горячие клавиши Shift + Ctrl + K (или Shift + Command + K на Mac), чтобы загрузить изображение с вашего компьютера.

2. Создание кадра (Mask)

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

Шаги для создания маски:

Выберите инструмент «Frame Tool» (F) в верхнем меню или используйте горячие клавиши F. Нарисуйте кадр той формы, в которой вы хотите обрезать изображение. Например, если хотите сделать обрезку по кругу, нарисуйте круг, если по квадрату — квадрат.
- Примечание: Этот кадр (или форма) будет играть роль маски, которая будет скрывать части изображения за его пределами.
Размещение изображения. Перетащите ваше изображение внутрь получившейся формы (кадра), так, чтобы оно стало дочерним объектом (его можно будет увидеть в иерархии слоев справа).
Маскирование: Теперь, чтобы применить маску, выделите оба элемента: сначала изображение, затем форму (кадр).
- Для этого удерживайте Shift и щелкните на обоих объектах.
Применение маски: Нажмите Ctrl + Alt + M (или Cmd + Option + M на Mac) или выберите в верхнем меню «Use as Mask» (Использовать как маску). После этого изображение обрежется по границам кадра, и все, что выходит за его пределы, будет скрыто.

3. Редактирование обрезанного изображения

Когда изображение обрезано с помощью маски, можно его редактировать, чтобы подстроить под нужный размер и композицию.

Перемещение изображения внутри маски: Чтобы изменить видимую часть изображения, выберите само изображение (щелкнув по нему), и перетащите его внутри маски. Это позволит вам изменить положение изображения относительно маски.
Изменение размеров изображения: Чтобы изменить масштаб изображения внутри маски, выберите само изображение и измените его размер, используя угловые маркеры (не изменяя размер формы маски).
- Если вам нужно пропорционально масштабировать изображение, зажмите клавишу Shift во время изменения размера.
Изменение формы маски: Если вам нужно изменить форму обрезки (например, превратить квадрат в круг), просто выделите маску (кадр) и отредактируйте её форму с помощью инструментов в панели свойств (например, измените радиус скруглений для прямоугольников или используйте инструмент «Ellipse» для кругов).

4. Дополнительные настройки

Маска с несколькими изображениями: Если вам нужно создать маску с несколькими изображениями, вы можете повторить шаги для каждого из них и использовать один общий кадр для всех. Это удобно, например, для создания галерей изображений.
Использование маски с эффектами: Вы можете применить различные эффекты (например, тени или размытие) как к самой маске, так и к изображению, чтобы усилить визуальный эффект. Для этого выделите элемент (маску или изображение) и в панели свойств активируйте эффекты.
Маска с прозрачным фоном: Если вы хотите, чтобы фон изображения стал прозрачным, просто добавьте в маску объект с прозрачным фоном, а саму маску сделайте с округлыми углами или в любой другой форме.

5. Удаление или изменение маски

Если по каким-то причинам вы хотите вернуть изображение в исходное состояние (удалить маску или изменить её форму):

Выделите объект с маской.
Нажмите правую кнопку мыши и выберите «Remove Mask» (Удалить маску).
После этого изображение вернется в исходное состояние, и вы сможете сделать новый кадр и заново применить маску.

Дополнительные советы:

Маски и выравнивание: Чтобы выровнять изображение или кадр с маской, используйте инструменты выравнивания в верхней панели. Это поможет точно позиционировать объекты на холсте.
Группировка элементов: Если вы работаете с несколькими изображениями и масками, не забывайте группировать элементы (Ctrl + G или Cmd + G на Mac), чтобы легче управлять ими на холсте.

Теперь у вас есть полное руководство по обрезке изображений в Figma! Это достаточно гибкий процесс, который можно настроить под любые нужды. Если возникнут дополнительные вопросы, не стесняйтесь обращаться!