Форма.

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

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

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

— либо умножением мелких черт (рис. 9), либо переходом в расплывчатость и аморфность.

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

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

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

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

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

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

    

на плоскости) и даже текстуру поверхности (как обращенной к зрителю, так и контурной).

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

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

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

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

Все визуальные аспекты соединительных линий выдают их техногенное происхождение. Прежде всего, в подавляющем

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

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

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

 — например, для линий выносок, которые чаще всего наклонны (пример 8) или для линии отбрасываемой тени.

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

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

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

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

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

 

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

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

Для тех случаев, когда прямоугольник полноправно участ­вует в композиции, нужно особо рассмотреть вопрос о его контуре («рамке»). В большинстве случаев прямоугольник отличается от своего окружения цветом заливки; при этом цветовой переход на его границах обладает достаточной си­лой выделения и не требует дополнительного подчеркивания какими-либо линиями. Если снабдить такой прямоугольник тонким контуром, это будет восприниматься едва ли не как тавтология: зритель подсознательно чувствует, что что-то — либо контраст цветов, либо линия контура — здесь лишнее. (По этой же причине никогда нельзя оставлять тонкий контур у букв текста.)

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

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

Круги и закругления.  Во многих древних культурах круг считался 

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

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

Возражения вызывает также активная симметрия окружно­сти (из всех фигур она явный чемпион по выраженности

 

 

 

 

 

     

этого свойства: у окружности бесконечно много осей симме­трии). В античности и средневековье симметрии придава­лось необычайно важное значение, однако в современном дизайне она уступила свою роль гармонизирующего начала более общему понятию баланса; «классиче­ская» симметрия теперь воспринимается скорее как нечто ограничивающее, стесняющее.

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

дизайн-композиции.

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

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

Следующий шаг — интеграция дуг с другими формами, в первую очередь с «главной компьютерной формой», прямоугольником. Так возникают прямоугольники с за­круглениями вместо углов — еще один весьма популяр­ный графический мотив в современном дизайне. В нем счастливо сочетаются, дополняя и уравновешивая друг друга, округлость круга и прямоугольность прямоуголь­ника; круг в нем обнаруживает все-таки присущее ему горизонтально-вертикальное начало, а прямоугольник из­бавляется от назойливой угловатости, цепляющей взгляд (рис. 14). Правда, прием этот достаточно требовате­лен — стоит ввести в композицию один закругленный прямоугольник, как он почти наверняка потребует округления всех остальных углов, что заметно изменит об­щий стиль композиции. Хороший пример целостного корпоративного стиля, основанного на закруг­лениях по дугам окружностей, можно найти на сайте www.macromedia.com.

 

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

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

 

 

 

 

 

Бесформенность.  Любые формы, не состоящие из прямых или из кривых с постоянной или подчиняющейся простому закону кривизной, человеческому восприятию представля­ются зыбкими, бесформенными, облакообразными сгустка­ми. Дизайнеры пользуются этим, объединяя «бесформенные формы» со всевозможными мягкими, расплывчатыми, пре­имущественно фотографическими текстурами. Таким образом, последовательно усложняя простейшие гео­метрические фигуры (см. рис. 9), мы попадаем в область, где форма и текстура плавно переходят друг в дру­га. Впрочем, ничего удивительного в этом нет: вспомним, что понятие текстуры применимо не только к поверхности фигуры, которая обращена к зрителю, но и к ее контуру — то есть к тому в фигуре, что обычно определяется ее формой .

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

Бесформенность бывает не только расплывчатой и облако- образной, но и рваной, ломаной и даже узорчатой, повто­ряющейся (рис. 16). Иными словами, разнообразие типов бесформенности сравнимо с разнообразием типов текстур. Нарисовать

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

 

 

 

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

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

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

 

 

Цвет.

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

 

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

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

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

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

Конечно, на цвет нельзя возлагать функцию основного носителя информации

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

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

Как устроен цвет.  О том, как цвет представлен в компьютере, и

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

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

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

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

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

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

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

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

— устанавлива­ется расположенной рядом вертикальной шкалой с движком (рис. 19 на цветной вкладке, а).

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

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

Прогулка по цветовому кругу.  Давайте теперь вооружимся компьютерной

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

— и будем двигаться против часовой стрелки.

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

Так, явно повышенной самостоятельностью на цветовом круге обладают три основных «компьютерных» цвета — красный, зеленый и синий, а также цвета, расположенные точно посередине между ними, — фиолетовый, желтый и го­лубой. На реальном солнечном спектре этот эффект был бы менее очевидным, но все же заметным, — он объясняется устройством цветовых рецепторов нашего глаза, который разлагает цвет почти на те же составляющие, из которых компьютер его синтезирует (так что изобретатели систем RGB и CMYK не случайно выбрали именно эти цвета в качестве основных). Кроме того, хотя яркость в системе HSV регулируется отдельным параметром, основные тона цветового круга явно обладают различной «врожденной» яр­костью; например, желтый явно светлее синего, а голубой — красного.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

вызванными взаимовлиянием элементов. В полной мере относится это и к цвету

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

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

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

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

любого непрофессионала, и этого же он ожидает и от любой композиции на экране компьютера или на бумаге.

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

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

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

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

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

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

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

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

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

 

      

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

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

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

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

Текст и фон.  Элементы, без которых не обходится ни одна веб-страница,

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

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

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

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

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

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

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

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

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

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

опознавания ссылки обязаны иметь более заметный цвет, чем основной текст, хотя достичь этой заметности мож­но разными способами

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

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

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

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

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

На втором месте по популярности после чисто черного фона стоят насыщенные холодные цвета — такие как, например, бархатно-синий фон сайта www.verso.com.

Для текста, наоборот, популярны оттенки теплых цветов, в особенности желтого, призванного сим­волизировать золото. Необычный цветовой колорит сайта www.bdaweb.com  объясняется полным от­казом от цвета как такового

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

 

 

Текстуры.

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

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

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

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

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

Плоский цвет

 

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

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

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

— кажется чужой.

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

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

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

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

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

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

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

Фотографические текстуры.  Если геометрической строгости

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

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

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

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

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

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

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

           

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

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

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

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

который может конфликтовать с текстурой фона. В то же время

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

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

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

 

 

Шрифт и текст.

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

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

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

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

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

веб-дизайне).

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

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

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

Элементы шрифта.  Сложность предмета этого раздела заставляет

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

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

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

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

Основную массу шрифтов можно разделить на две большие группы: шрифты с засечками (англ. serifs) и без засечек, или рубленые (англ. sans serifs; более подробно об  исторической

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

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

Виды начертаний. Из начертаний внутри одной гар­нитуры чаще всего используются прямое (англ. rотап) и курсивное (italic). Последнее призвано имитировать на­клоненный вправо, более округлый и беглый рукописный почерк, сохраняющий тем не менее графические особен­ности прямого начертания и хорошо сочетающийся с ним. Курсивная разновидность есть у всех текстовых шрифтов с засечками и у большинства рубленых шрифтов, хотя для последних создать близкий по стилю курсивный вариант значительно труднее, и некоторые из рубленых и моно­ширинных шрифтов употребляют вместо курсива просто слегка перекошенное вправо (англ. oblique) основное начер­тание (рис. 27). Большинство декоративных шрифтов не имеют курсива вообще.

Вторая важная ось, по которой варьируется начертание шрифта, — это насыщенность (англ. weight), определяе­мая толщиной штрихов и соотношением площади белого и черного в рисунке букв. Первую ступень увеличения насыщенности иногда называют «bold face» по-английски и «жирный шрифт» по-русски, хотя правильнее называть   это  начертание полужирным (demi-bold). Этот параметр, в отличие от курсива, наоборот, удобнее менять у рубле­ных шрифтов, — многие из которых, помимо обычного и полужирного, имеют также светлое (light), жирное и даже

 

 

 

сверхжирное (extra bold) начертания (рис. 28). Шриф­ты с засечками, как правило, ограничиваются обычным и полужирным начертаниями. Декоративные шрифты редко имеют вариации насыщенности.

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

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

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

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

 

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

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

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

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

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

веб-дизайне). Знание истории шрифта — первейшее условие профессиональной работы с ним.

Классическая антиква. Из употребимых сейчас Шрифтов самые старые — и в то же время, пожалуй, самые Молодо выглядящие — это гарнитуры гуманистической, или

                                               

классической, антиквы (по-английски их обычно называ­ют Old Style\ примеры

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

Многие графические особенности классической антиквы, сохранявшиеся и видоизменившиеся в исторически более поздних шрифтах, — засечки, утолщение вертикальных штрихов по сравнению с горизонтальными — впервые воз­никли как подражание рукописным буквам, выводимым пером с плоским концом. В эту эпоху заимствования из рукописной графики еще не были «переосмыслены» или «обобщены», а оставались довольно близкой к оригиналу имитацией. Этим объясняется сложность, явственная «рукописность» форм, общая легкость и элегантность рисунка, свойственная как оригинальным шрифтам XV—XVII ве­ков, так и их современным копиям (рис. 29). Особенно характерны для гуманистической антиквы сравнительно длинные засечки, иногда асимметричные и закругленные на концах, «ямки» на торцах основных штрихов, смещение наплывов на округлых частях букв из-за «наклона пера» (рис. 30).

Принято различать ранний и поздний периоды развития классической ан­тиквы. В ранних образцах этого стиля контраст толщин штрихов ниже, а общий очерк букв небрежнее и ближе к рукописным оригиналам. Со временем формы букв становятся строже, засечки укорачиваются, контраст повышается, исчезает несимметричное расположение наплывов. Заглавные буквы становятся уже, теряют с во «античные» квадратные пропорции. Особенно заметны изменения у курсивных шрифтов (которые в ту эпоху еще не составляли пару прямому начертанию, как сейчас, а были само­стоятельными шрифтами). Ранние гуманистические курсивы отличаются небольшим наклоном букв и обшей открытостью форм (по мотивам этих шрифтов в XX веке создан шрифт Zapf Chancery). Со временем формы курсива становятся вычурнее, закрыта: и уже, а наклон букв повышается; для некоторых из них характерный наклон у строчных и прописных курсивных букв (например, в Monotype Garamond Italic).

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

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

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

Переходные шрифты.  В XVIII веке — сначала в Ан­глии, затем и по всей Европе — формы букв становят­ся строже, прямолинейнее, стандартизованнее (отчасти это объясняется развитием техники книгопечатания), а контраст между толщиной вертикальных и горизонтальных штрихов увеличивается. Этот период, продолжающий тенденции раз­вития поздней классической антиквы, принято называть «переходным», и в нем лежат истоки таких широко употре­бляемых сейчас шрифтов, как Тайме и Баскервилль, — их объединяют названием переходная антиква по-русски или transitional typefaces по-английски).

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

Новая антиква.  В конце XVIII века появился новый тип Шрифтов, который сразу же завоевал широкое признание

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

— определенно сухой, вычурный, нарочитый (рис. 32).

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

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

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

                                                           

Самые известные шрифты этого типа — гарнитуры Школь­ная (рис. 33), Академическая, Bookman.

Новые рубленые.  Однако настоящая революция в шрифтовом искусстве произошла только в первой поло­вине XX века. В конце 20-х годов в Германии под влиянием футуризма, конструктивизма и других новомодных течений разрабатываются принципиально новые, подчеркнуто упро­шенные и геометризованные рубленые шрифты. Создатели этого нового стиля руководствовались возведенным в прин­цип утилитаризмом, последовательным отказом от любых не несущих практической нагрузки «украшений» (самый известный пример — шрифт Футура, появившийся в 1928 г., рис. 34).

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

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

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

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

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

Более содержательная часть шрифтовой истории XX века пришлась на рубленые шрифты. Громко заявив о себе в 20-е годы крайне дегуманизированными конструктивист­скими образцами, рубленые шрифты не избежали общего стремления к смягчению и «очеловечиванию». Футуре так и не удалось стать рубленым шрифтом «на все случаи жизни»; вместо нее эту вакансию занял созданный в 1957 г., более традиционный и значительно менее геометризован­ный шрифт Гельветика (он же Arial), который по своей нейтральности, прозрачности для восприятия уместно срав­нить с переходной антиквой.

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

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

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

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

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

Подбор шрифтов.  Разобравшись с типографской терминологией и Рассмотрев основные типы шрифтов в исторической перспективе, самое время познакомиться с принципами подбо­ра и сочетания шрифтов в дизайне. Так же как при поиске

цветового решения, главная роль при этом при­надлежит началам единства и контраста.

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

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

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

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

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

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

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

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

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

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

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

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

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

С другой стороны, далеко не всякий рубленый шрифт хорошо сочетается с любым шрифтом с засечками. Кро­ме вашего собственного опыта и художественного чутья, пожалуй, путеводной нитью может служить только знание истории и родословной шрифтов. Так, трудно выдумать что-то более уродливое, чем сочетание вычурной, внутренне несвободной новой антиквы (гарнитуры Бодони, например) с тоже несколько нарочитой, но совсем в ином вкусе конструктивистской Футурой или Авангардом. В то же время нейтральная, достаточно традиционная Гельветика прекрасно сочетается с уравновешенной, классических пропорций переходной антиквой — не зря гарнитуры Таймс и Ариал были выбраны в качестве двух основных шрифтов в операционной системе Windows.

Прекрасно чувствуют себя вместе пары гуманистических шрифтов (например, Гарамон и Фрисет, положенные в основу дизайна московского журнала «Internet»), тогда ; как сочетание шрифтов Мета и Бодони в логотипе сайта www.alphaworks.ibm.com производит не лучшее впеча­тление именно из-за конфликта «уровня гуманизации» этих шрифтов (рис. 36).

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

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

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

Шрифты и названия. Согласно законам США, авторское право может защищать конкретный шрифт (font) в векторном формате, приравниваемый по статусу к компьютерной программе. Однако эта защита не распростра­няется на то начертание (typeface) букв, которое используется в шрифте. Это значит, что характерные графические особенности, скажем, шрифтов Тайме или Бодони (так же как, собственно говоря, и форма букв алфави­та) не принадлежат никому. Любой желающий может перерисовать буквы какого-нибудь известного шрифта, записать их в шрифтовой файл и про­давать под любым именем.

В результате на рынке появляется множество шрифтов почти одинаковых по виду, но различающихся названиями. Солидные фирмы обычно огра­ничиваются приписыванием к «родовому» имени своего названия — так, существуют шрифты ITC Garamond, Adobe Garamond и Monotype Garamond (которые, кстати, различаются довольно сильно, потому что фирмы эти не копировали буквы друг у друга, а самостоятельно рисовали их по образцам французского типографа XVI века Клода Гарамона). Другие фирмы неред­ко выдумывают для своих шрифтов имена новые, но все же чем-то схожие с оригинальными — так возникают Opus вместо Optima, Freeset вместо Frutiger и даже Borjomi вместо Bodoni.

Параметры набора.  Итак, шрифты для композиции выбраны.

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

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

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

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

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

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

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

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

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

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

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

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

Заглавные Первые Буквы Значимых Слов (англ. Initial Caps) заставляют англоязычный заголовок звучать газетно, рекламно, самоуверенно, а в последнее время этот стиль

 

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

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

С другой стороны, частое применение стиля «все строчные» делает его все более привычным и нейтральным для восприятия. Некоторая отстраненность в его звучании определенно остается, так что не стоит пользоваться этим стилем для строгих деловых страниц, — однако во многих других случаях он вполне уместен.

Интервалы. Огромное влияние на восприятие текста оказывают интервалы набора

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

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

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

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

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

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

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

заглушённая удовлетворением от аккуратной подгонки и ко­ординации частей (рис. 39).

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

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

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

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

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

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

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

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

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

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

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

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

Размещение. Строки текста могут располагаться не только по горизонтали, но и вертикально (обычно «сни­зу вверх», то есть так, чтобы их можно было прочесть, склонив голову на левое плечо). Этот прием относительно нейтрален и может без особых ограничений использоваться в тех случаях, когда для горизонтальной строки нет ме­ста, но с одним условием: расположенный по вертикали текст не должен быть единичным (и потому создающим впечатление торопливости и неопрятности) исключением, а полноправным мотивом композиции, поддержанным мак­симальным количеством других элементов. Значительно Реже встречается «вывесочное» размещение заголовочного текста, при котором буквы выстраиваются сверху вниз, но без поворота на 90 градусов; такое расположение сильно за­трудняет чтение и потому может использоваться как весьма сильнодействующий прием текстового выделения (пример­но эквивалентный очень сильной разрядке).

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

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

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

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

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

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

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

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

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

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

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

в двух соседних абзацах при сохранении шрифта и всех остальных параметров недопустимы.

 

 

 

Единство.

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

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

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

— красоту простоты и одинаковости, можно позволить себе Разнообразие и «поэтические вольности».

Таким образом, важнее всего этот принцип именно для начинающих дизайнеров

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

Content is king. Хорошо, скажете вы, но если ничего нельзя, то что же тогда можно? Чем пользоваться для оформления заголовков, иллюстраций, кнопок навигации? Нельзя же просто взять и покидать весь материал на страницу, не задумываясь о красоте?

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

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

Академический стиль. Подход, при котором оформ­ление документа полностью определяется его структурой, совсем не оригинален. Точнее, он именно оригинален в смы­сле английского «original» — ведь именно структура доку­мента, а не его внешний вид, и является объектом разметки в HTML согласно официальной идеологии этого языка, положенной в основу самой первой его вер­сии. HTML предназначен именно для разметки логической, а не визуальной структуры; внешний же вид докумен­та в браузере есть лишь побочный эффект логической разметки.

Правда, достаточно строго этот принцип соблюдался только в первые годы жизни языка. Впоследствии в HTML было введено множество визуально-ориентированных средств, не имеющих никакого структурного значения и употребляемых исключительно для управления внешним видом документа в графической среде (тег FONT — самый известный при­мер). Граница между «логической» и «визуальной» эпохами в истории HTML проходит приблизительно между версиями HTML 2.0 и 3.2 . В последней на момент написания книги версии 4.0 выде­лено самодостаточное подмножество структурных тегов (так называемый Strict DTD.

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

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

Разумеется, если вы намерены всерьез заниматься дизайном, академический стиль может стать только самой первой ступенью на лестнице, ведущей к совершенству,

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

Посмотрите, сколько важных достоинств у академического стиля:

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

·         HTML 2.0 меньше всего зависит от свойств какого-либо конкретного броузера, наличия в системе определен­ных шрифтов, способности компьютера воспроизводить цвета и тому подобных условий, — на которые не слиш­ком разумно полагаться, если вы хотите донести свою информацию до максимально широкой аудитории.

·         «Академические» страницы находятся в наилучшем со­гласии с духом и буквой официальной спецификации языка HTML. Это позволит вам, не краснея, иметь дело с весьма многочисленной и влиятельной прослой­кой HTML-пуристов, а самое главное — обеспечит легкую и безболезненную стыковку с други­ми технологиями, поддерживаемыми Консорциумом W3 (CSS, XML).

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

Зайдем, к примеру, на сайт норвежского программиста Эрика Наггума (www.naggum.no). Забудем на минуту, что автор не ставил перед собой абсолютно никаких эсте­тических задач (его приверженность HTML 2.0 объясняется причинами скорее идеологическими), и попробуем посмо­треть на этот сайт именно как на образец дизайна. Мы видим единый, логичный, очень строго выдержанный стиль, в котором положение и оформление каждого элемента легко предсказуемы. Ничто не раздражает, не «цепляет взгляд», информация подается опрятными небольшими порциями, текст звучит негромко и выразительно. Право же, страницы  этого сайта производят впечатление чистоты и свежести на человека со вкусом, привыкшего к «среднему уровню» современного веб-дизайна.

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

пестро-попугайскими линейками и кошмарными анимированными иконками.

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

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

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

     крайней мере, отчетливо различным. Едва заметные, нюанс­ные отклонения от идентичности допустимы только в том случае, если их цель — как  раз-таки создать впечатление полной одинаковости, нейтрализовав действие тех или иных иллюзий восприятия.

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

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

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

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

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

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

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

 

 

Баланс.

Единство и баланс — два главных свойства, отличающих

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

С веками понятие баланса становилось все расплывчатее и неопределеннее; все меньше оставалось в нем чистой гео­метрической симметрии и все больше

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

Центр масс системы. Что же это за законы? Прежде всего, давайте вспомним понятие плотности размещения материала, введенное в разделе о пространственных отношениях. Вспомнив физическое определение плотности как массы, деленной на объем, мы увидим, что о плотности можно говорить в нескольких разных  смыслах

— в зависимости от того, чему мы приписываем свойство иметь «массу».

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

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

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

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

Правило рычага. Эта стройная теория осложняется множеством факторов. Прежде всего, центр равновесия редко кажется расположенным посередине между двумя объектами — обычно он смещен в сторону того, который кажется нам тяжелее и компактнее (т.е. плотнее). Наиболее Динамично и интересно выглядят именно те композиции, в которых баланс достигается не симметричными и равными по плотности группами объектов, а равновесием тяжелого «ядра» и асимметрично расположенной, менее плотной «периферии» . Взгляните, к примеру, на рис. 15:

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

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

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

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

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

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

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

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