Режимы наложения слоя

Вычитающие режимы (Subtractive)

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

Darken

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

Синий слой с режимом наложения Darken и 100% непрозрачности

Darker Color

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

Multiply

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

Linear Burn

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

Color Burn и Classic Color Burn

Этот режим увеличивает контраст нижележащего слоя с помощью цветовой информации исходного слоя. Если верхний (исходный) слой белый, то ничего не изменится. Пожалуй, этот режим это что-то между Multiply и Linear Burn. Порядок следования слоёв имеет значение, поскольку нижний слой просвечивает больше.

Classic Color Burn унаследован от Ae 5.0 и более ранних версий. У него есть некоторые ограничения, поэтому обычно предпочитают обычный Color Burn.

Типы Режимов Наложения Доступные в CSS

В СSS режимы наложения, поддерживаются, и существуют разные варианты. Первый тип режима наложения называется . Это свойство позволяет вам смешать все фоны внутри одного элемента друг с другом.

Если, например, вы зададите, фон с несколькими изображениями (), первое изображение будет обрабатываться как источник, и другие изображения добавленные потом, будут обрабатываться как фоновые изображения, лежащие под первым.

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

Это дает нам:

И далее мы можем добавить режим наложения, чтобы все смешать:

Здесь у нас два div-а, один используется без режима наложения, а другой с ним:

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

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

Ниже, вы можете найти интерактивную демонстрацию, для исследования эффектов данного наложения.

Простые арифметические режимы наложения

Разделить

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

Сложение

Этот режим наложения просто добавляет значения пикселей одного слоя к другому. В случае значений выше 1 (в случае RGB) отображается белый цвет. «Linear Dodge » дает тот же визуальный результат. Поскольку при этом всегда получаются такие же или более светлые цвета, чем на входе, это также известно как «плюс светлее». Вариант вычитает 1 из всех конечных значений, при этом значения ниже 0 становятся черными; этот режим известен как «плюс темнее».

Subtract

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

Разница

Разница вычитает нижний слой из верхнего или наоборот, чтобы всегда получать неотрицательное значение. Смешивание с черным не дает изменений, так как значения для всех цветов равны 0. (Значение RGB для черного равно (0,0,0).) Смешивание с белым инвертирует изображение.

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

Только затемнение

Только затемнение — создает пиксель, который сохраняет мельчайшие компоненты пикселей переднего плана и фона. Если пиксель переднего плана имеет компоненты (r 1, g 1, b 1) {\ displaystyle (r_ {1}, g_ {1}, b_ {1})}, а фон имеет (r 2, g 2, b 2) {\ displaystyle (r_ {2}, g_ {2}, b_ {2})}, результирующий пиксель равен

{\ displaystyle }

Только светлее

Только светлее имеет действие, противоположное только затемнению. Он выбирает максимум каждого компонента из пикселей переднего плана и фона. Математическое выражение для Lighten Only:

{\ displaystyle }

Различия между наложением слоев и инструментов

Некоторые приложения позволяют пользователю применять режимы наложения к инструментам рисования, таким как инструмент «Кисть» в Photoshop или любые инструменты рисования в GIMP. Когда с этими инструментами используются режимы наложения, результат рассчитывается на основе пикселей, уже существующих на целевом слое. Если в настоящее время пиксели не существуют, то «окрашенные» пиксели создаются, как если бы они находились в обычном режиме наложения. Последующие перекрывающиеся мазки затем рассчитываются на основе режима наложения инструмента, а результат применяется непосредственно к слою. Ключевое отличие наложения инструментов от наложения слоев состоит в том, что результаты наложения инструментов обычно не могут быть скорректированы после выполнения обводки, за исключением перехода назад с помощью команды «Отменить» приложения; наложения слоев можно регулировать непрозрачностью или даже переключать, поскольку они применяются динамически между слоями. Иными словами, инструменты рисования изменяют пиксели на слое; Режимы наложения, примененные к двум слоям, не изменяют никакие пиксели, а влияют только на получающееся визуальное изображение.

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

Нормальный режим смешивания

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

ж(а,б)=б{displaystyle f (a, b) = b}

куда а это значение цветовой канал в нижележащем слое и б соответствует каналу верхнего уровня. Чаще всего результат объединяется с нижним слоем, используя «простой» (b над a) альфа-композитинг (делая фактическую формулу ж(а,б)=алпчаса(б,а){displaystyle f (a, b) = alpha (b, a)}), но возможны и другие операции Портера-Даффа. Шаг компоновки приводит к тому, что форма верхнего слоя, определяемая его альфа-каналом, появляется поверх нижнего слоя.

Цветовой баланс в Фотошоп.

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

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

Примеры? Да сколько угодно. Мутные цвета весеннего пейзажа, землистое «лицо мертвеца» вместо загара, цветные отблески и блики на самых важных частях снимка.

И тут без коррекции не обойтись. Создатели Adobe Photoshop как в воду глядели, насыщая программу различными инструментами коррекции оттенков. Начиная от изменения цвета глаз и заканчивая глобальным смещением гаммы всего изображения.

Сегодня рассмотрим один из таких инструментов. Он не такой пугающий как уровни и кривые (при работе с каналами). Более того, палитра и установка свойств реализованы предельно наглядно и просто. Речь, естественно, идёт об инструменте под названием «цветовой баланс». Изучать его свойства будем уже на привычном снимке озера в околицах Минска.

Нормальный режим наложения

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

f (a, b) = b {\ displaystyle f (a, b) = b}

, где a — значение цветового канала в нижележащем слое, а b — это значение соответствующего канала верхнего уровня. Результат обычно объединяется с нижним слоем с использованием «простого» (b над a) альфа-композитинга (фактическая формула f (a, b) = alpha (b, a) {\ displaystyle f (a, b) = alpha (b, a)}), но возможны и другие операции Портера-Даффа. Шаг компоновки приводит к тому, что форма верхнего слоя, определяемая его альфа-каналом, появляется поверх нижнего слоя.

Применение режимов наложения

Режимы наложения можно применить с помощью пары свойств CSS: и , также нам может пригодиться свойство .

Наложение фоновых изображений

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

Попробуем добавить пыль и царапины на фото

(Обратите внимание, что код предназначен для конкретных примеров)

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

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

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

Наложение элементов HTML

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

А вот пример использования для наложения нескольких элементов.

Использование для наложения нескольких элементов

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

Использование для предотвращения смешивания нижнего слоя с остальными

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

Для следующего примера я немного поработал в Photoshop и создал набросок дизайна для вымышленного производителя лыжного оборудования Masstif. В этом наброске я создал блок с небольшим текстом и логотипом. Я смешал этот блок в режиме осветления цветов (). Это дает четкий контраст по отношению к фону и помогает лучше сочетать текст и графику.

При попытке воспроизвести это средствами HTML и CSS, я рассчитывал, что работать будет следующий код:

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

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

Оттенок, насыщенность и яркость

Фотошоп оттенок, насыщенность, цвет, и яркость режимы наложения основаны на цветовом пространстве с и размеры. Примечание: это пространство отличается как от HSL, так и от HSV, и между ними используется только размер оттенка. См. Статью HSL и HSV для подробностей.

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

В Оттенок Режим наложения сохраняет яркость и цветность нижнего слоя, принимая оттенок верхнего слоя.
В Насыщенность В режиме наложения сохраняется яркость и оттенок нижнего слоя, а цветность верхнего слоя сохраняется.
В Цвет Режим наложения сохраняет яркость нижнего слоя, принимая оттенок и цветность верхнего слоя.
В Яркость Режим наложения сохраняет оттенок и цветность нижнего слоя, принимая яркость верхнего слоя.

Поскольку эти режимы наложения основаны на цветовом пространстве, которое намного ближе, чем RGB к соответствующим измерениям, его можно использовать для исправить цвет изображения без изменения воспринимаемого легкость и управлять контрастом яркости без изменения оттенка или цветности. Режим Luminosity обычно используется для резкость изображения, потому что человеческое зрение гораздо более чувствительно к мелкомасштабному контрасту яркости, чем к цветовому контрасту. Видеть Контраст (зрение).

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

Экран

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

Осветление цвета

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

Линейный уклонение

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

Сделайте результат темнее

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

Затемнить

Более темный цвет в двух слоях останется смешанным цветом, пиксели светлее смешанного цвета будут заменены, а пиксели темнее смешанного цвета останутся неизменными.

Умножить Умножить

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

Цветной огонь

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

Линейный ожог

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

Режим «Индексированные цвета»

Режим «Индексированные цвета» выдает 8-битные изображения, содержащие не более 256 цветов. При преобразовании в режим индексированных цветов Photoshop строит таблицу цветов изображения (CLUT)
, в которой хранятся и индексируются цвета, используемые в изображении. Если цвет исходного изображения отсутствует в этой таблице, программа выбирает ближайший из имеющихся цветов или выполняет дизеринг
для имитации недостающего цвета.

Хотя палитра цветов этого режима ограниченна, он позволяет уменьшить размер файла изображения, при этом сохраняя качество изображения, необходимое для мультимедийных презентаций, веб-страниц и т. п. Возможности редактирования в этом режиме ограниченны. Если необходимо большое редактирование, следует временно перейти в режим RGB. В режиме индексированных цветов файлы можно сохранять в следующих форматах: Photoshop, BMP, DICOM (медицинский формат цифровых изображений и связи), GIF, Photoshop EPS, формат больших документов (PSB), PCX, Photoshop PDF, Photoshop Raw, Photoshop 2.0, PICT, PNG, Targa и TIFF.

Классификация режимов наложения

В Adobe Photoshop имеется 27 режимов наложения или смешивания слоёв, каждый из которых может быть отнесён к одной из шести групп в зависимости от типа взаимодействия между слоями. В меню Blending Mode группы режимов визуально разделены при помощи горизонтальных линий, но не подписаны. Если вам неинтересно читать про группы, вы можете сразу перейти к практическим .

Нормальные режимы: Normal (Нормальный) и Dissolve (Растворение). При непрозрачности 100% пиксели верхнего слоя просто замещают собой пиксели нижнего, не испытывая на себе никакого влияния последних. При уменьшении непрозрачности пиксели нижнего слоя либо проступают сквозь пиксели верхнего (Normal), либо частично замещают их (Dissolve).
Субтрактивные режимы: Darken (Замена тёмным), Multiply (Умножение), Color Burn (Затемнение основы), Linear Burn (Линейный затемнитель), Darker Color (Темнее). Эти режимы, так или иначе, приводят к затемнению изображения. Их действие можно сравнить со смешением красок на бумаге, т.е. с субтрактивным синтезом цвета.
Аддитивные режимы: Lighten (Замена светлым), Screen (Осветление), Color Dodge (Осветление основы), Linear Dodge (Линейный осветлитель), Lighter Color (Светлее). В противовес субтрактивным режимам аддитивные режимы служат для осветления изображения по принципу смешения цветового излучения (аддитивный синтез цвета).
Комплексные режимы: Overlay (Перекрытие), Soft Light (Мягкий свет), Hard Light (Жёсткий свет), Vivid Light (Яркий свет), Linear Light (Линейный свет), Pin Light (Точечный свет), Hard Mix (Жёсткое смешение). Эти режимы воздействуют на яркость и контраст конечного изображения, делая тени темнее, а света – светлее.
Разностные режимы: Difference (Разница), Exclusion (Исключение), Subtract (Вычитание), Divide (Разделение). Формирование результирующего цвета осуществляется на основании разницы между цветами верхнего и нижнего слоёв.
HSL режимы: Hue (Цветовой тон), Saturation (Насыщенность) Color (Цвет), Luminosity (Яркость). HSL означает Hue, Saturation, Lightness, т.е. тон, насыщенность и светлота. Таким образом, HSL режимы осуществляют перенос одного или двух компонентов цветовой схемы HSL с верхнего слоя на нижний.

Цветовой режим RGB

Режим RGB в Photoshop использует модель RGB, назначая каждому пикселу значение интенсивности. В изображениях с 8 битами на канал значения интенсивности находятся в диапазоне от 0 (черный) до 255 (белый) для каждого из RGB-компонентов цвета (красный, зеленый, синий). Например, ярко-красный цвет имеет значение R=246, G=20 и B=50. Если значения всех трех компонентов одинаковы, получается затемнение нейтрально-серого цвета. Если значения всех компонентов равны 255, то получается чистый белый, а если 0, то чистый черный.

Чтобы воспроизвести цвета на экране, в изображениях RGB используются три цвета, или канала
. В изображениях, содержащих 8 бит на канал, каждый пиксел содержит 24 бита (3 канала по 8 бит) цветовой информации. В 24-битных изображениях три канала позволяют воспроизводить до 16,7 миллиона цветов на пиксел. В 48-битных (16 бит на канал) и 96-битных (32 бита на канал) изображениях каждый пиксел может воспроизводить еще больше цветов. Помимо того что модель RGB является режимом по умолчанию для новых изображений, создаваемых в Photoshop, она еще используется для отображения цветов компьютерными мониторами. Это означает, что при работе в цветовых режимах, отличных от RGB (например, в CMYK), Photoshop конвертирует изображение в RGB для отображения на экране.

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

Многоканальный режим

Изображения в многоканальном режиме содержат 256 уровней серого для каждого из каналов и могут пригодиться при специализированной печати. Такие изображения можно сохранять в следующих форматах: Photoshop, Large Document Format (PSB), Photoshop 2.0, Photoshop Raw и Photoshop DCS 2.0.

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

Слои не поддерживаются, и поэтому выполняется их сведение.

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

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

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

Удаление канала из изображения RGB, CMYK или Lab автоматически преобразует это изображение в многоканальный режим путем сведения слоев.

Чтобы экспортировать многоканальное изображение, его нужно сохранить в формате Photoshop DCS 2.0.

Примечание.

Изображения с индексированными и 32-битными цветами невозможно преобразовать в режим «Многоканальный».

Разбор всех типов режимов наложения

Дабы проиллюстрировать работу режимов мы будем использовать 2 слоя. Верхний слой — вертикальный синий градиент, у которого мы будем переключать режимы. На нижнем слое будет горизонтальный красный градиент. И дополнительно изображение пальмы.

Normal

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

Непрозрачность синего слоя выставлена на 50%, а под ним расположен красный слой

Dissolve и Dancing Dissolve

В этом режиме пиксели выбираются либо с верхнего, либо с нижнего слоя, в зависимости от непрозрачности исходного слоя. На самом деле этот режим не смешивает пиксели. Он просто создаёт паттерн смешивания, основанный на непрозрачности слоя. Так что если выставить непрозрачность на 50%, тогда половина пикселей будет от исходного слоя, и половина — от нижележащего.

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

Dancing Dissolve делает то же самое, но обрабатывает каждый кадр по-разному, что создаёт некий самоанимирующийся «танцующий» (dancing) эффект.

Описание режимов наложения

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

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

прозрачность
текстуризация
раскрашивание

Основы смешивания

Если вы никогда не работали с режимами смешивания, то на первый взгляд, то, как они работают может выглядеть немного неясным. Давайте рассмотрим подробнее.

Что же «режим смешивания» значит на самом деле?

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

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

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

Оригинальная картинка с медузойТа же картинка с непрозрачным оранжевым слоем-«исходником» наложенным поверх.Тот же исходник с режимом наложения «экран» («screen»)

Займёмся вычислениями

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

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

Все цвета описываются в пределах шкалы 0-1, которая преобразуется в шкалу rgb с диапазоном 0-255.

Есть две категории режимов наложения. Первая считается категория «не разделяемых» режимов, а вторая (как это не удивительно) — «разделяемых». Разделяемое это наложение или нет — это полностью определяется алгоритмом, по которому оно рассчитывается. Если алгорить одинаковым образом обрабатывает все каналы цвета (красный, зеленый и голубой), то такой режим наложения считается не-разделяемым. Если каждый канал при расчете используется отдельно, такой режим наложения считается разделяемым.

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

Комплексные режимы наложения

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

Во всех комплексных режимах кроме Overlay оценка яркости производится на основании верхнего слоя. Там, где верхние пиксели темнее 50% серого цвета, применяется субтрактивный метод, если светлее – аддитивный. Пиксели верхнего слоя, окрашенные в нейтрально серый цвет (50%), не оказывают на нижний слой никакого влияния. В режиме Overlay аналогичным образом оценивается нижний слой.

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

К тёмным участкам изображения применяется режим Multiply, а к светлым – Screen. Оценка яркости производится по нижнему слою. Если создать копию слоя и применить к ней режим Overlay, эффект будет напоминать применение S-образной кривой.

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

Так же как и в режиме Overlay используется комбинация из режимов Multiply и Screen, но яркость исходных пикселей оценивается на основании верхнего слоя. Soft Light – наиболее удобный режим для аккуратного повышения контраста, поскольку он очень деликатно обращается с тенями и светами, не допуская их выбивания.

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

Использует комбинацию режимов Linear Burn и Linear Dodge для тёмных и светлых пикселей соответственно. Результатом является довольно жёсткое повышение контраста.

Комбинация режимов Color Burn и Color Dodge. Действует ещё более интенсивно, чем Hard Light.

Комбинация режимов Linear Burn и Linear Dodge.

Комбинация режимов Darken и Lighten.

Hard Mix (Жёсткое смешение)

Действует также как и Linear Light (сочетание Linear Burn и Linear Dodge), но на пределе интенсивности, в результате чего в каждом из цветовых каналов пикселям присваивается либо минимальное (0), либо максимальное (255) значение яркости. Как следствие, цветовая палитра изображения в режиме RGB редуцируется до 8 цветов: красного (255; 0; 0), зелёного (0; 255; 0), синего (0; 0; 255), голубого (0; 255; 255), малинового (255; 0; 255), жёлтого (255; 255; 0), чёрного (0; 0; 0) и белого (255; 255; 255).

Связь с маскированием

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

В таких случаях применение режима смешивания эквивалентно Нормальному смешиванию :

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

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

Пыль и царапины с помощью screen

Функциональная противоположность называется (экран). Минутку, а разве противоположность умножению это не деление? Ответ опять лежит в области математики:

x = 1 − (1 − a) × (1 − b)

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

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

Слои для смешивания: слой с лавандовым цветом и слой с пылью и царапинами (с сайта Spoon Graphics)

Результат смешивания фотографии с этими слоями в режиме screen

Заключение

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

Что вы будете делать, если браузеры будут развивать возможности использования режимов наложения?

Ссылки по теме

Посмотрите, что делают авторы используя Экшены Photoshop и Режимы наложения на Envato Market
Узнайте больше о режимах наложения из руководства от Mozilla Developer Network
Сочетание и Смешивание в CSS статья Sara Soueidan