Веб-дизайн

Цветовые границы


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

Рис. 55

Как воспроизвести цветовую границу сложной формы в пиксельной решетке растрового изображения (а) ? Без сглаживания каждый гра­ничный пиксел закрашивается одним или другим цветом в за­висимости от того, по какую сторону границы лежит боль­шая часть его площади (6). Анти-алиасинг вводит для гра­ничных пикселов промежуточ­ные тона, в которых пропор­ция смешения определяется со­отношением площадей цветов, приходящихся на соответству­ющий пиксел (в)

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

Очевидно, что случай, когда граница цветов идет стро­го горизонтально или вертикально и при этом совпадает с границей рядов или столбцов пикселов, может быть лишь исключением. В большинстве картинок не обойтись без пикселов, рассеченных «идеальной», векторной цветовой границей на части. Если, к примеру, граница разделяет черную и белую области, то простейший подход будет заключаться в том, чтобы закрашивать такие граничные пикселы черным или белым в зависимости от того, какого цвета на них приходится больше. Этот алгоритм применя­ется тогда, когда невозможно закрасить пиксел каким-либо промежуточным (в данном случае серым) цветом, а сами пикселы малы по размеру — что имеет место, например, при печати на лазерном принтере.

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

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

В то же время в самых мелких кеглях (меньше 5—6 пикселов на высо­ту буквы) от анти-алиасинга лучше все же отказаться, взяв вместо этого особый шрифт, оптимизированный для подобных экстремальных условий (к таким шрифтам относятся, например, большинство системных шрифтов Windows). Лучшие результаты дают шрифты без засечек; конечно, вряд



Рис. 56

Анти-алиасинг в действии: сглаживание конту­ров позволяет не только со­хранить разборчивость текста в мелком кегле, но и передать с помощью буквально несколь­ких пикселов наклон и харак­терные графические особенно­сти шрифта

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

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

I цвета.

Кроме того, анти-алиасинг может навредить в изображени­ях, части которых (например, линии регулярной решетки) сопоставимы по размеру с единичными пикселами: такие объекты лучше рисовать уже непосредственно «в растре» инструментами без анти-алиасинга (в Adobe Photoshop, например, для этого подходит инструмент Pencil), а не экспортировать их из векторного оригинала.Это относится, в частности, к пиксельным текстурам (стр. 119) и тонким горизонтальным и вертикальным линиям (стр. 93).


Содержание раздела