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

Где найти режимы смешивания?

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

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

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

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

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

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

Вместо того, чтобы использовать фильтр «Цветовой тон / Насыщенность» («Нuе / Sаturаtiоn») или другой, мы можем применить режимы смешивания для создания желаемых оттенков. Можно воспользоваться клавишами со стрелками для просмотра всех вариантов или сразу выбрать нужный.

Режимы наложения — не настраиваемые элементы, т.е. их нельзя редактировать. Но этого и не потребуется! Интенсивность эффекта от того или иного режима можно скорректировать заливкой («Fill») и непрозрачностью («Орасity»).

Другие применения режимов смешивания

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

Используя, например, режим смешивания «Жесткий свет» («Наrd Light») и меняя параметр «Непрозрачность» («Орасity»), можно получить довольно интересные эффекты с возможность бесконечно редактировать их.

К тому же режимы наложения можно суммировать! Ниже пример из 3-х предыдущих слоев.

Возможности использования режимов смешивания безграничны. Они дают гораздо больше гибкости, нежели использование статичных эффектов, таких как «Нuе / Sаturаtiоn», например, для получения того же эффекта тонирования или чего-то другого. Попробуйте поиграть с режимами наложения и найти то, что в данный момент идеально подходит.

Примеры

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

Помните, что текстура в палитре слоев должна находиться непосредственно над основным изображением. Непрозрачность составляет 100% либо 50%.

Текстура:

Подробнее о режимах наложения

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

Нормальный (Normal ) 50%

Использует процент смешивания слоев. 100% используeт смешанное изображeние полностью, а 0% означает, что он не используeтся вообще.

Затухание (Dissolve ) 50%

Из наложенного изображения выбирается произвольный пиксель и добавляется в базовое. Как и в нормальном режимe, 100% используeтся наложение полностью и 0%, что оно вообще не используется.

Затемнение (Darken )

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

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

Принимаeт информацию от каждого пиксeля, умножает 8-разрядные цветовые значения в каждом из каналов (RGВ) и делит на 255. В итоге цвет всегда будет более темный, кроме белого: (0 X 0) / 0 = 0.

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

Принимает значение 8-разрядного цвeта каждого канала базового слоя и делит на накладываемый. Получается более высококонтрастное изображение, в целом темнее.

Линейный затемнитель (Linear Burn)

Добавляет два 8-битных цветовых значения на канал делит на 255, в результате чего темные области становятся намного темнее, а светлые получают более высокую контрастность.

Темнее (Darker Color) 50%

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

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

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

Осветление основы (Color Dodge )

Делит базовый слой на перевернутый накладываемый.

Добавляет 8-разрядный цвет на канал значения из каждого слоя. Сопоставим с эффектом режима «Экран», но с более высокимэффектом контраста. Если базовый слой черный, то изменений не будет.

Работаeт как рeжим «Замeна светлым», но смотрит на все каналы.

Использует комбинацию режимов «Экран»а и «Умножение», повышая при этом контрастность изображения.

Аналог режима «Перекрытие», но с меньшим контрастом.

Аналог режима «Перекрытие», но с большим контрастом.

Сочетает режимы «Осветлeние основы» и «Затемнeние основы» и использует накладываемый слоя в качестве опорного.

Аналог режима «Яркий свет», но с более высокой контрастностью.

Объeдиняет пиксeли накладываемого изображения, используя режим «Замeна светлым», и тёмные пиксели базового, используя режим «Затeмнение».

Яркость накладываемого изображения добавляется в цвет базового.

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

Этот режим смешивания слоя — более мягкий вариант режима «Разница».

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

Делит 8-битное значение цвета каждого слоя друг на друга.

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

Сохраняет яркость и оттeнок базового слоя, но использует насыщенность накладываемого слоя.

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

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

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

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

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

Для переключения режимов смешивания при помощи клавиатуры, можно нажимать Shift + для передвижения вниз по списку режимов и Shift — для движения в обратном направлении.

Характеристика режимов смешивания (рассмотрим на примере смешивания изображения (непрозрачность = 82%)с фоновой черно-белой картинкой:

Нормальный (Normal) – простой режим смешивания. При непрозрачности верхнего слоя смешивания не происходит. Если верхний слой прозрачен предположим на 15%, то нижний под ним слой будет “просвечивать” на эту величину:

Растворение (Dissolve) – представляет собой губчатую, крапчатую структуру:

Умножение (Multiply) – изображение получается более темным, цвета насыщенными, так как при этом режиме смешивания темные цвета заменяют более светлые:

Осветление (Screen) – противоположный умножению режим:

Наложение (Overlay) – пиксели верхнего слоя помещаются над нижним только в том случае, если они более насыщенные. Темные области базового слоя становятся более темными, а светлые – более светлыми:

Мягкий свет (Soft Light) – если цвет основного слоя светлый, то базовый слой осветляется, если же темный – то затемняется. Результат смешивания в данном примере такой же, как в предыдущем слое.

Жесткий свет (Hard Light) противоположен режиму смеживания наложение. Здась за основу берутся пикселы базового слоя:

Осветление (Color Dodge) – темные участки верхнего изображения не оказывают никакого влияния на нижнее, в то же время, как светлые обесцвечивают базовый слой.

Затемнение (Color Burn) – использует темные участки верхнего слоя для затемнения базы, а светлые не оказывают влияния:

Замена темным (Darken) – если пиксел верхнего слоя темнее, тогда он помещается в результирующее изображение. Результат изображения в данном примере похож на предыдущий.

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

Слои

Для того, чтобы попытаться понять «что такое слои изображения» рассмотрим две фотографии. Одна из них будет использоваться в качестве фона (или нижнего слоя), а другая - в качестве первого слоя, помещаемого над фоном:

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

Пиксели и прозрачность

Каждый слой в Paint.NET составлен из пикселей которые сохранены в формате RGBA. Часть аббревиатуры «RGB» обозначает цвета (красный, зеленый и синий) используемых, для передачи интенсивности цвета. Часть «A» (Альфа) обозначает переменную используемую, для хранения информации о прозрачности пикселя. Альфа может принимать значение от 0 (полностью прозрачный) до 255 (полностью непрозрачный). Другие программы могут использовать границы в пределах от 0 до 100 %.

Если пиксель прозрачен, то вместо его цвета будет показан цвет пикселя расположенного «под ним», тоесть цвет пикселя нижнего слоя. Для того, чтобы отобразить слоистое изображение на стандартном компьютерном мониторе, Paint.NET использует методику альфа-каналов.

Однако, прозрачные пиксели не могут быть отображены на компьютерном мониторе. Для того, чтобы как-то указать на прозрачность слоя, Paint.NET использует фон напоминающий изображение шахматной доски:

Прозрачность

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

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

Слои и непрозрачность

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

Например, если мы возьмем верхний слой и постепенно уменьшим непрозрачность от 225 до 0 то получим нижеследующие изображения, показывающие слои в виде стопки слайдов и в том виде как это отображается на экране компьютера:

Верхний слой полностью непрозрачен

Верхний слой полупрозрачен

Верхний слой полностью прозрачен

Режимы смешивания

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

Не все названия режимов смешивания слоев «интуитивно понятны», поэтому в любом случае рекомендуется экспериментировать. Каждый режим смешивания описанный ниже применен к двум слоям рассмотренным выше с уровнем непрозрачности установленным на отметке 255.

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

Нормальный (Normal)
Стандартный режим применяемый по умолчанию. Каждый пиксель в слое смешивается с композицией в зависимости от значения прозрачности. Если верхний слой полностью непрозрачный он закрывает собой нижний слой полностью. При уменьшении прозрачности верхнего слоя начинает проступать нижний слой.

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

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

Затемнение основы (Color Burn)
Создает эффект испепеления нижнего слоя под воздействием верхнего. То есть темные участки верхнего слоя используются для затемнения нижнего. Используется умножение цветов и увеличение насыщенности. Результат выглядит очень контрастно.

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

Отражение (Reflect)
Этот режим смешивания может быть использован для придания блеска объектам или светлым участкам.

Свечение (Glow)
Тоже что и предыдущий режим, но как-бы после смены очередности слоев.

Перекрытие (Overlay)
В зависимости от интенсивности цвета пикселей слоя применяется режим«Экранное осветление» (для темных цветов) или «Умножение» (для светлых).

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

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

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

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

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

Исключение (Xor)
Этот режим в основном используется для анализа изображения, а не обработки изображения или композиции.

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

Шаги

Режимы смешивания цветов

Модифицируйте инструмент «Кисть» (если хотите). Выберите инструмент «Кисть» или «Карандаш» на панели инструментов слева. Откройте настройки инструмента «Кисть», нажав Window → Кисть в верхнем меню или щелкнув по значку в виде листа бумаги в верхней панели параметров. Задайте нужный размер и форму инструмента «Кисть».

• Если вы новичок в Photoshop, пользуйтесь инструментом «Кисть» с настройками по умолчанию. Когда вы поймете, что ваша кисть слишком большая или слишком маленькая, вы всегда можете вернуться к этому меню, чтобы внести изменения.
• Задайте жесткость кисти – выберите максимальное значения для кисти с четким контуром, а минимальное значение для кисти с размытым контуром.

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

   • В некоторых версиях Photoshop вы можете изменить режим смешивания в настройках инструмента «Кисть».
   • В старых версиях Photoshop некоторые из описываемых режимов могут отсутствовать.

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

   Смешивание цветов в режиме «Перекрытие». Этот очень популярный режим смешивания цветов делает светлые участки светлее, а темные – более темными. Конечным результатом будет изображение с усиленными светом и тенью и устраненными недостатками из-за избыточной и недостаточной экспозиции.

   • Если вам интересны детали, этот режим использует формулу режимов «Умножение» и «Осветление», которые описаны ниже.

3. Затемнение изображения. Это можно сделать несколькими методами.

   Осветление изображения. Каждый режим затемнения имеет противоположный режим осветления:

   Измените цвет переднего и заднего планов. Режимы «Подложка» и «Очистка» доступны в многослойных изображениях. В режиме «Подложка» цвет меняется за слоем и отображается только в прозрачных областях. Режим «Очистка» является, по существу, ластиком, делая прозрачными все пиксели перед задним планом.

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

   Удаление цветов в режимах «Вычитание» и «Деление». В режиме «Вычитание» подобные цвета становятся темнее, а в режиме «Деление» – светлее.

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

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

   • Оттенок (например, конкретный оттенок красного).
   • Насыщенность (низкая насыщенность добавляет серые тона, а высокая делает цвета более яркими).
   • Яркость (делает цвет более ярким или тусклым).

4. Добавьте цвет в черно-белое изображение. В режиме «Цвет» значения оттенка и насыщенности базового цвета меняются на соответствующие значения смешанного цвета, а яркость остается без изменений.

   Другие методы смешивания цветов

   1. Попробуйте смешать градиенты. На панели инструментов найдите инструмент «Заливка». Нажмите и удерживайте его до тех пор, пока не откроются параметры инструмента. Выберите «Градиент», а затем щелкните по панели градиента в верхней части окна. Задайте оттенки и другие значения. При помощи инструмента «Лассо» или «Волшебная палочка» выберите область изображения, а затем примените градиент, перетащив его в выделенную область. Результатом будет плавный переход между двумя цветами.

      Сделайте копию и сотрите. Сделайте копию слоя или области изображения, которую вы пытаетесь изменить. Перенесите копию на новый слой над оригиналом. Выберите инструмент «Ластик» с мягкими контурами и непрозрачностью в пределах 5 и 20%. Постепенно сотрите верхний слой до получения желаемого эффекта.

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

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

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

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

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

Раскрашивание с помощью hue и color

У всех режимов смешивания есть потенциал к изменению цвета графики, но особо полезны для раскрашивания два из них: цветовой тон (hue) и цветность (color).

Цветовой тон hue

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

Цветность color

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

Красно-коричневое наложение делает пиксели исходника красновато-коричневыми, также как и в режиме hue , но оно также придает им одинаковую насыщенность

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

Кроссбраузерное наложение

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

Управление цветом это сложный мир и хотя W3C рекомендует использовать по умолчанию профиль sRGB, подход производителей браузеров различается - каждый браузер рендерит цвета согласно своим прихотям. Например, в Chrome рендеринг изображений основывается на “неуправляемом” цветовом пространстве, если в изображении не прописан цветовой профиль. Firefox работает также, но глубоко в его конфигурационных настройках запрятан флаг , устанавливающий sRGB по умолчанию для изображений с не указанным профилем. А Safari действует почти как Photoshop, так как графический API Apple основан на Adobe Postscript. Да, даже здесь есть свои отличия.

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

И еще - не забывайте тестировать на “живых” устройствах, а не только в режиме эмуляции, чтобы понять как хардверные ограничения (типа нехватки оперативной памяти) влияют на ваш сайт. Некоторые режимы наложения могут вызвать задержки при прокрутке страницы. И если вы добиваетесь гладкости 60 кадров в секунду, учитывайте это при своем выборе.

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

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

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

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

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

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

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

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

Background { background-image: linear-gradient(hsl(26, 24%, 42%), hsl(26, 24%, 42%)), /* sepia */ linear-gradient(hsl(316, 22%, 37%), hsl(316, 22%, 37%)), /* lavender */ url("dust-and-scratches.jpg"), url("mountain.jpg"); background-blend-mode: color, /* sepia */ screen, /* lavender */ screen; /* dust-and-scratches */ }

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

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

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

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

Background { isolation: isolate; }

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

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

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

When you’re on top of the world,
the only way to go is down.

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

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

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

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

Также есть проблема с Safari - он не поддерживает режимы hue , saturation , luminosity и color .

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

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