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

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

11?

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

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

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

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

Плоский цвет

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

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

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

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

Геометрические текстуры

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

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

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

119

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

Пиксельные текстуры

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

Фотографические текстуры

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

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

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

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

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

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

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

Материальные текстуры

Пора, пожалуй, сказать несколько

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

121

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

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

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

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

122

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

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