Чи справді неможливо мати градієнт без смуг?


37

Я намагаюся створити градієнт без смуг. Я переглянув усі відео на YT і спробував: "Розмивання всіх видів", "Шум", "Шум", "Бітова глибина", "Кисть" та "градієнт" в Illustrator.

Все виходить з ладу, і я завжди можу побачити смугу.

Колір фону, який я використовую за зображенням: 050b3c введіть тут опис зображення введіть тут опис зображення

Відповіді:


28

Шум і тріскання зазвичай дають досить хороші результати. Існує кілька речей, які можуть зробити «обв’язування» більш очевидним:

  • Кольори "старт" і "стоп"
  • розмір градієнта (смуга стає більш очевидною, коли точки "старт" і "стоп" стають далі один від одного; градієнт повинен бути "спроектований" на більше зразків з постійною кількістю доступних значень яскравості),
  • неправильно калібрований / неякісний монітор (ви намагалися переглянути свої градієнти на різних моніторах?),
  • зменшена роздільна здатність кольору "на канал" у налаштуваннях системи (на сьогоднішній день здається малоймовірною, оскільки більшість систем використовує налаштування 32 біт / с, але все ще є можливість),
  • Налаштування гамми «диких» відеокарт (наприклад, у «панелі керування відеокарткою» або гам-навантажувачі, як Adobe Gamma Loader),
  • занадто "агресивний" профіль монітора (знову тест перегляду інших моніторів повинен містити деякі підказки про це),
  • зменшена бітова глибина зображення.

Також було б корисно знати, що таке ваш цільовий пристрій. Існує різниця в тому, наскільки ви можете "поширити" свій градієнт, незалежно від того, чи орієнтуєтесь ви на друк (який вид друку також має значення, наприклад: екрани, такі як AM, псевдо-стохастичний, стохастичний) комп'ютерні монітори або мобільні пристрої. Це також має значення, чим раніше ви використовуєте растрову графіку або векторну графіку.

Підсумок: це досить складна тема :).


1
Ви на 100% маєте рацію, що це залежність від монітора. Прочитавши вашу відповідь, я вирішив перевірити синє зображення (див. Оновлений ОП) на своєму iPad3. Якість градієнта на iPad3 є бездоганною. Вся справа в тому, що я не можу контролювати монітори всіх користувачів Інтернету.
Зареєстрований користувач

1
Я на білому градієнті Я бачу смуги, але на синьому градієнті я не бачу смуг
Ryan

@Ryan Це не білий колір, він прозорий. Ви повинні взяти його і додати шар (колір: 050b3c) під PS. Потім почніть грати з непрозорістю нижнього шару і подивіться, як змінюється смуга градієнта.
Зареєстрований користувач

@RegisteredUser Мене мало хвилює, коли відповідь залишається такою ж, що залежить від якостей, зазначених вище, а також налаштувань монітора.
Райан

2
Вичерпна відповідь. Я думаю, що, можливо, варто вказати, звідки випливає проблема, і чому потрібні такі хитрощі, як забарвлення: 8-бітний колір просто не дає достатньо кроків для надійного створення ілюзії плавно мінливого градієнта.
e100

13

Так, можливо створити градієнти високої якості. Однак є багато факторів, які слід враховувати.

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

  • Якщо ваш редактор зображень використовує 8 біт на глибину кольору каналу, можуть бути деякі кумулятивні помилки округлення. Найкращий спосіб створення градієнта, створеного з декількох шарів (з режимами змішування та непрозорістю під час відтворення) - це візуалізація на більшій глибині бітів, а потім, якщо можливо, зменшується до 8 біт на канал. Photoshop може це зробити. Якщо ви хочете, щоб суцільний градієнт був створений з одного шару, 8 біт на канал нормально (16 біт зручний лише тоді, коли відбувається змішування шару).

  • Дирінг - це дійсно, дуже важливо. (Див. Попередній пункт.)

  • Не використовуйте Illustrator. Це 8 біт на канал і не зникає.

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

  • Більшість ноутбуків мають 6 бітових дисплеїв на кожному каналі з деякими анімованими хитрощами, щоб покращити ситуацію. Очевидно, що ви боритеся з дисплеєм, і плавні результати можуть бути неможливими через екран. Новий MacBook Pro з дисплеєм Retina є помітним винятком - він має 24-бітний IPS-дисплей. Редагувати: Дисплеї ноутбуків трохи покращилися після цієї публікації!

  • Як запропонував thebodzio, інші операції на рівні ОС також можуть заплутати речі.

  • Якщо ви використовуєте 16-бітний режим у Photoshop, протестуйте його проти 8-бітного режиму. Існують певні обставини, коли 8-бітний режим виглядає краще та інші обставини, коли 16-бітний режим кращий. Основне правило: якщо у вас є один градієнт, використовуйте 8 біт з відмиранням. Якщо у вас є кілька шарів і градієнти з використанням непрозорості, використовуйте 16-бітний режим.


Дивлячись на ваше зображення, здається, що відбувається якесь інше руйнівне перетворення. Чи використовуєте Ви Зберегти для Інтернету? У вас увімкнено перетворення в sRGB? Якщо так, вимкніть це (це найпростіший спосіб погіршити якість ваших зображень і одночасно зробити руйнівні зміни кольору).


+1 для вашої дивовижної відповіді, але я з того часу рухався. Перш за все, ваш варіант створення градієнта без альфа - це не дуже добре, оскільки потрібне мені зображення повинно бути прозорим, щоб я міг його використовувати на веб-сторінці, розміщеній на всій сторінці. Також, прочитавши прийняту відповідь, я вирішив скинути PS і створити градієнт програмно за допомогою радіального градієнта CSS ( colorzilla.com/gradient-editor ). На жаль, CSS зовсім не допоміг, і градієнт продовжує сильно обмежуватися.
Зареєстрований користувач

Насправді ви можете побудувати альфа-канал самостійно у Photoshop, так що ви можете мати зрізану альфа (вручну). CSS - це хороше рішення. Якщо ви користуєтесь ноутбуком, пам’ятайте, що на екрані ви можете базувати смуги, але інші можуть бачити плавний градієнт. Фактор також буде відображенням у браузері.
Марк Едвардс

5

Марк Едвардс пише, що "Photoshop не може і не може кидатися на альфа-канал". Якщо так, то, можливо, ви зможете підробити це, створивши розбитий градієнт від білого до чорного, а потім зробивши білий прозорим. На жаль, минув час, коли я використовував Photoshop, але загальна ідея була б приблизно такою:

  1. Створіть 16-бітний градієнт від чорного до білого.
  2. Зменшіть його до 8-бітного.
  3. Створіть міцний чорний шар і додайте до нього шару маски.
  4. Скопіюйте розбитий градієнт у маску шару (та, якщо потрібно, переверніть її).
  5. Нанесіть маску шару, щоб отримати градієнт з красивим кольором від чорного до прозорого.

(Так, я знаю, що це скоріше коментар, ніж відповідь, але у нього було занадто довго, щоб вписатись у поле коментарів.)


Так, ви можете точно використовувати чорно-білий градієнт на каналі, потім завантажте його як виділення, потім створіть новий шар, а потім заповніть виділення. Ви закінчите градієнт зі стертою альфаю. Також я відредагую свою відповідь ... 16-бітний режим трохи дивний. Це не завжди краща якість для градієнтів.
Марк Едвардс

Thx для відповіді. Виявляється, проблема градієнта насправді не через PS, тому що: 1) На iPad3 зображення виглядає нормально. 2) Градієнт CSS також виглядає смужною на моніторі.
Зареєстрований користувач

Градієнти CSS не розкреслені в більшості браузерів. Сумно але правда.
aaaidan

4

Я знайшов подібну проблему в Illustrator (який навіть не має опції "dither" для градієнтів). Це звучить трохи божевільно, але я його обіходжу, застосувавши «скляний» фільтр, який може наблизитись до блукання правильними парамами.

Я використовую:

  • Спотворення: 2 (це залежить від розміру ваших груп).
  • Плавність: 1
  • Текстура: Матове (найшмішніша вбудована текстура)
  • Масштабування: 50%

У Illustrator це вводить білі плями на краях вашого об’єкта, які ви можете виправити, використовуючи відсічну маску.

Результати? "Спрацьований" один справа. Це додає трохи галасливої ​​текстури, але я думаю, що це краще, ніж групи більшу частину часу.

Похилий градієнт Шкідливий


3

Дуже основна відмінність у створенні градієнтів полягає у використанні градієнтного шару, який має вбудований параметр dither (Layer> New Fill Layer> Gradient) і залишається регульованим. З цього моменту ви могли б перетворитись на смарт-шар і додати будь-які ефекти, необхідні для подальшого вдосконалення, але це дає набагато кращу вихідну точку.


Варіант "тремтіння" для градієнтних шарів затіняє лише червоний, зелений і синій канали, а не альфа (на жаль).
Марк Едвардс

2
Я не знаю, що. Прозорість також може бути досягнута за допомогою маски шару. Отже, як щодо створення градієнта чорно-білого та використання його як маски шару?
KMSTR

2

введіть тут опис зображення

Це три зразки, що демонструють дріт. Набір нижче - це вищевказаний набір з рівнем, скоригованим для того, щоб висвітлити наслідки стихання.

введіть тут опис зображення

Зліва направо, перший з них є найбільш помітним; жодної жодної сутінки. Другий - той самий градієнт з дитретом; набагато краще. І третій, той, що праворуч, має сутінки, і я додатково додав шар шуму, що фактично підсилює діру. Дивіться коментар, чому ви додасте додатковий шум. Див. "Додаткові примітки" про те, як зменшити прозорість / альфа-канал.

Коментар

Я робив великі візуалізації градієнтів з мінімальними варіаціями кольорів, і смуга була дуже помітною без збивання, як у першому зразку. Тоді я дізнався про тугу, і це значно покращило речі, це вже другий зразок. Але на великій рендерінгу (тут менше видно) все ще було деяке обв’язування. Мені потрібна була більш агресивна туга. Тож я скопіював * градієнтний шар, розсіяв його і додав мінімальну кількість (0,1%) рівномірного монохромного шуму. Це значно покращило масштабне зображення Це третій зразок. Поліпшення від додаткового шуму (що є, по суті, детермінацією) менш помітне в невеликому масштабі, як у цьому зразку тут, але воно було дуже важливим для великого візуалізації, як ті, над якими я працював.

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

Додаткові нотатки

  • Я обговорював лише власне зображення. Також може впливати апаратна та водійська частина речей; інший пристрій може відображати речі по-іншому. Інші відповіді це досить добре висвітлили.

  • Фотошоп не затьмарює альфа-канал. Якщо вам потрібна забарвлення на прозорість, вам потрібно вручну заграти альфа-канал. Я б використовував шар маски, щоб створити прозорість, тож було б лише питання знебарвлення цього шару маски. А під час роботи з масками шару не забудьте позначити ALT+ left clickна масці шару, щоб відобразити її.


2

Дуже корисна стаття на тему: http://nomorebanding.com/cache

Ось суть:

Ідея полягає в тому, щоб створити градієнт у 16-бітному режимі, а потім перетворити його в 8-бітовий режим, дотримуючись процедуру ручного детінгування (використовуючи спеціальний шар дифрингу). Ось процедура:

1. Вимкніть занурення за замовчуванням (Правка> Налаштування кольорів зніміть прапорець Використовувати Dithering), тому що ми збираємося зробити власний диффунг "двигуном"

2.Створіть новий шар (має бути найвищим).

3.Заповніть його твердим кольором 50% сірого кольору.

4.Фільтр> Шум> Додати шум. (Сума 25%, Уніфікована розподіл, Монохроматична перевірена)

  1. Натисніть Ctrl + F, щоб повторити фільтр шуму на одному шарі.

6.Встановіть шар на лінійне світло.

7.У палітрі шарів встановіть непрозорість на 1%, заповніть непрозорість на 19%.

Важливо: Вам потрібно вирівняти зображення (включаючи рівень шуму), перебуваючи в 16-бітному режимі, і лише потім перетворити його на 8-бітний режим для експорту. Якщо ви зробите це навпаки, спочатку ви втратите всю 16-бітну інформацію, а потім шар шуму точно не зробить нічого за 8 біт. Крім того, пам’ятайте про налаштування Photoshop у використанні Dither. Ви можете використовувати або шар, або рідний метод детердування, але не використовувати обидва під час перетворення, це призведе до подвійного шуму, який вам потрібен.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.