Онлайн учебник по WEB-графике

Графика на вашей интернет-странице

Черно-белая графика на Веб-страницах

Безопасная палитра 6x6x6 включает только 4 нейтрально серых цвета, не считая белого и черного, что вызывает сложности при отображении черно белых изображений.

Несмотря на то, что в системных палитрах имеются дополнительные оттенки серого, они не одинаковые на Mac и на PC.

Существует 12 оттенков в палитре Mac и 18 оттенков в палитре Windows, поэтому, не считая черного и белого, RGB значения этих оттенков не совпадают. Изображение, имеющее большие поверхности, однородно заполненные одним из этих серых цветов, обязательно у кого-нибудь будет содержать смешанный цвет. В фотографическом изображении, где все цвета итак смешаны, это не будет иметь никакого значения.

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

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

Такой файл будет все-таки немного сжат, т.к. алгоритм умеет обрабатывать периодические узоры, но он все равно будет примерно на 50% больше аналогичного файла с однородным цветом.

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

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

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

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

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

Для быстрого создания таких узоров можно воспользоваться новым плагином для Mac и PC Photoshop'а от http://www.ditherbox.com/, встроенным в Adobe Image Ready.

JPEG Cat - 30K

4-Bit GIF Cat - 16K

Вверху представлена одна и та же фотография, сохраненная в двух форматах. Верхняя кошка сохранена в формате JPEG и весит примерно 30K. Она замечательно смотрится при глубине цвета 16 или 24 бита, но ее цвета будут смешанны при просмотре при глубине цвета 8 бит.

Mac версия Netscape 4 добавляет желтые и голубые оттенки, которые ужасно смотрятся, помимо этого белая область между ушами имеет неприятные точки.

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

Почему? Черно-белое изображение имеет 256 оттенков серого. Это слишком много, т.к. шаги неразличимы. Уменьшение глубины цвета до 5 бит (32 оттенка) или 4 бит (16 оттенков) дает почти неотличимый результат, при этом значительно уменьшает размер файла.

Для создания этого логотипа использовалась та же технология. Мягкая тень замечательно отображается на всех платформах при всех глубинах цвета, за исключением Netscape 4 на Mac.