新聞写真をよく見て、それはさまざまなサイズの黒い点に分解されます。最初のMacintoshのスクリーンショットを見て、灰色の空は白黒ピクセルの散乱であることが判明しました。ゲームボーイのスプライトと4つの緑色の色合いを見て、どういうわけか顔を描きます。それらのディスプレイやプレスはどれも滑らかなグラデーションを示すことができず、それらはすべて同じように偽物です。利用可能な色をパターンにいくつか配置することで、目は平均してトーンに戻ります。
その手法はディザリングです このガイドでは、なぜ存在するのか、使用する算術において主なアルゴリズムがどのように異なるのか、ディザツールの設定がどのようなものに変わるのか、スクリーンまたは印刷用のクリーンな出力を取得する方法など、作業例で使用します Toolz イメージディザツール、そして数字はそれが実行するのと同じ式から来ます。
tl;dr: ディザリングは、目が中間トーンに溶け込むパターンにドットを配置することで、小さなパレット (多くの場合 2 色のみ) で連続トーンの画像を再現します。 Ordered dithering (Bayer) は、各ピクセルを固定しきい値行列と比較し、規則的なクロスハッチを与えます。 Error diffusion (Floyd-Steinberg, Atkinson) は、各ピクセル' s の丸め誤差を、より有機的な粒子として隣接するものにプッシュします。 halftone は、印刷物のように、回転された画面に沿ってドット サイズを変化させます 画像ディザツール 6 つのモード、レトロ パレット、最大 8 倍の PNG エクスポート、および真のベクトル SVG を提供しており、すべてクライアント側、無料、サインアップなしです。
イメージディザリングとは?
画像ディザリングは、パレットが表現できる色を小さなパターンで混合することで、パレットが直接表現できないトーンを示す方法です。白黒プリンターは 50% グレーを印刷できませんが、通常の表示距離から見るとグレーに見える白黒ドットのチェッカーボードを印刷できます。
それが解決する問題は量子化と呼ばれます すべてのピクセルは利用可能なパレットで最も近い色に丸められなければなりません ディザリングなしで、白黒に縮小された写真は硬いシルエットだけを保持します: 真ん中の灰色より明るいものはすべて白になり、暗いものはすべて黒に変わります グラデーションはなくなりました ディザリングでは、丸めは依然としてピクセルごとに起こりますが、エラーはパターンによって広がったりオフセットされたりするため、各領域の暗い点の密度は、その領域が元の領域でどの程度暗かったかを追跡します。
さまざまなアルゴリズムがさまざまな方法でそのエラーを拡散し、それぞれが残すパターンがその視覚的な特徴となります。 "dithered"その理由は、古い PC ゲームのきちんとしたクロスハッチ、MacPaint の粒状のテクスチャ、またはスクリーン印刷されたポスターの丸い点を意味する場合があります。
ディザアルゴリズムはどのように異なりますか?
2 つの家族があります. 順序ディザリング 固定しきい値パターンの位置と比較することで、各ピクセルを独立して決定します。 エラー拡散 ピクセルを順番に決定し、各丸め誤差をまだ処理されていないピクセルに繰り越します。ハーフトーニングは、ドットの配置ではなくドットのサイズを変更する印刷由来の相対関数です。
| ツール内のモード | 家族 | どうやって決めるの | 見て | いいね |
|---|---|---|---|---|
| バイエル 4x4 | 注文 | トーンを 4x4 のしきい値行列と比較します | 正規クロスハッチ、目に見えるパターン | レトロなゲームと初期の PC スタイル、ポスター |
| アトキンソン | エラー拡散 | エラーの 3/4 を 6 つの隣接項目にプッシュします | ハイコントラスト、吹き飛ばされたハイライト | 1984 年の Macintosh の外観、パンチの効いたポートレート |
| フロイド=スタインバーグ | エラー拡散 | エラーをすべて 4 つの隣接エラーにプッシュします | 細かい有機穀物、最も忠実なトーン | 細部が重要な写真 |
| ハーフトーン | 振幅変調スクリーン | ドット半径は、回転したグリッド上で暗く成長します | 角度のある丸い点 | 印刷スタイルのポスター、コミック、ポップアート |
| サイバーグリッチ | パレット スナップ プラス 変位 | ブロックごとの最寄りのパレットの色、シフトされたスキャンライン | 横の涙を持つカラフルなブロック | 定型化されたマルチカラーアート |
| ハード1ビット | しきい値 | トーンが 128 未満の場合は暗くなります | ディザリングなし、ピュアシルエット | ロゴ、ラインアート、ステンシル |
次のセクションでは、すべてのモードが共有するトーン値から始めて、実数を使用した算術演算を歩きます。
ディザリングする前にピクセル' のトーンはどのように計算されますか?
任意のパターンが適用される前に、各ピクセルは0 (黒) から255 (白) までの単一の輝度値に変換されます。 toolはからのルマウェイトを使用します 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 個がインクを受け取ります。これは 62.5% のカバレッジであり、1 - 89/255 = 65% の暗さに近いです。
同じトーンのすべての領域がまったく同じパターンになり、その繰り返しがバイエルの外観になります。ランダムな粒子を生成することはなく、きれいにタイルを張り、PNG と同様に圧縮されます。その弱点は縞模様です。ゆっくりとした勾配が、最大 17 の異なるパターンを通過します。
フロイド スタインバーグ誤差拡散はどのように機能しますか?
フロイド スタインバーグは画像を左から右、上から下に処理します。各ピクセルは黒または白に丸められ、そのトーンと丸められた値の差はまだ処理されていない 4 つの隣接ピクセルに分割され、16/16 に加算される重みが使用されます。ロバート・フロイドとルイス・スタインバーグは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 を超えるピクセルを傾けて白になります。面積を超えると、黒と白のピクセルの割合が元のトーンと一致し、選択が隣接するものに依存するため、粒子はタイル状ではなく不規則に見えます。
完全なエラーが維持されるため、フロイド スタインバーグは全体的なトーンを最もよく維持します。そのため、写真の忠実性を重視しています。
なぜアトキンソンディザリングはこんなにコントラストがあるように見えるのでしょうか?
ビル アトキンソンによってオリジナルのApple Macintosh用に書かれたアトキンソンディザリングでは、エラーがより広く拡散されるが、意図的にエラーの一部を失う。 6 つの隣接するものはそれぞれエラーの1/8 を受け取るため、6/8 (4 分の3) だけが渡される:
current 1/8 1/8
1/8 1/8 1/8
1/8
同じトーン 89 とエラー 89 で、各隣人は 11.125 を取得し、合計 66.75 が渡され、22.25 は単純にドロップされます。ドロップエラーにより、白に近い領域が純白に、黒に近い領域が純黒にプッシュされるため、ハイライトが吹き飛ばされ、影がブロックされ、中間トーンが鮮明でオープンなテクスチャを維持します。 Floyd-Steinberg よりも精度が低く、特に顔や小さな画面ではより魅力的であることがよくあります。
ハーフトーンモードはどのように機能しますか?
ハーフトーニングは、ドットの配置ではなく、ドットのサイズを変化させます ツールは、画面の角度まで回転したサンプル点のグリッドを敷設し、各点のトーンを読み取り、トーンが暗くなるにつれて半径が大きくなる円を描きます:
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.0 px です | 触れる点、固体暗い |
| 89 に記載のものです | (0.651) x 2 x 1.3 = 1.69 px | 中 ドット |
| 200 | (0.216) x 2 x 1.3 = 0.56 px | 小さな点 |
| 二 三〇 | (0.098) x 2 x 1.3 = 0.25 px | スキップ、紙のように読みます |
デフォルトの角度は45 度で、ページの端と整列した行よりも斜めのグリッドが目には目立ちにくいため、単色画面の規則です。 0または90付近の角度では、目に見える水平または垂直の線が生成されます。角度スライダーはこのモードにのみ影響します。
ピクセルスケール、パレット、反転設定は何が変わりますか?
ピクセルスケール (2 から32px、デフォルト4) 各ブロックまたはドットセルのサイズを設定します ツールは、セルの平均化ではなくセルごとに1 ピクセルをサンプリングするため、セルよりも小さい非常に細かいディテールが消えたり、布地やグリルにモアレパターンを生成したりする可能性があります より大きなセルは、より塊状で、よりグラフィックなポスターを与えます; より小さなセルは、より詳細な情報を保持し、より大きなSVGファイルを生成します。
パレット 色を設定します。 5 つのプリセットが含まれています: Brutal Paper (パピルス、ハザードイエロー、チャコール)、Mac OS 1984 (ホワイト、グレー、ブラック)、Gameboy Classic (4 つのグリーン)、Cyberpunk Neon と Synthwave 80s、さらに独自の背景と前景を持つカスタムカラー。 6 つのモードのうち 5 つはツートンカラーで、最初と最後のパレットカラーのみを使用します。そのため、Gameboy Classic はバイエルまたはフロイド スタインバーグで最も明るいグリーンと暗いグリーンのみを表示します。 Cyber Glitch は、パレット内のすべての色にマッピングされる 1 つのモードです。
反転 背景と前景を交換して、暗いフィールド上の明るい点を取得します。
どのサイズをエクスポートできますか?また、SVG はいつ使用する必要がありますか?
写真は最初に固定ステージにカバーフィットされるので、6000pxのカメラファイルは小さなものと同じくらい速くレンダリングされます。キャンバス内をドラッグしてクロップの位置を変更します。
| アスペクト比 | ステージ (1x) | 2x (デフォルト) | 4x の | 8x の |
|---|---|---|---|---|
| オリジナル | 幅840px | 1680ワイド | 3360ワイド | 6720ワイド |
| 1:1 スクエア | 840 x 840 | 1680 x 1680 | 3360 x 3360 | 6720 x 6720 |
| 16:9 ランドスケープ | 1120 x 630 | 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 クラシック | 1040 x 780 | 2080 x 1560 | 4160 x 3120 | 8320 x 6240 |
PNGエクスポートではプレビューは拡大されません ターゲットサイズでソースを再描画し、ピクセルスケールにエクスポートスケールを乗じてディザを再度実行するため、4xでは4pxドットはぼやけた拡大ではなく鮮明な16pxドットでレンダリングが行われます HTML canvas API、メモリに大きなビットマップを保持します; 8xエクスポートが失敗した場合 " エクスポートが失敗しました. " より小さいエクスポートスケールを試してください, それを行います.
SVG エクスポートはすべてのドットを実数として書き込みます <rect> や <circle> 要素、それに続きます W3C SVG 指定、従ってポスターはリサンプリングなしであらゆる印刷サイズにスケールし、ベクトルエディタで開きます。 posterカードのテキストは編集可能なテキストとして残ります。 trade-offはファイルサイズです。 840 x 1120 の段階での4pxスケールは210 x 280 = 58,800 のセルがあり、暗い直角モードのイメージはそれらのほとんどをそれぞれ約55 文字の別々の要素として書くことができ、3 MBに近づきます。 pixelスケールを2 倍の8 にするとセル数は4 分の1 に減ります。 svgは印刷および編集に使用し、pngはウェブ用です。
CRT スキャンライン効果は決してエクスポートに到達しません; これはプレビュー オーバーレイのみです。一方、ポスター カード オーバーレイはエクスポートの一部であり、デフォルトではプレースホルダー ヘッダー "DITHERED // 2026"; untick "Show poster card overlay" 画像だけが必要な場合。
私の画像はアップロードされていますか?
いいえ ファイルはローカルオブジェクトのURLとして開かれ、キャンバスに描画され、同じブラウザタブでディザリングされます リクエストは画像データを運ぶことがないため、未公開の写真やクライアントアセットはデバイスに残り、ツールはロードされたネットワークをオフに保ちます クリップボードから貼り付けます Ctrl+VまたはCmd+Vも機能します。
内蔵サンプル (アースライズ、ブルー マーブル、月のブーツプリント) は NASA の写真です。米国連邦政府の作品は、以下の著作権の対象にはなりません 17 USC 105、それは彼らがサンプルとして出荷することができる理由です あなた自身のアップロードのために、ツールは透かしを追加せず、権利を主張しません; 通常の制限は、ソース画像で保持している権利です。
どのようなエラーに遭遇する可能性がありますか?
| メッセージまたは症状 | 原因 | 修正 |
|---|---|---|
| " そのファイルは画像ではありません。 " | ファイル' s タイプは画像ではありません | たとえば画像フォーマットコンバーターを使用して、最初に変換します |
| " その画像はデコードできませんでした。" | ブラウザは、Safariの外のHEICのように、その形式を読み取ることができません | JPGまたはPNGに変換します |
| "エクスポートに失敗しました.より小さいエクスポートスケールを試してください." | ブラウザは大きなキャンバスを割り当てることができませんでした | 4 倍または2 倍を選択してください |
| "クリップボードの読み取りがブロックされました..." | ブラウザはボタンへのクリップボードアクセスを拒否しました | 代わりにページの Ctrl+V または Cmd+V を押します |
| パレットには 2 色しか表示されません | ツートンモードでは最初と最後の色が使用されます | Cyber Glitchに切り替えるか、カスタムカラーを設定します |
| モアレまたはきらめくパターン | ピクセルスケールよりも小さい細かい規則的なディテール | ピクセルスケールを上げるか、最初にソースをわずかにぼかします |
| SVG は PNG よりもはるかに大きいです | 1 ドットにつき1 つの要素 | ピクセルスケールを上げるか、PNGをエクスポートします |
PNG の透明な領域はディザリングする前に白に置かれるため、紙のように読み取られます。
画像をディザリングするための代替手段
| ツール | どうやって | 注意事項 |
|---|---|---|
| ギンプ | 画像、モード、インデックス付き、フロイド スタインバーグ ディザリング付き | パレットベース、ハーフトーンスクリーン角度なし |
| フォトショップ | グレースケール、次にハーフトーン スクリーンまたはディフュージョン ディザーを備えたビットマップ モード | 印刷指向、有料 |
| 画像マジック | magick in.jpg -colorspace Gray -ordered-dither o4x4 out.png |
スクリプト可能な、多くのしきい値マップ |
| 画像マジック | magick in.jpg -dither FloydSteinberg -monochrome out.png |
白黒へのエラー拡散 |
| Toolz イメージディザ | 6 つのモード、パレット、ベクトル SVG | クライアント側、ドラッグしながらプレビューします |
コマンドライン ツールはバッチに対して勝ちます。結果を見ながらコントラストとドット サイズを調整することに外観が依存する場合、インタラクティブ ツールが勝ちます。
ディザリングされた PNG が Web サイトに向かっている場合は、 画像圧縮ガイド さらに縮小する方法をカバーします; 2 色のみの画像はPNGとして非常にうまく圧縮します。出力を別の形式に変換するには、 画像フォーマット コンバータ ガイド PNG、WebP、または GIF がいつ適合するかを説明します。フルセットは に住んでいます 画像ツールハブ、そして、あなたはできます ディザリングツールを試してください あなた自身の写真をロードする前に、NASAのサンプルの1 つで。
