При работе рисующих и корректирующих инструментов важен выбранный из списка 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 (Насытить).

Назначение оттенка можно производить непосредственно в палитре цветов, выбирая значение оттенка данного цвета из раскрывающегося списка с шагом 5%, либо в диалоговом окне Fill and Stoke (Фон и линия). Оттенок можно определить и как отдельный элемент палитры, связанный с базовым цветом. О том, как это делается, написано в гл. 19 . Наконец, можно определить оттенок цвета как отдельный, не связанный ни с каким другим, цвет. Это приемлемо в случае, если вы часто редактируете палитру, убирая из нее лишние цвета. При удалении базового цвета все оттенки, с ним связанные, обращаются в черный цвет. В случае, если оттенок определен как отдельный цвет, его эти изменения не коснутся.

Списки Tint (Оттенок) в диалоговом окне Fill and Stroke (Фон и линия) и в палитре Colors (Цвета) независимы. Если вы назначаете для фона объекта цвет, являющийся 60%-ным оттенком какого-либо базового цвета, а затем с помощью команды Fill (Фон) или палитры цветов определяете локально оттенок 50%, то базовый цвет будет "разбавлен" дважды и окончательный оттенок составит всего 30%. В конце данной главы приводится несколько советов по дизайну, касающихся назначения оттенков цвета.

Условные "цвета"

Кроме определенных пользователем цветов публикации, в палитре обязательно присутствуют четыре основных цвета, которые нельзя удалять и редактировать. Это стандартные цвета ([Без цвета]), ([Бумага]), ([Черный]) и ([Совмещение]). Собственно говоря, из них только последние два действительно являются цветами, а первые - скорее, режимы работы программы с объектами.

• ([Без цвета]). Отменяет любые выполненные программой PageMaker назначения цвета выделенному объекту. Если задать этот атрибут объекту PageMaker, он станет прозрачным. Для импортированных объектов атрибут отменяет присвоение объекту цветов средствами PageMaker и возвращает изображение в исходное состояние.

  Отсутствием заполнения можно пользоваться при ошибочном присвоении цвета импортированному объекту. Для этого необходимо лишь применить пункт палитры ([Без цвета]) к нужному объекту, и первоначальные цвета объекта будут восстановлены.

  Если при импорте EPS-файла был установлен режим замены именованных цветов изображения на таковые из палитры PageMaker, назначение отсутствия заполнения возвратит изображение к исходному виду, отменив при этом назначенные в процессе импорта цвета PageMaker.

  Кроме того, возвратить исходные цвета файлу EPS можно и установив флажок Preserve EPS Colors (Сохранить цвета EPS) во вложенном диалоговом окне Print Color (Печатать, Цвет).

• ([Бумага]) - это тоже "ненастоящий" цвет. С его помощью устанавливается режим поведения объекта при его перекрытии с другими объектами. Любой объект, которому назначен цвет ([Бумага]), подавляет цвета всех лежащих ниже объектов. Область страницы, занятая объектом, которому назначен цвет бумаги, защищается от нанесения краски, даже в той части, где этот объект перекрывает объект другого цвета. Если публикацию предполагается печатать на цветной бумаге, целесообразно отредактировать определение цвета ([Бумага]) таким образом, чтобы изображение на мониторе больше соответствовало внешнему виду страницы после печати. Но не забывайте, что этот цвет означает просто отсутствие краски.
• ([Совмещение]). Назначается объекту, после чего он печатается на всех деленных полосах и фотоформах. Для достижения такого эффекта цвет определяется как 100%-ное заполнение всеми типографскими красками. Можно редактировать данный цвет, изменяя его оттенок (и только). Применяется для форматирования маркеров обрезки, меток совмещения, маркировки фотоформ и т. д.
• ([Черный]). Объект всегда печатается черной краской оттенком 100%. Этому цвету также можно придать оттенок.

Наложение цветов

Наложение цветов означает, что печатаются оба перекрывающихся объекта и соответствующие им краски могут смешиваться на листе бумаги. Такая возможность иногда очень удобна, но пользоваться ею следует с крайней осмотрительностью - при смешивании красок возможно возникновение третьего цвета и превышение нормы расхода краски на единицу площади листа бумаги (переувлажнение). Существует одно исключение - по умолчанию черный текст кеглем мельче 24 пунктов всегда печатается с наложением. Однако наиболее квалифицированную консультацию по конкретным вопросам вы сможете получить в типографии, в которой будет печататься тираж вашего издания. PageMaker предполагает два способа задания режима печати объектов с наложением, т. е. поверх других объектов. Если вы хотите задать режим наложения только для выбранных объектов, установите флажок Overprint (Наложение) в диалоговом окне Fill and Stroke (Фон и линия). Если же печататься с наложением должны все элементы данного цвета, флажок Overprint (Наложение) следует установить в диалоговом окне Color Options (Параметры цвета).

Примечание
Если необходимо, чтобы одни объекты данного цвета печатались с наложением, а другие - в режиме подавления, можно определить обе версии цвета на палитре цветов. При этом они должны печататься с помощью одной и той же печатной формы. Такого эффекта можно достигнуть, определив один из цветов как 100% другого и установив для них разные режимы наложения. Базовый цвет можно печатать с наложением, оттенок - без наложения, или же наоборот .

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

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

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

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

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

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

Материалы:

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

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

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

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

В прошлых уроках по изучению важных режимов наложения, которые необходимо знать для обработки фотографий, мы познакомились с режимами наложения, каждый из которых либо делал изображение темнее, либо делал его светлее, либо одновременно и затемнял, и осветлял изображение. Так, режим наложения «Умножение» (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), который является прямой противоположностью режиму наложения «Цветность»!