¿Por qué dos rectángulos perfectamente adyacentes crean líneas negras o blancas en el medio como si se superpusieran o no fueran exactamente adyacentes?

Tengo un diseño plano (bueno, se supone que debe ser), pero estas líneas en blanco y negro entre las formas son muy molestas ... [sin trazo] eche un vistazo:

¿Ves estas líneas entre dos rectángulos superpuestos? ¿Cómo puedo arreglarlo? (Creé esto con Photoshop, pero hay el mismo problema con Paint.net y Adobe Illustrator) ¿Es algo con el color? ¿O estoy viendo demasiado? :PAGS

Como Elmo Allén señala correctamente, esto no es ni una ilusión óptica ni un error en su editor de gráficos, sino un efecto causado por la tecnología de monitor que está utilizando.

Específicamente, en una pantalla de computadora TFT-LCD moderna típica , cada píxel se compone de tres subpíxeles separados dispuestos uno al lado del otro, respectivamente, color, verde y azul:

Cada uno de estos subpíxeles solo puede producir uno de los colores primarios de luz, pero, dado que están muy juntos, sus colores se mezclan cuando los miras, produciendo la ilusión de un color sólido.

Para un píxel blanco (o gris), todos los subpíxeles están igualmente iluminados. Al ajustar la intensidad de los diferentes subpíxeles entre sí, se pueden producir diferentes colores. En el extremo, para un píxel rojo, verde o azul puro, solo se activan los subpíxeles que producen ese color. Por lo tanto, su franja roja-verde-roja, en el nivel de subpíxeles, se representará de la siguiente manera:

Aquí, puede comenzar a ver lo que está sucediendo: generalmente hay un espacio de dos subpíxeles oscuros entre cada uno iluminado, pero en los límites entre los colores, el espacio es de tres subpíxeles (creando una banda oscura) o solo uno (creando un luz uno).

Por supuesto, el efecto es más obvio cuando los colores de los subpíxeles cercanos se mezclan, como sucede normalmente cuando miras la pantalla:

Aquí, he aplicado solo una cantidad moderada de desenfoque, simulando lo que podría ver si, por ejemplo, mirara su pantalla a través de una lupa. (¡Pruébelo!) La banda oscura en el límite izquierdo es obvia aquí; la banda brillante en el límite de la derecha no se muestra con tanta claridad, pero se volvería más notable si la imagen se volviera borrosa.

Por supuesto, no tiene que confiar en estas imágenes simuladas. En cambio, permítanme incluir un par de fotos en primer plano que tomé de la pantalla de mi computadora portátil, mostrando la imagen en su pregunta, con una cámara digital barata:

Como en la imagen simulada, la línea oscura es muy obvia; la línea brillante es menos, quizás porque todavía hay un subpíxel oscuro entre los iluminados, por lo que no hay un pico de intensidad tan claro.

¿Qué puedes hacer para arreglar esto?

En principio, este efecto es algo que su monitor podría compensar automáticamente, por ejemplo, detectando transiciones problemáticas y dejando que los colores se desvanezcan entre sí para suavizar la transición. Sin embargo, esto agregaría más complejidad y costo, razón por la cual la mayoría de los fabricantes de monitores no se molestan.

Sin embargo, puede lograr el mismo resultado usted mismo agregando una franja estrecha de un color intermedio (por ejemplo, amarillo, rojo y verde) entre estos campos de color altamente contrastantes. El color de esta franja debe coincidir aproximadamente con la luminosidad promedio de los colores circundantes, teniendo en cuenta la gama de visualización .

Es difícil hacer exactamente lo que todos ven aquí, porque todos tienen su propia pantalla para ver la imagen. En mi monitor, si entrecierro los ojos, podría ver una línea negra muy delgada entre el rectángulo rojo izquierdo y el rectángulo verde central. Y en contraste, entre el rojo derecho y el medio, veo una línea blanca muy delgada. Básicamente, entiendo que el póster original significa que ven esto (exagerado):

Estas no son bandas de Mach , como se sugiere en los comentarios de la pregunta. Las bandas de Mach no nacen entre colores cromados diferentes, sino entre colores con diferentes luces (p. Ej., Entre dos tonos de gris). Se crea una banda Mach muy tenue en el lado derecho del rectángulo rojo, porque el rojo completo (RGB 255-0-0) es ligeramente menos brillante que el verde completo (RGB 0-255-0) en mi monitor (y en todos los monitores sRGB como bien). (Aunque los colores de la imagen original no son rojo o verde puro, la diferencia en su ligereza percibida es aproximadamente la misma). Básicamente, las bandas de Mach se muestran así (de nuevo, muy exageradas):

Pero las bandas de Mach no pueden crear líneas finas blancas o negras. Solo crean una ligera diferencia en el brillo observado en un área amplia. Y las bandas de Mach siempre son simétricas: rojo a verde es lo mismo que verde a rojo. Pero esto es asimétrico: otro límite es negro y otro es blanco.

En cambio, el artefacto visual que vemos aquí se debe a la disposición de los subpíxeles de la pantalla LCD . El arreglo más habitual es Rojo-Verde-Azul de izquierda a derecha. Entonces, entre cada píxel rojo completo hay un subpíxel verde apagado y un subpíxel azul apagado. Entre un píxel rojo completo y un píxel verde completo, en cambio, hay tres subpíxeles apagados: verde, azul y rojo. Esto crea un efecto de una delgada línea negra entre el rojo y el verde. Como en la imagen de abajo:

Ahora en el otro lado del rectángulo verde, primero hay un subpíxel verde iluminado, un subpíxel azul apagado y luego uno rojo. Ahora, entre los subpíxeles verdes y rojos iluminados, solo hay un subpíxel negro. Esto crea el efecto de una línea brillante muy delgada que se extiende entre el límite verde y el rojo. Como a continuación:

Para ver los subpíxeles en su monitor, probablemente necesitará una lupa. La vista humana normanda no puede enfocarse en una distancia tan cercana donde vería los píxeles separados. Sin embargo, es muy bueno para detectar esa ligera diferencia de brillo.

Ahora, para demostrar que la teoría es correcta, podría agregar, por ejemplo, una línea de 1 px de ancho de RGB 128-255-0 entre el rectángulo rojo izquierdo y el rectángulo verde y ver si la línea negra se desvanece, porque esto agrega un poco de luz verde de subpíxeles antes el hueco. También puede intentar, por ejemplo, un RGB 85-85-0 de 1 px de ancho entre el rectángulo rojo verde y el derecho, para atenuar un poco los subpíxeles. Desafortunadamente, esto no se puede usar en el diseño real, porque en primer lugar depende de la disposición de subpíxeles rojo-verde-azul y al mismo tiempo hace que el borde de color esté un poco manchado.

Además, existe la posibilidad de que tenga lugar un algoritmo de nitidez de pantalla. Básicamente, la nitidez del monitor hace que todos los bordes de color sean más prominentes, agregando blanco al lado más brillante del borde y atenuando al negro en el lado más oscuro. Esto es muy parecido al efecto de banda Mach, pero mucho más estrecho y generalmente más prominente. Esto puede descubrirse ajustando la configuración de nitidez de la pantalla (con suerte posible) y viendo si el efecto se reduce.

Esta es la naturaleza de los colores cuando se unen. El ojo humano tiende a la simplificación para aclarar las cosas ... y las ilusiones ópticas causadas por nuestra percepción de los colores.

Este fenómeno que se llama "Mach Bands Illusion" aparece con dos colores diferentes en valor. No en el tono ni en la saturación. y mi diagrama adjunto muestra que la misma ilusión ocurre en colores grises. el gris más claro será más claro en comparación con el más oscuro en el medio y el gris medio aparece más claro junto al borde del gris oscuro derecho a la derecha. Y así uno.

si es importante para usted, entonces tiene dos opciones.

1. elegir dos colores que tengan la misma proporción de negro, esto asegurará disminuir la ilusión
2. puede "engañar al ojo" agregando una pequeña línea gris entre los dos colores que tienen el gris promedio de los dos grises en esos colores. ver el resultado a continuación. Puede reconocer que la tira superior tiene menos ilusión que la inferior.

No puedo estar seguro, pero si usa anteojos, ahí es donde radicará el problema. Lo más probable es que veas una aberración cromática , en la que los rojos y los verdes se separan.

Cuanto más gruesas sean tus gafas, más pronunciado será el efecto. Intenta girar la cabeza y observa cómo se mueven los bloques de color: a medida que te mueves hacia el borde de tus gafas, tus gafas serán más gruesas y, por lo tanto, causarán una mayor separación.

Este hilo en el foro de Adobe tiene un poco sobre dónde están las opciones de "Alinear a la cuadrícula de píxeles".

Si no recuerdo mal, esto también se puede habilitar en todo el documento a través del File > Newcuadro de diálogo (en la parte inferior del cuadro).

O bien estos expertos en monitores de núcleo duro son correctos, o simplemente tiene una discrepancia creada por el vector que no se alinea correctamente con los píxeles de su monitor. Esta es precisamente la razón por la que tanta gente está entusiasmada con esta pequeña casilla de verificación que se agrega a Illustrator.

Esto podría deberse a la interacción del color. El rojo y el verde son colores complementarios y cuando se colocan uno al lado del otro parecen crear una línea negra / oscura que parece una superposición. Puedes leer y ver más ejemplos aquí .

Illustrator ajusta automáticamente las formas en su lugar, por lo que no debería haber ningún problema de superposición que ocurra allí.

Si habilita una opción Alinear nuevos objetos a la cuadrícula de píxeles en el menú de opciones de la ventana Transformar (el que está en la esquina superior derecha de cualquier ventana de opciones), los objetos nuevos que dibuje tienen la propiedad alineada con píxeles establecida de forma predeterminada. Para los nuevos documentos creados con el perfil de documentos web, esta opción está habilitada de manera predeterminada. Para los objetos existentes, puede desactivar la alineación de la cuadrícula de píxeles seleccionando Alinear a la cuadrícula de píxeles en la ventana Transformar (se muestra después de marcar Más opciones en el menú de opciones de la ventana).

La apariencia nítida de los trazos alineados con píxeles se mantiene en la salida de trama a una resolución de solo 72 ppp solamente. Para otras resoluciones, existe una alta posibilidad de que dichos trazos produzcan resultados suavizados.

Los objetos que están alineados con píxeles, pero que no tienen segmentos verticales u horizontales rectos, no se modifican para alinearse con la cuadrícula de píxeles. Por ejemplo, debido a que un rectángulo girado no tiene segmentos rectos verticales u horizontales, no se empuja para producir trazos nítidos, cuando se establece la propiedad alineada con píxeles.

La documentación de Adobe lo explica más ampliamente: http://helpx.adobe.com/illustrator/using/drawing-pixel-aligned-paths-web.html