Mengapa dua persegi panjang yang berdekatan sempurna membuat garis-garis hitam atau putih di antaranya seolah-olah mereka tumpang tindih atau tidak persis berdekatan?

53

Saya memiliki desain yang rata (well, memang seharusnya begitu), tetapi garis-garis hitam dan putih di antara bentuk-bentuk ini sangat menyebalkan ... [tanpa goresan] lihat:

Masalah

Lihat garis-garis ini di antara dua persegi panjang yang tumpang tindih? Bagaimana saya bisa memperbaikinya? (Saya membuat ini dengan Photoshop, tetapi ada masalah yang sama menggunakan Paint.net dan Adobe Illustrator) Apakah ada sesuatu dengan warnanya? Atau saya melihat terlalu banyak? : P

color shapes candh
sumber
Saya pikir kunci di sini memutuskan apakah ini band Mach atau sesuatu yang lain adalah asimetri: "seperti yang Anda lihat, sisi kanan persegi panjang tumpang tindih dengan 1 px (seperti yang Anda katakan) sedangkan sisi kiri tidak". Pita mach harus muncul secara simetris di kedua sisi.
Elmo Allén
1
Saya memperbesar (25600%) jadi pasti subpixel mempengaruhi. Kebetulan saya hanya melihat artefak pada 1 dari 3 monitor. Dua lainnya terlihat primo sharpo !! Jadi pasti tergantung pada konstruksi pixel monitor Anda.
Octopus
1
@Octopus: Monitor merek apa? Itu adalah pembelian saya berikutnya, dan saya ingin membeli sesuatu yang kualitasnya lebih tinggi secara objektif.
dotancohen

Jawaban:

90

Seperti yang dicatat Elmo Allén dengan benar, ini bukan ilusi optik bukan bug di editor grafis Anda, tetapi efek yang disebabkan oleh teknologi monitor yang Anda gunakan.

Secara khusus, pada layar komputer TFT-LCD modern yang khas , masing-masing piksel sebenarnya terdiri dari tiga subpiksel terpisah yang disusun berdampingan, masing-masing berwarna reg, hijau dan biru:

Piksel pada layar TFT

Masing-masing subpiksel ini hanya dapat menghasilkan salah satu warna utama cahaya, tetapi, karena mereka sangat berdekatan, warna-warna mereka berbaur bersama ketika Anda melihatnya, menghasilkan ilusi warna solid.

Untuk piksel putih (atau abu-abu), semua subpiksel sama-sama menyala. Dengan menyesuaikan intensitas subpiksel yang berbeda relatif satu sama lain, warna yang berbeda dapat dihasilkan. Pada ekstrem, untuk piksel merah, hijau atau biru murni, hanya subpiksel yang menghasilkan warna yang dihidupkan. Dengan demikian, garis merah-hijau-merah Anda akan, pada tingkat subpixel, diberikan sesuatu seperti ini:

Garis merah-hijau-merah pada layar TFT

Di sini, Anda dapat mulai melihat apa yang terjadi: biasanya ada celah dua subpiksel gelap di antara masing-masing yang menyala, tetapi pada batas di antara warna, jaraknya adalah tiga subpiksel (membuat pita gelap) atau hanya satu (membuat satu cahaya).

Tentu saja, efeknya lebih jelas ketika warna subpiksel terdekat dicampur bersama, seperti yang biasanya terjadi ketika Anda melihat layar:

Garis merah-hijau-merah pada layar TFT, kabur

Di sini, saya hanya menerapkan sedikit blur, mensimulasikan apa yang mungkin Anda lihat jika Anda misalnya melihat layar Anda melalui kaca pembesar. (Cobalah!) Pita gelap di batas kiri jelas di sini; pita terang di batas kanan tidak muncul dengan jelas, tetapi akan menjadi lebih terlihat jika gambar kabur lebih jauh.

Tentu saja, Anda tidak harus mempercayai gambar yang disimulasikan ini. Sebagai gantinya, izinkan saya menyertakan beberapa foto close-up yang saya ambil dari layar laptop saya, menampilkan gambar dalam pertanyaan Anda, dengan kamera digital murah:

Foto layar laptop menunjukkan batas warna merah / hijau
Foto layar laptop menunjukkan batas warna hijau / merah

Seperti pada gambar yang disimulasikan, garis gelap sangat jelas; garis terang kurang begitu, mungkin karena masih ada satu subpiksel gelap antara yang menyala, sehingga tidak ada puncak intensitas tunggal yang jelas.

Apa yang dapat Anda lakukan untuk memperbaikinya?

Pada prinsipnya, efek ini adalah sesuatu yang dapat dikompensasi oleh monitor Anda, misalnya dengan mendeteksi transisi yang bermasalah tersebut dan membiarkan warna-warna sedikit berdarah satu sama lain untuk memperlunak transisi. Ini akan menambah lebih banyak kerumitan dan biaya, itulah sebabnya sebagian besar produsen monitor tidak repot.

Namun, Anda dapat mencapai hasil yang sama dengan menambahkan garis sempit warna menengah (misalnya kuning, untuk merah dan hijau) di antara bidang warna yang sangat kontras. Warna garis ini kira-kira harus sesuai dengan pencahayaan rata-rata warna di sekitarnya, dengan mempertimbangkan gamma tampilan .

Ilmari Karonen
sumber
2
Saya tidak berpikir bahwa kompensasi benar-benar akan mempengaruhi biaya sebanyak itu (~ 1 euro per panel top). Mengingat masa lalu amiga mereka melakukan sesuatu yang serupa. Ini lebih seperti masalahnya agak jarang dan Anda tidak ingin masalah dengan penyesuaian penajaman / adaptif Anda untuk hampir tidak ada keuntungan. Hanya pengingat yang bagus bahwa teknologi penuh dengan pengorbanan dan Anda perlu mewaspadai beberapa di antaranya. +1 Hyvät kuvat kuitenki.
joojaa
2
Apakah menambahkan warna menengah benar-benar dilakukan dalam praktik?
Lilienthal
1
@ Lilienthal: Saya belum pernah melihatnya; sekali lagi, intinya adalah bahwa Anda tidak seharusnya melihatnya. Saya kira salah satu alasan mengapa kebutuhan jarang muncul dalam praktik adalah bahwa sebagian besar desainer cenderung menghindari menempatkan warna murni yang sangat kontras di samping satu sama lain.
Ilmari Karonen
35

Sulit untuk membuat apa yang dilihat semua orang di sini, karena setiap orang memiliki tampilan sendiri untuk melihat gambar. Di monitor saya, jika saya menyipit, saya bisa melihat garis hitam yang sangat tipis antara persegi panjang kiri merah dan persegi panjang tengah hijau. Dan sebaliknya, antara merah kanan dan tengah, saya melihat garis putih yang sangat tipis. Pada dasarnya, saya mengerti poster asli berarti mereka melihat ini (berlebihan):

Deskripsi masalah: garis hitam atau putih antara persegi panjang yang berdekatan, dibesar-besarkan.

Ini bukan band Mach , seperti yang disarankan dalam komentar pertanyaan. Pita mach tidak dilahirkan di antara warna-warna chrome yang berbeda, melainkan di antara warna-warna berlampu berbeda (misalnya antara dua warna abu-abu). Pita Mach yang sangat redup dibuat di sisi kanan kotak merah, karena merah penuh (RGB 255-0-0) sedikit kurang cerah daripada hijau penuh (RGB 0-255-0) pada monitor saya (dan pada semua monitor sRGB sebagai baik). (Meskipun warna gambar asli tidak murni Merah atau Hijau, perbedaan dalam cahaya persepsi mereka kira-kira sama.) Pada dasarnya, pita Mach menunjukkan seperti ini (sekali lagi, sangat berlebihan):

Ilustrasi band Mach, berlebihan.

Tetapi pita Mach tidak dapat membuat garis tipis putih atau hitam. Mereka hanya membuat sedikit perbedaan dalam kecerahan yang diamati pada area yang luas. Dan pita Mach selalu simetris: merah ke hijau sama dengan hijau ke merah. Tapi ini asimetris: batas lainnya hitam dan lainnya putih.

Sebaliknya, artefak visual yang kita lihat di sini adalah karena pengaturan sub-pixel LCD . Pengaturan yang paling umum adalah Merah-Hijau-Biru dari kiri ke kanan. Jadi antara setiap piksel merah penuh ada subpiksel hijau yang dimatikan dan subpiksel biru yang dimatikan. Sebaliknya, antara piksel merah penuh dan piksel hijau penuh, ada tiga subpiksel yang dimatikan: hijau, biru, dan merah. Ini menciptakan efek garis hitam tipis antara merah dan hijau. Seperti pada gambar di bawah ini:

Representasi sub-pixel dari warna merah memenuhi warna hijau.

Sekarang di sisi lain dari persegi panjang hijau, pertama ada subpixel hijau menyala, subpixel biru dimatikan dan kemudian yang merah. Sekarang antara subpiksel hijau dan merah menyala hanya ada satu subpiksel hitam. Ini menciptakan efek garis terang yang sangat tipis di antara batas hijau dan merah. Seperti di bawah ini:

Representasi sub-pixel dari warna hijau memenuhi warna merah.

Untuk melihat subpiksel pada monitor Anda, Anda mungkin perlu kaca pembesar. Penglihatan manusia Norman tidak dapat fokus pada jarak sangat dekat di mana Anda akan melihat piksel yang terpisah. Namun, sangat baik dalam melihat perbedaan kecerahan yang sedikit.

Sekarang, untuk membuktikan teorinya benar, Anda dapat menambahkan, misalnya, garis lebar 1 px RGB 128-255-0 antara persegi panjang kiri merah dan persegi panjang hijau dan lihat apakah garis hitamnya memudar, karena ini menambahkan beberapa lampu hijau subpixel sebelum kesenjangan. Anda juga dapat mencoba misalnya lebar 1 px RGB 85-85-0 antara persegi panjang merah dan hijau, untuk meredupkan sedikit subpiksel. Sayangnya, ini tidak dapat digunakan dalam desain yang sebenarnya, karena pertama-tama itu tergantung pada pengaturan subpiksel merah-hijau-biru dan pada saat yang sama membuat batas warna sedikit tercoreng.

Selain itu, ada kemungkinan algoritma penajaman layar terjadi. Pada dasarnya penajaman monitor membuat semua tepi warna lebih menonjol, menambahkan putih ke sisi yang lebih cerah dari tepi dan meredupkan hitam di sisi yang lebih gelap. Ini sangat mirip dengan efek Mach band, tetapi jauh lebih sempit dan biasanya lebih menonjol. Ini dapat ditemukan dengan menyesuaikan pengaturan ketajaman tampilan (semoga mungkin) dan melihat apakah efeknya berkurang.

Elmo Allén
sumber
2
ya itu masuk akal, namun tidak memperhitungkan semua efek, tapi ya sekarang saya melihat di 2 monitor berbeda dengan urutan berbeda yang diketahui efeknya sebenarnya terbalik. Namun saya tidak melihat warna yang tidak rata pada monitor utama, yang mungkin disebabkan oleh kualitas yang baik dari elemen gambar monitor. Satu-satunya hal yang saya lihat adalah band mach. Ps untuk menguji monitor terbalik ini.
joojaa
ah atau memang elemebts yang secara stokastik berjuang untuk mengatasi masalah ini
joojaa
Bagaimanapun, OP @candh berbicara tentang lebar 1px yang tumpang tindih. Band mach seharusnya tidak pernah sesempit ini. (Pokoknya, mereka bahkan tidak dapat didefinisikan dalam arti pixel, karena mereka terbentuk di otak. Artefak subpixel terbentuk di layar.) Namun, tanpa bicara lebih jauh tentang apa yang sebenarnya dilihatnya, kita terjebak dalam menemukan solusi yang tepat. (Dengan reputasi saya, saya belum dapat mengomentari pertanyaan itu.)
Elmo Allén
2
@ joojaa, tentu saja suara bising akan mengurangi efek garis lurus dari subpiksel, tetapi itu akan melempar bayi dengan air mandi, karena garis tajam lurus tidak akan terlihat begitu tajam lagi. Saya tidak berpikir ada cara yang baik untuk memerangi ini atau sebenarnya alasan apa pun. Pada layar modern efeknya sudah sangat kecil, dan sekarang dengan layar HiDPI perlahan-lahan datang bahkan pada komputer desktop, itu bahkan lebih penting. Selain itu, kontras kroma yang sangat besar jarang digunakan, dan ini tidak mempengaruhi kontras cahaya sama sekali.
Elmo Allén
2
Pada monitor R, G, B saya, saya mengurangi banyak artefak visual dengan menambah / mengurangi total dua piksel batas hingga 1/6 (total 1/3, akuntansi untuk shift-by-1/3-of- a-pixel). Lebih tepatnya: 1 0 0 | 1 0 0 | 1 x 0 | x 1 0 | 0 1 0 | 0 1 0: jika Anda mengatur dua komponen x ke 1/6 dan bukannya 0, Anda menghindari efek pita hitam. Dan pada 0 1 0 | 0 1 0 | 0 y 0 | y 0 0 | 1 0 0 | 1 0 0: Anda perlu mengatur hanya 5/6 untuk menghindari efek pita putih. (Nilai 1/6 dan 5/6 mungkin harus disempurnakan dengan mempertimbangkan tingkat persepsi mata.)
Armin Rigo
4

Ini adalah sifat warna ketika mereka datang bersama-sama, Mata manusia cenderung penyederhanaan untuk memperjelas hal-hal .. dan ilusi optik yang disebabkan oleh persepsi kita tentang warna.

fenomena yang disebut "Mach Bands Illusion" ini muncul dengan dua warna berbeda dalam Nilai. tidak dalam rona atau saturasi. dan diagram terlampir saya menunjukkan bahwa ilusi yang sama terjadi dalam warna abu-abu. abu-abu yang lebih terang akan lebih terang dibandingkan dengan yang lebih gelap di tengah dan abu-abu tengah tampak lebih terang di samping tepi abu-abu gelap kanan di sebelah kanan. Dan jadi satu.

masukkan deskripsi gambar di sini

jika penting bagi Anda, maka Anda memiliki dua pilihan.

  1. untuk memilih dua warna yang memiliki rasio hitam yang sama ini akan memastikan untuk mengurangi ilusi
  2. Anda dapat "menipu mata" dengan menambahkan garis kecil abu-abu di antara dua warna yang memiliki rata-rata abu-abu dari dua abu-abu dalam warna tersebut. lihat hasilnya di bawah ini. Anda mungkin menyadari bahwa strip atas kurang dalam ilusi bahwa strip bawah.

strip atas kurang ilusi

ini adalah versi yang diperbesar dengan garis abu-abu kecil.

Dia mengira
sumber
11
Ini salah. Diagram pertama (merah-hijau-merah) tidak sesuai dengan yang kedua (abu-abu terang-abu-abu pertengahan gelap) karena dua merah adalah warna yang sama. Jika itu tentang kecerahan, grafik garis akan simetris, seperti ini --\|\--/|/--, dan Anda akan melihat pita hitam di antarmuka merah-hijau dan hijau-merah, atau pita putih di keduanya.
David Richerby
5
Ini sangat mudah dibantah. Jika Anda memiliki laptop dan melihat garis-garis hitam putih maka balikkan laptop Anda. Anda akan menemukan garis hitam di sebelah kanan, bukan di sebelah kiri.
Slebetman
3
@hsawires: Idenya adalah untuk membuktikan sesuatu secara ilmiah. Membalikkan laptop dan melihat teori Anda menghilang sepenuhnya tentu saja merupakan penolakan yang valid. Anda tidak bisa begitu saja melambaikan tangan dengan mengatakan "Anda tidak dapat membuktikan atau menyangkal ilusi"; omong kosong apa
Lightness Races dengan Monica
1
@hsawires: Ngomong-ngomong, dengan membalikkan layar, jika bukan karena fakta bahwa ini membalik urutan dioda yang menciptakan warna berbeda di layar, tidak akan ada bedanya dengan bagaimana gambar dirasakan, karena gambarnya simetris. Kalau tidak, Anda bisa dengan melihat efek band Mach menentukan apakah layar telah diputar atau tidak, yang tidak masuk akal. Fakta bahwa gambar tidak dirasakan secara identik berarti bahwa sesuatu yang lain harus terjadi, yang disebabkan oleh struktur subpiksel yang dijelaskan oleh Ilmari dan Elmo.
HelloGoodbye
1
Untuk mendukung @HelloGoodbye, teman terpercaya kami Wikipedia ( en.wikipedia.org/wiki/Mach_bands ) mengatakan ini: "Ilusi tidak tergantung pada orientasi."
Nelson Rothermel
0

Saya tidak yakin, tetapi jika Anda mengenakan kacamata, di situlah masalahnya. Anda kemungkinan besar melihat aberasi kromatik , di mana merah dan hijau terpisah.

Semakin tebal kacamata Anda, semakin besar pengaruhnya. Coba putar kepala Anda dan perhatikan blok warna bergerak - saat Anda bergerak ke tepi kacamata Anda, kacamata Anda akan lebih tebal, dan dengan demikian menyebabkan pemisahan yang lebih besar.

pengguna295691
sumber
6
Itu bukan penyimpangan berwarna. Sepasang kacamata yang kompeten setengah jalan tidak akan menunjukkan aberasi kromatik saat menatap langsung ke monitor komputer.
David Richerby
Benar-benar ada aspek penyimpangan berwarna di sini. Hanya menyesuaikan sudut yang saya lihat di monitor membuat band hitam putih berubah ukuran. Dan sementara efek ini lebih terasa dengan kacamata, tetap ada tanpa kacamata - mata Anda juga memiliki lensa yang tidak sempurna! Mengabaikan bahwa warna-warna primer murni akan memiliki efek ini tidak ada bagian dari cerita.
David Sainty
@Sainty Seperti yang ditunjukkan oleh jawaban Ilmari , ini tentang jarak sub-pixel pada monitor. Jika Anda menggerakkan kepala ke samping, jarak sub-piksel yang tampak berubah sehingga efeknya berubah. Dan bagaimana aberasi kromatik menghasilkan warna hitam? Apakah Anda mengusulkan bahwa penyimpangannya sangat parah sehingga frekuensi cahaya berubah menjadi di luar wilayah spektrum yang terlihat?
David Richerby
@Richerby: Berdasarkan respons candh, dan beberapa penyelidikan yang lebih rinci pada bagian saya, ini bukan efek yang dilihatnya. Penyimpangan kromatik memang ada, dan membuat garis hitam - merah akan bergeser satu arah dan hijau yang lain; pikirkan prisma dan bagaimana mereka memisahkan warna. Bagian yang tersisa akan tampak hitam, meskipun bagi mata saya (ketika saya memakai kacamata) itu tampak lebih seperti merah "mengambang" di atas layar.
user295691
0

Utas ini di forum Adobe memiliki sedikit informasi tentang opsi "Align to pixel grid".

Jika saya ingat dengan benar, ini juga dapat diaktifkan di seluruh dokumen melalui File > Newdialog (di bagian paling bawah kotak).

Apakah pakar monitor hard-core ini benar, atau Anda hanya memiliki perbedaan yang dibuat oleh vektor yang tidak selaras dengan piksel pada monitor Anda dengan benar. Inilah sebabnya mengapa begitu banyak orang yang senang dengan kotak centang kecil ini yang ditambahkan ke Illustrator.

AVLien
sumber
3
Vektor disejajarkan dengan benar. Untuk memeriksa bahwa Anda hanya perlu menyalin-tempel gambar ke Photoshop atau ke editor gambar apa pun dan memperbesar. Tidak ada antialiasing antara piksel dan tidak ada piksel nada tengah sama sekali.
Elmo Allén
-2

Ini mungkin karena interaksi warna. Merah dan hijau adalah warna yang saling melengkapi dan ketika ditempatkan berdampingan tampaknya menciptakan garis hitam / gelap yang tampak seperti tumpang tindih. Anda dapat membaca dan melihat lebih banyak contoh di sini .

Illustrator otomatis memotret bentuk, jadi seharusnya tidak ada masalah tumpang tindih yang terjadi di sana.

tgr
sumber
2
Jika fenomena itu murni karena mata kita, Anda akan melihat hal yang sama pada batas merah-hijau seperti yang Anda lakukan pada batas hijau-merah.
David Richerby
Merah dan hijau, ketika ditempatkan berdampingan dan dilihat dari jarak yang cukup (misalnya melihat piksel kecil dari jarak beberapa kaki), akan menghasilkan warna kuning, bukan hitam.
Jason C
-2

Jika Anda mengaktifkan opsi Align New Objects to Pixel Grid di menu opsi Transform window (yang ada di sudut kanan atas jendela opsi apa pun), objek baru apa pun yang Anda gambar akan memiliki properti selaras-pixel yang disetel secara default. Untuk dokumen baru yang dibuat menggunakan profil dokumen web, opsi ini diaktifkan secara default. Untuk objek yang ada, Anda dapat mematikan penyelarasan kisi pixel dengan memilih Align to Pixel Grid di jendela Transform itu sendiri (diperlihatkan setelah mencentang Opsi Lainnya di menu opsi jendela).

Tampilan renyah dari guratan garis pixel dipertahankan dalam output raster pada resolusi 72-ppi saja. Untuk resolusi lain, ada kemungkinan besar stroke semacam itu menghasilkan hasil anti-alias.

Objek yang disejajarkan dengan piksel, tetapi tidak memiliki segmen vertikal atau horizontal yang lurus, tidak dimodifikasi untuk disejajarkan dengan garis piksel. Misalnya, karena persegi panjang yang diputar tidak memiliki segmen vertikal atau horizontal yang lurus, itu tidak didorong untuk menghasilkan jalur yang tajam, ketika properti selaras-pixel diatur untuk itu.

Dokumentasi Adobe ini menjelaskannya secara lebih luas: http://helpx.adobe.com/illustrator/using/drawing-pixel-aligned-paths-web.html

Rahul Chouhan
sumber
1
opsi mana, tepatnya?
candh