Для создания эффекта глубины и прозрачности на стеклянных элементах дизайна можно использовать глассморфизм. 2 Вот как это делается на примере программы Adobe Photoshop: 1

1. Преобразуйте изображение в смарт-объект. 1 Откройте картинку, на которую хотите добавить эффект матового стекла. 1 Рекомендуется использовать картинку, цвет которой будет отличаться от цвета основного объекта. 1
2. Выберите инструмент «Прямоугольник» и нарисуйте фигуру. 1 Можно трансформировать его до получения необходимой формы. 1
3. Выберите слой с фоном и дублируйте его (комбинация клавиш Ctrl+J). 1 Копию перенесите выше слоя с нарисованным прямоугольником. 1 Далее нажмите правую кнопку мыши и в меню выберите «Создать обтравочную маску». 1
4. Используйте инструмент «Внутреннее свечение». 1 Выполните двойной клик по слою с прямоугольником. 1 На открывшейся панели инструментов поставьте галку «Внутреннее свечение». 1 Остальные настройки можно регулировать, смотря за изменениями результата. 1
5. Создайте размытие. 1 Нажмите на верхний слой (копия фона), перейдите в «Фильтр» — «Размытие» — «Размытие по Гауссу» и выберите подходящие значения размытия. 1

Несколько советов, которые помогут улучшить итоговый дизайн:

• Подберите значение прозрачности. 1 Нижняя подложка должна просматриваться, но не настолько сильно, чтобы перекрывать основной контент. 2 Прозрачность должна быть такой, чтобы текст или медиаконтент в центре стеклянной области хорошо просматривался независимо от разрешения экрана. 2
• Выберите правильный фон. 12 Фон при размытии должен быть достаточно сдержанным и не перетягивать на себя внимание за счёт ярких пятен или крупных объектов, которые сохранили свои очертания даже после размытия. 1 Выбранный фон также должен визуально сочетаться с основным контентом работы. 1
• Добавьте обводку. 12 Даже тонкая линия и правильно подобранный цвет контура усилят акценты. 1

Также для создания эффекта матового стекла на CSS можно использовать свойство backdrop-filter. 4 Для этого нужно добавить к нужному элементу свойство backdrop-filter, например, со значением blur(40px). 4

Результат работы зависит от фантазии дизайнера и опыта работы. 2