Естественные градиенты в Adobe Illustrator
Есть русскоязычные и зарубежные статьи о проблемах восприятия и технических аспектах компьютерной генерации цвета. Вкратце, для создания градиентов в графических редакторах используется линейная интерполяция цветов в текущей цветовой модели. Программа вычисляет промежуточные цвета между парами точек градиента по каждому каналу, как некие координаты точки на прямой линии от А до Б в пространстве.
К примеру модель RGB не точно отражает человеческое восприятие цвета и его физические параметры. При линейном методе в RGB-градиенте иногда появляются переходные серые оттенки и градиент нам кажется «грязным».
Особенно наглядно это происходит между взаимодополнительными или инвертированными цветами: красным и зелёным, синим и жёлтым, оранжевым и голубым… Пятидесятипроцентная смесь таких пар — как раз нейтральный серый, по определению. Смешивание цветов в пространстве RGB не позволяет учесть насыщенность, яркость или светлоту цвета. Ниже для сравнения — исправленные посередине цвета в этих градиентах.
Ситуация в софте Adobe
Adobe используют у себя такую же интерполяцию в градиентах, со всеми присущими ей проблемами. Но в новом Adobe Photoshop CC 2022 наконец-то появилось два улучшенных метода градиентной интерполяции: линейный (спорное название) и перцепционный, которые дают визуально плавные или естественные для человека цветные градиенты. Для совместимости остался и старый метод, который назвали «классический».
Проблема в том, что пользователям предыдущих версий Photoshop это недоступно, и другие редакторы, в том числе Adobe Illustrator, не получили такого обновления.
Ручное исправление градиентов в Illustrator
Если у вас намётанный глаз, вы можете вручную добавить стопы в «грязный» градиент и с ходу интуитивно подобрать промежуточный цвет. Но это не точно.
Для подбора больше подойдет модель HSB, где регулируется оттенок по цветовому кругу, его насыщенность и яркость, как в примере выше. Обратите внимание, что значения каналов RGB добавленного стопа были почти равны (126, 129, 129). Три равных или близких значения каналов RGB всегда дают оттенок серого.
Допустим, мы быстро исправили один градиент в макете, но легко ли будет таким способом править много градиентов? Посмотрим, как ещё можно исправить градиенты в Иллюстраторе.
Онлайн-инструменты
Может кто-то подберёт оптимальные переходные цвета за нас? Проблема цветов актуальна не только для дизайнеров, но веб-разработчиков. Поэтому, например, появились генераторы аккуратных градиентов в CSS:
- Lch and Lab colour and gradient picker (David Johnstone)
- Gradient Generator (Learn Ui Design)
- Gradient Generator (Josh Comeau)
- Polychroma (Jeff @stormwarning)
Мы можем открыть один из сайтов и там вбить значения крайних цветов градиента, чтобы получить промежуточные. Естественные для восприятия человеком градиенты генераторы получают, делая интерполяцию переходов через другие цветовые пространства. У каждого свои особенности, но об этом позже.
Далее придётся сгенерированные значения вручную копировать в Иллюстратор, что общее время нам не сэкономит, хотя и не придётся самим подбирать цвета. Лишь генератор от Learn Ui Design может экспортировать градиент в файл SVG. Тогда его можно открыть в Иллюстраторе и пипеткой перенести на объект в макете.
Ещё исправить градиент можно в Фигме с помощью плагинов:
После обработки скопировать объект с градиентом, как SVG код, для вставки в Иллюстратор. Плагины для Фигмы работают с одним градиентом за раз.
Автоматизация в Adobe Illustrator
В августе 2021 я задумался об автоматическом «сглаживании» градиентов в Иллюстраторе и начал писать скрипт GradientBlender. В октябре Adobe презентовали подобное, но только в новом Фотошопе, поэтому я доделал свой скрипт. Общая суть — исправление цветовых переходов множества градиентов в Illustrator, не привязываясь к его версии, чтобы они были приятны человеческому глазу.
Скрипт работает в Illustrator в версиях CC 2014–2024 на Windows и Mac OS. В старом CS6 скрипт сработает с ограничением: без предпросмотра изменений при переключении опций в окне.
Опции
- Precision — количество промежуточных цветов, которые скрипт добавляет равномерно между крайними стопами. Чем больше, тем плавнее переход в градиенте, но может быть достаточно 2–3.
- Remove intermediate stops — удалить промежуточные цвета между крайними левым и правым и вставить новые. При отключенной опции скрипт добавит новые цвета между всеми парами текущих.
- Color space—цветовые пространства, в которых будет пересчитан градиент для поиска промежуточных цветов. В CMYK документе плавные градиенты получить сложнее.
- Hue interpolation method — метод интерполяции определяет, как найти среднюю точку между двумя значениями оттенка на основе цветового круга.
- Appearance attribute — поиск градиентов в заливках (Fill) и/или обводках (Stroke) выбранных объектов.
Color space
- OKLABМ— модификация пространства Lab для равномерного восприятия цвета. Одно из улучшений — чистый переход синего цвета там, где Lab выдаёт пурпурный оттенок. Именно Oklab Adobe использовали в Photoshop CC 2022 для перцепционного метода в градиентах. Автор Björn Ottosson.
- OKLCH — это вариант цветового пространства Oklab, дополненный информацией о цветности и оттенке. Яркость сохраняется при смене оттенка.
- LCH — вычисляет промежуточный цвет на основе оттенка, цветности и яркости. Так как это радиальная модель, то иногда при переходе между оттенками в градиенте появляется новый оттенок между стопами — потому что переход идёт по цветовому кругу. Делает более насыщенные градиенты, но яркость неоднородная в отличие от Oklch.
- HSL — определяет оттенок, насыщенность и светлоту. Иногда градиент выходит сочнее, чем с LCH, но в LCH лучше связь между цветностью и яркостью.
Hue interpolation method
Интерполяция оттенка с методами расчёта описана в спецификации CSS Color 4 и на сайте MDN Web Docs.
- Shorter — углы между начальным и конечным оттенком интерполируются по короткой дуге цветового круга.
- Longer — по длинной дуге из двух между двумя оттенками.
- Decreasing — против часовой стрелки. Углы интерполируются так, чтобы при переходе от первого цвета ко второму угол всегда уменьшался. Результат может выглядеть как Shorter или Longer.
- Increasing — по часовой стрелке. При переходе от первого цвета ко второму угол всегда увеличивается. Результат может выглядеть как Shorter или Longer.
В некоторых градиентах результат методов Shorter и Decreasing, Longer и Increasing похож, но расчёты разные. Поэтому в других сочетаниях цветов вы увидите заметную разницу.
Стоимость скрипта на Buymeacoffee 7$ или пишите мне в Телеграм или на почту.
Коллекция моих скриптов для Adobe Illustrator на ais.sergosokin.ru
