Стекломорфизм – это стильно. Покажем, что такое стекломорфизм и как сделать с ним дизайн

Стекломорфизм, Glass effect и Glassmorphism – это одно и то же. Это популярный тренд, начиная с 2021 года.

Изображение взято из свободного доступа в интернете

Что такое глассморфизм?

Эффект матового стекла с размытым фоном.

Признаки:
– размытая прозрачность, которая создаёт многоуровневый эффект;
– полупрозрачные объекты имеют тонкую светлую границу (не всегда);
– яркие цвета (не всегда);
– некоторые объекты плавают в пространстве (не всегда).

Выглядит это так:

Признаки, которые сразу помогут понять, что перед вами стекломорфизм

"Glassmorphism" в действии

Стиль может использоваться по-разному:

– с элементами интерфейса;
– с иллюстрациями;
– с фотографиями.

Вложенность или глубина тоже могут быть любыми. Чаще дизайнеры прибегают к простому размытию «матовым стеклом».

Страничка сайта для путешественников. Нет ярких цветов. Всего один уровень вложенности. Выглядит стильно.

Изображение взято из свободного доступа в интернете

В этом примере мобильного приложения используется несколько уровней вложенности. Есть иллюстрации и элементы интерфейса.

Изображение взято из свободного доступа в интернете

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

Команда BrainFan уважает право на авторство. Изображение взято из свободного доступа в интернете

Как сделать стекломорфизм?

Нарисовать глассморфизм не сложно. Это можно сделать в фотошопе, скетче или фигме.

Логотипы программ Sketch, Adobe Photoshop и Figma.

Шаг 1

Создаём или ищем фон. Пользуйтесь бесплатными стоками.
Для нашего стекломорфизма мы выбрали этот фон:

Изображение для фона взято с сайта Пиксабэй

Создайте прямоугольник на новом слое или прямоугольную фигуру (если вы работаете в Figma. Задайте ему такие свойства.

Цвет: белый
Прозрачность: 50%

Скруглите прямоугольнику углы.

Можно сделать фон менее ярким – размыть его. Как мы и сделали. Тогда и текст, и объекты будут считываться лучше.

Шаг 2

Если хотите сделать светлую обводку, необходимо поменять цвет прямоугольника.

Цвет: серый, но ближе к белому
Прозрачность: 60%
Толщина обводки: 1-3 px

Мы выбрали такой цвет

Получится так:

Шаг 3

Теперь, когда вам понятен сам принцип, можете создать другой прямоугольник. Просто дублируйте предыдущий.

Теперь следует задать новой фигуре параметры:

Цвет: оставить тот же
Прозрачность: 70%
Толщина обводки: 1-3 px
Тень: смещение Y16, размытие 32-35.
Установите заливку тени, подобрав цвет фона или кликнув на участок фона пипеткой.

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

Шаг 4

Как показать матовое стекло?

Создайте новый прямоугольник с параметрами:

Цвет: белый
Прозрачность: 50%
Эффект: размытый фон 15-20
Вам придётся не использовать тень, иначе она будет на заднем фоне прямоугольника.

Нас интересует настройка Background blur, которая как раз и даёт эффект матовости.

Получилось примерно так:

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

Но не забывайте, что вы можете создать свой уникальный дизайн. Экспериментируйте!

Топ-7 трендов в дизайне, которые будут популярны в 2021 году

Редизайн, ребрендинг и рестайлинг. В чем разница и как понять, когда ваш бизнес в этом нуждается?

Без фотошопа. Как делать крутые картинки в простых онлайн-редакторах

Что делать? Пишу посты в соцсетях, но их не читают и не лайкают

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

О нас

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

Подписывайся на канал и получай результат!
Мы ВКонтакте.