Warum erzeugen zwei perfekt benachbarte Rechtecke schwarze oder weiße Linien dazwischen, als ob sie sich überlappen oder nicht genau benachbart wären?

53

Ich habe ein flaches Design (naja, das soll es sein), aber diese schwarz-weißen Linien zwischen den Formen sind so nervig ... [kein Strich] werfen Sie einen Blick darauf:

Problem

Sehen Sie diese Linien zwischen zwei überlappenden Rechtecken? Wie kann ich es reparieren? (Ich habe dies mit Photoshop erstellt, aber es gibt das gleiche Problem mit Paint.net und Adobe Illustrator.) Stimmt etwas mit der Farbe überein? Oder sehe ich zu viel? : P

candh
quelle
Ich denke, der Schlüssel, der hier entscheidet, ob es sich um ein Mach-Band oder etwas anderes handelt, ist die Asymmetrie: "Wie Sie sehen können, überlappt die rechte Seite des Rechtecks ​​um 1 px (wie Sie angegeben haben), während die linke Seite dies nicht tat". Machbänder sollten auf beiden Seiten symmetrisch erscheinen.
Elmo Allén
1
Ich habe weit hineingezoomt (auf 25600%), so dass es definitiv ein Subpixel-Effekt ist. Übrigens sehe ich die Artefakte nur auf 1 von 3 Monitoren. Die anderen beiden sehen primo sharpo aus !! Es hängt also definitiv von der Pixelkonstruktion Ihres Monitors ab.
Octopus,
1
@ Octopus: Welche Marke überwacht? Das ist mein nächster Einkauf, und ich würde gerne etwas kaufen, das objektiv von höherer Qualität ist.
Dotancohen

Antworten:

90

Wie Elmo Allén richtig bemerkt, ist dies weder eine optische Täuschung noch ein Fehler in Ihrem Grafikeditor, sondern ein Effekt, der durch die von Ihnen verwendete Monitortechnologie verursacht wird.

Insbesondere besteht auf einem typischen modernen TFT-LCD- Computerbildschirm jedes Pixel tatsächlich aus drei getrennten Subpixeln, die nebeneinander angeordnet sind, jeweils in den Farben reg, green und blue:

Pixel auf einem TFT-Bildschirm

Jedes dieser Subpixel kann nur eine der Primärfarben des Lichts erzeugen. Da sie jedoch sehr nahe beieinander liegen, werden ihre Farben beim Betrachten miteinander vermischt und erzeugen die Illusion einer Volltonfarbe.

Für ein weißes (oder graues) Pixel werden alle Subpixel gleich beleuchtet. Durch Einstellen der Intensität der verschiedenen Subpixel relativ zueinander können verschiedene Farben erzeugt werden. Im Extremfall werden für ein reines rotes, grünes oder blaues Pixel nur die Subpixel aktiviert, die diese Farbe erzeugen. So wird Ihr Rot-Grün-Rot-Streifen auf der Subpixel-Ebene ungefähr so ​​gerendert:

Rot-Grün-Rot-Streifen auf einem TFT-Bildschirm

Hier können Sie sehen, was los ist: In der Regel gibt es eine Lücke von zwei dunklen Subpixeln zwischen jedem beleuchteten, aber an den Grenzen zwischen den Farben beträgt die Lücke entweder drei Subpixel (Erstellen eines dunklen Bandes) oder nur eines (Erstellen eines Licht ein).

Natürlich ist der Effekt offensichtlicher, wenn die Farben benachbarter Subpixel zusammengemischt werden, wie dies normalerweise der Fall ist, wenn Sie auf den Bildschirm schauen:

Rot-grün-roter Streifen auf einem TFT-Bildschirm, unscharf

Hier habe ich nur ein mäßiges Maß an Unschärfe angewendet, um zu simulieren, was Sie möglicherweise sehen, wenn Sie z. B. durch eine Lupe auf Ihren Bildschirm schauen. (Probieren Sie es aus!) Hier ist das dunkle Band an der linken Grenze zu erkennen. Das helle Band an der rechten Grenze ist nicht so deutlich zu erkennen, aber es würde auffallen, wenn das Bild weiter unscharf würde.

Natürlich müssen Sie diesen simulierten Bildern nicht vertrauen. Lassen Sie mich stattdessen ein paar Nahaufnahmen von meinem Laptop-Bildschirm einfügen, die das Bild in Ihrer Frage mit einer billigen Digitalkamera zeigen:

Foto des Laptopbildschirms rote / grüne Farbgrenze zeigend
Foto des Laptopbildschirms grüne / rote Farbgrenze zeigend

Wie im simulierten Bild ist die dunkle Linie sehr offensichtlich; Die helle Linie ist weniger stark, vielleicht weil zwischen den beleuchteten immer noch ein dunkles Subpixel ist, so dass es keinen so klaren einzelnen Intensitätspeak gibt.

Was können Sie tun, um dies zu beheben?

Im Prinzip kann dieser Effekt von Ihrem Monitor automatisch ausgeglichen werden, z. B. indem Sie solche problematischen Übergänge erkennen und die Farben leicht ineinander übergehen lassen, um den Übergang zu mildern. Dies würde jedoch die Komplexität und die Kosten erhöhen, weshalb sich die meisten Monitorhersteller nicht darum kümmern.

Sie können jedoch das gleiche Ergebnis erzielen, indem Sie einen schmalen Streifen einer Zwischenfarbe (z. B. Gelb für Rot und Grün) zwischen solche kontrastreichen Farbfelder einfügen. Die Farbe dieses Streifens sollte ungefähr der durchschnittlichen Luminanz der umgebenden Farben entsprechen, wobei das Display-Gamma zu berücksichtigen ist.

Ilmari Karonen
quelle
2
Ich glaube nicht, dass die Kompensation die Kosten wirklich so stark beeinflussen würde (~ 1 Euro pro Paneloberseite). In Anbetracht der alten Amiga-Tage taten sie etwas Ähnliches. Es ist eher so, als wäre das Problem eher selten, und Sie möchten keine Probleme mit dem Schärfen / Anpassen für fast keine Verstärkung. Nur eine gute Erinnerung, dass die Technologie voller Kompromisse ist und Sie sich einiger davon bewusst sein müssen. +1 Hyvät kuvat kuitenki.
Joojaa
2
Wird das Hinzufügen von Zwischenfarben tatsächlich in der Praxis durchgeführt?
Lilienthal
1
@Lilienthal: Ich habe es noch nie gesehen; dann wieder, ist der springende Punkt , dass man nicht sollte es sehen. Ich nehme an, ein Grund, warum die Notwendigkeit in der Praxis selten auftritt, besteht darin, dass die meisten Designer es sowieso vermeiden, derart kontrastreiche reine Farben nebeneinander zu stellen.
Ilmari Karonen,
35

Es ist schwierig, genau das zu machen, was jeder hier sieht, weil jeder sein eigenes Display hat, um das Bild zu sehen. Wenn ich schaue, sehe ich auf meinem Monitor eine sehr dünne schwarze Linie zwischen dem linken roten und dem grünen mittleren Rechteck. Und im Gegensatz dazu sehe ich zwischen der rechten roten und der mittleren eine sehr dünne weiße Linie. Grundsätzlich verstehe ich, dass das Originalplakat Folgendes bedeutet (übertrieben):

Beschreibung des Problems: Eine schwarze oder weiße Linie zwischen benachbarten Rechtecken, übertrieben.

Dies sind keine Mach-Bands , wie in den Fragenkommentaren vorgeschlagen. Mach-Bänder entstehen nicht zwischen unterschiedlich verchromten Farben, sondern zwischen unterschiedlich beleuchteten Farben (zB zwischen zwei Graustufen). Auf der rechten Seite des roten Rechtecks ​​wird ein sehr schwaches Mach-Band erzeugt, da Vollrot (RGB 255-0-0) auf meinem Monitor (und auf allen sRGB-Monitoren als etwas weniger hell ist als Vollgrün (RGB 0-255-0) Gut). (Auch wenn die Farben des Originalbilds nicht rein rot oder grün sind, ist der Unterschied in der wahrgenommenen Helligkeit ungefähr gleich.) Grundsätzlich zeigen Mach-Bänder Folgendes (wiederum stark übertrieben):

Illustration von Machbändern, übertrieben.

Mach-Bänder können jedoch keine weißen oder schwarzen dünnen Linien erzeugen. Sie erzeugen nur einen geringen Unterschied in der beobachteten Helligkeit auf einer großen Fläche. Und Mach-Bänder sind immer symmetrisch: Rot zu Grün ist dasselbe wie Grün zu Rot. Dies ist jedoch asymmetrisch: Die andere Grenze ist schwarz und die andere ist weiß.

Stattdessen sehen wir hier ein visuelles Artefakt aufgrund der Anordnung der LCD-Subpixel . Die üblichste Anordnung ist Rot-Grün-Blau von links nach rechts. Also gibt es zwischen jedem vollen roten Pixel ein ausgeschaltetes grünes Subpixel und ein ausgeschaltetes blaues Subpixel. Stattdessen gibt es zwischen einem vollen roten Pixel und einem vollen grünen Pixel drei deaktivierte Subpixel: Grün, Blau und Rot. Dies erzeugt den Effekt einer dünnen schwarzen Linie zwischen Rot und Grün. Wie im Bild unten:

Subpixel-Darstellung der roten Farbe mit der grünen Farbe.

Jetzt befindet sich auf der anderen Seite des grünen Rechtecks ​​zuerst ein beleuchtetes grünes Subpixel, ein deaktiviertes blaues Subpixel und dann ein rotes. Zwischen den leuchtenden grünen und roten Subpixeln befindet sich nur noch ein schwarzer Subpixel. Dies erzeugt den Effekt einer sehr dünnen hellen Linie, die zwischen der grünen und der roten Grenze verläuft. Wie unten:

Subpixel-Darstellung der grünen Farbe mit roter Farbe.

Um die Subpixel auf Ihrem Monitor zu sehen, benötigen Sie wahrscheinlich eine Lupe. Das menschliche Sehvermögen von Norman kann sich nicht auf so kurze Entfernungen konzentrieren, in denen Sie die einzelnen Pixel sehen würden. Es ist jedoch sehr gut, diesen geringfügigen Helligkeitsunterschied zu erkennen.

Um die Richtigkeit der Theorie zu beweisen, können Sie z. B. eine 1 px breite RGB 128-255-0-Linie zwischen dem linken roten und dem grünen Rechteck einfügen und prüfen, ob die schwarze Linie ausgeblendet wird, da hierdurch zuvor grünes Subpixel-Licht hinzugefügt wird die Lücke. Auch könnte man zB ein 1 px breites RGB 85-85-0 zwischen dem grünen und rechten roten Rechteck versuchen, um die Subpixel etwas abzudunkeln. Leider kann dies im eigentlichen Design nicht verwendet werden, da es zum einen auf die Rot-Grün-Blau-Subpixel-Anordnung ankommt und gleichzeitig den Farbrand etwas verwischt.

Darüber hinaus besteht die Möglichkeit, dass ein Bildschirmschärfungsalgorithmus stattfindet. Grundsätzlich werden alle Farbkanten durch Monitorschärfen hervorgehoben, indem die hellere Seite der Kante weiß und die dunklere Seite schwarz angezeigt wird. Dies ähnelt dem Mach-Band-Effekt, ist jedoch viel schmaler und in der Regel stärker ausgeprägt. Dies lässt sich herausfinden, indem Sie die Schärfeeinstellung des Displays anpassen (hoffentlich möglich) und prüfen, ob der Effekt reduziert ist.

Elmo Allén
quelle
2
ja das macht sinn, berücksichtigt aber nicht alle effekte, aber ja jetzt, wo ich in 2 verschiedenen monitore mit einer bekannten anderen reihenfolge schaue, ist der effekt tatsächlich invertiert. Allerdings sehe ich auf dem primären Monitor keine Farbungleichmäßigkeit, was möglicherweise auf die wahnsinnig gute Qualität der Bildelemente des Monitors zurückzuführen ist. Das einzige was ich sehe sind die Mach Bands. Ps, um diesen Monitor auf den Kopf zu stellen.
Joojaa
ah oder in der Tat, dass die Elemente stochastisch durcheinander gebracht werden, um diesem Problem entgegenzuwirken
joojaa
Auf jeden Fall spricht das OP @candh von einer 1px breiten Überlappung. Mach Bands sollten niemals so eng sein. (Auf jeden Fall können sie nicht einmal im Sinne eines Pixels definiert werden, da sie sich im Gehirn bilden. Subpixel-Artefakte entstehen auf dem Bildschirm.) Auch wenn wir nicht näher auf das eingehen, was er genau sieht, müssen wir die richtige Lösung finden. (Bei meinem Ruf kann ich die Frage noch nicht kommentieren.)
Elmo Allén
2
@joojaa, natürlich würde Rauschen den geradlinigen Effekt von Subpixeln verringern, aber es würde das Baby mit dem Badewasser werfen, weil die gerade scharfe Linie nicht mehr so ​​scharf aussehen würde. Ich glaube nicht, dass es einen guten Weg gibt, dies zu bekämpfen, oder einen Grund dafür. Auf modernen Bildschirmen ist der Effekt bereits sehr gering, und jetzt, da die HiDPI-Bildschirme auch auf Desktop-Computern nur langsam zum Mainstream werden, spielt dies noch weniger eine Rolle. Außerdem werden sehr große Farbkontraste sehr selten verwendet, was den Helligkeitskontrast überhaupt nicht beeinträchtigt.
Elmo Allén
2
Auf meinem R, G, B-Monitor habe ich das visuelle Artefakt stark reduziert, indem ich die Summe der beiden Grenzpixel um 1/6 vergrößert / verkleinert habe (insgesamt 1/3, unter Berücksichtigung der Verschiebung um 1/3). a-Pixel). Genauer gesagt: 1 0 0 | 1 0 0 | 1 x 0 | x 1 0 | 0 1 0 | 0 1 0: Wenn Sie die beiden x-Komponenten auf 1/6 anstatt auf 0 setzen, vermeiden Sie den Schwarzbandeffekt. Und in 0 1 0 | 0 1 0 | 0 y 0 | y 0 0 | 1 0 0 | 1 0 0: Sie müssen y nur auf 5/6 einstellen, um den Weißbandeffekt zu vermeiden. (Die Werte 1/6 und 5/6 sollten wahrscheinlich unter Berücksichtigung der Wahrnehmungsebene des Auges verfeinert werden.)
Armin Rigo
4

Dies ist die Natur der Farben, wenn sie zusammenkommen. Das menschliche Auge tendiert zur Vereinfachung, um Dinge zu klären. Und die optischen Täuschungen, die durch unsere Wahrnehmung von Farben verursacht werden.

Dieses Phänomen, das "Mach Bands Illusion" genannt wird, tritt mit zwei beliebigen Farben auf, die sich im Wert unterscheiden. weder im Farbton noch in der Sättigung. und mein beigefügtes Diagramm zeigt, dass die gleiche Illusion in grauen Farben auftritt. Das hellere Grau ist heller als das dunklere in der Mitte und das mittlere Grau erscheint heller neben dem Rand des rechten dunklen Graus rechts. Und so weiter.

Bildbeschreibung hier eingeben

wenn es dir wichtig ist hast du also zwei möglichkeiten.

  1. Wenn Sie zwei Farben mit gleichem Schwarzanteil auswählen, wird die Illusion verringert
  2. Sie können das Auge täuschen, indem Sie eine graue winzige Linie zwischen den beiden Farben einfügen, die das durchschnittliche Grau der beiden Grautöne in diesen Farben haben. siehe das Ergebnis unten. Sie können erkennen, dass der obere Streifen weniger in der Illusion ist als der untere.

der oberste Streifen ist weniger in der Illusion

Dies ist die vergrößerte Version mit der winzigen grauen Linie.

hsawires
quelle
11
Das ist falsch. Das erste Diagramm (Rot-Grün-Rot) entspricht nicht dem zweiten (Hellgrau-Mittelgrau-Dunkelgrau), da die beiden Rottöne die gleiche Farbe haben. Wenn es um Helligkeit ginge, wäre das Liniendiagramm symmetrisch, --\|\--/|/--und Sie würden entweder ein schwarzes Band sowohl an der rot-grünen als auch an der grün-roten Schnittstelle sehen oder ein weißes Band an beiden.
David Richerby
5
Das ist wirklich leicht zu widerlegen. Wenn Sie einen Laptop haben und die schwarzen und weißen Linien sehen, stellen Sie Ihren Laptop auf den Kopf. Sie finden die schwarze Linie rechts statt links.
Slebetman
3
@hsawires: Die Idee ist, etwas wissenschaftlich zu beweisen. Den Laptop auf den Kopf zu stellen und zu sehen, wie sich Ihre Theorie vollständig auflöst, ist mit Sicherheit ein gültiger Beweis. Sie können es nicht einfach mit der Hand wegwedeln und sagen: "Sie können Illusionen nicht beweisen oder widerlegen." was für ein Unsinn!
Leichtigkeit Rennen mit Monica
1
@hsawires: Wenn der Bildschirm nicht auf den Kopf gestellt worden wäre, hätte dies keinen Einfluss darauf, wie das Bild dargestellt wird, wenn nicht die Reihenfolge der Dioden umgekehrt worden wäre, die die verschiedenen Farben auf dem Bildschirm erzeugen wird wahrgenommen, weil das Bild symmetrisch ist. Andernfalls könnten Sie anhand des Mach-Band-Effekts feststellen, ob der Bildschirm gedreht wurde oder nicht, was keinen Sinn ergibt. Die Tatsache, dass das Bild nicht identisch wahrgenommen wird, bedeutet, dass etwas anderes passieren muss, was auf die Subpixelstruktur zurückzuführen ist, die Ilmari und Elmo beschreiben.
HelloGoodbye
1
Um @HelloGoodbye zu unterstützen, sagt unser treuer Freund Wikipedia ( de.wikipedia.org/wiki/Mach_bands ): "Die Illusion ist unabhängig von der Orientierung."
Nelson Rothermel
0

Ich kann nicht sicher sein, aber wenn Sie eine Brille tragen, liegt das Problem hier. Sie werden höchstwahrscheinlich eine chromatische Aberration sehen , bei der sich die Rottöne und die Grüntöne trennen.

Je dicker Ihre Brille ist, desto ausgeprägter ist der Effekt. Drehen Sie den Kopf und beobachten Sie, wie sich die Farbblöcke bewegen. Wenn Sie sich dem Rand Ihrer Brille nähern, wird Ihre Brille dicker und verursacht somit einen größeren Abstand.

user295691
quelle
6
Es ist keine chromatische Aberration. Eine halbwegs kompetente Brille zeigt bei direktem Blick auf einen Computermonitor keine chromatische Aberration.
David Richerby
Es gibt hier absolut einen Aspekt der chromatischen Aberration. Wenn Sie nur den Winkel einstellen, auf den ich den Monitor betrachte, ändern sich die Größe der schwarzen und weißen Bänder. Und obwohl dieser Effekt bei Brillen stärker ist, ist er auch ohne Brille vorhanden - Ihre Augen haben auch unvollkommene Linsen! Wenn man ignoriert, dass reine Primärfarben diesen Effekt haben, fehlt ein Teil der Geschichte.
David Sainty
@Sainty Wie Ilmaris Antwort zeigt, handelt es sich um Subpixel-Abstände auf dem Monitor. Wenn Sie den Kopf zur Seite bewegen, ändert sich der scheinbare Abstand der Unterpixel, sodass sich der Effekt ändert. Und wie würde chromatische Aberration Schwarz erzeugen? Schlagen Sie vor, dass die Aberration so stark ist, dass sich die Frequenz des Lichts außerhalb des sichtbaren Bereichs des Spektrums ändert?
David Richerby
@ Richerby: Basierend auf Candhs Antwort und einigen detaillierteren Untersuchungen von meiner Seite, ist dies nicht der Effekt, den er gesehen hat. Es gibt jedoch eine chromatische Aberration, die schwarze Linien erzeugt - die roten verschieben sich in die eine und die grünen in die andere Richtung; Denken Sie an Prismen und wie sie Farben trennen. Der verbleibende Teil wird schwarz erscheinen, obwohl es für meine Augen (als ich eine Brille trug) eher so aussah, als ob das Rot über dem Bildschirm "schwebte".
user295691
0

In diesem Thread im Adobe-Forum erfahren Sie, wo sich die Optionen für "An Pixelraster ausrichten" befinden.

Wenn ich mich richtig erinnere, kann dies auch dokumentweit über den File > NewDialog (ganz unten im Feld) aktiviert werden .

Entweder sind diese Experten für Hardcore-Monitore richtig, oder es liegt eine Diskrepanz vor, die dadurch verursacht wird, dass der Vektor nicht korrekt an den Pixeln auf Ihrem Monitor ausgerichtet ist. Genau aus diesem Grund freuen sich so viele Menschen über dieses kleine Kontrollkästchen, das Illustrator hinzugefügt wird.

AVLien
quelle
3
Die Vektoren sind korrekt ausgerichtet. Um zu überprüfen, dass Sie das Bild einfach kopieren, in Photoshop oder einen Bildeditor einfügen und hineinzoomen müssen. Es gibt kein Antialiasing zwischen Pixeln und überhaupt keine Halbtonpixel.
Elmo Allén
-2

Dies kann an einer Farbwechselwirkung liegen. Rot und Grün sind Komplementärfarben und wenn sie nebeneinander platziert werden, scheinen sie eine schwarz / dunkle Linie zu erzeugen, die wie eine Überlappung wirkt. Sie könnten lesen und weitere Beispiele finden Sie hier .

Illustrator rastet Formen automatisch ein, sodass dort keine Überlappung auftreten sollte.

tgr
quelle
2
Wenn das Phänomen nur auf unsere Augen zurückzuführen wäre, würden Sie an der rot-grünen Grenze dasselbe sehen wie an der grün-roten Grenze.
David Richerby
Rot und Grün würden, wenn sie nebeneinander stehen und aus ausreichender Entfernung betrachtet werden (z. B. kleine Pixel aus einiger Entfernung betrachten), gelb und nicht schwarz hervorbringen.
Jason C
-2

Wenn Sie eine Option aktivieren Neue Objekte ausrichten Grid Pixel in der Transformations - Option - Menü - Fenster (die in der rechten oberen Ecke jeder Optionsfenster), werden alle neuen Objekte , die Sie haben die Pixel ausgerichtet Eigenschaft standardmäßig zeichnen. Für neue Dokumente, die mit dem Webdokumentprofil erstellt wurden, ist diese Option standardmäßig aktiviert. Bei vorhandenen Objekten können Sie die Pixelrasterausrichtung deaktivieren, indem Sie im Transformationsfenster selbst die Option An Pixelraster ausrichten auswählen (dies wird angezeigt, nachdem Sie im Optionsmenü des Fensters auf Weitere Optionen geklickt haben).

Das scharfe Erscheinungsbild pixelausgerichteter Striche wird in der Rasterausgabe nur mit einer Auflösung von 72 ppi beibehalten. Bei anderen Auflösungen ist die Wahrscheinlichkeit groß, dass solche Striche zu geglätteten Ergebnissen führen.

Objekte, die pixelausgerichtet sind, jedoch keine geraden vertikalen oder horizontalen Segmente aufweisen, werden nicht so geändert, dass sie am Pixelraster ausgerichtet sind. Da ein gedrehtes Rechteck beispielsweise keine geraden vertikalen oder horizontalen Segmente aufweist, wird es nicht angestoßen, um scharfe Pfade zu erzeugen, wenn die pixelausgerichtete Eigenschaft dafür festgelegt ist.

In der Dokumentation von Adobe wird dies ausführlicher beschrieben: http://helpx.adobe.com/illustrator/using/drawing-pixel-aligned-paths-web.html

Rahul Chouhan
quelle
1
welche Option genau?
Candh