Чому два ідеально сусідніх прямокутника створюють чорні або білі лінії між ними так, ніби вони перетинаються чи не зовсім суміжні?

У мене плоский дизайн (ну, це має бути), але ці чорно-білі лінії між формами настільки дратують ... [без штриху] погляньте:

Бачите ці лінії між двома прямокутниками, що перекриваються? Як я можу це виправити? (Я створив це за допомогою Photoshop, але є однакова проблема із використанням Paint.net та Adobe Illustrator) Це щось із кольором? Або я бачу занадто багато? : P

Як правильно зазначає Елмо Ален, це не оптична ілюзія, не помилка у вашому графічному редакторі, а ефект, спричинений технологією монітора, яку ви використовуєте.

Зокрема, на типовому сучасному екрані комп'ютера TFT-LCD кожен піксель фактично складається з трьох окремих підпікселів, розташованих поруч, відповідно кольорового регістру, зеленого та синього:

Кожен з цих субпікселів може створювати лише один з основних кольорів світла, але, оскільки вони дуже близько один від одного, їх кольори поєднуються, коли ви дивитесь на них, створюючи ілюзію суцільного кольору.

Для білого (або сірого) пікселя всі субпікселі однаково освітлені. Регулюючи інтенсивність різних субпікселів відносно один одного, можна отримати різні кольори. У крайньому випадку, для чистого червоного, зеленого або синього пікселя вмикаються лише субпікселі, що створюють цей колір. Таким чином, ваша червоно-зелена-червона смуга на рівні субпікселів виведе приблизно так:

Тут ви можете почати бачити, що відбувається: зазвичай є проміжок у двох темних підпікселів між кожною освітленою, але на межах між кольорами проміжок є або трьома підпікселями (створення темної смуги), або просто одним (створення легкий).

Звичайно, ефект є більш очевидним, коли кольори сусідніх пікселів поєднуються між собою, як це зазвичай відбувається, коли ви дивитесь на екран:

Тут я застосував лише помірну кількість розмиття, імітуючи те, що ви можете побачити, якби, наприклад, дивились на екран через збільшувальне скло. (Спробуйте!) Темна смуга на лівій кордоні тут очевидна; яскрава смуга на правій межі відображається не так чітко, але вона стане помітнішою, якби зображення було розмито далі.

Звичайно, вам не доведеться довіряти цим імітованим зображенням. Натомість дозвольте мені включити пару знімків, які я зробив із екрана свого ноутбука, із зображенням вашого запитання, із дешевою цифровою камерою:

Як і в імітованому зображенні, темна лінія дуже очевидна; яскрава лінія є менш такою, можливо, тому, що між освітленими все ще є один темний субпіксель, тому не існує такого чіткого піку одного інтенсивності.

Що ви можете зробити, щоб це виправити?

В принципі, цей ефект може дещо компенсувати ваш монітор, наприклад, виявивши такі проблемні переходи та давши кольорам трохи кровоточити один в одного, щоб пом’якшити перехід. Це додало б більшої складності та витрат, саме тому більшість виробників моніторів не турбуються.

Однак можна досягти того ж результату самостійно, додавши вузьку смугу проміжного кольору (наприклад, жовтий, для червоного та зеленого) між такими висококонтрастними кольоровими полями. Колір цієї смуги повинен приблизно відповідати середній яскравості навколишніх кольорів, враховуючи гамму дисплея .

Важко зробити саме те, що тут всі бачать, адже у кожного є свій дисплей, щоб побачити зображення. На моніторі, якщо я косячусь, я бачив дуже тонку чорну лінію між лівим червоним прямокутником та зеленим середнім прямокутником. І навпаки, між правою червоною і серединою я бачу дуже тонку білу лінію. По суті, я розумію, що оригінальний плакат означає, що вони бачать це (перебільшено):

Це не групи Мача , як пропонується в коментарях до запитання. Діапазони Mach не народжуються між різними хромованими кольорами, а замість різних кольорів (наприклад, між двома відтінками сірого). У правій частині червоного прямокутника створюється дуже слабкий діапазон Маха, тому що повний червоний (RGB 255-0-0) трохи менш яскравий, ніж повний зелений (RGB 0-255-0) на моєму моніторі (і на всіх моніторах sRGB як Ну). (Незважаючи на те, що кольори оригінального зображення не є чистими Червоним або Зеленим, різниця в їх сприйнятій легкості приблизно однакова.) В основному, групи Маха показують так (знову ж таки, сильно перебільшені):

Але групи Mach не можуть створити білі або чорні тонкі лінії. Вони створюють лише незначну різницю в спостережуваній яскравості на широкій площі. А смуги Маха завжди симетричні: червоно-зелене - те саме, що зелене-червоне. Але це несиметрично: інша межа чорна, а інша - біла.

Натомість, який візуальний артефакт ми бачимо тут через розташування підпіксельних РК-дисплеїв . Найбільш звична композиція - Червоно-Зелений-Синій зліва направо. Таким чином, між кожним повним червоним пікселем є відключений зелений субпіксель та відключений синій субпіксель. Між повним червоним пікселем та повним зеленим пікселем натомість є три вимкнені субпікселі: зелений, синій та червоний. Це створює ефект тонкої чорної лінії між червоним і зеленим. Як на зображенні нижче:

Тепер з іншого боку зеленого прямокутника спочатку горить зелений субпіксель, відключений синій субпіксель, а потім червоний. Зараз між освітленими зеленими та червоними субпікселями є лише один чорний субпіксель. Це створює ефект дуже тонкої яскравої лінії, що проходить між зеленою та червоною межею. Як зазначено нижче:

Щоб побачити субпікселі на моніторі, вам, мабуть, знадобиться лупа. Норманський людський зір не може зосередитися на такій близькій відстані, де ви побачили б окремі пікселі. Однак, дуже добре помітити незначну різницю яскравості.

Тепер, щоб довести теорію правильною, ви можете додати, наприклад, 1 px широку лінію RGB 128-255-0 між лівим червоним прямокутником та зеленим прямокутником і побачити, чи чорна лінія згасає, тому що до цього додається зелене світло підпікселя раніше розрив. Також ви можете спробувати, наприклад, RGB 85-85-0 шириною 1 пікс між зеленим та правим червоним прямокутником, щоб трохи затемнити підпікселі. На жаль, це не може бути використане в реальному дизайні, оскільки, по-перше, це залежить від розташування червоного-синьо-синього субпікселя і в той же час робить кольорову межу трохи розмитою.

Крім того, існує можливість алгоритму різкості екрана. В основному різкість монітора робить усі кольори кольорів більш помітними, додаючи білу до більш яскравої сторони краю і затемнюючи до чорного на більш темній стороні. Це дуже схоже на ефект групи Маха, але набагато вужчий і зазвичай більш помітний. Це можна дізнатися, відрегулювавши налаштування різкості дисплея (сподіваємось, що можливо) і побачити, чи зменшується ефект.

Така природа кольорів, коли вони поєднуються. Людське око прагне спрощення, щоб з’ясувати речі .. та оптичні ілюзії, спричинені нашим сприйняттям кольорів.

це явище, яке називається "Ілюзія Мах-груп", з'являється з будь-якими двома кольорами, різними за значенням. ні в відтінку, ні в насиченні. і моя додана схема показує, що та ж ілюзія трапляється в сірих кольорах. світліший сірий буде світлішим порівняно з темнішим посередині, а середній сірий виглядає світлішим біля краю правого темно-сірого справа. І так один.

якщо це важливо для вас, то у вас є два варіанти.

1. вибрати два кольори, які мають однакове співвідношення чорного, це дозволить зменшити ілюзію
2. ви можете «обдурити око», додавши сіру крихітну лінію між двома кольорами, які мають середній сірий колір із двох сірих кольорів. див. результат нижче. ви можете визнати, що верхня смужка менше в ілюзії, ніж нижня.

Я не можу бути впевнений, але якщо ви носите окуляри, саме тут буде критися проблема. Ви, швидше за все, бачите хроматичну аберацію , в якій червоні і зелень розділяються.

Чим товщі окуляри, тим яскравіше буде ефект. Спробуйте повернути голову і спостерігати за тим, як кольорові блоки рухаються - коли ви рухаєтеся до краю окулярів, окуляри будуть товстішими і, таким чином, спричинять більшу розлуку.

Цей потік на форумі Adobe має хорошу інформацію про те, де знаходяться параметри «Вирівняти по піксельній сітці».

Якщо я добре пам’ятаю, це також можна ввімкнути в документі через File > Newдіалогове вікно (в самому нижньому куті поля).

Або ці коректні моніторні експерти коректні, або у вас просто виникає розбіжність, створена вектором, що не правильно відповідає пікселям на моніторі. Саме тому стільки людей схвильовані тим, що цей маленький прапорець додається до Illustrator.

Це може бути пов’язано з взаємодією кольорів. Червоний і зелений - це допоміжні кольори, і якщо розміщуватись поруч, схоже, створюється чорна / темна лінія, яка здається перекриттям. Ви можете прочитати та побачити більше прикладів тут .

Автоматичний ілюстратор вставляє фігури на свої місця, тому там не повинно виникати жодних питань перекриття.

Якщо ввімкнути опцію " Вирівняти нові об'єкти до сітки пікселів" у меню параметрів вікна " Трансформація " (у верхньому правому куті будь-якого вікна параметрів), будь-які нові об'єкти, які ви малюєте, мають властивість вирівнювання пікселів за замовчуванням. Для нових документів, створених за допомогою профілю веб-документа, ця опція включена за замовчуванням. Для існуючих об'єктів ви можете вимкнути вирівнювання піксельної сітки, вибравши Вирівняти по піксельній сітці у самому вікні Трансформація (відображається після позначення пункту Додаткові параметри у меню параметрів вікна).

Чіткий вигляд штрихів, вирівнюваних пікселями, зберігається у випуску растру лише з роздільною здатністю 72 піп. Для інших резолюцій існує велика ймовірність таких ударів, що дають результати антиаліда.

Об'єкти, вирівняні пікселями, але не мають прямих вертикальних чи горизонтальних сегментів, не модифікуються для вирівнювання до піксельної сітки. Наприклад, оскільки обертовий прямокутник не має прямих вертикальних або горизонтальних сегментів, його не підштовхують для отримання чітких контурів, коли для нього встановлено властивість вирівнювання пікселів.

Ця документація Adobe розповідає про це ширше: http://helpx.adobe.com/illustrator/using/drawing-pixel-aligned-paths-web.html