Веб-дизайн - Дмитрий Кирсанов

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

Цвет

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

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

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

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

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

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

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

Как устроен цвет

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

Из всех систем представления цвета, о которых я упоминал на стр.63, лишь одна представляет цвет в естественном, согласующемся с человеческим восприятием виде — это система HSV (тон–насыщенность — яркость). Разумеется, понятие «естественности» само по себе субъективно, и, потренировавшись, вы без особого труда научитесь видеть в любом цвете, к примеру, его красную, зеленую и синюю составляющие. Однако преимущество системы HSV бесспорно — она не только почти не требует привыкания, но и предоставляет прекрасную теоретическую базу, помогающую понять многие неочевидные закономерности цветовой вселенной. Иными словами, профессионал почти всегда думает о цвете в терминах HSV.

В системе HSV цвет разлагается на три составляющих:

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

Рис. 19

• Насыщенность (saturation) — соотношение основного тона и равного ему по яркости бесцветного серого. Максимально насыщенный цвет не содержит серого вообще, а при нулевой насыщенности, наоборот, полностью отсутствует основной тон (т. е. если при насыщенности, равной нулю, варьировать тон, результат будет оставаться одним и тем же — серым цветом).

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

Если попытаться соотнести параметры системы HSV с разложением цвета по системе RGB (стр. в 2), то их можно представить себе так: то» определяет общую конфигурацию движков на красной, зеленой и синен шкалах, варьирование насыщенности изменяет относительное расстояние между движками при сохранении их взаимного расположения, а изменение яркости сдвигает вверх или вниз все движки одновременно.

Большинство графических программ позволяют работать с цветом в том числе и в системе HSV. В программах Macromedia Freehand и CorelDraw, к примеру, палитра выбора цвета представляет собой цветовой круг с курсором, движение которого по дуге изменяет тон, а по радиусу — насыщенность. Третий параметр — яркость — устанавливается расположенной рядом вертикальной шкалой с движком (рис. 19 на цветной вкладке, а).

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

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

Прогулки по цветовому кругу

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