FORGOT YOUR DETAILS?

Цветовая теория для дизайнеров, часть 3: создание собственных цветовых палитр

by / Friday, 23 May 2014 / Published in Web-решения

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

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

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

Краткий обзор

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

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

Традиционные типы цветовых схем

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

 

 

Монохромная

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

Примеры

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

 

 

Аналоговые

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

Примеры

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

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

Еще один пример традиционной цветовой аналоговой схемы.

А нижняя тема отредактирована под веб дизайн.

Комплементарная

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

Примеры

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

Еще одна комплементарная схема с широким спектром цветностей.

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

Разделенная комплементарная

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

Примеры

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

Еще одна схема с высоким разбросом цветовой палитры.

Триады

Триады создаются из оттенков, расположенных на одинаковом расстоянии в 12-спицевом цветовом кольце. Это наиболее разнообразные цветовые схемы.

Примеры

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

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

Двойные – комплементраные (тетрады)

Тетрады является наиболее трудными для правильного исполнения цветовыми схемами.

Примеры

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

Цветовые тетрады могут хорошо срабатывать для создания цветовых схем с одинаковой цветностью и яркостью. Просто добавьте нейтрального (как темно-серый или черный) цвета для текста и акцентов.

Это так же хорошо работает для темных цветовых схем.

Произвольные

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

Примеры

Цвета имеют одинаковую цветность и насыщенность.

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

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

Создание цветовой схемы

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

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

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

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

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

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

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

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

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

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

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

Почему тени, тона и нюансы являются важными?

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

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

Добавление немного нейтральных

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

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

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

Использование фотографий для цветовых схем

Одним из моих персональных любимых путей для создания цветовой схемы является использование фотографии. Есть автоматические онлайн инструменты (http://kuler.adobe.com/ Adobe Kuler — один из них, мой самый любимый), или вы можете делать это в Photoshop самостоятельно.

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

Давайте попробуем этот метод, оба способа (с использованием Kuler и Photoshop). Найдите фото, которое вам нравится, на Flickr, то, которое, как вам кажется, вызывает необходимые чувства.

Я выбрала это:

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

Одним из замечательных качеств Kuler является то, что для создания цветовых схем из изображений есть опция “Select a Mood” («выберите настроение»). Сюда включаются красочность, количество света, приглушенность, глубина и темнота. Вот схемы, которые мы получаем, применяя каждое из этих настроений к одному и тому же фото.

Красочное

Светлое

Приглушенное

Глубокое

Темное

Теперь давайте создадим, используя то же изображение, цветовую схему в Photoshop. Это немного менее научно, чем то, как это делает Kuler. Я просто потыкала в фото инструментом под названием «пипетка» в разные части изображения, пока не нашла те цвета, которые сочетаются друг с другом. Вот результат (это заняло чуть меньше пяти минут, так что это не столь объемная по временному параметру работа, как может показаться):

Создание цветовых схем в Photoshop проще с изображениями, которые почти монохромны. С более цветными изображениями приходится быть изощреннее.

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

И вот пять цветовых схем, которые Kuler предлагает для этого изображения:

Цветная

Яркая

Приглушенная

Глубокая

Темная

И вот к чему я пришла с Photoshop, используя то же изображение:

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

Самые простые цветовые схемы

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

Вот несколько примеров, что дать вам понять, о чем я говорю:

 

 

 

 

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

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

Сколько цветов?

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

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

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

Десять сайтов с великолепными цветовыми схемами

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

Wentings Cycle & Mountain Shop

Схема:

Trivuong.com

Схема:

Oscar Barber

Схема:

North East Peace III Partnership

Схема

mbA Architects

Схема

Studio 13

Схема

Joy Project

Схема

Morphix Blog

Схема

El Designo

Схема

LemonStand

Схема

Заключение

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

Лучший способ научиться создавать красивые цветовые схемы — практика. Создавайте схемы каждый день. Вы можете использовать автоматизированные инструменты для этого сперва (как Kuler для создания палитр из изображений), или применять Photoshop. Если в повседневной жизни вам встречается потенциально красивый или примечательный цвет, попробуйте создать с ним цветовую схему. И получайте опыт от других сайтов, с которых можно загрузить цветовые схемы и систематизировать их для дальнейшего изучения. Это сделает все цветовые схемы более легко применимыми в будущем.

Ольга Тернова, корреспондент портала Как сделать презентацию


TOP