Pourquoi deux rectangles parfaitement adjacents créent-ils des lignes noires ou blanches comme si elles chevauchaient ou n'étaient pas exactement adjacentes?

53

J'ai un design plat (enfin, c'est supposé l'être), mais ces lignes noires et blanches entre les formes sont si ennuyeuses ... [pas de coup], regardez:

Problème

Voir ces lignes entre deux rectangles qui se chevauchent? Comment puis-je le réparer? (J'ai créé cela avec Photoshop, mais il y a le même problème avec Paint.net et Adobe Illustrator) Est-ce que c'est quelque chose avec la couleur? Ou est-ce que je vois trop? : P

candh
la source
Je pense que la clé ici pour décider s’il s’agit d’une bande de Mach ou d’autre chose est l’asymétrie: "comme vous pouvez le voir, le côté droit du rectangle se chevauchent de 1 px (comme vous l’avez indiqué), alors que le côté gauche ne l’a pas été". Les bandes de Mach doivent apparaître symétriquement des deux côtés.
Elmo Allén
1
J'ai fait un zoom avant (jusqu'à 25600%), donc c'est certainement un effet de sous-pixel. Incidemment, je ne vois les artefacts que sur 1 moniteur sur 3. Les deux autres regardent primo sharpo !! Donc, cela dépend définitivement de la construction en pixels de votre moniteur.
Octopus
1
@ Octopus: Quelle marque surveille? C'est mon prochain achat et j'aimerais acheter quelque chose qui est objectivement de meilleure qualité.
dotancohen

Réponses:

90

Comme le note correctement Elmo Allén, il ne s'agit ni d'une illusion d'optique, ni d'un bug dans votre éditeur graphique, mais d'un effet dû à la technologie de moniteur utilisée.

Plus précisément, sur un écran d’ ordinateur TFT-LCD moderne typique , chaque pixel est en réalité composé de trois sous-pixels séparés disposés côte à côte, respectivement de couleur reg, de vert et de bleu:

Pixels sur un écran TFT

Chacun de ces sous-pixels ne peut produire que l'une des couleurs primaires de la lumière, mais comme ils sont très proches les uns des autres, leurs couleurs se mélangent lorsque vous les regardez, produisant l'illusion d'une couleur unie.

Pour un pixel blanc (ou gris), tous les sous-pixels sont également illuminés. En ajustant l'intensité des différents sous-pixels les uns par rapport aux autres, différentes couleurs peuvent être produites. À l'extrême, pour un pixel pur rouge, vert ou bleu, seuls les sous-pixels produisant cette couleur sont activés. Ainsi, votre bande rouge-vert-rouge sera, au niveau des sous-pixels, rendue comme suit:

Bande rouge-vert-rouge sur un écran TFT

Ici, vous pouvez commencer à voir ce qui se passe: il y a généralement un écart de deux sous-pixels sombres entre chaque éclairé, mais aux limites entre les couleurs, l’écart est de trois sous-pixels (créant une bande sombre) ou d’un seul (créant un un léger).

Bien entendu, l’effet est plus évident lorsque les couleurs des sous-pixels proches sont mélangées, comme cela se produit normalement lorsque vous regardez à l’écran:

Rayure rouge-vert-rouge sur un écran TFT, floue

Ici, j’ai appliqué seulement un flou modéré, simulant ce que vous pourriez voir si, par exemple, vous regardiez votre écran à travers une loupe. (Essayez-le!) La bande sombre à la limite gauche est évidente ici; la bande lumineuse à la limite de droite n'apparaît pas aussi clairement, mais elle deviendrait plus visible si l'image était plus floue.

Bien sûr, vous n’avez pas à faire confiance à ces images simulées. Laissez-moi plutôt inclure quelques photos en gros plan que j'ai prises de l'écran de mon ordinateur portable, montrant l'image dans votre question, avec un appareil photo numérique bon marché:

Photo d'un écran d'ordinateur portable montrant la limite de couleur rouge / verte
Photo d'un écran d'ordinateur portable montrant la limite de couleur vert / rouge

Comme dans l'image simulée, la ligne sombre est très évidente; la ligne brillante l'est moins, peut-être parce qu'il y a toujours un sous-pixel sombre entre ceux qui sont allumés, il n'y a donc pas de pic d'intensité aussi clair.

Que pouvez-vous faire pour résoudre ce problème?

En principe, cet effet pourrait être compensé automatiquement par votre moniteur, par exemple en détectant de telles transitions problématiques et en laissant les couleurs se fondre légèrement les unes dans les autres pour adoucir la transition. Cela ajouterait cependant plus de complexité et de coût, raison pour laquelle la plupart des fabricants d’écrans ne se soucient pas de rien.

Vous pouvez toutefois obtenir le même résultat vous-même en ajoutant une bande étroite de couleur intermédiaire (par exemple, jaune, rouge et vert) entre de tels champs de couleur très contrastés. La couleur de cette bande doit correspondre approximativement à la luminance moyenne des couleurs environnantes, en tenant compte du gamma d'affichage .

Ilmari Karonen
la source
2
Je ne pense pas que la compensation affecterait vraiment le coût (environ 1 euro par panneau). Considérant les vieux jours d’amiga, ils firent quelque chose de similaire. C’est plutôt son problème qui est assez rare et vous ne voulez pas de problèmes avec vos réglages d’ajustement / d’ajustement sans presque aucun gain. Juste un bon rappel que la technologie est pleine de compromis et que vous devez être au courant de certains d'entre eux. +1 Hyvät kuvat kuitenki.
Joojaa
2
L'ajout de couleurs intermédiaires est-il réellement effectué?
Lilienthal
1
@ Lilienthal: je ne l'ai jamais vu; là encore, l’essentiel est que vous n’êtes pas censé le voir. Je suppose qu'une des raisons pour lesquelles le besoin apparaît rarement dans la pratique est que la plupart des concepteurs ont de toute façon tendance à éviter de placer des couleurs pures si contrastées.
Ilmari Karonen
35

Il est difficile de faire exactement ce que tout le monde voit ici, car chacun a son propre écran pour voir l'image. Si je louchais les yeux, je pouvais voir une très fine ligne noire entre le rectangle rouge de gauche et le rectangle du milieu vert. Et en contraste, entre le rouge droit et le milieu, je vois une ligne blanche très fine. Fondamentalement, je comprends que l'affiche originale signifie qu'ils voient ceci (exagéré):

Description du problème: une ligne noire ou blanche entre des rectangles adjacents, exagérée.

Ce ne sont pas des bandes de Mach , comme suggéré dans les commentaires de la question. Les bandes de Mach ne naissent pas entre des couleurs chromées différentes, mais entre des couleurs éclairées différentes (par exemple entre deux nuances de gris). Une très faible bande de Mach est créée dans le côté droit du rectangle rouge, car le rouge total (RGB 255-0-0) est légèrement moins brillant que le vert complet (RGB 0-255-0) sur mon moniteur (et sur tous les moniteurs sRGB bien). (Même si les couleurs de l'image d'origine ne sont pas du rouge pur ou du vert, la différence de légèreté perçue est approximativement la même.) En gros, les bandes de Mach se présentent comme ceci (encore une fois, très exagéré):

Illustration de bandes de Mach exagérées.

Mais les bandes de Mach ne peuvent pas créer de lignes fines blanches ou noires. Ils ne créent qu'une légère différence de luminosité observée sur une large zone. Et les bandes de Mach sont toujours symétriques: le rouge au vert est identique au vert au rouge. Mais ceci est asymétrique: l’autre frontière est noire et l’autre blanche.

Au lieu de cela, cet artefact visuel que nous voyons ici est dû à la disposition des sous-pixels de l' écran LCD . L’arrangement le plus courant est le rouge-vert-bleu de gauche à droite. Donc, entre chaque pixel rouge complet, il y a un sous-pixel vert désactivé et un sous-pixel bleu désactivé. Entre un pixel rouge complet et un pixel vert complet, il existe trois sous-pixels désactivés: vert, bleu et rouge. Cela crée un effet d'une fine ligne noire entre le rouge et le vert. Comme dans l'image ci-dessous:

Représentation sous-pixel de la couleur rouge rencontrant la couleur verte.

Maintenant, de l’autre côté du rectangle vert, il ya un sous-pixel vert allumé, un sous-pixel bleu éteint, puis un rouge. Maintenant , entre les sous - pixels verts et rouges éclairés il n'y a qu'un un sous - pixel noir. Cela crée un effet d'une ligne très claire très fine entre les limites verte et rouge. Comme ci-dessous:

Représentation sous-pixel de la couleur verte rencontrant la couleur rouge.

Pour voir les sous-pixels sur votre moniteur, vous aurez probablement besoin d'une loupe. La vision humaine normande ne peut pas se concentrer sur une distance aussi proche où vous verriez les pixels séparés. Cependant, il est très efficace pour détecter cette légère différence de luminosité.

Maintenant, pour prouver que la théorie est correcte, vous pouvez ajouter, par exemple, une ligne large de 1 px de RVB 128-255-0 entre le rectangle rouge de gauche et le rectangle vert et voir si la ligne noire s'estompe, ce qui ajoute un peu de lumière verte au sous-pixel avant le trou. Vous pouvez également essayer, par exemple, un RVB 85-85-0 large de 1 px entre le rectangle vert et le rectangle rouge droit, pour atténuer un peu les sous-pixels. Malheureusement, cela ne peut pas être utilisé dans la conception réelle, car cela dépend en premier lieu de la disposition des sous-pixels rouge-vert-bleu et en même temps rend la bordure de couleur un peu tachée.

En outre, il est possible qu'un algorithme de netteté d'écran soit mis en place. En résumé, l’affinement de l’écran accentue l’apparence de tous les bords de la couleur, en ajoutant du blanc au côté le plus brillant du bord et en atténuant le noir du côté foncé. Cela ressemble beaucoup à l'effet de bande de Mach, mais beaucoup plus étroit et généralement plus important. Pour le savoir, ajustez le réglage de netteté de l'écran (si possible) et voyez si l'effet est réduit.

Elmo Allén
la source
2
oui, cela a du sens, mais ne tient pas compte de tous les effets, mais oui, maintenant que je regarde dans deux écrans différents avec un ordre différent connu, l’effet est en fait inversé. Cependant, je ne vois pas les inégalités de couleur sur le moniteur principal, ce qui peut être dû à la qualité incroyablement bonne des éléments d’image du moniteur. La seule chose que je vois, ce sont les groupes mach. Ps pour tester ce moniteur à l'envers.
Joojaa
ah ou bien que les électeurs sont brouillés de manière stochastique pour contrer ce problème
joojaa
Quoi qu'il en soit, l'OP @candh parle d'un chevauchement de 1 px. Les bandes de Mach ne devraient jamais être aussi étroites. (Quoi qu’il en soit, ils ne peuvent même pas être définis au sens de pixel, car ils se forment dans le cerveau. Des artefacts de sous-pixels se forment à l’écran.) Néanmoins, si l’on peut en dire plus sur ce qu’il voit exactement, nous sommes obligés de trouver la bonne solution. (Avec ma réputation, je ne peux pas encore répondre à la question.)
Elmo Allén
2
@joojaa, bien entendu, le bruit atténuerait l'effet de ligne droite des sous-pixels, mais le bébé serait projeté avec l'eau du bain, car la ligne droite ne serait plus aussi nette. Je ne pense pas qu'il y ait un bon moyen de combattre cela ou une raison de le faire. Sur les écrans modernes, l’effet est déjà minime, et avec l’affichage HiDPI, même sur les ordinateurs de bureau, il devient encore moins important. De plus, de très grands contrastes de chrominance sont très rarement utilisés, ce qui n’affecte en rien le contraste de luminosité.
Elmo Allén
2
Sur mon moniteur R, G, B, j’ai beaucoup réduit l’artefact visuel en augmentant / diminuant le total des deux pixels de limite de 1/6 (total 1/3, ce qui représente le décalage par 1/3 de un pixel). Plus précisément: 1 0 0 | 1 0 0 | 1 x 0 | x 1 0 | 0 1 0 | 0 1 0: si vous définissez les deux composantes x sur 1/6 au lieu de 0, vous évitez l'effet bande noire. Et dans 0 1 0 | 0 1 0 | 0 y 0 | y 0 0 | 1 0 0 | 1 0 0: vous devez y être réglé sur 5/6 uniquement pour éviter l'effet de bande blanche. (Les valeurs 1/6 et 5/6 devraient probablement être affinées en tenant compte du niveau de perception de l'œil.)
Armin Rigo
4

C’est la nature des couleurs quand elles se rejoignent. L’œil humain a tendance à simplifier pour clarifier les choses .. et les illusions d’optique causées par notre perception des couleurs.

ce phénomène appelé "Mach Bands Illusion" apparaît avec deux couleurs différentes dans Value. pas dans la teinte ni la saturation. et mon diagramme ci-joint montre que la même illusion se produit en gris. le gris plus clair sera plus clair par rapport au plus sombre au milieu et le gris du milieu apparaît plus clair au bord du côté droit, gris foncé à droite. Et cetera.

entrez la description de l'image ici

si c'est important pour vous, vous avez donc deux options.

  1. choisir deux couleurs qui ont le même ratio de noir cela assurera de diminuer l'illusion
  2. vous pouvez "tromper l'oeil" en ajoutant une petite ligne grise entre les deux couleurs qui ont le gris moyen des deux gris dans ces couleurs. voir le résultat ci-dessous. vous reconnaîtrez peut-être que la bande supérieure est moins dans l’illusion que celle du bas.

la bande supérieure est moins dans l'illusion

c'est une version agrandie avec la petite ligne grise.

hsawires
la source
11
Ceci est une erreur. Le premier diagramme (rouge-vert-rouge) ne correspond pas au second (gris clair-gris moyen-gris foncé) car les deux rouges ont la même couleur. S'il s'agissait de la luminosité, le graphique linéaire serait symétrique, comme ceci --\|\--/|/--, et vous verriez soit une bande noire à la fois l'interface rouge-vert et celle vert-rouge, ou une bande blanche aux deux.
David Richerby
5
C'est vraiment facile à réfuter. Si vous avez un ordinateur portable et que vous voyez les lignes noires et blanches, retournez-le. Vous trouverez la ligne noire à droite au lieu de gauche.
Slebetman
3
@hsawires: L'idée est de prouver quelque chose de manière scientifique. Le fait de retourner l'ordinateur portable et de voir sa théorie totalement dissiper est certainement une réfutation valable. Vous ne pouvez pas vous contenter de lui dire "vous ne pouvez pas prouver ou réfuter des illusions"; quelle absurdité!
Courses de légèreté avec Monica
1
@hsawires: De toute façon, en retournant l'écran, si cela n'avait pas été le cas, cela inverserait l'ordre des diodes créant les différentes couleurs sur l'écran, cela n'aurait eu aucune incidence sur la qualité de l'image. est perçu, car l'image est symétrique. Sinon, vous pourriez, en regardant l'effet de la bande de Mach, déterminer si l'écran a été pivoté ou non, ce qui n'a aucun sens. Le fait que l'image ne soit pas perçue de manière identique signifie que quelque chose d'autre doit se produire, ce qui est dû à la structure de sous-pixels décrite par Ilmari et Elmo.
HelloGoodbye
1
Pour soutenir @HelloGoodbye, notre fidèle ami Wikipedia ( en.wikipedia.org/wiki/Mach_bands ) a ceci à dire: "L'illusion est indépendante de l'orientation."
Nelson Rothermel
0

Je n'en suis pas certain, mais si vous portez des lunettes, c'est là que réside le problème. Vous êtes probablement en train de voir une aberration chromatique , dans laquelle les rouges et les verts se séparent.

Plus vos lunettes sont épaisses, plus l'effet sera prononcé. Essayez de tourner la tête et de regarder les blocs de couleur bouger - au fur et à mesure que vous vous dirigez vers le bord de vos lunettes, celles-ci deviennent plus épaisses et provoquent ainsi une plus grande séparation.

utilisateur295691
la source
6
Ce n'est pas une aberration chromatique. Toute paire de lunettes à mi-chemin ne montrera aucune aberration chromatique si vous regardez directement un écran d'ordinateur.
David Richerby
Il y a absolument un aspect de l'aberration chromatique ici. Il suffit de régler l’angle auquel je regarde le moniteur pour que les bandes noir et blanc changent de taille. Et même si cet effet est plus prononcé avec des lunettes, il est toujours présent sans lunettes - vos yeux ont aussi des lentilles imparfaites! Ignorer le fait que les couleurs primaires pures auront cet effet manque une partie de l'histoire.
David Sainty
@Sainty Comme le montre la réponse d'Ilmari , il s'agit d'un espacement des sous-pixels sur le moniteur. Si vous déplacez votre tête sur le côté, l'espacement apparent des sous-pixels change en conséquence. Et comment l’aberration chromatique produirait-elle du noir? Proposez-vous que l'aberration est si grave que la fréquence de la lumière change pour être en dehors de la région visible du spectre?
David Richerby
@Richerby: D'après la réponse de Candh et certaines enquêtes plus approfondies de ma part, ce n'est pas l'effet qu'il voyait. Cependant, l’aberration chromatique existe et crée des lignes noires - le rouge se décale d’un côté et le vert de l’autre; Pensez aux prismes et à la manière dont ils séparent les couleurs. La partie restante apparaîtra noire, mais à mes yeux (lorsque je portais des lunettes), elle ressemblait davantage au rouge qui "flottait" au-dessus de l'écran.
user295691
0

Ce fil de discussion sur le forum d’Adobe contient de bonnes informations sur les options "Aligner sur la grille de pixels".

Si je me souviens bien, cela peut également être activé dans tout le document via la File > Newboîte de dialogue (tout en bas de la boîte).

Ces experts en moniteur durs sont corrects ou vous avez simplement une divergence créée par le fait que le vecteur ne s’aligne pas correctement sur les pixels de votre moniteur. C’est précisément la raison pour laquelle tant de gens sont enthousiasmés par l’ajout de cette petite case à cocher à Illustrator.

AVLien
la source
3
Les vecteurs sont correctement alignés. Pour vérifier que vous devrez simplement copier-coller l'image dans Photoshop ou dans n'importe quel éditeur d'image, puis effectuer un zoom avant. Il n'y a pas d'antialiasing entre les pixels et pas de pixels à demi-tons.
Elmo Allén
-2

Cela peut être dû à une interaction de couleur. Le rouge et le vert sont des couleurs complémentaires et, placés côte à côte, semblent créer une ligne noire / sombre qui ressemble à un chevauchement. Vous pouvez lire et voir plus d'exemples ici .

Illustrator auto met les formes en place, il ne devrait donc y avoir aucun chevauchement.

tgr
la source
2
Si le phénomène était purement dû à nos yeux, vous verriez la même chose à la limite rouge-vert comme à la limite vert-rouge.
David Richerby
Le rouge et le vert, lorsqu'ils sont placés côte à côte et vus d'une distance suffisante (par exemple, en regardant de petits pixels à quelques pieds de distance), produiront du jaune et non du noir.
Jason C
-2

Si vous activez une option Aligner les nouveaux objets sur la grille de pixels dans le menu d'options de la fenêtre Transformer (celle située dans le coin supérieur droit de toute fenêtre d'options), la propriété alignée en pixels est définie par défaut pour tous les nouveaux objets que vous dessinez. Pour les nouveaux documents créés à l'aide du profil de document Web, cette option est activée par défaut. Pour les objets existants, vous pouvez désactiver l'alignement de la grille de pixels en sélectionnant Aligner sur la grille de pixels dans la fenêtre Transformation (affichée après avoir coché la case Plus d'options dans le menu d' options de la fenêtre).

L'apparence nette des traits alignés sur les pixels est conservée dans la sortie du raster à une résolution de 72 ppp uniquement. Pour d'autres résolutions, il est très probable que de tels accidents vasculaires cérébraux produisent des résultats anti-aliasés.

Les objets alignés en pixels, mais ne comportant aucun segment vertical ou horizontal, ne sont pas modifiés pour s'aligner sur la grille de pixels. Par exemple, dans la mesure où un rectangle tourné ne comporte pas de segments droits verticaux ou horizontaux, il n’est pas incité à produire des tracés nets lorsque la propriété alignée en pixels est définie.

La documentation de Adobe en dit plus long: http://helpx.adobe.com/illustrator/using/drawing-pixel-aligned-paths-web.html

Rahul Chouhan
la source
1
quelle option, exactement?
Candh