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

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

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

С меньшим успехом цветовые эффекты применены на сайте www.vivid.com (пример 20).

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

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

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

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

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

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

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

рис. 76 «Большой, но за пять или маленький, но за три»

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

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

Другой источник оптической размытости — быстро движущиеся объекты, представляющиеся человеческому глазу (и объективу фотоаппарата) размытыми вдоль направления движения. Соответственно, фильтры направленной размывки, такие как Motion Blur и Wind в Photoshop, часто применяются для придания динамики статическим объектам и для подчеркивания движения того, что само по себе уже движется (например, элементов анимированных рекламных баннеров). Так, в примере 16 горизонтальное строение страницы подчеркивается горизонтальной же размывкой заголовка «IDEO» вверху, — подразумеваемое движение которого превращается в реальное в момент прокрутки страницы (см. также стр.168).

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

Эффекту размывки родственны разнообразные искажения, отражающие изображение в кривом зеркале или волнующейся поверхности воды (в Photoshop к этой категории относятся Ripple, Smear, Spherize, Pinch и др.). Иногда эти виды искажений применяются для создания трехмерных эффектов (например, развевающегося флага), а некоторые из них подразумевают и определенную размывку частей изображения. Чаще всего, однако, эти фильтры дают откровенно юмористический эффект в применении к легко узнаваемым объектам (например, к человеческому лицу) и не дают вообще никакого осмысленного эффекта в остальных случаях (если закрутить спиралью и без того бесформенное облако, ничего особенно интересного не получится).