두 개의 완벽하게 인접한 사각형이 겹치거나 정확하게 인접하지 않은 것처럼 검은 색 또는 흰색 선을 만드는 이유는 무엇입니까?

나는 평평한 디자인을 가지고 있지만 (물론 예상된다), 모양 사이의 검은 색과 흰색 선은 매우 성가신 일이다.

두 개의 겹치는 사각형 사이에이 선이 있습니까? 어떻게 고칠 수 있습니까? (Photoshop에서이 작업을 만들었지 만 Paint.net 및 Adobe Illustrator를 사용하는 경우 동일한 문제가 발생합니다.) 색상에 문제가 있습니까? 아니면 너무 많이보고 있습니까? :피

Elmo Allén이 올바르게 지적했듯이, 이것은 착시 현상이 그래픽 편집기의 버그가 아니라 사용중인 모니터 기술로 인한 영향입니다.

특히 일반적인 최신 TFT-LCD 컴퓨터 화면에서 각 픽셀은 실제로 색상이 지정된 reg, green 및 blue로 나란히 배열 된 세 개의 개별 하위 픽셀로 구성됩니다.

이러한 각 하위 픽셀은 기본 색상의 빛 중 하나만 생성 할 수 있지만 서로 매우 가깝기 때문에 색상을 볼 때 서로 혼합되어 단색의 환상을 만들어냅니다.

흰색 (또는 회색) 픽셀의 경우 모든 하위 픽셀이 동일하게 조명됩니다. 서로 다른 서브 픽셀의 강도를 서로에 의해 조정함으로써, 다른 색상이 생성 될 수있다. 순수한 빨강, 녹색 또는 파랑 픽셀의 경우 극단적으로 해당 색상을 생성하는 서브 픽셀 만 켜집니다. 따라서 빨강-녹색-빨간색 줄무늬는 서브 픽셀 수준에서 다음과 같이 렌더링됩니다.

여기에서 무슨 일이 일어나고 있는지 알 수 있습니다. 일반적으로 각 조명 사이에 두 개의 어두운 하위 픽셀의 간격이 있지만 색상 사이의 경계에서 간격은 세 개의 하위 픽셀 (어두운 밴드 생성) 또는 하나의 빛 하나).

물론, 화면을 볼 때 일반적으로 발생하는 것처럼 주변 서브 픽셀의 색상이 혼합되면 효과가 더 분명해집니다.

여기에서는 돋보기를 통해 화면을 볼 때 볼 수있는 것을 시뮬레이션하면서 적당량의 흐림 효과 만 적용했습니다. (보십시오!) 왼쪽 경계의 어두운 띠가 여기에 있습니다. 오른쪽 경계의 밝은 띠가 선명하게 나타나지 않지만 이미지가 더 흐려지면 더 두드러집니다.

물론 이러한 시뮬레이션 된 이미지를 신뢰할 필요는 없습니다. 대신, 저렴한 디지털 카메라로 노트북 화면에서 찍은 몇 장의 클로즈업 사진을 포함시켜 질문에 이미지를 표시하겠습니다.

시뮬레이션 된 이미지에서와 같이 어두운 선은 매우 분명합니다. 밝은 선은 그다지 밝지 않습니다. 아마도 점등 된 것 사이에 여전히 하나의 어두운 서브 픽셀이 있기 때문에 명확한 단일 강도 피크가 없기 때문입니다.

이 문제를 해결하기 위해 무엇을 할 수 있습니까?

원칙적으로이 효과는 문제가되는 트랜지션을 감지하고 트랜지션을 부드럽게하기 위해 색상이 서로 약간 번짐으로써 모니터가 자동으로 보정 할 수있는 것입니다. 그러나 이로 인해 더 많은 복잡성과 비용이 발생하기 때문에 대부분의 모니터 제조업체가 귀찮게하지 않습니다.

그러나 대비가 높은 색상 필드 사이에 중간 색상 (예 : 노란색, 빨간색 및 녹색의 경우)의 좁은 스트라이프를 추가하여 동일한 결과를 직접 얻을 수 있습니다. 이 스트라이프의 색상은 디스플레이 감마 를 고려 하여 주변 색상 의 평균 휘도 와 대략 일치해야 합니다.

모든 사람이 이미지를 볼 수있는 자체 디스플레이를 가지고 있기 때문에 모든 사람이 여기에서 보는 것을 정확하게 만드는 것은 어렵습니다. 모니터에서 곁눈질하면 왼쪽 빨간색 사각형과 녹색 중간 사각형 사이에 매우 얇은 검은 선이 보입니다. 반면 오른쪽과 중간 사이에는 매우 얇은 흰색 선이 보입니다. 기본적으로, 나는 원래의 포스터가 그들이 이것을 보는 것을 의미한다는 것을 이해합니다.

질문 의견에서 제안한 마하 밴드 가 아닙니다 . 마하 밴드는 다른 크롬 색상 사이에서 태어나지 않고 다른 조명 색상 사이에서 (예 : 두 가지 회색 음영 사이) 태어납니다. 모니터의 모든 빨간색 (RGB 255-0-0)이 전체 녹색 (RGB 0-255-0)보다 약간 밝지 않기 때문에 빨간색 사각형의 오른쪽에 아주 희미한 마하 밴드가 만들어집니다. 잘). (원래 이미지의 색상이 순수한 빨강 또는 녹색이 아니더라도 인식되는 밝기의 차이는 거의 동일합니다.) 기본적으로 마하 밴드는 다음과 같이 표시됩니다 (매우 과장).

그러나 마하 밴드는 흰색 또는 검은 색가는 선을 만들 수 없습니다. 넓은 영역에서 관찰 된 밝기에 약간의 차이 만 발생합니다. 그리고 마하 밴드는 항상 대칭입니다 : 빨강에서 초록은 초록에서 빨강과 같습니다. 그러나 이것은 비대칭입니다. 다른 경계는 검은 색이고 다른 경계는 흰색입니다.

대신, 여기에 보이는 시각적 인공물은 LCD 서브 픽셀 배열 때문입니다 . 가장 일반적인 배열은 왼쪽에서 오른쪽으로 빨강-녹색-파랑입니다. 따라서 각각의 전체 적색 픽셀 사이에는 꺼진 녹색 서브 픽셀과 꺼진 파란색 서브 픽셀이 있습니다. 완전 빨간색 픽셀과 완전 녹색 픽셀 사이에는 녹색, 파란색 및 빨간색의 세 가지 꺼짐 서브 픽셀이 있습니다. 이것은 빨강과 초록 사이에가는 검은 선의 효과를 만듭니다. 아래 이미지와 같이 :

이제 녹색 사각형의 다른쪽에는 먼저 녹색 불이 켜진 서브 픽셀, 꺼진 파란색 서브 픽셀이 있고 빨간색 픽셀이 있습니다. 이제 조명 녹색과 적색 서브 픽셀 사이에 단지가 하나의 검은 색 서브 픽셀. 이것은 녹색과 적색 경계 사이에서 매우가는 밝은 선의 효과를 만듭니다. 아래와 같이 :

모니터에서 서브 픽셀을 보려면 돋보기가 필요할 것입니다. 노먼의 인간 시력은 별도의 픽셀을 볼 수있는 아주 가까운 거리에 초점을 맞출 수 없습니다. 그러나 약간의 밝기 차이를 발견하는 것이 매우 좋습니다.

이제 이론이 올바른지 증명하기 위해 왼쪽 빨간색 사각형과 녹색 사각형 사이에 RGB 128-255-0의 1px 너비의 선을 추가하고 검은 색 선이 희미 해졌는지 확인할 수 있습니다. 격차. 또한 녹색과 오른쪽 빨간색 사각형 사이에 1px 너비의 RGB 85-85-0을 시도하여 하위 픽셀을 약간 어둡게 할 수 있습니다. 불행히도, 이것은 실제 디자인에 사용될 수 없습니다. 첫째, 적 녹청 서브 픽셀 배열에 의존하고 동시에 색상 경계가 약간 얼룩 져 있기 때문입니다.

또한, 화면 선명 화 알고리즘이 발생할 가능성이 있습니다. 기본적으로 모니터 선명 화는 가장자리의 밝은쪽에 흰색을 추가하고 어두운 쪽에서는 검은 색으로 어둡게하여 모든 색상 가장자리를 더욱 두드러지게 만듭니다. 이것은 마하 밴드 효과와 비슷하지만 훨씬 좁고 일반적으로 더 두드러집니다. 이것은 디스플레이의 선명도 설정을 조정하고 (가능하면) 효과가 감소하는지 확인하면 알 수 있습니다.

이것은 색이 모일 때 색의 본질입니다. 인간의 눈은 색을 인식하기 위해 단순화하는 경향이 있습니다.

"Mach Bands Illusion"이라고하는이 현상은 Value에서 다른 두 가지 색상으로 나타납니다. 색조 나 채도가 아닙니다. 첨부 된 다이어그램은 동일한 착시가 회색으로 나타나는 것을 보여줍니다. 밝은 회색은 중간의 어두운 색에 비해 더 밝아지고 가운데 회색은 오른쪽의 오른쪽 어두운 회색 가장자리 옆에 밝게 나타납니다. 그리고 또 다른 한사람도.

중요한 경우 두 가지 옵션이 있습니다.

1. 동일한 블랙 비율을 가진 두 가지 색상을 선택하면 환상이 줄어 듭니다.
2. 두 색 사이에 회색의 작은 선을 추가하여 두 눈의 평균 회색이 그 색에 추가되어 "눈을 속일"수 있습니다. 아래 결과를 참조하십시오. 상단 스트립이 하단 스트립보다 착각이 적다는 것을 인식 할 수 있습니다.

확신 할 수 없지만 안경을 쓰고 있다면 문제가있는 곳입니다. 빨간색과 녹색이 분리되는 색수차 가 가장 많이 나타납니다 .

안경이 두꺼울수록 효과가 더욱 두드러집니다. 머리를 돌리고 컬러 블록이 움직이는 것을보십시오. 안경의 가장자리를 향해 움직일 때 안경이 두꺼워 져 분리가 더 커집니다.

Adobe 포럼의이 스레드 는 "픽셀 격자에 정렬"옵션의 위치를 ​​잘 보여줍니다.

올바르게 기억한다면 File > New대화 상자 를 통해 문서 전체에서 활성화 할 수도 있습니다 (상자 맨 아래).

이러한 하드 코어 모니터 전문가가 정확하거나 벡터가 모니터의 픽셀에 올바르게 정렬되지 않아 생성 된 불일치가 있습니다. 이것이 바로 많은 사람들이 Illustrator에 추가되는이 작은 확인란에 대해 흥분하는 이유입니다.

색상 상호 작용 때문일 수 있습니다. 빨강과 초록은 보색이며, 나란히 놓으면 겹치는 것처럼 보이는 검은 색 / 짙은 선이 나타납니다. 여기에서 더 많은 예제를 읽고 볼 수 있습니다 .

Illustrator는 도형을 제자리에 자동으로 맞추므로 겹치는 문제가 없어야합니다.

변형 창의 옵션 메뉴 (옵션 창의 오른쪽 상단 모서리에있는) 에서 새 객체를 픽셀 격자 에 정렬 옵션을 활성화 하면 그리는 새 객체에 기본적으로 픽셀 정렬 속성이 설정됩니다. 웹 문서 프로필을 사용하여 만든 새 문서의 경우이 옵션은 기본적으로 활성화되어 있습니다. 기존 개체의 경우 선택하여 픽셀 격자 정렬을 해제 할 수 있습니다 그리드를 픽셀에 정렬을 에 변환 (에 똑딱 후 표시 창 자체에 더 많은 옵션 창의 옵션 메뉴에서).

픽셀 정렬 스트로크의 선명한 모양은 래스터 출력에서 ​​72ppi의 해상도로 유지됩니다. 다른 해상도의 경우 이러한 스트로크가 앤티 앨리어싱 결과를 생성 할 가능성이 높습니다.

픽셀로 정렬되었지만 수직 또는 수평 세그먼트가없는 객체는 픽셀 격자에 맞게 수정되지 않습니다. 예를 들어 회전 된 사각형에는 수직 또는 수평 세그먼트가 없기 때문에 픽셀 정렬 속성이 설정된 경우 선명한 경로를 생성하도록 조금 이동하지 않습니다.

이 Adobe 설명서는보다 광범위하게 설명합니다. http://helpx.adobe.com/illustrator/using/drawing-pixel-aligned-paths-web.html