Почему два совершенно смежных прямоугольника создают черные или белые линии между ними, как будто они перекрываются или не совсем соседствуют?

53

У меня плоский дизайн (ну, это должно быть), но эти черные и белые линии между формами так раздражают ... [без обводки] взгляните:

проблема

Видите эти линии между двумя перекрывающимися прямоугольниками? Как я могу это исправить? (Я создал это с помощью Photoshop, но с Paint.net и Adobe Illustrator такая же проблема) Это что-то с цветом? Или я вижу слишком много? :П

candh
источник
Я думаю, что ключевым моментом при принятии решения, является ли это полосой Маха или чем-то еще, является асимметрия: «как вы можете видеть, правая сторона прямоугольника перекрывалась на 1 пиксель (как вы сказали), а левая сторона - нет». Полосы Маха должны появляться симметрично с обеих сторон.
Элмо Аллен
1
Я увеличил (до 25600%), так что это определенно субпиксельный эффект. Кстати, я вижу артефакты только на 1 из 3 мониторов. Два других выглядят примо шарпо !! Так что это определенно зависит от пиксельной конструкции вашего монитора.
Осьминог
1
@ Осьминог: какой бренд контролирует? Это моя следующая покупка, и я хотел бы купить что-то объективно более высокого качества.
dotancohen

Ответы:

90

Как правильно отмечает Элмо Аллен, это не оптическая иллюзия и не ошибка в вашем графическом редакторе, а эффект, вызванный используемой вами технологией монитора.

В частности, на типичном современном компьютерном экране TFT-LCD каждый пиксель фактически состоит из трех отдельных подпикселей, расположенных рядом друг с другом, соответственно окрашенных в красный, зеленый и синий цвета:

Пиксели на TFT-экране

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

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

Красно-зелено-красная полоса на TFT-экране

Здесь вы можете начать видеть, что происходит: обычно между двумя подсвеченными светятся промежутки в два темных субпикселя, но на границах между цветами, промежуток составляет либо три субпикселя (создание темной полосы), либо только один (создание легкий один).

Конечно, эффект более очевиден, когда цвета соседних субпикселей смешаны вместе, как обычно происходит, когда вы смотрите на экран:

Красно-зелено-красная полоса на TFT-экране, размытая

Здесь я применил только умеренное количество размытия, имитируя то, что вы могли бы увидеть, например, если бы вы смотрели на экран через увеличительное стекло. (Попробуйте!) Темная полоса на левой границе здесь очевидна; яркая полоса на правой границе не проявляется так отчетливо, но она станет более заметной, если изображение будет размыто дальше.

Конечно, вам не нужно доверять этим смоделированным изображениям. Вместо этого позвольте мне добавить пару фотографий, снятых крупным планом на экране моего ноутбука, с изображением вашего вопроса с помощью дешевой цифровой камеры:

Фотография экрана ноутбука, показывающая границу красного / зеленого цвета
Фотография экрана ноутбука, показывающая границу зеленого / красного цвета

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

Что вы можете сделать, чтобы это исправить?

В принципе, этот эффект может быть автоматически компенсирован вашим монитором, например, обнаруживая такие проблемные переходы и позволяя цветам слегка сливаться друг с другом, чтобы смягчить переход. Это добавило бы больше сложности и стоимости, поэтому большинство производителей мониторов не беспокоятся об этом.

Однако вы можете достичь того же результата самостоятельно, добавив узкую полосу промежуточного цвета (например, желтого для красного и зеленого) между такими высококонтрастными цветовыми полями. Цвет этой полосы должен приблизительно соответствовать средней яркости окружающих цветов, принимая во внимание гамму дисплея .

Илмари Каронен
источник
2
Я не думаю, что компенсация действительно повлияла бы на стоимость всего этого (~ 1 евро за верхнюю часть панели). Учитывая старые дни амиги, они сделали нечто подобное. Это больше похоже на то, что проблема несколько редкая, и вам не нужны проблемы с вашими резкими / адаптивными настройками почти без усиления. Просто хорошее напоминание о том, что технологии полны компромиссов, и вам нужно знать о некоторых из них. +1 Hyvät kuvat kuitenki.
joojaa
2
Действительно ли добавление промежуточных цветов выполняется на практике?
Лилиенталь
1
@Lilienthal: я никогда не видел это; опять же, суть в том, что вы не должны это видеть. Я полагаю, что одна из причин, почему на практике редко возникает необходимость, заключается в том, что большинство дизайнеров в любом случае стараются избегать размещения таких сильно контрастирующих чистых цветов.
Илмари Каронен
35

Трудно сделать именно то, что каждый видит здесь, потому что у каждого свой дисплей, чтобы увидеть изображение. На моем мониторе, если я прищурился, я мог видеть очень тонкую черную линию между левым красным прямоугольником и зеленым средним прямоугольником. И напротив, между правой красной и средней я вижу очень тонкую белую линию. По сути, я понимаю, что оригинальный плакат означает, что они видят это (преувеличено):

Описание проблемы: черная или белая линия между соседними прямоугольниками, преувеличены.

Это не полосы Маха , как предлагается в комментариях к вопросу. Полосы Маха рождаются не между разными цветами, а между разными цветами (например, между двумя оттенками серого). В правой части красного прямоугольника создается очень слабая полоса Маха, потому что полностью красный (RGB 255-0-0) немного менее яркий, чем полностью зеленый (RGB 0-255-0) на моем мониторе (и на всех мониторах sRGB как Что ж). (Несмотря на то, что цвета исходного изображения не являются чисто красным или зеленым, разница в воспринимаемой ими яркости приблизительно одинакова.) По сути, полосы Маха выглядят так (опять же, сильно преувеличены):

Иллюстрация полос Маха, преувеличены.

Но полосы Маха не могут создавать белые или черные тонкие линии. Они только создают небольшую разницу в наблюдаемой яркости на широкой области. И полосы Маха всегда симметричны: красный-зеленый такой же, как зеленый-красный. Но это асимметрично: другая граница черная, а другая белая.

Вместо этого мы видим визуальный артефакт из -за расположения субпикселей на ЖК-дисплее . Наиболее обычная композиция - красно-зелено-голубая слева направо. Таким образом, между каждым полным красным пикселем есть выключенный зеленый подпиксель и выключенный синий подпиксель. Вместо этого между красным красным пикселем и зеленым пикселем вместо этого находятся три отключенных подпикселя: зеленый, синий и красный. Это создает эффект тонкой черной линии между красным и зеленым. Как на картинке ниже:

Субпиксельное представление красного цвета соответствует зеленому цвету.

Теперь на другой стороне зеленого прямоугольника сначала есть зеленый подпиксель, выключенный синий, а затем красный. Теперь между подсвеченным зеленым и красным подпикселями остается только один черный подпиксель. Это создает эффект очень тонкой яркой линии, проходящей между зеленой и красной границами. Как показано ниже:

Субпиксельное представление зеленого цвета соответствует красному цвету.

Чтобы увидеть субпиксели на вашем мониторе, вам, вероятно, понадобится увеличительное стекло. Нормальное человеческое зрение не может фокусироваться на таком близком расстоянии, на котором вы могли бы видеть отдельные пиксели. Тем не менее, это очень хорошо, чтобы заметить эту небольшую разницу яркости.

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

Кроме того, существует возможность использования алгоритма повышения резкости экрана. В основном, повышение резкости монитора делает все цветные края более заметными, добавляя белый цвет к более яркой стороне края и затемняя к черному на более темной стороне. Это очень похоже на эффект полосы Маха, но гораздо уже и обычно более заметно. Это можно узнать, отрегулировав настройку резкости дисплея (возможно, возможно) и посмотрев, уменьшился ли эффект.

Элмо Аллен
источник
2
да, это имеет смысл, однако не учитывает все эффекты, но да, теперь, когда я смотрю на 2 разных монитора с известным другим порядком, эффект фактически инвертирован. Однако я не вижу неравномерности цвета на основном мониторе, что может быть связано с безумно хорошим качеством элементов изображения на мониторах. Единственное, что я вижу, это полосы маха. PS чтобы проверить этот поворот монитора вверх ногами.
joojaa
ну или действительно, что элементы стохастически выкованы, чтобы противостоять этой проблеме
joojaa
В любом случае, OP @candh говорит о перекрытии шириной в 1px. Группы Маха никогда не должны быть такими узкими. (В любом случае, они даже не могут быть определены в смысле пикселя, потому что они формируются в мозге. На экране формируются субпиксельные артефакты.) Тем не менее, не вдаваясь в подробности о том, что именно он видит, мы застряли в поиске правильного решения. (С моей репутацией я пока не могу комментировать вопрос.)
Elmo Allén
2
@joojaa, конечно, шум уменьшит прямолинейный эффект субпикселей, но он бросит ребенка с водой в ванне, потому что прямая резкая линия больше не будет выглядеть такой резкой. Я не думаю, что есть хороший способ бороться с этим или вообще есть какая-либо причина. На современных дисплеях эффект уже ничтожен, и теперь, когда дисплеи HiDPI медленно распространяются даже на настольных компьютерах, это имеет значение еще меньше. Кроме того, очень большие контрасты цветности используются очень редко, и это совсем не влияет на контрастность яркости.
Элмо Аллен
2
На моем мониторе R, G, B я значительно уменьшил визуальный артефакт, увеличив / уменьшив общее количество двух граничных пикселей на 1/6 (всего 1/3, учитывая сдвиг на 1/3 а-пикселей). Точнее: 1 0 0 | 1 0 0 | 1 x 0 | x 1 0 | 0 1 0 | 0 1 0: если вы установите два компонента x на 1/6 вместо 0, вы избежите эффекта черной полосы. И в 0 1 0 | 0 1 0 | 0 y 0 | y 0 0 | 1 0 0 | 1 0 0: вам нужно установить y только на 5/6, чтобы избежать эффекта белой полосы. (Значения 1/6 и 5/6, вероятно, следует уточнить, принимая во внимание уровень восприятия глаз.)
Армин Риго
4

Такова природа цветов, когда они собираются вместе. Человеческий глаз стремится упростить прояснение вещей ... и оптические иллюзии, вызванные нашим восприятием цветов.

этот феномен, который называется «иллюзия полос Маха», проявляется в любых двух цветах, различающихся по значению. ни в оттенке, ни в насыщенности. и моя прилагаемая диаграмма показывает, что такая же иллюзия встречается в серых тонах. более светлый серый будет более светлым по сравнению с более темным посередине, а средний серый будет светлее у края правого темно-серого цвета справа. И так одно.

введите описание изображения здесь

если это важно для вас, у вас есть два варианта.

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

верхняя полоса меньше в иллюзии

это увеличенная версия с крошечной серой линией.

hsawires
источник
11
Это неверно Первая диаграмма (красно-зелено-красная) не соответствует второй (светло-серая-середина серо-темно-серая), потому что два красных цвета одного цвета. Если бы речь шла о яркости, линейный график был бы симметричным, как это --\|\--/|/--, и вы бы увидели либо черную полосу как на красно-зеленом интерфейсе, так и на зелено-красной, либо белую полосу на обоих.
Дэвид Ричерби
5
Это действительно легко опровергнуть. Если у вас есть ноутбук и вы видите черные и белые линии, переверните его. Вы найдете черную линию справа, а не слева.
slebetman
3
@hsawires: идея в том, чтобы доказать что-то с научной точки зрения. Перевернуть ноутбук с ног на голову и увидеть, как ваша теория полностью развеялась - это, безусловно, серьезное опровержение. Вы не можете просто махнуть рукой, говоря: «Вы не можете доказать или опровергнуть иллюзии»; какая чепуха!
Легкость гонки с Моникой
1
@hsawires: Во всяком случае, перевернув экран вверх дном, если бы не тот факт, что это меняет порядок диодов, которые создают разные цвета на экране, это не имело бы никакого значения для того, как изображение воспринимается, потому что изображение симметрично. В противном случае вы могли бы, глядя на эффект полосы Маха, определить, был ли экран повернут или нет, что не имеет никакого смысла. Тот факт, что изображение не воспринимается одинаково, означает, что должно происходить что-то еще, что связано с субпиксельной структурой, которую описывают Илмари и Эльмо.
Здравствуйте, до свидания,
1
Чтобы поддержать @HelloGoodbye, наш верный друг Википедия ( en.wikipedia.org/wiki/Mach_bands ) сказал: «Иллюзия не зависит от ориентации».
Нельсон Ротермел
0

Я не могу быть уверен, но если вы носите очки, вот в чем проблема. Скорее всего, вы видите хроматическую аберрацию , в которой красные и зеленые цвета разделяются.

Чем толще ваши очки, тем более выраженным будет эффект. Попробуйте повернуть голову и посмотреть, как двигаются цветные блоки - по мере того, как вы двигаетесь к краю очков, ваши очки будут толще, и, следовательно, увеличится расстояние между ними.

user295691
источник
6
Это не хроматическая аберрация. Любая наполовину компетентная пара очков не будет демонстрировать хроматическую аберрацию, если смотреть прямо на монитор компьютера.
Дэвид Ричерби
Здесь есть абсолютный аспект хроматической аберрации. Просто регулируя угол, под которым я смотрю на монитор, черные и белые полосы меняют размер. И хотя этот эффект более выражен в очках, он все еще присутствует в очках - у ваших глаз тоже несовершенные линзы! Игнорирование того, что чистые основные цвета будут иметь этот эффект, является пропущенной частью истории.
Дэвид Святый
@ Святая Как показывает ответ Ильмари , речь идет о субпиксельном интервале на мониторе. Если вы переместите голову в сторону, видимый интервал подпикселей изменится, и эффект изменится. И как из-за хроматической аберрации получается черный цвет? Вы предполагаете, что аберрация настолько сильна, что частота света изменяется так, что она выходит за пределы видимой области спектра?
Дэвид Ричерби
@Richerby: Судя по ответу Канда и более подробному расследованию с моей стороны, это не тот эффект, который он видел. Однако хроматическая аберрация существует и создает черные линии - красный сместится в одну сторону, а зеленый - в другую; думать призмы и как они разделяют цвета. Оставшаяся часть будет выглядеть черной, хотя для моих глаз (когда я носил очки) это выглядело больше, как будто красный цвет «плавал» над экраном.
user295691 25.11.14
0

Эта ветка на форуме Adobe содержит информацию о параметрах «Выровнять по пиксельной сетке».

Если я правильно помню, это также можно включить для всего документа через File > Newдиалоговое окно (в самом низу окна).

Либо эти эксперты по жестким мониторам верны, либо у вас есть несоответствие, созданное вектором, который неправильно выравнивается по пикселям на мониторе. Именно поэтому так много людей взволнованы тем, что этот маленький флажок был добавлен в Illustrator.

AVLien
источник
3
Векторы выровнены правильно. Чтобы убедиться, что вам нужно просто скопировать и вставить изображение в Photoshop или в любой графический редактор и увеличить его. Нет сглаживания между пикселями и вообще нет полутоновых пикселей.
Элмо Аллен
-2

Это может быть связано с взаимодействием цветов. Красный и зеленый являются дополнительными цветами, и при расположении рядом они создают черную / темную линию, которая выглядит как перекрытие. Вы можете прочитать и увидеть больше примеров здесь .

Illustrator автоматически фиксирует фигуры на месте, поэтому не должно возникать проблем с перекрытием.

TGR
источник
2
Если бы явление было вызвано исключительно нашими глазами, вы бы увидели то же самое на красно-зеленой границе, что и на зелено-красной границе.
Дэвид Ричерби
Красный и зеленый, если их размещать рядом и смотреть с достаточного расстояния (например, смотреть на небольшие пиксели на расстоянии нескольких футов), будут давать желтый, а не черный.
Джейсон С
-2

Если вы включите параметр « Выровнять новые объекты по пиксельной сетке» в меню параметров окна « Преобразование » (в верхнем правом углу любого окна параметров), для всех новых нарисованных объектов свойство выравнивания по пикселям будет установлено по умолчанию. Для новых документов, созданных с использованием профиля веб-документа, эта опция включена по умолчанию. Для существующих объектов, вы можете отключить выравнивание сетки пикселей , выбрав Выровнять по сетке пиксельных в Transform само окно (показано после тикают на Дополнительные параметры в меню опций окна).

Четкий вид штрихов с выравниванием по пикселям поддерживается на растровом выходе только с разрешением 72 ppi. Для других разрешений высока вероятность того, что такие штрихи будут давать сглаженные результаты.

Объекты, которые выровнены по пикселям, но не имеют прямых вертикальных или горизонтальных сегментов, не модифицируются для выравнивания по пиксельной сетке. Например, поскольку повернутый прямоугольник не имеет прямых вертикальных или горизонтальных сегментов, он не подталкивает к получению четких контуров, когда для него установлено свойство выравнивания по пикселям.

Эта документация Adobe рассказывает об этом более широко: http://helpx.adobe.com/illustrator/using/drawing-pixel-aligned-paths-web.html

Рахул Чухан
источник
1
какой именно вариант?
Candh