Специфика коррекции контурной резкости полноцветного изображения

1. Цветовой тон и Насыщенность

2. Контурная резкость

3. Авто коррекция

Цветовой фон и насыщенность

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

Этот метод реализуется в графических редакторах как коррекция изображения в цветовой модели HSL.

Такая компьютерная цветовая модель по своей основе похожа на HSB (HSV). Но её основными параметрами являются: тон, светлота и насыщенность. Если представить цветовую модель HSL в виде фигуры, то это будет двойной (отраженный) шестигранный конус. Его основанием, как и у HSB, служат базовые цвета, а вершинами: белый цвет, регулируемый насыщенностью, и черный, характеризуемый светлотой. Таким образом, цветовая модель HSL является одним из наиболее ярких примеров интуитивных понятий тона, насыщенности и яркости.

Повышение насыщенности цвета в изображении или в его выделенной области осуществляется увеличением значения параметра S цветовой формулы пикселов.

Интерфейс коррекции изображения в цветовой модели HSL на примере

Регулировка насыщенности на примере программы Adobe Photoshop CS6

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

Нормальная цветовая насыщенность

Выход за пределы цветового охвата

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

Расположение меню Контурная резкость

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

Интерфейс Контурной резкости

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

Вы используете цвет в вашем интерфейсе, который напрягает глаза пользователя?

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

На какую колонку вы можете смотреть дольше?

Пример . Посмотрите внимательно на цвета в изображении сверху.

Левый столбец содержит цвета с максимальной яркостью и насыщенностью. Правый столбец содержит цвета с яркостью и насыщенностью равной 80%.

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

Яркость против насыщенности

Яркость (Brightness) и насыщенность (Saturation) это разные цветовые свойства. Первое свойство означает, как много белого или чёрного смешивается с цветом. Второе свойство - какое количество серого содержится в цвете.

Увеличивая яркость - вы не снижаете насыщенность. Когда вы понижаете насыщенность, вы смешиваете цвет с оттенком серого. Когда вы повышаете яркость, то вы делаете цвет светлее, но не делаете его серым.

Сверху: увеличение яркости - больше белого. Снизу: уменьшение насыщенности - больше серого

Влияние цвета на внимание и возбуждение

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

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

Используйте яркие и насыщенные цвета в кнопках

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

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

Слева: фон яркий и насыщенный. Поэтому всё внимание к фону, а не к кнопке. Справа: кнопка использует яркий и насыщенный цвет. Она привлекает внимание пользователя

Используйте тёмный и менее насыщенный цвет для фона

Лучше делать цвет фона темнее и менее насыщенным. При затемнении цвета уменьшается содержание белого цвета. В то время как уменьшение насыщенности увеличивает количество серого цвета.

Полученный фон не будет забирать на себя внимание пользователя от текста или контента на странице. Это позволяет пользователю читать страницу легко и не отвлекаясь.

Слева: неприятно для глаз. Фон яркий и насыщенный. Максимальная яркость и насыщенность на изображении слева. Справа: приятно для глаз. Фон тёмный и менее насыщенный. Яркость и насыщенность ниже

Поиски оптимального цвета фона

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

Сначала выберите основной оттенок и установите на нём максимальную яркость и насыщенность. Значение оттенка сохраняется и служит контрольной точкой для регулирования яркости и насыщенности.

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

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

Поместите насыщенные образцы цвета слева от изначального оттенка с яркость и насыщенностью равной 100%. Справа разместите образцы цвета с минимальной и максимальной яркостью.

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

В итоге ни один из цветов второго ряда не имеет 100% насыщенности и яркости. Значит, эти цвета наиболее подходящие для использования в работе.

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

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

Примеры хорошего и плохого цвета для использования в фоне сайта

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

Слева - плохой зелёный (Panic или Prismic). Справа - хороший зелёный (

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

Цвет фона веб-страницы задается с использованием атрибута bgcolor тега .

Пример 1. Изменение цвета фона

Цвет можно указывать в шестнадцатеричном значении или по его имени.

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

Фоновый рисунок

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

Пример 2. Добавление фонового рисунка

Если изображение меньше размера экрана монитора, оно будет размножено по горизонтали и вертикали.

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

Пример 3. Использование фонового рисунка и цвета фона

Фиксированный фон

По умолчанию, при использовании полосы прокрутки, фоновый рисунок перемещается вместе с содержимым веб-страницы. Internet Explorer позволяет сделать фон неподвижным с помощью атрибута bgproperties ="fixed " тега .

Пример 4. Задание фиксированного фона

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