Perché due rettangoli perfettamente adiacenti creano linee nere o bianche in mezzo come se fossero sovrapposte o non esattamente adiacenti?

Ho un design piatto (beh, dovrebbe essere), ma queste linee in bianco e nero tra le forme sono così fastidiose ... [nessun tratto] dai un'occhiata:

Vedi queste linee tra due rettangoli sovrapposti? Come posso ripararlo? (L'ho creato con Photoshop, ma c'è lo stesso problema con Paint.net e Adobe Illustrator) È qualcosa con il colore? O sto vedendo troppo? : P

Come osserva correttamente Elmo Allén, questa non è né un'illusione ottica né un bug nel tuo editor grafico, ma un effetto causato dalla tecnologia di monitoraggio che stai utilizzando.

In particolare, su un tipico schermo TFT-LCD moderno , ogni pixel è in realtà composto da tre subpixel separati disposti uno accanto all'altro, rispettivamente colorati, verde e blu:

Ognuno di questi subpixel può produrre solo uno dei colori primari della luce, ma, poiché sono molto vicini tra loro, i loro colori si fondono insieme quando li guardi, producendo l'illusione del colore solido.

Per un pixel bianco (o grigio), tutti i subpixel sono ugualmente illuminati. Regolando l'intensità dei diversi subpixel l'uno rispetto all'altro, è possibile produrre colori diversi. All'estremo, per un pixel rosso, verde o blu puro, vengono attivati ​​solo i sottopixel che producono quel colore. Pertanto, la tua striscia rosso-verde-rossa sarà, a livello di subpixel, renderizzata in questo modo:

Qui puoi iniziare a vedere cosa sta succedendo: di solito c'è uno spazio di due subpixel scuri tra ciascuno illuminato, ma ai confini tra i colori, lo spazio è di tre subpixel (creando una banda scura) o solo uno (creando un uno leggero).

Certo, l'effetto è più evidente quando i colori dei subpixel vicini vengono mescolati insieme, come normalmente accade quando si guarda lo schermo:

Qui, ho applicato solo una moderata quantità di sfocatura, simulando ciò che potresti vedere se, ad esempio, guardassi il tuo schermo attraverso una lente d'ingrandimento. (Provalo!) La banda scura al limite sinistro è ovvia qui; la banda luminosa al limite destro non appare così chiaramente, ma diventerebbe più evidente se l'immagine fosse ulteriormente sfocata.

Naturalmente, non devi fidarti di queste immagini simulate. Consentitemi invece di includere un paio di foto ravvicinate che ho scattato sullo schermo del mio laptop, mostrando l'immagine nella vostra domanda, con una fotocamera digitale economica:

Come nell'immagine simulata, la linea scura è molto evidente; la linea luminosa è meno, forse perché c'è ancora un sottopixel scuro tra quelli illuminati, quindi non c'è un picco così chiaro a intensità singola.

Cosa puoi fare per risolvere questo problema?

In linea di principio, questo effetto è qualcosa che il tuo monitor potrebbe compensare automaticamente, ad esempio rilevando tali transizioni problematiche e lasciando che i colori si spargano leggermente l'uno nell'altro per ammorbidire la transizione. Ciò aggiungerebbe maggiore complessità e costi, tuttavia, motivo per cui la maggior parte dei produttori di monitor non si preoccupa.

Tuttavia, puoi ottenere tu stesso lo stesso risultato aggiungendo una striscia stretta di un colore intermedio (ad esempio giallo, per rosso e verde) tra campi di colore così contrastanti. Il colore di questa striscia dovrebbe corrispondere approssimativamente alla luminanza media dei colori circostanti, tenendo conto della gamma di visualizzazione .

È difficile fare esattamente ciò che tutti vedono qui, perché ognuno ha il proprio display per vedere l'immagine. Sul mio monitor, se socchiudo gli occhi, potrei vedere una linea nera molto sottile tra il rettangolo rosso sinistro e il rettangolo centrale verde. E al contrario, tra il rosso e il centro a destra, vedo una linea bianca molto sottile. Fondamentalmente, capisco che il poster originale significa che vedono questo (esagerato):

Queste non sono bande di Mach , come suggerito nei commenti alla domanda. Le bande Mach non nascono tra colori con cromie diverse, ma tra colori con luci diverse (ad es. Tra due tonalità di grigio). Una banda Mach molto debole viene creata nella parte destra del rettangolo rosso, perché il rosso pieno (RGB 255-0-0) è leggermente meno luminoso del verde pieno (RGB 0-255-0) sul mio monitor (e su tutti i monitor sRGB come bene). (Anche se i colori dell'immagine originale non sono rosso o verde puro, la differenza nella loro leggerezza percepita è approssimativamente la stessa.) Fondamentalmente, le bande Mach mostrano in questo modo (di nuovo, altamente esagerate):

Ma le bande Mach non possono creare linee sottili bianche o nere. Creano solo una leggera differenza nella luminosità osservata su una vasta area. E le bande Mach sono sempre simmetriche: il rosso-verde è uguale al verde-rosso. Ma questo è asimmetrico: l'altro limite è nero e l'altro è bianco.

Invece, ciò che l'artefatto visivo che vediamo qui è a causa della disposizione dei sub-pixel LCD . La disposizione più comune è rosso-verde-blu da sinistra a destra. Quindi tra ogni pixel rosso pieno ci sono un subpixel verde spento e un subpixel blu spento. Tra un pixel rosso pieno e un pixel verde pieno, invece, ci sono tre subpixel disattivati: verde, blu e rosso. Questo crea un effetto di una sottile linea nera tra il rosso e il verde. Come nell'immagine qui sotto:

Ora sull'altro lato del rettangolo verde, c'è prima un subpixel verde acceso, un subpixel blu spento e poi uno rosso. Ora tra i subpixel verde e rosso illuminati c'è solo un subpixel nero. Questo crea un effetto di una linea luminosa molto sottile che corre tra il confine verde e rosso. Come sotto:

Per vedere i subpixel sul monitor, probabilmente avrai bisogno di una lente d'ingrandimento. La vista umana normanna non può concentrarsi su una distanza così ravvicinata in cui si vedrebbero i pixel separati. Tuttavia, è molto buono nel riconoscere quella leggera differenza di luminosità.

Ora, per dimostrare la teoria corretta, potresti aggiungere ad esempio una linea larga 1 px di RGB 128-255-0 tra il rettangolo rosso sinistro e il rettangolo verde e vedere se la linea nera svanisce, perché questo aggiunge un po 'di luce verde subpixel prima il divario. Inoltre potresti provare ad esempio un RGB 85-85-0 largo 1 px tra il rettangolo verde e il rettangolo rosso destro, per attenuare leggermente i pixel secondari. Sfortunatamente, questo non può essere utilizzato nel design reale, perché in primo luogo dipende dalla disposizione dei subpixel rosso-verde-blu e allo stesso tempo rende il bordo del colore un po 'macchiato.

Inoltre, esiste la possibilità che avvenga un algoritmo di nitidezza dello schermo. Fondamentalmente, la nitidezza del monitor rende tutti i bordi dei colori più prominenti, aggiungendo bianco al lato più luminoso del bordo e attenuandolo al nero sul lato più scuro. Questo è molto simile all'effetto della banda Mach, ma molto più stretto e di solito più prominente. Questo può essere scoperto regolando l'impostazione della nitidezza del display (si spera possibile) e vedendo se l'effetto è ridotto.

Questa è la natura dei colori quando si incontrano. L'occhio umano tende a semplificare per chiarire le cose .. e le illusioni ottiche causate dalla nostra percezione dei colori.

questo fenomeno che si chiama "Mach Bands Illusion" appare con due colori diversi in Valore. non nella tonalità né nella saturazione. e il mio diagramma allegato mostra che la stessa illusione si presenta nei colori grigi. il grigio più chiaro sarà più chiaro rispetto a quello più scuro nel mezzo e il grigio medio appare più chiaro accanto al bordo del grigio scuro destro a destra. E così uno.

se è importante per te, hai due opzioni.

1. scegliere due colori con lo stesso rapporto di nero assicurerà di ridurre l'illusione
2. puoi "ingannare l'occhio" aggiungendo una piccola linea grigia tra i due colori che hanno il grigio medio dei due grigi in quei colori. vedere il risultato di seguito. potresti riconoscere che la striscia superiore è meno nell'illusione di quella inferiore.

Non posso esserne certo, ma se indossi gli occhiali, è qui che sta il problema. Molto probabilmente stai vedendo un'aberrazione cromatica , in cui i rossi e i verdi si stanno separando.

Più spessi sono i tuoi occhiali, più pronunciato sarà l'effetto. Prova a girare la testa e osserva i blocchi di colore muoversi: mentre ti sposti verso il bordo degli occhiali, i tuoi occhiali saranno più spessi e quindi causeranno una maggiore separazione.

Questa discussione sul forum di Adobe ha un buon punto su dove sono le opzioni "Allinea alla griglia di pixel".

Se ricordo bene, questo può anche essere abilitato a livello di documento tramite la File > Newfinestra di dialogo (in fondo alla finestra).

O questi esperti di monitor hard-core sono corretti o hai solo una discrepanza creata dal vettore che non si allinea ai pixel del monitor in modo corretto. Questo è esattamente il motivo per cui così tante persone sono entusiaste dell'aggiunta di questa piccola casella di controllo a Illustrator.

Ciò potrebbe essere dovuto all'interazione del colore. Il rosso e il verde sono colori complementari e quando affiancati sembrano creare una linea nera / scura che sembra una sovrapposizione. Puoi leggere e vedere altri esempi qui .

Illustrator inserisce automaticamente le forme in posizione, quindi non dovrebbero esserci problemi di sovrapposizione.

Se si abilita un'opzione Allinea nuovi oggetti alla griglia pixel nel menu delle opzioni della finestra Trasforma (quello nell'angolo in alto a destra di qualsiasi finestra delle opzioni), tutti i nuovi oggetti disegnati hanno la proprietà allineata pixel impostata per impostazione predefinita. Per i nuovi documenti creati utilizzando il profilo del documento Web, questa opzione è abilitata per impostazione predefinita. Per gli oggetti esistenti, puoi disattivare l'allineamento della griglia dei pixel selezionando Allinea alla griglia dei pixel nella finestra Trasforma stessa (visualizzata dopo aver spuntato Altre opzioni nel menu delle opzioni della finestra).

L'aspetto nitido dei tratti allineati ai pixel viene mantenuto nell'output raster con una risoluzione di soli 72 ppi. Per altre risoluzioni, esiste un'alta possibilità che tali tratti producano risultati anti-alias.

Gli oggetti allineati ai pixel, ma senza segmenti verticali o orizzontali diritti, non vengono modificati per allinearli alla griglia dei pixel. Ad esempio, poiché un rettangolo ruotato non ha segmenti verticali o orizzontali diritti, non viene spostato per produrre percorsi nitidi, quando la proprietà allineata ai pixel è impostata per esso.

Questa documentazione di Adobe lo dice in modo più ampio: http://helpx.adobe.com/illustrator/using/drawing-pixel-aligned-paths-web.html