完全に隣接する2つの長方形が、重なり合っているか、正確に隣接していないかのように、間に黒または白の線を作成するのはなぜですか？

私はフラットなデザインを持っています（そうだと思われます）が、形状間のこれらの黒と白の線はとても面倒です... [ストロークなし]を見てください：

重なり合う2つの長方形の間にあるこれらの線を見ますか？どうすれば修正できますか？（Photoshopで作成しましたが、Paint.netとAdobe Illustratorを使用しても同じ問題があります）色に何か問題がありますか？それとも私は見すぎていますか？：P

ElmoAllénが正しく指摘しているように、これは視覚的な錯覚ではなく、グラフィックエディターのバグではなく、使用しているモニターテクノロジーに起因する効果です。

具体的には、典型的な最新のTFT-LCDコンピューター画面では、各ピクセルは、実際にはそれぞれreg、green、blueの色で並んで配置された3つの別々のサブピクセルで構成されています。

これらのサブピクセルはそれぞれ、光の原色の1つしか生成できませんが、非常に近いため、見たときにそれらの色が混ざり合って、単色の錯覚を生成します。

白（または灰色）ピクセルの場合、すべてのサブピクセルが等しく照らされます。互いに異なるサブピクセルの強度を調整することにより、異なる色を生成できます。極端な場合、純粋な赤、緑、または青のピクセルの場合、その色を生成するサブピクセルのみがオンになります。したがって、赤、緑、赤のストライプは、サブピクセルレベルで次のようにレンダリングされます。

ここで、何が起こっているのかを見ることができます：通常、点灯しているそれぞれの間に2つの暗いサブピクセルのギャップがありますが、色の境界では、ギャップは3つのサブピクセル（暗いバンドの作成）または1つ（作成ライト1）。

もちろん、近くのサブピクセルの色をブレンドすると、画面を見たときに通常起こるように、効果はより明白になります。

ここでは、中程度の量のぼかしのみを適用し、虫眼鏡を通して画面を見た場合に表示されるものをシミュレートしました。（試してみてください！）左側の境界にある暗いバンドは、ここでは明らかです。右側の境界の明るいバンドははっきりと表示されませんが、画像がさらにぼやけると目立つようになります。

もちろん、これらのシミュレートされた画像を信頼する必要はありません。代わりに、ラップトップ画面で撮った2、3枚のクローズアップ写真を含めて、安いデジタルカメラで質問の画像を見せてください。

シミュレートされた画像のように、暗い線は非常に明白です。明るい線はそれほど明るくありません。おそらく、点灯しているサブピクセルの間に暗いサブピクセルがまだ1つあるため、そのような明確な単一の強度ピークはありません。

これを修正するにはどうすればよいですか？

原則として、この効果はモニターが自動的に補正できるものです。たとえば、このような問題のあるトランジションを検出し、トランジションを柔らかくするために色をわずかに相互に染み込ませます。ただし、これにより複雑さとコストが増加するため、ほとんどのモニターメーカーは気にしません。

ただし、このような非常に対照的な色フィールドの間に中間色（たとえば、赤と緑の黄色）の狭いストライプを追加することで、同じ結果を自分で達成できます。このストライプの色は、ディスプレイガンマを考慮して、周囲の色の平均輝度とほぼ一致する必要があります。

誰もが画像を見るために独自のディスプレイを持っているので、誰もがここで見ているものを正確に作るのは難しいです。モニターで目を細めると、左の赤い長方形と緑の中央の長方形の間に非常に細い黒い線が見えました。対照的に、右の赤と真ん中の間に、非常に細い白い線が見えます。基本的に、私は元のポスターが彼らがこれを見る（誇張）ことを意味すると理解しています：

質問のコメントで示唆されているように、これらはマッハバンドではありません。マッハバンドは、異なるクローム色の間ではなく、異なる明色の間（たとえば、2つのグレーシェードの間）に生まれます。私のモニター（およびすべてのsRGBモニターでは）まあ）。（元の画像の色は純粋な赤や緑ではありませんが、知覚される明るさの違いはほぼ同じです。）

しかし、マッハバンドは白または黒の細い線を作成できません。それらは、広い範囲で観察される明るさのわずかな違いを作成するだけです。また、マッハバンドは常に対称です。赤から緑は緑から赤と同じです。しかし、これは非対称です。他の境界は黒で、他の境界は白です。

代わりに、ここで表示される視覚的なアーティファクトは、LCDサブピクセル配列のためです。最も一般的な配置は、左から右に赤緑青です。したがって、完全な赤の各ピクセルの間には、オフになっている緑のサブピクセルとオフになっている青のサブピクセルがあります。代わりに、完全な赤ピクセルと完全な緑ピクセルの間に、緑、青、赤の3つのオフになっているサブピクセルがあります。これは、赤と緑の間に細い黒い線の効果を作成します。以下の画像のように：

これで、緑色の長方形の反対側に、最初に点灯している緑色のサブピクセル、オフになっている青色のサブピクセル、次に赤色のサブピクセルがあります。点灯している緑と赤のサブピクセルの間には、黒のサブピクセルが1つだけあります。これにより、緑と赤の境界の間を走る非常に細い明るい線の効果が作成されます。以下のように：

モニターにサブピクセルを表示するには、おそらく虫眼鏡が必要です。ノーマンの人間の視力は、別々のピクセルが見えるほど近い距離に焦点を合わせることができません。ただし、わずかな明るさの違いを見つけるのは非常に良いです。

理論が正しいことを証明するために、たとえば、左の赤い長方形と緑の長方形の間にRGB 128-255-0の1ピクセル幅のラインを追加し、黒いラインがフェードアウトするかどうかを確認します。ギャップ。また、サブピクセルを少し暗くするために、たとえば緑と右の赤の長方形の間に1ピクセル幅のRGB 85-85-0を試すこともできます。残念ながら、これは実際の設計では使用できません。最初に赤緑青のサブピクセル配列に依存し、同時に色の境界が少し汚れているためです。

さらに、画面鮮鋭化アルゴリズムが実行される可能性があります。基本的にモニターの鮮鋭化は、すべてのカラーエッジをより目立たせ、エッジの明るい側に白を追加し、暗い側の黒を暗くします。これはマッハバンド効果によく似ていますが、より狭く、通常はより顕著です。これは、ディスプレイのシャープネス設定を調整して（できれば可能）、効果が低下するかどうかを調べることで確認できます。

これは、色が一緒になったときの色の性質です。人間の目は、物事を明確にするために単純化する傾向があります。色の知覚によって引き起こされる錯視

「マッハバンドイリュージョン」と呼ばれるこの現象は、値が異なる任意の2色で表示されます。色相でも彩度でもない。添付の図は、同じ錯覚が灰色で発生することを示しています。明るい灰色は真ん中の暗い灰色に比べて明るくなり、中央の灰色は右側の右側の暗い灰色の端の近くに明るく表示されます。そして1つ。

あなたにとって重要な場合、2つのオプションがあります。

1. 同じ黒比を持つ2色を選択すると、錯覚が減少します。
2. これらの色の2つのグレーの平均グレーを持つ2つの色の間にグレーの小さな線を追加することで、「目を欺く」ことができます。以下の結果を参照してください。上部のストリップは下部のストリップよりも錯覚が少ないことがわかります。

確かではありませんが、眼鏡をかけている場合、問題はここにあります。おそらく、赤と緑が分離している色収差が見られます。

メガネを厚くするほど、効果が顕著になります。頭を回して、色のブロックが動くのを見てみてください-メガネの端に向かって動くと、メガネが厚くなり、より大きな分離を引き起こします。

アドビのフォーラムのこのスレッドには、「ピクセルグリッドに合わせる」オプションがどこにあるのかという点があります。

記憶が正しければ、File > Newダイアログ（ボックスの一番下）を使用してドキュメント全体で有効にすることもできます。

これらのハードコアモニターのエキスパートが正しいか、モニターのピクセルに正しく位置合わせされていないベクトルによって作成された不一致があるだけです。これがまさに、この小さなチェックボックスがIllustratorに追加されることに非常に多くの人々が興奮している理由です。

これは、色の相互作用による可能性があります。赤と緑は補色であり、並べて配置すると、重なっているように見える黒/濃い線が作成されるようです。ここで他の例を読むことができます。

Illustratorはシェイプを自動的に所定の位置にスナップするため、オーバーラップの問題は発生しません。

変換ウィンドウのオプションメニュー（オプションウィンドウの右上隅にあるオプション）で[ 新しいオブジェクトをピクセルグリッドに揃える]オプションを有効にすると、描画する新しいオブジェクトには、デフォルトでピクセル調整プロパティが設定されます。Webドキュメントプロファイルを使用して作成された新しいドキュメントの場合、このオプションはデフォルトで有効になっています。既存のオブジェクトの場合、変換ウィンドウ自体でピクセルグリッドに合わせるを選択して、ピクセルグリッドの配置をオフにできます（ウィンドウのオプションメニューで[ その他のオプション]をオンにした後）。

ピクセル揃えのストロークの鮮明な外観は、72 ppiの解像度でのみラスター出力で維持されます。他の解像度では、そのようなストロークがアンチエイリアス結果を生成する可能性が高くなります。

ピクセル調整されているが、垂直または水平の直線セグメントを持たないオブジェクトは、ピクセルグリッドに合わせて変更されません。たとえば、回転された長方形には、垂直または水平の直線セグメントがないため、ピクセル整列プロパティが設定されている場合、鮮明なパスを生成するために微調整されません。

このアドビのドキュメントは、より広くそれを伝えます：http : //helpx.adobe.com/illustrator/using/drawing-pixel-aligned-paths-web.html