Размытый градиент Figma

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

Размытый градиент в фигме

Сделать плавный переход между четким изображением и размытым можно при помощи маски. Для этого тебе понадобится три слоя и сложить их один под другим. Самое главное тут, чтобы верхний и нижний слои были одинаковыми, то есть — сверху и снизу одно и то же изображение с которым ты работаешь. Средний слой может быть залит чем угодно. Но его нужно залить линейной заливкой(Linear) от 100% прозрачности  до 0% прозрачности — это важно.

Размытый градиент в фигма

Теперь берешь верхний слой картинкой и средний слой с линейной заливкой и применяешь к ним маску. С виду ничего не меняется, но на самом деле теперь ты видишь верхнее фото и часть нижнего слоя, который «пробивается» через твою полупрозрачную маску.

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

Убираем ореол от нижнего слоя

Работа с размытым градиентом в фигма

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

Размываем фон фото

Как сделать плавный переход между картинками в фигма — читай вот тут.

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

Видео версия урока

Оставьте комментарий

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