Блог

Всем привет!

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

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

Наступил век цифровых технологий, и как дизайнер вы больше не зависите от ограниченной палитры красок, карандашей или других цветных пигментов. Вы знали, что человеческий глаз способен различать миллионы разных тонов?
Правда, теперь проблема подстерегает с другой стороны: порой выбрать два или три из этих самых миллионов бывает ой как непросто!

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

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

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

Начнем, пожалуй, с цветового круга.

Основы: понимание цвета

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

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

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

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

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

Данный способ понимания цвета известен как субтрактивная модель, которая подразумевает смешение цветных пигментов, т.е. красок или чернил. К этой категории относятся как традиционный цветовой круг, так и цветовая модель «голубой-пурпурный-желтый-черный» (Сyan, Magenta, Yellow, blacK или CMYK), которая используется при печати.

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

Терминология

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

• Цветовой оттенок (hue) – синоним слова «цвет» или название определенного цвета, как правило, относится к одному из 12 цветов цветового круга
• Тень (shade) –цвет, затемненный черным
• Тон (tone) – цвет, приглушенный серым
• Светлый оттенок (tint) – цвет, осветленный белым
• Насыщенность (saturation) – интенсивность или чистота цвета (чем ближе тон к серому, тем он менее насыщенный)
• Яркость (value) – речь идет о том, насколько цвет «светлый» или «темный»

Цветовая гармония

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

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

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

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

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

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

5. Троичная: сочетает в себе любые три цвета, расположенные на равном расстоянии друг от друга в цветовом круге.

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

Вдохновение цветом

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

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

Для изучения различных цветовых схем воспользуйтесь одним из многочисленных инструментов для подбора цвета, доступных сегодня в интернете. Некоторые из них даже позволяют загружать изображения и генерируют цветовые схемы. Вот несколько примеров: Paletton, Adobe Color CC (Kuler) и ColorExplorer. Если вы пользуетесь Chrome, можете скачать расширение Eye Dropper, которое позволяет находить и вытягивать цвета прямо с веб-страниц.

Яркие веселые цветовые палитры, найденные в путешествиях по миру.

Еще один отличный прием: обратите внимание на различные исторические периоды и художественные направления. Из палитр ниже становится понятно, что импрессионистам были свойственны теплые наполненные светом цвета, а постимпрессионисты использовали в своих работах живые и неожиданные цветовые сочетания. Направление Art Nuvo сделало выбор в пользу теплых землистых цветовых схем, а поп-арт – ярких и смелых.

Слева направо: «Пшеничные стога» («Конец лета») Клода Моне; «Звездная ночь» Винсента Ван Гога; «Мечтательность» Альфонса Мухи; «Мэрилин» Энди Уорхола

Цвет в дизайне

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

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

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

Выбрав основную трехцветную палитру, придерживайтесь правила 60-30-10. Обычно этот подход используется в дизайне интерьера, но он вполне может пригодиться и в веб-дизайне. Все предельно просто: на доминирующий тон должно приходиться 60% цвета, в то время как на два акцентных тона – 30% и 10% соответственно. В качестве хорошей аналогии можно привести мужской костюм: пиджак и брюки составляют 60% общего цвета, рубашка – 30%, а галстук – маленькое яркое пятнышко – 10%. В результате получается гармоничный изысканный внешний вид.

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

Имидж бренда прочно связан с цветом. Вспомните Coca-Cola, Facebook или Starbucks. Готов поспорить, что вы мгновенно перечислите все цвета, с которыми ассоциируются эти бренды.

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

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

Для вдохновения: загляните на сайт BrandColors, там собраны цветовые сочетания с hex-кодами известных брендов со всего мира.

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

Вопреки известному правилу графических программ: «What you see is what you get» (т.е. что видим, то и получаем), в работе с цветом «то, что вы видите» совсем не соответствует «тому, что вы получите», потому что цифровые мониторы и принтеры пользуются разными цветовыми системами: RGB и CMYK.

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

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

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

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

Изучайте и любите цвет!

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

Все советы в моей статье — лишь капля в море информации о работе с цветом в дизайне. Если вы хотите основательно изучить эту тему и получить практические навыки по созданию удачных цветовых сочетаний, приглашаю вас принять участие в моем онлайн-воркшопе «Колористика для дизайнера-самоучки», который стартует 20.09.2016.

Информация и предварительная запись здесь.

Поделиться в соц. сетях: