Теория цвета для дизайнеров: как создать собственную цветовую схему

1. Об авторе Кэмерон Чепмен - профессиональный веб-дизайнер и графический дизайнер с более чем 6-летним...
2. Традиционные типы цветовых схем
3. монохроматический
4. аналогичный
5. дополнительный
6. Сплит Дополнительный
7. Триады
8. Двойной дополнительный (тетрадный)
9. изготовленный на заказ
10. Создание цветовой схемы
11. Почему оттенки, тона и оттенки важны
12. Добавление в некоторые нейтральные
13. Использование фотографий для цветовых схем
14. Самые простые цветовые схемы
15. Сколько цветов?
16. 10 сайтов с отличными цветовыми схемами
17. Большая палатка
18. Секретный ключ
19. TCM Лето под звездами
20. Лоренцо Верзини
21. Почти невозможно
22. Mailchimp
23. Борьба за UX
24. Заключение
25. Дополнительные ресурсы

Об авторе

Кэмерон Чепмен - профессиональный веб-дизайнер и графический дизайнер с более чем 6-летним опытом работы. Она пишет для ряда блогов и является автором The Smashing… Подробнее о Кэмерон ...

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

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

Дальнейшее чтение на SmashingMag:

Быстрый обзор

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

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

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

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

Базовое цветовое колесо с двенадцатью спицами является важным инструментом при создании цветовых схем.

монохроматический

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

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

Примеры:

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

аналогичный

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

Примеры:

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

дополнительный

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

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

Примеры:

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

Сплит Дополнительный

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

Примеры:

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

Триады

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

Примеры:

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

Двойной дополнительный (тетрадный)

Тетрадные цветовые схемы, вероятно, являются наиболее сложными схемами для эффективного осуществления.

Примеры:

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

изготовленный на заказ

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

Примеры:

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

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

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

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

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

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

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

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

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

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

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

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

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

Почему оттенки, тона и оттенки важны

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

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

Добавление в некоторые нейтральные

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

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

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

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

Один из моих любимых способов создания цветовой схемы - использовать фотографию. В Интернете есть автоматизированные инструменты, которые могут сделать это автоматически для вас (мобильное приложение Adobe Capture CC является одним из них и моим любимым), или вы можете сделать это в Photoshop самостоятельно.

Используя Adobe Capture, вы можете загрузить изображение или использовать камеру. Это отлично подходит для тех времен, когда вас может вдохновить физический объект. Вы также можете получить изображение из своей учетной записи Creative Cloud, маркета или Adobe Stock. Если вы озадачены тем, какие цвета вы хотите использовать в дизайне веб-сайта, попробуйте поискать похожие слова в Adobe Stock. Иногда это может привести к нахождению цветовых схем, о которых вы, возможно, не подумали сами.

Отличительной особенностью Adobe Capture является то, что вы можете легко импортировать свои цветовые палитры в Illustrator или Photoshop (или просто просматривать шестнадцатеричные коды, чтобы найти правильные цвета для любой другой программы, которую вы используете). Найдите понравившуюся фотографию на Adobe Stock (или сделайте ее самостоятельно), которая, по вашему мнению, вызывает ощущение дизайна, который вы хотите создать. Я взял это:

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

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

красочный яркий приглушенный глубоко Темно

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

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

красочный яркий приглушенный глубоко Темно

Есть несколько отличных приложений для генерации палитры, если Capture вам не подходит, включая Генератор цветовой палитры Canva , Coolors (который также имеет надстройку Adobe и приложение для iOS), и Paletton ,

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

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

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

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

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

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

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

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

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

10 сайтов с отличными цветовыми схемами

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

Большая палатка

Схема:

Секретный ключ

Схема:

TCM Лето под звездами

Схема:

Схема:

Лоренцо Верзини

Схема:

Схема:

Почти невозможно

Алхимия Цифровая

Схема:

Mailchimp

Схема:

Борьба за UX

Схема:

Заключение

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

Лучший способ научиться создавать красивые цветовые схемы - тренироваться. Создать схему на ежедневной основе. Сначала вы можете использовать автоматизированные инструменты (например, инструмент Capture для создания схем из изображений) или просто открыть Photoshop или Sketch и начать.

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

Дополнительные ресурсы

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

Вся серия

Похожие

Комментарии