Веб-дизайн
Шрифт:
Любые два цвета в близком соседстве воспринимаются несколько иначе, чем по отдельности. Художники знают, что предметы материального мира связаны сложными цветовыми отношениями — они бросают друг на друга рефлексы (отраженный свет) и окрашенные тени. К этому же, пусть и на подсознательном уровне, приучен глаз любого непрофессионала, и этого же он ожидает и от любой композиции на экране компьютера или на бумаге.
Если цвета–соседи обладают примерно одинаковой яркостью и если один из цветов заметно превосходит другой по занимаемой площади, то он «подминает под себя» своего соседа, перетягивая на себя его параметры. Скажем, тускло–синий в окружении ярко–зеленого приобретает зеленоватый налет и становится несколько более «цветным».
Непосредственно возле границы двух цветов, однако, начинает проявляться противоположная
Сочетаемость цветов
Сочетаемость цветов — одна из немногих областей дизайна, в которых почти у любого непрофессионала есть свое мнение. Несколько ходовых рецептов цветовых сочетаний известны всем женщинам, которые когда–либо брали в руки иголку с ниткой; да и мужчины любят порассуждать о том, что с чем сочетается или же наоборот, выбирая цвет обоев или галстука. Профессионал же, знающий, что цветов гораздо больше, чем семь, и что два «зеленых» могут отличаться друг от друга не менее сильно, чем черный от белого, вместо готовых рецептов чаще пользуется общими принципами, хотя во многих случаях и они не могут заменить интуицию и опыт.
Что же это за принципы? Мы будем подробнее говорить о них во второй части этой главы (стр. 149). Из выведенных там закономерностей особенно важны для подбора цветов противоположные и взаимодополняющие принципы единства и контраста.
Принцип единства требует, чтобы используемые цвета были как можно ближе друг к другу, а в идеале представляли бы собой один и тот же цвет. И это действительно работает — как женщины выбирают «шляпку в тон перчаткам», так и дизайнеры обычно ограничивают спектр каждой отдельной композиции небольшим количеством цветов (не больше четырех), используя каждый цвет для нескольких разных элементов (иногда близких по своим функциям и оформлению, а иногда и совершенно различных).
Более того, иногда принцип единства главенствует и при подборе цветов, которые обязаны быть различными. Многие профессиональные страницы выполнены в одной цветовой гамме: например, со светлыми оттенками основного цвета для фона, более темными — для текста и более насыщенными — для декоративных элементов (пример 16). Однако при поиске подобного цветового решения нужно быть весьма осторожным, так как слишком близкие, но не одинаковые цвета могут раздражать своей («дразнящей») близостью, а отсутствие достаточной меры контраста сделает композицию скучной. Поэтому, если у вас еще недостаточно опыта, лучше придерживаться проверенного временем рецепта: пользоваться минимумом цветов, но сами цвета при этом подбирать по возможности контрастные.
Как же выбрать хорошее сочетание контрастных цветов? Чем вообще определяется контраст между цветами? Вспомним, как цвет разлагается на три составляющие в системе HSV, и попробуем проанализировать каждую из составляющих по отдельности.
Начнем с тона. Первое правило формулируется просто: нельзя пользоваться цветами, расположенными слишком близко друг к другу на цветовом круге — диссонанс между такими цветами буквально бьет по глазам (как режет ухо диссонанс между нотами, различающимися только на полгона). С другой стороны, прямо противоположные цвета тоже редко образуют гармоничные пары — зеленый с фиолетовым или красный с голубым обычно кажутся слишком разнородными (относительно неплохо сочетаются только синий с желтым). Пожалуй, лучше всего контрастируют Круг с другом цвета, расположенные приблизительно на расстоянии четверти окружности друг от друга. Кроме того, два теплых или два холодных цвета выказывают большее сродство друг с другом, чем цвета из противоположных полушарий (напомню, что граница между теплой и холодной областями цветового круга проходит по горизонтали, отделяя красный от фиолетового слева и зеленый от голубого справа).
Рис. 20 см. вкладку, стр 334
Рис. 21 вкладку, стр.
С другими двумя параметрами дело обстоит несколько проще. Разница в яркости или насыщенности двух цветов заметна сразу, но все же обычно она воспринимается лишь как нечто дополнительное к разнице основных тонов. Логично поэтому, чтобы по одному из этих двух параметров цвета резко различались, усиливая контраст тонов, а по второму — поддерживали друг друга, не позволяя цветовому решению распасться (рис. 20 на цветной вкладке, а). Противопоставления всех трех компонентов цвета (рис. 20, б) следует избегать — как мы увидим ниже, увеличение количества противоположных аспектов не усиливает, а ослабляет контраст, разобщая элементы. Если же вы хотите усилить взаимодействие между цветами, связав их особо тесным контрастом, используйте два параметра для объединения и один (лучше всего яркость) для противопоставления (рис. 20, в).
Теперь вам должно быть понятно, почему белый и особенно черный цвета так хорошо сочетаются с большинством других. Отсутствие у них компонентов тона и насыщенности позволяет сознанию зрителя считать их яркой или темной модификацией того цвета, с которым они в данный момент соседствуют, применяя к ним вариант двух общих и одного противоположного параметра (как на рис. 20, в) — то есть почти оптимальное сочетание начал единства и контраста.
Вы не хотите тратить время на поиски необычных, запоминающихся цветов? Простота ваших страниц не требует неординарных цветовых решений. Тогда примите к сведению совет дизайнера Роджера Блэка, отлитый в чеканную формулу: «The First Color is White, The Second Color is Black, Tin Third Color is Red». Все действительно настолько просто: самый яркий и самый темный из всех возможных цветов создают ощущение тесного единства и максимального контраста, а если вам нужен третий цвет–красный великолепно сочетается и с черным, и с белым. Противоположностью такого минималистского подхода является особый, нарочито пестрый цветовой стиль, соединяющий максимальное количество максимально ярких и насыщенных цветов. Известно, что все возможные радужные, «попугайские» заливки — один из коронных приемов дизайнеров любителей. Однако этот мотив можно встретить и во вполне профессиональных композициях (таких как, например, логотип фирмы Fractal Design рис. 21 на цветной вкладке), где он обычно уравновешивается максима» ной цветовой сдержанностью в других частях композиции.
Теория эта может оказать вам существенную помощь, но она никогда не заменит вашего личного опыта и экспериментирования. Существует множество великолепных цветовым ансамблей, с трудом укладывающихся в описанную выше схему. И наоборот — иногда приготовленные по всем правилам цветовые пары упорно не хотят работать вместе. Кроме того, подбор цветов очень сильно зависит от того, для какого рода элементов эти цвета предназначены. К рассмотрению самого важного из таких специальных случаев — цветовой координации текста и фона — мы сейчас и перейдем.
Текст и фон
Элементы, без которых не обходится ни одна веб–страница, — фон, текст и гипертекстовые ссылки (стр. 215) — ставят интересную задачу гармонизации трех (или четырех, если учитывать цвет «посещенных» ссылок) цветов, занимающих в композиции резко различающиеся площади и выполняющих разные функции. Есть немало страниц с минимумом графики и достаточно ординарной композицией, которые привлекают и запоминаются исключительно своей цветовой гаммой.