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

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:

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

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:

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:

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:

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é:

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 .

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é):

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é):

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:

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:

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.

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.

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.

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.

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.

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.

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