27 мая 2025 г.

Прогрессивное размытие и градиенты в Hana

Прокачайте дизайн эффектными размытиями и градиентами

Прогрессивное размытие стало популярным вместе со стеклянной эстетикой интерфейса iOS несколько лет назад, а недавно добралось и до инструментов UI-дизайна. Однако по большей части это оставалась сложная техника, которую трудно использовать в моушн-дизайне или в интерактивных средах реального времени.

Сегодня мы добавляем в Hana прогрессивное размытие в реальном времени. Впервые такой тип размытия доступен для работы в реальном времени — с интуитивными настройками и без каких-либо технических знаний, прямо на бесконечном холсте Hana.

Поиграйте со сценой ниже, чтобы увидеть, как это работает.

Наведите курсор или коснитесь, чтобы взаимодействовать (опыт создан в Hana)

Как добавить прогрессивное размытие в Hana

Выберите любой слой и добавьте Layer Blur или Background Blur. В обоих случаях можно выбрать, будет размытие равномерным (Uniform) или прогрессивным (Progressive).

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

Так работает прогрессивное размытие в Hana

Плавные градиенты в Hana

Теперь в Hana можно создавать градиенты. Доступны линейные, радиальные и полярные градиенты, а их положение настраивается прямо на холсте.

Мы также представляем Smooth Gradients — градиенты с интерполяцией Smooth Step, которая даёт более естественное смешивание цветов. Большинство дизайн-инструментов используют градиенты с линейной интерполяцией, из-за которой между цветовыми «точками» градиента появляются заметные переломы.

Несколько лет назад мы впервые реализовали плавные градиенты в 3D-редакторе Spline, а теперь приносим их в Hana.

Наведите курсор или коснитесь, чтобы взаимодействовать (опыт создан в Hana)

Импорт SVG и многое другое

За последние недели мы также выпустили ряд улучшений Hana, включая поддержку файлов SVG (теперь их можно просто перетащить), более высокую производительность и меньший размер рантайма.

Кроме того, мы добавили несколько улучшений для удобства: более понятное поведение палитры цветов, улучшенные инструменты выделения и множество мелких исправлений, которые делают работу более последовательной.