Как сделать стекло морфизм в фотошопе
Обновлено: 04.07.2024
Как многие уже слышали, одним из трендов 2021 года в дизайне стал глассморфизм.
Для тех, кто в танке, выглядит сие чудо следующим образом:
Стиль ака виндоус виста. Эффект стекла, а на бэке всякие яркие вещи. Предполагает углубление в интерфейс, матовость и многоуровневый подход.
Стиль, можно сказать, не новый. Этим уже давно пользуется apple и не забываем про windows vista, но как вы знаете, всё новое — хорошо забытое старое
Сейчас он стал просто популярнее и конечно же господа с дрибла уже побежали делать шоты в стиле, но есть одно но.
Как и неоморфизм, глассморфизм это штука довольно ситуативная.
Да, шоты на дрибле — это замечательно, но вы видели реально хорошие кейсы, которые годно работают и не страдают по читаемости и блин нормальной юзабельности?
Я не спорю, можно использовать любой тренд с умом и жить спокойно.
А можно использовать его плохо и убивать понятность для пользователей
Чисто моё мнение — тренд останется внутри шотов на дрибле в виде концептов, как и неоморфизм)
Тренды трендами, а использовать надо с умом)
Вывод статьи: любым трендом нужно уметь пользоваться, помнить о пользе для пользователя, а не красивости (можно и без ума, если хотите померяться письками на дрибле:))
если вы не заметили, то это уже давно используется что на маке, что в планах у windows. колхозаны, обидевшись на закат неоморфизма (в который они так и не смогли) придумали чуть более умеренный и простой тренд, чтобы хоть где-то и как-то побыть. тренд, думаю, останется ровно в той мере, в которой он существовал до хайпа с глассморфизмом.
в целом, если все делать с умом и пониманием, для чего что использовать, то и неоморфизм был жизнеспособен, но это надо уметь и думать немного (что было, скорее, исключением из правил).
смысла мусолить это вообще нет
Для того, чтобы работал неоморфизм, нужен фон, отличный от белого (чтобы был виден светлый рефлекс) и чтобы глассморфизм работал, нужны объекты на фоне, показывающие полупрозрачность и размытие. В этом и есть главная проблема.
Пример в шапке скучноват, к тому же линейные иконки уже давно вызывают зевоту.
Такая же шляпа как и неоморфизм
БКС Мир инвестиций получил две награды Investment Leaders Award Представление интересов крупной энергетической компанииЮридическая фирма «Надмитов, Иванов и Партнеры» представляла интересы крупной энергетической компании–истца в судебном процессе в Арбитражном суде Свердловской области по делу об определении размера компенсации некомпенсируемых финансовых убытков, обусловленных приостановлением вывода из эксплуатации источника тепловой энергии.
Дизайнеры экспериментируют с дизайнами, чтобы привлечь внимание пользователя к веб-странице. Отсюда и получаются тренды дизайна — работающие решения. Одно из таких — тренд дизайна 2021 года — стекломорфизм. Что такое стекломорфизм? Как использовать стиль дизайна в своих работах? Как создать стекломорфизм? Показываем на конкретных примерах преимущества этого стиля, неудачные варианты использования и рассказываем, как создать дизайн в стиле стекломорфизма.
Приложение Smart Calendar от Ghani Pradita
Glassmorphism или, как его еще называют, стекломорфизм стал новым трендом в UI дизайне 2021 года. Придя на смену неоморфизму, этот стиль привлек внимание пользователей простотой, красочностью и удобством.
Как использовать глассморфизм в дизайне и что это вообще за стиль? Давайте разбираться.
Откуда пришел глассморфизм?
Для сравнения показываем интерфейсы Windows Vista и MacOS 11 Big Sur:
Главные особенности стекломорфизма
“Glassmorphism” в дословном переводе означает “морфизм стекла”. Из названия следует, что элементы стиля ассоциируются со стеклом. По сути, стекломорфизм это стиль в веб-дизайне, подразумевающий использование непрозрачных стеклянных модулей с размытым фоном.
Отличительные признаки стекломорфизма:
- Матовые стеклянные элементы интерфейса;
- Наличие тоненькой светлой границы у полупрозрачных элементов;
- Парящие в интерфейсе объекты;
- Контрастирующие цвета, акцентирующие внимание на прозрачности.
Покажем все особенности на конкретном примере:
Благодаря многоуровневости дизайна и контрасту между блоками, пользователю проще воспринимать и разграничивать иерархичность интерфейса. Грамотное использование стеклянных элементов помогает добиться легкости изображения на экране. Главное не переусердствовать с элементами.
Когда уместно применять стекломорфизм?
В веб-дизайне стекломорфизм используется для:
- элементов интерфейса;
- иллюстраций;
- фотографий или видео.
Степень размытия и глубина используемых цветов регулируются в зависимости от конкретной задачи. В этом заключается гибкость данного стиля.
Дизайн мобильного приложения на примере выше представляет из себя многоуровневую структуру, состоящую из иллюстраций и элементов интерфейса, которые контрастируют друг с другом. Дизайнерское решение выглядит современно, а информация легко воспринимается с экрана телефона.
А в этом примере лендинга использованы неяркие, но контрастирующие со стеклянными элементами, цвета:
Универсальность стекломорфизма
Несмотря на многогранность использования стиля, нельзя забывать о том, что стекломорфизм ситуативен, то есть подходит не для всех задач.
Стеклянные элементы используйте там, где требуются воздушность и простота восприятия интерфейса. Однако применение модулей в стиле стекломорфизма неуместно в дизайне, требующем строгости и делового стиля. К примеру, Вы можете представить себе сайт Госуслуг с элементами стекломорфизма? Ответ очевидный: нет. Пользователь не воспримет стиль, ведь стеклянные блоки не похожи на деловой стиль. Решение об их использовании стоит принять после анализа целевой аудитории и сферы проекта.
Как создать эффект стекла?
Для создания стеклянного дизайна используют основные инструменты дизайнера Sketch, Adobe Photoshop или Figma. Принцип работы во всех программах одинаковый.
Наиболее прост в исполнении способ создания дизайна в Figma. Рассмотрим его.
Фон
От фона зависит удобство использования интерфейса, поэтому к выбору нужно отнестись с умом. Фон в стекломорфизме не должен быть примитивным. Как мы уже выяснили, прозрачные стеклянные элементы отлично контрастируют с красочными тонами заднего плана. Однако не стоит делать выбор в пользу однотонного яркого фона, либо перегружать его деталями, так как в таком случае дизайн будет нечитабельным.
Элементы
Создание элементов в Figma не должно вызывать сложностей. Однако стоить помнить о том, что стекломорфизм очень легкий стиль, требующий скругленности углов и обтекаемости форм для создания эффекта левитирующих в пространстве объектов. Для него отлично подойдут прямоугольники со скругленными краями и эллипсы.
Прозрачность
Эффект прозрачности прост в исполнении, если повторить следующие настройки при создании элемента:
ВАЖНО! В настройках меняем показатель Opacity Fill, а не Opacity Layer. Если прозрачность фона будет меньше прозрачности заливки элемента, получить стеклянный эффект не получится: размытие фона не будет работать.
Также стоить помнить о перспективе и световой композиции дизайна. Блоки, находящиеся на переднем плане, должны быть более четкими и яркими, чем на среднем и заднем планах.
Контур
После создания прозрачного элемента переходим к дизайну контура. Создайте светлую внутреннюю границу элемента: толщина 1-4 px и произвольная прозрачность. Имитация отблеска края стекла у контура элемента поможет выделить его на фоне.
Тень
Заключительный этап создания дизайна в стиле стекломорфизма — добавление теней. Экспериментируйте! Нельзя дать точные настройки для создания универсальной тени. Каждый дизайн уникален, то есть интенсивность и размытие тени подбираются индивидуально.
Установите настройки, указанные ниже, а далее подберите подходящие значения самостоятельно:
Добавление теней в дизайне поможет создать многоуровневый эффект с плавающими, будто парящими в пространстве, элементами.
Когда стекломорфизм выглядит неудачным решением
Часто дизайнеры, воодушевившись новым трендом, начинают использовать его в работе бездумно, нагромождая элементы один на другой. Так делать не стоит.
Дизайн в стиле стекломорфизма легко испортить, если не знать меру. Главное правило: помнить о структуре и логичности дизайна. Не следует использовать стекломорфизм для создания кликабельных элементов, так как им необходимо контрастировать с полупрозрачным фоном.
На картинке ниже представлены два дизайна в стиле стекломорфизма. Только в первом случае (слева) мы видим правильный, логичный дизайн с яркими акцентами, а во втором случае (справа) перегруженный прозрачными элементами интерфейс, который будет доставлять дискомфорт при его использовании.
Выводы
Стекломорфизм нравится пользователям и дизайнерам. Легкость и простота восприятия отличают его на фоне других стилей. Однако помните, что использовать этот стиль следует с осторожностью. Важно соблюдать иерархичность интерфейса и не перегружать его лишними элементами.
Соблюдайте контраст между элементами, не забывайте о тенях и контуре для лучшего восприятия. Экспериментируйте и создавайте уникальные дизайны.
В данной статье я опишу способ создания эффекта стекла в фотошопе. С помощью наложения данного эффекта можно абсолютно любой объект превратить в стеклянный. Подобный эффект может не редко пригодиться, особенно, если вы занимаетесь коллажами или веб-дизайном.
Вот, к примеру, несколько работ, в которых я использовал данный эффект.
В данном уроке мы будем делать вот такую композицию, будем превращать обычную туфельку в стеклянную.
1. Подготовка фона и объекта
Для работы я взял женскую туфельку, которую мы будем превращать в стеклянную. Туфелька вырезанная с фона, я её просто нагуглил в png формате. Для начала зададим задний фон. Стеклянные объекты хорошо видны на тёмном фоне, поэтому я сделал вот такой градиент от тёмно-красного к светлому, ну и изобразил такой вот простой подиум инструментом "прямоугольник".
Давайте сделаем копию туфельки, из которой будем делать стеклянную и поставим её рядом с оригиналом, ну просто, чтобы было видно разницу. Удерживая клавишу Alt и левую кнопку мыши перетаскиваем слой с туфелькой вверх и получаем копию.
Оригинал и фон, давайте сгруппируем в отдельную папку, чтобы они нас не отвлекали при работе. Выделяем эти слои, удерживая Ctrl и кликая по каждому слою левой кнопкой мыши, после чего нажимаем на значок "Создать новую группу". Ну и залочим этот слой, кликнув по иконке замочка.
2. Наложение эффекта стекла на туфельку
Теперь, берем нашу копию и делаем из неё еще три копии, чтобы у нас было четыре слоя и пронумеруем их от одного до четырёх. Отключаем видимость первых трёх слоёв, кликая на значок глаза у каждого и будем работать с четвёртым слоем.
Кликаем по нему два раза левой кнопкой мыши и в открывшемся окне "Стиля слоя" включаем параметр "Тиснение". Здесь выставляем следующие настройки:
Теперь, чтобы увидеть результат, переходим в "Параметры наложения" и выкручиваем "Непрозрачность заливки" на ноль. Видите, у нас получился такой как-бы ореол нижней части туфельки, примерно так должно это выглядеть на объекте. Данным ореолом необходимо выделить, так скажем, подчеркнуть, нижнюю часть объекта.
Для того, чтобы было чётко видно все черты объекта мы по верх основного слоя сделаем чёрную заливку. Выделим группу с фоном, кликаем по значку "Корректирующий слой", выбираем "Цвет", устанавливаем чёрный и нажимаем "Ок".
Далее нужно сделать полный образ объекта, т.е. наложить такое же тиснение, только уже сверху. Для этого мы используем слой номер 3, включаем его видимость и проделываем всё тоже самое, что и с четвёртым слоем, только меняем угол на противоположный, т.е. не -90 градусов, а 90 градусов.
Когда мы подключаем тиснение к третьему слою, то видим, что все параметры, которые мы настраивали на предыдущем слое сохранились, остаётся только выставить противоположный угол. Мы прописываем угол "90" и нажимаем "Ок". И непрозрачность заливки данного слоя так же выставляем на ноль.
Переходим ко второму слою, его мы будем хромировать. Для начала сделаем его черно-белым. Выбираем в меню "Изображение" - "Коррекция" - "Черно-белое" и в открывшемся окне просто нажимаем "Ок".
Далее, переходим в "Фильтр" - "Галерея фильтров" и в разделе "Эскиз" ищем "Хром". Настройки тут опять выставляем на глаз, в зависимости от самого объекта, я выставил следующие настройки:
Выставим этому слою непрозрачность, примерно на 8%.
Ну и наконец-то переходим к первому слою. Как и второй слой, сначала его сделаем черно-белым и выставим непрозрачность слоя, примерно на 43%.
Теперь проделаем такой трюк: выделяем верхний - четвёртый слой, кликнув по нему левой клавишей мыши и нажимаем на клавиатуре комбинацию клавиш Ctrl + Alt + Shift + E. В результате, у нас все видимые слои объединились в один новый слой, при этом все старые слои не пострадали.
Теперь у всех этих старых слоёв отключаем видимость, выделяем их все и группируем в папку, кликнув на значок группирования.
Далее, на новый слой с черным фоном накладываем фильтр "Стекло". Переходим в верхнем меню в "Фильтр" - "Галерея фильтров" и в разделе "Искажение" выбираем "Стекло". Настраиваем параметры фильтра. "Искажение" поставим на ноль, иначе у нас получится кривая туфелька, "Смягчение" на 10, "Текстуру" - выставим - холст, "Масштаб" поставим примерно на середину - 125% и "Инверсию" оставим. Нажимаем "Ок".
Теперь, чтобы скрыть чёрный фон у данного слоя, устанавливаем ему параметр наложения "Экран". Получаем вот такой результат.
Для того, чтобы туфельку сделать более прозрачной, берем слой номер два из папки, на который мы до этого накладывали фильтр хрома и перетаскиваем его в самый верх, т.е. над нашим слоем с туфелькой.
Накладываем его на этот слой с туфелькой, удерживая Alt наводим курсор между данными слоями до появления значка стрелочки и кликаем правой кнопкой мыши.
И устанавливаем данному слою параметр наложения "Экран".
Папку со старыми слоями можно просто удалить, можно оставить, в качестве резервной копии.
3. Настройка контраста и резкости кривыми
Ну и последним штрихом, можно наложить на данный слой кривые и отрегулировать внешний вид, а так же наложить цвет и сделать его немного синиватым, под цвет стекла. Или любым другим цветом, стекло же бывает разного цвета.
Ккликаем по значку "Корректирующий слой" и выбираем "Кривые", накладываем корректирующий слой с туфелькой и с помощью кривой, на глаз, настраиваем нужный нам результат.
Просто ставим две точки и манипулируем ими до получения нужного результата. Меня устраивает вот такой результат.
4. Настройка оттенка кривыми
Ну и цвет, если нужно можно наложить, так же корректирующим слоем. Создаём корректирующий слой "Цветовой тон/Насыщенность", накладываем его поверх кривых, ставим галочку "Тонирование" и подстраиваем нужный нам оттенок, насыщенность и яркость. Я сделаю туфельку немного синеватой.
Стоит понимать, что это будет именно имитация, потому как Фотошоп не может в полной мере (в автоматическом режиме) создать реалистичное преломление света, присущее данному материалу. Несмотря на это, мы можем при помощи стилей и фильтров добиться вполне интересных результатов.
Имитация стекла
Давайте же, наконец, откроем исходное изображение в редакторе и приступим к работе.
Матовое стекло
- Как всегда создадим копию фона, применив горячие клавиши CTRL+J. Затем возьмем инструмент «Прямоугольник».
Радиус выбираем такой, чтобы основные детали изображения остались видимыми, а мелкие сгладились.
Таким образом, мы получили матовое стекло.
Эффекты из Галереи фильтров
Посмотрим, что еще нам предлагает Фотошоп. В галерее фильтров, в разделе «Искажение» присутствует фильтр «Стекло».
Здесь можно выбрать из нескольких вариантов фактуры и настроить масштаб (размер), смягчение и уровень воздействия.
На выходе получим нечто подобное:
Эффект линзы
Рассмотрим еще один интересный прием, при помощи которого можно создать эффект линзы.
-
Заменим прямоугольник на эллипс. При создании фигуры зажимаем клавишу SHIFT для сохранения пропорций, применяем все стили (которые мы применяли к прямоугольнику) и переходим на верхний слой.
На этом урок по созданию эффекта стекла окончен. Мы изучили основные способы создания имитации материала. Если поиграть со стилями и вариантами размытия, то можно добиться вполне реалистичных результатов.
Отблагодарите автора, поделитесь статьей в социальных сетях.
Читайте также: