Как понять режимы наложения раз и навсегда

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

Далее текст от лица автора

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

Эта статья может стать для вас справочником по режимам наложения.

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

Режимы осветления и затемнения: Darken, Lighten, Multiply, Screen, Color Burn и Color Dodge

Darken (Затемнение) и Lighten (Осветление)

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

Darken сравнивает значения RGB каждого цвета и выбирает самое тёмное, создавая новый цвет.

Режим Lighten работает аналогично, но выбирает самое светлое значение.

Multiply (Умножение) and Screen (Экран)

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

Нет причин использовать режимы Lighten или Darken, когда у вас есть Screen и Multiply.

Multiply делает именно то, о чем вы подумали: он умножает каждый канал одного цвета на соответствующий канал второго цвета.

Поскольку значения находятся в интервале между 0 и 1, результат всегда темнее оригинала.

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

Для расчёта значения должны находиться в диапазоне между 0 и 1.

Color Burn (Затемнение основы) и Color Dodge (Осветление основы)

Последняя пара режимов затемнения/осветления — Color Burn и Color Dodge.

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

Color Burn инвертирует значения фона, делит полученные результаты на значения переднего плана и в завершение инвертирует результат.

Color Dodge работает аналогично, но инвертирует каналы переднего плана. Затем делит каналы фона на значения инвертированных каналов переднего плана.

Контрастные режимы наложения: Overlay, Hard Light, Soft Light

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

Это наиболее универсальные режимы наложения, особенно для изображений.

Overlay (Перекрытие)

Overlay — интересный режим.

Если значение фона светлое (> 127,5), то используется режим Screen, результат умножается на 2. Таким образом передний план становится светлее.

Если значение фона тёмное (< 127,5), используется режим Multiply, результат умножается на 2. Таким образом передний план становится темнее.

Hard Light (Жёсткий свет)

Hard Light работает также, как и Overlay, только использует слой переднего плана.

Если значение переднего плана > 127,5, то применяется режим Screen, а результат умножается на 2. В противном случае — режим Multiply, а результат умножается на 2.

Soft Light (Мягкий свет)

Soft Light — самый сложный из стандартных режимов наложения.

Он дает результаты, похожие на те, что получаются от применения режима Overlay, но более изящные.

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

Инверсионные режимы: Difference и Exclusion

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

Difference (Разница)

Difference соответствует своему названию — вычитает значения верхнего слоя из значений нижнего.

Любые отрицательные числа становятся положительными.

Exclusion (Исключение)

Exclusion дает аналогичный результат, но способ вычисления гораздо более сложный.

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

Для этого нужно привести значения в диапазон от 0 до 1.

Компонентные режимы: Hue, Saturation, Color и Luminosity

Они отличаются от других режимов тем, что управляют компонентами HSL: H (hue — тон), S (saturation — насыщенность) и L (luminosity — яркость), а не значениями RGB.

При сочетании значений HSL двух исходных цветов получается новый цвет.

Hue (Тон)

Режим Hue берет значение тона (H) с переднего плана и значения насыщенности (S) и яркости (L) с фона.

Saturation (Насыщенность)

Режим Saturation берет значение насыщенности (S) с переднего плана и значения тона (H) и яркости (L) с фона.

Color (Цвет)

Режим Color берет значения насыщенности (S) и тона (H) с переднего плана и значение яркости (L) с фона.

Luminosity (Яркость)

Наконец, режим Luminosity берет значение яркости (L) с переднего плана и значения тона (H) и насыщенности (S) с фона.