В этой быстрой подсказке вы узнаете, как создать эффект матового стекла в Figma. Это действительно популярный эффект, и на самом деле его очень легко (всего за пару шагов) воссоздать в Figma, так что давайте начнем с глазури!
Матовое стекло в Figma
Вот видеоверсия этого быстрого совета. Присоединяйтесь к нам на нашем канале Envato Tuts + YouTube:
Вот эффект, к которому мы стремимся:
1. Начните с изображения и прямоугольника
Добавьте изображение на холст, затем нарисуйте прямоугольник поверх.
Установите заливку прямоугольника на нужный вам цвет (я выберу белый #ffffff).
2. Добавление эффекта
Выделив прямоугольник, уменьшите его непрозрачность до 20% и затем добавьте эффект на панели свойств под ним. Сделайте эффект Размытие фона и, щелкнув диск слева от элемента управления эффектом, примените любое значение, которое вы хотите (100 на самом деле работает довольно хорошо).
Возможно, вы захотите поиграть и с уровнем непрозрачности, но с эффектом размытия и непрозрачностью вы можете контролировать точное Эффект матового стекла, который вам нужен.
Figma Frosting Complete!
Вот как вы можете легко создать эффект матового стекла в Figma. Ознакомьтесь с этими другими руководствами, чтобы узнать больше об аналогичных эффектах в других дизайнерских приложениях и работе с Figma:
-
ЭскизЭскиз за 60 секунд: создание эффекта матового фонаАди Пурдила -
CSSДва способа создания эффекта матового стекла в CSSАди Пурдила
-
FigmaКраткое руководство по настройкам заливки изображения в FigmaАди Пурдила
-
Figma4 способа изменения размера элементов в FigmaАди Пурдила
- Feed
- Нравится
- Подписаться
Подпишитесь ниже, и мы будем еженедельно отправлять вам по электронной почте сводку всех новых руководств по веб-дизайну. Не упустите возможность узнать о следующем важном событии.
Учебные пособия Envato Tuts + переведены на другие языки членами нашего сообщества – вы тоже можете принять участие!
Перевести этот пост
