Как подобрать цвет. Модель HSB (Цветовой круг) Скачать расширения для фотошопа цветовой круг

Сразу вспомнилась картинка:

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

Возьмем зеленый и красный цвета на примере Валиры из близзовского Харстоуна и клубники (сама природа подобрала сочетание):

Круто, да? Значит, зеленый отлично сочетается с красным. А теперь посмотри какой ад получится, если сделать зеленую кнопку на красном фоне или красную кнопку на зеленом фоне:

Хочется поскорее закрыть: слишком агрессивно в обоих случаях, давит на мозг. Получается, что сочетается зеленый с красным не так уж и хорошо? А вот, если фон будет, например, белым, то зеленая кнопка отлично будет смотреться рядом с красной:

Поэтому ответ на вопрос «какой цвет подходит к зеленому» есть только у того, кто видит всю картину.

Цветовой круг

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

Есть немало онлайн-сервисов на эту тему. Удобный — colorscheme.ru .

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

Color Guide

В иллюстраторе есть клевый функционал, который работает по принципу цветового круга и показывает сочетание цветов. Называется панелька Color Guide.

Берешь пипеткой цвет — а иллюстратор тебе показывает все комбинации: соседние, контрастные, триады и так далее.

Adobe Color Themes

В самом фотошопе есть такой же функционал. Раньше это были просто темы (набор цветов), а потом к ним добавили и сам цветовой круг, и теперь панелька называется Adobe Color Themes

По радуге

Сам же я цвета подбираю по «радуге»: перетягиваю ползунок и забираю цвет.

В примере я подобрал красный, фиолетовый и оранжевый. Шкала («радуга») лишь помогает подобрать цвет c разным оттенком (H = Hue) и иногда результат не устраивает. Вот мне не понравился грязный и унылый оранжевый и я сделал из него чистый и клевый. Если нужно подобрать по насыщенности (S = Saturation) или по яркости (B = Brightness), то просто меняем шкалу.

3 лучших плагина color wheel для PS

Плагины выбора и смешивания цветов для Photoshop, Illustrator (colorus) и других программ от Adobe.

PaintersWheel

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

Совместим с Photoshop CS6, CC и более

MagicPicker

Плагин MagicPicker по сравнению с PrinterWheel имеет больший функционал. В отличии от бесплатного плагина, MagicPicker совместим с Illustratoror и Photoshop с версии CS3 до CC, что является отличным преимуществом перед бесплатным плагином PrintersWheel.

Стоимость плагина : 19$

P.S. К сожалению, на торрентах пока-что нет ломаной версии

Установка плагинов:

Установка плагинов очень простая! Надо всего-лишь скопировать содержимое в папку «../Program Files/Adobe/PhotoshopCS*/Plug-ins/Panels/». Потом зайти в фотошоп и включить панель через меню «Window->Extensions»

Удачного рисования!

В Photoshop CC 2014 мы можем изменить размер этой панели так, как нам удобнее. Чтобы сделать панель шире, наведите курсор мыши на её левый край, при этом курсор примет форму обоюдоострой чёрной стрелки. Нажмите левую клавишу мыши и перетащите курсор для изменения размера. Обратите внимание, что при этом изменяется весь столбец, а не только сама панель, поэтому все остальные панели в столбце станут шире:

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

Если Вы хотите изменить размер панели "Цвет" не меняя размер других панелей в столбце, просто вытащите её из столбца:

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

Примечание. На компьютерах с операционной системой Windows панель "Цвет" по умолчанию отображена в режиме "Куб цветового тона" (Hue Cube). На компьютерах с операционной системой Mac OS панель отображена в режиме "Модель RGB" (RGB Sliders) .

Как я писал выше, панель "Цвет" (Color) имеет два основных режима выбора цвета - это "Куб цветового тона" (Hue Cube) и "Куб яркости" (Brightness Cube), кроме этого имеются и другие Именно наличие множества режимов делают обновлённую панель такой значимой и полезной, а пользоваться панелью "Цвет" стало гораздо удобнее, чем традиционной Цветовой палитрой (Color Picker).

Переключаются режимы кликом по значку в верхнем правом углу и выбору из списка:

Работают эти режимы точно так же, как и в Цветовой палитре (Color Picker).

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

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

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

Итак, какие же бывают «цветовые круги»?

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

При работе с инструментами Photoshop опираться на этот круг нельзя. С точки зрения физики и физиологии — он пострен криво и неправильно. Но давайте по порядку.

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

Для каждой группы колбочек подбирается такой стимул, который будет минимально возбуждать соседние группы. Вот откуда в адитивной системе появляются Red, Green и Blue. Самая большая проблема возникает с зеленым стимулом. Из-за сильного взаимного перекрытия кривых в районе 500 нм он всегда возбуждает не только средне, но и длинно и коротко волновые колбочки. Именно в этом кроется принципиальная немозможность создания трехстимульных мониторов с очень большим цветовым охватом (привет от оранжевой обложки с первой иллюстрации).

В реальной жизна стимулы гораздо более сложные и описываются спектральным распределением энергии. Если это распределение равномерно, то стимул выглядит ахроматическим, а проще говоря — серым. При достаточно большой яркости мы примычно называем его белым. При этом белый луч можно разложить в спектр, который так же по привычке часто называют радугой. Что и было сделано при помощи призмы. В 17 веке Исааком Ньютоном, а в 20 — художником, оформлявшим обложку альбома The Dark Side of the Moon группы Pink Floyd.

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

Поэтому лучше расположить цвета так, как это сделано на левом круге. Правильным является именно такое расположение: красный вверху, по часовой стрелке за ним идет желтый и т.д. Именно по такому кругу откладывается значение цветового тона (Hue) в цветовых моделях HSB и HSL. Я специально отзеркалил и развернул круг Иттена, чтобы совместить красные цвета и обеспечить соответствующий переход оттенков. Это наглядно показывает насколько он неравномерный.

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

Уменьшив яркость в зеленом канале, подучим маджентовую окраску.

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

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

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

Очень подробно об этом рассказывает Саша Чалдрян на первом занятии курса «Adobe Photoshop. Творческая ретушь» . Я же ограничусь только тремя небольшимы иллюстрациями из конспекта к этому занятию.

Родственные сочетания — монохроматические сочетания двух-трех соседних секторов круга.

Родственно-контрастные сочетания — сочетания цветов, в каждом из которых присутствует “родственный”. Желто-зеленый, желтый, желто-оранжевый, желто-красный — для них всех есть объединяющий желтый, но схема довольно контрастная. В данном случае картинка не совсем соответствует приведенной схеме, но Вы и сами легко догадаетесь, как нужно поправить схему для более точного соответствия.

Триадные схемы — цвета, расположенные на вершинах равностороннего треугольника, вписанного в круг.

Многие художники пользуются цветовой моделью HSB . Эта математическая модель очень удобна для подбора оттенков и цветов. Модель HSB основана на модели RGB , но имеет другую систему координат. Любой цвет в модели HSB определяется своим цветовым тоном (оттенком), насыщенностью (то есть процентом добавленной к цвету белой краски) и яркостью (процентом добавленной черной краски). Из перечисленных трех составляющих менее всего понятна насыщенность . Можно определить насыщенность как "живость" цвета. Чем более цвет насыщен, тем дальше он от серого. Белый, черный цвета, все оттенки серого имеют минимальную насыщенность.

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

Трехканальная модель HSB получила название по первым буквам английских слов Hue (Оттенок), Saturation (Насыщенность) и Brightness (Яркость) . Модель HSB универсально применяется для цветокорреции - в этом она незаменима. Во всех графических приложениях эта модель присутствует в том или ином виде. Достоинство этой модели состоит в том, что она создавалась не для мониторов или принтеров, а для людей. Ведь человек интуитивно воспринимает цвет, разделяя его на оттенок, насыщенность и яркость.

Модель HSB удобно представлять в виде цветового круга . Значение цвета выбирается как точка на круге (или вектор , выходящий из центра окружности и указывающий на данную точку). Различные оттенки располагаются по окружности, состоящей из 360 градусов. Красный цвет соответствует 0, желтый - 60, зеленый - 120, бирюзовый - 180, синий - 240 и пурпурный - 300 градусам. Точки на самой окружности соответствуют чистым (максимально насыщенным) цветам. Точка в центре соответствует нейтральному цвету минимальной насыщенности (белый, серый, черный - это зависит от яркости). То есть можно сказать, что угол наклона вектора определяет оттенок, длина вектора - насыщенность цвета . Яркость цвета задают на отдельной оси, нижняя точка которой имеет минимальную яркость, а верхняя - максимальную.