Глассморфизм и с чем его едят

В последнее время, да и ранее, вы могли заметить входящую моду на стеклянные панели в дизайне. Стекло, мягко размывающее фон, скруглённые углы и тд

Всё началось с Apple(IOS7) и Windows Wista

Особенности

• Мутная прозрачность
• Многоуровневый подход с объектами.
• Насыщенные цвета, подчеркивающие размытость
• Тонкая светлая граница, как на реальном стекле, будто рефлекс.

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

Это всё конечно безусловно красиво и мило, но, вдруг вы хотите сами этого добиться?

Делаем в Figma

Буду делать подобные картинки и в Figma и в Adobe Illustraitor. Думаю замутнить круг с градиентом будет достаточно.

Начнём с простого

Ура, круг готов, делаем красивый градиент.

Вот так, теперь идём к важному

Немного добавим эффектов, чисто для виду, а так же создадим тот самый квадрат, который будет стеклянным

Добавляем "квадрату" градиент и выбираем эффект "Background blur"

Следом за этим делаем прозрачность в разделе "Fill"

Делаем блюр сильнее и делаем светлую обводку

Тадам! теперь вы знаете как сделать в Figma Глассморфизм. Здесь это крайне просто, так что особых трудностей, думаю не вызовет. Теперь будет посложнее.

Делаем в Ai

Здесь всё посложнее, так как нужно использовать маски, размытие по Гаусу и тд. Время пробовать!

Делаем круг, примерно такой же как в Figma, для примера

Так же пихаю сюда тень, а прямоугольнику градиент

А теперь сложный момент, нужно скопировать фон и ещё один "квадрат", запихнуть его под наш прямоугольник(Маска), и потом размыть этот фон(круг и цвет фона) размыть по гаусу.

Выделяем скопированые элементы, и применяем это

Если скрыть остальные элементы, выйдет так

Выделяем фоновые элементы, которые мы запихнули в маску, и применяем Блюр Гауса

Ставим чтобы было по-красивее

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

Готово!

Спасибо что прочитали