Обрезаем фото в форме круга
Уроки

Обрезаем фото в форме круга в Figma с помощью маски

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

Как обрезать фото в форме круга в фигме — пошаговая инструкция

Обрезаем фото в форме круга в фигме. Подготовка элементов. круга в

Чтобы обрезать фото в форме круга в фигме вам нужно разместить фото с вырезанным объектом или человеком и круг, который можно нарисовать стандартными инструментами figma.

Изменение цвета круга в фигме

Изменяю цвет круга на #FEDB4D.

Размещение элементов для обрезания внизу в форме круга

Затем нужно разместить фото, которое хотите обрезать поверх круга, как показано на скриншоте выше.

Дублирование элементов для обрезания в форме круга в фигме

Далее нужно дублировать эти элементы. Для этого выделите их, нажмите на клавишу «Alt» и поведите в сторону.

Создание маски в фигме.

Элементы, которые расположены слева нужно выделить и нажать на иконку маски сверху по центру «Use as mask».

Обрезание фото в Figma. Иконка crop image.

Затем выбираем правую фотографию и нажимаем на «Crop image», чтобы обрезать изображение.

Обрезание фото в Figma. Иконка crop image.

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

Совмещение элементов для создания эффекта обрезанного фото в фигме

Затем возьмите и совместите все элементы вместе, чтобы одна часть выглядывала из круга, а другая была обрезана по его форме. Получается классный эффект! Для удобства вы можете сгруппировать все элементы нажав на клавиши «Ctrl» + «G».

Копирование элементов в формате PNG

Также можно скопировать эту фотографию в формате PNG, чтобы был 1 элемент а не группа. Для этого нажмите на правую клавишу мыши и выберите пункт «Copy/Paste as», затем выберите «Copy as PNG». Также можно нажать на комбинацию 3 горячих клавиш «Shift» + «Ctrl» + «С». Для вставки нажмите «Ctrl» + «V».

Как это можно использовать в вашем дизайне?

Дизайн макет в Figma. Пример использования фото с обрезанным фото в веб-дизайне.

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

Заключение

Итак, вы этой инструкции мы с вами обрезаем фото в форме круга. Вы узнали, как сделать классный эффект и использовать его в своём дизайне. Например при создании дизайна Landing Page.

Автор статьи: Владимир Чернышов

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *