Сочетаемость цветов

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

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

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

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

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

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

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

Рис. 20

(см. цветную вкладку, стр. 334)

Рис. 21

(см. цветную вкладку, стр. 335)

С другими двумя параметрами дело обстоит несколько проще. Разница в яркости или насыщенности двух цветов заметна сразу, но все же обычно она воспринимается лишь как нечто дополнительное к разнице основных тонов. Ло­гично поэтому, чтобы по одному из этих двух параметров цвета резко различались, усиливая контраст тонов, а по второму — поддерживали друг друга, не позволяя цветовому решению распасться (рис. 20 на цветной вкладке, а). Про­тивопоставления всех трех компонентов цвета (рис. 20, б) следует избегать — как мы увидим ниже, увеличение коли­чества противоположных аспектов не усиливает, а ослабляет контраст, разобщая элементы. Если же вы хотите усилить взаимодействие между цветами, связав их особо тесным контрастом, используйте два параметра для объединения и один (лучше всего яркость) для противопоставления (рис. 20, в).

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

Вы не хотите тратить время на поиски необычных, запоминающихся цве­тов? Простота ваших страниц не требует неординарных цветовых решений? Тогда примите к сведению совет дизайнера Роджера Блэка, отлитый в че­канную формулу: «The First Color is White, The Second Color is Black, The Third Color is Red». Все действительно настолько просто: самый яркий и самый темный из всех возможных цветов создают ощущение тесно­го единства и максимального контраста, а если вам нужен третий цвет — красный великолепно сочетается и с черным, и с белым. Противоположностью такого минималистского подхода является особый, нарочито пестрый цветовой стиль, соединяющий максимальное количество максимально ярких и насыщенных цветов. Известно, что всевозможные ра­дужные, «попугайские» заливки — один из коронных приемов дизайнеров-любителей. Однако этот мотив можно встретить и во вполне профессио­нальных композициях (таких как, например, логотип фирмы Fractal Design, рис. 21 на цветной вкладке), где он обычно уравновешивается максималь­ной цветовой сдержанностью в других частях композиции.

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

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

Текст и фон

Элементы, без которых не обходится ни одна веб-стра­ница, — фон, текст и гипертекстовые ссылки (стр. 215) — ставят интересную задачу гармонизации трех (или четы­рех, если учитывать цвет «посещенных» ссылок) цветов, занимающих в композиции резко различающиеся площади и выполняющих разные функции. Есть немало страниц с минимумом графики и достаточно ординарной компози­цией, которые привлекают и запоминаются исключительно своей цветовой гаммой.

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

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

Необычные цветовые решения веб-страниц можно разбить на две большие группы: с темным текстом на светлом фоне и со светлым текстом на темном фоне. Вторые

Рис. 22

(см. цветную вкладку, стр. 114)

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

Посмотрим сначала, что может дать нам схема с темным текстом на светлом фоне. Оставим пока текст черным, возьмем какой-нибудь достаточно насыщенный цвет (си­ний, к примеру), увеличим его яркость (другими словами, смешаем его с белым) и закрасим им фон. Результат (рис. 22 на цветной вкладке, а) трудно назвать особо привлекательным — очевидно, что насыщенность фоно­вого цвета противоречит его яркости. Цвет этот кажется водянистым, разбавленным, неинтересным. Зачем нужно разведенное молоко, если можно пить чистую воду или чистое молоко?

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

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

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

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

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

Сайт www.chess.ibm.com (пример 1?) являет собой великолепный образец сбалансированного цветового дизайна. Его светлый, но притом достаточно насыщенный фоновый цвет (#СССС99) выразителен сам по себе и не требует поддержки со стороны текста, для которого выбран слегка смягченный черный цвет (#333333). Для ссылок использован кон­трастный, но равным образом смягченный синий (#0033FF). Остальные графические элементы поддерживают эту разнообразную, но абсолютно лишенную пестроты цветовую гамму.

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

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

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

На втором месте по популярности после чисто черного фона стоят насыщенные холодные цвета — такие как, например, бархатно-синий фон сайта www.verso.com (пример 19). Для текста, наоборот, популярны оттенки теплых цветов, в особенности желтого, призванного сим­волизировать золото. Необычный цветовой колорит сайта www.bdaweb.com (пример 13) объясняется полным от­казом от цвета как такового — темно-серые буквы на черном фоне привлекательны своей сдержанностью, хотя они выглядели бы мрачновато, если бы не ярко-оранжевый цвет логотипа и ссылок.

Текстуры

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

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

11?

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

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

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

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

Плоский цвет

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

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

Рис. 23 Сочетание геоме­трической и фотографической текстур

максимально использовать все возможности компьютерного цвета. Мощные, свободные цвета режимов high color и true color (стр. 61), сравнительно недавно получившие массо­вое распространение, часто становятся центральной темой композиции, и любая неоднородность поверхности была бы диссонансом в этой симфонии цвета. Кроме того, как я уже говорил, современный дизайн предпочитает простые стро­гие геометрические формы, а для таких форм почти любая неплоскоцветная текстура — с ее неизбежным сродством с аморфностью — кажется чужой.

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

Не нашли, что искали? Воспользуйтесь поиском: