Какие существуют техники создания матового стекла в дизайне интерфейсов?

Некоторые техники создания эффекта матового стекла в дизайне интерфейсов (глассморфизма): media.contented.ru idbi.ru

1. Выбор фигуры. idbi.ru На первом шаге создают пространство, которое позже станет стеклянным. idbi.ru Это может быть как маленькая иконка, так и рабочая область, в которой отображается контент. idbi.ru
2. Добавление фона. idbi.ru Можно использовать градиентную заливку или добавить бэкграунд в виде картинки. idbi.ru В большинстве случаев для создания «матового стекла» используют яркий фон с геометрическими фигурами. idbi.ru
3. Настройка размытия. idbi.ru Стеклянная поверхность появляется благодаря размытию фона. idbi.ru Нижняя подложка после этого выглядит как пятно, а контент просматривается через слой. idbi.ru
4. Добавление границы. idbi.ru Если не использовать обводку по контуру, выделенная область будет слишком тонкой. idbi.ru
5. Создание тени. idbi.ru Лёгкая тень проводит границу между слоями. idbi.ru
6. Наполнение контентом. idbi.ru Остаётся добавить в центральную область содержимое, которое будет «лежать» на поверхности. idbi.ru

Повторить эффект матового стекла можно в Adobe Photoshop, Figma и во многих других графических редакторах. media.contented.ru