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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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