Режимы смешивания в css: цветовая теория и практическое применение

Режим наложения Luminosity (Яркость)

Режим наложения Luminosity (Яркость) ограничивает видимость слоя лишь его яркостной составляющей, то есть информация о цвете (цветовом тоне и насыщенности) почти не учитывается.

Посмотрим на пример. Возьмем какую-нибудь фотографию:

…и наложим на нее корректирующий слой-заливку цветом: Layer (Слой) → New Fill Layer (Новый заполняющий слой) → Solid Color (Цвет).

В качестве цвета для примера возьмем один из оттенков средне-яркого (B=50) синего (H=210) максимальной насыщенности (S=100).

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

Кстати, обратите внимание, как по такому простому словесному описанию вы легко представили себе этот цвет. К вопросу об удобстве модели HSB.

В качестве режима наложения для полученного слоя Color Fill 1 (Цветовая заливка 1) выберем Luminosity (Яркость).

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

Практическое применение

Когда же на практике нужен режим наложения Luminosity (Яркость)? Чаще всего — если необходимо сохранить первоначальный цвет изображения при выполнении сильных коррекций, затрагивающих контраст и яркость.

Разделяемые Режимы Наложения

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

Без использования наложения

Screen:

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

Режим наложения Screen

Выбирает более темный из двух цветов.

Режим наложения Darken

Выбирает более светлый из двух цветов.

Режим наложения Lighten

Режим Color dodge высветляет фоновый цвет, отражая цвет источника.

Режим наложения Color dodge

Color burn затемняет фоновый цвет, увеличивая контраст между источником и фоном.

Режим наложения Color burn

Hard light:

Использует умножения для светлых цветов и режим screen для темных. По сути, “hard light” является противоположностью режиму “overlay”, который идет у нас следующим.

Режим наложения Hard light

Overlay:

Использует режим “screen” для светлых цветов и  “multiply” для темных; записывается так же как и “hard light”, только аргументы меняются местами.

Режим наложения  Overlay

Soft light:

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

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

Режим наложения Soft light

Difference:

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

Режим наложения Difference

Exclusion:

Режим exclusion похож на “difference”, за исключением того, что подобные цвета приводят к более низкому контрасту между величинами (менее темным областям).

Режим наложения Exclusion

Добавляем капли

Будем использовать капельки с другой фотографии.

1. Открываем файл капли.jpg. Выбираем понравившуюся и вырезаем её.
2. Переносим в наш документ и подгоняем по размеру, нажав Ctrl+T.
3. Фильтром Пластика корректируем форму.
4. Обесцвечиваем каплю (Shift+Ctrl+U) и меняем режим наложения на Яркость (Luminosity), заливка 66%.

Использование Luminosity позволяет менять контраст ниже лежащего слоя не затрагивая его цвет. На сером фоне это не так заметно, но если переместить каплю на цветной, эффект очевиден:

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

Практика

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

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

В качестве верхнего слоя я возьму текстуру песка.

Далее мы последовательно переберём для верхнего слоя все возможные режимы наложения и посмотрим, что из этого получится. В данных примерах я не преследую никаких художественных целей, а просто пытаюсь продемонстрировать механику смешивания слоёв в различных режимах. Для большей наглядности непрозрачность верхнего слоя будет составлять 100% для всех режимов, кроме Normal и Dissolve, для которых я поставлю 50%. При 100% непрозрачности эффект смешивания в этих режимах был бы незаметен, поскольку верхний слой полностью замещает нижний. Разумеется, в реальной жизни очень часто приходится использовать намного более скромные значения непрозрачности, чтобы эффект смешения не выглядел слишком кричащим.

Напомню, что непрозрачностью слоя можно управлять, используя два параметра: Opacity (Плотность) и Fill (Заливка). При этом для большинства режимов наложения Opacity и Fill действуют абсолютно одинаково с той лишь разницей, что Opacity воздействует как на сам слой, так и на применённые к нему стили, а Fill стили игнорирует. Однако восемь режимов (Color Burn, Linear Burn, Color Dodge, Linear Dodge, Vivid Light, Linear Light, Hard Mix, и Difference) реагируют на уменьшение параметров Opacity и Fill немного по-разному, и об этом не стоит забывать.

Во всех случаях, когда я привожу формулы, используемые Фотошопом для расчёта результирующего цвета, буква a будет обозначать значение яркости верхнего слоя, а b – нижнего. Минимальное значение равно 0 (чёрный цвет), максимальное равно 255 (белый цвет).

Поддержка в браузерах

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

Также есть проблема с Safari — он не поддерживает режимы , , и .

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

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

Дополнительные материалы

• 15 CSS blend modes that will supercharge your images
• Режимы наложения слоёв в Web
• Режимы наложения CSS
• Режимы наложения и их фоллбеки

Режим наложения Soft Light (Мягкий свет)

Soft Light (Мягкий свет) относится к контрастным режимам наложения. Что это означает?

При наложении слоя на изображение в контрастном режиме*:

• его пиксели со значениями яркости больше 50% производят высветляющий эффект,
• пиксели со значениями яркости меньше 50% — затемняющий,
• идеально серые пиксели (B=50, S=0 в модели HSB или R=128, G=128, B=128 в модели RGB) — вовсе не учитываются.

* Это верно для всех контрастных режимов наложения, кроме редко используемых на практики Hard Mix (Жесткое смешивание) и Pin Light (Тусклый свет).

Наглядный пример. Наложим черно-белую полосатую картинку на нашу исходную фотографию в режиме Soft Light (Мягкий свет):

Стоит отметить, что режим наложения Soft Light (Мягкий свет) подтверждает свое название, воздействуя на изображение достаточно мягко. Поэтому на практике он часто используется в техниках Dodge & Burn, при прорисовке объемов на фотографии и тонировании — достаточно сложно «перестараться» и «убить» картинку.

Примечание. Режим Soft Light (Мягкий свет) действует немного сильнее на темные участки изображения. Неоднородность воздействия проявляется и при изменении контраста — при высветлении или затемнении изображения в этом режиме наложения.

На практике этим в абсолютном большинстве случаев можно пренебречь без ущерба качеству результата.

Если же сохранение контраста критически важно, рекомендую обратить внимание на другие режимы наложения, например, Overlay (Перекрытие). Но будьте аккуратны — воздействие этих режимов наложения окажется гораздо интенсивнее, чем при использовании Soft Light

Практика применения режима Soft Light (Мягкий свет)

Данный режим, ввиду своего мягкого воздействия на картинку, применяется очень часто:

• прорисовка объемов;
• Dodge & Burn (Высветление и затемнение);
• работа с макияжем;
• тонирование фотографий и перекраска объектов подмешиванием цвета;
• многие другие приемы, включая составные техники работы с резкостью, шумом и текстурой.

Я также не останусь в стороне и в практической части цикла покажу способ использования режима наложения Soft Light (Мягкий свет) для тонирования фотографий.

Текстовые надписи и рефлексы

Пишем текст любымим шрифтами, которые нравятся — наш коллаж готов.

А нет, не совсем готов, мы забыли добавить красных рефлексов от листа на дерево.

1. Возвращаемся к группе Ветка, на новом слое рисуем несколько красных пятен в местах, где может отсвечивать лист.
2. С зажатым Alt кликаем между слоями, чтобы скрыть все выступающие за границу ветки закрашенные области и переводим слой в режим Цветность (Color).
3. Уменьшим заливку до 40-50%, чтобы ослабить эффект.

На ветке появились красные рефлексы. Теперь — наш урок завершен.Видео-урок:

Надеюсь, вы почерпнули для себя что-то новое и  будете использовать это в работе.Делитесь своим мнением и  результатами выполнения урока:)

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