Как сделать стекло морфизм в фотошопе
Относительно свежий тренд в дизайне интерфейсов—глассморфизм, о котором мы писали в статье о визуальных трендах 2021 года. Сегодня разберем его подробно.
Особенности глассморфизма:
Эффект прозрачного матового стекла
Вариации размытия и непрозрачности, создающие многослойный эффект
Тонкая светлая граница по краям в 1-2 px, имитирующая края стекла
Яркий фон или яркие элементы фона, подчеркивающие эффект размытия
Как и с любым другим трендом, важно не злоупотреблять глассморфизмом, используйте его аккуратно, чтобы он хорошо вписывался визуально. Избегайте переизбытка и следите, чтобы глассморфизм не вызывал затруднение и недопонимание у пользователя. При умеренном использовании этот эффект становится ярким акцентом, притягивающим внимание.
Не применяйте эффект к кнопкам и переключателям, их предпочтительно делать контрастными.
Используйте глассморфизм, например, как фон карточек или уведомлений. При этом важно убедиться, что контент в карточке хорошо читается на таком фоне.
Плашки, имитирующие стекло
Чтобы добиться реалистичности, обратите внимание, как это работает в реальном мире
Чем ближе плашка в стиле глассморфизма к фону, тем меньше размытие фона.
Удаленность стекла от фона влияет не только на силу размытия, но и на прозрачность. Чем ближе плашка к фону, тем больше цвета она пропускает и плашка достаточно прозрачна. Если же плашка далеко от фона, прозрачность уменьшается.
Для максимальной реалистичности можно добавить эффект шума
Все, как с обычным матовым стеклом.
Выбор фона играет важную роль в создании глассморфизма. Фон не может быть слишком простым, не контрастным или со множеством мелких деталей.
Для этой задачи выбирайте яркий контрастный фон без мелких деталей, на котором стеклянные плашки будут хорошо выделяться.
Как сделать дизайнеру
С точки зрения дизайна сделать эффект глассморфизма достаточно просто.
Вот два видео урока для Фигмы и Фотошопа
Как сделать разработчику
Раньше единственным способом реализации глассморфизма было размещение размытой копии фона между нужным блоком и оригинальным фоном. Такой способ нес за собой много проблем с позиционированием размытого фона при адаптивной верстке или при динамичном положении элемента.
С появлением свойства backdrop-filter реализация стала намного проще.
Backdrop-filter (blur) позволяет размывать только изображение, находящиеся ниже нужного блока. Если фон блока будет непрозрачен, эффект не будет заметен, поэтому чаще всего backdrop-filter используется в совокупности с полупрозрачным фоном и тенями.
Но нельзя полностью отказаться от старой реализации, новое свойство поддерживается еще не всеми браузерами. Пользователи FireFox, IE и некоторых мобильных браузеров не смогут увидеть эффекта размытости.
Выводы
Глассморфизм можно узнать по эффекту прозрачного матового стекла с тонкой границей по краям. Он максимально похож на настоящее матовое стекло
Используйте этот эффект аккуратно, он должен хорошо вписываться
Чтобы эффект выглядел реалистично, создавайте эффект глассморфизма с учетом того, как это работает в реальной жизни
Выбирайте яркий контрастный фон, избегайте простого не контрастного фона или фона с мелкими деталями
Дизайнеру создать эффект глассморфизма достаточно просто с помощью любого привычного инструмента
Разработчик с появлением нового свойства backdrop-filter может реализовать глассморфизм в пару кликов. Но не все браузеры поддерживают этот эффект.
Глассморфизм (стекломорфизм) — тренд в дизайне 2021 года. Особенности стекломорфизма и его использование в интерфейсах
Дизайнеры экспериментируют с дизайнами, чтобы привлечь внимание пользователя к веб-странице. Отсюда и получаются тренды дизайна — работающие решения. Одно из таких — тренд дизайна 2021 года — стекломорфизм. Что такое стекломорфизм? Как использовать стиль дизайна в своих работах? Как создать стекломорфизм? Показываем на конкретных примерах преимущества этого стиля, неудачные варианты использования и рассказываем, как создать дизайн в стиле стекломорфизма.
✅ Продвигай курсы школы Кодебай и зарабатывай от 18% с каждой продажи
✔ Веб-мастерам, у которых есть посещаемый онлайн-ресурс — блог, каталог, сервис, портал;
✔ Блогерам, у которых есть свой YouTube, Instagram, Twitter, сообщество Вконтакте, телеграм-канал;
✔ Всем желающим, которые готовы зарабатывать и расти вместе с нами.
Делись реферальной ссылкой и получай высокий доход с продажи курсов. Регистрируйся codeby.school/aff
Приложение Smart Calendar от Ghani Pradita
Glassmorphism или, как его еще называют, стекломорфизм стал новым трендом в UI дизайне 2021 года. Придя на смену неоморфизму, этот стиль привлек внимание пользователей простотой, красочностью и удобством.
Как использовать глассморфизм в дизайне и что это вообще за стиль? Давайте разбираться.
Откуда пришел глассморфизм?
Одно из первых использований стекломорфизма (его особенностей), а именно матового фона и светлых, почти прозрачных обрамлений размытых объектов были представлены пользователям еще в 2007-ом году с выходом Windows Vista. И несмотря на то, что стекломорфизм 2007-го года сильно отличается от современного нам, пользователям он пришелся по вкусу. Широкую известность этот стиль получил благодаря компании Apple, которая уже на протяжении более 8-ми лет использует глассморфизм в своих интерфейсах.
Для сравнения показываем интерфейсы Windows Vista и MacOS 11 Big Sur:
Главные особенности стекломорфизма
“Glassmorphism” в дословном переводе означает “морфизм стекла”. Из названия следует, что элементы стиля ассоциируются со стеклом. По сути, стекломорфизм это стиль в веб-дизайне, подразумевающий использование непрозрачных стеклянных модулей с размытым фоном.
Отличительные признаки стекломорфизма:
Покажем все особенности на конкретном примере:
Rudi Hartono, работа с сайта dribbble.com
Благодаря многоуровневости дизайна и контрасту между блоками, пользователю проще воспринимать и разграничивать иерархичность интерфейса. Грамотное использование стеклянных элементов помогает добиться легкости изображения на экране. Главное не переусердствовать с элементами.
Когда уместно применять стекломорфизм?
В веб-дизайне стекломорфизм используется для:
Степень размытия и глубина используемых цветов регулируются в зависимости от конкретной задачи. В этом заключается гибкость данного стиля.
Choirul Syafril, работа с сайта dribbble.com
Дизайн мобильного приложения на примере выше представляет из себя многоуровневую структуру, состоящую из иллюстраций и элементов интерфейса, которые контрастируют друг с другом. Дизайнерское решение выглядит современно, а информация легко воспринимается с экрана телефона.
А в этом примере лендинга использованы неяркие, но контрастирующие со стеклянными элементами, цвета:
Виолетта Ясинская, работа с сайта behance.net
Универсальность стекломорфизма
Несмотря на многогранность использования стиля, нельзя забывать о том, что стекломорфизм ситуативен, то есть подходит не для всех задач.
Стеклянные элементы используйте там, где требуются воздушность и простота восприятия интерфейса. Однако применение модулей в стиле стекломорфизма неуместно в дизайне, требующем строгости и делового стиля. К примеру, Вы можете представить себе сайт Госуслуг с элементами стекломорфизма? Ответ очевидный: нет. Пользователь не воспримет стиль, ведь стеклянные блоки не похожи на деловой стиль. Решение об их использовании стоит принять после анализа целевой аудитории и сферы проекта.
Как создать эффект стекла?
Для создания стеклянного дизайна используют основные инструменты дизайнера Sketch, Adobe Photoshop или Figma. Принцип работы во всех программах одинаковый.
Наиболее прост в исполнении способ создания дизайна в Figma. Рассмотрим его.
От фона зависит удобство использования интерфейса, поэтому к выбору нужно отнестись с умом. Фон в стекломорфизме не должен быть примитивным. Как мы уже выяснили, прозрачные стеклянные элементы отлично контрастируют с красочными тонами заднего плана. Однако не стоит делать выбор в пользу однотонного яркого фона, либо перегружать его деталями, так как в таком случае дизайн будет нечитабельным.
Элементы
Создание элементов в Figma не должно вызывать сложностей. Однако стоить помнить о том, что стекломорфизм очень легкий стиль, требующий скругленности углов и обтекаемости форм для создания эффекта левитирующих в пространстве объектов. Для него отлично подойдут прямоугольники со скругленными краями и эллипсы.
Прозрачность
Эффект прозрачности прост в исполнении, если повторить следующие настройки при создании элемента:
ВАЖНО! В настройках меняем показатель Opacity Fill, а не Opacity Layer. Если прозрачность фона будет меньше прозрачности заливки элемента, получить стеклянный эффект не получится: размытие фона не будет работать.
Также стоить помнить о перспективе и световой композиции дизайна. Блоки, находящиеся на переднем плане, должны быть более четкими и яркими, чем на среднем и заднем планах.
Контур
После создания прозрачного элемента переходим к дизайну контура. Создайте светлую внутреннюю границу элемента: толщина 1-4 px и произвольная прозрачность. Имитация отблеска края стекла у контура элемента поможет выделить его на фоне.
Тень
Заключительный этап создания дизайна в стиле стекломорфизма — добавление теней. Экспериментируйте! Нельзя дать точные настройки для создания универсальной тени. Каждый дизайн уникален, то есть интенсивность и размытие тени подбираются индивидуально.
Установите настройки, указанные ниже, а далее подберите подходящие значения самостоятельно:
Добавление теней в дизайне поможет создать многоуровневый эффект с плавающими, будто парящими в пространстве, элементами.
Когда стекломорфизм выглядит неудачным решением
Часто дизайнеры, воодушевившись новым трендом, начинают использовать его в работе бездумно, нагромождая элементы один на другой. Так делать не стоит.
Дизайн в стиле стекломорфизма легко испортить, если не знать меру. Главное правило: помнить о структуре и логичности дизайна. Не следует использовать стекломорфизм для создания кликабельных элементов, так как им необходимо контрастировать с полупрозрачным фоном.
На картинке ниже представлены два дизайна в стиле стекломорфизма. Только в первом случае (слева) мы видим правильный, логичный дизайн с яркими акцентами, а во втором случае (справа) перегруженный прозрачными элементами интерфейс, который будет доставлять дискомфорт при его использовании.
Выводы
Стекломорфизм нравится пользователям и дизайнерам. Легкость и простота восприятия отличают его на фоне других стилей. Однако помните, что использовать этот стиль следует с осторожностью. Важно соблюдать иерархичность интерфейса и не перегружать его лишними элементами.
Соблюдайте контраст между элементами, не забывайте о тенях и контуре для лучшего восприятия. Экспериментируйте и создавайте уникальные дизайны.
Добавить комментарий Отменить ответ
Для отправки комментария вам необходимо авторизоваться.
Гласс морфизм или эффект матового стекла в Фотошопе
Всем привет, а вот и подоспел урок)
Не пугайтесь его хронометражу, просто я сделал 3 разных дизайна так сказать для закрепления в памяти) Рад вашим работам, делитесь показывайте как вы адаптировали это под свои идеи)
Комментарии 9
Спасибо, отличный урок!
По уроку канала YouTube Doctrina Materia
Taira Imamova, красота, всем бы нам такие регистрационные панельки))
По уроку канала YouTube Doctrina Materia
Taira Imamova, тоже интересное применение)
Хотите взять максимум?
Активируй Premium и получи 9 преимуществ
Хотите узнавать
обо всех событиях?
Выберите, куда хотите получать уведомления
Получи скидку 15%
на планшет HUION
Более 50 моделей для самого требовательного пользователя
© Creativo, 2021 г.
Все права защищены
Разделы
Информация
Статистика
Переход по внешней ссылке
Creativo не несёт ответственности за безопасность за пределами нашего сообщества.
Будьте осторожны и внимательны.
1″ > Вы можете выбрать до <
Создать опрос
Название опроса
Ответ <<(index + 1)>> Удалить ответ
Сортировка:
Опрос
По вашему запросу ничего не найдено
Попробуйте изменить критерий поиска, или сбросить фильтры.
Морфизмы в дизайне: какие бывают, зачем нужны и как их создавать
«Скево», «нео», «гласс» и «сквиркл» — и это не покемоны!
Полина Суворова для Skillbox Media
Каждое направление в дизайне интерфейсов со словом «морфизм» так или иначе называли трендовым, но не все из них можно полноценно использовать в своём проекте. Рассказываем, как различные стили помогут вам спроектировать приложение или сайт и как это реализовать в Figma.
Скевоморфизм
Скевоморфизм — это не просто обычная стилизация интерфейса под реальные аналоги с помощью текстур натуральных материалов, объёмных фигур, теней. Если смотреть шире, скевоморфизм — это объяснение новой и неизвестной функции с помощью понятной всем аналогии или метафоры.
На каждом компьютере есть корзина, и все привыкли воспринимать её как мусорное ведро — место для ненужных файлов. Технически эта функция работает сложнее, но дизайнеры не отказываются от метафоры корзины для мусора, чтобы никого не путать.
Из современных систем скевоморфизм никуда не исчез. Приложения на iPhone в старых версиях отличаются только графически, интерфейс в них практически не изменился:
Скевоморфизм бессмысленен для конструкции или технологии. Это не технический, а дизайнерский приём. При этом скевоморфизм категорически раздражает дизайнеров-идеалистов тем, что как бы тормозит прогресс. Но на деле он помогает неподготовленным пользователям привыкнуть к новому продукту.
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Плоский дизайн
Считается преемником графического скевоморфизма. Он стал популярным после выхода iOS 7, и его до сих пор используют все: от дизайн-студий до корпораций Apple, Google и Microsoft. Главная идея плоского дизайна — интерфейс не должен отвлекать пользователя от его задач лишними текстурами и объёмом.
Самый яркий пример плоской дизайн-системы — Material Design от Google. В его основе лежат физические свойства бумаги — она может быть цветной, отбрасывать тень, на неё определённым образом кладутся чернила. Несмотря на появившиеся объём и тени, смысл плоского дизайна не исказился:
То же самое с дизайн-системами Microsoft, Apple и других компаний. В их основе лежат разные принципы использования цветов, контраста, анимаций и объёма, но суть от этого не меняется — красивые текстурки не отвлекают пользователя.
Плоский дизайн сделать несложно, но если вы хотите, чтобы ваше приложение везде смотрелось хорошо, используйте гайдлайны систем, в которых оно будет работать:
Не относитесь к гайдлайнам как к истине в последней инстанции — это только рекомендации и их можно игнорировать, если они вас не устраивают. Правда, тогда приложение может выглядеть нестандартно для экосистемы, и это снизит доверие пользователей.
Неоморфизм
Неоморфизм — стиль, в котором каждый элемент «выдавлен» из фона, как на устройствах с резиновыми кнопками. Он стал популярным на Dribbble, и в начале 2020 года его много обсуждали. Но повсеместно неоморфизм никто не использует из-за проблемы с контрастом между элементами интерфейса.
В 2020 году дизайнер Accedia Иван Савков рассказал об экспериментах с неоморфизмом на примере мобильного приложения для регулирования температуры в доме и панели администратора онлайн-магазина.
Неоморфизм требует много пустого пространства, в котором все кнопки остаются различимыми и понятными. Поэтому он неплохо показал себя в мобильном приложении с небольшим количеством функций:
На панели администратора пользователю в любой момент может понадобиться сменить график, посмотреть определённые метрики и выделить важное. Для этого нужно много кнопок, поэтому неоморфизм здесь сработал плохо — разработчикам пришлось убирать функции, чтобы все кнопки влезли в интерфейс:
Также оказалось, что на создание и разработку интерфейса в стиле неоморфизма уходит больше времени, так как каждый элемент нужно делать вручную. В итоге вся дизайнерская работа становится дороже.
Иван Савков, дизайнер Accedia
У неоморфизма определённо есть потенциал. Но пока я рекомендую держаться от него подальше, если вы занимаетесь коммерческим проектом.
Дизайнер интерфейсов Михал Малевич советует не использовать неоморфизм в качестве основного стиля для интерфейсов — пользователи просто не поймут, где находятся кнопки. Проблемы возникнут не только у людей с плохим зрением, но и у владельцев устройств с плохими экранами.
Михал Малевич, дизайнер интерфейсов
Кнопки, наверное, можно назвать худшим применением неоморфизма, особенно в нажатом состоянии. Для многих людей не будет абсолютно никакой разницы между кнопками и простым текстом.
Михал предлагает использовать неоморфизм как элемент украшения на плашках или фоне:
Михал Малевич, дизайнер интерфейсов
Карточки и слайдеры — лучшие примеры использования неоморфизма. Но структуру карточки важно выполнить правильно: иерархия изображений, иконок и текста должна быть чёткой. Если структура плашки работает и без неоморфического фона — это хорошо!
Как сделать плашку в стиле неоморфизма с помощью плагина в Figma
В окне настроек можно указать высоту кнопки, интенсивность тени, указать форму кнопки и положение источника света:
Глассморфизм
Глассморфизм — интерфейс, элементы которого напоминают прозрачное стекло. В чистом виде глассморфизм, как и неоморфизм, использовать очень сложно из-за низкой контрастности между элементами интерфейса. Людям с плохим зрением или плохим экраном на устройстве будет сложно читать текст и различать стеклянные кнопки на полупрозрачном фоне:
Но, несмотря на эти недостатки, элементы глассморфизма используются в больших проектах. В macOS глассморфичной можно назвать панель уведомлений:
В недавно анонсированной Windows 11 полупрозрачными сделали меню «Пуск» и панель задач:
Также этот стиль использовался в Windows 7:
Михал Малевич, дизайнер интерфейсов
Глассморфизм уместен только в том случае, если эффект прозрачности носит чисто декоративный характер. Следует избегать его при создании кнопок или переключателей, так как эти объекты всегда должны быть более контрастными.
Как сделать плашку в стиле глассморфизма в Figma
Чтобы добиться эффекта стекла, сначала нужно подобрать фоновое изображение — оно не должно быть слишком простым или сложным, чтобы эффект был заметен. Для тренировки рекомендуем взять обои из macOS или Windows 11.
Теперь создайте плашку:
1. Загрузите картинку на макет и поверх неё добавьте прямоугольный фрейм.
2. У фрейма на панели настроек в блоке Fill нажмите на образец цвета. В появившемся меню сделайте его белым, а в верхней части поменяйте Solid на Radial.
3. На фигуре появится линия градиента — растяните её по диагонали от одного угла фигуры до другого. Непрозрачность заливки — 30%.
4. На панели настроек нажмите на плюсик напротив слова Effects. Появится эффект Drop shadow — нажмите на него и поменяйте на Background blur.
5. Нажмите на иконку напротив Background blur и укажите значение в 40 пикселей.
6. На панели настроек нажмите на плюсик напротив слова Stroke. Нажмите на появившийся образец цвета и сделайте его белым. У получившейся обводки укажите непрозрачность в 18%.
Готово — плашку можно использовать в вашем макете:
Настройки Background blur и непрозрачности фона можно менять на свой вкус. Чтобы плашка лучше гармонировала с фоном, укажите для неё цвет, похожий на фоновый:
Не забывайте о принципе наслаивания — чем ближе плашка к пользователю, тем меньше непрозрачность. Если это игнорировать, плашки будут похожи на кашу с непонятной структурой:
Сквирклморфизм
Сквиркл — суперэллипс, который называют «круглым квадратом» или «четырёхугольным колесом». Он отличается от привычных всем прямоугольников со скошенными углами. Сравните:
Основное отличие — скашиваются у него не только углы, но и стороны:
Сквирклы уже используют в больших проектах. Например, в иконках на iOS и аватарках пользователей в Clubhouse:
Продуктов, где сквирклы бы составляли основную часть интерфейса, ещё нет. Однако у сквирклморфизма нет проблем с недостатком контраста, как у нео- и глассморфизма, поэтому его можно использовать как угодно. Если решите делать все кнопки из сквирклов, будьте осторожны — непривычные формы кнопок и полей могут отпугнуть пользователей:
Сделать сквиркл в Figma очень просто — достаточно просто сгладить углы в настройках скругления:
Выводы
Скевоморфизм. Лучше всего подходит для объяснения нового через старое.
Плоский дизайн. Стандартное визуальное решение любой системы. Используется везде, и, скорее всего, дизайнеры не откажутся от него.
Неоморфизм и глассморфизм. Отлично работают как элементы декора. Целые интерфейсы в этих стилях сделать не получится из-за проблем с контрастом элементов друг с другом.
Сквирклморфизм. Можно использовать как стили кнопок и иконок, но осторожно, так как сквиркл — непривычная форма для обычных пользователей.