Альтернативный эффект (круг) для фото в Figme

<<<<

1) Авторизуетесь на сайте Figma

2) Для создания круга с вашим фото нажимаете кнопку: New design file (Новый файл дизайна)

3) Откроется поле

В открывшееся поле перетягиваете ваше бесфоновое фото

4) Если изображение под наклоном, кликаете по нему правой кнопкой мышки и в открывшемся меню выбираете: Flip Horizontal

Фото разворачивается на 180%

5) Рисуем круг

Для этого нажимаете на квадрат - квадрат выделяется

далее нажимаете на стрелочку у квадрата - открывается меню

в меню выбираете и нажимаете на строчку: Ellipse

Появится слой Elipse 1

РИСУЕТЕ КРУГ:

Для этого на клавиатуре нажимаете клавишу: Shift

проверяете, чтобы

на панеле инструментов высвечивался: кружок

и был выделен слой: Ellipse 1

далее на пустом месте около фото нажимаете левой кнопкой мышки и растягиваете мышкой круг:

Круг должен быть таким, чтобы голова и нижняя часть туловища вылезали за рамки фотографии.

6) Меняете цвет круга

Для этого:

в левом меню выделяете мышкой слой: Ellipse 1

в правом меню нажимаете на серый квадратик (в Backgrounde)

и выбираете подходящий цвет: EB8016, (F612E0 роз) 1297F6 син EFF317 желт 1BF317 зеленый FEF529 желтый

крестиком сворачиваете меню

7) Перетаскиваете слой ФОТО выше слоя Ellipse 1 (круга)

для этого кликаете мышкой по слою фото - слой фото выделяется

и левой кнопкой мышки перетягиваете слой фото выше слоя Ellipse 1(круга)

8) Выделяете оба слоя

Для этого нажимаете на клавиатуре клавишу Shift и удерживая клавишу

кликаете левой кнопкой мышки по слою фото (1-ому) и по второму слою (Ellipse 1 (круг))

Слои выделяются

9) Нажимаете Masky

Для этого

нажимаете на половинозакрашенный кружочек на верхней панеле

в левом меню появился слой: Mask Group

фото стало отражаться в кружочке

Маска применилась

10) Перенос слоя фото над слоем маска (Mask group)

Для этого:

Левой кнопкой мышки в левом меню выделяете слой "Фото без фона"

Далее нажимаете клавишу: Alt

Затем левой кнопкой мышки перетаскиваете вверх слой "Фото.." над слоем Mask group

вид картинки поменяется

При наведении мышкой на нижний слой (Ellipse 1) вид:

11)

СДЕЛАЕМ ДУБЛИКАТ СЛОЯ ФИГУРЫ (Ellipse 1)

мышкой выделяете слой: Ellipse 1 (слой круга)

нажимаем на клавиатуре клавишу: Alt

левой кнопкой мышки перетаскиваем вниз слой: "Vector 1"

появился ещё один (второй) слой: "Ellipse 2"

12) Отменяете слой маска для второго слоя Ellipse 2

Для этого:

мышкой выделяете слой: Ellipse 2

нажимаете на половиннозакрашенный кружочек на верхней панеле

изображение проявится:

13) Обрезаете нижнюю часть фото

Для этого:

мышкой выделяете наверху слой: "Фото без фона"

на верхней панели нажимаете на четырехугольник со стрелкой (кнопка обрезать)

Появится меню и рамка с синими креплениями:

двигаете снизу вверх рамку за синие крепления

фото обрезается по нижней линии круга

(затушеванная часть)

Далее щелкаете мышкой два раза по пустой области

Создался эффект выглядывания из круга:

14) Объединяете слои

Для этого на клавиатуре нажимаете и удерживаете клавишу:

Schift

кликаете мышкой на верхний слой

кликаете мышкой на нижний слой

все слои выделились

Далее наводите мышкой на слои

и нажимаете правую кнопку мышки

Откроется меню

В меню нажимаете строчку: Group selection (Выбор группы)

В место слоёв теперь высвечивая группа: Group 1

15) Сохраняете изображение

Для этого:

переходите в правую область с настройками

и нажимаете: Export

в открывшемся поле проверяете, чтобы указано было PNG

и нажимаете кнопку: Export Group 1 (экспорт группы)

Заходите в загрузки:

Копируете правой кнопкой мышки файл: Group 1.png

и сохраняете в нужную папку.

Как создать ссылку на изображение в Figma >>