Эффект матового стекла или как его ещё называют глассморфизм (glassmorphism) — новый тренд в современном дизайне, который из дизайна интерфейсов перекочевал в дизайн видеороликов.
Глассморфизм гармонично сочетается с минималистичным дизайном из-за эффекта лёгкости. «Стеклянные» объекты словно парят в воздухе и привлекают к себе внимание.
«Матовое стекло» придает объектам глубину и выстраивает чёткую иерархию. Пользователи видят, что один слой располагается поверх другого и без лишних подсказок понимают, какой является главным.
Этот эффект позволяет сделать пространство в кадре более объёмным, поэтому и популярность этого эффекта растет.
К его основным характеристикам относятся:
- Прозрачность (эффект матового стекла с использованием размытия фона)
- Многоуровневый подход с объектами, плавающими в пространстве.
- Яркие цвета, подчеркивающие размытую прозрачность
- Тонкая светлая граница на полупрозрачных объектах.
Эта вертикальность и тот факт, что вы видите сквозь нее, означает, что пользователи могут воспринимать иерархию и глубину пространства.
Эффект матового стекла в дизайне появился относительно недавно, но у него уже появились противники, которые утверждают, что концептуальный стиль не подходит для серьёзных проектов из-за высокого риска сместить фокус с важных деталей.
Проблемы с балансом часто возникают, когда у дизайнера нет опыта работы с эффектом «матового стекла».
В работе необходимо добиться того, чтобы сделать слои самодостаточными, но один из них должен «лежать» на другом.
Если равновесия не будет и акцент сместится в сторону подложки, управление вниманием зрителя может пострадать.
Как создаётся эффект:
- Выбор фигуры. На первом шаге необходимо создать пространство, которое позже станет стеклянным. Это может быть как маленькая иконка, так и рабочая область, в которой отображается контент.
- Добавление фона. Можно использовать градиентную заливку или добавить бэкграунд в виде картинки. В большинстве случаев для создания «матового стекла» используют яркий фон с геометрическими фигурами.
Настройка размытия. Стеклянная поверхность появляется благодаря размытию фона. Нижняя подложка после этого выглядит как пятно, а контент просматривается через слой.
- Добавление границы. Если не использовать обводку по контуру, выделенная область будет слишком тонкой. Без объёма работа не будет завершённой.
- Создание тени. Лёгкая тень проводит границу между слоями. Они связаны между собой, но приоритет отличается.
- Наполнение контентом. Остаётся добавить в центральную область содержимое, которое будет «лежать» на поверхности.
Перечисленных шагов достаточно, чтобы создать глассморфизм. Можно пойти дальше и сделать более крутой визуальный эффект с помощью текстуры. Для этого понадобится ещё один слой с шумом и небольшим процентом непрозрачности.