Actual Web

 
 
Подписаться на RSS канал Добавить в друзья в Живом Журнале
 

Проект компании
АйПартнер
iPartner — интернет-компания
Adverkka.ru

 
 

 

Страницы

 

В Живом Журнале

 
 
 
 

Архивы

 
 
 
 
 
4 Июл 2010

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

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

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

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

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

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

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

Во второй части вы охватили терминологию цветов: Оттенок (Hue) – (синий, зеленый, красный и так далее); Цветность (Chroma) – уровень цветности (уровень содержания примесей); Насыщенность (Saturation) – уровень отображения оттенка по соотношению слабый/сильный; Значение (Value) – уровень яркости цвета; Тональность (Tones) – уровень содержания серого оттенка в цветах; Тени (Shades) – уровень содержания черного оттенка в цветах; Подцветка (осветления / Tints) – уровень содержания белого оттенка в цветах. Это очень важные пункты, которые нужно знать для того, чтобы успешно двигаться дальше и дойти до процесса создания собственных цветовых схем.

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

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

цветовое «колесо»

цветовое «колесо»

Основа – цветовое «колесо» поделенное на 12 долей. Это очень важный элемент при создании цветовых схем.

Монохром

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

Примеры:

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

color-theory-3-003

Схожие

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

Примеры:

color-theory-3-004Это традиционная схожая цветовая схема. Хотя она выглядит очень привлекательно, в ней все же недостаточно цветового контраста, требуемого для реализации эффективного дизайна сайта.

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

color-theory-3-006Еще один пример схожей цветовой схемы.

color-theory-3-007И опять же, предыдущая схема, только модифицированная и адаптированная под разработку веб-сайта.

Комплементарные схемы

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

Примеры:

color-theory-3-008Широкий спектр осветлений, теней и тональностей делает данную схему очень универсальной.

color-theory-3-009Еще одна комплементарная схема с широким диапазоном уровней цветности.

color-theory-3-010И не забывайте, что бежевый и коричневый – это на самом деле затемненный или осветленный оранжевый цвет.

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

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

Примеры:

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

color-theory-3-012Еще одна палитра с широким диапазоном уровней цвета.

Триадные

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

Примеры:

color-theory-3-013Используя более бледный или темный вариант цвета в триадной схеме, вместе с двумя тенями/осветлениями/тональностями двух других цветов, можно добиться отдельного цвета, который будет играть роль нейтрального цвета в схеме.

color-theory-3-014И наоборот, используя один очень яркий оттенок с парой приглушенных других оттенков, можно добиться отдельного яркого оттенка, который будет сильно выделяться.

Двойная-комплементарная (четверная)

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

Примеры:

color-theory-3-015Слегка невыразительная четверная цветовая схема. Наилучшим способом применения подобной схемы считается использование одного цвета в роли основного, и все остальные для расстановки акцентов.

color-theory-3-016Четверные цветовые схемы могут отлично подойти для создания цветовых схем со схожими уровнями цветности и значений. Просто добавьте нейтральный (например, темно-серый или черный) цвет к тексту и акцентам.

color-theory-3-017

Она отлично подходит для более темных цветовых схем.

Собственная схема

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

Примеры:

color-theory-3-018Цвета, используемые на этом примере, имеют схожий уровень цветности и насыщенности.

color-theory-3-019Опять, используются цвета со схожим уровнем цветности и насыщенности. Такой метод очень эффективен и создает чувство сплоченности внутри цветовой схемы.

color-theory-3-020Используя один цвет с высоким уровнем цветности вместе с остальными с более низким уровнем – это еще один эффективный метод (цвета с более высоким уровнем цветности могут служить акцентами).

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

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

color-theory-3-021

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

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

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

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

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

color-theory-3-023Для блога мы используем цветовую схему с тенями и осветленными вариациями серого цвета.

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

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

color-theory-3-026Итак, мы избавились от пурпурных оттенков, и перешли к бургундии. Опять же, он находится прямо за красно-фиолетовым оттенком на цветовой окружности. Мы также добавили очень тусклый желтый оттенок, который расположен на противоположной стороне относительно фиолетового. Таким образом, он служит как нейтральный цвет и похож на желтоватый белый, если его сравнивать с другими оттенками.

color-theory-3-027Хотя эта схема поначалу и выглядит как другая стандартная серая и красная палитра, если Вы присмотритесь, то заметите, что серые цвета на самом деле являются тональностями синего. Синий и красный составляют 2/3 четверной схемы, но хорошо работают только в паре, особенно если красный оставить без примесей, а синий цвет затемнить до почти серого.

Важность теней, тональностей и осветлений

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

color-theory-3-028

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

Добавляем нейтральные цвета

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

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

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

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

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

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

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

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

color-theory-3-031Одно из занимательных свойств сервиса Kuler – это то, что в нем есть функция «Select a Mood» (выбора настроения), при создании цветовой схемы. Вы можете выбрать Цветную, Яркую, Приглушенную, Глубокую или Темную цветовую схему. Посмотрите на результаты, полученные в разных режимах:

Цветная

Цветная

Яркая

Яркая

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

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

Глубокая

Глубокая

Темная

Темная

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

color-theory-3-037

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

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

color-theory-3-038И опять же 5 разных схем, которые нам предлагает Kuler:

Цветная

Цветная

Яркая

Яркая

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

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

Глубокая

Глубокая

Темная

Темная

А тут что у нас получилось в Photoshop:

color-theory-3-044

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

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

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

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

color-theory-3-045

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

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

Как много цветов?

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

color-theory-3-046

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

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

— 10 сайтов с великолепными цветовыми схемами

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

01. Wentings Cycle & Mountain Shop

http://wentings.com/

http://wentings.com/

wentings|com

02. Trivuong.com

http://www.trivuong.com/

http://www.trivuong.com/

trivuong|com

03. Oscar Barber

http://www.oscarbarber.com/

http://www.oscarbarber.com/

oscarbarber|com

04. North East Peace III Partnership

http://northeastpeace.com/

http://northeastpeace.com/

northeastpeace|com

05. mbA Architects

http://www.mbaarc.com/

http://www.mbaarc.com/

mbaarc|com

06. Studio 13

http://www.studio13.fr/

http://www.studio13.fr/

studio13|fr

07. Joy Project

http://www.joyproject.it/en

http://www.joyproject.it/en

joyproject|it

08. Morphix Blog

http://blog.morphix.si/

http://blog.morphix.si/

blog|morphix|si

09. El Designo

http://www.eldesigno.ca/

http://www.eldesigno.ca/

eldesigno|ca

10. LemonStand

http://lemonstandapp.com/

http://lemonstandapp.com/

lemonstandapp|com

— Заключение

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

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

Оригинал: Color Theory for Designer, Part 3: Creating Your Own Color Palettes
Перевод: coolwebmasters|com

Be Sociable, Share!

Вас может заинтересовать и:

  1. Теория цвета для дизайнеров, часть 1: значение цвета, нейтральные цвета
  2. Теория цвета для дизайнеров, часть 1: значение цвета, холодные цвета
  3. Теория цвета для дизайнеров, часть 1: значение цвета, теплые цвета
  4. Теория цвета для дизайнеров, часть 2: Понимание концепции и терминологии
  5. Игфографика: Цвета 2010 года
  6. Яндекс.Цвета — определение названий цветов
  7. Инфографика: Самые популярные цвета в интернете

Метки: , , , , , , , , , , , , , , , , , , , , ,

 

Статья на сайте айпартнер: Теория цвета для дизайнеров, часть 3: Создаем собственную цветовую схему

 

Комментариев нет.

RSS-лента комментариев к этой записи. TrackBack URL

Оставить комментарий