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

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

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

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

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

ПРИМЕРЫ

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

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

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

www.kirsanov.com

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

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

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

ЛОГОТИП

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

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

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

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

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

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

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

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