цвет кожи человека код html

21.07.202210.08.2022 admin 0 Comments

Балансировка цвета кожи

Яблоки красные, небо голубое, трава зеленая, а какого цвета кожа?

Кожа дает нам, возможно, один из самых сложных спектров красок в мире фотографии, начиная от самых светлых тонов и заканчивая самыми темными. В этом многообразии мы можем найти самые разные цвета: красный, желтый, оранжевый, розовый, коричневый и даже черный. Очень светлая кожа даже содержит в себе немного цианового цвета.

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

Более того, кожа у каждого человека имеет свой цвет, это зависит не только от расовой принадлежности, но и от индивидуальных особенностей. Чтобы понять насколько различается цвет кожи от человека к человеку, ознакомьтесь с проектом Angélica Dass под названием Humanæ. Её проект не является техническим руководством, он подчеркивает сложность, с которой фотографы сталкиваются при работе с цветом и оттенками кожи, которые так различаются у всех людей.

Этот урок, состоящий из двух этапов работы в Adobe Photoshop, будет вам полезен. Сначала мы расскажем, как последовательно и точно сбалансировать цвет кожи на фотографиях. Затем вы узнаете, как создавать и использовать данные фотографий с уже сбалансированной кожей.

Теория цвета и оттенки кожи

Обзор некоторых основ теории цвета поможет во время технического процесса обработки цвета кожи.

Две цветовые системы

Возможно вы помните, что в фотографии мы используем две цветовые системы. Первая, система RGB, используется нами при работе с камерами и компьютерами. В данной системе все цвета создаются путем слияния в разных пропорциях красного, зеленого и синего цветов. Вторая система, CMYK, используется в печати. Цвета в данной системе образуется различными комбинациями следующих цветов: циан, маджента и желтый. Поскольку при слиянии эти цвета дают тёмно-коричневый, а не черный, в систему был добавлен чистый черный цвет (буква K в CMYK) в качестве четвертого.

Оценка цвета кожи обычно дается при помощи системы CMYK, даже если мы работаем с цифровым изображением на компьютере. Некоторые полагают, что регулировать тон кожи в CMYK проще, чем в RGB, но причина использования именно CMYK скорее историческая. Информация о цвете, которую мы теперь используем при работе с кожей, изначально была собрана и разработана операторами типографии, которые работали в системе CMYK. Данные оттачивались на протяжении многих лет, но по-прежнему в CMYK. На сегодняшний день имеется невероятное количество информации о цвете кожи, которая представляется именно в этой цветовой системе, поэтому проще просто работать в ней, а не переводить информацию в RGB.

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

Чтобы понаблюдать, как взаимодействуют две системы, откройте в Photoshop диалоговое окно Colour Balance (Image > Adjustments > Colour Balance) или создайте корректирующий слой Colour Balance (Layer > New Adjustment Layer > Colour Balance). Поиграйте со слайдерами и посмотрите, как две системы работают вместе.

Цветовые системы в Photoshop

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

Цвет кожи в значениях CMYK

Вы можете найти множество предложенных формул для точного воспроизведения оттенков кожи. У всех графических редакторов имеются свои фавориты. Такие формулы, как правило, выражаются в виде соответствующих пропорций цианового, мадженты, желтого и черного цветов. Например:

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

Балансировка тона кожи

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

1. Подготовьте изображение

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

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

2. Выберите образец

Для начала откройте панель информации Info (Window > Info или F8) и выберите инструмент Eyedropper Tool (Пипетка). В панели настроек инструмента выберите размер для образца (Sample Size) равный 11 на 11 пикселей (“11 by 11 Average”). Если ваше изображение низкого разрешения, то есть смысл выбрать меньший размер образца.

Выберите участок кожи средней освещенности. Избегайте ярких бликов, так как цветовая насыщенность будет слишком низкой, и этот участок не сможет послужить хорошим образцом. Не лучшим местом для образца являются щеки: у девушек щеки, как правило, накрашены, а у многих мужчин они имеют красноватый оттенок. Хорошими точками для взятия образца у женщин являются подбородок, лоб и шея. Если вы работаете с мужским лицом, то берите образцы со лба и зоны чуть ниже глаз в том месте, где берут начало скулы. Как только вы выбрали нужную область для взятия образца, кликните по этой точке инструментом Eyedropper Tool, удерживая клавишу Shift.

В панели Info кликните по иконке с пипеткой, расположенной рядом с информацией о выбранном вами образце кожи, и выберите в ниспадающем меню CMYK. Таким образом, вы получите цветовые значения системы CMYK, но в то же время все изображение останется в системе RGB.

3. Оцените цветовую информацию

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

Согласно данным моей таблицы CMYK, средняя кожа кавказца должна содержать на 25% больше желтого, чем мадженты. На моей фотографии значения у мадженты и желтого равны, поэтому мне следует добавить немного желтого.

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

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

4. Используйте Кривые

Чтобы начать работу с цветами создайте новый корректирующий слой с кривыми (Layer > New Adjustment Layer > Curves). В панели корректирующего слоя выберите инструмент для коррекции на изображении (рука с указывающим пальцем).

Вам предстоит работать с отдельными каналами: Красным, Зеленым и Синим. Поэтому следует помнить:

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

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

5. Отрегулируйте насыщенность

Изменение цветового баланса скажется на цветовой насыщенности изображения. Поэтому после завершения работы с корректирующим слоем Кривые, отрегулируйте насыщенность фотографии. Для этого добавьте новый корректирующий слой Hue/Saturation (Layer > New Adjustment Layer > Hue/Saturation). Уменьшите насыщенность, если в том есть необходимость.

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

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

Справочный список: Измерения цветов кожи

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

Удалите все точки, выставленные на первом этапе. Для этого в ниспадающем меню в панели Info выберите De-select “Colour Samplers.” Объедините изображение, над которым вы работали (Layer > Flatten Image).

1. Подготовьте образцы

Выберите инструмент Elliptical Marquee Tool (M) и выделите маленькую область светлой кожи (примерно 250 – 400 пикселей в диаметре). Скопируйте выделение на новый слой (Command/Control-J). Выделите область такого же размера с кожей средней освещенности, переходящей в теневую зону, и также скопируйте на отдельный слой.

Отключите видимость фонового слоя Background. Теперь у вас есть два новых слоя, каждый из которых содержит образец кожи. Выделите два слоя и объедините в один (Command/Control-E).

Затем к получившемуся слою примените фильтр Gaussian Blur (Filter > Blur > Gaussian Blur). Подберите значение размытия, при котором исчезнут все признаки зернистости и текстуры кожи.

2.Создайте градиент

В панели инструментов выберите Gradient Tool (G), в панели с параметрами инструмента отметьте Foreground to Background (от Основного цвета к Фоновому), Dither (Растушевка) и уберите галочку с Transparency (Прозрачность).

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

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

3.Сохраните файл

Удалите фоновый слой (сначала дважды кликните по слою, чтобы разблокировать его и затем удалите). Измените размер изображения (Image > Image Size). Размера 1000 на 1500 пикселей будет более, чем достаточно. Для параметра Resample (Ресамплинг) в диалоговом окне Image Size (Размер изображения) выберите Bicubic (Бикубическое) в ниспадающем меню.

Использование справочного списка цветов кожи

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

Откройте файл из списка с образцом кожи, цвет которой максимально приближен цвету кожи на вашей фотографии. Используйте панель Info и инструмент Пипетка, как вы делали в первой части урока, чтобы поставить точки на образце кожи.

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

Заключение

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

Источник

HTML Цвета

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

В настоящее время цвета могут быть указаны с помощью следующих методов:

Шестнадцатеричные цвета

Шестнадцатеричные значения цвета поддерживается всеми основными браузерами. Шестнадцатеричные значение цвета имеет следующий синтаксис:

Все значения должны быть между 00 и FF. Например, значение #0000FF отображается как синий, потому что компонент BB установлен в его самое высокое значение (FF), а другие установлены в самое низкое значение (00). Значение, фактически содержит три шестнадцатеричных числа, значение цвета получается при смешивании трех вышеуказанных составляющих.

Допускается сокращать шестнадцатеричные числа до трех символов, если каждое из трех двухзначных чисел содержит одинаковые символы. Например, #0000FF можно записывать как #00F.

Пример использования шестнадцатеричных значений:

RGB цвета

Например, значение rgb(0,255,0) отображается как зеленый, так как параметр зеленого установлен в максимальное точке (255), а красный и зелёный установлены в 0. Записывается это следующим образом:

RGBA цвета

RGBA является более современным методом задания цвета, где:

Этот метод отличается от RGB тем, что он добавляет альфа-канал, который позволяет задать уровень прозрачности со значениями от 0 до 1, где:

HSL цвета

К еще одному методу задания цвета относится HSL. HSL это аббревиатура, которая объединяет в себе первые буквы трех признаков:

При этом используется следующий синтаксис:

Ниже приведено изображение, где для каждого блока задано свое значение hsl:

Рис. 16б Пример использования значений hsl

HSLA цвета

По аналогии с RGB, HSL поддерживает прозрачность с помощью добавления альфа-канала, который задает уровень прозрачности со значениями от 0 до 1 (от невидимого до полностью непрозрачного).

Данный формат задания цвета называется HSLA, давайте рассмотрим его применение:

Имена цветов

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

Цвет	HEX	RGB
#FF0000	rgb(255,0,0)	Red
#00FF00	rgb(0,255,0)	Green
#0000FF	rgb(0,0,255)	Blue

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Практическое задание № 11.

Нюанс: для выполнения задания вы можете задавать цвет любым методом, но задание считается выполненным если хотя бы один раз было использовано шестнадцатеричное значение, значение RGB, значение HSL и предопределённый цвет.

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

Источник