Рисунок, живопись, композиция

Дизайн

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

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

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

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

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

К слову, в операционной системе MacOS X элементы интерфей­сов отрисованы так, что свет падает сверху. Например, это проявляется в

92

Рисунок, живопись, композиция

2.6

Том, что тень от окон падает вниз и видна по бокам. Кнопки там также не такие: они «гелевые», не отбрасывают тени, а имеют специфическое ос­вещение. В интерфейсе Windows Vista тени также падают не под углом.

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

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

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

Свет, помимо высветления объектов или ярких пятен на них, дает еще два эффекта, видных человеку: тень и рефлекс.

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

Дизайн

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

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

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

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

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

94

Рисунок, живопись, композиция

2.6

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

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

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

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

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

Дизайн

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

Все это — признаки передачи трехмерного изображения.

Принято различать трехмерность и псевдотрехмерность. Трехмер­ность — это фактически реалистичное изображение объекта, поверну­того к наблюдателю не фронтально и не точно боком, а, допустим, в три четверти или как-то иначе. В любом случае, видно становится как ми­нимум две, а чаще три стороны объекта. А если объект сложной формы (автомобиль, дерево), то становится видно его детали, расположенные сзади (задние колеса, задние ветки и птица, сидящая в глубине ветвей). Программы моделирования трехмерной графики (3D Studio Max, 3D Canvas, Bryce и другие) позволяют «вращать» на экране объекты, при­ближать их и отдалять, двигать в разных направлениях и по-разному освещать. На веб-страницах это встречается достаточно редко, и ими­тация трехмерности производится средствами двухмерной графики (неважно, в чем подготовлено изображение, но результат сохраняется в форматах двухмерной графики, например, в JPG).

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

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

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

96

Дизайн

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

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

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

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

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

98

Дизайн

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

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

Но есть и другие «привычные размеры». Среди них — правило зо­лотого сечения.

Правило заключается в том, что размер большего элемента так относится к размеру меньшего, как размер целого (сочетания этих двух элементов) относится к размеру большего. В числах это выражается как 5:(3:2) или 8:(5:3). Например, общая ширина блока — 500 пиксе­лей. В этом случае красиво для человеческого глаза будет такое деление колонок, когда ширина первой будет составлять около 300 пикселей, а второй — около 200 (или наоборот). Однако такое правило применя­ется не всегда и не всем оно кажется оптимальным. Скрытый смысл та­кого правила таков: оно создает динамику с равномерным ускорением или замедлением.

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

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

100