Лаборатория цвета

Эксперименты с пикселями

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

Примечание: некоторые таблицы могут не работать в браузерах Netscape и Opera. Все эксперименты проводятся при разрешении экрана 800х600 True color (32 bit). Так как наша тема касается сайтостроения, то такое разрешение считается оптимальным. Если ты по какой-либо причине не установил рекомендуемое разрешение, то за результаты экспериментов я не отвечаю. Да, и не забудь включить графику в браузере. А то бывают умники...

Для начала возьмем один пиксель черного цвета и разместим его на белом фоне. Видишь в белом квадрате малю-ю-юсенькую точечку? Если нет, одень очки. Это и есть наш пиксель, о котором мы так долго говорили в беседах о цвете. Не впечатляет, правда? Хотя он и является основой всех изображений. Кстати, в тексте, который ты сейчас читаешь, предложения заканчиваются точками. Они тоже состоят из одного пикселя.

А теперь давай разместим рядышком четыре таких же пикселя (два вверху и два — внизу). Как видно, точка заметно увеличилась. На самом деле это не точка, а маленький квадратик со сторонами в два пикселя, но на глаз это пока не видно.

Здесь изображены три кавадрата со сторонами соответственно в 3, 4 и 5 пикселей. Обрати внимание, как постепенно точка превращается в квадрат. Квадрат 3х3 пикселя еще не кажется квадратом, а вот 4х4 и, тем более, 5х5 — это уже явно квадраты.

А вот, что получается, если пиксели располагать на некотором расстоянии друг от друга. В верхней части, если хорошо присмотреться, видны отдельные точки, хотя на первый взгляд создается впечатление сетки. Здесь точки в один пиксель расположены на расстоянии двух пикселей друг от друга. Нижняя же часть кажется просто серой при расстоянии между точками всего в один пиксель.

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

А сейчас я предлагаю немного поэкспериментировать с цветами. Здесь приведены все те же примеры, но пиксели окрашены в цвета из 16-цветной основной палитры.

Обрати внимание, что на светлом фоне четко прорисовываются только темные цвета. Более светлые цвета (Lime, Silver) на светлом фоне смотрятся несколько смазанно. Точки в один пиксель уже можно отыскать лишь пристально приглядевшись. Ну а совсем светлые цвета (Aqua, Yellow) вообще расплываются и годятся разве что только для передачи полутонов. Поля, где точки расположены на расстоянии двух пикселей друг от друга еле различимы и почти сливаются с фоном.

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

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

А давай-ка возьмем и посмотрим что получится, если вышеприведенные примеры поместить на поле черного цвета.

Вау! Какая красота получилась! Прям ночной Лас-Вегас! Что же здесь мы видим?

Ну, во-первых, теперь четко стали выделяться светлые цвета вплоть до прорисовки точки в один пиксель. Если цвета Aqua и Yellow стояли в прошлом примере обособленно из-за своей яркости, то теперь в эту группу можно отнести цвета Lime и Silver.

Во-вторых, цвета средней яркости разделились на две группы: более светлые и более темные. В более светлых еще кое как можно рассмотреть точку в один пиксель, ну а в цветах Brown и Purple ее уже не видно.

Совершенно обособленно стоит цвет Navy, который на черном фоне словно призрак в ночи.

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

А теперь, дорогой читатель, я попрошу тебя временно сделать максимальную яркость на твоем мониторе. Сделал? Видишь, и недостающие пиксели появились. Разве что, кроме цвета Navy. Это значит, что электроны начали сильнее бомбардировать обратную сторону экрана. Так что чрезмерная яркость монитора ни к чему хорошему не приводит. Цвета при этом хотя и высветляются, но теряется естественность изобрания. Поэтому, подобно тому, как мы одеваем темные очки во время солнечного дня, я советую выставить наиболее удобную для тебя яркость.

Далее хочу предложить тебе определить цвет точек на белом и черном фонах. Разрешается менять яркость, контрастность монитора. Можно даже очки протереть. Ну что, получается?

Подсказка: точки на белом фоне идентичны точкам на черном. Еще одна подсказка: каждая точка состоит из двух пикселей разного цвета. Ну что, еще подсказать? Ладно, не буду тебя мучить.

Верхние точки состоят из двух пикселей — Red и Lime, средние — Red и Blue, а нижние — Lime и Blue.

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

Несколько другая картина наблюдается на черном фоне. Здесь заметно выделяются верхняя и нижняя точки. Это ты сейчас уже знаешь, что цвет Lime, как один из ярких цветов, хорошо выделяется на черном фоне, но, как цвет, он при столь мизерном размере неопределяем. Хотя в нижней точке что-то подобное просматривается. Возможно потому, что зеленый цвет несколько подчеркивается синим. А вот красный цвет на том же фоне уже достаточно различим. Правда, приходится при этом напрягать зрение. Синий же цвет на черном фоне рядом с другими цветами практически теряется.

Хочу предложить еще один эксперимент с уже известной тебе шахматной доской. Но возьмем теперь разные цвета пикселей и разные цвета фонов.

Ты видишь три квадрата, окрашенные в красный, зеленый и синий цвета. На них нарисованы пиксели, расположенные в шахматном порядке и окрашенные в зеленый, синий и красный цвета, соответственно. Отдельные пиксели по-прежнему неразличимы, но в результате получаем три новых цвета — Olive, Teal и Purple. Их цифровое RGB-значение вычислить несложно. Например:
Значение красного цвета, которым окрашен фон первого квадрата равен 255 или FF в шестнадцатиричной системе. Зеленый цвет пикселей имеет то же значение. Синий цвет отсутствует, то есть имеет значение 00. Если два цвета смешиваются в равных пропорциях, они теряют половину своих значений. То есть значения красного и зеленого цветов становятся равными 256/2 = 128 или 80 в шестнадцатиричной системе. Значение синего по-прежнему остается 00. В итоге полное RGB-значение полученного цвета — 808000.

Итак, дорогой читатель, давай подведем итоги того, что мы с тобой узнали.

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

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

Теперь можно перейти к другим экспериментам нашей лаборатории.

Сайт создан в системе uCoz

Лаборатория цвета

Эксперименты с пикселями

Размышления