Я думал, что с примитивами в Блендере и экспериментами в визуализацией стекла покончено, но нет тут-то было. Тим Кук вернул моду на стекло, как раз спустя полгода как я решил, что уже хватит этих нагруженных красивых рендеров. Hate it or love it, мнения разделились. Даже я как сторонник минимализма но в то же время любитель разных оптических иллюзий и абстракций, по разному отношусь к конкретными примерам использования жидкого стекла от Apple. Кто-то вспоминает Windows Vista, но справедливости ради текущее воплощение подходит к вопросу гораздо более реалистично. И важно понимать главную особенность “стекла” в принципе: зависимость от композиции и освещения, применительно к интерфейсу — от элементов фона. Поэтому часто этот самый ликвид гласс выгляд совсем неликвидно.
Но со статикой все проще: можно выбрать нужный баланс отражений, теней, преломлений и композиции в целом. Чаще всего этот баланс не связан напрямую с физической точностью рендера, но это известный факт.
В конце года я решил посчитать счачки файлов со своего Figma community page, где я в виде общественных работ выкладывал бесплатные материалы. 82к скачек суммарно. Неплохо даже для бесплатных файлов. Я кстати давно планировал выкладывать платные полезные материалы, но Figma резко прекратило набор новых коллабораторов (видимо из-за хлама в коммюнити и своих новых секций).
Ну что ж, попробуем со стеклом. План изначально был сделать infinite набор в двух смыслах: 1) бесконечная кастомизация компонента + 2) постоянные обновления (без рендера примитивов у меня развивается ломка). Связка Blender и Figma наложила определенные ограничения, связанные с unmatted vs premultiplied alfa. Без скучных подробностей: пришлось пойти на минимальный компромисс ради громадной гибкости компонентов.
Главный принцип: универсальность. Объект смотрится хорошо на светлом, темном (белом/черном), цветном, сложном фоне без дополнительных ухищрений с blending modes. + сохранена прозрачность и полупрозрачные переходы.
Для удобство использования компонентов в Фигме была разработана структура: 3 основных раздела (самый обширный собственно Примитивы + Фоны/композиции + Иконки-шрифты). 15 базовых категорий для старта, по 10 вариаций объекта в каждом. 2 формы (сплошная и полая) и от 3 до бесконечности цветов. Базовый шейдер: прозрачное стекло с эффектом дисперсии, фелофф прозрачности, универсальность. Кастомный градиент использует маску из “самого себя” для сохранения прозрачных переходов. Все это собрано в компоненты с контролами для каждого параметра. Весьма удобно.
Сегодня, когда всякие там нано бананы генерируют фотореалистичные рендеры за секунды, пришлось сделать упор на консистентность форм и не слишком увлекаться с абстракциями. Хотя я проверял: воспроизвести в точности даже примитивную форму без артефактов задача для очень продвинутых вайб-дизайнеров. В общем усилиями CPU и GPU получилось ai-free материал с довольно неплохим качеством и консистентностью форм.
Презентация
Единственное, все затянулось с публикацией, поэтому я решил не ждать. Собрал дополнительно лендинг, используя доброту Figma Sites (пока продукт в бете, Фигма позволяет бесплатно разместить сайт даже на кастомном домене). Делать так делать, подумал я, и поменял нейминг с рабочего Liquid Glass на Infinite glass (с намеком на бесконечные обновления как способ творческой борьбы с моим OCD).
Охапка дров infiniteglass.pro готов. Сайты на фигме кстати очень плохо индексируются (либо не индексируются вообще), все деревянное, куча багов с автолейтаутами. Но как есть так есть. Выпустил все сразу после нового года, хотя это и самое тихое время.
Ожидаемо, единичные скачки (даже лайт бесплатной версии материалов). Подкрепил рилсом, накидал постов в социалки. В целом, это мой первый блин по платным материалам в Фигме. Поглядим…
Design — Nashekrashe