Неужели невозможно иметь градиент без полос?

Шум и дизеринг обычно дают неплохие результаты. Есть несколько вещей, которые могут сделать «полосатость» более очевидной:

• «стартовый» и «конечный» цвета
• размер градиента (полосатость становится более заметной, когда точки «начало» и «конец» удаляются друг от друга — градиент необходимо «проецировать» на большее количество образцов с постоянным числом доступных значений яркости),
• неправильно откалиброван/некачественный монитор (вы пробовали просматривать свои градиенты на разных мониторах?),
• уменьшенное цветовое разрешение «на канал» в системных настройках (в настоящее время кажется маловероятным, поскольку большинство систем используют настройки 32 бит/с, но все же возможно),
• «дикие» настройки гаммы видеокарты (например, в «панели управления видеокартой» или в загрузчике гаммы, таком как Adobe Gamma Loader),
• слишком «агрессивный» профиль монитора (опять же тест просмотра на других мониторах должен дать некоторые подсказки по этому поводу),
• уменьшение разрядности изображения.

Также было бы полезно знать, какое у вас целевое устройство. Существует разница в том, насколько сильно вы можете «распространить» свой градиент, ориентируетесь ли вы на печать (какая печать также имеет значение, например: экраны, такие как AM, псевдостохастический, стохастический), компьютерные мониторы или дисплеи мобильных устройств. Это также имеет значение, используете ли вы растровую графику или векторную графику.

Итог: это довольно сложная тема :).

Да, можно создавать высококачественные градиенты. Хотя есть много факторов, которые нужно учитывать.

• Photoshop не делает и не может сглаживать альфа-канал. Лучше использовать сплошные цвета, если это возможно. Также старайтесь избегать непрозрачности слоя. Создайте градиент, используя именно те цвета, которые вам нужны. Редактировать: Photoshop CC 2014.2 добавил сглаживание альфа-канала. :)

• Могут быть некоторые кумулятивные ошибки округления, если ваш редактор изображений использует глубину цвета 8 бит на канал. Наилучший способ создания градиента, созданного из нескольких слоев (с режимами наложения и непрозрачностью в игре), — это визуализация с более высокой битовой глубиной, а затем, если возможно, сглаживание до 8 бит на канал. Фотошоп может это сделать. Если вы хотите, чтобы сплошной градиент создавался из одного слоя, 8 бит на канал будет в порядке (16 бит удобен только при смешивании слоев).

• Дизеринг действительно очень важен. (См. предыдущий пункт.)

• Не используйте Иллюстратор. Это 8 бит на канал и без дизеринга.

• Масштабирование изображения испортит хорошую работу дизеринга, поэтому вам нужно с самого начала создать изображение нужного размера.

• Большинство ноутбуков имеют 6-битные дисплеи на канал с некоторыми анимированными приемами сглаживания, чтобы все выглядело лучше. Очевидно, вы боретесь с дисплеем, и плавные результаты могут быть невозможны из-за дисплея. Заметным исключением является новый MacBook Pro с дисплеем Retina — у него 24-битный дисплей IPS. Редактировать: дисплеи ноутбуков немного улучшились с момента публикации этого поста!

• Как предположил thebodzio, другая обработка на уровне ОС также может все испортить.

• Если вы используете 16-битный режим в Photoshop, протестируйте его против 8-битного режима. Есть определенные обстоятельства, когда 8-битный режим выглядит лучше, и другие обстоятельства, когда 16-битный режим лучше. Основное эмпирическое правило: если у вас есть один градиент, используйте 8 бит с дизерингом. Если у вас есть несколько слоев и градиентов, использующих непрозрачность, используйте 16-битный режим.

Глядя на ваше изображение, кажется, что происходит какое-то другое разрушительное преобразование. Вы используете «Сохранить для Интернета»? У вас включено преобразование в sRGB? Если это так, выключите его (это самый простой способ испортить качество ваших изображений и одновременно внести разрушительные изменения цвета).

Марк Эдвардс пишет , что «Photoshop не делает и не может сглаживать альфа-канал». Если это так, вы можете подделать его, создав плавный градиент от белого к черному, а затем сделав белый прозрачным. Увы, я давно не пользовался Фотошопом, но общая идея будет примерно такой:

1. Создайте 16-битный градиент от черного к белому.
2. Разбавьте его до 8-битного.
3. Создайте сплошной черный слой и добавьте к нему маску слоя.
4. Скопируйте размытый градиент в маску слоя (и инвертируйте его, если необходимо).
5. Примените маску слоя, чтобы получить плавный градиент от черного к прозрачному.

(Да, я знаю, что это скорее комментарий, чем ответ, но он слишком длинный, чтобы поместиться в поле для комментариев.)

Я обнаружил аналогичную проблему в Illustrator (у которого даже нет опции «дизеринга» для градиентов). Это звучит немного безумно, но я обхожу это, применяя «стеклянный» фильтр, который может аппроксимировать дизеринг с правильными параметрами.

Я использую:

• Искажение: 2 (это зависит от размера ваших полос).
• Гладкость: 1
• Текстура: Frosted (самая шумная встроенная текстура)
• Масштабирование: 50%

В Illustrator это приводит к появлению белых пятен по краям объекта, которые можно исправить с помощью обтравочной маски.

Полученные результаты? "Размытый" один справа. Это добавляет немного шумовой текстуры, но я думаю, что в большинстве случаев это лучше, чем группы.

Основное различие в создании градиентов заключается в использовании слоя градиента , который имеет встроенную опцию дизеринга (Слой> Новый слой заливки> Градиент) и остается регулируемым. С этого момента вы можете преобразовать в смарт-слой и добавить любые эффекты, которые вам нужны для дальнейшего улучшения, но это дает вам гораздо лучшую отправную точку.

Это три образца, демонстрирующие дизеринг. Набор ниже — это вышеприведенный набор с уровнями, отрегулированными для выделения эффектов дизеринга.

Слева направо первый из них имеет наиболее заметные полосы; дизеринга нет. Второй — тот же градиент с дизерингом; намного лучше. А третий, тот, что справа, имеет дизеринг, и я дополнительно добавил слой шума, фактически усилив дизеринг. См. комментарий, почему вы добавили бы дополнительный шум. См. «дополнительные примечания» о том, как сглаживать прозрачность/альфа-канал.

Комментарий

Я делал большие рендеры градиентов с минимальным изменением цвета, и полосы были очень заметны без сглаживания, как в первом примере. Потом я узнал о дизеринге, и он многое улучшил, это второй пример. Но на большом рендеринге (здесь он менее заметен) полосы все же были. Мне нужен был более агрессивный дизеринг. Поэтому я скопировал* градиентный слой, растрировал его и добавил небольшое количество (0,1%) однородного монохромного шума. Это значительно улучшило крупномасштабное изображение. Это третий образец. Улучшение от дополнительного шума (который, по сути, и является дизерингом) менее заметно в мелком масштабе, как в этом примере, но оно было очень важно при большом рендеринге, подобном тому, над которым я работал.

* Я создал отдельный слой для шума, потому что таким образом я мог контролировать шум с помощью непрозрачности нового слоя.

Дополнительные примечания

• Я только обсудил фактическое изображение. Аппаратная сторона и драйверы также могут иметь значение; другое устройство может отображать вещи по-другому. Другие ответы покрыли это довольно хорошо.

• Photoshop не сглаживает альфа-канал. Если вам нужно сглаживание прозрачности, вы должны сглаживать альфа-канал вручную. Я бы использовал слой-маску для создания прозрачности, так что это был бы вопрос сглаживания этого слоя-маски. И при работе с масками слоя не забудьте ALT+ left clickна маске слоя, чтобы отобразить ее.

Очень полезная статья по теме: http://nomorebanding.com/cache

Вот суть:

Идея состоит в том, чтобы создать градиент в 16-битном режиме, а затем преобразовать его в 8-битный режим, следуя процедуре ручного дизеринга (используя пользовательский слой дизеринга). Вот процедура:

1. Отключите сглаживание по умолчанию (Правка > Настройки цвета, снимите флажок Использовать сглаживание), потому что мы собираемся создать собственный «движок» сглаживания.

2. Создайте новый слой (должен быть самым верхним).

3. Залейте его сплошным 50% серым цветом.

4.Фильтр > Шум > Добавить шум. (Количество 25%, Распределение-Равномерное, Монохромное-проверено)

5. Нажмите Ctrl+F, чтобы повторить фильтр шума на том же слое.

6. Установите слой на Линейный свет.

7. В палитре слоев установите непрозрачность на 1%, непрозрачность заливки на 19%.

Важно: вам нужно сгладить изображение (включая шумовой слой) в 16-битном режиме и только потом конвертировать в 8-битный режим для экспорта. Если вы сделаете это наоборот, вы сначала потеряете всю 16-битную информацию, а затем шумовой слой ничего не сделает с 8-битным. Кроме того, обратите внимание на параметр «Использовать дизеринг» в Photoshop. Вы можете использовать либо слой, либо собственный метод дизеринга, но не используйте оба во время преобразования, это приводит к удвоению необходимого шума.