10 самых востребованных режимов наложения

Уклоняйся и сжигай

Dodge и Burn изменяют яркость изображений, вдохновленные уклонение и сжигание выполняется в темной комнате. Уклонение делает изображение светлее, а прожиг — темнее. Осветление изображения аналогично прожиганию его негатива (и наоборот).

• Режимы уклонения:
  • В Экран Режим наложения инвертирует оба слоя, умножает их, а затем инвертирует результат.
  • В Осветление цвета В режиме наложения нижний слой делится на перевернутый верхний слой. Это осветляет нижний слой в зависимости от значения верхнего слоя: чем ярче верхний слой, тем сильнее его цвет влияет на нижний слой. Смешивание любого цвета с белым дает белый цвет. Смешивание с черным не меняет изображения. Операция не обратима из-за возможных вырезка из основных моментов. (Обрезка происходит в той же области, что и для Линейный уклонение.) Когда верхний слой имеет однородный цвет, этот эффект эквивалентен изменению белая точка к инвертированному цвету. Воспринимаемый контраст увеличивается, когда нет отсечения.
  • В Линейный уклонение режим наложения просто суммирует значения в двух слоях (также известных как аддитивное смешение). Смешивание с белым дает белый цвет. Смешивание с черным не меняет изображения. Когда верхний слой содержит однородный цвет, этот эффект эквивалентен изменению выходной черной точки на этот цвет и (входной) белая точка к инвертированному цвету. При отсутствии отсечения контрастность уменьшается.
  • Разделять: То же, что и «Осветление цвета», но смешивание с белым не меняет изображения.

• Режимы записи:
  • В Умножить режим просто умножает каждый компонент в двух слоях.
  • В Цветной огонь режим делит перевернутый нижний слой на верхний слой, а затем инвертирует результат. Это затемняет верхний слой, увеличивая контраст, чтобы отразить цвет нижнего слоя. Чем темнее нижний слой, тем больше используется его цвет. Смешивание с белым не дает никакой разницы. Когда верхний слой имеет однородный цвет, этот эффект эквивалентен изменению цвета. Черная точка к инвертированному цвету. Операция необратима из-за возможного отсечения теней. Обрезка происходит в той же области, что и для Линейный ожог.
  • В Линейный ожог в режиме суммирует значения в двух слоях и вычитает 1. Это то же самое, что инвертировать каждый слой, складывать их вместе (как в Linear Dodge), а затем инвертировать результат. Смешивание с белым оставляет изображение без изменений.
• Яркий свет: этот режим наложения сочетает в себе «Осветление» и «Затемнение» (масштабирование изменено так, чтобы нейтральные цвета стали серыми). Осветление применяется, когда значения в верхнем слое светлее среднего серого, а затемнение применяется к более темным значениям. Средний серый цвет — нейтральный цвет. Когда цвет верхнего слоя светлее этого, это эффективно смещает белую точку нижнего слоя вниз на вдвое большую разницу; когда он темнее, черная точка сдвигается вверх вдвое. (Это увеличивает воспринимаемый контраст.)
• Линейный свет: этот режим наложения сочетает в себе Linear Dodge и Linear Burn (масштабирование изменено так, чтобы нейтральные цвета стали серыми). Осветление применяется, когда значение верхнего слоя светлее среднего серого, а затемнение применяется, когда значение верхнего слоя темнее. Вычисление упрощается до суммы нижнего слоя и удвоенного верхнего слоя за вычетом 1. Этот режим уменьшает контраст.
• Вычесть: этот режим наложения суммирует значения в двух слоях и вычитает 1. В отличие от Linear Burn, наложение с белым влияет на изображение.

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

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

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

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

Поскольку эти режимы наложения основаны на цветовом пространстве, которое намного ближе, чем RGB к воспринимаемым измерениям, его можно использовать для корректировки цвета изображения без изменения воспринимаемой яркости и для управления контрастом яркости без изменения оттенка или цветности. Режим «Яркость» обычно используется для повышения резкости изображения , поскольку человеческое зрение гораздо более чувствительно к мелкомасштабному контрасту яркости, чем к цветовому контрасту. (См. Контраст (видение) )

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

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

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

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

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

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

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

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

Преобразования цветовых режимов

Это в чем-то даже
плохо — то, что фирма Adobe сделала столь легким
процесс преобразования изображений из одного
цветового режима в другой. Вы спросите, почему? Да
потому, что такая операция может привести к
безвозвратной утрате качества картинки. Ведь
каждый раз, когда вы переходите от одного
цветового режима к другому, теряется часть
информации, содержащейся в каждом из пик селей
изображения. Выполните смену режимов несколько
раз — и значительная часть информации
будет утрачена. К тому же только один режим, RGB,
обеспечивает доступ ко всем командам программы
Photoshop (за исключением, конечно, тех команд,
которые предназначены для других, строго
определенных режимов, таких как Bitmap — (Битовый).

А теперь, когда
предостережение высказано, поясним:
единственное, что требуется для перехода к
новому режиму представления изображения, —
это выбрать команду меню Image<>Mode<>Mode name (Изображение<>Режим<>Название режима), где
вместо слов Mode name (Название режима) должна
стоять одна из команд подменю Mode (Режим).
Впрочем, для перехода от одного из
многокрасочных режимов к Bitmap
(Битовый) или Duotone (Дуплекс) следует вначале
преобразовать изображение к модели
Grayscale (Градации серого).

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

Эффект прозрачности с multiply

Начнем с режима наложения “умножение” (). Математическую формулу этого режима можно представить так:

x = a × b

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

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

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

Это все хорошо, но что с этим можно сделать на практике?

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

Два слоя без смешивания

Два слоя в режиме смешивания

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

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

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

Screen действует противоположно режиму Multiply. Вместо затемнения он осветляет. На изображении ниже знакомый градиент и прямоугольники. При включении режима Screen из прямоугольников пропадают темные области. И так устроен Screen. На этот раз выигрывают светлые пиксели. Светлые области остаются, слегка светлые усиливаются, темные уходят.

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

Вычитающие режимы (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.

Практика

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

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

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

Далее мы последовательно переберём для верхнего слоя все возможные режимы наложения и посмотрим, что из этого получится. В данных примерах я не преследую никаких художественных целей, а просто пытаюсь продемонстрировать механику смешивания слоёв в различных режимах. Для большей наглядности непрозрачность верхнего слоя будет составлять 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 (белый цвет).

Режимы наложения слоёв. Начинаем использовать

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

Примечание переводчика. «Значительность эффекта», вызываемого применением определённого режима наложения, и «полезность» того или иного режима зависит от обрабатываемого изображения, задачи, которая перед Вами стоит, и выбранной тактики обработки.

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

Цвет (Colour)

В этом режиме наложения изображение-результат получается путём комбинации светлот базового слоя и цветов накладываемого слоя. Получается, одно качество (светлота, например) берётся от одного слоя, а другое качество (в данном случае, цвет) – от другого слоя.

Режим наложения «Цвет», возможно, самый полезный в создании сложных цветовых эффектов.

Разница (Difference)

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

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

Осветление (Screen)

Исходное изображение в целом осветляется. Чёрные (но не тёмные) участки снимка не подвергаются воздействию. Картинка-результат сохраняет детали базового слоя.

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

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

В этом режиме повышается контраст изображения: тени становятся темнее, блики – светлее. Любые участки картинки, окрашенные в 50%-ый серый цвет остаются неизменными после наложения.

Умножение (Multiply)

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

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

Непрозрачность (Opacity)

Хотя режимы наложения – штука полезная, применение их в чистом виде может привести к слишком сильному эффекту. На помощь приходят два свойства слоя: непрозрачность и заливка (Fill).

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

Например, если «Осветление» слишком сильно осветляет картинку, уменьшите непрозрачность накладываемого слоя:

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

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

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

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

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

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

Похожие уроки и записи блога

Добавляем градиент к фону элементаЦвета и фон

Первое знакомство с PythonЗнакомство с Python

Работа с файлами в Python Знакомство с Python

Типы данных в PythonЗнакомство с Python

Свойство z-index для определения уровня элементаПозиционирование

Основы функций в PythonЗнакомство с Python

Знакомимся с Flexbox в CSSЗнакомство с Flexbox

Обработка исключений (try/except) в PythonЗнакомство с Python

Внутреннее устройство и сортировка словаря в PythonЗнакомство с Python

Предыдущий урок «148. Свойство margin для установки отступов» Следующий урок «153. Свойство color для работы с цветом»

Свойство background-size определяет размер фонового изображения

Для установки размера фонового изображения используется свойство . Оно может принимать как два, так и одно значение. Первое значение указывается для ширины, второе для высоты. Если указано только одно значение, то второе значение (высота) принимает значение . Синтаксис:

Код CSS

Значения могут задаваться в любых разрешенных в CSS единицах, процентах и ключевыми словами:

1. – размеры изображения изменяются таким образом, чтобы сохранялись пропорции, ширина или высота равнялась размерам блока;
2. – размеры изображения изменяются таким образом, чтобы сохранялись пропорции, и изображение полностью поместилось в блок;
3. – например, если первое значение равно 200px, а второе auto, то высота изображения будет вычисляться автоматически с сохранением пропорций.

Рассмотрим пример:

Код CSS

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

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

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

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

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

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)}), но возможны и другие операции Портера-Даффа. Шаг компоновки приводит к тому, что форма верхнего слоя, определяемая его альфа-каналом, появляется поверх нижнего слоя.