ทำไมรูปสี่เหลี่ยมผืนผ้าที่อยู่ติดกันอย่างสมบูรณ์แบบทั้งสองสร้างเส้นสีดำหรือสีขาวในระหว่างราวกับว่าพวกเขาทับซ้อนกันหรือไม่ติดกัน?

ฉันมีการออกแบบที่เรียบ (ก็ควรจะเป็น) แต่เส้นสีดำและสีขาวระหว่างรูปร่างเหล่านี้น่ารำคาญมาก ... [ไม่มีจังหวะ] ลองดู:

เห็นเส้นเหล่านี้ระหว่างสี่เหลี่ยมสองอันซ้อนกันหรือไม่ ฉันจะแก้ไขได้อย่างไร (ฉันสร้างด้วย Photoshop แต่มีปัญหาเดียวกันกับ Paint.net และ Adobe Illustrator) มีบางอย่างที่มีสีหรือไม่ หรือฉันเห็นมากเกินไป : P

ในฐานะที่เป็น Elmo Allénบันทึกอย่างถูกต้องนี่ไม่ใช่ภาพลวงตาทางแสงไม่ใช่ข้อบกพร่องในโปรแกรมแก้ไขกราฟิกของคุณ แต่เป็นผลที่เกิดจากเทคโนโลยีจอภาพที่คุณใช้

โดยเฉพาะอย่างยิ่งในหน้าจอคอมพิวเตอร์TFT-LCD ที่ทันสมัยโดยทั่วไปแต่ละพิกเซลประกอบด้วยพิกเซลย่อยสามตัวที่จัดเรียงแบบเคียงข้างกันตามลำดับ reg สีสีเขียวและสีน้ำเงิน:

แต่ละ subpixels สามารถสร้างได้เพียงหนึ่งในสีหลักของแสง แต่เนื่องจากพวกมันอยู่ใกล้กันมากสีของพวกมันจึงกลมกลืนกันเมื่อคุณมองดูมันจะสร้างภาพลวงตาของสีทึบ

สำหรับพิกเซลสีขาว (หรือสีเทา) พิกเซลย่อยทั้งหมดจะสว่างเท่ากัน ด้วยการปรับความเข้มของ subpixels ที่แตกต่างกันซึ่งสัมพันธ์กันทำให้สามารถสร้างสีที่ต่างกันได้ ที่สุดขีดสำหรับพิกเซลสีแดงบริสุทธิ์สีเขียวหรือสีน้ำเงินเพียงพิกเซลย่อยที่ผลิตสีนั้นเปิดอยู่ ดังนั้นแถบสีแดง - เขียว - แดงของคุณจะแสดงในระดับพิกเซลย่อยดังนี้:

ที่นี่คุณสามารถเริ่มต้นดูว่าเกิดอะไรขึ้น: โดยปกติจะมีช่องว่างของจุดดำมืดสองจุดระหว่างจุดสว่างแต่ละจุด แสงหนึ่ง)

แน่นอนว่าเอฟเฟกต์จะชัดเจนมากขึ้นเมื่อสีของ subpixels ที่อยู่ใกล้เคียงถูกผสมเข้าด้วยกันตามปกติจะเกิดขึ้นเมื่อคุณดูที่หน้าจอ:

ที่นี่ฉันได้ใช้ความเบลอเพียงเล็กน้อยโดยจำลองสิ่งที่คุณอาจเห็นถ้าคุณมองที่หน้าจอผ่านแว่นขยาย (ลองเลย!) แถบสีเข้มที่ขอบซ้ายนั้นชัดเจน แถบสว่างที่ขอบเขตด้านขวาจะไม่แสดงขึ้นอย่างชัดเจน แต่จะเห็นได้ชัดเจนขึ้นหากภาพเบลอเพิ่มเติม

แน่นอนคุณไม่ต้องเชื่อถือภาพจำลองเหล่านี้ ให้ฉันใส่ภาพโคลสอัพสองสามอันที่ฉันถ่ายจากหน้าจอแล็ปท็อปของฉันแสดงภาพในคำถามของคุณด้วยกล้องดิจิตอลราคาถูก:

ในภาพจำลองเส้นสีดำนั้นชัดเจนมาก เส้นสว่างน้อยกว่านั้นอาจจะเป็นเพราะยังมีพิกเซลย่อยมืดหนึ่งพิกเซลระหว่างจุดที่มีแสงดังนั้นจึงไม่มีจุดสูงสุดความเข้มที่ชัดเจนเพียงอย่างเดียว

คุณสามารถแก้ไขปัญหานี้ได้อย่างไร

โดยหลักการแล้วเอฟเฟกต์นี้เป็นสิ่งที่มอนิเตอร์ของคุณสามารถชดเชยได้โดยอัตโนมัติเช่นโดยการตรวจสอบการเปลี่ยนผ่านที่เป็นปัญหาดังกล่าวและปล่อยให้สีเลือดออกเล็กน้อยซึ่งกันและกันเพื่อทำให้การเปลี่ยนแปลงนุ่มนวลขึ้น สิ่งนี้จะเพิ่มความซับซ้อนและค่าใช้จ่ายมากขึ้นซึ่งเป็นเหตุผลที่ผู้ผลิตจอภาพส่วนใหญ่ไม่ใส่ใจ

อย่างไรก็ตามคุณสามารถบรรลุผลลัพธ์เดียวกันได้ด้วยการเพิ่มแถบแคบ ๆ ของสีกลาง (เช่นสีเหลืองสำหรับสีแดงและสีเขียว) ระหว่างฟิลด์สีที่มีความเปรียบต่างสูง สีของแถบนี้ประมาณควรจะตรงกับค่าเฉลี่ยของความสว่างของสีโดยรอบการแกมมาจอแสดงผลเข้าบัญชี

มันยากที่จะทำสิ่งที่ทุกคนเห็นที่นี่เพราะทุกคนมีการแสดงของตัวเองเพื่อดูภาพ บนหน้าจอของฉันถ้าฉันเหล่ฉันเห็นเส้นสีดำบาง ๆ ระหว่างสี่เหลี่ยมสีแดงซ้ายและสี่เหลี่ยมผืนผ้ากลางสีเขียว ในทางตรงกันข้ามระหว่างสีแดงกับสีกลางที่ถูกต้องฉันเห็นเส้นสีขาวบาง ๆ โดยพื้นฐานแล้วฉันเข้าใจว่าโปสเตอร์ดั้งเดิมหมายความว่าพวกเขาเห็นสิ่งนี้ (เกินจริง):

สิ่งเหล่านี้ไม่ใช่วงจักรมัคตามที่แนะนำในคำถามแสดงความคิดเห็น วงจักรไม่ได้เกิดในระหว่างสีที่แตกต่างกันของสีโครม แต่แทนระหว่างสีที่ต่างไปจากแสง (เช่นระหว่างสีเทาสองเฉดสี) วงจักร Mach ที่จาง ๆ ถูกสร้างขึ้นที่ด้านขวาของสี่เหลี่ยมสีแดงเนื่องจากสีแดงเต็ม (RGB 255-0-0) นั้นมีความสว่างน้อยกว่าสีเขียวเต็ม (RGB 0-255-0) เล็กน้อยบนจอภาพของฉัน (และบนจอภาพ sRGB ทั้งหมดเช่น ดี). (ถึงแม้ว่าสีของภาพต้นฉบับจะไม่บริสุทธิ์สีแดงหรือสีเขียวความแตกต่างของความสว่างที่รับรู้ของพวกเขาจะเท่ากัน) โดยทั่วไปวงจักรของมัคแสดงเช่นนี้ (อีกมากเกินจริง):

แต่วงจักรไม่สามารถสร้างเส้นบางสีขาวหรือดำ พวกเขาสร้างความแตกต่างเล็กน้อยในความสว่างที่สังเกตได้ในบริเวณกว้าง และวงจักรมัคมีความสมมาตรอยู่เสมอ: สีแดงถึงสีเขียวเหมือนสีเขียวถึงสีแดง แต่นี่ไม่สมมาตรขอบเขตอื่นคือดำและอื่น ๆ เป็นสีขาว

แต่สิ่งที่เราเห็นสิ่งประดิษฐ์ที่นี่ภาพเป็นเพราะการจัดเรียงแอลซีดีพิกเซลย่อย การจัดเรียงตามปกติคือแดง - เขียว - น้ำเงินจากซ้ายไปขวา ดังนั้นระหว่างพิกเซลสีแดงแบบเต็มจะมีพิกเซลย่อยสีเขียวที่ถูกปิดและพิกเซลสีฟ้าที่ถูกปิด ระหว่างพิกเซลสีแดงแบบเต็มและพิกเซลสีเขียวแบบเต็มแทนจะมีสาม subpixels ที่ถูกปิดใช้งาน: สีเขียวสีน้ำเงินและสีแดง สิ่งนี้จะสร้างเอฟเฟกต์ของเส้นสีดำบาง ๆ ระหว่างสีแดงและสีเขียว ดังในภาพด้านล่าง:

ตอนนี้ที่อีกด้านหนึ่งของสี่เหลี่ยมสีเขียวมีพิกเซลย่อยสีเขียวสว่างแรกพิกเซลย่อยสีฟ้าที่ถูกปิดใช้งานและพิกเซลสีแดง ขณะนี้ระหว่างตัวพิมพ์ย่อยสีเขียวและสีแดงสว่างมีเพียงหนึ่งพิกเซลย่อยสีดำ สิ่งนี้จะสร้างเอฟเฟกต์ของเส้นสว่างที่บางมากซึ่งวิ่งระหว่างเส้นขอบสีเขียวและสีแดง ดังต่อไปนี้:

หากต้องการดูเครื่องหมายย่อยบนจอภาพคุณอาจต้องใช้แว่นขยาย สายตามนุษย์นอร์แมนไม่สามารถโฟกัสได้ในระยะใกล้ดังนั้นคุณจะเห็นพิกเซลแยกกัน อย่างไรก็ตามมันดีมากที่จะเห็นความแตกต่างของความสว่างเล็กน้อยนั้น

ทีนี้เพื่อพิสูจน์ทฤษฎีที่ถูกต้องคุณสามารถเพิ่มเช่น 1 px wide line ของ RGB 128-255-0 ระหว่างสี่เหลี่ยมสีแดงซ้ายและสี่เหลี่ยมสีเขียวและดูว่าเส้นสีดำจางหายไปหรือไม่เพราะนี่เป็นการเพิ่มแสงสีเขียว subpixel บางส่วนก่อน ช่องว่าง. คุณสามารถลองใช้เช่น RGB 1 หน้ากว้าง 85-85-0 ระหว่างสี่เหลี่ยมสีเขียวและสี่เหลี่ยมสีแดงด้านขวาเพื่อหรี่แสงย่อยได้เล็กน้อย น่าเสียดายที่สิ่งนี้ไม่สามารถใช้ในการออกแบบจริงได้เนื่องจากประการแรกมันขึ้นอยู่กับการจัดพิกเซลย่อยสีแดง - เขียว - น้ำเงินและในเวลาเดียวกันทำให้ขอบของสีมีรอยเปื้อนเล็กน้อย

นอกจากนี้ยังมีความเป็นไปได้ของขั้นตอนวิธีการปรับความคมชัดหน้าจอ โดยทั่วไปการตรวจสอบความคมชัดทำให้ขอบสีมีความโดดเด่นยิ่งขึ้นโดยเพิ่มสีขาวลงไปที่ขอบที่สว่างกว่าของขอบภาพและทำให้มืดลงที่ด้านมืด นี่เป็นเหมือนเอฟเฟกต์แถบมัค แต่แคบกว่าและมักเด่นกว่ามาก สามารถพบได้โดยการปรับการตั้งค่าความคมชัดของหน้าจอ (หวังว่าจะเป็นไปได้) และดูว่าเอฟเฟกต์จะลดลงหรือไม่

นี่คือธรรมชาติของสีเมื่อพวกเขามารวมกันดวงตาของมนุษย์มีแนวโน้มที่จะทำให้สิ่งต่าง ๆ ชัดเจนขึ้น .. และภาพลวงตาที่เกิดจากการรับรู้สีของพวกเรา

ปรากฏการณ์นี้ซึ่งเรียกว่า "Mach Bands Illusion" จะปรากฏขึ้นพร้อมกับสองสีที่แตกต่างกันในค่า ไม่ได้อยู่ในสีสันหรือความอิ่มตัว และแผนภาพที่แนบมาของฉันแสดงว่าภาพลวงตาเดียวกันเกิดขึ้นในสีเทา สีเทาที่อ่อนกว่าจะเบากว่าเมื่อเทียบกับสีเข้มที่อยู่ตรงกลางและสีเทากลางจะปรากฏขึ้นที่ด้านข้างของสีเทาเข้มด้านขวาที่ด้านขวา และอีกอย่างหนึ่ง

ถ้ามันสำคัญกับคุณคุณมีสองทางเลือก

1. เพื่อเลือกสองสีที่มีอัตราส่วนดำเหมือนกันสิ่งนี้จะช่วยลดภาพลวงตา
2. คุณสามารถ "หลอกตา" โดยเพิ่มเส้นสีเทาเล็ก ๆ ระหว่างสองสีที่มีค่าเฉลี่ยของสีเทาสองสีในสีเหล่านั้น ดูผลลัพธ์ที่นี่ คุณอาจจำได้ว่าแถบด้านบนนั้นน้อยกว่าในภาพลวงตาที่แถบด้านล่าง

ฉันไม่แน่ใจ แต่ถ้าคุณใส่แว่นตานั่นคือปัญหาที่จะต้องโกหก คุณมักจะเห็นความผิดปกติของสีซึ่งสีแดงและสีเขียวกำลังแยก

ยิ่งแว่นตาของคุณหนาขึ้นเอฟเฟกต์เด่นชัดก็จะยิ่งมากขึ้นเท่านั้น ลองหันหัวของคุณและดูการเคลื่อนไหวบล็อคสี - ในขณะที่คุณเคลื่อนไปที่ขอบของแว่นตาของคุณแว่นตาของคุณจะหนาขึ้นและทำให้เกิดการแยกมากขึ้น

กระทู้ในฟอรัมของ Adobeมีบิตที่ดีในการที่ตัวเลือก "จัดชิดกับพิกเซลกริด"

หากฉันจำอย่างถูกต้องสิ่งนี้สามารถเปิดใช้งานเอกสารได้ทั่วทั้งFile > Newกล่องโต้ตอบ (ที่ด้านล่างสุดของกล่อง)

ผู้เชี่ยวชาญด้านฮาร์ดคอร์เหล่านี้มีความถูกต้องหรือคุณมีความคลาดเคลื่อนที่เวกเตอร์สร้างขึ้นซึ่งไม่สอดคล้องกับพิกเซลบนจอภาพของคุณอย่างถูกต้อง นี่เป็นเหตุผลว่าทำไมคนจำนวนมากจึงรู้สึกตื่นเต้นเกี่ยวกับช่องทำเครื่องหมายเล็ก ๆ นี้ที่เพิ่มเข้ามาใน Illustrator

นี่อาจเป็นเพราะการโต้ตอบของสี สีแดงและสีเขียวเป็นสีเสริมและเมื่อวางเคียงข้างกันดูเหมือนจะสร้างเส้นสีดำ / สีเข้มที่ดูเหมือนจะทับซ้อนกัน คุณสามารถอ่านและดูตัวอย่างเพิ่มเติมที่นี่

Illustrator จะจัดวางรูปร่างโดยอัตโนมัติดังนั้นจึงไม่ควรมีปัญหาการทับซ้อนเกิดขึ้น

หากคุณเปิดใช้งานตัวเลือกจัดวัตถุใหม่ให้กับ Pixel Gridในเมนูตัวเลือกของการแปลงหน้าต่าง (อันที่มุมบนขวาของหน้าต่างตัวเลือกใด ๆ ) วัตถุใหม่ใด ๆ ที่คุณวาดมีคุณสมบัติการจัดตำแหน่งพิกเซลตามค่าเริ่มต้น สำหรับเอกสารใหม่ที่สร้างขึ้นโดยใช้โปรไฟล์เอกสารเว็บตัวเลือกนี้จะเปิดใช้งานตามค่าเริ่มต้น สำหรับวัตถุที่มีอยู่คุณสามารถปิดการจัดแนวพิกเซลกริดโดยเลือกAlign to Pixel Gridในหน้าต่างTransformตัวมันเอง (แสดงหลังจากทำเครื่องหมายที่ตัวเลือกเพิ่มเติมในเมนูตัวเลือกของหน้าต่าง)

การปรากฏตัวที่คมชัดของลายเส้นที่เรียงพิกเซลจะคงอยู่ในเอาต์พุตแบบแรสเตอร์ที่ความละเอียด 72-ppi เท่านั้น สำหรับวิธีแก้ปัญหาอื่นมีความเป็นไปได้สูงที่จะเกิดผลลัพธ์ที่ต่อต้านนามแฝง

วัตถุที่จัดแนวพิกเซล แต่ไม่มีเซ็กเมนต์แนวตั้งหรือแนวนอนตรงจะไม่ถูกปรับเปลี่ยนเพื่อจัดตำแหน่งพิกเซลกริด ตัวอย่างเช่นเนื่องจากสี่เหลี่ยมผืนผ้าที่หมุนไม่มีส่วนแนวตั้งหรือแนวนอนแบบตรงจึงไม่ถูกสะกิดให้สร้างเส้นทางที่คมชัดเมื่อมีการตั้งค่าคุณสมบัติการจัดแนวพิกเซล

เอกสารของ Adobe นี้บอกได้กว้างกว่า: http://helpx.adobe.com/illustrator/using/drawing-pixel-aligned-paths-web.html