Наряду с формой, шрифтом и текстурой цвет принадлежит к базовым строительным материалам как в «бумажном», так и, в особенности, в мультимедийном и Web-дизайне. Необычный, но тщательно продуманный и сбалансированный набор цветов вполне может стать основой великолепной композиции - и это при том, что остальные ее аспекты будут самыми что ни на есть ординарными.
Очевидно, что восприятие цвета является более субъективным, чем восприятие, скажем, формы - у людей разные не только любимые цвета, но и ощущения, связанные с тем или иным цветом. Тем не менее в цветовой вселенной есть свои универсальные законы, которые любой дизайнер обязан знать и уметь применять на практике. Это не дает, к сожалению, гарантии, что его цветовые решения будут нравиться всем, но, по крайней мере, позволит избежать распространенных ошибок и придаст работам профессиональный вид (и это признают те, у кого какие-то конкретные цвета вызывают неприятие).
Цвет - та область, в которой компьютерная графика имеет самое большое преимущество перед графикой естественной. Экран компьютера, в отличие от листа бумаги, сам излучает свет, и регулирование количества этого света позволяет охватить гораздо более широкий цветовой спектр, чем тот, который можно воспроизвести на бумаге. Вплоть до самого последнего времени загвоздка была лишь в сравнительно низком качестве компьютерных дисплеев и небольшом объеме памяти, который отводился для хранения изображения в массовых персональных компьютерах. Но теперь, когда видеосистемы с поддержкой режимов high color и true color перестали быть экзотикой, компьютер превратился в лучший инструмент работы с цветом, доступный не только профессиональным дизайнерам, но и огромной массе любителей.
Конечно, на цвет нельзя возлагать функцию основного носителя информации - Web-страница обязана оставаться читаемой и в черно-белом виде (например, на экране мобильного компьютера или на странице книги). Прежде чем считать свою работу законченной, дизайнер обязан выяснить, как его творение смотрится в «серой шкале». Однако это не значит, что цветовые отношения, как нечто факультативное, можно наложить на готовый черно-белый дизайн. В конце концов, шкала серых тонов сохраняет только одну из трех составляющих исходного цвета - яркость. Поэтому только в том случае, когда композиция правильно решена в цвете, она будет хорошо смотреться и в монохромном варианте.
Восприятие цвета
Человеческое восприятие по природе своей синтетично, а не аналитично - мы раскладываем образ по составляющим размера, формы, цвета и так далее уже в мозгу, тогда как органы чувств передают нам всю картинку целиком, со всеми искажениями и неточностями, вызванными взаимовлиянием элементов. В полной мере это относится и к цвету - просто удивительно, насколько по-разному воспринимается цвет в зависимости от того, какую форму и площадь он занимает и какие цвета его окружают.
При уменьшении занимаемой цветом площади количество оттенков, которые глаз способен различить, уменьшается, и большинство цветов выглядят более тусклыми и темными, особенно если их яркость и насыщенность и без того не были максимальными. На практике это означает, что для небольших по размеру элементов нужно выбирать более яркие основные цвета, а для того чтобы показать всю красоту какого-нибудь темного, слабонасыщенного оттенка, необходима достаточная площадь (например, фон всей страницы).
С другой стороны, цвета, достаточно близкие к черному или к белому, вряд ли удастся эффектно подать даже на блюде размером со стол. Если цвет слишком темный, глаз склонен считать его просто черным, а незначительную его светлоту списывать на неаккуратность художника или на слишком яркий монитор. То же относится и к белому: почти любые незначительные примеси (кроме разве что синего - не случайно при стирке белья добавляют синьку) вызывают ощущение неопрятности, и чтобы заставить их звучать, необходимо поддержать и развить этот оттенок в других элементах.
Любые два цвета в близком соседстве воспринимаются несколько иначе, чем по отдельности. Художники знают, что предметы материального мира связаны сложными цветовыми отношениями - они бросают друг на друга рефлексы (отраженный свет) и окрашенные тени. К этому же, пусть и на подсознательном уровне, приучен глаз любого непрофессионала, и этого он ожидает от любой композиции на экране компьютера или на бумаге.
Если цвета-соседи обладают примерно одинаковой яркостью, то они склонны обмениваться насыщенностью и цветом. Скажем, тускло-синий рядом с ярко-зеленым приобретает зеленоватый налет и становится чуть более «цветным»; зеленый же несколько теряет в яркости и также сдвигается в сторону голубого. Эти эффекты заметнее всего проявляются тогда, когда один цвет окружает со всех сторон, «подавляет» другой.
Непосредственно возле границы двух цветов, однако, начинает проявляться противоположная тенденция - цвета как бы отталкиваются друг от друга, стараются подчеркнуть свои различия; более темный цвет в соседстве с более светлым приобретает еще более темную «кромку», а светлый возле самой границы делается несколько ярче. Такое влияние цветов друг на друга, приводящее к усилению контраста между ними, заметнее всего, когда цвета-соседи значительно отличаются по яркости. На ярком белом фоне почти любой достаточно темный цвет выглядит черным, а на темном или черном фоне особенно сочно смотрятся яркие и насыщенные цвета, тогда как темные и ненасыщенные выглядят бледновато.
Сочетаемость цветов
Сочетаемость цветов - одна из немногих областей дизайна, относительно которых почти у любого непрофессионала есть свое мнение. Несколько ходовых рецептов цветовых сочетаний известны всем женщинам, которые когда-либо брали в руки иголку с ниткой; да и мужчины любят порассуждать о том, что с чем «смотрится» или же «не смотрится», выбирая цвет обоев или галстука. Профессионал же, знающий, что цветов гораздо больше семи и что два «зеленых» могут отличаться друг от друга не менее сильно, чем черный от белого, вместо готовых рецептов чаще пользуется общими принципами, хотя во многих случаях и они не могут заменить интуицию и опыт.
Особенно важны для подбора цветов противоположные и взаимодополняющие принципы единства и контраста. Принцип единства требует, чтобы используемые цвета были как можно ближе друг к другу, а в идеале представляли бы собой один и тот же цвет. И это действительно работает - как женщины выбирают «шляпку в тон перчаткам», так и дизайнеры обычно ограничивают спектр каждой отдельной композиции небольшим количеством (обычно не больше трех-четырех) цветов, используя каждый цвет для нескольких разных элементов (иногда близких по своим функциям и оформлению, а иногда и совершенно различных).
 |
|
Как же выбрать хорошее сочетание контрастных цветов? Чем вообще определяется контраст между цветами? Вспомним, как цвет разлагается на три составляющие в системе HSV (англ. hue-saturation-value, тон-насыщенность-яркость), и попробуем проанализировать каждую из составляющих в отдельности.
Начнем с тона. Первое правило формулируется просто: нельзя пользоваться цветами, расположенными слишком близко друг к другу на цветовом круге - диссонанс между ними буквально бьет по глазам (как режет ухо диссонанс между нотами, различающимися всего на полтона). С другой стороны, прямо противоположные цвета тоже редко образуют гармоничные пары - зеленый с фиолетовым или красный с голубым обычно кажутся слишком разнородными (относительно неплохо сочетаются только синий с желтым). Пожалуй, лучше всего сочетаются и контрастируют друг с другом цвета, расположенные приблизительно на расстоянии четверти окружности один от другого.
С другими двумя параметрами дело обстоит несколько проще. Разница в яркости или насыщенности двух цветов заметна сразу, но все же она обычно воспринимается лишь как нечто дополнительное к разнице основных тонов. Логично поэтому, чтобы по одному из этих двух параметров цвета резко различались, поддерживая контраст тонов, а по второму - поддерживали друг друга, не позволяя цветовому решению распасться. Если общность и перекличка цветов в вашем случае не так важна, можно применить противопоставление всех трех компонентов цвета - увеличение количества противоположных аспектов не усиливает, а ослабляет контраст, разобщая элементы. И наоборот, если вы хотите подчеркнуть взаимодействие цветов, связав их особо тесным контрастом, можно использовать два параметра для объединения и один (лучше всего яркость) для противопоставления.
Теперь вам должно быть понятно, почему белый и особенно черный цвет так хорошо сочетаются с большинством других. Отсутствие у них компонентов тона и насыщенности позволяет сознанию зрителя считать их яркой или темной модификацией того цвета, с которым они в данный момент соседствуют, применяя к ним вариант двух общих и одного противоположного параметра - то есть почти оптимальное сочетание начал единства и контраста.
Вы не хотите тратить время на поиски необычных, запоминающихся цветов? Простота ваших страниц не требует неординарных цветовых решений? Тогда примите к сведению совет дизайнера Роджера Блэка: «The First Color is White, The Second Color is Black, The Third Color is Red». (Первый цвет - белый, второй - черный, третий - красный.) Все действительно очень просто: самый яркий и самый темный из всех возможных цветов создают ощущение тесного единства и максимального контраста, а если вам нужен третий цвет - пожалуйста: красный великолепно сочетается и с черным, и с белым.
Противоположностью такого минималистского подхода является особый, нарочито пестрый цветовой стиль, соединяющий максимальное количество максимально ярких и насыщенных цветов. Известно, что всевозможные радужные, «попугайские» заливки - один из излюбленных приемов дизайнеров-любителей. Однако этот мотив можно встретить и во вполне профессиональных композициях.
Теория эта может оказать вам существенную помощь, но она никогда не заменит вам личный опыт. Существует множество великолепных цветовых ансамблей, с трудом укладывающихся в описанную выше схему. И наоборот, многие приготовленные по всем правилам цветовые пары упорно не хотят работать вместе. Кроме того, подбор цветов очень сильно зависит от того, для какого рода элементов эти цвета предназначены. К рассмотрению самого важного из таких специальных случаев - цветовой координации текста и фона - мы сейчас и перейдем.
Текст и фон
 |
|
Основное требование к паре цветов для фона и текста - достаточный контраст между ними, необходимый для комфортного, неутомительного чтения. Контраст этот должен выражаться прежде всего в различной яркости цветов, так как разница только в тоне или насыщенности не позволит сознанию различать текст и фон с достаточным автоматизмом, а для текста небольшого кегля его тональная окраска или степень насыщенности вообще с трудом различимы (кроме того, эти параметры цвета теряются на черно-белых устройствах вывода).
Неудивительно поэтому, что тесты психологов указывают на черный цвет на белом фоне как на сочетание, обеспечивающее максимальное удобство при продолжительном чтении. Однако эргономика - хотя и важный, но не единственный аспект информационного дизайна, и нередко ей приходится уступать место эстетике. Помимо черного на белом, существует бесчисленное множество сочетаний цветов, обеспечивающих хорошую читаемость текста, и при выборе одного из них нужно учитывать общий стиль дизайна страницы, сочетаемость этих цветов друг с другом и множество других, чисто эстетических соображений. Не стоит также забывать, что экран компьютера позволяет гораздо свободнее манипулировать компонентами цвета, делая возможными сочетания, невоспроизводимые на бумаге.
Необычные цветовые решения Web-страниц можно разбить на две большие группы: с темным текстом на светлом фоне и со светлым текстом на темном фоне. Вторые значительно популярнее (если не учитывать традиционные черно-белые страницы, составляющие все же заметное большинство).
Посмотрим сначала, что может дать нам схема с темным текстом на светлом фоне. Оставим пока текст черным, возьмем какой-нибудь достаточно насыщенный цвет (синий, к примеру), увеличим его яркость (другими словами, смешаем его с белым) и закрасим им фон. Результат трудно назвать особо привлекательным - очевидно, что насыщенность фонового цвета противоречит здесь его яркости. Такой фон кажется водянистым, разбавленным, неинтересным. Зачем нужно разведенное молоко, если можно пить чистую воду или чистое молоко?
Теперь вам должны быть ясны способы, которыми можно улучшить эту цветовую схему, - нужно либо сделать фоновый цвет более темным, чтобы его насыщенность выступила на первый план, - либо, наоборот, оставить его светлым, но понизить его насыщенность. Для первого способа нужно, чтобы фоновый цвет сам по себе был достаточно оригинальным, так что чистый синий здесь уже не подойдет, - но зато можно попробовать какой-нибудь неочевидный промежуточный тон, например сине-зеленый или кофейный.
Второй способ - понижение насыщенности - превращает фоновый цвет в светло-серый с оттенком исходного цвета. Это делает цвет менее очевидным и потому более интересным, но сам по себе он все еще может быть не слишком убедительным. Такой цвет требует поддержки со стороны цвета текста, поэтому лучше всего использовать для текста более темную вариацию того же цвета.
С тем же успехом можно сказать, что, наоборот, темный цвет текста требует поддержки со стороны фона, иначе его тональная составляющая будет с трудом различима. Как аккорд звучит интереснее отдельной ноты, так и эта пара цветов гораздо лучше выражает характер их общего тонального компонента. В то же время невысокая насыщенность не позволяет цвету выйти на первый план восприятия, обеспечивая комфортное чтение.
Необходимую долю разнообразия такому цветовому ландшафту может придать более насыщенный или контрастный по тону цвет ссылок. Вообще, для эффективного опознавания ссылки обязаны иметь более заметный цвет, чем основной текст, хотя достичь этого можно разными способами - контрастом тона, увеличением насыщенности, повышением или понижением яркости. Посещенные (visited) ссылки должны сигнализировать о своей «отработанности» цветом менее насыщенным или просто более близким к цвету основного текста. Принятая в графических браузерах раскраска ссылок по умолчанию - синий цвет для «свежих» ссылок и фиолетовый для «использованных» - достигает нужного результата и без каких бы то ни было вариаций насыщенности, благодаря тому, что фиолетовый цвет обычно производит впечатление смешанности, «нечистоты» и потому «неизначальности».
 |
|
 |
|
Есть, однако, одно ограничение технического плана. Фоновый цвет, который хочет выглядеть именно цветом, а не бесцветным черным, обязан быть достаточно насыщенным - «ночью все кошки серы», - и слишком слабая примесь основного тона будет в темном цвете трудно различима, даже несмотря на большую площадь, занимаемую этим цветом. Насыщенность цвета текста может при этом поддерживать насыщенность фона, а может контрастировать с ней.
На втором месте по популярности после чисто черного фона стоят насыщенные холодные цвета, - такие, как, например, бархатно-синий фон сайта www.verso.com. Для текста, наоборот, популярны оттенки теплых цветов, в особенности желтого, призванного символизировать золото. Необычный цветовой колорит сайта www.bdaweb.com объясняется полным отказом от цвета как такового - темно-серые буквы на черном фоне привлекательны своей сдержанностью, хотя они выглядели бы мрачновато, если бы не ярко-оранжевый цвет логотипа и ссылок.
Палитра и диффузия
Большая часть графики на Web-страницах использует формат GIF с его ограниченной 256 цветами палитрой. Ограничению палитры, однако, можно придать двоякий смысл: оно может распространяться либо только на количество используемых цветов, либо и на количество, и на конкретный их набор. И хотя сам формат GIF накладывает ограничения только первого рода, специфика интернетовских технологий заставляет иногда прибегать к некоторой «общепринятой» GIF-палитре с фиксированными цветами.
Зачем это нужно? Дело в том, что перевод изображения в ограниченную палитру часто сопровождается диффузией (англ. dithering). При этом области, которые в оригинале были залиты однородным цветом, после преобразования заполняются смесью пикселов разных цветов, разбросанных по случайному закону. Как правило, каждый отсутствующий в редуцированной палитре цвет передается пикселами двух самых близких к нему цветов новой палитры. В результате изображение приобретает характерную зернистую, шершавую фактуру. Очень часто диффузия является единственным способом хоть сколько-нибудь адекватно передать исходные цвета с помощью палитры, на которой этих цветов уже нет.
В случаях, когда исходное изображение имеет значительно больше цветов, чем можно (или нужно) оставить в формате GIF, без диффузии не обойтись, и тогда дизайнер вводит ее на этапе перевода изображения в формат GIF. Но, к сожалению, иногда цветовыми преобразованиями начинает заниматься и браузер на компьютере пользователя. На мониторах, неспособных изобразить одновременно больше 256 цветов (а такие мониторы все еще составляют заметный процент всех устройств вывода), оба визуальных браузера - и Netscape Communicator, и Microsoft Internet Explorer - вынуждены при выводе графических файлов на экран изменять их палитру.
Во-первых, браузеру приходится приводить к общему знаменателю палитру всех графических вставок на Web-странице. Во-вторых, чаще всего не обойтись также без приспособления палитры графического файла к полностью или частично фиксированной системной палитре - в частности, из 256 доступных цветов в любом случае несколько цветов будут заняты под рамку окна и логотип браузера в правом верхнем углу. Чтобы эти неизбежные преобразования не приводили к совсем уж неприемлемым результатам, все современные браузеры пользуются при замещении палитры диффузией. Это значит, что, даже если ваше изображение состоит из идеально гладких цветовых плоскостей, но палитра его не может быть отображена напрямую, в браузере такое изображение станет шероховатым.
Проблема эта действительно серьезная, так как для многих изображений, составляющих нередко основу дизайна страницы, диффузия крайне нежелательна. Что же делать? Оказывается, существует набор из 216 цветов, которые с гарантией никогда не подвергаются диффузии ни в одном из браузеров и ни на одной из платформ. Если ваше изображение будет содержать только цвета из этого набора (или, по крайней мере, к этому набору будут относиться цвета, занимающие наибольшую площадь), на 256-цветном экране оно будет выглядеть намного чище и привлекательнее. Эту палитру часто называют «безопасной» (англ. browser-safe palette) или «интернетовской».
Для изображений с преимущественно фотографическими текстурами, которые подвергаются диффузии еще при сохранении в формате GIF и для которых поэтому дополнительная диффузия в браузере уже не страшна, пользоваться этой безопасной палитрой нет никакого смысла. Однако сколько-нибудь значительные по размеру заливки плоским цветом очень желательно защитить от диффузии. Отсюда, кстати, следует, что комбинированную графику, объединяющую фотографические и плоскоцветные элементы, желательно по возможности разделять на части, чтобы диффузия одной их составляющей не затрагивала другую.
Очевидно, что серьезно относящийся к цветовому решению своих работ дизайнер должен позаботиться о цветовой безопасности на самых ранних стадиях проекта. Встроенная или загружаемая «интернет-палитра» есть сейчас во многих векторных и растровых графических редакторах. Ничто также не мешает вам выбирать ее цветовые значения вручную, пользуясь таким несложным правилом: 216 цветов этой палитры получаются комбинированием красной, зеленой и синей составляющих, каждая из которых может принимать только шестнадцатиричные значения 00, 33, 66, 99, CC и FF (или десятичные 0, 51, 102, 153, 204 и 255). Таким образом, три составляющих, каждая из которых может принимать шесть разных значений, дают 63 = 216 возможных цветов.
Диффузия в браузере и безопасная палитра, еще недавно бывшие источником головной боли для Web-дизайнеров, постепенно теряют актуальность по мере того, как устаревают и вымываются из общей массы персональных компьютеров 256-цветные устройства воспроизведения. Эту тенденцию нельзя не приветствовать хотя бы потому, что она открывает перед автором настоящий океан цвета, позволяет выбирать неочевидные, не приевшиеся оттенки. С другой стороны, если какие-то цвета в вашей композиции не несут большой смысловой или эстетической нагрузки, надежнее округлить их до ближайших значений безопасной палитры.
Заключение
Цвет в Web-дизайне - тема обширная, многоплановая и в чем-то даже парадоксальная. Осваивающий новый для себя жанр «бумажный» дизайнер, не успев как следует обрадоваться непривычной свободе и широте охвата компьютерного цвета, сразу же наталкивается на суровые ограничения безопасной палитры и общий «цветовой дефицит», вытекающий из необходимости оптимизировать графические файлы. Любой талантливый Web-дизайнер тем не менее отличается особым, узнаваемым «цветовым стилем», проявляющимся не столько в приверженности к определенным тонам, сколько в общем отношении к цвету, индивидуальной манере сталкивания контрастных и гармонизации сходных цветов, в тщательности цветовой нюансировки. Вот почему так важно уделять особое внимание цветовому аспекту профессиональных композиций, анализируя сильные и слабые стороны цветового решения встречающихся вам Web-страниц.
По материалам книги «Веб-дизайн: руководство Дмитрия Кирсанова», выходящей осенью этого года в издательстве «Слово». Адрес автора в Internet: www.kirsanov.com
