При работе рисующих и корректирующих инструментов важен выбранный из списка Mode (Режим) режим наложения цвета.

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

Dissolve (Растворение). Происходит замена исходного цвета на вносимый цвет со случайным распределением и с учетом прозрачности.

Behind (Подложка). Режим доступен только при работе со слоями, содержащими прозрачные участки. Для них прозрачные пикселы закрашиваются рабочим цветом, при этом должна быть разблокирована кнопкаLock Transparency в палитреLayers .

Clear (Очистка). Режим аналогичен предыдущему в инверсном исполнении. Участки изображения, имеющие цвет одинаковый с рабочим цветом, становятся прозрачными.

Darken (Замена темным). Если цвет изображения светлее цвета инструмента, он затемняется. Если изображение темнее, цвет не меняется.

Multiply (Умножение). Результирующий цвет всегда темнее исходного. Если вносится черный цвет, то результирующий цвет также становится черным. Белый цвет на исходный цвет не влияет.

Color Burn (Затемнение основы). Затемнение с частичной заменой цвета, проводимое, в основном, в темных оттенках изображения. Чем светлее цвета изображения и инструмента – тем эффект слабее, и наоборот, сильнее всего эффект проявляется в темных тонах.

Linear Burn (Линейное затемнение). Понижение яркости пикселов изображения в соответствии с яркостью рабочего цвета.

Lighten (Замена светлым) Противоположен по действию режимуDarken .

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

Color Dodge (Осветление основы). Это режимScreen с частичной заменой цвета изображения на цвет инструмента. Чем светлее цвет изображения, тем сильнее осветление. В том же направлении на силу эффекта влияет и цвет инструмента.

Overlay (Перекрытие). Цвета, которые светлее цвета инструмента, преобразуются в режимеScreen , более темные цвета – в режимеMultiply . Яркость цветов и теней не меняется. Все тона, кроме светов и теней принимают оттенки цвета инструмента. Наложение черного и белого цвета не влияет на фон.

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

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

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

Pin Light (Рассеянный свет). Если вносимый цвет имеет яркость более чем 50% серого, то пикселы изображения, более темные по сравнению с вносимыми пикселами, ими и заменяются. Если рабочий цвет имеет более низкую яркость по сравнению с 50% серого, то заменяются вносимыми пикселы изображения, более светлые по сравнению с ними. В противном случае изменений исходного изображения не происходит.

Hard Mix (Жесткое смешение). Действует аналогично режимуMultiply , но генерируется более сильный цветовой сдвиг. Изменения черных и белых цветов исходного изображения не происходит.

Difference (Разность). Результирующий цвет определяется разностью числовых характеристик исходного и вносимого цветов.

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

Hue (Цветовой тон). Результирующий цвет получает оттенок вносимого цвета, но сохраняет насыщенность и яркость.

Saturation (Насыщенность). Результирующий цвет получает насыщенность вносимого цвета, сохраняя оттенок и яркость исходного.

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

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

ИнструментEraser (Ластик) изменяет цвет всех пикселов на фоновый цвет, если работа идет с основным изображением или со слоем с фиксированной прозрачностью, либо делает все пикселы прозрачными. В спискеMode (Режим) на панели параметров представлены режимы работы ластика:Paintbrush (Кисть),Pencil (Карандаш) иBlock (Квадрат). При выборе одной из форм работа осуществляется фоновым цветом в полном соответствии с настройками инструмента (видимый размер инструментаBlock сохраняет размеры при любом масштабе изображения).

Инструмент Magic Eraser (Волшебный ластик) действует по принципу волшебной палочки, заменяя фоном фрагменты изображения, исходя из цветовой близости пикселов. Панель инструмента содержит параметрTolerance (Допуск), который определяет степень близости удаляемых цветов, параметр непрозрачности (Opacity ), а также поля флажков сглаживания (Anti - aliased ), смежности пикселов (Contiguous ) и удаления пикселов на всех видимых слоях (Use All Layers ).

Инструмент Background Eraser (Фоновый ластик) напоминает смесь инструментовEraser (Ластик) иMagic Eraser (Волшебный ластик). В панели параметров раскрывается список из трех режимов работы.

Discontiguous (Несмежные) удаляет пикселы цвета, захваченного крестиком в момент нажатия кнопки мыши, где бы они не находились на изображении.

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

Find Edges Contiguous , но с лучшим сохранением резкости краев.

Флажок Protect Foreground Color (Сохранение основного цвета) сохраняет пикселы рисующего цвета. СписокSampling (Образец цвета) содержит следующие варианты:Contiguous – образец цвета выбирается в каждой точке, над которой проходит указатель инструмента и используется для удаления смежных областей с различными цветами;Once (Один раз) – образец цвета выбирается в точке первого щелчка мыши и удобен при удалении сплошных заливок;Background Swatch (Фоновый цвет) в качестве образца цвета выбирается фоновый цвет.

ИнструментPaint Bucket (Заливка) используется для заполнения основным цветом области с цветами, близкими (в пределах допуска) к цвету пиксела, по которому был выполнен щелчок. В спискеFill (Заливка) панели параметров можно выбрать заливку основным цветом (Foreground ) или по образцу (Pattern ). При выборе последнего варианта становится доступным список с образцами (Pattern ) декоративных заливок. Для создания образца декоративной заливки следует создатьпрямоугольное выделение фрагмента изображения (при нулевом значении растушевки (Feather )) и выполнить командуDefine Pattern (Определить образец) менюEdit .

ИнструментGradient (Градиент) используется для создания заливки с плавным переходом одного цвета в другой. Панель параметров предлагает варианты градиента – линейный (Linear ), радиальный (Radial ), конический (Angle ), отраженный (Reflected ), ромбовидный (Diamond ). В списке градиентов можно выбрать имеющийся образец, настроить параметры и протянуть курсором линию по выделению (если выделение отсутствует, растяжка будет отнесена ко всему изображению). Длина линии соответствует всему диапазону растяжки и, если линия короче выделенной области, края растяжки заполняются чистыми граничными цветами, а если длиннее, то в область попадет только часть растяжки. ФлажокInverse (Инверсия) используется для обращения порядка цветов в растяжке, флажокDither (Имитация) служит для имитации отсутствующего в данной палитре цвета с помощью сочетания более мелких точек из имеющихся цветов. Для использования маски прозрачности имеется флажокTransparency (Прозрачность). Для создания или редактирования градиента следует щелчком в окне образца растяжки вызвать окноGradient Editor (Редактор градиента). В спискеGradient Type (Тип градиента) следует выбрать вариантSolid (Сплошной). Маркеры под полосой просмотра определяют цвета в градиенте, щелчок на маркере делает доступными поляColor (Цвет) иLocation (Положение). Щелчком на полеColor или двойным щелчком на маркере открывается диалоговое окно цветовой палитры (Color Picker ), где выбирается цвет. Присвоить цвет можно и инструментомEyedropper (Пипетка), в который превращается курсор на полосе растяжки. Между цветами градиента расположены средние точки, отмеченные ромбиками, перемещением которых настраивается плавность перетекания. Новый маркер можно установить щелчком под полосой просмотра. Правее поляColor имеется кнопка с треугольником, щелчок по которой открывает меню из трех пунктов:Foreground /Background (Основной/фоновый цвет) присваивает маркеру текущий рисующий/фоновый цвет,User Color (Цвет пользователя) присваивает выбранный цвет.

Над полосой просмотра располагаются маркеры непрозрачности. После выделения маркера становятся доступными поля Opacity (Непрозрачность) иLocation (Положение). Редактирование непрозрачности аналогично редактированию цветов.

После настройки градиента щелчком по кнопке New (Новый) можно сохранить его в окне образцов.

В списке Gradient Type (Тип градиента) имеется еще один тип градиента –Noise (Случайный), цвета в котором выбираются программой случайно. Пользователь может определить цветовой диапазон в одной из моделей –RGB ,HSB ,Lab – спискаColor Model (Цветовая модель). Некоторое ограничение состава цветов вносит флажокRestrict Colors (Ограничение цветов), флажокAdd Transparency (Добавить прозрачность) случайным образом добавляет прозрачные области. Новый набор градиента создается кнопкойRandomize (Случайная выборка). В полеRoughness (Резкость) определяется плотность и резкость цветовых переходов (0-100%).

ИнструментClone Stamp (Штамп) используется для копирования произвольной области в интерактивном режиме. Для копирования изображения следует включить инструмент и при нажатой клавишещелкнуть в том месте, откуда будет взята копия, переместить курсор в положение копии, нажать кнопку мыши и начать копирование. Область, с которой снимается копия при нажатой клавише,указывается дополнительным курсором в виде знака «+». Для работы инструментаPattern Stamp (Узорный штамп) необходимо выбрать образец из раскрывающегося списка на панели параметров инструмента, либо создать образец изпрямоугольного выделения нужного фрагмента командойDefine Pattern (Определить образец) менюEdit , после чего включить инструмент и начать рисовать. При установленном флажкеAligned (Выравнивание) перерыв в копирования не влияет на целостность копируемой области. При снятом флажке каждое возобновление копирования начинает новую копию.

ИнструментHealing Brush (Корректирующая кисть) по принципу действия аналогичен инструментуClone Stamp , но в отличие от него в процессе переноса пикселов редактор адаптирует клонируемый фрагмент с учетом текстуры, освещения и затенения корректируемой области.

ИнструментPatch (Заплата), как иHealing Brush , учитывает освещение, цвет и текстуру области при клонировании, но использует вместо кисти выделенную область. Для работы необходимо выделить область, которая становится либо получателем, либо донором в зависимости от положения переключателяSource /Destination на панели инструментов. Поместив курсор во внутреннюю точку области, следует просто перетащить ее на новое место. При щелчке по кнопкеUse Pattern выделенная область заливается выбранным узором с учетом тех же характеристик.

ИнструментColor replacement (Замена цвета) представляет собой нечто среднее между инструментомBrush (в режимеColor ) и инструментомBackground Eraser . СписокSampling (Образец) содержит ряд вариантов. ЕслиContiguous , то цвет заменяется в каждой точке, над которой проходит указатель инструмента, приOnce (Один раз) – образец заменяемого цвета выбирается в точке первого щелчка мыши, приBackground Swatch (Фоновый цвет) в качестве заменяемого цвета выбирается фоновый цвет.

Параметр Tolerance (Допуск) определяет степень близости заменяемых цветов. СписокLimits , состоящий из трех режимов работы определяет, каким образом будет заменяться цвет в зоне действия инструмента.

Discontiguous (Несмежные) заменяет пикселы цвета, в пределах действия диаметра кисти.

Contiguous (Смежные) заменяет в пределах действия диаметра кисти пикселы цвета смежные по цвету с пикселами, расположенными под перекрестием кисти.

Find Edges (Выделение краев) то же что иContiguous , но с лучшим сохранением резкости краев. ФлажокAnti - aliased задает сглаживание границ.

ИнструментSmudge (Палец) имитирует эффект размазывания влажной краски – цвет захватывается курсором в начале штриха и при движении смешивает с окружающими цветами. ФлажокFinger Painting (Рисование пальцем) позволяет добавить в растушевку основной цвет.

ИнструментBlur (Размытие) уменьшает, а инструментSharpen (Резкость) увеличивает цветовую контрастность соседних пикселов изображения.

Инструмент Dodge (Осветлитель) ослабляет уровень тона изображения. ИнструментBurn (Затемнитель) увеличивает тоновый уровень изображения.

ИнструментSponge (Губка) меняет насыщенность тона и цвета. Для инструментовDodge иBurn представлен список тоновых уровней (Range ) для избирательного влияния:Midtones (Средние тона),Shadows (Тени),Highlights (Светлые тона). Для инструмента в спискеMode имеется два режима:Desaturate (Обесцветить),Saturate (Насытить).

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

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

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

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

Наложение, затемнение или умножение

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

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

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

Создание интересных эффектов с помощью наложения

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

Чтобы присвоить объекту режим наложения, выберите его на панели Атрибутов. Не забудьте включить Overprint Preview в меню Вид чтобы эффект отобразился, иначе все будет выглядеть так, как будто ничего не изменилось.

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

В расширенных настройках опциях в настройках печати измените Overprint и Transparency Flattener опции на “Simulate”, чтобы в файле PDF отображался эффект наложения.

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

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

В прошлых уроках по изучению важных режимов наложения, которые необходимо знать для обработки фотографий, мы познакомились с режимами наложения, каждый из которых либо делал изображение темнее, либо делал его светлее, либо одновременно и затемнял, и осветлял изображение. Так, режим наложения «Умножение» (Multiply) не учитывал белые области и делал изображение темнее. Режим наложения «Экран» (Screen) не учитывал черные области и делал изображение светлее, в то время как режим наложения «Перекрытие» (Overlay) игнорировал области серого оттенка и делал темные области еще темнее, а светлые области - еще светлее, тем самым, увеличивая контрастность.

Наш четвертый важный режим наложения не работает ни с тенями, ни с бликами, ни с контрастностью снимка, а отвечает за цвет, поэтому нет ничего удивительного, что этот режим называется «Цветность» (Color). Если вы вернетесь к первому уроку, то вспомните, что режим наложения «Цветность» входит в группу компонентных режимов, наряду с режимами «Цветовой тон» (Hue), «Насыщенность» (Saturation) и «Яркость» (Luminosity).

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

Применение режима наложения «Цветность» в реальной жизни

Часто режим наложения «Цветность» используют для раскрашивания черно-белых снимков. Применение данного режима позволяет нам добавлять на изображение цвет без изменения степени яркости. Все, что требуется - это добавить новый пустой слой над слоем с изображением и изменить режим наложения этого слоя на «Цветность». Затем следует выбрать на панели инструментов инструмент «Кисть» (Brush Tool), установить необходимый цвет и начать закрашивать слой для добавления цвета. Ниже представлен старинный свадебный снимок:

Старинная черно-белая фотография свадебной пары

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

Нажимаем на значок «Создать новый слой »

Это действие придет к созданию нового пустого слоя над слоем заднего фона. По умолчанию, программа Фотошоп даст имя новому слою «Слой 1» (Layer 1), но так как мы будем использовать этот слой для раскрашивания роз, я дважды кликну мышкой по названию слоя на панели слоев и переименую его в «Розы» (Roses):

На панели слоев виден новый пустой слой «Розы», расположенный над слоем заднего фона

Если бы мы в данный момент начали раскрашивать новый слой инструментом «Кисть», мы бы затронули нижележащий слой, потому что у нового слоя выбран режим «Нормальный» (Normal). Поскольку нам требуется добавить цвет на изображение, не влияя на общую цветовую картину, мы должны изменить режим наложения слоя на «Цветность» (Color):

Изменяем режим наложения слоя «Розы» на «Цветность»

Теперь я выберу инструмент «Кисть» (Brush Tool) на панели инструментов и, установив красный цвет в качестве цвета переднего плана, приближу изображение роз и начну закрашивать их в красный цвет. Обратите внимание, что из-за способности режима наложения «Цветность» смешивать новый цвет с нижележащим изображением мы все еще можем видеть светлые и темные области на розах под красным цветом, которым мы закрашиваем цветы:

Закрашиваем розы в красный цвет

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

Розы стали красного цвета

Цвет кажется слишком ярким, поэтому я уменьшу непрозрачность (Opacity) слоя «Розы» до 60%:

Уменьшаем непрозрачность слоя «Розы»

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

Изображение после уменьшения непрозрачности слоя «Розы»

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

К настоящему моменту мы изучили четыре из пяти важных режимов наложения для обработки фотографий в Фотошоп. В следующем уроке мы рассмотрим пятый и последний важный режим наложения «Яркость» (Luminosity), который является прямой противоположностью режиму наложения «Цветность»!

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

Одной из последних возможностей, попавших в руки веб-дизайнеров является обработка изображений с помощью режимов наложения (смешивания). Режимы наложения позволяют с легкостью раскрашивать изображения и добавлять текстуру, а также применять другие эффекты без необходимости лишний раз открывать графический редактор. Это экономит время, так как позволяет избежать повторной обработки графики при внесении изменений, а также предотвращает проблемы при необходимости еще раз применить настройки, созданные несколько месяцев назад. Вместо этого нужные графические режимы можно задавать, применять и поддерживать с помощью нескольких деклараций 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 { background-image: url("dust-and-scratches.jpg"), url("mountain.jpg"); background-blend-mode: screen; }

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

.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 */ } .graphic { mix-blend-mode: multiply; opacity: 70%; /* overprint effect */ }

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

.red-disc, .green-disc, .blue-disc { mix-blend-mode: screen; }

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

Background { isolation: isolate; }

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

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

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

.background { background-image: url("mountain.jpg"); } .ad-contents { background-color: white; mix-blend-mode: color-dodge; }

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

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

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

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

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

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

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