Как создать эффект матового стекла в Figma

Реклама
Реклама
Реклама
Реклама
автор Ади Пурдила
Сложность: Начальный Длина: Быстрые языки: Английский Español
Figma

В этой быстрой подсказке вы узнаете, как создать эффект матового стекла в Figma. Это действительно популярный эффект, и на самом деле его очень легко (всего за пару шагов) воссоздать в Figma, так что давайте начнем с глазури!

Матовое стекло в Figma

Вот видеоверсия этого быстрого совета. Присоединяйтесь к нам на нашем канале Envato Tuts + YouTube:

Вот эффект, к которому мы стремимся:

1. Начните с изображения и прямоугольника

Добавьте изображение на холст, затем нарисуйте прямоугольник поверх.

Установите заливку прямоугольника на нужный вам цвет (я выберу белый #ffffff).

2. Добавление эффекта

Выделив прямоугольник, уменьшите его непрозрачность до 20% и затем добавьте эффект на панели свойств под ним. Сделайте эффект Размытие фона и, щелкнув диск слева от элемента управления эффектом, примените любое значение, которое вы хотите (100 на самом деле работает довольно хорошо).

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

Figma Frosting Complete!

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

  • Эскиз
    Эскиз за 60 секунд: создание эффекта матового фона
    Ади Пурдила
  • CSS
    Два способа создания эффекта матового стекла в CSS
    Ади Пурдила
  • Figma
    Краткое руководство по настройкам заливки изображения в Figma
    Ади Пурдила
  • Figma
    4 способа изменения размера элементов в Figma
    Ади Пурдила
Реклама
Реклама
Ади Пурдила
Photoshop, HTML, CSS? Ага , это то, что у меня получается лучше всего. Смешайте это с кивком головы из транса, и вы поймете меня в двух словах.
adipurdila
  • Feed
  • Нравится
  • Подписаться
Еженедельно сводка по электронной почте

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

Реклама
Переводы

Учебные пособия Envato Tuts + переведены на другие языки членами нашего сообщества — вы тоже можете принять участие!

Перевести этот пост

На платформе
Реклама
Реклама
Оцените статью
Botgadget.ru
Добавить комментарий