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

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

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

1. ГОТОВЫЕ ПАЛИТРЫ ВОКРУГ ВАС

Калли Хегстрем, дизайнер из агентства Make Media, рассказывает: «Сначала я делаю фотографии чего-то красивого. Это могут быть цветы, закат, что угодно. Таким образом я получаю готовую цветовую палитру и теперь мне лишь нужно вычленить из фото основные цвета, которые обязательно будут гармонировать между собой. Затем я могу открыть фотографию в фотошопе и с помощью пипетки сделать новую палитру. Еще проще сделать палитру с помощью такого инструмента, как Photocopa . Просто загрузите понравившееся изображение и получите готовую палитру».

2. ИСПОЛЬЗУЙТЕ ЦВЕТОВОЙ КРУГ

Художник Марк Шагал говорил: «Все цвета друзья своих соседей и любителей их противоположностей». Что он имел в виду? «Друзьями» Шагал называл оттенки, расположенные рядом на цветовом круге, например, голубой и синий. А вот «любители противоположностей» находятся напротив них на цветовом круге, то есть синий цвет будет сочетаться с различными оттенками оранжевого.

Канадский дизайнер Синди Кинаш из агентства Cultivated Mind говорит: «Когда используешь акварель, чтобы показать тень или глубину, можно использовать похожий цвет, только на несколько оттенков темнее». Данный способ подобрать хорошо сочетающиеся цвета один из самых лучший. Используя дружественные цвета и сочетая их с контрастными оттенками, можно добиться потрясающих результатов – нужно просто знать, как пользоваться цветовым кругом.

3. УЧИМСЯ У ДИЗАЙНЕРОВ ИНТЕРЬЕРА

Так как независимо от вида дизайна принципы работы с цветом остаются неизменными, то можно обратить внимание на то, как составляют цветовые палитры дизайнеры интерьера. Британский дизайнер Елена Дженова делится опытом: «Когда я занимаюсь дизайном интерьера, я использую правило, которое применимо и к графическому дизайну. В работе я использую доминирующий цвет, его доля составляет 60%, дружественные оттенки (30%) и 10% приходится на цветовой акцент. Если палитра кажется слишком бедной, то можно добавить несколько оттенков, которые будут «друзьями» доминирующего цвета, при этом не стоит дробить акцент, его нужно оставить таким, каким он был».

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

4. СОХРАНЯЙТЕ УДАЧНЫЕ ПРИМЕРЫ

Ники Лаатц, владелец типографии и магазина для дизайнеров, рассказала, как она находит эффектные цветовые палитры и как использует их в своей работе: «Всякий раз, когда я вижу картину или иллюстрацию с цветами, которые мне нравятся, я делаю фото или скриншот и сохраняю их. Затем, когда мне приходится подбирать цветовую палитру, я просто просматриваю все сохраненные изображения и всегда нахожу там что-нибудь вдохновляющее».

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

5. ИСПОЛЬЗУЙТЕ ВЕЕР PANTONE

Иногда такой проверенный способ подбора цветов, как цветовой круг, не помогает составить палитру. В этом случае, можно подобрать цвета как в старые добрые времена, используя веер Pantone. Порой бывает полезно отойти от монитора и сосредоточиться не на цифровом, а на физическом образце цвета. Келли Хегстрем так объясняет использование веера оттенков в своей работе: «Иногда очень хорошо иметь веер под рукой, особенно тогда, когда вы не уверены, что оттенок на мониторе будет правильно отображаться при печати. Также веер пригодится, если клиенту нужен какой-то особенный цвет – вы просто показываете ему веер и проблема решается сама собой».

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

6. ВОЗЬМИТЕ ЦВЕТА У ПРИРОДЫ

Наши глаза привыкли к цветам, которые чаще всего встречаются в природе. Естественные цветовые палитры всегда будут смотреться удачно – ведь они нам знакомы. Дизайнер Гэри из агентства CO-OP говорит: «Цветовые комбинации бесконечны. Пейзажи, фрукты, листья, цветы – все это естественные, доступные и бесплатные источники вдохновения». Гэри работает в Южной Африке и поэтому его палитры теплые и яркие, как и природа этой страны.

7. ИСПОЛЬЗУЙТЕ 3 ИЛИ 4 ЦВЕТА

Если дизайнер сознательно использует в работе широкую цветовую гамму, например, ему нужно изобразить радугу – это одно. Однако следует избегать использования слишком большого количества цветов. Родриго Герман, дизайнер из Чили, рекомендует использовать в дизайне три цвета. Если же требуются дополнительные оттенки, то они должны быть как можно менее контрастны к основному цвету.

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

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

8. ЦВЕТОВАЯ ПАЛИТРА ЗАВИСИТ ОТ ТЕМЫ

Приступая к подбору цветов, нужно всегда учитывать тему. Вы работаете над сайтом на спортивную или бизнес-тематику? Или ваш проект посвящен красоте и моде? Подумайте, какие цвета идеально отвечают заданной теме. Вы создаете флаер для косметического салона? Не стоит его делать в темных тонах. А если вы работаете над спортивным журналом – какие цвета вам понадобятся? Каждую тему можно описать словами – например, моду можно охарактеризовать такими прилагательными, как «изящная», «милая», «элегантная», а спорт – словами «динамичный», «агрессивный», «яркий».

Саломея, дизайнер из агентства Graphic Box, предлагает сначала сделать предварительный набросок цветовой палитры, а затем постепенно выбирать наиболее подходящие оттенки. «Например, мне нужен «романтический» фиолетовый, – говорит она. – Или я хочу использовать «милый» розовый». Саломея предлагает использовать эмоции для точного подбора цветов – данный способ помогает создавать палитры, максимально отвечающие теме. Также она считает, что дизайнерам стоит ознакомиться с теорией цвета и почитать различные материалы, в которых рассказывается о том, как люди воспринимают различные сочетания цветов.

9. ИСПОЛЬЗУЙТЕ PINTEREST ДЛЯ ПОИСКА ТЕМАТИЧЕСКИХ ПАЛИТР

На сайте Pinterest можно найти большое количество цветовых палитр, созданных дизайнерами со всего мира. Ян Барнард, создатель компании Vintage Design Co, рассказывает, как он использует Pinterest: «Если бы я работал над созданием плаката о пляжном отдыхе, то я бы ввел в поиск на сайте запрос «летние цветовые палитры» и выбрал бы подходящий вариант».

10. ИСПОЛЬЗУЙТЕ СПЕЦИАЛЬНЫЕ САЙТЫ

COLORlovers – это творческое сообщество, где люди, живущие в разных странах, создают и делятся с другими участниками цветовыми палитрами и шаблонами. Став участником сообщества вы получите доступ к более чем 3,7 млн. готовых цветовых палитр.

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

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

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

БЫСТРЫЙ ОБЗОР

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

Во второй части мы охватили терминологию:
* Оттенок это цвет (синий, зелёный, красный и тп.)
* Хроматичность (цветность) это чистота цвета (Высоко-хроматичные цвета не имеют в себе примесей черного, белого и серого)
* Насыщенность обозначает насколько силён или слаб цвет (насыщнный – сильный)
* Яркость обозначает насколько светлый или тёмный цвет (яркий – светлый)
* Тон образуется за счёт добавления серого, придавая унылости
* Тени образуються за счёт добавления черного, затемняя оттенок
* Осветление образуется за счёт добавления белого, делая оттенок светлее

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

ТРАДИЦИОННЫЕ ТИПЫ ЦВЕТОВЫХ СХЕМ

Обчно традиционные цветовые схемы используют новички. Ниже мы посмотрим их с примерами

Обычное базовое цветовое колесо очень мощный инструмент для создания цветовых схем.

МОНОХРОМАТИЧНЫЕ

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

Вот три примера монохромной цс. Здесь Первый цвет, скорее всего, будет использован для заголовка, Второй — для текста страницы или, может быть, фона. Третий — для фона или текста(если цвет№2 будет использован как фон), а последние два — для акцентов

АНАЛОГОВЫЕ

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

Хотя и Визуально привлекательная, но всё же недостаточно интересная для эффективного дизайна.

В этой цс хоть и используется цвета — соседи, но различная их насыщенность даёт интересные вариации.. У этой цс больше вариантов для использования.

И ещё один пример традиционной аналоговой цс

…И эта же схема, модифицированная для веб-дизайна

ДОБАВОЧНЫЕ

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

Широкий диапазон оттенков, теней и тонов даёт очень интересный дизайн

Другая цс с широким набором насыщенности

Не забываем, что бежевый и коричневый это оттенки коричневого

РАЗДЕЛЁННЫЕ ДОБАВОЧНЫЕ

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

Базовые цвета — жёлтый и залёный. Очень важно иметь досточную разницу в яркости и насыщенности цветов, чтобы создать такую цс

Другой пример широкого разброса насыщенности.

ТРИАДИЧЕСКИЕ

Триадические цс создаются путём отбора оттенков на одинаковом расстоянии друг от друга в 12-секторном цветовом круге. Это одна из наиболее интересных цс

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

http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/

И наоборот, использование очень яркого оттенка среди остальных «блеклых» делает его акцентом

ВДВОЙНЕ ДОБАВОЧНЫЙ (ТЕТРАДНЫЙ)

Пожалуй, самая сложная и напряжённая цс

Очень неинтересная схема, использовать её можно только если взять один цвет за основной, а другие как акценты

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

Вот как неплохо работают тёмные цс

СДЕЛАННЫЕ НА ЗАКАЗ

Наиболее сложные цветовые схемы. Вопреки сложившимся канонам, которые я описал выше, они не основываются на каких-то правилах.

Цвета имеют схожую насыщенность

И опять, похожие по насыщенности цвета дают ощущение единства и гармонии.

Использование цветов с высокой насыщенностью против цветов ненасыщенных — тоже эффективный метод. (Насыщенный цвет играет как акцент)

СОЗДАНИЕ ЦВЕТОВОЙ СХЕМЫ

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

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

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

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

Для нашего магазина одежды это традиционная цс, с добавлением белого для нейтральности

Для дизайна блога используем схему с использование тонов и теней в сером цвете

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

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

А здесь мы сменили фиолетовый оттенок на бурбундский (коричево-красный такой). И снова, если смотреть на цветовое колесо, то эти цвета следуют друг за другом. Это помогает нейтрализовать, и выглядит как «с отсутствием белого», если сравнивать с другими цс.

На первый взгялд эта цс выглядит как другая, серо — красная, цс. Но если присмотреться, можно заметить, что этот серый — фактически один из тонов голубого. Синий и красный образуют трети ТЕТРАДНОЙ цс, но работают отлично без желтого, особенно когда красный- чистый, а синий — тонированный то значения, близкого к серому..

ПОЧЕМУ ТЕНИ, ТОНА И ОСВЕТЛЕННОСТЬ ВАЖНЫ

Как вы видели на вышеприведённых цс, испльзование тонов, ответления и теней жизненно важно. Чистые оттенки имею похожие насыщенность и яркость. Это некрасиво и скучно.

Когда вы используете тона, тени и осветление, вы из цветового круга в 12 секторов получаете бесконечное количество оттенков для использования в вашем дизайне. Один из простейших способов создать хорошо-выглядящий дизайн — это взять цвет и его несколько тональностей, теней и осветлений и добавить в другой чтстый цвет, который находиться через три сектора на цветовом колесе (часть тетрадной, триатической и разделённо -добавочных цс). Это придаст интереса цс, пока она сохраяет ощущение сбалансированности.

ДОБАВЛЕНИЕ НЕЙТРАЛИЗАТОРОВ

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

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

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

ИСПОЛЬЗОВАНИЕ ФОТОГРАФИЙ ДЛЯ СОЗДАНИЯ ЦВЕТОВЫХ СХЕМ

Однин из моих любимых способов создания цветовых схем- это использование фотографии. Есть программы, которые делают это автоматичекски, например, . Хотя и Photoshop тоже поможет вам в этом.

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

Давайте научимся работать обоими методами (Kuler и Photoshop). Найдём картинку, которая будет примерно передавать цветовую схему нашего дизайна. Вот такую.

Екатерина Малярова

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

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

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

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

1. Adobe Kuler

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

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

Несомненным плюсом Adobe Kuler является наличие его плагина в графическом редакторе Adobe Photoshop. То есть вы можете работать с Adobe Kuler он-лайн, либо используя программу Adobe Photoshop на своём компьютере.

2. ColorScheme

ColorScheme.ru – ещё один интересный ресурс для подбора цветов и составления, цветовых тем. Основная работа также проводится в цветовом круге. Выбрав один цвет, вы можете получить шесть вариантов гармоничных сочетаний с этим цветом: моно, контраст, триада, тетрада, аналогия и аналогия с акцентом. Получившуюся цветовую тему можно отрегулировать по яркости, насыщенности, контрастности, свету, тени и другим параметрам.

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

3. BigHugeLabs

BigHugeLabs – ещё один ресурс, на котором существует сервис Color Palette Generator, позволяющий подобрать цветовую палитру по изображению. Вы можете загрузить изображение с компьютера или прямо из социальных сетей (Фейсбук, Инстаграм).

После загрузки нажимаете «Create palette» (создать палитру) и получаете цветовую палитру. При этом каждому цвету в палитре будет присвоено название и специальный код. Полученную палитру вы можете скачать в формате ASE и использовать в дальнейшем для работы в Adobe Photoshop.

4. Pictaculous

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

5. COLOURlovers

COLOURlovers – ещё один полезный ресурс для работы с цветом, используемый как профессиональными дизайнерами, так и новичками-любителями. В библиотеке COLOURlovers около 2 млн цветовых палитр, созданных пользователями со всего мира.

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

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

6. ColorCombos

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

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

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

7. ColorExplorer

ColorExplorer – многофункциональный ресурс с большими возможностями работы с цветом. Он был разработан специально для профессиональных дизайнеров. Набор инструментов данного ресурса позволяет не только подбирать цвета и составлять цветовые палитры, но и изучать популярные библиотеки цветов, объединять библиотеки, экспортировать палитры в такие программы, как Adobe Photoshop, Illustrator, InDesign и др.

Для того чтобы получить цветовую тему понравившегося изображения, следует загрузить его через вкладку Image Color Import. Вы увидите все цвета и оттенки (от 3 до 50), имеющиеся на данном изображении.

Очень интересно работать во вкладке Color Matching – это цветовой блендер, позволяющий изменять компоненты цвета с помощью значений RGBи HSL. Подобрав необходимую цветовую палитру, вы можете добавить её к уже существующей, либо сделать замену, ну, и как вариант, сохранить в своих палитрах My Palettes.

8. ColoRotate

ColoRotate – уникальный ресурс для работы с цветом. Он отличается от других тем, что имеет трёхмерную цветовую модель в виде конуса и возможностью генерировать более пяти цветов в одной схеме.

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

ColoRotate прекрасно работает самостоятельно или в паре с Adobe Photoshop. Также он доступен в качестве приложения для iPad.

9. ColRD

ColRD – яркий и красочный ресурс для работы с цветом. Здесь вы найдёте огромную библиотеку цветов и оттенков, палитр, градиентов, принтов, составленных другими пользователями. Это неиссякаемый источник вдохновения, который создаёт настоящий праздник для цветового восприятия.

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

10. Яндекс

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

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

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

Пример картинки для будущей палитры цветов

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

10 шагов к созданию собственного комплекта с необходимыми цветовыми тонами

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

Панель «Образцы»

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

Чтобы удалить набор, с каждым образцом придётся работать отдельно, в программе нет такой функции как «очистить все образцы». Поэтому для удаления одного цвета необходимо нажать кнопку Alt (Win) или Option (Mac) и при наведённом на него курсоре мыши удаляем его простым кликом. Всего образцов 122, столько же раз придётся кликнуть. В конечном итоге после проделанной операции панель должна остаться пустой.

Инструмент «Пипетка»

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

Первый цветовой образец, полученный с изображения

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

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

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

Добавление цвета на панель «Образцы»

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

Создаём набор с цветовыми оттенками

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

Выбираем нужный цвет и кликаем по пустой области на панели с образцами;

Сохраняем цвет в качестве образца, при надобности присваивая ему имя.

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

Готовая новая палитра

Сохранение образцов в отдельном наборе

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

Восстановление цветовых образцов, заданных по умолчанию

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

Загрузка набора цветовых оттенков

Возвращаемся к созданному комплекту образцов, чтобы посмотреть, как применять заданные цвета. Для этого необходимо снова обратиться к меню панели «Образцы». В его нижней части расположен список наборов с образцами, их также можно использовать, поскольку они изначально заложены в программе. Поскольку все создаваемые новые наборы сохраняются в том же месте, где и стандартные образцы, созданный ранее комплект с оттенками можно легко найти в данном списке. Все наборы в программе размещены в алфавитном порядке, что значительно упрощает поиск. После этого снова выскочит диалоговое окно с вопросом о замене существующих образцов на новые. В данном случае нажимаем кнопку с командой «Заменить». Выбранная цветовая палитра тут же загрузится на рабочую панель, цветовые образцы можно использовать.

Палитры и образцы цветов

Выбор основного цвета на панели «Образцы»

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

Задаём фон

Чтобы задать фон, необходимо определиться с цветом. Затем нажимаем и удерживаем клавишу Ctrl (Win) или Command (Mac) и кликаем на нужный цвет на панели. В результате вся рабочая область программы приобретёт фон. Далее все выбранные цвета из собственного набора можно использовать по своему усмотрению, всё зависит от фантазии. Воспользовавшись инструментами Photoshop, можно оформлять плакаты в определённой цветовой гамме.
Таким образом, данная статья позволяет создавать собственный набор с необходимыми цветовыми оттенками в программе Photoshop. Если следовать представленной пошаговой инструкции, данная операция не займёт слишком много времени.

Макет изделия с использованием ранее созданной пользовательской палитры цветов

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

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

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

Изображение разноцветной осенней листвы

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

Шаг 1: Удаляем с панели «Образцы» существующие цветовые оттенки

Для того чтобы создать собственный набор оттенков цвета, давайте сначала удалим все образцы цветовых оттенков, представленные на панели «Образцы» (Swatches). Не волнуйтесь, они будут удалены не навсегда, как мы рассмотрим позже. Переключитесь на панель «Образцы», которая по умолчанию сгруппирована вместе с панелями «Цвет» (Color) и «Стили» (Styles). Если только вы не загружали ранее другие наборы цветов, то на панели «Образцы» будут представлены цвета, изначально заданные в программе по умолчанию:

Панель «Образцы» отображает набор образцов цветовых оттенков, заданных по умолчанию

К сожалению, в программе Photoshop не предусмотрена команда «Удалить все образцы цветов», поэтому для того чтобы удалить все образцы цветовых оттенков, отображенных на панели «Образцы», нам потребуется удалить каждый образец цвета вручную. Для того чтобы это сделать, при нажатой клавише Alt (Win) / Option (Mac) наведите курсор мыши на образец цвета в левом верхнем углу («RGB красный»). Вы увидите, как курсор при этом примет форму ножниц:

При нажатой клавише Alt (Win) / Option (Mac) наведите курсор мыши на образец красного цвета в левом верхнем углу. Курсор мыши при этом примет форму ножниц

Затем, все еще удерживая нажатой клавишу "Alt/Option", кликните по образцу цвета, чтобы его удалить. Продолжите нажимать на другие образцы цветовых оттенков для их удаления. Вам потребуется кликнуть кнопкой мыши в общей сложности 122 раза, чтобы удалить все образцы, но в зависимости от того, как быстро вы будете нажимать на кнопку мыши, у вас это не должно занять много времени. Когда вы закончите удалять образцы оттенков, ваша панель «Образцы» будет совершенно пустая:

После удаления всех образцов цветовых оттенков, заданных по умолчанию, панель «Образцы» стала пустой

Шаг 2: Выбираем инструмент «Пипетка»

Откройте в программе Photoshop изображение, откуда вы хотите взять образцы цвета (если оно еще не открыто), затем на панели инструментов выберите инструмент «Пипетка» или нажмите клавишу I для быстрого выбора инструмента:

Выбираем инструмент « Пипетка »

Шаг 3: Получаем первый образец цвета с изображения

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

Берем образец ярко-желтого цвета с одного из листьев

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

Полученный цвет отображается на панели инструментов как основной цвет

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

Шаг 4: Добавляем цвет на панель «Образцы»

Как только вы получили образец первого цвета, переместите курсор мыши на пустую область внутри панели «Образцы». Вы увидите, как курсор примет форму ведерка с краской. Кликните в любом месте пустой области для преобразования полученного цвета в образец цвета. В результате этого действия откроется диалоговое окно, где будет предложено ввести имя для вашего образца цвета. Если вы создаете набор образцов цветовых оттенков для клиента, использующего определенные цвета Пантон и, как следствие, требующего их, то будет неплохой идей назвать ваш образец цвета цветом, соответствующим таблице цветов Пантон (например, Пантон Желтый 012 C (Pantone Yellow 012 C). Если же вы создаете набор образцов цвета для собственного использования, то дайте образцу название на ваше усмотрение. Я назову свой образец цвета «Желтый» (Yellow):

Дайте вашему новому образцу цвета понятное имя или можете вообще его никак не называть

На самом деле, давать названия образцам цвета не обязательно, поэтому если имена образцов для вас не имеют значения, то оставляйте те имена, которые предлагает программа по умолчанию. Нажмите ОК для закрытия диалогового окна, когда вы дадите название образцу цвета. Если я посмотрю сейчас на панель «Образцы», то смогу увидеть, что мой первый образец цвета добавился туда:

Мой созданный образец цвета «Желтый» появился на панели «Образцы»

Шаг 5: Продолжаем собирать цвета и создавать из них образцы цветовых оттенков

Продолжайте собирать цвета с вашего изображения и затем кликать по пустой области панели «Образцы», чтобы сохранять их как образцы цветовых оттенков, при необходимости присваивая им имена. Я собрал еще 10 цветов с изображения и в итоге на панели «Образцы» у меня получилось 11 новых образцов. Вы можете создать столько образцов цвета, сколько захотите:

Шаг 6: Сохраняем образцы цвета как отдельный набор

Когда вы закончите добавлять цвета на панель «Образцы» и будете готовы сохранить их как отдельный набор образцов, нажмите на маленькую правостороннюю стрелку в правом верхнем углу панели «Образцы» для вызова меню панели:

Нажав на маленькую правостороннюю стрелку, вызовите меню панели «Образцы»

Затем из появившегося меню выберите пункт «Сохранить образцы» (Save Swatches):

Вводим имя для нового набора образцов

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

Шаг 7: Восстанавливаем цветовые образцы, заданные по умолчанию

Мы получили несколько цветов с изображения, создали из них образцы цветовых оттенков и сохранили эти образцы как отдельный новый набор образцов. Но что если мы вновь захотим воспользоваться цветовыми образцами, заданными по умолчанию, которые мы удалили в начале урока? Все, что нам потребуется, - это снова нажать на маленькую правостороннюю стрелку в правом верхнем углу панели «Образцы» для повторного вызова меню панели и выбрать из появившегося списка команду «Восстановить образцы» (Reset Swatches):

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

В соответствующем диалоговом окне программа спросит Вас о необходимости заменить текущие цветовые образцы заданными по умолчанию. Вы сможете либо подтвердить необходимость замены текущих цветовых образцов заданными по умолчанию, нажав кнопку ОК, либо добавить заданные по умолчанию образцы к текущим образцам без удаления последних, нажав кнопку «Добавить» (Append). Я нажму кнопку ОК и заменю мой набор образцов «Осенние листья» заданными по умолчанию цветовыми образцами:

Нажимаем ОК для восстановления цветовых образцов, заданных по умолчанию

После этого действия на панели «Образцы» опять появились образцы цвета, заданные по умолчанию:

Образцы цвета, заданные по умолчанию, вернулись на панель «Образцы»

Шаг 8: Загружаем собственный набор образцов цвета

В следующий раз, когда вы захотите воспользоваться созданным набором образцов цвета, все, что вам потребуется - это нажать на правостороннюю стрелку еще раз для вывода на экран меню панели «Образцы». Если вы посмотрите на нижнюю часть меню, то увидите перечень дополнительных наборов образцов цвета, которые в данный момент можно загрузить. Большинство этих наборов изначально идет вместе с программой Photoshop, но поскольку наш набор образцов сохранен в том же месте, что и другие наборы, то вы также сможете увидеть в перечне наборов и его. Вам нужно просто нажать на название вашего набора для его выбора. Программа размещает наборы образцов цвета в алфавитном порядке, поэтому мой набор «Осенние листья» (Autumn Leaves) идет вторым сверху:

Вы найдете все наборы образцов цвета, в том числе и ваши, в меню панели «Образцы». Нажмите на название набора для его выбора

И снова программа спросит вас о желании заменить существующие наборы новыми или добавить новые образцы цвета к уже расположенным на панели образцам. Я нажму ОК, чтобы заменить заданные по умолчанию образцы созданными образцами из набора «Осенние листья»:

Нажмите кнопку «Заменить», чтобы заменить заданные по умолчанию образцы на панели новыми образцами цвета

В результате этого действия на панель «Образцы» загрузятся мои новые образцы цветовых оттенков из набора «Осенние листья», готовые к дальнейшему использованию:

Мой собственный набор образцов цвета загружен на панель «Образцы»

Шаг 9: Выбираем новый основной цвет на панели «Образцы»

Большое преимущество использования образцов цвета заключается в том, что они являются заранее заданными цветами. Это означает, что это цвета, которые мы уже выбрали (или цвета, которые выбрала за нас программа, если вы работаете с заданными по умолчанию образцами), и нам не нужно каждый раз выбирать эти цвета из палитры цветов, когда они нам потребуются. Для того чтобы выбрать любой из цветов на панели «Образцы», просто наведите курсор мыши на нужный образец цвета. Вы увидите, как курсор примет форму пипетки. После этого кликните по цвету для его выбора. В моем случае, я выберу оранжевый цвет, второй слева:

Для того чтобы выбрать нужный цвет, нажмите на его образец на панели «Образцы»

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

Цвет, на который вы нажали на панели «Образцы», отобразился на иконке образца основного цвета на панели инструментов

Шаг 10: Выбираем новый фоновый цвет на панели «Образцы»

Для того чтобы выбрать определенный цвет в качестве фонового цвета, нажмите и удержите клавишу Ctrl (Win) / Command (Mac) и при этом кликните по нужному цвету на панели «Образцы». В моем случае, при нажатой клавише Ctrl / Command я кликну по темно-красному цвету:

При нажатой клавише Ctrl (Win) / Command (Mac) кликните по нужному цвету на панели «Образцы», чтобы сделать его фоновым цветом

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

Цвет, который вы выбрали на панели «Образцы», отобразился на иконке образца фонового цвета на панели инструментов

Теперь я могу использовать цвета из моего набора «Осенние листья», как пожелаю и когда пожелаю! Ниже представлены строки стихотворения, которые я оформил при помощи цветов из моего созданного набора образцов цвета и кисти «Разбросанные кленовые листья» (Scattered Maple Leaves), установленной по умолчанию в программе Photoshop:

Стихотворение, оформленное при помощи цветов из моего созданного набора образцов цвета «Осенние листья»

И вот мы закончили! Мы научились с легкостью создавать собственные образцы цвета и целые наборы образцов в программе Photoshop!

Перевод: Ксения Руденко