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

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

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

Вот как можно построить тон с помощью двух уровней:

Пример того, как можно маркером на бледную область цвета налаживать темные линии

Достижение красивых цветовых эффектов
Художник начинает рисунок с контуров, при этом используя тоненькие маркеры разных цветов

Теперь накладываем первый слой, при этом необходимо выстраивать цвета от самого светлого к наиболее тёмному, так, как при работе с акварелью.

Цвета и тона усиливаются постепенно при нанесении новых слоев. Белая бумага и белесые слои остаются при этом как блики на картине.

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

Плотность и богатство цвета – это основное в цветных чернилах, и достичь такого эффекта было бы довольно трудно другими средствами.

Примеры других рисунков
Снасти для рыбалки:

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

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

С помощью наложение цветов или 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, чтобы на выходе получить именно то, что вы хотите.