Текстурирующие эффекты

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

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

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

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

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

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

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

Противоположный эффект дают фильтры, сводящие фо­тографические текстуры к плоским. Одни из них (филь­тры Cutout, Fresco) аппроксимируют исходное изображение областями плоского цвета (похожий эффект дает сохра­нение картинки в формате GIF с малым количеством цветов без диффузии), другие пытаются найти в изображе­нии и сделать видимыми контуры, т. е. достаточно резкие границы между объектами (фильтры Find Edges, Trace Contour). Дизайнерская ценность этого рода преобразова­ний заключается именно в контрасте очевидно фотогра­фического происхождения изображений с их абстрактным, почти геометрическим представлением. По этой же причи­не интересно бывает поэкспериментировать с трассировкой фотографий в векторном редакторе (стр. 100).

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

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

При­ме­ры

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

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

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

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

Www.kirsanov.com

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

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

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

Логотип

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

этом сайте). Дело в том, что, как и многие другие, сайт этот почти целиком вырос, как из зародыша, из своего логотипа.

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

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

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

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

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

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

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

За основу я взял шрифт Monotype Garamond Italic — один из лучших образцов поздней классической антиквы. Буква «d» из этого шрифта не потребовала почти никаких изме­нений; я лишь увеличил ее наклон и немного растянул по горизонтали. Кроме того, я удлинил и изменил форму ее за­сечек, чтобы лучше приспособить ее к эффекту «сплетенных букв».

(а)

(б)

DMITRY KIRSANOV STUDIO

Рис. 77Генезис логотипа

www.kirsanov.com

Рис. 78(см. цветную вкладку, стр. 335)

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

Цветовая схема

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

Входные цвета

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

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

веб-дизайне категорическим императивом, при прочих рав­ных все же дает определенные преимущества. После ряда проб я остановился на паре, состоящей из яркого желтовато-зеленого (#99ссЗЗ) для «k» и темного насыщенного зеленого (#003300) для «d» (см. стр. 33S).

Нетренированному взгляду, возможно, трудно будет заме­тить, что цвета эти различаются по тоновому компоненту. Поскольку в темных цветах компонент тона менее очевиден для глаза, для темного цвета я выбрал «более зеленый» тон (у этого цвета H = 120, ровно в середине зеленой области спектра). Для яркого же цвета можно было поискать менее очевидный тон, находящийся примерно посередине между зеленым и желтым (Н = 80). Интересно также отметить, что темный цвет имеет максимальную насыщенность (S = 255), тогда как ярко-зеленый, хотя и кажется необычайно «цвет­ным», на самом деле далек от полной насыщенности (S = 191).

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

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

Рис. 79(см. цветную вкладку, стр. 335)

мотивов (как вы помните, градиенты вводят принципиально новый тип текстур, стр. 120).

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

Не нашли, что искали? Воспользуйтесь поиском: