Веб-дизайн

Цвет


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

102

Рис. 18

Стиль этой ве­щи — небрежность рисунка, помноженная на «натурали­стическую» аморфность мазков

композиции — при том что остальные ее аспекты будут самыми что ни на есть ординарными.

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

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

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

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

103

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




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

Так, весьма популярен в последнее время прием противо­поставления по цвету двух половин заголовка или текста логотипа (см., например, логотип журнала «Internet» на рис. 36, а). Где бы ни проходила цветовая граница — вну­три слова или между словами, — прием этот вносит сильную ноту «диалектичноети», разделения и противопоставления частей дотоле однородного элемента. Искусственная эта диалектика весьма сильно влияет на восприятие текста; если, скажем, двуцветные заголовки приняты в качестве стандарта оформления в журнале, найти какой-нибудь ва­риант раскраски можно будет всегда, но во многих случаях он будет скорее мешать, чем помогать чтению текста заголовка.

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

148

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




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

155




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




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




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

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

224

цветов в тот момент, когда фон внезапно подстилается под уже видимые элементы переднего плана.

Цвета, указываемые в атрибуте color тега FONT, перекры­вают как цвет из атрибута text тега BODY, так и цветовые установки броузера. Можно даже менять цвет ссылок, вста­вив тег FONT с атрибутом color внутрь тега A. CSS, в свою очередь, позволяет менять не только цвет букв, но и фо­новый цвет любого элемента, в том числе и фоновый цвет отдельных символов и фрагментов текста. Если часть текста закрашена одним цветом, а часть другим (что обычно бы­вает, когда фон состоит из сильно различающихся по цвету областей — например, светлой центральной части и темной полосы вдоль границы экрана), фоновый цвет в теге BODY должен быть таким, чтобы на нем были легко различимы оба цвета текста.



Содержание раздела