Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

  Все выпуски  

Рецепты HTML


Служба Рассылок Subscribe.Ru проекта Citycat.Ru
Рецепты HTML
http://html.krsk.ru
Добрый день.

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

Рисунок на цветном фоне

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

Рис. 1. Рисунок на белом фоне Рис. 2. Рисунок на цветном фоне

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

Рис. 3. Увеличенный фрагмент изображения Рис. 4. Рисунок без сглаживания

Но все же есть, есть способ, чтобы в рисунке было и сглаживание и отсутствовала светлая каемка. В параметрах оптимизации рисунка следует задать цвет краев (Matte, рис. 5), который должен совпадать с цветом фона. На рис. 5 приведена палитра оптимизации, взятая из программы Photoshop 5.5 (File | Save for Web...), но данные параметры есть и в других подобных программах. На рис. 6 представлен результат использования параметра Matte, можете сравнить с рис. 4, где сглаживания нет.
Если фон неоднотонный, например, применяется фоновый рисунок, следует указывать средний цвет.

Рис. 5. Параметр Matte в палитре оптимизации Рис. 6. Рисунок со сглаживанием на цветном фоне

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

Copyright Влад Мержевич. По всем вопросам пишите мне по адресу inferos@mail.ru


http://subscribe.ru/
E-mail: ask@subscribe.ru
Отписаться
Убрать рекламу
Рейтингуется SpyLog

В избранное