Ist es wirklich unmöglich, Gefälle ohne Streifenbildung zu haben?


37

Ich kämpfe, um einen Farbverlauf ohne Streifenbildung zu erstellen. Ich habe mir alle Videos auf YT angesehen und versucht: Alle Arten von Weichzeichnen, Rauschen, Zittern, Bittiefe, Pinsel und Verlauf in Illustrator.

Alles schlägt fehl und ich kann die Streifen immer sehen.

Die Hintergrundfarbe, die ich hinter dem Bild verwende: 050b3c Bildbeschreibung hier eingeben Bildbeschreibung hier eingeben

Antworten:


28

Rauschen und Zittern führen normalerweise zu recht guten Ergebnissen. Es gibt ein paar Dinge, die die Streifenbildung deutlicher machen können:

  • Farben „starten“ und „stoppen“
  • Gradientengröße (Streifenbildung wird deutlicher, wenn „Start“ - und „Stopp“ -Punkte weiter voneinander entfernt sind. Der Gradient muss auf mehr Samples mit der konstanten Anzahl verfügbarer Helligkeitswerte „projiziert“ werden.)
  • falsch kalibrierter Monitor / Monitor mit schlechter Qualität (haben Sie versucht, Ihre Farbverläufe auf verschiedenen Monitoren anzuzeigen?),
  • Reduzierte Farbauflösung pro Kanal in den Systemeinstellungen (erscheint heutzutage unwahrscheinlich, da die meisten Systeme 32-Bit / s-Einstellungen verwenden, aber immer noch eine Möglichkeit).
  • "Wilde" Grafikkarten-Gammaeinstellungen (z. B. im "Grafikkarten-Kontrollfeld" oder im Gamme Loader wie Adobe Gamma Loader),
  • zu "aggressives" Monitorprofil (auch hier sollte ein Test mit Blick auf andere Monitore einige Hinweise geben),
  • Reduzierte Bittiefe eines Bildes.

Es wäre auch nützlich zu wissen, was Ihr Zielgerät ist. Es gibt einen Unterschied, wie stark Sie Ihren Farbverlauf „verteilen“ können, unabhängig davon, ob Sie auf Druckbilder (welche Art von Druck ist auch wichtig, z. B.: Bildschirme wie AM, pseudostochastisch, stochastisch) oder Bildschirme von Mobilgeräten abzielen. Es macht auch einen Unterschied, ob Sie Raster- oder Vektorgrafiken verwenden.

Fazit ist: Das ist ein recht komplexes Thema :).


1
Sie haben zu 100% Recht damit, dass dies von einem Monitor abhängig ist. Nachdem ich Ihre Antwort gelesen habe, habe ich beschlossen, das blaue Bild (siehe aktualisiertes OP) auf meinem iPad3 zu testen. Die Qualität des Farbverlaufs auf dem iPad3 ist einwandfrei. Die Sache ist, dass ich nicht die Monitore aller Internetnutzer kontrollieren kann.
Registrierter Benutzer

1
Ya auf dem weißen Farbverlauf sehe ich Bänder, aber auf dem blauen Farbverlauf sehe ich keine Bänder
Ryan

@ Ryan Es ist nicht weiß, es ist transparent. Sie sollten es nehmen und eine Ebene (Farbe: 050b3c) darunter in PS hinzufügen. Beginnen Sie dann mit der Deckkraft der darunter liegenden Ebene zu spielen und sehen Sie, wie sich die Verlaufsstreifen ändern.
Registrierter Benutzer

@RegisteredUser Es ist mir egal, wann die Antwort dieselbe bleibt, die von den oben angegebenen Eigenschaften und den Monitoreinstellungen abhängt.
Ryan

2
Umfassende Antwort. Ich denke, es könnte sich lohnen, darauf hinzuweisen, woher das Problem stammt und warum Tricks wie Dithering erforderlich sind: 8-Bit-Farben geben Ihnen einfach nicht genug Schritte, um die Illusion eines sich reibungslos ändernden Verlaufs zuverlässig zu vermitteln.
e100

13

Ja, es ist möglich, Farbverläufe mit hoher Qualität zu erstellen. Es gibt jedoch viele Faktoren zu berücksichtigen.

  • Photoshop kann und kann auf dem Alphakanal nicht ruckeln. Wenn möglich, verwenden Sie lieber Volltonfarben. Versuchen Sie auch, die Deckkraft der Ebene zu vermeiden. Erstellen Sie den Farbverlauf mit genau den Farben, die Sie benötigen. Bearbeiten: In Photoshop CC 2014.2 wurde Alphakanal-Dithering hinzugefügt. :)

  • Es kann zu kumulativen Rundungsfehlern kommen, wenn Ihr Bildeditor eine Farbtiefe von 8 Bit pro Kanal verwendet. Die beste Möglichkeit zur Erzeugung eines Verlaufs, der aus mehreren Ebenen erstellt wurde (mit Mischmodi und Deckkraft bei der Wiedergabe), besteht darin, mit einer höheren Bittiefe zu rendern und nach Möglichkeit auf 8 Bit pro Kanal abzurendern. Photoshop kann dies tun. Wenn Sie einen Volltonverlauf aus einer Ebene erstellen möchten, sind 8 Bit pro Kanal in Ordnung (16 Bit sind nur nützlich, wenn Ebenen überblendet werden).

  • Dithering ist wirklich sehr wichtig. (Siehe vorherigen Punkt.)

  • Verwenden Sie nicht Illustrator. Es ist 8 Bit pro Kanal und zittert nicht.

  • Die Bildskalierung ruiniert die gute Arbeit, die das Dithering geleistet hat. Daher müssen Sie das Bild von Anfang an in der richtigen Größe erstellen.

  • Die meisten Laptops verfügen über 6-Bit-Displays pro Kanal mit einigen animierten Dithering-Tricks, um die Darstellung zu verbessern. Offensichtlich kämpfen Sie gegen das Display, und aufgrund des Displays sind möglicherweise keine reibungslosen Ergebnisse möglich. Das neue MacBook Pro mit Retina-Display ist eine bemerkenswerte Ausnahme: Es verfügt über ein 24-Bit-IPS-Display. Edit: Laptop-Displays haben sich seit diesem Beitrag etwas verbessert!

  • Wie Thebodzio angedeutet hat, kann auch die Verarbeitung auf Betriebssystemebene zu Problemen führen.

  • Wenn Sie in Photoshop den 16-Bit-Modus verwenden, testen Sie ihn im 8-Bit-Modus. Es gibt bestimmte Umstände, in denen der 8-Bit-Modus besser aussieht, und andere Umstände, in denen der 16-Bit-Modus besser ist. Grundlegende Faustregel: Wenn Sie einen Farbverlauf haben, verwenden Sie 8-Bit mit Dithering. Wenn Sie mehrere Ebenen und Verläufe mit Deckkraft verwenden, verwenden Sie den 16-Bit-Modus.


Wenn Sie sich Ihr Bild ansehen, scheint es, als ob eine andere destruktive Konvertierung stattfindet. Verwenden Sie Save For Web? Haben Sie Zu sRGB konvertieren aktiviert? Wenn ja, schalten Sie es aus (dies ist die einfachste Möglichkeit, die Qualität Ihrer Bilder zu beeinträchtigen und gleichzeitig zerstörerische Farbänderungen vorzunehmen).


+1 für deine tolle Antwort, aber ich bin seitdem mitgekommen. Zunächst einmal ist es nicht gut, einen Farbverlauf ohne Alpha zu erstellen, da das benötigte Bild transparent sein sollte, damit ich es auf einer Webseite verwenden kann, die über die gesamte Seite gelegt wird. Nachdem ich die akzeptierte Antwort gelesen habe, habe ich mich entschieden, PS aufzugeben und den Verlauf programmgesteuert mit CSS-Radialverlauf ( colorzilla.com/gradient-editor ) zu erstellen . Leider hat das CSS überhaupt nicht geholfen und der Gradient ist weiterhin stark gebändert.
Registrierter Benutzer

Sie können den Alphakanal auch selbst in Photoshop erstellen, sodass Sie das Alpha (manuell) zittern lassen können. CSS ist jedoch eine gute Lösung. Beachten Sie bei Verwendung eines Laptops, dass möglicherweise Streifen auf dem Bildschirm zu sehen sind, bei anderen wird jedoch möglicherweise ein sanfter Farbverlauf angezeigt. Auch das Rendering des Browsers spielt eine Rolle.
Marc Edwards

5

Marc Edwards schreibt : "Photoshop kann und kann auf dem Alphakanal nicht ruckeln." In diesem Fall können Sie es möglicherweise vortäuschen, indem Sie einen geditherten Farbverlauf von Weiß nach Schwarz erstellen und dann das Weiß transparent machen. Leider ist es schon eine Weile her, dass ich Photoshop verwendet habe, aber die allgemeine Idee wäre ungefähr so:

  1. Erstellen Sie einen 16-Bit-Farbverlauf von Schwarz nach Weiß.
  2. Dither es auf 8-Bit.
  3. Erstellen Sie eine durchgehende schwarze Ebene und fügen Sie ihr eine Ebenenmaske hinzu.
  4. Kopieren Sie den geditherten Farbverlauf in die Ebenenmaske (und invertieren Sie ihn bei Bedarf).
  5. Wenden Sie die Ebenenmaske an, um einen fein abgestuften Verlauf von Schwarz zu Transparent zu erhalten.

(Ja, ich weiß, dass dies eher ein Kommentar als eine Antwort ist, aber es hat zu lange gedauert, um in das Kommentarfeld zu passen.)


Ja, Sie können definitiv einen Schwarz-Weiß-Farbverlauf in einem Kanal verwenden, diesen dann als Auswahl laden, dann eine neue Ebene erstellen und dann die Auswahl füllen. Sie erhalten einen Farbverlauf mit gedithertem Alpha. Außerdem bearbeite ich meine Antwort ... 16-Bit-Modus ist ein bisschen seltsam. Es ist nicht immer eine bessere Qualität für Farbverläufe.
Marc Edwards

Danke für die Antwort. Es stellt sich heraus, dass das Farbverlaufsproblem nicht wirklich am PS liegt, denn: 1) Das Bild sieht auf dem iPad3 in Ordnung aus. 2) Der CSS-Verlauf sieht auf dem Monitor ebenfalls gebändert aus.
Registrierter Benutzer

CSS-Verläufe werden in den meisten Browsern nicht gedithert. Traurig aber wahr.
aaaidan

4

Ich habe ein ähnliches Problem in Illustrator gefunden (das nicht einmal eine "Dither" -Option für Verläufe bietet). Es klingt ein bisschen verrückt, aber ich kann es umgehen, indem ich einen "Glas" -Filter anwende, der das Dithering mit den richtigen Parametern annähern kann.

Ich benutze:

  • Verzerrung: 2 (dies hängt von der Größe Ihrer Bänder ab).
  • Glätte: 1
  • Textur: Matt (die lauteste eingebaute Textur)
  • Skalierung: 50%

In Illustrator werden hierdurch weiße Flecken an den Rändern Ihres Objekts eingeführt, die Sie mithilfe einer Schnittmaske korrigieren können.

Ergebnisse? "Dithered" auf der rechten Seite. Es fügt ein bisschen eine laute Textur hinzu, aber ich denke, es ist die meiste Zeit besser als die Bands.

Gebänderter Farbverlauf Dithered


3

Ein sehr grundlegender Unterschied zum Erstellen von Gradienten wird unter Verwendung der Verlaufsebene , die eine Zitter Option in (Layer> New Fill Schicht> Gradient) und Aufenthalte einstellbar gebaut hat. Von hier an können Sie in eine intelligente Ebene konvertieren und alle Effekte hinzufügen, die Sie zur weiteren Verbesserung benötigen. Dies bietet Ihnen jedoch einen viel besseren Ausgangspunkt.


Die Dither-Option für Verlaufsebenen unterscheidet nur die Kanäle Rot, Grün und Blau, nicht (leider) Alpha.
Marc Edwards

2
Ich wusste das nicht. Transparenz kann aber auch über die Ebenenmaske erreicht werden. Wie wäre es also, einen Schwarz-Weiß-Verlauf zu erstellen und ihn als Ebenenmaske zu verwenden?
KMSTR

2

Bildbeschreibung hier eingeben

Dies sind drei Beispiele, die Dithering demonstrieren. Der folgende Satz ist der obige Satz, bei dem die Pegel angepasst werden, um die Effekte des Ditherings hervorzuheben.

Bildbeschreibung hier eingeben

Von links nach rechts ist der erste am sichtbarsten gebändert; kein Dither vorhanden. Der zweite ist derselbe Gradient mit Dithering; viel besser. Und die dritte, die rechte, hat Dithering, und ich habe zusätzlich eine Rauschschicht hinzugefügt, um das Dithering zu verstärken. Lesen Sie den Kommentar, warum Sie das zusätzliche Rauschen hinzufügen würden. Siehe "Zusätzliche Hinweise" zum Dithering von Transparenz / Alphakanal.

Kommentar

Ich habe große Farbverläufe mit minimalen Farbabweichungen gerendert, und die Streifenbildung war wie im ersten Beispiel ohne Dithering sehr gut sichtbar. Dann habe ich etwas über Dithering herausgefunden und es hat die Dinge sehr verbessert, das ist das zweite Beispiel. Bei einem großen Rendering (hier weniger sichtbar) gab es jedoch noch einige Streifen. Ich brauchte aggressiveres Dithering. Also kopierte ich * die Verlaufsebene, rasterte sie und fügte eine winzige Menge (0,1%) gleichmäßigen monochromen Rauschens hinzu. Das hat das Großbild erheblich verbessert. Das ist die dritte Probe. Die Verbesserung durch zusätzliches Rauschen (bei dem es sich im Wesentlichen um Dithering handelt) ist im kleinen Maßstab weniger sichtbar, wie in diesem Beispiel, aber bei einem großen Rendering wie dem, an dem ich gearbeitet habe, war dies sehr wichtig.

* Ich habe eine separate Ebene für Rauschen erstellt, da ich auf diese Weise das Rauschen mit der Deckkraft der neuen Ebene steuern kann.

Zusätzliche Bemerkungen

  • Ich habe nur das eigentliche Bild besprochen. Die Hardware- und Treiberseite der Dinge kann ebenfalls einflussreich sein. Ein anderes Gerät zeigt die Dinge möglicherweise anders an. Andere Antworten haben das ziemlich gut abgedeckt.

  • In Photoshop wird der Alphakanal nicht gezittert. Wenn Sie Dithering für Transparenz benötigen, müssen Sie den Alphakanal manuell dithering. Ich würde eine Maskenebene verwenden, um Transparenz zu erzeugen, daher müsste diese Maskenebene nur gedithert werden. Und wenn Sie mit Ebenenmasken arbeiten, vergessen Sie nicht, die Ebenenmaske mit ALT+ left clickzu markieren, um sie anzuzeigen.


2

Sehr nützlicher Artikel zum Thema: http://nomorebanding.com/cache

Hier ist die Essenz:

Die Idee besteht darin, einen Farbverlauf im 16-Bit-Modus zu erstellen und ihn dann im 8-Bit-Modus zu konvertieren, wobei das manuelle Dithering (unter Verwendung einer benutzerdefinierten Dithering-Ebene) ausgeführt wird. Hier ist die Prozedur:

1.Schalten Sie das Standard-Dithering aus (Bearbeiten> Farbeinstellungen deaktivieren Sie "Dithering verwenden"), da wir unser eigenes "Dithering-Modul" erstellen werden.

2.Erstelle eine neue Ebene (sollte ganz oben sein).

3.Füllen Sie es mit festem 50% Grau.

4.Filter> Rauschen> Rauschen hinzufügen. (Menge 25%, gleichmäßige Verteilung, monochromatisch geprüft)

  1. Drücken Sie Strg + F, um den Rauschfilter auf derselben Ebene zu wiederholen.

6.Stellen Sie die Ebene auf Lineares Licht.

7.Stellen Sie in der Ebenen-Palette die Deckkraft auf 1% und die Deckkraft auf 19% ein.

Wichtig: Sie müssen das Bild (einschließlich der Rauschebene) im 16-Bit-Modus reduzieren und erst dann für den Export in den 8-Bit-Modus konvertieren. Wenn Sie es umgekehrt machen, verlieren Sie zuerst alle 16-Bit-Informationen, und dann tut die Rauschschicht in 8 Bits genau nichts. Beachten Sie auch die Einstellung „Dither verwenden“ in Photoshop. Sie können entweder die Ebenen- oder die native Dithering-Methode verwenden, aber nicht beide, da dies zu doppeltem Rauschen führt.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.