신문 사진을 자세히 보면 다른 크기의 검은 점으로 떨어져 나간다. 첫 번째 매킨토시의 스크린 샷을 보면 회색 하늘이 흑백 픽셀의 분산으로 밝혀졌다. 게임 보이 스프라이트와 녹색의 네 가지 음영을 보면 어떻게 든 얼굴을 그립니다. 그 디스플레이 나 프레스 중 어느 것도 부드러운 그라데이션을 보여줄 수 없으며 모두 같은 방식으로 가짜입니다: 몇 가지 사용 가능한 색상을 패턴으로 배열하면 눈의 평균이 톤으로 돌아갑니다.
그 기술은 디더링입니다. 이 가이드는 그것이 존재하는 이유,주요 알고리즘이 사용하는 산술에서 어떻게 다른지,디더 도구의 설정이 어떻게 변경되는지,스크린이나 인쇄를 위해 깨끗한 출력을 얻는 방법을 설명합니다. 작업 된 예제는 다음을 사용합니다 Toolz 이미지 디더링 도구그리고 숫자는 실행되는 것과 동일한 공식에서 나옵니다.
TL;DR: 디더링은 눈이 중간 톤으로 혼합되는 패턴에 점을 배치하여 작은 팔레트,종종 단지 두 가지 색상으로 연속 톤 이미지를 재현합니다. Ordered dithering (Bayer) 은 각 픽셀을 고정 임계 행렬과 비교하고 규칙적인 크로스 해치를 제공합니다. 오류 확산 (Floyd-Steinberg,Atkinson) 은 각 픽셀 & # 39;s 반올림 오류를보다 유기적 인 곡물을 위해 이웃으로 밀어 넣습니다. 하프톤은 인쇄와 같이 회전 된 화면을 따라 도트 크기를 변경합니다. The 이미지 디더링 도구 여섯 가지 모드, 복고풍 팔레트, 최대 8 배의 PNG 내보내기 및 진정한 벡터 SVG, 모든 클라이언트 측, 무료, 가입 없음 제공.
이미지 디더링이란?
이미지 디더링은 작은 패턴으로 나타낼 수 있는 색상을 혼합하여 팔레트가 직접 표현할 수 없는 톤을 표시하는 방법입니다. 흑백 프린터는 50% 회색을 인쇄할 수 없지만 일반적인 시야 거리에서 회색으로 보이는 흑백 점으로 구성된 바둑판을 인쇄할 수 있습니다.
그것이 해결하는 문제는 양자화라고 불립니다. 모든 픽셀은 사용 가능한 팔레트에서 가장 가까운 색상으로 반올림되어야 합니다. 디더링 없이 흑백으로 축소된 사진은 단단한 실루엣만 유지합니다: 중간 회색보다 밝은 모든 것이 흰색으로 변하고 어두운 모든 것이 검은색으로 변합니다. 그라데이션이 사라집니다. 디더링으로 인해 반올림은 여전히 픽셀 단위로 발생하지만 오류는 패턴에 의해 분산되거나 오프셋되므로 각 영역의 어두운 점 밀도는 원본에서 해당 영역이 얼마나 어두운지 추적합니다.
다른 알고리즘은 그 오류를 다른 방식으로 퍼뜨리고,각자가 남기는 패턴은 시각적 서명입니다. 그렇기 때문에 "dithered"는 오래된 PC 게임의 깔끔한 크로스 해치,MacPaint 의 거친 질감 또는 스크린 인쇄 포스터의 둥근 점을 의미 할 수 있습니다.
디더링 알고리즘은 어떻게 다른가요?
두 가족이 있다. 디더링을 명령했습니다 고정된 임계값 패턴의 위치와 비교하여 각 픽셀을 독립적으로 결정합니다. 오류 확산 픽셀을 순서대로 결정하고 각 반올림 오류를 아직 처리되지 않은 픽셀로 전달합니다. 하프토닝은 도트 배치가 아닌 도트 크기를 변경하는 인쇄 파생 상대입니다.
| 도구에서 모드 | 가족 | 그것이 결정하는 방법 | 보세요 | 좋은 |
|---|---|---|---|---|
| 바이엘 4x4 | 주문했다 | 톤을 4x4 임계값 행렬과 비교합니다 | 일반 크로스해치, 눈에 보이는 패턴 | 레트로 게임과 초기 PC 스타일, 포스터 |
| 앳킨슨 | 오류 확산 | 오류의 3/4 을 6 개의 이웃에게 푸시합니다 | 고대비, 폭발적인 하이라이트 | 1984년 매킨토시 룩, 펀치가 가미된 초상화 |
| 플로이드-스타인버그 | 오류 확산 | 오류를 모두 네 이웃에게 푸시합니다 | 미세한 유기농 곡물, 가장 충실한 톤 | 세부 사항이 중요한 사진 |
| 하프톤 | 진폭 변조 스크린 | 점 반경은 회전된 그리드에서 어둠과 함께 커집니다 | 각도로 둥근 점 | 인쇄 스타일의 포스터, 만화 및 팝 아트 |
| 사이버 글리치 | 팔레트 스냅 플러스 변위 | 블록당 가장 가까운 팔레트 색상, 이동된 스캔라인 | 수평 눈물과 다채로운 블록 | 양식화된 멀티 컬러 아트 |
| 하드 1비트 | 임계값 | 톤이 128 미만인 경우 어둡습니다 | 디더링 없음, 순수한 실루엣 | 로고, 라인 아트, 스텐실 |
다음 섹션에서는 모든 모드가 공유하는 톤 값부터 시작하여 실수로 산술을 살펴봅니다.
디더링 전에 pixel's 톤은 어떻게 계산되나요?
어떤 패턴이 적용되기 전에 각 픽셀은 0 (검은색) 에서 255 (흰색) 까지의 단일 밝기 값으로 변환됩니다. 도구는 루마 가중치를 사용합니다 ITU-R 권장사항 BT.601인간의 시각이 가장 민감하기 때문에 녹색에 가장 큰 비중을 두는 것은 다음과 같습니다:
luma = 0.299 R + 0.587 G + 0.114 B + brightness
curved = ((luma / 255 - 0.5) x contrast + 0.5) x 255 clamped to 0..255
밝기 슬라이더는 모든 픽셀을 -100 에서 +100 으로 이동시킵니다. 기본값이 1,4 인 대비 곡선 슬라이더 0,5 에서 3 은 중간 회색에서 톤을 멀리 늘립니다.
작업 예: 기본 설정의 중간 회색 픽셀 RGB(100, 100, 100).
luma = 0.299(100) + 0.587(100) + 0.114(100) + 0 = 100
curved = ((100 / 255 - 0.5) x 1.4 + 0.5) x 255
= ((0.39216 - 0.5) x 1.4 + 0.5) x 255
= (-0.15098 + 0.5) x 255
= 89.0
그래서 기본 대비는 이 회색을 더 어둡게,100 에서 약 89 로 밀어냅니다. 정확히 128 에 있는 픽셀은 거의 움직이지 않고,180 에 있는 픽셀은 더 가볍게 움직입니다. 대비가 높아지면 퍼지는 것이 넓어지며,이는 중간 톤이 적고 점 패턴이 더 굵어진다는 것을 의미합니다.
바이엘은 디더링 작업을 어떻게 지시했나요?
바이엘 디더링은 이미지 전체에 문턱의 작은 매트릭스를 타일링하고,그 톤이 그 위치에서 문턱 아래로 떨어질 때 픽셀을 어둡게 표시합니다. 매트릭스는 문턱이 타일 전체에 가능한 한 균등하게 퍼지도록 배열되어 있으며,브라이스 바이어가 1973 년에 발표한 배열 도구는 0-255 로 스케일링된 4x4 버전을 사용합니다:
0 128 32 160
192 64 224 96
48 176 16 144
240 112 208 80
위의 예에서 모든 픽셀이 89 의 곡선 톤을 갖는 평평한 영역을 취하십시오. 89 가 임계 값보다 낮을 때 셀은 어둡습니다. 89 이상의 임계 값은 96,112, 128,144, 160,176, 192,208, 224 및 240: 16 개 중 10 개입니다. 따라서 16 개 중 10 개 셀은 1-89/255 = 65%의 tone's 어둠에 가까운 62.5%의 적용 범위 인 잉크를 얻습니다.
같은 톤을 가진 모든 영역은 정확히 같은 패턴을 얻고,그 반복은 바이엘의 모습입니다. 그것은 임의의 곡물을 결코 생성하지 않으며,깨끗하게 타일을 붙이고,PNG 로 잘 압축됩니다. 그것의 약점은 밴딩입니다: 느린 그라데이션은 최대 17 개의 뚜렷한 패턴을 통해 단계.
Floyd-Steinberg 오류 확산은 어떻게 작동합니까?
플로이드-스타인버그는 이미지를 왼쪽에서 오른쪽으로,위에서 아래로 처리한다. 각 픽셀은 검은색이나 흰색으로 반올림되며,톤과 반올림된 값의 차이는 16/16 에 더해지는 가중치를 사용하여 아직 처리되지 않은 4 개의 이웃으로 분할된다. 로버트 플로이드와 루이스 스타인버그는 1976 년에 이를 발표했다.
current 7/16
3/16 5/16 1/16
톤 89 작업 예제. 128 컷오프 아래에 있으므로 픽셀이 검정색 (0) 이 됩니다. 오류는 89 - 0 = 89 이며,이는 전달됩니다:
| 이웃 | 공유하기 | 톤을 더했습니다 |
|---|---|---|
| 오른쪽 | 7/16 | 38.9 |
| 왼쪽 아래 | 3/16 | 16.7 |
| 아래 | 5/16 | 27.8 |
| 오른쪽 아래 | 1/16 | 5.6 |
| 합계 | 16/16 | 89.0 |
지금 바로 의 픽셀은 컷오프 바로 아래에 있는 89 + 38.9 = 127.9 를 가지고 있으므로 아마도 검정색도 되고 그 자체로 작은 오류를 전달하게 됩니다. 조금 더 나아가 누적된 오류는 128 이상의 픽셀을 기울이며 흰색 영역에서는 흑백 픽셀의 비율이 원래 톤과 일치하며 선택은 이웃에 따라 달라지기 때문에 그 결이 타일링이 아닌 불규칙해 보입니다.
전체 오류가 유지되기 때문에 Floyd-Steinberg는 전체적인 톤을 가장 잘 보존하므로 사진의 충실도를 선택합니다.
Atkinson 디더링이 왜 그렇게 대조적으로 보입니까?
빌 앳킨슨이 오리지널 애플 매킨토시를 위해 쓴 앳킨슨 디더링은 오류를 더 넓게 퍼뜨리지만 일부러 오류를 잃는다. 6 개의 이웃 각각은 오류의 1/8 을 받기 때문에 6/8 (3 분기) 만 전달된다:
current 1/8 1/8
1/8 1/8 1/8
1/8
89 의 동일한 톤과 89 의 오류로 각 이웃은 11,125 를 얻고 총 66,75 가 전달되고 22,25 는 간단히 삭제됩니다. 드롭 오류는 흰색에 가까운 영역을 순수한 흰색으로,검은색에 가까운 영역을 순수한 검정색으로 밀어내므로 하이라이트가 터지고 그림자가 차단되며 중간 톤은 선명하고 개방 된 질감을 유지합니다. 플로이드-스타인버그보다 정확도가 떨어지며 특히 얼굴과 작은 화면에서 종종 더 매력적입니다.
하프톤 모드는 어떻게 작동하나요?
하프토닝은 도트의 배치보다는 크기를 다양하게 합니다. 이 도구는 화면 각도로 회전된 샘플 포인트의 격자를 배치하고,각 지점의 톤을 읽고,톤이 어두워질수록 반경이 커지는 원을 그립니다:
radius = (1 - tone / 255) x (pixel scale / 2) x 1.3 capped at pixel scale / 2
dots with a radius of 0.4px or less are not drawn
기본 4px 픽셀 스케일 사용:
| 톤 | 반경 | 결과 |
|---|---|---|
| 0(검은색) | 2.6, 2.0px로 제한됩니다 | 만지는 점, 단단한 어두운 |
| 89 | (0.651) x 2 x 1.3 = 1.69px | 중간 점 |
| 200 | (0.216) x 2 x 1.3 = 0.56px | 작은 점 |
| 230 | (0.098) x 2 x 1.3 = 0.25px | 건너뛰고 종이로 읽습니다 |
기본 각도는 45 도이며,대각선 격자가 페이지 가장자리와 정렬 된 행보다 눈에 덜 띄기 때문에 단일 색상 화면의 규칙입니다. 0 또는 90 근처의 각도는 눈에 보이는 수평 또는 수직 선을 생성합니다. 각도 슬라이더는이 모드에만 영향을 미칩니다.
픽셀 스케일, 팔레트 및 반전 설정은 어떻게 변경됩니까?
화소 가늠자 (2 ~ 32px, 기본값 4) 각 블록 또는 도트 셀의 크기를 설정합니다. 도구는 셀을 평균화하는 대신 셀당 하나의 픽셀을 샘플링하므로 셀보다 작은 매우 미세한 세부 사항은 사라지거나 직물 및 그릴에 모아레 패턴을 생성할 수 있습니다. 더 큰 셀은 더 두툼하고 그래픽적인 포스터를 제공합니다; 작은 셀은 더 많은 세부 정보를 보유하고 더 큰 SVG 파일을 생성합니다.
팔레트 색상을 설정합니다. 5 개의 사전 설정이 포함되어 있습니다: Brutal Paper (파피루스,위험 노란색,숯), Mac OS 1984 (흰색,회색, 검정색), Gameboy Classic (4 개의 녹색), Cyberpunk Neon 및 Synthwave 80s,그리고 사용자 정의 색상에 자신의 배경과 전경을 가진 6 가지 모드 중 5 가지는 투톤이며 첫 번째와 마지막 팔레트 색상 만 사용합니다. 그렇기 때문에 Gameboy Classic 은 Bayer 또는 Floyd-Steinberg 에서 가장 밝고 어두운 녹색 만 보여줍니다. 사이버 글리치는 팔레트의 모든 색상에 매핑되는 하나의 모드입니다.
반전시키다 배경과 전경을 어두운 필드의 밝은 점으로 바꿉니다.
어떤 크기를 내보낼 수 있으며, 언제 SVG를 사용해야 합니까?
사진은 먼저 고정 된 무대에 커버 장착되므로 6000px 카메라 파일은 작은 것만큼 빠르게 렌더링됩니다. 캔버스 내부를 드래그하여 자르기를 재배치하십시오.
| 종횡비 | 스테이지 (1x) | 2x (기본값) | 4배 | 8배 |
|---|---|---|---|---|
| 오리지널 | 폭 840px | 1680 와이드 | 3360 와이드 | 6720 와이드 |
| 1:1 스퀘어 | 840 x 840 | 1680 x 1680 | 3360 x 3360 | 6720 x 6720 |
| 16:9 풍경 | 1120x630 | 2240 x 1260 | 4480 x 2520 | 8960 x 5040 |
| 9:16 수직 | 630 x 1120 | 1260 x 2240 | 2520 x 4480 | 5040 x 8960 |
| 4:3 고전적인 | 1040x780 | 2080 x 1560 | 4160 x 3120 | 8320 x 6240 |
PNG 내보내기는 미리보기를 확대하지 않습니다. 대상 크기로 소스를 다시 그리고 픽셀 스케일에 내보내기 스케일을 곱한 값으로 디더를 다시 실행하므로 4x 에서 4px 도트는 흐릿한 확대보다는 선명한 16px 도트가 됩니다. 렌더링은 HTML 캔버스 API메모리에 큰 비트맵을 보유하고 있는; "Export failed 로 8x 내보내기가 실패하면 더 작은 내보내기 스케일을 시도해 보세요.", 그렇게 하세요.
SVG 내보내기는 모든 점을 실제 점으로 씁니다 <rect> 또는 <circle> 요소 다음에 W3C SVG 사양따라서 포스터는 리샘플링 없이 모든 인쇄 크기로 확장되고 벡터 편집기에서 열립니다. 포스터 카드 텍스트는 편집 가능한 텍스트로 유지됩니다. 절충점은 파일 크기입니다. 840 x 1120 스테이지의 4px 스케일은 210 x 280 = 58,800 셀이며 어두운 렉트 모드 이미지는 각각 약 55 문자의 별도 요소로 대부분을 쓸 수 있으며 이는 3MB 에 가깝습니다. 픽셀 스케일을 8 로 두 배로 늘리면 셀 수가 4 분의 1 로 줄어듭니다. 인쇄 및 편집에는 SVG,웹에는 PNG 를 사용하십시오.
CRT scanline 효력은 수출을 결코 도달하지 않습니다; 그것은 시사 오바레이만입니다. 포스터 카드 오버레이는,반면에, 수출의 일부분이고,기본적으로 자리 표시자 우두머리 "DITHERED // 2026"; untick "Show 포스터 카드 overlay" 당신이 이미지를 혼자 원하는 경우에.
내 이미지가 업로드되었습니까?
아니오. 파일은 로컬 개체 URL 로 열리고 캔버스에 그려져 동일한 브라우저 탭에서 디더링됩니다. 어떤 요청도 이미지 데이터를 전달하지 않으므로 미공개 사진이나 클라이언트 자산이 장치에 남아 있으며 도구는로드 된 후 네트워크 오프에서 계속 작동합니다. Ctrl + V 또는 Cmd + V 가있는 클립 보드에서 붙여 넣기도 작동합니다.
내장된 샘플 (Earthrise,Blue Marble 및 달 부트프린트) 은 NASA 사진입니다. 미국 연방 정부의 저작물은 아래의 저작권 대상이 아닙니다 17 USC 105그들이 표본으로 발송할 수 있는 까 왜 이다.너의 자신의 올려주기를 위해,공구는 아무 워터마크도 추가하지 않으며 아무 권리도 주장하지 않는다;보통 한계는 너가 근원 심상에 보전되는 어떤 권리 이다.
어떤 오류에 부딪힐 수 있나요?
| 메시지 또는 증상 | 원인 | 고치다 |
|---|---|---|
| "그 파일은 이미지가 아닙니다." | 파일's 타입은 이미지가 아닙니다 | 예를 들어 이미지 형식 변환기를 사용하여 먼저 변환합니다 |
| "그 이미지를 디코딩할 수 없습니다." | 브라우저는 Safari 외부의 HEIC와 같은 형식을 읽을 수 없습니다 | JPG 또는 PNG 로 변환 |
| "Export 실패. 더 작은 내보내기 스케일을 시도하십시오. " | 브라우저가 큰 캔버스를 할당할 수 없습니다 | 4x 또는 2x 를 선택합니다 |
| "클립보드 읽기가 차단되었습니다..." | 브라우저가 버튼에 대한 클립보드 액세스를 거부했습니다 | 대신 페이지에서 Ctrl+V 또는 Cmd+V를 누르세요 |
| 팔레트는 두 가지 색상만 표시합니다 | 투톤 모드는 첫 번째와 마지막 색상을 사용합니다 | 사이버 글리치로 전환하거나 사용자 지정 색상을 설정합니다 |
| 모아레 또는 반짝이는 패턴 | 픽셀 스케일보다 작은 미세한 일반 디테일 | 픽셀 스케일을 높이거나 소스를 약간 먼저 흐리게 합니다 |
| PNG 보다 훨씬 큰 SVG | 점당 하나의 요소 | 픽셀 스케일을 높이거나 PNG를 내보냅니다 |
PNG의 투명한 부분은 디더링하기 전에 흰색 위에 놓이므로 종이로 읽혀집니다.
이미지를 디더링하는 대안
| 도구 | 어떻게 | 노트 |
|---|---|---|
| 김프 | Floyd-Steinberg 디더링으로 이미지, 모드, 색인화됨 | 팔레트 기반, 하프톤 스크린 각도 없음 |
| 포토샵 | 회색조, 하프톤 화면 또는 확산 디더를 사용한 비트맵 모드 | 인쇄 지향, 유료 |
| 이미지매직 | magick in.jpg -colorspace Gray -ordered-dither o4x4 out.png |
스크립트 가능하고 많은 임계값 맵 |
| 이미지매직 | magick in.jpg -dither FloydSteinberg -monochrome out.png |
흑백으로의 오류 확산 |
| Toolz 이미지 디더 | 여섯 가지 모드, 팔레트, 벡터 SVG | 클라이언트 측, 드래그하면서 미리보기 |
일괄 처리 시 명령줄 도구가 승리합니다. 결과를 보는 동안 모양이 대비를 살짝 밀고 점 크기에 따라 달라지면 대화형 도구가 승리합니다.
디더링된 PNG가 웹사이트로 향하는 경우, 이미지 압축 가이드 그것을 더 긴축하는 방법을 커버합니다; 단지 2 개의 색깔을 가진 이미지는 PNG 뿐만 아니라 극단적으로 잘 압축합니다. 다른 체재로 산출을 돌기를 위해,the 이미지 포맷 변환기 가이드 PNG,WebP 또는 GIF 가 적합할 때 설명합니다. full set lives on the 이미지 도구 허브, 그리고 당신은 할 수 있습니다 디더링 도구를 사용해 보세요 자신의 사진을 로드하기 전에 NASA 샘플 중 하나를 사용하세요.
