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

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

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

ИСКУССТВО ИСКАЖЕНИЙ

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

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

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

По своей популярности в современном дизайне растровые эффекты уступят разве что трехмерной графике, — но, в отличие от нее, без эффектов не обходятся не только любители, но и профессионалы. Если не по тиражам, то уж во всяком случае по разнообразию продуктов индустрия растровых эффектов — определенно самый быстрорастущий сегмент рынка графических программ. Оформленные, как правило, в виде подключаемых модулей для Adobe Photoshop и других программ, поддерживающих соответствующий интерфейс, фильтры эти россыпью и в наборах (вроде Kai's Power Tools или Alien Skin Black Box) необычайно популярны у дизайнеров–любителей, по работам которых обычно нетрудно определить, какие фильтры и в каком порядке применялись к исходному изображению.

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

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

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

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

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

● полная десатурация, приведение цветного изображения к серой шкале;

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

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

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

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