Веб-дизайн

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

Техминимум. КОДИРОВКИ ТЕКСТА

| ASCII | Однобайтовые кодировки | Так и срослось | Семейство 8859 | Двухбайтовые кодировки | ISO 10646 и UTF-8 |

HTML

| История | В начале был SGML | Прикладная философия | Золотой век | HTML плюс | Идолы рынка | Бяки и буки | Те же и Microsoft | Три, четыре... | Синтаксис | Подстановки | Минимальный документ | Текстовая разметка | Ссылки и привязки | Формы | Изображения и объекты | Таблицы | Фреймы | Национальные особенности | Согласование кодировок | Среды и доступность | Доступность: таблицы | Как писать alt-тексты | Доступность: изображения-карты | Мета-данные и поиск | Мертвая зона | Сухой остаток |

CSS

| Принципы | Возможности | Модульный HTML | Режем по живому | Сборно-панельный сайт | Например |

XML

| Синтаксис | DTD | Уровни соответствия | Конверсия | Надстройки | XLL | XSL

ГРАФИКА

| Вектор | Вектор в Интернете | 3D | Растр | На все четыре стороны | Цвета | Палитры | Системы представления цвета |

ПРОГРАММИРОВАНИЕ

| JavaScript | Динамический HTML | Модульные технологии | Динамические страницы |

Основы дизайна. Как учиться дизайну (75) Дизайн и «чужое творчество» (76) Материалы и инструменты (77) ПРОСТРАНСТВЕННЫЕ ОТНОШЕНИЯ | Размер | Относительность размера | Форма и размер | Искусство выравнивания текста | Цвет и размер | Текстура и размер | Пропорции | Золото и пластмасса | Пропорций простота | Микропропорции | Размещение | Одноуровневые элементы | Разноуровневые элементы | Плотность | Пол и характер | Плотность текста | В нужное время и в нужном месте | ФОРМА

| Прямые | Дизайн Пизанской башни | Прямоугольники | Круги и закругления | Кривые Безье | Бесформенность |

ЦВЕТ

| Как устроен цвет | Прогулка по цветовому кругу | Ну и что? | Главные цвета | Восприятие цвета | Сочетаемость цветов | Текст и фон |

ТЕКСТУРЫ

| Плоский цвет | Геометрические текстуры | Пиксельные текстуры | Фотографические текстуры | Материальные текстуры |

ШРИФТ И ТЕКСТ

| Элементы шрифта | Гарнитура, начертание, шрифт | Systema naturae | Виды начертании | Шрифты и время | Классическая антиква | Переходные шрифты | Новая антиква | Кларендон | Новые рубленые | Маятник гуманизма | Подбор шрифтов | Единство противоположностей | Слишком декоративные шрифты | Развивая тему | Шрифты и названия | Параметры набора | Кегль | Прописные и строчные | Интервалы | Выравнивание и отступы | Размещение | Чья случайность лучше? | Цвет | Текст как текстура |

ЕДИНСТВО

| Content is king | Академический стиль | В полный рост |

БАЛАНС

| Центр масс системы | Правило рычага |

КОНТРАСТ

| Контраст — это продолжение единства другими средствами | Одномерный контраст | Многомерный контраст | Аспекты контраста | 1

ДИНАМИКА

| Динамика явная | Ветер по Гауссу | Динамика совсем явная | Динамика неявная |

НЬЮАНСИРОВКА

Дизайн веб-сайтов. ТИПЫ САЙТОВ

Преграды и препоны | От общего к частному | | Первый шаг | В мире .org | Скорей любите нас | Бесплатный сыр |

УСТРОЙСТВО САЙТА

| Неупорядоченный континуум | Топология сайта | Распределение материала | Фреймы и окна | Первая страница | Всплеск и вскрик |

ФОРМАТ СТРАНИЦЫ

| The frame of reference | За метки о полях | Во первых строках | У голубого экрана | Если тебе дадут линованную бумагу — пиши поперек | Ступеньки ригидности |

ЗАГЛАВИЯ И ЗАГОЛОВКИ | Заглавие | Заголовки: логика | Заголовки: дизайн | Разделители | Баннеры | НАВИГАЦИЯ

Общий обзор | Семантика | Дизайн | Разновидности одинаковости | По ту сторону кнопок | Символы и метафоры | Особые случаи | Динамическая навигация |

БЛОКИ ТЕКСТА

| Кегль | Шрифт | Коренные шрифты | Все шрифты ношу с собой | Осторожно: кириллица | Цвет | Ссылки | Другие параметры | When all else fails | Правила набора текстов | Расстановка пробелов | Неразрываемые пробелы | Текстовые выделения | Спецсимволы |

ПОЗИЦИОНИРОВАНИЕ | Таблицы и распорки | Дурная наследственность | Двойное дно | Белое место | Фэйсом об тэйбл | Позиционирование в CSS |

Веб-графика. ТЕХНИКА

| Палитра и диффузия | Цветовые границы | Экранный анти-алиасинг | Из-под пятницы суббота | Пиксельные эффекты | Оптимизация | JPEG | GIF | Взболтать и настоять | Чудное мгновенье | Blow up |

ФУНКЦИИ

| Выставочная графика | Фоны | Как не надо делать фон | Прогладить с изнанки | Одномерные фоны | Одним куском | Логотипы | Диалектика формы | На единицу площади | Про что картинка? | Символ и слово | Аспекты логотипа | Баннеры | Сколько натикало? | Форматы | В нужное время и в нужном месте | Слева при входе | Больше жизни | Пьеса в трех действиях | В начале было чтото | Собственная гордость | Удар ниже пояса | Смена поколений | На килограмм живого веса | Acknowledgements | Визуал | Рынок визуалов |

ПРИЕМЫ

| Трехмерность | Император иллюзий | Пластмассовый призрак | Скульптура или барельеф | Искусство искажений | Что упало, то пропало | Нетекстурируюшие эффекты | Текстурируюшие эффекты |

Примеры. www.kirsanov.com www.quiotix.com

| Логотип | Цветовая схема | Входные цвета | Информационные цвета | Первая страница | Карты на стол | Навигация | | Логотип | Первая страница | Внутренние страницы | Miscellanea |

ГАЛЕРЕЯ ИНДЕКС

2

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

Кодировки текста О тк аз авш ис ь от пр ет енд ующ е го на в сеох в а тн о с т ь из ложе ния «от т ео р и и к пр акт ик е » и «от просто го к с л о жно м у» , я ср аз у же по па л в о в л ас ть в стр е чны х т е че н ий , то и де ло от бр ас ыв авш их м ен я назад : «Об э то м пис ат ь нельзя , п о к а не о бъ я с не но то, а пер ед этим обязательно нужно р ас с к аз ат ь и о том ». Так, поставив на первое место в этой главе технологии разметки текста (HTML и XML), я был вынужден сделать еще шаг назад и начать со стандартов кодирования текста в компьютере. Причина не только в особой актуальности этой темы для пользователей, имеющих дело с кириллическим алфавитом; важно также, что она даст нам возможность обсудить некоторые общие принципы передачи и обработки информации в компьютере. В общем случае кодировка (encoding), или кодовая таблица, — это однозначное соответствие между подмножеством целых чисел (как правило, идущих подряд) и некоторым набором символов. Ключевым здесь является понятие символа. Символ может быть буквой (а может и не быть), может соответствовать звуку речи (а может и не соответствовать) и может быть представлен графическим знаком (но может обходиться и без какого бы то ни было видимого образа). Символ — это атом смысла, мельчайшая неделимая частица информации. Так, латинское «А» и кириллическое «А» - это разные символы, потому что они употребляются в разных контекстах и несут в себе разную информацию. Определяющим для любой кодировки является количество охватываемых ею кодов и, соответственно, символов. Поскольку тексты в компьютере хранятся в виде последовательности байтов, большинство кодировок естественным образом распадаются на однобайтовые, или восьмибитные, способные закодировать не больше 256 символов, и двухбайтовые, или шестнадцатибитные, чья емкость может достигать 65636 знакомест. ASCII Однако прежде чем переходить к восьмибитным кодировкам, нужно сказать несколько слов о кодировке под названием ASCII (American Standard Code for Information Interchange) — кодировке также восьмибитной, но охватывающей только 128 символов и потому довольствующейся семью значимыми битами (старший, восьмой бит при этом всегда равен нулю). Важность этой кодировки, включающей латинский алфавит, цифры и основные знаки пунктуации, необычайно велика: почти все остальные (большие по размеру) кодировки совместимы с ней, т. е. размещают на своих первых 128 знакоместах те же самые символы в том же порядке. Первые 32 позиции в кодировке ASCII заняты так называемыми управляющими символами {control characters), предназначенными не для передачи собственно текстовой информации, а для управления устройством, читающим (или получающим по линии связи) текстовый файл. Лишь немногие из этих символов — возврат каретки, перевод строки, табуляция — до сих пор используются в более-менее общепринятых значениях; остальные, давно уже вышедшие из употребления, в былые времена выполняли для «голого» ASCII-текста те же функции, которые сейчас возложены на разнообразные форматы данных и протоколы связи.

3

ОДНОБАЙТОВЫС КОДИРОВКИ Задействовав в кодировке ASCII старший бит, мы получаем дополнительные 128 знакомест, которых должно хватить для кодирования, например, кириллического алфавита или набора каких-нибудь специ-альных символов. К сожалению, восьмибитных кодировок на свете существует гораздо больше, чем наборов символов, которые они кодируют. Очень характерна в этой связи ситуация с русским языком — анархия компьютеризации в нашей стране, наложившаяся на всемирную анархию конкурирующих компьютерных платформ и операционных систем, привела к тому, что для кириллицы существует сразу несколько однобайтовых кодовых таблиц. Хронологически одним из первых стандартов кодирования русских букв на компьютерах был КОИ8 («Код обмена информацией, 8-битный»). Эта кодировка применялась еще в доисторические советские времена на компьютерах ЕС ЭВМ, и когда в середине 80-х появились первые русифицированные версии операционной системы UNIX, они унаследовали эту кодировку у своих «предков». Сеть Редком, открывшая в начале 90-х эпоху российского Интернета, в те годы состояла в основном из компьютеров с UNIX и потому также приняла кодировку КОИ8 в качестве стандартной. В результате КОИ8 является сейчас единственно допустимой кодировкой в русскоязычной электронной почте и телеконференциях Usenet и одной из кодировок, которые обязательно должна поддерживать любая русская веб-страница. Вторая по значению в русском Интернете (и, безусловно, первая по употребимости на персональных компьютерах) кодировка — это стандартная кириллическая кодировка Microsoft Windows, обозначаемая аббревиатурой СР1251 («СР» расшифровывается как «Code Page», «кодовая страница»). Все Windowsприложения, работающие с русским языком, обязаны понимать эту кодировку без перевода. Благодаря распространенности Windows кодировка СР1251, вместе с КОИ8, входит в абсолютный минимум кодировок, которые приходится поддерживать русскоязычным сайтам. Реликтом эпохи MS DOS остается так называемая «альтернативная» кодировка, в терминологии фирмы Microsoft — кодировка СР866. И хотя в Интернете компьютеры с MS DOS — большая редкость, кодировка эта сохраняет определенный авторитет благодаря тому, что она принята в качестве стандартной в операционной системе OS/2 и в некоммерческой сети Фидо. Поэтому изредка можно встретить сайты, предлагающие посетителям в качестве одного из вариантов и альтернативную кодировку MS DOS. Однако первой фирмой, выпустившей русифицированную операционную систему, была все-таки не Microsoft, a Apple. И разумеется, русифицированные Макинтоши, появившиеся в конце 80-х, имели свою собственную, ни с кем не совместимую кодировку кириллицы. Хотя в нашей стране компьютеры этой марки так и не приобрели популярности, сравнимой с их популярностью на Западе, в Сети можно встретить и кириллическую кодировку для Макинтошей. Так и срослось. Зачем, однако, вообще понадобилось создавать разные кодировки для одного и того же алфавита? Помимо соображений конкуренции, вообще способствующих появлению несовместимых решении, изобретателями кодировок в первую очередь двигал чисто практический расчет. Как правило, еще до того, как операционная система русифицируется, за символами из верхней половины таблицы ASCII (с кодами от 128 до 255) уже закреплено то или иное употребление, и чтобы разместить в этом же диапазоне кириллический алфавит, приходится чем-то жертвовать. Разумеется, наименее ценные кодовые позиции, замещение которых нанесет меньше всего ущерба функциональности системы, в каждом случае свои, и чаще всего необходимые для полного набора кириллицы 66 знакомест (включая букву «ё», которая традиционно выносится за пределы основного алфавита) не удается расположить подряд. Этим и объясняется тот факт, что ни в одной из кодировок, кроме ISO 88595 и Unicode, русские буквы не идут сплошным блоком. В некоторых кодировках допускаются даже отклонения от алфавитного порядка — в частности, в КОИ8 расположение русских букв определяется, как это ни смешно, алфавитом тех латинских букв, которые на клавиатурах советского производства располагались на одних клавишах с соответствующими буквами кириллицы: например, буква «Ю» стояла на одной клавише с символом «@», идущим в ASCII перед латинской «А», и потому стала в КОИ8 «первой буквой алфавита». Семейство 8859. Похожая ситуация с конкурирующими платформами и операционными системами и, как следствие, с конкурирующими несовместимыми кодировками наблюдается и в других языках, пользующихся своим собственным алфавитом или даже латинским алфавитом с расширениями. Международная организация по стандартизации (International Standards Organization, ISO) попыталась навести порядок в восьмибитных кодировках, создав серию кодировок ISO 8859, расширяющих таблицу ASCII для латинских букв с диакритикой и лигатур (кодировка ISO 8859-1), кириллицы (ISO 8859-5), арабского (ISO 8859-6), греческого (ISO 8859-7), иврита (ISO 8859-8) и других алфавитов. Если кодировка ISO 8859-5 для кириллицы так и не прижилась, первая из этой серии — кодировка ISO 8859-1, известная также под именем Latin-1, — сумела стать общепринятым стандартом для кодирования «расширенной» латиницы. В эту кодировку включены почти все символы, употребляющиеся в письменностях западноевропейских языков — французского, немецкого, испанского и т.д. По аналогии с ASCII первые 32 позиции во второй половине кодировок серии ISO 8859 (коды со 128 по 159 включительно) объявлены 4

«неиспользуемыми». На сей раз, однако, производители программ решили обойти этот запрет. Так, большинство шрифтов для Windows соответствуют кодировке ISO 8859-1 начиная с позиции 160 до конца таблицы, но в диапазоне 128—159 размещают некоторые дополнительные символы (в частности, длинное тире и символ «торговой марки», стр. 233). Поскольку HTML обязан соответствовать стандарту Latin-1 (а начиная с версии 4 — Unicode), числовые подстановки (стр. 29) не могут ссылаться на коды из этого диапазона. ДВУХБАЙТОВЫЕ КОДИРОВКИ. Языки с иероглифической письменностью (японский, китайский, корейский) пользуются смешанными кодировками, в которых иероглифы (а их в сотни раз больше, чем букв в алфавите) представлены двухбайтовыми кодами, а вставки на латинице кодируются по однобайтовой таблице (обычно совпадающей с Latin-1). Переключение между двухбайтовым и однобайтовым режимами производится специально зарезервированными управляющими символами. В 1991 году была предпринята попытка создать единую универсальную двухбайтовую кодировку, охватывающую все алфавиты и иероглифические системы мира. Результатом стал стандарт под названием Unicode, покрывающий не только системы письменности всех живых и большинства мертвых языков мира, но и множество музыкальных, математических, химических и прочих символов. Хотя массовое применение Unicode в документах и программах остается делом будущего, для веб-дизайнера эта кодировка имеет особое значение, так как именно она объявлена «стандартной кодировкой документа» в HTML начиная с версии 4 (стр. 32). ISO 10646 и UTF-8. Предвидя неизбежное рано или поздно исчерпание и двухбайтового кодового пространства (пока еще до этого далеко, так как около 30% кодов в Unicode до сих пор не заняты), ISO уже застолбила стандарт четырехбайтовой, совместимой с Unicode кодировки под названием ISO 10646. Пока что вместо этого обозначения, которое то и дело попадается в стандартах, вы можете с чистой совестью подставлять «Unicode», так как никаких новых символов, выходящих за границы совпадающих с Unicode первых 65536 знакомест, в ISO 10646 еще не определено. По-видимому, в ближайшее время все более важную роль будет играть особый формат Unicode (и ISO 10646) под названием UTF-8. Эта «производная» кодировка пользуется для записи символов цепочками байтов различной длины (от одного до шести), которые с помощью несложного алгоритма преобразуются в Unicode-коды, причем более употребительным символам соответствуют более короткие цепочки. Главное достоинство этого формата — совместимость с ASCII не только по значениям кодов, но и по количеству бит на символ, так как для кодирования любого из первых 128 символов в UTF-8 достаточно одного байта (хотя, например, для букв кириллицы нужно уже по два байта).

HTML Вместе с XML, ко торому пос вящ ен след ующий р а з д е л H T M L обычно пр ич исляю т к «я зы к ам р азм ет к и те к ст а ». На самом деле ро ль этих дв ух яз ыков, к а к и с а м о го формата под н а з в а н ием «просто т ек с т » ( «p la in tex t») , выходит д ал е ко з а р ам к и о бра бот к и т ек стово й информации . Текстовая часть любой веб-страницы теснейшим образом переплетена с управляющими конструкциями языка HTML, невидимыми сами по себе, но определяющими внешний вид и размещение всех остальных элементов страницы. Таким образом, в первую очередь HTML выполняет роль «скелета» страницы и сайта в целом — на HTML-разметку нанизываются текст, изображения, ссылки, интерактивные элементы и вообще все, что только может быть отображено в окне броузера. Лишь «по совместительству» HTML-файл содержит в себе еще и собственно текстовую часть страницы. ИСТОРИЯ Давайте для начала проследим короткую, но необычайно насыщенную историю HTML — языка, в котором столкнулись противоположные (и, в идеале, взаимодополняющие) подходы к проблеме представления информации в компьютере и который стал в последние годы ареной сотрудничества и противоборства основных действующих лиц «компьютерного театра». В начале был SGML. Начало истории HTML следует отнести к далекому 1969 году, когда Чарльз Гольдфарб, работавший тогда в компании IBM, создал прототип языка для разметки технической документации, впоследствии названного GML, а с приданием ему в 1986 году статуса международного стандарта — SGML (Standard Generalized Markup Language). Этот обобщенный метаязык предназначен для построения систем логической, структурной разметки любых разновидностей текстов. Слово «структурная» означает, что управляющие коды, вносимые в текст при такой разметке, не несут никакой информации о форматировании 5

документа, а лишь указывают границы и соподчинение его составных частей, т. е. задают его структуру. Создатели SGML стремились полностью абстрагироваться от проблем представления текста в разных программах, на разных компьютерных платформах и устройствах вывода. Хотя формально ничто не мешает записать средствами SGML любую информацию об элементах документа — в том числе и параметры его форматирования (например, шрифт Times полужирного начертания кегля 12 пунктов для заголовков), — идеология этого языка требует ограничиться указанием на уровень заголовка и его место в иерархической структуре документа. Все остальное должно быть вынесено в так называемые стилевые спецификации — совершенно отдельный и, как принято выражаться, ортогональный (т. е. допускающий независимое изменение) по отношению к структурной основе информационный «слой». Благодаря этим ограничениям размеченный текст сможет без труда интерпретировать любая программа, работающая с любым мыслимым устройством вывода. К примеру, при работе в графическом интерфейсе заголовок может действительно выводиться полужирным шрифтом повышенного кегля; программа, использующая текстовый интерфейс, выделит его пустой строкой сверху и снизу и, возможно, повышенной яркостью символов; синтезатор речи, читающий документ вслух, сможет отметить заголовок паузой и изменением интонации; наконец, «робот», собирающий базу, придаст тексту заголовка больший «вес» при контекстном поиске. Можно сказать, что SGML-разметка обнажает нематериальную «душу» текста, для которой впоследствии любая программа-интерпретатор сможет подобрать подходящее к случаю «тело». Сам по себе SGML есть не готовая система разметки текста, а лишь удобный метаязык, позволяющий строить такие системы для конкретных обстоятельств. Жизнь многообразна и непредсказуема: сегодня вам требуется выделять в текстах заголовки, а завтра, возможно, понадобится размечать подписи в письмах, математические формулы или имена действующих лиц в пьесе. Стандарт SGML устанавливает лишь синтаксис записи элементов разметки, а также правила определения новых элементов и указания структурных отношений между ними. Для практической же разметки документов нужно приложение SGML — набор определений элементов, представляющий собой, по сути, формальное описание структуры документа. Прикладная философия. Разделение «содержания» и «представления» как двух независимых аспектов информации — идея не особенно новая. Как и другие абстрактные противопоставления, до недавнего времени она оставалась чисто философской концепцией, не имевшей никакого выхода на практику. Вспомним, однако, что задолго до того, как философия смогла сделать свои первые шаги, способность к абстрактному мышлению и поаспектному анализу вещей и явлений должна была возникнуть и оформиться в языке. Лингвистам известно, что у языков, находящихся на начальных стадиях развития, зачастую отсутствует способность к разделению абстрактных аспектов явлений — такой язык может иметь самостоятельное слово для «падающего снега» при полном отсутствии слов для понятий «падать» и «снег» по отдельности. Очевидно, невозможность сказать что-то отражает и невозможность это помыслить. К чему я заговорил о языке? Дело в том, что история развития абстрактного мышления в целом — хороший аналог происходящему на наших глазах медленному и трудному процессу вычленения и очищения аспектов компьютерного представления информации. До сих пор подавляющее большинство текстов создаются и хранятся в «фирменных», ориентированных на визуальное представление форматах вроде MS Word, — которые, как языки первобытных племен, неспособны отделить «существительное» содержимого документа от «прилагательного» его представления в той или иной среде. Собственно говоря, в докомпьютерную эпоху практическая задача разделения аспектов документа вообще не могла стоять. Единственное «преобразование формата», возможное для бумажного документа, — это прочтение его вслух, и очевидно, что доступ к хранящейся отдельно структуре текста не очень-то помог бы в такой ситуации. Совсем другое дело — текст, хранящийся в компьютере, — компьютере, возможности которого уместно сравнить с мощью хорошо развитого человеческого языка. Как и язык, компьютер способен оформить, сохранить и сообщить вовне любую абстракцию, если только для этой абстракции разработана соответствующая нотация, т.е. синтаксис записи. Именно таким синтаксисом и является язык SGML. Теперь мы можем мыслить содержание и оформление как две не только потенциально, но и реально отдельные друг от друга сущности именно потому, что компьютер позволяет нам «высказать» их по отдельности. Важно отметить, однако, что SGML не есть инструмент для разделения содержания и представления, а всего лишь удобное средство хранения уже возогнанной и очищенной структурированной информации. Само же вычленение структуры — в любом случае задача человека: как и язык, компьютер не может мыслить сам, а лишь помогает мыслить человеку. Не менее важно и то, что в SGML нет никакой изначальной склонности к «содержанию» в ущерб «оформлению»; единственное требование к информации, сохраняемой средствами SGML, — это ее структурированность. В виде иерархической структуры вложенных друг в друга 6

элементов вполне можно представить не только содержимое документа, но и набор относящихся к нему правил и параметров оформления (как это и сделано в языке XSL, стр. 53). Собственно говоря, SGML-документ больше всего похож на базу данных с произвольной длиной поля и возможностью установления иерархических отношений между полями. Как и базе Данных, SGML-документу все равно, что хранить в себе, лишь бы данные соответствовали заранее заданной структуре, — смысл которой придан ей человеком и существует только для него. Как мы видим, компьютер — не только лучший из созданных до сих пор инструментов для записи идей, но и единственное изобретение человека, позволяющее реализовать на практике многие идеи, до сих пор казавшиеся чистой абстракцией. Золотой век. Принципы, на которых строится язык SGML, значительны и интересны; несомненно, идеология языка оказала влияние на многие компьютерные разработки. Однако сам по себе SGML не получил скольконибудь заметного распространения до тех пор, пока в 1991 г. сотрудники Европейского института физики частиц (CERN), занятые созданием системы передачи гипертекстовой информации через Интернет, не выбрали SGML в качестве основы для нового языка разметки гипертекстовых документов. Этот язык — самое известное из приложений SGML — был назван HTML (HyperText Markup Language, «язык разметки гипертекста»). Изначально HTML, как и положено SGML-приложению, разделял все особенности идеологии SGML. Из сорока с небольшим тегов HTML версии 1.2 (датированной июнем 1993 г.) всего три, да к тому же и не рекомендованных к использованию, тега осмеливались намекать на физические параметры представления документа. Вся разметка была чисто логической, и лишь в описательной части стандарта, сопровождающей формальное определение тегов, можно было прочесть что-нибудь вроде «в графических броузерах действие этого тега может передаваться курсивным начертанием». Первым же (и единственным в те далекие времена) графическим броузером была программа Mosaic, разработанная, как и сам WWW, в научном учреждении — Национальном центре суперкомпьютерных приложений США (NCSA). Так что нет ничего удивительного в том, что в этот «золотой век» никаких противоречий между официальными стандартами и их реализацией в броузерах еще не существовало. HTML неторопливо развивался, оставаясь в рамках парадигмы структурной разметки, и в апреле 1994 г. началась подготовка спецификации следующей версии языка — 2.0. Этим занимался образованный в том же году Консорциум W3 (W3 Consortium, сокращенно W3C), перенявший от CERN верховную власть и авторитет в мире WWW. В настоящий момент консорциум, имеющий статус «международного и некоммерческого», объединяет свыше 150 организаций-членов, в том числе фирмы Netscape, Microsoft и множество других. Однако в 1994—1995 гг. его членами были почти исключительно университеты и научные учреждения. Столь академический состав W3C сказывался как на самих документах, публикуемых консорциумом, так и на процедуре (и особенно на сроках) их принятия. Достаточно сказать, что спецификация HTML 2.0, единственным серьезным усовершенствованием в которой был механизм форм (стр. 30) для отсылки информации с компьютера пользователя на сервер, была окончательно утверждена лишь в сентябре 1995 г., когда в W3C уже полным ходом шло обсуждение HTML 3, — или, как его называли поначалу, «HTML+». HTML плюс. Пожалуй, проект HTML 3 — самая яркая и неоднозначная страница в истории языка. Работа над ним началась в марте 1995 г., и первоначальный вариант стандарта включал в себя много интересных нововведений — теги для создания таблиц, разметки математических формул, вставки обтекаемых текстом рисунков, примечаний и др. Но самое главное — HTML 3 был попыткой разрешить уже достаточно очевидное к тому времени противоречие между идеологией структурной разметки и потребностями пользователей, заинтересованных в первую очередь в гибких и богатых возможностях визуального представления. Противоречие это было разрешено опять-таки в полном соответствии с идеологией SGML: W3C ввел в HTML 3 поддержку так называемых иерархических стилевых спецификаций (CSS, стр. 40). Система CSS формально независима от HTML, имеет совершенно иной синтаксис, не наследует никаких идеологических ограничений и позволяет, уже в совершенно иных терминах, задавать параметры графического (так же как и текстового, звукового и какого угодно другого) представления для любого тега HTML. Нет сомнения, что CSS — почти идеальный способ избавить HTML от наследственных дефектов и перевести его развитие на принципиально новые рельсы. Тем досаднее то, как сложилась судьба этого замечательного изобретения. Поскольку спецификацию CSS увязали с другими нововведениями HTML 3, W3C долго не утверждал ее в качестве официального стандарта; задерживалось и доведение ее до более или менее завершенного вида, при котором стала бы возможной реализация CSS в коммерческих продуктах. Идолы рынка. А между тем коммерческое освоение WWW не заставило себя долго ждать. В начале 1994 г. группа разработчиков броузера Mosaic основала корпорацию Netscape Communications и вскоре выпустила первую версию коммерческого броузера Netscape (начиная с. версии 2.0 — Netscape Navigator, а с версии 4.0 — Netscape Communicator). С этого момента начался экспоненциальный рост WWW, продолжающийся по сей день. Чтобы закрепить лидерство (на которое, впрочем, тогда еще мало кто покушался) и привлечь новых пользователей, Netscape вводила в HTML все новые и новые усовершенствования, — поддерживаемые, разумеется, только броузером Netscape. Практически все новые теги, без устали изобретаемые Netscape, были направлены на улучшение внешнего вида документа и расширение возможностей его форматирования. Причины понятны: чтобы убедить, скажем, 7

бизнесмена, что ему пора обратить внимание на некую новую технологию» прежде всего нужно показать ему ее в привлекательном, «товарном» виде. Поставив себе целью завоевание корпоративного рынка, разработчики из Netscape не могли (да и не хотели, по-видимому) уделять должное внимание сложившимся традициям развития языка. В результате тот вариант HTML, который поддерживала выпущенная в начале 1996 г. версия Netscape Navigator 2.0, представлял собой довольно странную смесь старых логических тегов с беззастенчиво вломившимися новыми, ориентированными на графическое экранное представление документа и затрудняющими его воспроизведение на других устройствах вывода. Бяки и буки. Такая политика компании, с одной стороны, принесла ей быстрый и впечатляющий успех (одно время версии Netscape Navigator составляли более 90% всех используемых броузеров), а с другой — вызвала ожесточенное сопротивление наиболее сознательной части HTML-сообщества. Энтузиасты неустанно разъясняли и разъясняют каждому, кто согласен их слушать, что HTML по природе своей не имеет права зависеть от какого-то конкретного броузера и что заявления типа «эту страницу лучше всего смотреть в Netscape Navigator» являются просто насмешкой над здравым смыслом. Помимо использования «плохих» Netscape-ориентированных тегов, широко распространена также практика «злоупотребления» средствами HTML ради сопутствующих им визуальных эффектов. Скажем, вместо того чтобы использовать тег TABLE только для оформления «настоящих» таблиц, веб-дизайнеры сплошь и рядом применяют таблицы без рамок для построения графического «каркаса» страницы (стр. 234). Нет нужды объяснять, что оформление в виде таблицы того, что по сути своей таблицей совсем не является, есть прямое нарушение идеологии структурной разметки. С другой стороны, если все-таки признать за HTML (в отсутствие CSS) право совмещать в себе содержательный и оформительский аспекты разметки, то можно, придерживаясь ряда несложных правил (стр. 35), создавать страницы, великолепно выглядящие в графических броузерах и притом вполне доступные в любых неграфических средах. Те же и Microsoft. В конце 1995 г. ситуация в мире HTML была довольно смутной. Популярность броузера Netscape неуклонно росла; программисты этой фирмы готовили к выпуску версию 2.0, которая должна была утвердить господство Netscape на вечные времена благодаря неслыханному набору новшеств (интерфейс подключаемых модулей, поддержка Java-апплетов, встроенный язык сценариев JavaScript, возможность разбивки окна на фреймы и многое другое). К этому времени W3C окончательно завяз в своем проекте HTML 3, который был слишком сильно оторван от реальности и на завершение которого у консорциума попросту не хватало ни сил, ни средств. HTML 3 по сравнению с HTML 2.0 был важным шагом вперед, однако он развивался попрежнему в рамках идеологии структурной разметки, а инструмент, дающий возможность выйти за эти рамки, — система CSS — был еще далек от завершения. В этот переломный момент в игру вступил новый участник — корпорация Microsoft. Долгое время эта компания, привыкшая монопольно владеть своим сектором рынка, недооценивала перспективы Интернета и не собиралась как-либо участвовать в развитии этой информационной среды. Однако невероятный взлет Netscape (число копий броузера Navigator измерялось к этому времени уже Десятками миллионов) заставил Microsoft изменить свое мнение. И именно на броузерном фронте, где господство Netscape оставляло меньше всего шансов конкурентам, корпорация Microsoft нанесла свой главный удар. Поначалу мало кто верил, что броузер Microsoft Internet Explorer, который тогда существовал в версии 2.0 и не представлял собой ничего выдающегося, сможет составить конкуренцию Netscape. Тем не менее выпущенная летом 1996 г. версия Internet Explorer 3.0, которая поддерживала почти все расширения Netscape, вызвала настоящий бум и очень быстро утвердилась в качестве «второго главного броузера». Сейчас Microsoft и Netscape делят рынок броузеров почти поровну, и окончательный исход их битвы не берется предсказать никто. Несколькими ловкими ударами поставив свой броузер на один уровень с казавшимся некогда непобедимым Netscape, корпорация Microsoft, очевидно, не собирается останавливаться на достигнутом. Но еще интереснее то, что Microsoft при этом пытается создать для себя новый имидж — компании, поддерживающей независимые организации вроде W3C и заботящейся об авторитете официальных стандартов не меньше, чем о своей выгоде. На этом фоне Netscape, еще недавно имевшая репутацию главного генератора идей и технологического локомотива всей Интернет-индустрии, начинает казаться слишком закрытой, негибкой и эгоистичной в своих намерениях. В действительности же стратегия Microsoft (как и незадолго до этого Netscape) заключается в том, чтобы, объявив официально о поддержке какого-то открытого стандарта, немедленно «улучшить» его расширениями, поддерживаемыми только в продуктах Microsoft, добиться признания этих расширений де-факто частью стандарта — и тем самым установить контроль как над самим стандартом, так и над соответствующим сегментом рынка. Очевидно, чувствуя потерю инициативы, корпорация Netscape решилась весной 1998 г. на беспрецедентный шаг — опубликовала исходные тексты своего броузера на сайте http://www.mozilla.org/и пригласила всех желающих программистов и тестеров принять на 8

некоммерческой основе участие в подготовке следующей версии. Как это ни странно, именно работающие из чистой «любви к искусству» энтузиасты создали многие свободно распространяемые и пользующиеся притом огромной популярностью программы (в их числе даже целая операционная система — Linux), и Netscape явно не прочь подзарядиться новыми силами и идеями из этого неисчерпаемого и почти бесплатного источника. По некоторым сведениям, не коммерческих конкурентов, а именно «открытые» программы со свободно распространяемым исходным кодом Microsoft считает главной угрозой для своего могущества. Три, четыре... Одновременно с разработкой конкурентоспособного броузера Microsoft решила «навести порядок» и в мире HTML. Взяв под свою опеку W3C, она напитала его денежными и людскими ресурсами и тем самым заработала право едва ли не решающего голоса в этой организации. Проект HTML 3 был заморожен, а вместо него в сжатые сроки создан стандарт HTML 3.2, который, по сути, всего лишь описывает большинство расширений Netscape (с тем же успехом их можно назвать теперь «расширениями Microsoft»). Пройдя обычный в W3C процесс обсуждения и внесения поправок, спецификация HTML 3.2 была утверждена в январе 1997 года. Спираль развития HTML завершила свой первый виток — как и в «золотой век», расхождения между предписаниями стандарта и реализацией HTML в броузерах вновь были сведены к минимуму. В декабре того же 1997 г., с принятием стандарта HTML 4.0, маятник, похоже, качнулся уже в обратную сторону — наряду с дальнейшим обогащением репертуара визуальных тегов, эта версия ввела немало пусть и не вполне «логических», но очень важных расширений для поддержки многоязычных документов (стр. 32) и обеспечения доступности документа в разных средах (стр. 34). Кроме того, в HTML 4 наконец-то прямо в тексте стандарта четко проведено разделение логических и визуальных тегов (последние объявлены «нерекомендованными», «deprecated»). Кстати, объем спецификации HTML 4 (которую я советую прочесть всем, кто имеет хоть какое-то отношение к веб-дизайну) в несколько раз больше, чем у 3.2, в основном не за счет описания новых тегов, а благодаря гораздо более подробному обоснованию целей и идеологии языка — так, в спецификацию включен даже краткий курс SGML и разбор HTML DTD. Многие считают, что язык HTML исчерпал потенциал своего развития и что добавление новых тегов вряд ли выведет его на принципиально иной уровень. История HTML, полная борьбы и противоречий, по-видимому, близится к завершению. Точнее, подошла к концу история его развития, так как применяться в более или менее неизменном (и, по-видимому, близком к современному) виде он будет еще долго — ведь в мире накоплено огромное количество ресурсов, жестко привязанных к этому языку. Очень хочется надеяться на то, что наследником HTML станет XML (стр. 47) — язык, гораздо более близкий по идеологии к SGML и в то же время достаточно простой для массового применения. Врожденные и теперь уже вряд ли исправимые недостатки HTML особенно очевидны для тех, кто занимается практическим вебдизайном: из-за того, что HTML с самого начала не был рассчитан на описание внешнего вида документа, он не в состоянии удовлетворительно выполнить эту задачу даже сейчас, при наличии множества визуально-ориентированных тегов. Прямым следствием этого является огромное количество расхождений в интерпретации тегов броузерами. Как бы строго вы ни следовали стандарту, HTML-файл приходится обязательно тестировать по меньшей мере в графических броузерах фирм Netscape и Microsoft, и чаще всего такое тестирование не обходится без неприятных сюрпризов: отступы, пробелы, размеры элементов оформления и логика их размещения на странице даже для простейших тегов различаются довольно сильно. СИНТАКСИС Изучение любого компьютерного языка начинается со знакомства с его основными строительными блоками — операторами, выражениями, переменными. С этой точки зрения язык HTML крайне прост, чтобы не сказать — примитивен: кроме обычного текста, HTML-файл содержит лишь один тип управляющих конструкций, так называемые теги (tags). Важно понимать различие между тегами — единицами разметки и элементами — составными частями документа. Теги, во-первых, разделяют исходный неформатированный текст документа на элементы, а вовторых, создают новые элементы, которым ничего не соответствовало в тексте (например, графические вставки или Java-апплеты). Соответственно, и сами теги бывают двух видов — парные, охватывающие какой-то фрагмент текста и/или другие теги, и стоящие в одиночестве непарные: текст или другие теги Парные теги должны вкладываться друг в друга без пересечений, т. е. если в области действия тега А открылся тег В, он должен закрыться до того, как закроется тег А. Особый подкласс составляют парные теги с игнорируемым содержимым. Например, стандарт предписывает броузеру игнорировать все, что расположено между тегом 9

OBJECT и парным ему закрывающим тегом. С другой стороны, встретив любой неизвестный ему тег, броузер интерпретирует содержимое этого тега как обычно, не обращая внимания на «скобки* парного тега. В результате новые версии броузеров, поддерживающие тег OBJECT, увидят именно этот тег и его атрибуты, а более старые версии, наоборот, отреагируют на его «заместитель» — текст или другие теги, вставленные внутрь парного тега OBJECT. Многие теги, как парные, так и непарные, имеют атрибуты, изменяющие и уточняющие действие тега: Регистр букв в идентификаторах тегов и атрибутов (но не в значениях атрибутов) не учитывается. Пары атрибут="значение" распознаются как таковые только внутри угловых скобок тега и отделяются друг от друга пробелами. В большинстве случаев атрибуты являются необязательными, и в их отсутствие интерпретатор HTML должен использовать значения по умолчанию, заданные в стандарте языка. Существуют атрибуты, не требующие присвоения значения, сам факт присутствия которых просто включает какой-то режим работы данного тега. Согласно стандарту, кавычки вокруг значения атрибута обязательны в тех случаях, когда значение это содержит какие-либо символы кроме букв, цифр, точки или дефиса; однако если вас интересует совместимость с XML, то лучше пользоваться кавычками всегда. Подстановки. Чтобы ввести в документ символы, отсутствующие на клавиатуре или же имеющие в синтаксисе HTML специальное значение, употребляются подстановки (entities) двух видов — мнемонические и числовые. Первые имеют вид &мнемонический код;, например; è

для ё


<SMALL>tm. • Знак номера (№) был заимствован в русский язык из французского, так что в нерусифицированных шрифтах (чей набор символов ориентирован больше на англоязычную типографию) он отсутствует. (В Unicode он есть, но символьного кода в HTML 4 для него не предусмотрено.) Тем не менее символ этот присутствует во всех кодировках русского языка, и если вы ориентируетесь только на русскоязычную аудиторию и при этом вполне уверены в способности автоматического перекодировщика на вашем сервере правильно обрабатывать этот символ, им можно пользоваться просто как буквой (т. е. вставлять его в текст напрямую, без каких бы то ни было конструкций языка HTML).

Позиционирование П о с л е д н и й р аз де л э то й г л а в ы, в с р а в не н и и с предыдущим и, пос в я щ е н вопросу бо лее о б щ ем у по охвату и в то же вр емя бо ле е техническому по х ара кт ер у. Рассмотр ев о с нов ны е т и п ы элементов , сост ав ляющ их веб- стр а ницу, мы до лжны т е пе р ь ра зобра т ьс я с т ем и с р е дс тв ам и, ко торые п р е д л а гаю т со врем е нны е в еб- тех но ло гии д л я размещения этих э л еме н тов на плоскости страницы . Эстетические принципы построения композиции, показывающие зависимость восприятия элемента и его отношений с другими элементами от положения на странице, — иными словами, ответы на вопрос «почему» — были предметом гл. II. Здесь нам остается ответить на вопрос «как», пользуясь техническими сведениями, которые вы почерпнули из гл. 1 (и, вероятно, из вашего личного опыта). Следующая же глава будет целиком посвящена внутреннему устройству графических элементов, имеющих множество своих собственных технических «как» и эстетических «почему». Вообще говоря, точное позиционирование материала по двум (и даже, как мы увидим ниже, по трем) измерениям есть второе по важности из условий творческой свободы дизайнера (первое — возможность пользоваться графикой). Характерно, что дизайнер Дэвид Сигель (www.dsiegel.com) — вероятно, самый известный из популяризаторов визуального подхода к веб-дизайну -прославился в первую очередь изобретением невидимой распорки из однопиксельного GIF'a (стр. 237).

112

ТАБЛИЦЫ И РАСПОРКИ Простейший механизм размещения материала, доступный в обоих визуальных броузерах (в Netscape начиная с версии 2 и в MSIE с версии 3), — это использование таблиц, чаще всего не имеющих разлиновки и фоновой заливки ячеек и потому невидимых (видимо только их содержание, единственно ради позиционирования которого и вводится таблица). Прием этот позволяет регулировать расстояния между элементами с точностью до пиксела, что является важнейшим — хотя и практически единственным — достоинством этой технологии. Если абстрагироваться от семантики, таблица для дизайнера — не более чем инструмент, позволяющий размерам одних элементов влиять на размеры и положение других. Изменяя высоту или ширину некоей ячейки, мы тем самым меняем высоту соответствующей строки и ширину соответствующей колонки, влияя на размеры текстовых блоков и выравнивание изображений по всей таблице. Иными словами, таблица служит своеобразной «средой передачи информации» о размерах и расположении элементов. Для текстовой части документа таблицы — единственный (если не считать CSS) инструмент, позволяющий устанавливать произвольную величину полей, ширину колонки текста, а также верстать текст в несколько колонок. С графическими вставками таблицы используются чаще всего для составления сложных композиций из многих изображений, перемежаемых текстом и ссылками, с гарантированным взаимным расположением. Такой подход, в сравнении с «целиковой отливкой» больших графических блоков, выгоден и с точки зрения доступности информации, и с точки зрения экономии объема файлов (стр. 176). В некоторых случаях при размещении графики можно вообще обойтись без таблиц или, по крайней мере, упростить их, уменьшив в них количество ячеек. Горизонтальный ряд вплотную прилегающих друг к другу графических вставок, выровненных по нижнему краю, можно получить, просто поставив подряд соответствующие теги IMG. Прервав этот ряд тегом BR, вы начнете следующую «строку», прилегающую верхним краем самой высокой из картинок к нижнему краю предыдущей «строки». Собственно говоря, поведение графических вставок при этом ничем не отличается от поведения букв в абзаце за тем исключением, что броузер может сам перенести такую «строку» после любой «буквы» (если она грозит вылезти по ширине за край окна или за границу отведенной для нее ячейки); предотвратить перенос можно, заключив строку картинок внутрь ... . Дурная наследственность. Как уже упоминалось, главным достоинством таблиц является возможность управлять положением элементов с точностью до пиксела. Недостатки же этой технологии более разнообразны. Прежде всего, хотя содержимое ячеек можно позиционировать относительно друг друга и относительно точки привязки всей таблицы, положение этой последней относительно границ окна броузера, к сожалению, непостоянно и может «плавать» с заметной амплитудой в зависимости от текущего размера окна, базового кегля текста, величины полей (стр. 194) и проч. Если сравнивать табличную верстку с возможностями, предоставляемыми CSS, то ближайшим аналогом таблицы будет относительное (relative), а не абсолютное позиционирование. Если не учитывать тот факт, что таблица (как блочный элемент, стр. 240) всегда начинает собой новый абзац, то координаты размещенного в таблице элемента отсчитываются именно от той позиции, которую он занимал бы в отсутствие таблицы и в которой теперь расположена точка привязки этой таблицы. Конечно, чаще всего с помощью таблиц моделируется именно абсолютное позиционирование относительно границ окна: чтобы свести на нет влияние нетабличного материала, в таблицу заключается вся страница, так что мириться приходится только с неодинаковостью ее внешних полей (как я уже писал, величина этих полей точному контролю не поддается). При этом, однако, ощутимым становится другой недостаток этой технологии: броузер может выводить на экран таблицу только тогда, когда ему известны габариты всех ячеек, — т. е. не раньше, чем из сети догрузятся все изображения, тексты и HTML-код, составляющие таблицу. Результатом может стать раздражающая задержка с выводом информации на экран. Сообщив броузеру заранее ширину и высоту всех размещаемых в таблице изображений с помощью атрибутов height и width тега IMG, эту задержку можно сильно сократить — но только в том случае, если размеры указаны, опять-таки, для всех без исключения изображений. Даже одна графическая вставка неизвестных броузеру размеров задержит вывод всей страницы до тех пор, пока не придет из сети начало соответствующего графического файла, по которому броузер сможет определить его габариты. Поэтому атрибуты height и width абсолютно обязательны для жесткого табличного дизайна. В академическом же стиле, наоборот, их следует избегать — как потому, что атрибуты эти не входят в стандарт HTML 2.0, так и потому, что жесткое указание размеров графики иногда не позволяет прочесть alt-тексты графических вставок тем пользователям, которые отключили в своих визуальных броузерах загрузку графики. Тот факт, что в таблице положение любого элемента зависит от размещения всего остального материала, делает этот прием позиционирования весьма чувствительным к 113

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

Двойное дно. Еще один недостаток табличного позиционирования — невозможность наложения элементов друг на друга (иными словами, расстояние между двумя объектами не может быть отрицательным). Изобретательные дизайнеры и здесь нашли выход из положения: неповторяющиеся фоновые изображения (стр. 263) становятся в их композициях самостоятельным слоем, содержимое которого так или иначе соотносится с элементами переднего плана. К сожалению (стр. 194), совмещения с точностью до пиксела при этом достигнуть не удается; однако и то, что есть, позволяет добиться интересных результатов (пример 1). Прием этот вполне допустим в тех случаях, когда он преследует чисто художественные цели. Иногда, однако, в фон выносится часть значимой информации страницы, в некоторых случаях — текст и даже ссылки, реализуемые с помощью прозрачных графических вставок, залинкованных и наложенных на нужные области фона. Такое трюкачество одобрить уже нельзя — «выпавшая на дно» информация безвозвратно теряется для невизуальных броузеров и автоматических сборщиков информации: ведь даже если бы у фонового изображения был свой alt-текст, его место в линейном текстовом эквиваленте страницы определить было бы невозможно. Белое место. Возможности табличной верстки были бы сильно ограничены, если бы дизайнер не мог управлять расстоянием между содержимым ячеек. Интервалы вокруг всех ячеек одновременно можно менять с помощью атрибутов cellspacing и cellpadding тега TABLE (чаще всего оба эти атрибута обнуляются). Но чтобы раздвинуть на некое заранее заданное расстояние отдельно взятую пару объектов, между ними нужно поставить какую-то распорку. Общепринятый способ изготовления распорок (тот самый, изобретенный Сигелем) основан на том, что, если указанные в атрибутах width и height размеры изображения не совпадают с его естественными размерами (записанными в самом GIF- или JPEG-файле), броузер обязан масштабировать это изображение до размеров, указанных в HTML. Достаточно, таким образом, взять полностью прозрачный GlF-файл минимальных размеров — 1 на 1 пиксел — и приписать ему требуемую ширину (не забыв указать height=l, чтобы подавить пропорциональное увеличение высоты) или, соответственно, высоту (не забыв width=l) — и мы получим невидимую графическую вставку требуемых размеров, вполне годящуюся на роль распорки. Достаточно иметь единственную копию такого однопиксельного GIF'a на весь сайт; HTML-файлы могут содержать сколько угодно не мешающих друг другу ссылок на эту копию с указанием разных размеров. Важно также не забывать указывать alt="" при всех таких распорках (как и при любой другой служебной графике), чтобы не раздражать «исподним» визуального форматирования тех, кому нужен лишь текстовый образ вашей страницы. Простейший и дающий наиболее предсказуемые результаты вариант использования графической распорки — вставка ее в выделенную специально для этого случая ячейку таблицы, которая передаст свою ширину или высоту соответствующему столбцу или строке. Можно, однако, ставить распорки и в те ячейки, в которых уже есть текст или изображения. Как и любые другие графические вставки, распорки ведут себя при этом подобно буквам текста: горизонтальные вставки раздвигают материал, а вертикальные отодвигают текущую строку от предыдущей (чтобы этот эффект был заметен, высота распорки должна превышать высоту самого высокого элемента текущей строки; гарантированную вертикальную раздвижку можно получить, вставив между элементами вертикальную распорку, с обеих сторон отбитую тегами BR). В частности, в абзацах текста графическими распорками можно пользоваться для имитации абзацных отступов и даже для увеличения интерлиньяжа (в последнем случае по вертикальной, одинаковой высоты распорке нужно поставить вплотную к 114

каждому слову текста); сейчас, к счастью, ничто не мешает пользоваться CSS для достижения тех же результатов без всяких распорок. Если вы никак не можете разобраться в странностях поведения невидимых распорок на ваших страницах, для отладки можно порекомендовать такой прием: заведите еше один однопиксельный GIF-файл, но не прозрачный, а какого-нибудь яркого цвета, и временно подставьте его вместо прозрачного пиксела в тот каталог, где у вас хранятся изображения. Все невидимые распорки при этом станут видимыми, и расставить их по местам будет намного легче. Для горизонтальной раздвижки символов текста лучше пользоваться не графическими распорками, а неразрываемым пробелом. Последовательность символов   в любом месте документа (в том числе, кстати, и в заглавии, стр. 199) воспроизводится броузером как одиночный текстовый пробел, который, в отличие от обычных пробелов, не сливается с соседними пробелами, не исчезает в конце строки и в начале абзаца, а главное — не позволяет броузеру вставить перенос строки между символами, вплотную к которым он стоит (отсюда и его название — «неразрываемый пробел» не позволяет разорвать строку). Неразрываемыми пробелами особенно удобно пользоваться для увеличения межсловных пробелов, имитации разрядки и абзацных отступов, так как ширина их (как и ширина обычных пробелов) пропорциональна текущему кеглю шрифта. На стр. 229 перечислены также обязательные, предписываемые типографскими традициями случаи употребления неразрываемого пробела для предотвращения переносов и увеличения интервалов в некоторых особых случаях. Фэйсом об тэйбл. Каждый из броузеров имеет свой довольно сложный алгоритм выбора размеров ячеек и размещения материала в них в зависимости от натуральных размеров материала в ячейках, «рекомендованных» размеров ячеек (атрибуты height и width тега TD) и наличия некоторых особых случаев вроде групп ячеек, объединенных по горизонтали или вертикали (атрибуты colspan и rowspan того же тега). Расследование нюансов, странностей и просто ошибок в этих алгоритмах — занятие необычайно увлекательное (я сам, надо признаться, отдал ему должное в свое время), но малопродуктивное. Лучше примите к сведению небольшой набор советов, следование которым защитит вас от большинства неприятных неожиданностей: • Не полагайтесь на «рекомендательные» размеры для отдельных ячеек; если вам нужно, чтобы ячейка имела определенную ширину и высоту, вставьте в нее соответствующих размеров распорку. Без атрибута width в теге TD нельзя обойтись только тогда, когда нужно ограничить ширину ячейки, содержащей текст (причем результат будет соответствовать ожиданиям, только если текста этого хватает при данной ширине хотя бы на одну полную строку). • Имеет смысл зафиксировать также общую ширину самой внешней таблицы, определяющей габариты всей страницы: атрибуту width соответствующего тега TABLE обычно присваивается значение 100% для «резинового» и около 580 пикселов для жесткого табличного дизайна (стр. 193). Более того, без жесткого (в пикселах) задания ширины в теге TABLE таблица, содержащая слитые по горизонтали ячейки, иногда совершенно необъяснимым образом «распухает», так что ее ширина превосходит сумму ширин распорок во всех ячейках. • При необходимости можно сращивать несколько ячеек по горизонтали (атрибут colspan тега TD), но толькс в том случае, если ширины участвующих в операции столбцов жестко заданы распорками в других ячейках если же, наоборот, жестко задана только ширина объединенной ячейки, на правильное распределение этои ширины между столбцами рассчитывать не приходится По этой же причине объединять ячейки по вертикали не рекомендуется вообще — лучше пользоваться вложенными таблицами (рис. 52). • В сложных случаях, когда таблица упорно не хочет вести себя как задумано, можно подсветить границы ячеек, заменив в заголовке border=0 на border=l, — удобное средство отладки, аналогичное временной замене невидимых распорок на видимые (см. выше). Учтите что появляющаяся рамка добавляет по одному пиксела ширины и высоты на каждую ячейку, так что общие габариты таблицы изменяются.

Рис. 52

Условия

задачи: ячейки А должна иметь переменную высоту, тик кик со115

держит текст; ячейка В содержит графическую вставку и должна точно соответствовать ей по размерам; высота ячейки С, следовательно, должна быть равна разности высот ячеек А и В. Попытка решить задачу с помощью rowspan=2 в ячейке А к успеху не приводит; как ни старайся, ячейка В выходит выше, чем надо, а С упорно не дотягивает до нужной высоты Жесткая распорка в С делу не поможет, так как искомая высота С зависит от А и, следовательно, есть величина непостоянная; не помогает и установки фиксированной величины height для ячейки В. Можно попробовать вообще отказаться от разделения ячеек В и С, слив их в одну и отогнав изображение наверх с помощью valign=top; если, однако, вам нужна разлиновка или же другой фоновый цвет в В, не обойтись без вложенной одноячеечной таблицы вокруг изображения. (Те же проблемы встают, хотя и реже, и при горизонтальном расположении — ячейки чаще имеют переменную высоту, чем ширину.) ПОЗИЦИОНИРОВАНИЕ В CSS. Спецификация CSS1 (стр. 40) была типичным «пожарным» решением, спешной попыткой залатать самые зияющие дыры HTML. Кроме возможности устанавливать поля вокруг объектов, никаких усовершенствований на тему позиционирования в этой версии еще не было. В CSS2, однако, разработчики стандарта подошли к делу гораздо серьезнее и реализовали логичный и всеобъемлющий набор инструментов, позволяющий свободно размещать материал на плоскости страницы, сняв всякую необходимость пользоваться с этой целью таблицами. Для начала давайте рассмотрим, чем вообще определяется положение на странице того или иного элемента документа (стр. 27). Язык CSS унаследовал от HTML идею разделения всех элементов, чье содержимое подлежит в той или иной форме выводу на экран, на строчные (inline) и блочные (block). Разница между ними состоит в том, что идущие подряд строчные элементы выстраиваются по горизонтали, переходя на новую строку, только если исчерпано горизонтальное пространство, тогда как блочные элементы располагаются вертикально друг под другом (можно сказать, что каждый блочный элемент начинает собой новый абзац). Понятно, что и для строчных, и для блочных элементов положение на странице будет зависеть от количества и размеров всех предшествующих объектов того же класса. Кроме образования цепочек, объекты обычно выстраиваются еще и в иерархические структуры — так, цепочка строчных элементов может находиться внутри блочного элемента (абзаца или таблицы). Таким образом, «в обычной жизни» координаты элемента определяются двумя факторами: положением элемента-«родителя» и наличием «старших братьев», т.е. элементов, предшествующих данному и имеющих с ним общего родителя. Теперь вам будет легко понять разницу между двумя основными режимами позиционирования, введенными в CSS2: относительным (relative) и абсолютным (absolute). Относительное позиционирование позволяет смещать объект от тон точки, которую он занимал бы по умолчанию с учетом обоих упомянутых только что факторов. Относительное позиционирование отдельных букв в абзаце позволяет, например, воспроизвести логотип системы ТЕХ, в котором буква «E» смещена вниз не относительно какой-то точки на странице, а относительно своих соседей. Такой логотип ведет себя как единый строчный элемент (в частности, он свободно перемещается при переверстке абзаца). Относительное смещение объекта не влияет на следующие объекты в цепочке; они ведут себя так, как если бы тот стоял на своем законном месте, — что может приводить, в частности, к наложению объектов друг на друга. Разновидностью относительного является плавающее (float) позиционирование, при котором объект смещается относительно исходного положения до упора вправо или влево, отодвигая в этом месте текст (а не накладываясь на него). В HTML того же эффекта для изображений можно достичь с помощью атрибута align тега IMG. При абсолютном позиционировании элемента снимается один из двух указанных факторов: положение объекта вычисляется относительно его «родителя», но без учета «братьев». Иначе говоря, абсолютное позиционирование на самом деле вполне относительно, но отличается тем, что имеет одну и ту же точку отсчета для всех «детей» данного элемента-«родителя». Именно с помощью абсолютного позиционирования обычно реализуется наложение элементов друг на друга, а также всевозможные анимационные эффекта (для которых нужна также поддержка языка сценариев, стр. 64). Разновидностью абсолютного является фиксированное (fixed) позиционирование, при котором элементом«родителем» считается окно броузера. Это позволяет реализовать в CSS некоторое подобие фреймов (в том числе и с автоматически появляющимися полосами прокрутки), а также фоновые «водяные знаки», остающиеся неподвижными при прокрутке содержимого переднего плана. Как относительное, так и абсолютное позиционирование могут приводить к наложению элементов друг на друга. По умолчанию видимым остается тот элемент, который 1ыводится последним, т. е. стоит дальше всего от начала в исходном тексте HTML-документа. Однако автор может управлять видимостью элементов и иначе. Для этого нужно присвоить каждому элементу целое число, обозначающее его координату по «оси Z», 116

направленной перпендикулярно плоскости экрана, — или, иными словами, указать порядковый номер «слоя», в котором находится этот элемент. При наложении видимым будет тот элемент, у которого больше значение свойства z-order, — т. е. тот, который находится «ближе к зрителю». Оба визуальных броузера поддерживают абсолютное позиционирование начиная с четвертых версий. К сожалению, как и в других компонентах CSS, в реализации этой технологии пока что много ошибок и несовместимости. Причем вместо того, чтобы бросить все силы на доводку своего сырого продукта, создатели Netscape Communicator сочли более важным застолбить новый участок очередным нестандартным тегом. Тег LAYER, хотя и предоставляет ровно те же возможности, что и абсолютное позиционирование средствами CSS, рекламируется фирмой намного активнее (так, вместо термина «absolute positioning» в документации Netscape гораздо чаще употребляется «layers» или «layer technology»). Хотя до сих пор смелое теготворчество давало Netscape известное преимущество в конкурентной борьбе, я сильно сомневаюсь, что кто-то станет пользоваться тегом LAYER при наличии полноценной альтернативы, освященной авторитетом Консорциума W3.

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

117

Техника. В этом разделе нам предстоит изучить некоторые технологические аспекты подготовки графики для вебстраниц. Вы должны уже хорошо разбираться в общекомпьютерных принципах хранения и обработки графики, включая форматы и пиксельную структуру растровых изображений, их отличие от векторных форм представления, глубину цвета и ее влияние на размер изображения и т. п. Все эти понятия мы рассматривали в одном из разделов гл. 1 (стр. 55). Большинство технических особенностей веб-графики вырастают из ограничений интернетовских технологий и принципа «общего знаменателя», о котором мы говорили на стр. 177. Так, диффузия и «безопасная палитра» GIF-файлов, равно как и необходимость анти-алиасинга, связаны с ограниченным разрешением и цветовым охватом устройства вывода — компьютерного экрана. Оптимизация же графики, поиск баланса между ее качеством и объемом — мера, вызванная в первую очередь низкой пропускной способностью канала связи. В мире веб-графики есть место и ограничениям третьего рода — ограничениям несовершенных, устаревших и несовместимых стандартов (хотя, конечно, здесь они проявляются в гораздо меньшей степени, чем в технологиях текстовой разметки). ПАЛИТРА И ДИФФУЗИЯ Как вы уже знаете, большинство графических вставок на веб-страницах используют формат GIF с его ограниченной максимум 256 цветами палитрой. Ограничению палитры, однако, можно придать двоякий смысл: оно может распространяться либо только на количество используемых цветов, либо и на количество, и на конкретный их набор. И хотя сам формат накладывает ограничения только первого рода (стр. 61), принцип «общего знаменателя» заставляет иногда прибегать к некоторой «общепринятой» GIF-палитре с фиксированными цветами. Зачем это нужно? Дело в том, что перевод изображения в ограниченную палитру часто сопровождается диффузией (dithering). При этом области, которые в оригинале были залиты однородным цветом, после преобразования заполняются смесью беспорядочно разбросанных пикселов разных цветов. Как правило, каждый отсутствующий в редуцированной палитре цвет передается смесью в нужной пропорции пикселов двух самых близких к нему цветов новой палитры. В результате изображение приобретает характерную зернистую, шершавую фактуру. Очень часто диффузия является единственным способом хоть сколько-нибудь адекватно передать исходные цвета с помощью палитры, на которой этих цветов уже нет (рис. 54).

Рис. 54 Диффузия под микроскопом: так Adobe Photo-shop распределяет пикселы при попытке передать черно-белый градиент восьмицветной палитрой В случаях, когда исходное изображение имеет значительно больше цветов, чем можно (или нужно) оставить в формате GIF, без диффузии не обойтись, и вводит ее тогда сам дизайнер (точнее, программа, которой он пользуется) на этапе перевода изображения в формат GIF (подробнее об этом чуть ниже). Но, к сожалению, иногда цветовыми преобразованиями начинает заниматься и броузер на компьютере пользователя. На мониторах, неспособных отобразить одновременно больше 256 цветов (а такие мониторы все еще составляют заметный процент), оба визуальных броузера вынуждены при выводе графических файлов — даже в формате GIF с уже редуцированной палитрой — изменять их цвета. Причин для этого две. Во-первых, броузеру приходится приводить к общему знаменателю палитру всех графических вставок на веб-странице. Во-вторых, чаще всего не обойтись также без приспособления палитры графики к полностью или частично фиксированной системной палитре — в любом случае из 256 доступных цветов несколько будут заняты под рамку окна и логотип броузера в правом верхнем углу. Чтобы эти неизбежные преобразования не приводили к совсем уж неприемлемым результатам, все современные броузеры пользуются при замещении палитры диффузией. Это значит, что даже если ваше изображение состоит из идеально гладких цветовых плоскостей, но палитра его не может быть отображена напрямую, в броузере оно станет шероховатым. Проблема эта действительно серьезна, так как для многих изображений, составляющих нередко основу дизайна страницы, диффузия крайне нежелательна. Что же делать? Оказывается, существует набор из 216 цветов, которые с гарантией никогда не подвергаются диффузии ни в одном из броузеров и ни на одной из платформ. Если ваше изображение будет содержать только цвета из этого набора (или, по крайней мере, к этому набору будут относиться цвета, занимающие наибольшую площадь), на 256-цветном экране оно будет 118

выглядеть намного чище и привлекательнее. Эту палитру часто называют «безопасной» (англ. Browser-safe palette) или «интернетовской». Для изображений с преимущественно фотографическими текстурами, которые подвергаются диффузии еще при сохранении в формате GIF (напомню, однако, что дм них разумнее пользоваться форматом JPEG) и для которых поэтому дополнительная диффузия в броузере уже не страшна, пользоваться этой безопасной палитрой нет никакого смысла. Однако сколько-нибудь значительные по размеру заливки плоским цветом очень желательно защитить от диффузии. Отсюда, кстати, следует, что комбинированную графику, объединяющую фотографические и плоскоцветные элементы, лучше по возможности разделять на части, чтобы диффузия одной составляющей не затрагивала другой. Очевидно, что серьезно относящийся к цветовому решению своих работ дизайнер должен позаботиться о цветовой безопасности на самых ранних стадиях проекта. Встроенная или загружаемая «интернет-палитра» есть сейчас во многих векторных и растровых графических программах. Ничто не мешает вам выбирать ее цветовые значения и вручную, пользуясь таким несложным правилом: 216 цветов этой палитры получаются комбинированием красной, зеленой и синей составляющих, каждая из которых может принимать только шестнадцатеричные значения 00, 33, 66, 99, СС и FF (или десятичные 0, 51, 102, 153, 204 и 255). Таким образом, три составляющих, каждая из которых может принимать шесть разных значений, дают б3 = 216 возможных цветов. Диффузия в броузере и безопасная палитра, еще недавно бывшие источником головной боли для веб-дизайнеров, постепенно теряют актуальность по мере того, как устаревают и вымываются из общей массы персональных компьютеров 256-цветные дисплеи. Эту тенденцию нельзя не приветствовать хотя бы потому, что она открывает перед автором настоящий океан цвета, позволяет выбирать неочевидные, неприевшиеся оттенки. С другой стороны, если какие-то цвета в вашей композиции не несут большой смысловой или эстетической нагрузки, надежнее округлить их до ближайших значений безопасной палитры. Те же, кто желает обеспечить одинаковое воспроизведение цветов как на восьмибитных, так и на 24-битных устройствах вывода и при этом не удовлетворен бедностью безопасной палитры, могут воспользоваться появившимися недавно утилтами-смесителями (color blenders). Смесители эти производят «гибридные цвета» — заливки, состоящие из расположенных в шахматном порядке пикселов двух цветов безопасной палитры. Если не считать некоторой текстурной шероховатости, такой «гибридный» цвет воспринимается как новый, выходящий за безопасные рамки плоский цвет; с другой стороны, будучи составлен из безопасных пикселов, он не изменяется при отображении на 256-цветных устройствах вывода. ЦВЕТОВЫЕ ГРАНИЦЫ Производимое графикой впечатление сильно зависит от того, как в растровом изображении оформлены границы областей, закрашенных разными цветами, — или, иными словами, как сложные криволинейные контуры изображаемых объектов соотносятся с прямоугольной решеткой пикселов. Особенное значение этот аспект имеет для экранной графики и ее подмножества — графических элементов веб-дизайна: ведь физические размеры пиксела на экране во много раз больше, чем на бумаге.

Рис. 55 Кик воспроизвести цветовую границу сложной формы в пиксельной решетке растрового изображения (а)? Без сглаживания каждый граничный пиксел закрашивается одним или другим цветом в зависимости от того, по какую сторону границы лежит большая чисть его площади (б). Анти-алиасинг вводит для граничных пикселов промежуточные тона, в которых пропорция смешения определяется соотношением площадей цветов, приходящихся на соответствующий пиксел (в) Очевидно, что случай, когда граница цветов идет строго горизонтально или вертикально и при этом совпадает с границей рядов или столбцов пикселов, может быть лишь исключением. В большинстве картинок не обойтись без пикселов, рассеченных «идеальной», векторной цветовой границей на части. Если, к примеру, граница 119

разделяет черную и белую области, то простейший подход будет заключаться в том, чтобы закрашивать такие граничные пикселы черным или белым в зависимости от того, какого цвета на них приходится больше. Этот алгоритм применяется тогда, когда невозможно закрасить пиксел каким-либо промежуточным (в данном случае серым) цветом, а сами пикселы малы по размеру — что имеет место, например, при печати на лазерном принтере. На экране же все обстоит ровно наоборот: пикселы настолько крупны, что заметны невооруженным глазом, но при этом гораздо лучше приспособлены к воспроизведению полутонов. В этой ситуации разумнее закрашивать каждый граничный пиксел промежуточным цветом так, чтобы соотношение смешиваемых цветов соответствовало пропорции, в которой данный пиксел делится границей этих цветов. Например, чем больше приходится черного на пиксел на границе черной и белой областей, тем темнее должен быть его цвет (рис. 55). Этот метод, называемый сглаживанием контуров, или анти-алиасингом (anti-aliasing), позволяет получить визуально гораздо более гладкие (но при этом не кажущиеся размытыми) цветовые границы, успешно прячущие от восприятия пиксельную структуру экрана. Можно сказать, что анти-алиасинг компенсирует низкую разрешающую способность экрана за счет его более богатой цветопередачи. Так, текст с анти-алиасингом может не только оставаться читабельным вплоть до очень мелких размеров (когда каждая буква занимает по десятку пикселов в высоту), но и сохранять в таких размерах характерные графические особенности шрифта (рис. 58). В то же время в самых мелких кеглях (меньше 5—6 пикселов на высоту буквы) от анти-алиасинга лучше все же отказаться, взяв вместо этого особый шрифт, оптимизированный для подобных экстремальных условий (к таким шрифтам относятся, например, большинство системных шрифтов Windows). Лучшие результаты дают шрифты без засечек; конечно, вряд ли при этом стоит рассчитывать на узнаваемость шрифта, но надпись по крайней мере можно будет прочесть. В веб-графике анти-алиасинг — не роскошь, а средство выживания, абсолютно обязательное для хоть скольконибудь профессиональных работ уже потому, что размер графики и текста на веб-страницах, как я уже упоминал (стр. 194), в пиксельном измерении обычно весьма мал. Отказываться от смягчения контуров следует только для строго горизонтальных или вертикальных цветовых границ, когда лучше соврать на полпиксела в положении этой границы, чем вводить однопиксельную кромку промежуточного цвета. Кроме того, анти-алиасинг может навредить в изображениях, части которых (например, линии регулярной решетки) сопоставимы по размеру с единичными пикселами: такие объекты лучше рисовать уже непосредственно «в растре» инструментами без анти-алиасинга (в Adobe Photoshop, например, для этого подходит инструмент Pencil), а не экспортировать их из векторного оригинала. Это относится, в частности, к пиксельным текстурам (стр. 119) и тонким горизонтальным и вертикальным линиям (стр. 93).

Рис. 56 Анти-алиасинг в действии: сглаживание контуров позволяет не только сохранить разборчивость текста в мелком кегле, но и передать с помощью буквально нескольких пикселов наклон и характерные графические особенности шрифта Экранный анти-алиасинг. Единственная загвоздка с широким применением антиалиасинга была до последнего времени в том, что аппаратные средства массовых компьютеров позволяли отображать на экране лишь ограниченную палитру цветов, что делает практически невозможным сглаживание контуров «на лету». В последнее время, однако, когда режим high color (стр. 61) становится общепринятым минимумом, анти-алиасинг встраивается во все большее количество программ. В частности, его можно задействовать для всех текстов, выводимых на экран в операционной системе Windows 95/98. Подавляющее большинство графических программ давно уже умеют пользоваться антиалиасингом при создании и трансформации изображений (растровые программы) или при экспорте векторного изображения в растровый формат (векторные программы). В то же время поддержка экранного анти-алиасинга, значительно повышающего комфортность работы с графикой, реализована пока лишь в некоторых векторных редакторах (например, CorelXARA). 120

Из-под пятницы суббота. Сглаженные контуры объектов могут вступать в конфликт с прозрачными областями изображения в формате GIF, которые никакому сглаживанию не поддаются: пиксел в GIF может быть либо прозрачным, либо нет, полутона здесь невозможны в принципе. Конечно, вытравливая фон вокруг объекта, правильнее всего было бы сплавить его контур не с фоновым цветом, а с прозрачностью, так чтобы в граничных пикселах смешивались не два цвета, а цвет объекта с неким промежуточным уровнем прозрачности, — такой объект сохранял бы анти-алиасинг своего контура над любым, в том числе и многоцветным, фоном. К сожалению, пока что подобное возможно только в формате PNG, до сих пор не поддерживаемом напрямую графическими броузерами. В GIF же, к сожалению, любое изображение, пользующееся прозрачностью и анти-алиасингом одновременно, вынуждено нести в себе информацию о цвете фона в каждой точке контура в виде тонкого ореола, который становится заметен, когда цвет фона под изображением почему-либо отличается от задуманного. Например, если в изображении на рис. 55, в объявить прозрачными все белые пикселы, результат будет смотреться хорошо только на странице с белым фоном. Если же фон будет иметь какой-то другой цвет, то вокруг черного объекта будет видна неряшливая белая каемка.

Практических рекомендации из этого можно вывести две. Во-первых, следует отказаться от анти-алиасинга внешнего контура для тех изображений, фон под которыми заранее не известен. А во-вторых, любую графику с прозрачностью нужно подготавливать (рисовать в растре или импортировать из векторного формата) с тем фоном, который будет под этим изображением в готовой композиции. Это относится и к тем случаям, когда изображение должно размещаться над цветовой границей, — как, например, помещенный над границей синего и белого логотип сайта в примере 15. Такую графику приходится готовить в два этапа: сначала объект создается с анти-алиасингом поверх фона нужного цвета и рисунка, а затем этот фон (за исключением ореола антиалиасинга вокруг объекта) закрашивается одним цветом и цвет этот объявляется прозрачным. Из-за колебаний величины полей веб-страницы (стр. 194) перемена цвета ореола может на несколько пикселов не совпадать с цветовой границей фонового изображения, но с этим небольшим дефектом вполне можно примириться. Казалось бы, с одноцветным бестекстурным фоном страницы прозрачность для элементов переднего плана вообще не нужна. Однако из-за почти неизбежной диффузии в броузере к прозрачности приходится прибегать и в этом случае: если вы заполните фоновые части изображения тем же самым цветом, что и фон страницы, но не сделаете их прозрачными, на 256-цветньи мониторах граница между шершавым фоном рисунка и гладким фоном страницы в броузере будет слишком хорошо заметна. Отсюда же следует, что в изображениях с прозрачностью нельзя пользоваться редукцией палитры с диффузией — ведь прозрачным может быть объявлен только один цвет, и если фон изображения будет состоять из смеси разноцветных пикселов, полностью прозрачным его сделать уже не удастся. ПИКСЕЛЬНЫЕ ЭФФЕКТЫ Кроме анти-алиасинга, существует еще несколько достойных упоминания эффектов, проявляющихся на уровне отдельных пикселов изображения. Так же как многие законы физики макромира отказывают при переходе на уровень элементарных частиц, мир микроскопической графики имеет свои собственные правила и запреты. Прежде всего, все цвета в малоразмерных графических элементах обязаны быть значительно ярче, контрастнее по отношению к своему окружению, в каком-то смысле даже «примитивнее». Я уже писал об особенностях восприятия цвета в малых по площади объектах (стр. 109); особенности эти не ограничиваются едва заметными оптическими иллюзиями, но зачастую требуют весьма значительной корректировки цвета. В экранной графике «потере индивидуальности» цвета способствует анти-алиасинг, разбавляющий цвет краевых пикселов цветом фона: чем меньше объект и чем сложнее его форма (хороший пример — текст мелким кеглем), тем большая доля составляющих его пикселов краевые и, следовательно, тем дальше воспринимаемый цвет объекта от задуманного. Например, если в композиции присутствует залитая десятипроцентным серым плашка на белом фоне, а под ней — некий текст мелким кеглем, который по замыслу дизайнера должен соответствовать плашке по цвету, может оказаться необходимым значительно затемнить серый цвет надписи, иногда до 20 процентов серого и выше. И наоборот, яркость серого текста на черном фоне может понадобиться повысить для компенсации влияния малого размера и анти-алиасинга. 121

В малых размерах отказываются работать многие графические эффекты, связанные с изменением текстуры, такие как размывки, тени, трехмерность и т. п., — все эти украшения при уменьшении за некоторый минимум превращаются в нечленораздельную грязь. В малоразмерной графике подчас не хватает места даже для плоского цвета, вытесняемого анти-алиасингом (который, кстати говоря, в таких размерах начинает проявлять свое родство с фотографическими текстурами); любые другие текстуры не могут даже возникнуть на площади размером в считанные пикселы — так же как невозможно сделать осмысленные статистические выводы по выборке в десяток наблюдений. Здесь же уместно напомнить о правиле выравнивания пропорции при уменьшении (стр. 84), о пиксельных текстурах (стр. 119) и о том, что объекты масштаба отдельных пикселов должны создаваться уже на стадии растрового изображения, а не в векторном оригинале. ОПТИМИЗАЦИЯ. Технологическая цепочка производства графики для веб-страниц обычно включает три этапа: создание графических элементов в векторном редакторе, экспорт в полноцветный растровый формат и, наконец, оптимизацию полученной графики с одновременным переводом ее в формат с ограниченной цветностью (GIF) или в формат, реализующий сжатие с потерями (JPEG). Иногда между вторым и третьим этапами на изображение накладываются какие-то специфически растровые эффекты (например, тени или размывки); в других случаях, наоборот, второй этап может отсутствовать вообще, если векторная программа способна экспортировать графику сразу в GIF или JPEG и предоставляет при этом достаточные для профессионала возможности настройки этого процесса. Когда проект завершен, в архиве безусловно должны остаться векторные оригиналы и конечный результат работы — оптимизированная графика в GIF или JPEG. Промежуточные же растровые файлы (для которых чаще всего используется формат TIFF) вполне можно стереть, если только к ним не применялось никакой специфической пост-векторной обработки. Итак, оптимизация графики — т. е. поиск компромисса между ее качеством и объемом файла — сводится к выбору, во-первых, одного из двух форматов, а во-вторых, параметров сжатия в выбранном формате. Кроме практического опыта, большую помощь при этом может оказать знание свойств основных видов текстур и умение опознавать их в изображениях: как я уже упоминал (стр. 61), граница между владениями GIF и JPEG почти совпадает с разделительной линией между плоскоцветными и фотографическими текстурами. JPEG. Сжатие графики в формате JPEG определяется одним-единственным параметром, называемым уровнем качества (quality) и измеряемым в относительных единицах — чаще всего от 0 (максимальное сжатие) до 100 (максимальное качество). Большинство JPEG-файлов сохраняются с уровнем качества в диапазоне от 50 до 100. Как правило, чем плавнее и размытее цветовые переходы в изображении, тем меньшим может быть этот параметр и тем большего сжатия удается достичь. Наоборот, четкие и контрастные цветовые границы требуют повышения уровня качества, иначе возле них появляется неряшливая «рябь». Простота настройки этого формата (и относительная редкость в дизайне фотографических текстур по сравнению с плоским цветом) позволяют сформулировать первый шаг алгоритма оптимизации так: если принадлежность изображения к владениям одного из форматов не очевидна для вас с первого взгляда, попробуйте сначала сохранить его в формате JPEG, повышая степень сжатия до тех пор, пока качество не перестанет вас удовлетворять. Даже если получившийся файл будет несоразмерно велик и вы решите переехать в GIF, у вас, во всяком случае, будет цифра, с которой можно будет сравнить результаты. В большинстве практических случаев, однако, можно сразу же выбрать либо JPEG (для настоящих фотографий и композиций, в которых они доминируют), либо GIF (для плоскоцветных логотипов, надписей, заголовков и т. п.). Сродство JPEG'a с фотографическими текстурами столь велико, что размер файла в этом формате (при заданном уровне качества) вполне можно использовать как объективную «меру фотографичности» изображения. Возвращаясь к теме малоразмерной графики, нужно отметить, что для изображении, размер которых меньше приблизительно ста пикселов по одному из измерении, единственным разумным выбором остается формат GIF. Как я только что писал, сложные текстуры на таких маленьких площадях чувствуют себя неуютно, — а если даже вам и нужен крохотный фрагмент фотографии, GIF справится с его воспроизведением ничуть не хуже, чем JPEG. Последний формат попросту не приспособлен для малоразмерной графики — достаточно сравнить объемы изображения размером в один пиксел (стр. 237): 43 байта в GIF и свыше полутора килобайт в JPEG.

122

GIF. Взамен единственного и довольно-таки абстрактного «уровня качества» степень сжатия в GIF регулируется рядом параметров, самым важным из которых является количество цветов, или размер палитры. Другие форматы, как правило, имеют лишь стандартные градации цветовой глубины: 2 цвета, 16 цветов, а потом сразу 256, 215 (high color) и 224 (true color, стр. 61). GIF же может иметь любое количество цветов от 2 до 256, и если в изображении используется, скажем, 64 цвета (26), то для хранения каждого пиксела будет взято ровно по шесть бит и ни битом больше. (Втиснув то же изображение в 60 или 40 цветов, вы получите лишь незначительный выигрыш в размере; следующий скачок оптимизации произойдет только при переходе через 32 цвета, когда размер каждого пиксела сократится еще на один бит.) Если не применяется безопасная палитра, графическая программа сана решает, какие именно цвета останутся при редукции полноцветного изображения в ограниченную палитру. Общее правило таково: чем больше какого-то цвета в оригинале, тем выше вероятность того, что он в неизменном виде войдет в редуцированную палитру; менее популярные цвета, наоборот, будут «округлены» к ближайшим цветам палитры либо переданы смесью пикселов близких цветов (если включена диффузия). Как видите, принцип этот сформулирован достаточно общо, так что конкретные алгоритмы редуцирования палитры могут отличаться довольно сильно — что и наблюдается в многочисленных программах-оптимизаторах, предназначенных единственно для сохранения графики в формате GIF. Сколько же цветов нужно для вашего изображения? Хотя опыт определения цветовых потребностей графики «на глазок» приобретается довольно быстро, во многих случаях приходится поэкспериментировать. Так, одноцветному тексту на одноцветном фоне должно хватить палитры из 8, а в небольших размерах даже и 4 цветов — два из них станут «основными», а остальные отойдут промежуточным тонам для анти-алиасинга. С другой стороны, 256 (а иногда и 128) цветов с диффузией обычно вполне достаточно для полноценной передачи фотографического изображения средних размеров (хотя с этой задачей, скорее всего, лучше справится JPEG). Основная часть веб-графики располагается где-то в промежутке между этими крайностями. Сжатие без потерь и ограниченность палитры 256 цветами, собственно говоря, никак не связаны друг с другом, хотя веб-дизайнеры, пользующиеся форматом GIF, привыкли к одновременному действию этих факторов. Разработанный сравнительно недавно формат PNG (Portable Network Graphics) реализует более эффективное, чем GIF, сжатие без потерь, но при этом может хранить не только графику с фиксированной палитрой, но и полноцветные изображения с тремя байтами на пиксел. Этот формат имеет и множество других преимуществ, благодаря которым он, вероятно, вытеснит GIF сразу же, как только его поддержка появится в распространенных графических броузерах. Взболтать и настоять. На величину палитры сильно влияет наличие или отсутствие диффузии — метода, подменяющего смешение цветов внутри пиксела смешением пикселов разных цветов. Основанная на псевдослучайном (стр. 87) распределении пикселов, диффузия обнаруживает свое несомненное сродство с фотографическими текстурами: хотя на первый взгляд диффузная зернистость совсем не похожа на фотографическую плавность и размытость, для глаза сочетание этих двух аморфных (стр. 100) текстур гораздо естественнее, чем диффузия изображений с плоским цветом и четкими границами объектов. Если «сыпь» пикселов на плоскоцветных участках можно в конце концов вылечить увеличением размера палитры (занимающие определенную площадь цвета рано или поздно получат свои собственные клеточки в цветовой таблице и тем самым избавятся от диффузии), то на резких цветовых границах с анти-алиасингом диффузия приводит к появлению принципиально неустранимых «зубчиков» (рис. 57). Человеческий взгляд все равно бы не смог заметить фальшь в отдельных граничных пикселах — но программа, увы, об этом не подозревает и добросовестно старается «аппроксимировать» края объектов диффузией, для которой там попросту нет места.

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

123

Главный смысл использования диффузии — в том, что изображение при этом становится гораздо терпимее к размеру палитры. Например, если без применения диффузии картинка не выдерживает редукции даже до 128 цветов, то с диффузией ее можно обкорнать до 64 или даже 32 цветов без особой потери качества. С другой стороны, случайная диффузия, как и любая нерегулярность («шум») в данных, резко ухудшает сжимаемость графики. Вот почему иногда, снизив цветность картинки, скажем, с 256 до 128 цветов, из-за этого противоположно направленного эффекта вы вместо уменьшения размера файла получите увеличение. К сожалению, даже диффузия подчас неспособна «вытянуть» такие сугубо фотографические элементы изображения, как размывки и градиенты. На рис. 54 хорошо заметно, как при воспроизведении в ограниченной палитре градиент распадается на сильно портящие впечатление поперечные полосы (впрочем, надо отдать справедливость диффузии, — без нее эти полосы были бы несоизмеримо заметнее). Многочисленные программы-оптимизаторы с разной степенью успеха пытаются избавиться от этой «полосатости» (англ. banding), но до конца это не удается пока что никому. Как и у программ-архиваторов, степень сжатия графической информации в GIF сильно зависит от уровня ее повторяемости и предсказуемости, а иногда еще и от ориентации картинки. Поскольку GIF сканирует изображение по строкам, то, к примеру, градиент, направленный сверху вниз, сожмется куда лучше, чем тех же размеров градиент, ориентированный слева направо, а этот последний — лучше, чем градиент по диагонали. Диффузия, хотя и сильно ослабляет эффект зависимости степени сжатия от ориентации, все же не отменяет его. Чудное мгновенье. Особый жанр искусства оптимизации — редукция палитры кадров анимированных GIFфайлов. Не только более жесткие требования к объему файлов, но и физиологические особенности восприятия движущихся изображений позволяют обходиться для кадров «мультиков» гораздо более скромной палитрой и во многих случаях отказываться от таких предметов роскоши, как диффузия или анти-алиасинг. Быстро мелькающие изображения не только не позволяют зрителю заметить безжалостность оптимизации, но и (если у следующих друг за другом кадров есть хоть что-то общее) компенсируют недостатки друг друга, накапливая визуальное впечатление предсказуемо движущегося или изменяющегося объекта и нейтрализуя случайно расположенные дефекты. То же самое можно наблюдать в кинематографе, где субъективное качество движущейся картинки всегда заметно выше, чем качество любого отдельного кадра. Очевидно, что требования к качеству каждого GIF-кадра должны быть тем выше, чем дольше он остается видимым. Blow up. Напомню, что, вставляя подготовленное изображение в HTML-документ, нужно снабдить его двумя обязательными вещами: alt-текстом (стр. 35) и явным указанием ширины и высоты атрибутами height и width. К предмету этой главы имеет прямое отношение возможность масштабирования графики указанием в HTML габаритов изображения, отличных от реальных. Если уменьшать графику таким манером никакого смысла нет (лучше сразу сделать ее маленькой, сэкономив тем самым на объеме файла), то сильное растягивание картинки (в том числе и с нарушением пропорций ширины и высоты) — хотя и редко встречающийся, но достаточно интересный прием оформления. Броузер не пытается как-то сгладить раздутую графику, передавая каждый увеличенный пиксел прямоугольником -примерно так, как растровая решетка изображается с увеличением на большинстве рисунков в этом разделе. Поэтому незначительное, на проценты, растяжение картинки не даст ничего, кроме неприятных ступенек в контурах объектов и искажений букв текста. Самостоятельную художественную ценность может иметь только картинка, растянутая в разы, пикселы которой видны невооруженным глазом. Этот эффект особенно интересен, когда пониженная плотность информации на единицу площади в таком изображении компенсируется анимацией (анимированный GIF продолжает крутиться как ни в чем не бывало и в раздутом виде). Если же добавить к этому возможность привязать размеры графической вставки к размеру окна броузера (написав, например, height="100%" width="100%"), в сумме вы получите несколько «попсовый», но без сомнения весьма впечатляющий оформительский прием. Пожалуй, дичайший из встречавшихся мне примеров бессмыслицы в веб-дизайне — это залинкованные на большие графические файлы «ноготки» (стр. Й58), на самом деле представляющие собой те же полноразмерные файлы, уменьшенные лишь масштабированием атрибутами height и width.

124

Функции П ерехо дя от тех нических ас пекто в в еб- гра ф ик и к твор че с к им , я на ч ну с по пыт ки к л а сс и ф ик ац и и м ат ер и а л а, а е сл и б ы ть сов с ем точ ным — с обзор а уже с л о живш их ся ( несмо тря на мо ло дость э то го вид а творчества) , х ар ак т ер ных кат е гор ий инт ер нетов с ко й гр афики. Для некоторых элементов веб-страницы, чаще всего реализуемых в виде графических вставок (а именно для заголовков, стр. 200, и элементов навигации, стр. 205), выполняемая ими функция важнее, чем чисто дизайнерские особенности, так что я счел возможным вынести их обсуждение в предыдущую, более техническую по тематике главу. Здесь же нам предстоит познакомиться с принципами создания других, не менее характерных для веб-дизайна жанров графики: фонов, логотипов, баннеров и визуалов. Графика — это та область, в которой специфика веб-дизайна и интернетовских технологий отходит на второй план, сводясь к необходимости минимизировать размер файла и учитывать габариты веб-страницы в пикселах (стр. 194). С точки зрения дизайнера, графической композиции на веб-странице нет никакого резона скольконибудь заметно отличаться по стилю от представителей того же жанра в рекламном или журнальном дизайне. Вот почему отчасти эта глава представляет собой возвращение к темам и подходам гл. II, посвященной «дизайну вообще» с минимумом интернетовской специфики. ВЫСТАВОЧНАЯ ГРАФИКА Функциональный подход к классификации веб-графики позволяет выделить одну ее разновидность, вообще лишенную какой бы то ни было прикладной функции, — «графику ради графики», графику как таковую. К этой категории принадлежат сканированные фотографии, репродукции картин, факсимиле рукописей, снимки готовых страниц в портфолио веб-дизайнера и тому подобные изображения, размещаемые на сайте не с какой-то служебной или декоративной целью, а ради них же самих. Дизайнер здесь сталкивается с трудностями того же свойства, что и при попытках вписать в свою композицию чужеродный рекламный баннер (стр. 204): внешний вид заранее заданного «выставочного» элемента менять нельзя, даже если с другими элементами страницы он совсем не гармонирует. Разумеется, в тех случаях, когда единственная цель страницы или всего сайта — служить рамкой для такой выставочной графики, дизайн с самого начала должен быть максимально нейтральным, не лезущим на передний план. Однако это не всегда возможно — тот'же сайт веб-дизайнера, к примеру, вряд ли обойдется слишком скромным оформлением, и задача естественно обставить уход «фирменного стиля» сайта за кулисы при переходе к разделу портфолио может оказаться совсем не простой. Ограничения на объем пересылаемых по сети файлов сделали популярной следующую схему. На входной странице «галереи» собираются уменьшенные копии хранящихся на саи-те изображений — так называемые «ноготки» (thumbnails), обычно снабженные описаниями и другой сопроводительной информацией. Каждый из таких «ноготков» залинкован или прямо на полноразмерную копию изображения, или на почти пустую HTMLстраницу с полноразмерной картинкой. Практический смысл этого приема очевиден: просмотрев уменьшенные копии, пользователь сможет быстро получить общее представление о выставленной на сайте графике, а при желании и посмотреть заинтересовавшее его изображение в увеличении. Эта двухступенчатая схема позволяет иногда решить и проблему визуальной несовместимости выставочной графики с дизайном самого сайта. Страница с «ноготками», особенно если их собрано несколько, определенно выигрывает от строгого дизайна, объединяющего как выставленные образцы друг с другом, так и данную страницу с другими частями сайта. На странице же с полноразмерной графикой (разумеется, в любом случае содержащей только одно изображение) дизайн как таковой может отсутствовать вообще, а роль HTML обычно сводится к установке фонового цвета (лучше всего нейтрального по тону — черного, белого или серого), прописыванию заглавия и центровке изображения относительно границ окна. ФОНЫ Если дизайн двадцатого столетия отличается от стиля предшествующих эпох в первую очередь приверженностью к абстрактной геометричности (о которой речь впереди, стр. 268), то характернейшими чертами дизайна последнего десятилетия нужно признать две темы: частичной прозрачности и наложения элементов. Основная масса дизайнерской продукции создается сейчас в стиле, который можно было бы условно назвать «стилем Photoshop»: буквы заголовков, либо просвечивающие, либо снабженные полупрозрачными тенями, располагаются поверх фотографических фрагментов с размытыми краями, плавно переходящих друг в друга или растворяющихся в фоновом цвете. Этот набор клише стал почти универсальным и для бумажной продукции, и для (и в особенности для) мультимедийного и веб-дизайна. 125

Сейчас нас в основном интересует тема наложения графических объектов друг на друга, имеющая прямое отношение к такому специфическому жанру веб-графики, как фон. Изображение, URL-адрес которого указан в атрибуте background тега BODY, будет размножено броузером по всей площади окна под (и без всякой координации с) содержимым «переднего плана». По всей видимости, программисты фирмы Netscape, добавившие эту возможность в версии 2.0 своего броузера, не подозревали о том, сколько изобретательности будет проявлено дизайнерами в реализации этой простой схемы. Как не надо делать фон. Первой в голову приходит идея взять средних размеров изображение с близкими к квадрату пропорциями (100—200 пикселов по ширине и высоте) и позволить броузеру действительно размножить эту картинку по горизонтали и вертикали. Еще совсем недавно большинство любительских страниц пестрели такими простейшими фонами, тематика которых, несмотря на видимое разнообразие, чаще всего ограничивалась материальными текстурами: небо с облаками, мраморные разводы или мятая бумага. Главным объединяющим мотивом такого рода фонов выступает даже не материальность, а нерегулярность, подчеркнуто природная аморфность (стр. 100), и именно она лишает эту разновидность фонов какой-либо художественной ценности. Почему это происходит? Вообще говоря, как мы уже не раз видели, контраст аморфности и геометричности, разбросанности и регулярности — один из самых сильных видов контраста, и именно в современном дизайне он играет очень заметную роль. Что же мешает нам восторгаться ровными рядами букв и строк поверх случайно разбросанных пятен фона? Основных причин две. Прежде всего, хотя каждая отдельная плитка фона может быть сколь угодно нерегулярной, прямоугольная решетка таких плиток, наоборот, вводит очень сильную, подавляющую своей непререкаемостью регулярность, которую практически невозможно замаскировать. Эти две противоположности, проявляющиеся еще в самом фоне (т. е. даже без учета элементов переднего плана), не образуют сколько-нибудь осмысленную контрастирующую пару — восприятие зрителя ни на секунду не сомневается в том, что регулярность эта «не от хорошей жизни», что она никак не связана с иррегулярностью текстуры, противостоит ей сугубо формально и что, наконец, возникла она как побочный эффект технологии, а не как часть художественного замысла. С другой стороны, ни регулярный, ни нерегулярный аспекты фона никак не соотносятся с передним планом страницы. Полнейшая и очевиднейшая случайность взаимного расположения элементов фона и переднего плана бросается в глаза: как навязчивая музыка с жестким механическим ритмом, фон заглушает звучание переднего плана вместо того, чтобы тактично уйти в тень, ослабнуть на тех участках, где он мешает восприятию текста или графики. Конечный итог всего этого — с трудом переносимое ощущение хаоса, неопрятности и полнейшего отсутствия «хозяйской руки». Беспорядочность может нести художественный заряд, но только в том случае, когда он вложен в нее дизайнером; беспорядочность же дикая, необработанная — да к тому же сочетающаяся со столь же бездушной компьютерной упорядоченностью — вызывает только раздражение. Раздражение это настолько универсально, что рекомендация вообще воздерживаться от использования фонов на веб-страницах стала одним из общих мест всевозможных сборников советов по созданию веб-страниц для начинающих. Авторы подобных сочинений обычно упирают на нечитабельность текста со слишком ярким и пестрым фоном, хотя, как мы видим, у психологического отторжения материальных фонов есть и более глубоко лежащие причины. Прогладить с изнанки. Оставив на время в стороне вопросы эстетики фоновых изображении, давайте обсудим одну сугубо техническую проблему: как сделать бесшовный фон, у которого были бы незаметны стыки между соседними копиями «изразца». Сколь бы долго и мучительно вы ни перекрашивали расположенные у края картинки пикселы вручную, добиваясь их соответствия пикселам противоположного края, — в окне броузера линии стыка все равно будут бросаться в глаза. Человеческое восприятие натренировано вылавливать признаки порядка в кажущемся хаосе, и какими бы незначительными ни были дефекты «сварки», их повторение в регулярной прямоугольной сетке делает их издевательски заметными. Но представьте себе, что у вас вдруг появилась возможность редактировать фоновый изразец прямо на плоскости, где он находится в окружении своих копий, причем так, что любые вносимые изменения отображаются одновременно во всех копиях размноженного изображения. Если при этом вы сможете свободно пересекать границы изразцов и сразу же будете видеть конечный результат своих действий — залитую этим фоном плоскость, — то ручное сглаживание и шпаклевка стыков становятся вполне реальным делом даже без использования каких-то нестандартных инструментов. 126

Чтобы добиться описанного эффекта, достаточно разделить прямоугольник вашего изображения на четыре четверти (рис. 58, а) и поменять их местами (рис. 58, б).

РИС. 58 Создание бесшовного фона перестановкой четвертей. Обратите внимание, как заметны стали в (б) нестыковки деталей фона между четвертями 4 и 2, 4 и 3

После этого измененное изображение будет, по сути, представлять собой фрагмент плоскости, заполненной исходным изображением — причем фрагмент этот выбран так, что на нем видны углы четырех соседних копий изразца. Разумеется, повторение этого изображения в окне броузера даст совершенно тот же результат, что и повторение исходного (с точностью до сдвига на половину его горизонтального и вертикального размера). Однако теперь края изразца уже не требуют никакой доводки, так как они только что были созданы заново разрезанием «по живому», — а все стыки, которые нужно замазать, теперь, наоборот, находятся внутри. Из всех методов производства бесшовных фонов этот — самый гибкий и удобный, так как он позволяет пользоваться для уничтожения следов стыка любыми инструментами рисования, размывкой, растушевкой и т.п. Единственное, о чем следует помнить, — это то, что вы должны работать очень аккуратно в тех областях, где обрабатываемые стыки подходят к новым (после перестановки четвертей) границам изображения (например, на левом конце границы между четвертями 4 и 2 или на верхнем конце границы между четвертями 4 и 3 на рис. 58, б). Дело в том, что здесь вы можете по неосторожности ввести новые дефекты, которые, опять-таки, станут заметны только после размножения фона на плоскости. Существует и еще один подход к созданию бесшовных фонов — на сей раз с помощью несложной (и во многих программах автоматической) процедуры, сплавляющей вместе противоположные края готового изображения. Как и в других случаях, когда нечто можно сделать либо автоматически, либо вручную, автоматизация позволяет быстрее и с меньшими затратами труда получать более устойчивые, хотя в целом менее удовлетворительные (но во многих случаях все же вполне приемлемые) результаты. Чтобы сделать аккуратный шов, этому методу нужен «запас материала» по краям прямоугольной «заплаты». Представьте, что вдоль внешних сторон выделения, которое надлежит превратить в бесшовный фоновый изразец, вырезаны четыре полоски определенной ширины (рис. 59, а). Затем каждая из этих полосок перенесена к внутреннему краю противоположной стороны и там наложена поверх старого изображения (рис. 59, б). При этом прозрачность перенесенной полоски равна 50% на самом краю и постепенно увеличивается вплоть до полной невидимости по направлению к центру прямоугольника. Прозрачность же того фрагмента изображения, который оказался под полоской, наоборот, уменьшается на этом отрезке от 50% до нуля (рис. 59, в). Если вы мысленно 127

покроете плоскость копиями такого изображения, то увидите, как соседние прямоугольники склеиваются друг с другом с помощью этих «клапанов». Очевидно, что для применимости этого метода нужно, чтобы по краям выделенной области, которую вы хотите превратить в элемент фона, оставалось достаточно места для выкраивания клапанов (как правило, их ширина составляет около 20% от размера выделения). Этот метод дает хорошие результаты для нечетких, размытых текстур, не содержащих отчетливых деталей и контрастных переходов. Однако если изображение содержит текст или псевдотрехмерный рельеф, результаты будут, скорее всего, неудовлетворительными, так как в этом случае наложение одной копии изображения на другую слишком заметно для глаза. Рис. 59 Создание бесшовного фона «клапанами» с градиентами прозрачности. «Поперечное сечение» фоновой плитки (в) показывает, как в полученном этим методом фоне соседние изразцы частично накладываются друг на друга, так что на линии шва видимость каждого из них составляет по 50% Одномерные фоны. Как же превратить фон из вернейшего признака любительского, «побрякушечного» оформления в инструмент профессионального веб-дизайна? Одновременно избавляясь от назойливой повторяемости элементов фона и координируя фоновую графику с содержимым переднего плана, мы приходим к нескольким типичным схемам построения фонового слоя веб-страницы. Самый распространенный в настоящее время тип фоновых изображений — это фоны, размножаемые только по одному измерению. Если взять в качестве фона изображение, ширина которого с гарантией превосходит любую возможную ширину окна броузера (двух тысяч пикселов хватит с лихвой), то о горизонтальной повторяемости можно будет забыть, и броузеру останется лишь складывать копии этого изображения в вертикальную стопку (рис. 60, б). Обеспечив однородность горизонтальной фоновой полоски в вертикальном направлении, мы сможем раскрашивать фон произвольно расположенными, лишенными какой бы то ни было повторяемости вертикальными полосами с произвольной текстурой (эти полосы могут быть плоскоцветными с резкими краями, а могут и пользоваться любыми горизонтальными градиентами или пиксельными текстурами). Классический вариант — сравнительно узкая (150—200 пикселов) полоса более темного цвета вдоль левого края окна, служащая для размещения навигационной панели, логотипа, минибаннеров (стр. 287) и тому подобных элементов, повторяющихся на всех страницах сайта. Такой фон выполняет практически ту же функцию, что и деление окна на фреймы. Варьирование ширин составляющих страницу полос и принципов их информационного наполнения открывает широкий простор для творчества. Единственное, что объединяет все решения с вертикальными фоновыми полосами, — их сонаправленность вектору информационного развития: в отличие от ширины, высота веб-страницы ничем не ограничена, поэтому информационная иерархия ее элементов выстраивается в основном по вертикали. Вводя перпендикулярное этому вектору членение, полосатый фон великолепно держит композицию страницы небольшого размера, однако на сколько-нибудь протяженных страницах параллельность визуальной и информационной вертикалей раздражает своей тавтологией, и композиции начинает не хватать подчеркнуто поперечного начала и концовки. Как недостатков, так и, к сожалению, достоинств вертикально-полосатых фонов лишены фоны, размножаемые только по горизонтали (и, соответственно, по вертикали гарантированно превышающие высоту страницы — рис. 60, в). Такой фон, обычно ограничивающийся горизонтальной полосой вдоль верхнего края окна, в отличие от «вертикального» работает больше на эстетическом, чем на информационном плане восприятия и не становится фактором, действующим на всем протяжении страницы. Размещаемые на горизонтальной полосе навигационная панель или заголовочная графика, собственно говоря, могли бы сами позаботиться о фоновом цвете в своих окрестностях; роль фона страницы заключается лишь в том, чтобы дотянуть цветовую заливку до рамки окна, придав этой части композиции аккуратность и завершенность.

128

РИС. 60 Типология фонов: (а) — обычный фон, размножаемый по обоим измерениям; (б) и (в) — полосатые фоны, размножаемые только по вертикали и горизонтали соответственно; (г) — полностраничный фон

Одним куском. Последний и, видимо, самый интересный тип фоновых изображений — неповторяющиеся фоны, настолько большие, что броузеру не нужно размножать их ни по горизонтали, ни по вертикали (рис. 60, г). Здесь и речи уже нет о каких бы то ни было полосах: фоновый слой страницы может содержать любое изображение, как угодно соотносящееся с передним планом. Как я уже упоминал (стр. 236), такой неповторяющийся фон не может служить носителем информации и обязан ограничиваться чисто декоративными функциями. Но и одно лишь избавление от бессмысленного повторения «изразца» делает возможными на удивление интересные эффекты. Единственное, хотя и довольно досадное техническое ограничение — невозможность обеспечить совмещение элементов фона и переднего плана с точностью до одного пиксела — определяет и самый популярный мотив неповторяющихся фонов: бледные (чтобы не мешать чтению), свободных очертаний формы, эффектно пользующиеся именно той аморфностью, противостоящей регулярности переднего плана, которая отказывалась работать для «изразцовых» фонов с материальными текстурами. Дополнительное преимущество такого фона — то, что он не боится слишком длинных страниц: в отличие от фона с горизонтальной полосой вверху окна, повторение фонового «водяного знака» через каждые несколько экранов текста вполне допустимо, а иногда даже желательно. Характерен с этой точки зрения пример 11. Здесь фоновое изображение «дымка от чашки с кофе» (кстати, клишированный образ для всего, что связано с языком Java) прежде всего визуализирует динамику восприятия информации, по сути, делая видимыми «силовые линии» (стр. 167), ведущие от заголовка к визуалу 129

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

Этот пример дает повод обсудить еще один технический аспект полностраничных фонов: чтобы общин вес страницы с таким фоном не выходил за рамки приличия, все фоновое изображение размерами в сотни и даже тысячи (по высоте) пикселов должно уложиться не более чем в 20—30 Кб. Достичь этого можно двумя путями: либо сжатием в JPEG с большими потерями, которые будут незаметны только для «очень фотографических», размытых и к тому же темных по цвету изображении, либо сжатием плоско-цветных изображений в GIF до 2—4-цветной гаммы (естественно, при этом придется отказаться от анти-алиасинга, что опять-таки допустимо только при низком уровне контраста). Если же в формате GIF нужно сохранить изображение с чуть более сложной текстурой, можно «аппроксимировать» ее плоским цветом с помощью, например, имитации типографского растра, как сделано в примере 11. ЛОГОТИПЫ Термин «логотип» в этой книге применяется к любым графическим и/или шрифтовым знакам, символам и эмблемам, которые могут принадлежать фирмам, организациям, проектам и событиям, отдельным людям, товарам и услугам. Важность этого, казалось бы, узкоспециального дизайнерского жанра именно для вебдизайна объясняется просто: большинство страниц и сайтов в современном Интернете совсем не нуждаются в обильной, «агрессивной», рекламного типа графике, а многие некоммерческие сайты просто не могут позволить себе иметь такого рода оформление (хотя качество дизайна, строго говоря, от плотности графики на единицу площади не зависит, стоимость и трудоемкость его определяются не в последнюю очередь именно этим параметром). Поэтому не что иное как логотип очень часто служит основой, лейтмотивом, главным (а на страницах, оформленных в академическом стиле, нередко и единственным) графическим элементом вебстраницы. В масштабах сайта логотип, повторяющийся на каждой странице, может к тому же служить осью, скрепляющей воедино дизайн сайта. Это, однако, лишь относительно прикладной аспект искусства логотипа. Для начинающего дизайнера важнее то, что работа над логотипом — великолепное упражнение, прекрасно развивающее вкус, позволяющее набить руку в практической работе с материалом (в первую очередь с формой и шрифтом) и нащупать свой собственный авторский стиль. Можно даже сказать, что дизайн логотипов — квинтэссенция дизайна как такового, так как жанр этот почти не позволяет пользоваться хоть сколько-нибудь «живописными», полифоническими приемами (которые дизайн по большей части заимствует из других визуальных искусств) и заставляет ограничиваться геометричной, стилизованной, абстрактной графикой, почти не зависящей от размера, цвета и текстуры. Один и тот же логотип должен хорошо смотреться и на экране компьютера, и на фирменном бланке, и на черно-белой странице факса, и на корпусе авторучки. Собственно говоря, только необходимость концентрироваться на дизайне сайтов заставляет меня рассматривать логотипы наравне с другими видами специализированной веб-графики; в общей теории дизайна логотипы заслуживали бы как минимум отдельной главы. Слегка преувеличивая, можно сказать, что логотип — это чистая форма в роли носителя информации. Все остальные аспекты композиции если и имеют значение для восприятия, то не более чем в роли украшении. Например, если вам не удается сделать знак полностью независимым от цветового аспекта (т. е. обеспечить его узнаваемость в строго черно-белом варианте), нужно по крайней мере освободиться от цветовых составляющих тона и насыщенности, оставив только яркость — т. е. сделав так, чтобы логотип выглядел прилично в серой (или иной монохромной) шкале. С другой стороны, если еще лет десять назад подавляющее большинство логотипов были изначально монохромными и лишь потом, если необходимо, раскрашивались (не больше чем в два цвета), у современного дизайнера цветовой 130

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

Диалектика формы. Два основных требования к любому логотипу, определяющие его маркетинговый потенциал, а в конечном счете и художественную ценность, -это узнаваемость (точнее, легкость запоминания и последующего узнавания) и оригинальность. Как и положено основополагающим принципам, узнаваемость (которая в первую очередь определяется простотой и внутренней логикой композиции) и оригинальность (т. е. необычность и даже «неправильность») кажутся на первый взгляд трудно совместимыми. Только противоречие между ними, однако, и способно стать животворящим началом, диалектическим «двигателем» композиции. Логотип останавливает взгляд только тогда, когда заключенная в нем скрытая информация, доступная лишь думающему, осмысленному взгляду, контрастирует с видимой простотой графики. Как смех (если верить психологам) возникает в тот момент, когда объем получаемой сознанием информации резко превышает ожидаемый, так и логотип производит впечатление только тогда, когда в нем есть форма «с секретом», носитель пусть небольшого, но парадокса — геометрического, топологического, семантического. Роль скрытого смысла может играть, например, контраст, многоаспектность которого (стр. 161) распознается не сразу, а также имитация трехмерности или подразумеваемое движение — свойства и в самом деле парадоксальные для по определению плоской и статической фигуры. Важное понятие «скрытого смысла» стоит пояснить на паре примеров. Логотип на рис. 81, а пользуется очень распространенным приемом «доказательства от противного»: форма пустот и вырезов в главной фигуре подразумевает наличие некоей другой фигуры — «пуансона», по форме которого были проделаны эти вырезы и в котором к тому же угадывается намек на очертания буквы «Q» (заглавной буквы названия компании). Фигура эта задает нам задачку, пусть и очень несложную, и интеллектуальное удовлетворение от ее решения составляет значительную часть эстетического удовлетворения от самого логотипа. На рис. 61, б скрытый смысл также многоаспектен; он заключается прежде всего в симметрии равноправных элементов (отношения «право-лево»), контрастирующей с иерархией наложения их друг на друга (отношения «ближе-дальше»), в не сразу замечаемой правильности формы обоих полукружий (прямолинейные участки контура в каждом из них лежат на одной прямой), а также в цветовой координации двух частей фигуры с двумя частями текста. Вообще же, классификация многочисленных разновидностей «скрытого смысла» и построение на этой основе общей теории логотипа — отдельная большая тема, ждущая еще своих исследователей...

131

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

РИС.

62

Чаще всего встречающиеся варианты композиции логотипа

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

(при этом в центре располагается не только графическая часть знака, но и сокращенное наименование, а иногда и год проведения конференции). Многие логотипы, созданные десятилетия назад, обходятся вообще без текста (точнее говоря, они могут сопровождаться названием компании, но оно не является их неотъемлемой частью). В те времена окружающая человека дизайн-среда не была еще заселена столь плотно, как сейчас, и в повседневной жизни логотипы встречались значительно реже. Поэтому, скажем, фирма Mercedes Benz могла рассчитывать, что ее простейшая, с минимумом «скрытого смысла» трехлучевая звездочка, вписанная в круг (рис. 63, в), будет эффективно работать на образ компании без лишних напоминаний о том, кому именно принадлежит этот знак. К сожалению, запас простых геометрических форм и их комбинаций, пригодных на роль символа, не бесконечен. Поэтому в последнее время ощутимой стала противоположная тенденция — текстовые логотипы без какой бы то ни было графики. Так, логотип Microsoft (рис. 63, б) состоит лишь из названия, набранного специально приспособленным для этой цели шрифтом с единственным украшением — маленьким треугольным вырезом в букве «о» (в малых кеглях этот вырез незаметен и логотип опознается исключительно по шрифту). Можно сказать, что чисто графический знак идеально подходит для Mercedes Benz no той же причине, по которой текстовый логотип работает для компании Microsoft. В первом случае действует примерно такая мотивация: «Мы настолько знамениты, что любой узнает наш знак даже без подписи», а во втором: «Уровень нашей компании общеизвестен, так что незачем пытаться поразить потребителя какой-то небывалой графикой». Для обычных же, средней руки компаний оптимальным остается традиционный подход, комбинирующий в едином логотипе графическую и текстовую части.

Рис. 63 Чисто графические (а) и чисто текстовые (б) логотипы, как правило, не богаты «скрытым смыслом», но некоторые из них становятся важной частью окружающего нас дизайн-ландшафта благодаря неутомимой деятельности их владельцев Аспекты логотипа. Нам остается рассмотреть особенности применения в логотипах основных дизайнерских материалов (стр. 77). Положительные рекомендации, которые можно дать желающему попробовать себя в создании логотипов, немногочисленны и весьма общи. С другой стороны, жанр этот налагает на дизайнера немало конкретных и довольно жестких ограничений, которые удобнее всего классифицировать по перечисленным в гл. II аспектам дизайн-композиции. Форма. Как я уже говорил, форма в логотипе — главный носитель информации как в художественном, так и в смысловом ее аспектах. Форма графики в логотипе, как правило, должна быть заметно проще очертаний расположенных в том же знаке букв текста; «скрытый смысл» знака, хотя и не должен сразу же бросаться в глаза, не может прятаться в тех особенностях формы, которые обнаруживаются только с помощью линейки или транспортира. Важно также помнить о принципе ограничения пропорций сверху (стр. 83) — принципе, особенно актуальном именно для логотипов, которым приходится работать в разных, в том числе и очень мелких, размерах. Это не значит, конечно, что в логотипе не должно быть нюансировки (стр. 171), — наоборот, нюансы, компенсирующие всевозможные иллюзии восприятия, необычайно важны именно для логотипов, которые обязаны оставаться безупречно правильными и при беглом взгляде, и при сколь угодно долгом рассматривании. Более того, в особо ответственных случаях приходится делать версии одного логотипа с разными наборами нюансов, предназначенные для разных размеров или разных цветовых решений. Так, логотип AT&T (рис. 67 на стр. 275) существует в нескольких вариантах для разных размеров и для позитивного (темным по светлому) и негативного (светлым по темному) начертаний; эти варианты отличаются количеством и формой горизонтальных полосок, из которых складывается изображение шара. По адресу www.att.com/identity/standards/graphic/ сама фирма AT&T дает всем заинтересованным дизайнерам очень детальные и поучительные инструкции: как выбрать один из вариантов логотипа, какие схемы его раскраски допустимы, как правильно разместить знак на странице, и даже — какие ошибки типичны для 133

дизайнеров, работающих с этим логотипом... Хотя абстрактность (в достаточно широком понимании) для логотипа обязательна, она не ведет к ограниченности репертуаром фигур школьной геометрии. Поскольку набор таких фигур и их комбинаций невелик и почти исчерпан, приметой современности стали логотипы, смело отбрасывающие каноны прямолинейности и геометрической простоты и стремящиеся вместо этого к простоте психологической, которая прекрасно уживается с аморфностью (стр. 100). Так, логотип фирмы Lucent Technologies (рис. 64) представляет собой, несмотря на всю натуралистическую экспрессию и далекую от идеального круга форму «мазка кистью», не менее абстрактную реализацию идеи круга, чем самый что ни на есть математически правильный круг.

Lucent Technologies Рис. 64 «Красное колесо» фирмы Lucent призвано символизировать оригинальность и новаторский дух ее разработок Конечно, далеко не любая аморфность способна быть носителем абстрактного начала. Более того, не случайно именно бесформенность в сознании непрофессионала выступает как прямая противоположность традиционно понимаемой геометрической символике. Рискну предположить, что единственное свойство, позволяющее подчеркнуто антигеометричной аморфной фигуре выполнять функцию абстрактного символа, — это рукотворность, безошибочно опознаваемая искусственность, «след руки» художника. Рукотворная аморфность всегда несет привкус небрежности, торопливости, особой грубоватой эстетики. Но до тех пор, пока в характере формы рукотворная экспрессия доминирует над безлично-натуральными проявлениями расплывчатости, размытости или разбрызгивания, простота этой формы определенно работает на общее ощущение символизма. Можно сказать, что искусство логотипа, повторяя в общих чертах эволюцию других изобразительных искусств, прошло за последние десятилетия путь от барокко вензелей и виньеток, через аскетизм раннего авангарда («Черный квадрат» Малевича), к свободе и нарочитой небрежности абстрактного экспрессионизма (полотна Поллока и Ротко). Пожалуй, единственная форма, удовлетворяющая требованию рукотворности и притом достаточно интересная визуально, — это имитация мазка грубой кистью, образец которой мы и видим в логотипе Lucent. Менее удачный пример — лепестки цветка на официальной эмблеме Олимпиады в Нагано (рис. 65), несущие явственный элемент аморфности и хаотичности, но именно из-за отсутствия рукотворного начала едва вытягивающие на роль логотипа. Формы эти не есть абстракция цветка, а лишь в какой-то мере стилизованное его изображение. Обратите также внимание, что аморфность формы ни в коем случае не должна распространяться на текстурный аспект графики: если геометрически более простые формы допускают использование двух и более цветов, то аморфные объекты обязаны компенсировать сложность очертаний строгой одноцветностью, а нелинейность их контура не должна сочетаться с какой бы то ни было размытостью или неоднородностями внутри поверхности. С этой точки зрения серые тени под разноцветными лепестками в эмблеме Нагано хотя и не пользуются размытостью, как подобало бы падающим теням, тем не менее ведут к еще большему «дребезжанию» композиции, делая ее едва ли пригодной на роль знака.

РИС. 65 Эмблемы олимпийских игр всегда были характерными представителями дизайна своего времени

Шрифт. Требование цельности и простоты делает практически невозможным создание логотипа с участием 134

двух и более разных шрифтов. Единственное исключение — чисто текстовый логотип, в котором отсутствие графики позволяет сконцентрироваться на сложных отношениях пары контрастирующих шрифтов (как в заголовке журнала «Internet», см. рис. 36, а на стр. 137). В то же время разные части текста знака могут противопоставляться по цвету или начертанию одного и того же шрифта; обычно отношения между элементами текста как-то координируются с отношениями внутри графической части знака. Как вы уже знаете, самая естественная вариация начертания — изменение насыщенности рубленых (стр. 125), и именно пара начертаний обычной и повышенной насыщенности одного рубленого шрифта — одно из самых употребительных шрифтовых решений в современных логотипах. Хотя у рубленых шрифтов есть важное преимущество читабельности в малых кеглях и хорошей сочетаемости с любой графикой, вполне приемлемы в логотипах и простые по рисунку и прозрачные для восприятия (стр. 129) шрифты с засечками. Нужно лишь учитывать, что эти последние налагают более суровые ограничения на графическую часть знака: чтобы контраст между текстом и графикой звучал достаточно отчетливо, форма не должна содержать сложных криволинейных контуров и мелких деталей (рис. 66). С рублеными же шрифтами требование это не столь категорично, и нередко можно видеть даже примеры «перевернутого» контраста, когда формы графической части кажутся явно сложнее очертаний рубленых букв (как в логотипе Lucent на рис. 64, в котором из-за насыщенности графики мелкими деталями никакой шрифт с засечками не смог бы ужиться).

Рис. 66 Использование части особой лаконичности

в логотипе шрифты с засечками требует от графической

Что же касается декоративных шрифтов (стр. 125), которые, казалось бы, просто созданы для логотипов, те же самые законы единства заставляют пользоваться ими с большой осторожностью — и, скорее всего, только для чисто текстовых логотипов, в которых особенности начертаний букв могут стать единственным графическим мотивом, отчасти заменяющим отсутствующую графику. Если же необычный шрифт сопровождается графическими формами, эти последние не должны быть ни сложными, ни простыми, а должны в точности соответствовать по характеру рисунка самому шрифту, буквально «вырастать» из него. Удачные примеры логотипов с декоративными шрифтами крайне немногочисленны — даже при тщательном соблюдении единства стиля графики и текста результат, скорее всего, на современный взгляд будет казаться несколько вычурным и нарочитым. В употреблении строчных и заглавных логотипы следуют общей тенденции — стиль «все строчные» в большинстве случаев выглядит более современно, чем выделение заглавной первой буквы названия и тем более первой буквы каждого слова. Стиль «все заглавные» выглядит на этом фоне привлекательной золотой серединой, особенно если учесть, что благодаря отсутствию выносных элементов надпись заглавными буквами легче стыкуется с графикой. Из других параметров набора текста изредка применяются вариации кернинга, чаще всего тесное сближение и даже частичное наложение букв друг на друга. Все сказанное на стр. 139 о недопустимости изменений пропорций текстовых строк в полной мере относится и к логотипам. Помните, что в этом жанре у вас есть шанс создать нечто гораздо более долговечное, чем обычная дизайн-композиция, — так что стоит ли соблазняться дешевыми приемами? Цвет. Я уже упоминал, что хороший логотип не должен существенно зависеть от цветового аспекта. Нельзя, конечно, требовать, чтобы знак хорошо смотрелся при любой взятой с потолка раскраске, но во всяком случае он должен сохранять узнаваемость и художественные достоинства не только с подобранным дизайнером цветовым решением, но и в серой шкале, а в идеале и в двухцветном черно-белом варианте. Большинство логотипов используют только один цвет на все элементы или же два цвета, один из которых — черный или белый. Существенно реже встречаются композиции с двумя контрастирующими или поддерживающими друг друга «цветными» цветами (стр. 110). В логотипах нельзя пользоваться неочевидными оттенками — слишком темными, слишком светлыми или слабо насыщенными, так как их характерные особенности вряд ли выживут при многочисленных трансформациях, через которые придется пройти вашему логотипу. Наконец, нужно также учитывать цветовой охват модели CMYK (стр. 63) — даже если вы делаете логотип для веб-сайта, вполне вероятно, что заказчик захочет потом распечатать его, безнадежно испортив слишком яркий и насыщенный цвет, принципиально невоспроизводимый на бумаге. Но и это не все. Еще одно цветовое ограничение носит, пожалуй, субъективный характер, однако не становится от этого менее серьезным. Логотип, который должен быть по возможности замкнутым и самодостаточным объектом, отторгает многие тона цветового спектра из-за их открытости, обращенности к зрителю, явственно ощущаемого потенциала развития и, следовательно, неустойчивости. Это относится в первую очередь к теплым тонам, которые у большинства зрителей ассоциируются с объектами живыми, 135

органическими и потому противостоящими тому абстрактному началу, которое лежит в основе любого логотипа. Собственно говоря, при строго традиционном подходе к выбору цвета допустимым оказывается лишь один-единственный цвет — синий и его ближайшие соседи по цветовому кругу. Конечно, никто не мешает вам попробовать для вашего логотипа какой-нибудь необычный, подчеркнуто «несиний» цвет. Однако предлагать этот цвет в качестве окончательного можно лишь в том случае, если вы знаете, что вы сами будете работать с этим логотипом на страницах сайта и, следовательно, сможете позаботиться об активной поддержке цвета знака в цветовой гамме всей композиции. Кроме того, приготовьтесь к возражениям со стороны заказчика, которые почти наверняка вызовет у него любой цвет, кроме синего. Я бы рекомендовал поэтому отложить цветовое решение до окончательного согласования формы знака, а для первоначального представления заказчику ваших вариантов пользоваться только шкалой серых и синими тонами. Текстура. В логотипах безусловно недопустимы ни фотографика, ни какие бы то ни было материальные текстуры, ни «скульптурная» трехмерность (стр. 293): композиция, использующая эти виды текстур, может быть визуалом или заголовком, но не логотипом в собственном смысле этого слова. Дело здесь не только в том, что сложные текстуры с трудом воспроизводимы на бумаге и не выдерживают цветовой редукции; главная причина — в отсутствии в них элемента благородной рукотворности, обработанности, обдуманности, который только и способен создать в логотипе «скрытый смысл», доступный опять-таки только разумному взгляду. «Небо с облаками» может служить фоном, не несущим никакой смысловой нагрузки (или же наполняемым смыслом по произволу зрителя), но абсолютно немыслимо в таком концентрированном сгустке смысла, как логотип.

Рис. 67 Логотип AT&T был создан в 1982 г., в самом начале повальной моды на имитацию трехмерности, и именно этот прием лежит в основе его «скрытого смысла» Репертуар текстур логотипа ограничен, таким образом, плоским цветом и геометрическими текстурами с не слишком мелкими деталями (не забывайте о принципе ограничения пропорции сверху). Как мы только что видели, требование простоты формы относится скорее к простоте ее восприятия, а не к объективной сложности фигуры, и «психологически простая» форма вполне может оказаться геометрически очень сложной, иррегулярной, несводимой к элементарным составляющим. Простота текстуры, наоборот, — требование скорее формальное, и плоский цвет вполне может служить для выражения совсем не плоских свойств и отношений фигур. Так, в логотипе фирмы AT&T (рис. 67) с помощью плоскоцветных полосок передано ощущение выпуклости шара — иными словами, типично фотографическая текстура реализована совсем не фотографическими методами. Хотя фотографические текстуры не могут быть частью логотипа как такового, их контраст с его принципиальной плоскоцветностью делает их эффектным украшением того же самого логотипа в составе дизайн-композиции. Неяркая размытая тень, подстеленная под логотип, именно благодаря текстурному контрасту является одним из самых популярных приемов оформления заголовков и логотипов в веб-графике. БАННЕРЫ Мы уже затрагивали тему рекламных баннеров в гл. 3, обсуждая их «заголовочный» аспект и возможность безболезненного вписывания чужеродной рекламной вставки в композицию веб-страницы (стр. 204). Здесь нам предстоит ближе познакомиться с рекламными баннерами как специфическим жанром веб-графики, в котором привычные дизайнеру законы эстетического восприятия почти вытесняются особыми, свойственными только рекламному дизайну принципами подачи информации — информации по необходимости поверхностной, апеллирующей к чувствам чаще, чем к разуму, намеренно несерьезной и даже слегка провокационной. К сожалению, красивый баннер совсем не обязательно эффективен как рекламный инструмент, а эффективный не обязательно красив.

136

Сколько натикало? Прежде чем говорить о тонкостях баннерного дизайна, давайте вспомним, как вообще работает реклама в Интернете. Баннер — графическая вставка стандартного размера — вывешивается на странице, группе страниц или на целом сайте по договоренности между автором или публикатором этой страницы и рекламодателем, на сайт которого ведет гипертекстовая ссылка с этого баннера. Конечная цель рекламодателя, ради которой он готов платить за размещение баннера деньгами или ответной рекламой, — привлечь посетителей на свой сайт. На баннерной рекламе кормится несметное количество контент-сайтов, рекламных агентств, посредников, служб обмена баннерами и производителей программных продуктов для автоматизации всего, что только можно автоматизировать в этой несложной схеме. В качестве упражнения на разбор интернетовских технологии интересно рассмотреть механизм автоматической смены баннеров на странице с рекламой. Возьмем самый распространенный сценарий: владелец одной страницы или небольшого сайта подписывается на услуги службы обмена баннерами, обязуясь вывешивать у себя чужую и заранее ему неизвестную (но, как правило, подобранную по тематике) рекламу. В обмен на это он получает несколько меньшее количество показов его собственных баннеров на других, также подобранных по тематике сайтах. Служба обмена при этом живет за счет «маржи» между объемами полученной и предоставленной рекламы, которую она может продавать другим рекламодателям за деньги. Статистика показывает, что ротация баннеров (подстановка новой картинки при каждом запросе страницы с сервера) повышает эффективность рекламы по сравнению со статическими баннерами, висящими на одном и том же месте страницы в течение дней и недель. В то же время владелец сайта не имеет возможности динамически менять HTML-код своей страницы, так чтобы при каждой загрузке страницы на ней появлялся новый, случайно выбранный из общего репертуара баннер, — тем более что сами файлы баннеров хранятся на сервере службы обмена. И хотя атрибут src тега IMG может указывать на любой URL, в том числе расположенный и на другом сервере сети, адреса всех входящих в ротацию баннеров известны только службе обмена (собственно говоря, каждый входящий в систему сайт может в любой момент изменить набор своих баннеров). Для ротации рекламы на баннерном сервере устанавливается специальная CGIпрограмма (стр. 71), работающая с текущими базами данных баннеров, рекламодателей и участвующих в системе сайтов. Владельцу страницы достаточно прописать в соответствующем теге IMG особый URL, комбинирующий адрес сервера баннерной службы, обращение к CGI-программе на этом сервере и код сайтаучастника, по которому программа узнает, из какой тематической группы выбирать (по случайному алгоритму) баннер и чей счетчик показов увеличивать. Это значит, в частности, что загрузка страницы с рекламой может замедляться из-за перегрузки баннерного сервера. Поэтому все сколько-нибудь крупные контент-сайты предпочитают устанавливать на своих серверах собственные системы управления рекламой, позволяющие минимизировать задержки, полностью контролировать всю показываемую на сайте рекламу, прописывать свой alt-текст для каждого баннера и включать в ротацию составные HTML-баннеры (стр. 285). Главным мерилом эффективности баннера считается отношение числа посетителей, щелкнувших по нему, к общему числу видевших страницу с этим баннером. Эта величина, обозначаемая по-английски аббревиатурой CTR (click-through ratio, что можно было бы перевести на русский словом «проклик»), поддается объективному измерению: по статистике сервера нетрудно подсчитать, сколько копий баннера было перекачано пользователям и сколько раз произошел переход по соответствующей ссылке. Оплата рекламы, тем не менее, рассчитывается обычно в зависимости от общего количества показов баннера (цены сейчас лежат в диапазоне от 3 до 50 долларов за тысячу показов в зависимости от степени адресности рекламы). Лишь изредка цена привязывается не к количеству показов, а к количеству переходов по баннерной ссылке или даже к количеству тех людей, которые, попав через баннер на сайт рекламодателя, заказали там его продукт или услугу. Очевидно, что при таком сугубо коммерческом подходе к делу главное и едва ли не единственное требование к баннеру со стороны заказчика — его эффективность, которую естественно измерять в терминах CTR. На самом деле, конечно же, на CTR свет клином не сошелся — нередко баннер с довольно скромным «прокликом», но с качественным и релевантным текстом способен привести на сайт рекламодателя куда более ценных посетителей, чем бьющий на инстинкт баннер с рекордным CTR. Кроме рекламы, ориентированной на завлечение посетителей, не менее важна реклама имиджевая, — которая, хоть и не приносит немедленной выгоды, занимается очень важным делом: «впечатывает» образ фирмы в память потребителя, засеивает его подсознание зернами информации, которые должны прорасти в момент принятия решения. Хотя в баннерной рекламе имиджевый компонент не менее важен, чем в любой другой, 137

чисто имиджевые баннеры все же встречаются редко, и для большинства рекламной продукции в Интернете CTR по прежнему остается самым важным мерилом эффективности. Форматы. Самый распространенный из стандартных форматов баннеров — 468х60 пикселов. Кроме того, встречаются «половинные» баннеры 234х60, баннеры форматов 400х40, 200х40, 120х90, минибаннеры 88х31 и квадратные баннеры 125х125 (к последним, кстати, слово «баннер» не очень-то подходит, так как исходное его значение — «транспарант, заголовок»). В нужное время и в нужном месте. От чего же зависит CTR баннера? Прежде всего, огромное влияние на этот показатель оказывают внешние по отношению к самому баннеру обстоятельства — то, на каком сайте, на какой странице сайта и в каком месте страницы он вывешен. Понятно, что реклама таблеток от кашля на сайте, посвященном программированию на языке Perl, имеет мало шансов на успех. Поэтому первое, что делает потенциальный рекламодатель, — ищет для размещения баннеров тематически близкие ему сайты или категории сайтов (в поисковых системах или службах обмена баннерами). Отсюда же, кстати, следует, что CTR баннера, полученный на одной странице или даже на одном сайте, не является статистически достоверной величиной — объективный интерес представляет лишь средний CTR баннера в охватывающей как минимум несколько сайтов рекламной кампании. Эффективность баннера зависит также от характеристик страницы, на которой он вывешен. Веб-страницу можно сравнить с комнатой, имеющей одну дверь на вход и множество дверей-ссылок на выход. Очевидно, что чем меньше у страницы таких выходов, одним из которых является и рекламный баннер, тем большая доля посетителей пройдет через каждую из дверей. Можно, однако, заметить и противоположный эффект: как правило, чем больше текста и ссылок на странице, тем дольше на ней задерживается посетитель и, следовательно, тем выше вероятность того, что его внимание будет привлечено баннером. Против последнего аргумента можно тем не менее возразить, что при чтении текста хоть сколько-нибудь значительного объема баннер обычно вообще не виден из-за промотки содержимого окна. Учет еще и этого обстоятельства позволяет прийти к выводу, что идеальными для размещения баннеров будут насыщенные информацией, преимущественно текстовые, с небольшим количеством ссылок страницы не больше двух-трех экранов текста в длину. Именно к этому идеалу и стремится большинство контент-сайтов. В то же время, если кроме баннера страница не содержит никакой значимой, необходимой для понимания смысла графики, эффективность рекламы несколько снижается. Дело в том, что немалая доля пользователей Интернета (по некоторым оценкам, до 20%) отключают загрузку изображений в своих броузерах, — и если они решат, что на этой странице нет никакого смысла нажимать кнопку Load Images, они так никогда не увидят и баннера (правда, если изображение баннера снабжено altтекстом, этого может оказаться достаточно для срабатывания рекламы). И наконец, еще одно второстепенное обстоятельство. Проклик баннеров на первой странице всегда чуть выше, чем на внутренних страницах сайта: большинство посетителей еще не успевают как следует заинтересоваться сайтом, на который они только что попали, и потому их легко отвлечь посторонней рекламой. Слева при входе. Стандартное размещение баннера в самом верху страницы (справа от фоновой полосы, если та присутствует, стр. 262) привлекает своей ненавязчивостью. Такая схема построения страницы настолько привычна, что реклама, хоть и получает свою долю внимания зрителя (тем более что из всей графики она появляется на странице самой первой), стоит подчеркнуто в стороне от основного содержимого страницы и потому почти не раздражает. Заметно увеличить эффективность при этом можно, повторив тот же баннер в самом низу страницы. Вставлять баннеры в разрыв текста могут позволить себе только очень жадные сайты, заботящиеся о проклике больше, чем о душевном равновесии своих посетителей. Как разновидность этой схемы, на первых страницах некоторых сайтов применяются небольшие (обычно 125х125 пикселов) квадратные баннеры, размещаемые в правой колонке страницы. Такие баннеры, оставаясь в известной мере на периферии восприятия, тем не менее дают очень хороший CTR — как утверждают, из-за своей близости к вертикальной полосе прокрутки окна броузера, над которой большую часть времени находится курсор мыши пользователя.

138

Особняком стоят дизайнерские решения, отходящие от традиционного краевого расположения баннера, в которых в то же время баннеры не становятся помехой восприятию материала. Так, зачастую можно перенести баннер под неизменяемую навигационную панель; на сайте books.ru (пример 15) широкая верхняя полоса с логотипом и ссылками, хотя и доминирует на странице визуально, практической информации несет мало, так что читателю очень редко приходится запинаться взглядом о расположенный под ней баннер (пересечение этой чужеродной вставки к тому же дополнительно облегчено «трамплином» — еще одной горизонтальной полосой под баннером, повторяющей текстуру верхней полосы). Больше жизни. Давайте теперь познакомимся с выработанными практикой подходами к дизайну баннеров и с теми из (уже известных нам) принципов и материалов дизайна, которые особенно сильно влияют на эффективность рекламы. При выборе приоритетов для каждого конкретного проекта нужно учитывать множество обстоятельств — предметную область рекламной кампании, предполагаемую аудиторию, традиционный дизайнерский стиль фирмы-заказчика. Главное, ради чего существует на свете баннер, — щелчок по нему мышью пользователя — есть действие в первую очередь динамическое. Вполне естественно поэтому, что выражаемая дизайнерскими средствами динамика, как явная, так и подразумеваемая (стр. 166), играет в дизайне баннера главную роль, а начала единства и баланса зачастую приносятся ей в жертву. Направленность этой динамики в большинстве случаев особого значения не имеет; важно расшевелить восприятие пользователя, придать неожиданный импульс его взгляду, лениво скользящему по странице, а еще лучше — курсору его мыши. Даже если направление этого импульса будет не совсем предсказуемо, вероятность желанного щелчка мышью напрямую зависит от его силы. Именно по этой причине анимация стала в последнее время обязательным атрибутом большинства рекламных баннеров, a GIF, соответственно, — почти единственным применяющимся для баннеров форматом. Даже незначительное шевеление, вращение или подмигивание привлекает взгляд и заметно повышает CTR; современные же баннеры нередко представляют собой целые мультфильмы, не только с движущимися персонажами, но и со сменяющимися по нескольку раз за цикл декорациями. Пьеса в трех действиях. В сюжете любого баннера, даже если анимация как таковая в нем не используется, можно выделить три главных этапа, схожие с частями классической драмы: завязка, экспозиция (развитие) и развязка. Цель первого этапа — привлечь внимание зрителя, выбить его из колеи, заставить ожидать дальнейшего; на втором этапе зрителю сообщается соль рекламы, основная информация баннера, объясняется причина, по которой он должен соблазниться именно этим продуктом или услугой; наконец, третий этап снова делает упор на чувства, а не на разум и, как кода музыкального произведения, разряжает накопившееся напряжение либо раскрытием тайны личности рекламодателя (которая до сих пор оставалась скрытой), либо торжественным объявлением его адреса, либо просто призывом «click here» (а иногда даже анимированным изображением курсора мыши, который якобы и делает на баннере этот самый вожделенный click). В анимированных баннерах — более сложных и, как правило, более дорогих — эти три этапа разделены во времени (рис. 68). В менее притязательных образцах рекламной продукции, анимацией не пользующихся, этапы эти могут быть разнесены только в пространстве; при этом обычное направление восприятия информации — слева направо — диктует расположение «развязки сюжета» на правом конце баннерной полоски. Это вполне согласуется и с требованиями эргономики — как я уже упоминал, курсор мыши, чей выход на сцену предполагается именно в третьем действии, обычно находится ближе к правому краю экрана (и, следовательно, баннера). В анимационных баннерах максимум динамики приходится на первый этап, на котором почти всегда чтонибудь движется, взрывается или прокручивается по всей площади баннера. Второй, информационный этап обычно представлен сменяющими друг друга статическими текстами. Наконец, на третьем этапе снова возникает динамика, но несколько иного рода — вместо движения по всей площади баннера применяются достаточно локальные мигания, переливы и тому подобные эффекты, как бы закрепляющие общий эффект и приглашающие тех, кто насладился представлением, сделать щелчок и продолжить таким образом знакомство с рекламодателем. Эта смена тональности в конце мультика — очень важный момент. Исследования показывают, что при всей своей наивности призыв «click here» увеличивает CTR баннера на 10—15% — очевидно, не потому, что без него пользователь не догадался бы, где нужно щелкать, а просто потому, что привычная и ожидаемая формула ставит точку в развитии сюжета и подталкивает зрителя к переходу от созерцания к действию. Не меньшей завершенностью баннер должен обладать и в других своих аспектах; даже если он не пользуется «широкоэкранной» анимацией, а динамика его выражена статическими средствами, движение не должно «идти вразнос» или теряться в бесконечности, а обязательно должно концентрироваться в некоторой точке схода, фокусе силовых линий, финальном аккорде, после которого зрителю не останется ничего, кроме как вознаградить автора аплодисментами — щелкнуть мышью. Таковы основы баннерной драматургии. Разумеется, как в театре, так и в рекламном дизайне немало заслуживающих внимания работ нарушают общепринятые каноны. 139

Некоторые баннеры ограничиваются только первой из трех частей, бросив все силы на привлечение внимания и рассчитывая на любопытство зрителей, которым все-таки захочется узнать, кому принадлежит столь яркий и интересный, хотя и не слишком информативный баннер. Другие баннеры опускают информативную середину и от возбуждающей части непосредственно переходят к побуждающей. Противоположность такому подходу — «скучный» баннер, сразу открывающий все свои карты, состоящий преимущественно из текста и делающий упор на привлекательность своей информации. Апелляция такого баннера к чувствам зрителя ограничивается в лучшем случае изображением логотипа и цитированием рекламного лозунга компании-рекламодателя. В начале было что-то. Обычную веб-страницу можно сравнить с тем, что называлось когда-то «литературномузыкальной композицией», в которой прозаический текст перемежается музыкальными (т. е. графическими) вставками. Баннер же с этой точки зрения правильнее уподобить песне, в которой текст и музыка сливаются в неделимое целое. Поэтому даже в тех случаях, когда общая идея баннера принадлежит заказчику, дизайнеру приходится быть «поэтом» в не меньшей степени, чем «музыкантом». Сочинение рекламных текстов — особая наука со своими принципами, правилами и запретами. Стремление к компактности и эффективности сообщения позволяет отказаться от многих ограничений формальной грамматики. Большинство предложений относятся к категории назывных, перечисления главных ключевых слов (того, что по-английски называется «buzzwords») могут не сопровождаться никакими глаголами; сконцентрированные списки глаголов, наоборот, лишены подлежащих. Важная роль принадлежит «словам действия», в основном глаголам в повелительном наклонении, вроде «click», «win», «go», «try», «жми», «давай», «пошли». Разумеется, как и в любой рекламе, не обходится без превосходных степеней и восторженных цитат из журнальных обзоров. Менее известно, что CTR можно повысить формулировкой той же самой фразы в виде вопросительного, а не повествовательного предложения (например, «хотите ли вы, чтобы ваш сайт получил награду на конкурсе дизайна?» вместо «сайты нашей студии получают награды на конкурсах дизайна»). Объяснить этот эффект просто: вместо безличного, неизвестно к кому относящегося высказывания читатель видит конкретный, именно ему адресованный вопрос, который инстинкт вежливости заставляет как минимум дочитать до конца. Поэтому особенно эффективны вопросы, включающие обращение к читателю, типа «знаете ли вы...», «хотите ли вы...», «есть ли у вас...» и т. п. Согласно правилам русского языка, написание местоимения «Вы» с заглавной буквы допустимо только при уважительном обращении к одному лицу, которое известно автору текста если не лично, то по крайней мере по имени. Рекламное же «вы», обращенное ко всем потребителям рекламы без разбора и использующее «переход на личности» только в качестве приема, условность которого очевидна для всех, под это определение явно не подходит. Поэтому написание «Вы», все еще встречающееся в русскоязычной рекламе, выглядит очень претенциозно и, пожалуй, даже безграмотно. Особенно важен вопрос как средство привлечения внимания на первом из трех этапов сценария баннера (рис. 69, 7S). У большинства баннеров первая часть вопросительная, вторая — повествовательная, а третья — восклицательная (реже восклицательный акцент переносится с третьей части на вторую). Эффект повышения CTR при использовании вопросительных предложений имеет место даже тогда, когда вопрос уменьшает, по сравнению с повествовательным баннером, общее количество полезной информации. Бьющие на любопытство баннеры, содержащие неотвеченные вопросы и зачастую даже не раскрывающие тайну личности рекламодателя, дают стабильно высокие результаты — хотя о качестве контингента, привлеченного такими баннерами, конечно, можно спорить: вполне вероятно, что повышение CTR сводится на нет уменьшением доли действительно заинтересованных посетителей среди всех «купившихся» на загадочный баннер. При всех несомненных различиях в менталитете западных и российских создателей и потребителей рекламы (об этих различиях мы еще будем говорить чуть ниже) самое сильное и эффективно действующее слово бан-нерного текста во всем мире одно и то же — это «FREE» по-английски и «БЕСПЛАТНО» по-русски. Даже если вы раздаете даром нечто такое, что подавляющее большинство по зрелом размышлении не согласится взять и с доплатой, перспектива получить хоть что-то «на халяву» способна отвлечь от важных дел и затащить на ваш сайт даже самых серьезных и занятых людей. В отличие от лукавых, загадочных или недоговаривающих чего-то баннеров, обещание «бесплатного сыра» повышает не только проклик как таковой, но и общую эффективность рекламы: если уж вам удалось соблазнить посетителя скачать бесплатную программу или подписаться на бесплатную услугу, вероятность того, что он станет вашим клиентом или, во всяком случае, запомнит название вашей фирмы, резко увеличивается.

140

Рис. 68 Типичный трехчастный анимированный баннер. Кадры с 1 по 7 — завязка, привлечение внимания: трудно удержаться и не проследить с сочувствием за страданиями симпатичного персонажа. Второй этап (кадр 8) — заявление основной темы: оказывается, речь идет о некоем продукте, который поможет вам следить за многочисленными конференциями и выставками, чтобы они не заставали вас врасплох. Наконец, финал баннера (кадр 9) решен в традиционном стиле: мы видим полное название продукта, имя разработчика (компания IBM) и, само собой, неизбежное «click here»... Собственная гордость. Как я уже упоминал, важнейшим мерилом эффективности баннера повсеместно считается величина CTR. Однако представления о приоритетах в создании рекламы и о роли ее в деятельности фирмы сильно отличаются на Западе и в России. Если западные фирмы — как те, что у всех на слуху, так и мало кому известные — на одном уровне важности с CTR ставят имиджевый компонент, опечатывание (то, что поанглийски называется «branding») дизайн-образа и названия фирмы в сознание даже тех, кто не собирается щелкать мышью на баннере, то в русскоязычной рекламе пока что преобладает чисто спортивный интерес повышения проклика любыми средствами.

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

141

РИС. 70 Еще один баннер, пользующийся вопросом для привлечения внимания в самом начале сюжета. Особенность этого экземпляра — в том, что главная тема сообщения («graduate schools») заявлена в первом же кадре, а необычно бедный информацией этап экспозиции (кадры 2—4) намеренно задерживает действие своей монотонной анимацией (поворачивающийся из стороны в сторону «аспирант» с биноклем) нагнетает напряжение перед финальной развязкой (кадр 5)

Этому неявно способствуют и особенности русскоязычной аудитории. Средний пользователь Интернета в нашей стране чаще выходит в сеть, чтобы развлечься, почитать что-нибудь интересное или пообщаться с друзьями по IRC или ICQ, чем с какой-то конкретной деловой целью. Поэтому и увлечь его в сторону интересным баннером намного проще, чем пользователя западного. Имеет значение также то, что круг производителей и потребителей интернетовской рекламы в нашей стране пока еще очень узок — в русском Интернете, как в большой деревне, все знают всех, и очень часто щелчок по баннеру означает не заинтересованность потенциального клиента, а ревнивый интерес конкурента. Поэтому нет ничего удивительного в том, что средняя величина CTR, на Западе составляющая 2—3%, в русском Интернете ближе к 4%, — и не редкость баннеры, проклик которых у варящейся в собственном соку русскоязычной аудитории зашкаливает за десять и даже двадцать процентов. Удар ниже пояса. К сожалению, столь впечатляющие результаты нередко достигаются ухищрениями, уже не имеющими отношения ни к сюжету, ни к дизайну баннера. В частности, за последние год-полтора повальной модой стало использование в баннерной графике «муляжей» элементов интерфейса операционной системы — кнопок, полос прокрутки, флажков и т. п. Баннеры вроде показанного на рис. 71, а эксплуатируют подсознательный импульс тянуться мышкой ко всему, что может означать какое бы то ни было движение вперед, переход от экрана к экрану, смену впечатлений, — в том числе и к любым стандартным (и потому мгновенно узнаваемым) элементам компьютерного интерфейса. Первыми появились баннеры с изображениями полей ввода, кнопок «Искать», «Перейти», «Показать» и списков с прокруткой; популярным приемом был какой-нибудь провокационный вопрос, два варианта ответа на который представлены парой интерфейсных кнопок («Да» и «Нет», а иногда и что-нибудь позаковыристее, вроде «Конечно, хочу» и «За кого вы меня принимаете?»). Затем кому-то пришла в голову идея добавить к соблазну нажатия на кнопку — хоть и очень сильному, но все же не дающему стопроцентного эффекта — совершенно непреодолимый соблазн промотать, чтобы посмотреть, «что там дальше». Было время, когда чуть ли не большинство баннеров в русском Интернете украшались изображениями вертикальной полосы прокрутки вдоль правого края. К счастью, довольно скоро аудитория выработала иммунитет к этому патентованному снадобью, и сейчас его эффект, видимо, близок к нулю. Пожалуй, история этого изобретения — самая наглядная иллюстрация того, как последние крупицы эстетики могут приноситься в жертву всемогущему проклику и как всегда свойственная рекламе провокационность может зашкаливать за допустимые пределы.

142

Рис. 71 Баннер (и) довольно типичен для русского Интернета: он комбинирует два самых распространенных «муляжи» элементов интерфейсы — поле вводи с кнопкой поиска и полосу прокрутки вдоль правого края. Баннер (б), наоборот, без обмина и подвоха предлагает вам раскрыть самый настоящий выпадающий список, элементы которого разъясняют и конкретизируют основное содержание баннера Характерно, что в англоязычном рекламном дизайне такого повального увлечения «нечестными» приемами не было, и вполне невинные намеки вроде интерфейсных кнопок с надписью «click here» встречаются только как исключение. Вместо этого весьма популярны составные баннеры, размещающие на баннерном прямоугольнике стандартного размера одну-две графические вставки и несколько настоящих кнопок, списков или полей ввода. Пользователь при этом может свободно разворачивать списки, устанавливать и сбрасывать флажки, писать в полях ввода и, разумеется, нажимать кнопки, получая от этого определенное удовольствие. Даже если завершающая кнопка в такой мини-форме ведет на одну и ту же статическую страницу вне зависимости от положения остальных переключателей или списков (а так оно чаще всего и бывает), пользователь чувствует себя при этом обманутым гораздо меньше, чем когда ему подсовывают откровенную бутафорию с «муляжами». Очевидно, что, если только такой интерактивный баннер не вписан жестко и навсегда в исходный код страницы, программа, управляющая размещением рекламы, должна иметь возможность вставлять в страницу целые HTML-фрагменты, а не просто подставлять разные изображения по фиксированному URL. Пока что это возможно только с помощью SSI (стр. 71) или других технологий генерации страниц «на лету», поэтому программа управления баннерами должна обязательно стоять прямо на сервере, размещающем эту рекламу. Поскольку иметь собственный сервер могут позволить себе только достаточно крупные контент-сайты, рядовым сайтам и страницам приходится покупать интерактивные составные баннеры поштучно и развешивать их вручную. Смена поколений. Даже самый пробивной баннер со временем неумолимо стареет, «намозоливает глаза» аудитории, и CTR его снижается. Разумеется, для англоязычной рекламы этот эффект «выгорания» выражен довольно слабо из-за большого объема аудитории и, соответственно, большого количества потенциальных заинтересовавшихся, Однако и там срок жизни баннера ограничен — подсчитано, что после приблизительно двухсот тысяч показов CTR баннера снижается вдвое. Понятно, что узость русскоязычной аудитории заставляет русские баннеры стариться гораздо быстрее — парадоксальным образом работа для сравнительно узкого круга требует здесь от создателей рекламы более (а не менее) интенсивного потока свежей продукции. На килограмм живого веса. Последний в списке, но далеко не последний по важности фактор, оказывающий влияние на CTR баннера, — это объем графического файла в байтах: чем дольше загружается баннер, тем большая доля читателей страницы не дождется его полного проявления и, следовательно, будет навсегда потеряна для рекламодателя. На западных сайтах верхней границей размера для баннера формата 468х60 считается 15 Кб, а на некоторых живущих за счет рекламы и потому стремящихся к максимальной эффективности контент-сайтах — даже и 10 Кб. В России, где пропускная способность интернетовских каналов заметно ниже, баннеру лучше не выходить за пределы 7—8 Кб. Для этого приходится прибегать к значительно более агрессивной, чем обычно, оптимизации графических файлов (стр. 252), в особенности для баннеров анимированных. Совместить несовместимое — богатую анимацию и минимальный размер файла — в одном баннере очень сложно. Проще сделать это в серии баннеров, образующих спланированную рекламную кампанию. Если цель оправдывает затраченные средства, даже не очень крупные фирмы вполне могут добиться того, чтобы средний посетитель сайтов определенной тематики видел их баннеры не реже раза в день. В таких случаях выгодно выпустить одновременно серию близких по стилю и содержанию баннеров, различия между которыми позволили бы охватить максимально широкую аудиторию. 143

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

Рис. 72 Менее «агрессивный» вариант баннера на рис. 68, использующий иные средства для начального привлечения внимания

Рис. 73 Самый простой и незамысловатый баннер из той же серии (см. рис. 68, 72) Пример такой сбалансированной рекламной кампании — баннеры на рис. 72 и рис. 73, вместе с рис. 68 составляющие серию, одновременно «выпущенную в обращение» фирмой IBM для рекламы продукта под названием «Conference Tracker». Если баннер на рис. 68 весит без малого 15 Кб, то баннеру с рис. 72 хватает десяти, а объем рис. 73 — всего три с половиной килобайта. Очевидно, последний баннер имеет смысл только в контексте всей серии, так как сам по себе он не слишком интересен. Acknowledgements. Кроме полноразмерных, часто сменяющихся рекламных баннеров, на первых страницах сайтов можно встретить особые «минибаннеры» (или попросту «кнопки»), обычный размер которых — 88х31 пикселов. Большинство из них предназначено для несменяемых ссылок на сайты, которые автор, обычно на вполне добровольной основе, хотел бы порекомендовать своим посетителям. Нередко минибаннеры ссылаются на страницы тех программных продуктов, с помощью которых данный сайт был создан или (с точки зрения его автора) должен просматриваться, — бесчисленные «Powered by», «Created in» и «Best viewed with». Конечно, нет ничего плохого в том, чтобы поддержать бесплатной ссылкой производителей понравившейся вам программы. Однако по непонятной лично мне причине многие дизайнеры предпочитают вывешивать на своих сайтах кнопки именно тех двух фирм, которые вряд ли нуждаются в их рекламе, — Netscape и Microsoft. Утверждение, что данную страницу «лучше всего» смотреть в таком-то из броузеров, если и соответствует действительности, должно звучать скорее как признание автора в непрофессионализме — ведь, как я уже показывал, в большинстве случаев ничто не мешает сделать информацию сайта доступной для всех мыслимых броузеров и устройств воспроизведения. А какой именно из броузеров будет самым удобным для вашего пользователя — решать во всяком случае не вам. В тех же редких ситуациях, когда основное содержание сайта визуально по своей природе, корректнее ограничиться как можно более обшей формулировкой (например, «A browser with image display capability is recommended»), не пытаясь угнаться за быстро меняющейся броузерной модой. 144

ВИЗУАЛ Нечто среднее между «декоративным пятном», тематической иллюстрацией и эмблемой, визуал (англ. visual) — главное оружие дизайнера в борьбе за внимание пресыщенного информацией посетителя. У фирм поменьше и победнее визуал на первой странице месяцами остается одним и тем же; в этом случае он обычно иллюстрирует постоянную основу деятельности фирмы, метафорически отражает ее название (пример 10) или рекламный лозунг. Более богатые и влиятельные фирмы, стремясь к тематическому разнообразию при сохранении общего стиля оформления, могут позволить себе регулярно менять визуал первой страницы вместе с относящимся к нему текстом — последними новостями, пресс-релизами, обзорами и т. п.

На внутренних страницах сайта визуал обычно сводится на роль призаголовочной графики (пример 9). Иногда используется сквозной визуал, повторяющийся на всех страницах сайта и обычно входящий в состав другого постоянного элемента — блока логотипа или навигационной панели. Такие визуалы уже не могут меняться чаще, чем весь дизайн сайта, и «визуальная» функция в них почти уступает свое место «фоновой» (см. пример на стр. 319), Тем не менее довольно часто, особенно в призаголовочной графике, определяющими для выбора картинки являются ее сюжет и тема — что, по-видимому, и следует считать основным признаком визуала в отличие от других жанров веб-графики. С другой стороны, в отличие от иллюстраций в научных и деловых документах, однозначно соотносящихся со смыслом текста, темы визуалов могут быть практически любыми. Уместной будет аналогия с логотипами: как и там, здесь противопоказана прямая иллюстративность, а лучшие результаты дает вольное толкование, творческое переосмысление темы страницы. Нужно, чтобы зрителю пришлось затратить определенные усилия, чтобы сообразить, «при чем тут это», — получаемое от этого интеллектуальное удовлетворение есть необходимая приправа к удовлетворению чисто эстетическому. Рынок визуалов. Из эстетических же требований к визуалу стоит отметить в первую очередь достаточный текстурный контраст между изображением и его окружением. Поскольку на типичной веб-странице преобладающими текстурами являются плоский цвет фона и почти что геометрическая текстура рядов букв, нет ничего удивительного в том, что самым популярным источником для визуалов служат фотографии, часто сопровождаемые градиентами прозрачности или аморфными, размытыми облакообразными краями (пример 17). Не будет преувеличением сказать, что большинство производимой в мире на продажу фотопродукции употребляется для визуалов веб-страниц и их аналогов в других жанрах дизайна. (Отчасти по этой же причине на любительских страницах, авторы которых не могут или не умеют пользоваться настоящей фотографикой, столь популярны псевдотрехмерные, часто анимированные заголовки и логотипы, стр. 293). Есть и другие источники графики для визуалов. Именно здесь уместно будет сказать несколько слов о рисованной графике — теме, безусловно заслуживающей гораздо более подробного рассмотрения. Как я уже упоминал, умение рисовать — талант совершенно отдельный от таланта дизайнера, и к тому же в гораздо большей степени врожденный и слабо поддающийся воспитанию (и уж разумеется, ни в коей мере не ставит целью научить вас рисовать эта книга). Рисованию научиться гораздо труднее, чем дизайну (хотя это совсем не означает, что дизайну научиться легко). Однако любой дизайнер должен понимать совершенно особую ценность рисованной графики и уметь с выгодой пользоваться ею в своих работах.

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

текстур смыкается с другой бесконечностью — текстур материальных. Но лишь будучи облагороженной прикосновением человеческой руки (вспомним требование рукотворности в антигеометрических логотипах, стр. 270), дикая природа натуральных текстур обнаруживает свою подлинную красоту.

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

Приемы Е с л и по пыт а ть ся пр о а н а л из ир о в а т ь те э лем е нт ар ны е о пер ации, из ко торых с к лад ыв а ет ся п о в се д не в на я р або та дизайнера , т о м ы ув ид им , ч то единственное , о че м до с их пор е ще н и ч е го не говор ило сь , — э то компь ют ер ны е тр ансформации растрово й гр аф ики и со зд а ние новых р астровых изобр ажений «с нуля » . Речь не идет о рисовании в традиционном смысле этого слова — как я уже говорил, эту тему моя книга не затрагивает. Но, как известно, существует множество программ, которые позволяют до неузнаваемости видоизменять растровые изображения и (в каких-то пределах) даже создавать новые, не требуя от пользователя ничего, кроме манипулирования несколькими движками и переключателями на панели управления. Восторг от результата настолько несоизмерим с усилиями, затраченными на его получение, что для многих этот аспект компьютерной графики полностью заслоняет необходимость овладения другими, намного более фундаментальными, традиционными и неизбежно трудоемкими навыками и приемами. Я же, хоть и не разделяю увлечения графическими «конфетками» (одна из этих программ, кстати, так и называется — «Eye Candy», «конфетка для глаз»), все-таки не могу проигнорировать целый огромный пласт компьютерной культуры (я говорю это без всякой иронии), для многих синонимичный самому понятию «компьютерный дизайн». ТРЁХМЕРНОСТЬ Если ограничиться только графикой, не беря в расчет всевозможные программные и мультимедийные интернетовские технологии, то первое место по популярности в широких народных массах дизайнеровлюбителей и их энтузиастической аудитории (по большей части молодой и воспитанной на компьютерных играх и фантастических фильмах с обилием трехмерной графики) уверенно займут приемы создания объемных изображений и соответствующих светотеневых эффектов. Профессиональные дизайнеры если и пользуются трехмерной компьютерной графикой, то очень сдержанно, так что изобилие выпуклых заголовков, логотипов и кнопок (нередко анимированных, монотонно вращающихся и посверкивающих на ярком цифровом солнце) есть один из характернейших признаков любительского веб-дизайна. Почему же прием этот так привлекает одних и отвращает других? Само противоречие такого рода нельзя считать парадоксом — для многих областей так называемой «массовой культуры» определяющим является именно презрительное игнорирование со стороны профессионалов в сочетании с широкой популярностью «в народе». Нельзя, однако, не признать, что притягательность трехмерной графики определяется не только модой, но и достаточно глубокими психологическими причинами. Император иллюзий. Подделка под реальность, обладающая немыслимой в докомпьютерную эпоху достоверностью и способная к совершенно невероятным — и в то же время пугающе реальным — движениям и трансформациям, действует безотказно, на подсознательном уровне, завораживая зрителей, как удав кроликов. Облучая мощным «стереозвуком» глубинные слои визуального восприятия, ответственные за распознавание формы и пространственного расположения объектов, трехмерная графика держит зрителя в постоянном 146

напряжении примерно так же, как затягивают слушателей ритм и драйв рок-музыки, после которой музыка симфоническая очень многим кажется пресной и «одномерной». Значительная часть интернетовской аудитории к тому же имеет представление об относительной технической легкости получения такой графики. Все мы знаем, что автору не пришлось рисовать вручную многочисленные тени и блики на трехмерной картинке и что достаточно было описать компьютеру форму объекта и задать условия освещения, как все вдруг нарисовалось «само». Точно такой же, лишь отчасти эстетический восторг вызывает любое свежее изобретение, автоматизирующее некий (пусть и не особо нужный нам) процесс, раньше выполнявшийся только вручную, — нам хочется запускать «эту штуку» снова и снова, только чтобы полюбоваться на то, как ловко она справляется с разными наборами исходных данных. Вот почему отношение числа создателей к числу зрителей в трехмерной графике гораздо выше, чем в дизайне или компьютерной графике в целом, а полностью равнодушные к технической стороне жанра зрители почти отсутствуют — так же как в первые годы после появления автомобилей отсутствовали автовладельцы, не являющиеся по совместительству механиками и не знающие досконально внутренности своего автомобиля. Непобедимое очарование компьютерной трехмерности автор этих строк может засвидетельствовать на своем собственном примере. В 1987 году, учась в 8 классе средней школы и зная о компьютерах лишь по статьям в научно-популярных журналах, я настолько увлекся носящейся в воздухе идеей трехмерной, генерируемой компьютером графики, что самостоятельно разработал простейший «трехмерный» алгоритм и написал программку для единственного доступного мне вычислительного устройства — программируемого микрокалькулятора МК-54. Программа эта вычисляла проекцию точки на двумерном экране, исходя из трехмерных координат этой точки и координат наблюдателя в пространстве. Калькулятор, с его мизерной памятью и быстродействием, был в состоянии просчитать только одну точку за один прогон программы; вводя поочередно данные из небольшого массива, описывающего фрагмент трехмерного рельефа, я отмечал на листе миллиметровки рассчитанные изображения точек, с замиранием сердца следя, как они складываются в «холмы» и «долины» моего виртуального мира... Пластмассовый призрак. Как и фотографика, генерируемые компьютером изображения трехмерных объектов служат дешевым и неисчерпаемым источником особой разновидности текстур. «Трехмерные» текстуры родственны фотографическим, но из двух характерных признаков последних — изобилия плавных переходов цветов и размытых цветовых границ — трехмерная графика заимствует только первый. В типичном трехмерном изображении нет недостатка в светотеневых градиентах, но столь характерная для фотографии «глубина резкости» (расфокусированность на слишком близких и слишком далеких от наблюдателя объектах) отсутствует напрочь. В сочетании с характерной гладкостью и «пластмассовостью» самих виртуальных объектов эта особенность трехмерной графики становится ее основным недостатком с точки зрения как профессиональных дизайнеров, так и просто людей, не лишенных художественного вкуса. Отсутствие фотографической «мягкости» и трудоемкость моделирования аморфных, органических по форме объектов сильно ограничивают творческий потенциал этого графического жанра. Разумеется, недостатки эти не непреодолимы, и очевидно, что сейчас трехмерные графические программы развиваются прежде всего в направлении моделирования все более сложных органических форм. Пока же мы с вами являемся свидетелями подзатянувшейся паузы, когда первоначальное увлечение трехмерностью как технологическим феноменом прошло, а принципиально новых средств выражения, которые бы позволили придать этому жанру привкус творческой, а не только технической новизны, еще не появилось. Более того, современный дизайн, похоже, движется в совершенно противоположном направлении, все больше входя во вкус плоскоцветных форм, выразительной рукотворной аморфности (стр. 270) и живописных текстур (стр. 289). Помимо всего прочего, трехмерные изображения в роли декораций плохо сочетаются с насыщенными информацией элементами дизайна. Осмысленного противопоставления трехмерной графики и двумерного текста не получается — глаз отказывается воспринимать обычную плоскую графику как нечто «лишенное» одного измерения и потому противостоящее расположенной рядом объемной графике. Вместо контраста мы получаем разнобой, только усиливающийся из-за того, что источником большинства трехмерных кнопок, иконок и прочих украшений на любительских страницах служат бесплатные коллекции веб-графики (стр. 153), нещадно эксплуатирующие трехмерную моду и вносящие в нее неизбежный компонент эклектики и безвкусицы.

147

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

Рис. 75 изображений

«Скульптурная» (а) и «барельефная» (б) разновидности трехмерных

В защиту барельефа нужно сказать прежде всего то, что он не игнорирует плоскость страницы — тени всех объектов падают обычно именно на эту плоскость, и все выпуклости и вогнутости отсчитываются от «нулевого уровня», на котором расположен основной текст и графика. Благодаря этому страница с барельефной трехмерностью может иметь вполне приемлемый уровень цельности и единства — выпуклая графика и плоский текст составляют осмысленно контрастирующую пару. Если «скульптуру» выгодно подавать в движении, с применением анимации (в целом противопоказанной информационному дизайну, см. стр. 76), то «барельеф» по определению статичен и потому хорошо работает именно в декоративных, второстепенных по информационной важности элементах. Как я уже упоминал, в наши дни любая трехмерная графика пользуется необычайной популярностью у дизайнеров-любителей и многочисленных энтузиастов компьютерной графики. Однако если вращающийся «архитектурный» заголовок редко увидишь на хоть сколько-нибудь прилично оформленной странице, «барельефные» эффекты довольно часто встречаются и на страницах профессиональных дизайнеров. К сожалению, даже у очень талантливых художников увлечение бликами и тенями иногда заслоняет другие аспекты дизайна, — ослепленный игрой светотени, автор перестает замечать, сколь бедны и неинтересны цвета и формы в его работах (именно это я имел в виду, говоря о «текстурщине» на стр. 122). Совет здесь можно дать только один: даже если соблазн «вспучить и подсветить» хоть что-нибудь на странице непреодолим, отложите все эти (растровые по сути) эффекты на самый последний этап работы и не переходите к ним, пока не убедитесь, что страница выглядит безупречно в строго плоскоцветном, векторном варианте. Потратив достаточно времени и сил на поиск и уравновешивание форм, цветов и шрифтов, в конце концов вы, вполне вероятно, придете к выводу, что ваше творение только проиграет от введения каких бы то ни было «барельефов». Не стоит также забывать, что любые сложные текстуры, к которым относится и трехмерная графика, неизбежно раздувают объем графических файлов и, следовательно, увеличивают время загрузки страницы. ИСКУССТВО ИСКАЖЕНИЙ Бывают, однако, композиции, в которых не обойтись без теней, размывок, растушевок и прочих чисто растровых эффектов. Давайте рассмотрим основные разновидности таких эффектов и выясним, как и для чего ими можно пользоваться в дизайне. Поскольку в применении к плоскоцветным изображениям эти эффекты редко дают интересный результат (за исключением барельефной трехмерности, о которой мы говорили выше), основное внимание здесь будет уделено трансформациям фотографических и рисованных изображений. Что упало, то пропало. Интересно, что если для плоскоцветной (т. е. «векторной») графики растровые эффекты (включая даже такой простой и почти незаметный, как анти-алиасинг, стр. 248) неизбежно приводят к увеличению объема 148

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

Пожалуй, только этим «любительские любители» растровых эффектов и отличаются от любителей профессиональных, композиции которых уже не так легко поддаются расшифровке. Модный в современном дизайне «декадентский», «урбанистический» стиль (стр. 122) предполагает интенсивное использование разнообразных фильтров для натуралистического текстурирования, имитации размыва, осыпания и прочих проявлений деградации (пример 5). Нетекстурирующие эффекты. Как мы уже не раз убеждались, текстурный анализ — один из самых плодотворных подходов к классификации различных явлений дизайна. С этой точки зрения растровые фильтры распадаются на две основные категории: те, которые изменяют текстуру исходного изображения (текстурирующие), и те, которые этого не делают (нетекстурирующие). Последней категории можно дать более формальное определение: нетекстурирующий фильтр — это такой фильтр, который изменяет цвет каждого пиксела только на основании общих параметров изображения и исходного цвета этого же пиксела (т. е. не позволяет пикселам влиять друг на друга). К категории нетекстурирующих фильтров относятся все инструменты работы с цветом (осветление, затемнение, изменение насыщенности и сдвиг цветового баланса), а также обрезка и обтравка фона за объектом. Если в качестве источника берется не одно изображение, а два или более, в этот класс попадают всевозможные режимы наложения их друг на друга (список «Blending» в Photoshop), включая самый простой и самый популярный вариант — коллаж из нескольких частично прозрачных изображений (стр. 259). Как правило, текстура изображения при всех этих преобразованиях не меняется (если не рассматривать крайний случай, когда какая-то часть изображения заливается плоским цветом). Большинство эффектов этого класса доступны не только в растровых, но и в векторных графических программах. Конечно, применение нетекстурирующих эффектов не ограничивается имитацией прозрачности. В большинстве композиций все необходимые типы текстур (обычно плоский цвет и фотографика) вводятся самими носителями информации, и от выходящих на сцену в последнем акте растровых эффектов поэтому не требуется какой-либо текстурной самодеятельности. Вместо этого дизайнеру нужен способ, позволяющий свободно и в широких пределах варьировать ранг элемента в композиции, степень его за-метности и психологической «яркости», выстраивая таким образом иерархическую лесенку восприятия и подавляя конфликты между элементами. Именно для этой цели лучше всего подходят нетекстурирующие эффекты. Вводимый в композицию элемент нельзя оставлять без регулировки его цветовых и яркостных параметров точно так же, как не обойтись без тщательной подгонки его размера и размещения. Изменение яркости или насыщенности — один из самых эффективных методов повышения или понижения 149

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

Контраста между частями одного изображения в сочетании с парой линии и заголовком вполне достаточно для создания пусть и несложной, но аккуратной, устойчивой и достаточно интересной композиции. С меньшим успехом цветовые эффекты применены на сайте www.vivid.com (пример 20).

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

кричаще яркого, пусть и монохромного фона даже полноцветное, с натуральными цветами изображение глаза казалось бы слишком бледным, и дизайнеру пришлось пойти в обратном направлении, искусственно повышая насыщенность цвета. Возникающий при этом эффект «перепроявления», если оставить в стороне его роль в данной композиции, не обладает сколько-нибудь заметной художественной ценностью за пределами «декадентского» стиля — изображение при этом почти теряет фотографичность текстуры и становится неопрятно пестрым. Таким образом, хотя в целом дизайнеру удалось выстроить иерархию восприятия, очевидная искусственность использованных для этого приемов сильно портит впечатление. Значительно чаще, чем вариации насыщенности, применяются вариации яркости изображения, обычно реализуемые через изменение его прозрачности и, соответственно, видимости фона под изображением. Очевидно, что чем «призрачнее» полупрозрачная картинка, тем менее она привлекает внимание и тем периферийнее ее положение в композиции страницы. Простой, но достаточно типичный пример: в баннере на рис. 76 одно и то же изображение автомобиля повторено дважды — в фоне крупно и бледно, а поверх него — мелко и насыщенно. Противоположно направленные аспекты контраста — по размеру и по яркости — держат композицию визуально, а «скрытый смысл» одинаковости двух изображений, открывающийся только при внимательном разглядывании, придает ей интерес. Не менее часто регулировка цвета и насыщенности применяется не для подгонки готовых фотофрагментов в дизайн-композиции, а для коррекции дефектов съемки или сканирования фотографии. Искусство «поднятия» компьютерными средствами некачественных изображений требует большого опыта и верного глаза; для тех, кому приходится заниматься этим лишь эпизодически, существуют алгоритмы автоматической цветокоррекции (например, фильтр Intellihance). Текстурирующие эффекты. Если нетекстурирующие эффекты заслуживают внимания прежде всего из-за своей важности для координации элементов в композиции, то их противоположность — эффекты текстурирующие — примечательны в первую очередь своим обилием и (по крайней мере, на первый взгляд) разнообразием. Даже в свежеустановленной копии Adobe Photoshop меню Filters превосходит по величине и многоуровневости все остальные меню вместе взятые, а у многих активно пользующихся этой программой и пополняющих ее все новыми фильтрами и «примочками» оно становится просто необозримым. РИС.

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

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

151

Другой источник оптической размытости — быстро движущиеся объекты, представляющиеся человеческому глазу (и объективу фотоаппарата) размытыми вдоль направления движения. Соответственно, фильтры направленной размывки, такие как Motion Blur и Wind в Photoshop, часто применяются для придания динамики статическим объектам и для подчеркивания движения того, что само по себе уже движется (например, элементов анимированных рекламных баннеров). Так, в примере 16 горизонтальное строение страницы подчеркивается горизонтальной же размывкой заголовка «IDEO» вверху, — подразумеваемое движение которого превращается в реальное в момент прокрутки страницы (см. также стр. 168). Наконец, третий источник размытости в окружающем нас мире — это тени, которые никогда не имеют абсолютно четких очертании из-за того, что источники света не могут быть безразмерными точками. Поэтому без той же самой гауссовской размывки не обойтись при создании любого рода падающих теней и барельефной трехмерности (стр. 293). Любой объект, отбрасывающий позади себя тень, немедленно вводит в графику третье измерение и подразумеваемую на некотором расстоянии от этого объекта фоновую плоскость, на которую и падает тень. По закону контраста сам объект при этом начинает казаться более близким, ярким и отчетливым. В отличие от двух других применений размывки, обсуждавшихся выше, этот прием лучше всего смотрится с плоскоцветными объектами и текстовыми заголовками. Эффекту размывки родственны разнообразные искажения, отражающие изображение в кривом зеркале или волнующейся поверхности воды (в Photoshop к этой категории относятся Ripple, Smear, Spherize, Pinch и др.). Иногда эти виды искажений применяются для создания трехмерных эффектов (например, развевающегося флага), а некоторые из них подразумевают и определенную размывку частей изображения. Чаще всего, однако, эти фильтры дают откровенно юмористический эффект в применении к легко узнаваемым объектам (например, к человеческому лицу) и не дают вообще никакого осмысленного эффекта в остальных случаях (если закрутить спиралью и без того бесформенное облако, ничего особенно интересного не получится). Противоположный эффект дают фильтры, сводящие фотографические текстуры к плоским. Одни из них (фильтры Cutout, Fresco) аппроксимируют исходное изображение областями плоского цвета (похожий эффект дает сохранение картинки в формате GIF с малым количеством цветов без диффузии), другие пытаются найти в изображении и сделать видимыми контуры, т. е. достаточно резкие границы между объектами (фильтры Find Edges, Trace Contour). Дизайнерская ценность этого рода преобразований заключается именно в контрасте очевидно фотографического происхождения изображений с их абстрактным, почти геометрическим представлением. По этой же причине интересно бывает поэкспериментировать с трассировкой фотографий в векторном редакторе (стр. 100). Все перечисленные выше эффекты независимы от разрешения в том смысле, что при сохранении одного и того же соотношения между размером изображения в пикселах и масштабом применяемого к нему эффекта (например, радиусом гауссовской размывки или размером «вспучивания») результат будет выглядеть одинаково. Существуют, однако, эффекты, завязанные на размер единичного пиксела. Так, фильтр Diffuse на изображениях с высоким разрешением (т. е. с мелкими пикселами) почти неотличим от обычной размывки, тогда как при меньшем разрешении становятся видны отдельные пикселы, которые перемешиваются этим фильтром без какого-либо усреднения и придают изображению характерную зернистую текстуру. Сюда же относятся эффект «шума» (фильтр Add Noise) и диффузия, возникающая как побочный эффект оптимизации GlF-файлов. Среди прочих, не охваченных этой классификацией растровых фильтров найти чтонибудь по-настоящему интересное значительно труднее. Большинство из них либо применяют к изображению жестко заданную, чаше всего материальную текстуру, либо делают что-то, чего можно с тем же успехом достичь комбинацией стандартных средств редактирования (например, сдвиг или поворот друг относительно друга цветовых каналов или разрезка изображения на куски и случайное их перемешивание). Особенной популярностью пользуются фильтры для «мгновенного» создания выпуклых кнопок, фасок, бликов, падающих теней и прочих атрибутов барельефной трехмерности (стр. 2&3).

152

ПРИМЕРЫ З ав ер ша юща я глав а книги сос то ит из тре х ча с те й. После о пи с а н и й двух р е а ль ны х дизайнерских про ект ов а в тор а книги и д е т р аз дел «Г а лер ея » , в ко тором со бра ны по лноразмер ны е р е продукции в с ех упоминавш ихся в пре д ыд ущ их гла вах с тр аниц и сайтов. Мои собственные работы представлены здесь не как образцы для подражания с точки зрения дизайна, а как «повторение пройденного», пособие для закрепления материала предыдущих теоретических глав. Рассказывая о работе над своими проектами, я активно пользуюсь всем багажом понятий и принципов, обсуждавшихся в книге, — тем самым демонстрируя, как теоретические положения работают на практике, и одновременно в какой-то мере объясняя, как я сам пришел к именно такому пониманию основ дизайна. Далеко не все, что я делал и о чем собираюсь рассказать, укладывалось в готовые схемы и получало немедленное теоретическое обоснование. Очень часто причины моих же дизайнерских решений становились ясны мне только спустя какое-то время — иногда не раньше, чем я начинал сознательно анализировать и описывать весь проект от начала до конца. Поэтому еще одна из целей данной главы — привить вам вкус к самостоятельному анализу своих и чужих работ. Не обязательно писать статью о каждом созданном вами сайте, — однако даже простое перечисление сильных и слабых сторон каждой работы, анализ задействованных в ней принципов и материалов даст вам очень много.

www.kirsanov.com Первым номером в нашей программе идет сайт-студия автора этих строк. С момента своего запуска в июне 1998 года сайт www.kirsanov.com остается не только маркетинговым инструментом, но и предметом обсуждения для моих заказчиков, читателей и друзей. В создании большинства коммерческих и контент-сайтов участвуют два взаимодействующих начала, олицетворяемые хозяином сайта (заказчиком) и его непосредственным создателем (чаще всего дизайнером). Разница их представлений о том, каким должно быть содержание и оформление сайта, может быть очень значительной, и как бы хорошо ни было налажено взаимодействие и разграничение полномочий между ними, границу сфер влияния и следы борьбы разных подходов можно без труда обнаружить на любом готовом сайте. Самым заметным исключением из этого правила являются сайты дизайнерских студий, о которых я уже упоминал на стр. 182. Вот почему рассматриваемый здесь пример особенно поучителен: при создании этого сайта боролись между собой не дизайнер с заказчиком, а разные стороны дизайнерского «я», — и дизайнер может, таким образом, от первого лица рассказать о том, что определяло каждый его шаг. ЛОГОТИП. Простая и наглядная система отношений делает логотип идеальным пособием для изучения закономерностей дизайна. Однако начну я свой рассказ о www.kirsanov.com с создания логотипа не только по этой причине (и даже не потому, что логотип — первое, что посетитель видит на этом сайте). Дело в том, что, как и многие другие, сайт этот почти целиком вырос, как из зародыша, из своего логотипа. Из не относящихся впрямую к дизайну исходных данных, с которыми я приступал к этой работе, стоит отметить желание иметь максимально общий по смыслу логотип, не отсылающий к какой бы то ни было конкретной области деятельности. Коротко говоря, мне нужен был логотип самого Дмитрия Кирсанова, а не его дизайн-студии. Тот факт, что владелец этого знака имеет какое-то отношение к дизайну, должен быть заметен только благодаря качеству логотипа как объекта дизайна, а не по какому-то специфически дизайнерскому символу или метафоре. Такому условию, очевидно, лучше всего удовлетворяют чисто текстовые логотипы, позволяющие автору проявить профессионализм в, пожалуй, самой благодарной для этого области — в шрифте. Из всех возможных вариантов написания своего имени я остановился на паре инициалов, в которых текстовая основа сочетается с достаточным (благодаря краткости надписи) простором для графических и шрифтовых поисков. Несмотря на внешнюю простоту знака (рис. 77), создание его было совсем не простым делом. Основная визуальная идея логотипа, его «скрытый смысл» был найден очень быстро. После того как в векторном редакторе напечатана строка текста, первое побуждение дизайнера обычно состоит в том, чтобы сдвинуть буквы теснее, сменив установленные по умолчанию расстояния между буквами текстового набора на значительно более плотный заголовочный набор (операция тренинга, стр. 141). Стремясь сблизить буквы «d» и «k» насколько это возможно, я сразу же заехал засечками этих букв друг на друга и сообразил, что это можно обыграть, раскрасив буквы в разный цвет и сплетя их засечки. По-видимому, этот несложный эффект является в данной композиции если не единственно возможным, то, по крайней мере, самым приемлемым украшением. Непрофессиональные текстовые логотипы часто грешат претенциозными искажениями форм букв, для которых к тому же в большинстве случаев берутся 153

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

Рис. 77

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

Даже неискушенный в тонкостях дизайна зритель, вероятно, почувствует, что что-то более замысловатое, чем переплетение засечек (бывшее, кстати, стандартным приемом в популярных в прошлые века вензелях), вряд ли подошло бы этой паре букв. В данном случае есть и еще одно обстоятельство: несвойственная старинным вензелям геометричность и даже парадоксальность сопряжения букв (чем-то напоминающая работы художника Эшера) контрастирует с теплым гуманистическим очерком шрифта — курсива классической антиквы (стр. 127). Именно подбор и обработка букв и заняли большую часть времени этого проекта, — хотя результаты этой кропотливой работы, возможно, совсем не бросаются в глаза. Моей целью было не украсить или расцветить буквы логотипа, а наоборот, сделать их по возможности прозрачными для восприятия, убрать малейшие следы вычурности или нарочитости. Иначе говоря, я хотел приблизиться к идеалу очертании гуманистического курсива, — но так, чтобы идеальность его была заметна только вдумчивому взгляду. За основу я взял шрифт Monotype Garamond Italic — один из лучших образцов поздней классической антиквы. Буква «d» из этого шрифта не потребовала почти никаких изменений; я лишь увеличил ее наклон и немного растянул по горизонтали. Кроме того, я удлинил и изменил форму ее засечек, чтобы лучше приспособить ее к эффекту «сплетенных букв». Гораздо сложнее было подобрать подходящую букву «k». В Monotype Garamond эта буква, с петлей и кокетливым завитком, совершенно выбивалась из того стиля, к которому я стремился (рис. 77, я), не говоря уж о ее гораздо большем, чем у «d», наклоне (в готовом логотипе обе буквы наклонены на среднее арифметическое углов «d» и «k» в этом шрифте). После ряда безуспешных попыток я вынужден был срезать боковые штрихи у буквы «k» из шрифта Times Roman Italic (на рисунке справа) и пересадить их на ствол той же буквы в Monotype Garamond. Разумеется, прививка элементов переходного шрифта (стр. 129) на гуманистическую основу потребовала значительной гуманизации этих заимствований. Как видно на рис. 77, острые углы подверглись сглаживанию, прямые линии расслабились и немного обвисли, — так что контур буквы стал достаточно мягким, обтекаемым и живым.

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

154

и важную эстетическую роль. Прямой рубленый шрифт, заглавные буквы, а также находящиеся на границе читаемости мелкий размер и слабый контраст правой части этой надписи с фоном (использован популярный прием визуального принижения важного по смыслу заголовка, стр. 202) составляют сильный контраст с очертаниями логотипа, который в таком соседстве начинает казаться значительно крупнее, четче, «строчнее» и «курсивное», чем он есть на самом деле. ЦВЕТОВАЯ СХЕМА Следующей задачей был поиск цветового решения логотипа, которому, очевидно, предстояло стать основой' цветовой схемы всего сайта. Моей целью было найти сочетание мощных, мгновенно привлекающих взгляд цветов, в то же время лишенное малейших следов дисгармонии, пестроты или неопрятности. Входные цвета. Мой выбор в пользу зеленых тонов, возможно, станет вам более понятным, если вы перечитаете раздел о цветах в этой книге (стр. 101). Этот проект еще раз убедил меня в том, что из всех обитателей цветового круга именно зеленый, равноудаленный от теплых и холодных тонов, лучше всего подходит на роль цвета как такового, воплощения цветовой насыщенности в чистом виде с минимумом посторонних аллюзий и психологических неоднозначностей. Сила зеленого столь велика, что он способен подчинить себе и облагородить своего ближайшего соседа — зону желто-зеленых тонов, которые, наоборот, обладают очень сильными «нечистотными» коннотациями. Приняв решение начать поиск с ярких и насыщенных цветов, я тем самым получил возможность выбирать их достаточно округленно, так как в зоне повышенной насыщенности глаз гораздо менее чувствителен к небольшим вариациям параметров цвета, чем в слабонасыщенных, «почти серых» цветах. По этой причине я решил ограничить свой выбор цветами «безопасной броузерной палитры» (стр. 246), которая, хоть и не является в современном веб-дизайне категорическим императивом, при прочих равных все же дает определенные преимущества. После ряда проб я остановился на паре, состоящей из яркого желтовато-зеленого (#99сс33) для «k» и темного насыщенного зеленого (#003300) для «d» (см. стр. 335). Нетренированному взгляду, возможно, трудно будет заметить, что цвета эти различаются по тоновому компоненту. Поскольку в темных цветах компонент тона менее очевиден для глаза, для темного цвета я выбрал «более зеленый» тон (у этого цвета Н = 120, ровно в середине зеленой области спектра). Для яркого же цвета можно было поискать менее очевидный тон, находящийся примерно посередине между зеленым и желтым (Я = 80). Интересно также отметить, что темный цвет имеет максимальную насыщенность (S = 255), тогда как яркозеленый, хотя и кажется необычайно «цветным», на самом деле далек от полной насыщенности (S= 191). Если яркий цвет способен выразительно звучать почти в любых условиях, темному цвету для этого нужна значительная площадь и достаточно темный общий колорит страницы, на фоне которого этот цвет не будет казаться попросту черным. А поскольку принцип экономии запрещает введение новых цветов без необходимости, первым моим действием после раскраски логотипа была заливка фона всей страницы тем же самым темно-зеленым цветом, что и у буквы «d». Чтобы буква эта тем не менее не сливалась с фоном, вполне естественно было подстелить под нее фоновую плашку ярко-зеленого цвета «k». В такой композиции слабая различимость одного из цветов компенсируется большой занимаемой им площадью и наоборот. Гораздо труднее оказалось выбрать форму плашки под «d». Очевидно, что, чтобы ни одна часть логотипа не потеряла видимости, граница между темным и светлым фоном должна проходить между основными штрихами букв «d» и «k». В то же время эти два наклонных штриха уже вводят концентрированный пучок линий, и добавление к ним еще одной параллельной цветовой границы приведет к недопустимой пестроте в этой области. Чтобы избежать этого, я заменил резкую границу на плавный градиент, выдерживающий требуемое наклонное направление, но не подчеркивающий его какой-либо резкой линией. Это решение также оказалось важным для дизайна всего сайта, так как на других страницах градиентные переходы стали одним из доминирующих мотивов (как вы помните, градиенты вводят принципиально новый тип текстур, стр. 120).

Рис. 79

(см.

цветную вкладку, стр. 335)

155

Остальные границы светлой фоновой области найти было значительно проще. Верх и низ естественно сделать горизонтальными хотя бы для того, чтобы было с чем взаимодействовать наклонному мотиву в логотипе. Слева же, перебрав несколько вариантов, я отказался от какой-либо линии контура вообще, просто дотянув светлую горизонтальную полосу до края окна. Информационные цвета. Если не считать черный (в названии компании), сплэш-страница ограничена двумя цветами — что, очевидно, является абсолютным минимумом для любой страницы. Поскольку к этому моменту уже было ясно, что белый цвет на сайте использоваться не будет, передо мной встала задача поиска третьего нейтрального цвета, на который бы пришлась основная нагрузка на информационно насыщенных страницах. Оливковый цвет (#666633), которым залит фон на всем сайте за исключением сплэш-страницы, представляет собой дальнейший сдвиг в область желтого (Н --= 60) и дальнейшее снижение насыщенности (S = 128). Хотя соблазн поискать для фона почти нейтральный, едва зеленоватый серый был велик, я все же решил не разбивать общую цветовую гамму сайта, своей насыщенностью компенсирующую темноватый колорит и узость тонового диапазона. Однако на первой же странице сайта (www.kirsanov.com/main.html, рис. 79 на цветной вкладке) выяснилось, что цвета логотипа слишком активны и слишком прочно связаны друг с другом, чтобы играть сколько-нибудь заметную роль в композиции. За пределами сплэш-страницы эта цветовая пара годится разве что на роль акцента, украшения, второстепенного декоративного элемента. Для информационной части страницы нужны как минимум три цвета, считая фоновый и черный. Поэтому одновременно с оливковым мне пришлось искать еще один цвет, для которого я в конце концов выбрал просто более светлый оттенок фонового цвета (#979774). Этот цвет используется для ссылок, горизонтальных линеек, заголовков и прочих вспомогательных элементов. Таким образом, четыре зеленых цвета распадаются на две группы: насыщенную контрастирующую пару цветов в логотипе и пару совпадающих по тону, не слишком контрастных и насыщенных «информационных» цветов. Каждый цвет в этой системе знает свое место и свою роль, знает, как ему относиться к ближайшим и более отдаленным соседям. Задача построения логичной и уравновешенной цветовой системы была, как мне кажется, решена удовлетворительно. Цветовая схема сайта была тем его аспектом, который вызвал наибольший интерес у его посетителей, — чьи комментарии, надо признаться, не были единодушными. Большинству откликнувшихся цвета понравились, и некоторые даже называли цветовое решение главным достоинством моего дизайна. Другие, однако, жаловались на трудность чтения текста на довольно-таки темном фоне (особенно это относится к названию сайта на сплэшстранице) и общий «тусклый и однообразный» колорит. В свою защиту я могу сказать, что в первую очередь мною двигало стремление как можно дальше уйти от доминирующей в любительском веб-дизаине цветовой пестроты и безвкусицы, — и, даже если я зашел в этом слишком далеко, сайт, надеюсь, все же может быть поучителен своей цветовой бескомпромиссностью. ПЕРВАЯ СТРАНИЦА Возвращаясь к обсуждавшимся на стр. 182 проблемам стиля и отношения к пользователю, я прежде всего должен признаться, что известное противоречие между прикладной функцией сайта (привлечение заказчиков) и эстетическими представлениями его автора не стало в данном случае поводом к каким бы то ни было конфликтам. Мне не приходилось как-либо сдерживать «творческие порывы» или бояться опасаясь отпугнуть посетителей художественной «заумью». Если с эстетической точки зрения сайт этот (как и любой другой) можно критиковать, то по крайней мере своим отношением к зрителю и читателю я старался не подавать повода к малейшему недовольству. Как это ни странно, но именно тот факт, что это мой собственный проект, за который мне ни перед кем не нужно отчитываться, заставлял меня быть особенно осторожным в выборе художественных средств и нетерпимым ко всему, что может быть воспринято как дешевая «загадочность» или претенциозность. Интересен в этом отношении текстовый аспект сайта. Большинство сайтов, имеющих хоть какое-то отношение к дизайну, отличаются чрезвычайным немногословием и нарочитой недоговоренностью формулировок. Навигация на таких сайтах, как правило, и без того затрудненная нестандартным дизайном, превращается иногда в утомительную головоломку из-за невозможности понять, на какой странице вы находитесь и что хочет сказать ею автор сайта. Психология «хэппенинга», уместная в объектах чистого искусства, превращается в позу в том случае, когда работа дизайнера должна выполнять не только эстетическую функцию. Карты на стол. Стремясь составить свои саитом контраст этой моде на загадочность, я постарался исключить малейшую возможность непонимания, сжато и удобопонятно изложив основные сведения о своей студии на первой же странице сайта. С точки зрения дизайна задача избежать визуальной монотонности при таком необычно большом количестве текста была трудной, но вполне разрешимой. 156

Противопоставление светло-оливковых надписей, набранных крупным жирным рубленым (Arial Black), блокам черного мелкого курсива шрифта с засечками (Monotype Garamond Italic, тот же самый, что и в логотипе), повторяясь четыре раза справа от основного визуала-фотографии, задает ритм чередования фрагментов текста и вводит два основных шрифта и два основных цвета, которые будут использоваться в заголовках и навигации по всему сайту. (Светлое начертание шрифта Frutiger, которым набрана надпись «Dmitry Kirsanov Studio» на сплэш-странице, оказалось неустойчивым в отрыве от логотипа, поэтому на внутренних страницах сайта оно используется только в «колонтитуле» вверху каждой страницы и в строке копирайта справа внизу — т. е. в непосредственной близости от элементов, построенных на основе логотипа и с его цветами.) «Все это хорошо, — скажете вы, — но не стал ли сайт от этого слишком уж откровенным и потому скучным?» Действительно, даже чисто рекламные, но все же рассчитанные на неторопливое и неоднократное прочтение материалы (буклеты, веб-сайты) обязаны иметь хоть что-то под своей блестящей поверхностью — какой-то сюжет, интригу, «скрытый смысл», требующий для своего обнаружения некоторого усилия мысли. Разумеется, эти глубинные слои должны работать на содержимое верхнего информационного слоя, делать более явной его структуру, облегчать его восприятие и делать его более интересным, а вовсе не обязательно «загадочным». Есть такая «подкорка» и в дизайне моего сайта. Я постарался, однако, ограничить «пир подсознания» графической составляющей дизайна, оставив текст страницы оплотом однозначности. Фотографические визуалы, занимающие в композиции ключевое положение слева от описания компании и сменяющие друг друга в зависимости от положения мыши (рис. 80), были подобраны таким образом, чтобы протянуть смысловые связи между четырьмя фрагментами описательного текста справа и четырьмя разделами навигационной панели внизу. Итак, вот авторская интерпретация (лишь одна из возможных) главных смысловых связей страницы: • Глаз — «we are» — «portfolio»: «Смотрите, кто мы такие и что мы можем делать». • Часы — «offering» — «interested?»: «Если вы заинтересованы, не тратьте время, напишите нам, чтобы обсудить наши предложения». • Инструменты — «specializing» — «classes»: «Учитесь пользоваться дизайнерскими инструментами». • Игрушечный самолет — «integrating» — «dmitry»: «Познакомьтесь с автором и с его творчеством в разных жанрах». Возвращаясь к дизайну, перечислим основные отношения баланса и поддержки, визуально скрепляющие страницу: • Одна сплошная светлая горизонтальная полоса вверху страницы (под «Dmitry Kirsanov Studio») уравновешивается тремя пунктирными параллельными полосами в навигационной панели внизу. • Зона вытянутых по вертикали градиентов вверху страницы сменяется доминированием горизонтальных градиентов в центре и внизу. • Широкая виньетка в самом верху, составленная из элементов логотипа, начинает собой диагональ, сходящую к выполняющей роль «подписи» копии логотипа в правом нижнему углу. Эта «зеленая» диагональ пе-олин зеленый другой направо рссекается с «текстовой» диагональю, протянутой от описания компании в правой половине центральной части к навигационной панели и далее к левому нижнему углу (в котором расположен перевешивающий все другие по информационной насыщенности раздел portfolio и список latest additions).

157

РИС.80 Четырехчленная структура страницы иллюстрируется четырьмя фотографическими визуалами, сменяющими друг друга «перекатыванием» (стр. 213)

НАВИГАЦИЯ Все внутренние страницы сайта www.kirsanov.com следуют в своем дизайне общему плану, заданному на main.html. Возьмем для примера страницу с текстовым содержимым (рис. 81). Ее центральная часть разделена по вертикали на два неравной ширины столбца: пустой левый, отмеченный лишь уменьшенной копией фотографии с первой страницы (а именно — изображением часов, так как страница эта принадлежит к разделу «interested?»), и содержащий заголовок и основной текст правый столбец. Заметьте, что текст плотно прижат снизу к заголовку, а заголовок частично надвинут на фотографию — все точно так же, как было на первой странице. В разделе портфолио страницы устроены аналогично за тем исключением, что место визуалафотографии там занимает «ноготок» (стр. 258) одной из дизайнерских работ. Двенадцать ссылок на первой странице сайта (рис. 79 на цветной вкладке) разделены на четыре тематических группы (это именно группы, а не ветви древовидной системы, так как у этих групп нет «корневых» страниц). Однако информационная важность этих четырех групп неодинакова. По сути, только две левые группы имеют прямое отношение к дизайн-студии; остальные ссылки ведут к разнородным, хотя и связанным с темой сайта материалам, по большей части расположенным вне домена www.kirsanov.com. Поэтому на всех страницах, кроме самой первой, я оставил только две первые группы ссылок, сохранив их положение в левом нижнем углу страницы. Кроме того, только одна из этих двух групп — та, к которой принадлежит текущая страница, — «раскрыта» наподобие выпадающего меню, вторая же представлена только 158

своим заголовком (залинкованным на первую страницу соответствующей группы). Это усиливает асимметрию и делает более выраженной информационную диагональ, ведущую от текста в правом столбце к «сгустку навигации» слева внизу. Пространство, высвобожденное в правой части навигационной панели, не остается пустым. На текстовых страницах (рис. 81) оно позволяет подтянуть вверх блок подписи с логотипом и копирайтом. На страницах портфолио (рис. 82) этот элемент сдвинут еще и влево, а правый конец панели занят линейной (стр. 207) навигационной системой для перемещения по цепочке страниц в данном разделе портфолио. Как известно, минимум навигации в таких случаях — пара ссылок, ведущих на следующую и предыдущую страницы цепочки. Однако существенно удобнее система нумерованных ссылок, количество которых равно количеству страниц, что позволяет перейти с любой страницы цепочки на любую другую. Линейная навигация встречается в Интернете реже, чем древовидная; кроме того, в данном случае она является «инородным телом», неожиданностью для посетителя сайта, уже успевшего привыкнуть к иерархически-групповой системе.

Рис. 81

Текстовая страница

Рис. 82 Страница раздела портфолио

По этой причине я постарался не только сделать линейную навигацию как можно более простой и интуитивно понятной, но и подчеркнуть ее особое положение на сайте: • элементы линейной навигации используют яркие и контрастные цвета логотипа, в отличие от уже привычного светло-оливкового в остальных навигационных ссылках; • сдвинутый влево логотип-«подпись» выровнен по правому краю светлой горизонтальной полосы, — тем самым подчеркивая, что в этой точке кончается привычная структура страницы и начинается принципиально новый элемент; • для перемещения взад и вперед по цепочке предусмотрены как текстовые кнопки «next»/«prev», так и яркие графические стрелки. Это дублирование информации делает ее более доступной для людей с разными типами восприятия; • каждая кнопка с номером снабжена alt-текстом, в котором не только повторяется сам номер, но и добавлено название того проекта, которому посвящена страница под этим номером. Конечно, вряд ли комуто придет в голову заходить на дизайнерский сайт в текстовом или речевом броузере, — однако от такого расширенного текстового эквивалента есть прямая выгода и в графической среде: подведя курсор мыши к кнопке, вы сможете прочитать ее alt-текст во «всплывающей подсказке».

www.quiotix.com. Один из ранних проекто в мо ей ст уд ии — разр або тка ло го типа и с а й та д ля ам ер ик а нс кой корпор ации Qu io tix — мо жет с ч ит ат ь ся типичным : не бо льш ая фирма , не бо льшо й с т ат и че с кий с а й т и поч т и по лное отсутствие у з а ка зчи к а э л ем е нто в фир ме нно го ст иля д о то го мом е нта, ко гд а он о бра т ил ся к ус лугам д из а йнер а. На этом же примере я расскажу, как обычно протекает взаимодействие с клиентом и как разрешаются возникающие при этом разногласия. Эта сторона работы — очевидно, жизненно важная для любого практикующего дизайнера — не стала одной из тем моей книги, так как я не считаю себя специалистом по маркетингу и не хочу давать общих советов на тему того, как «привлечь и удержать» клиента. В то же время рассказ обо всех перипетиях одного реального проекта, возможно, покажется вам интересным и с этой точки 159

зрения. ЛОГОТИП Как это часто бывает, первый запрос клиента касался создания сайта, и только после некоторого обсуждения выяснилось, что у фирмы еще нет своего логотипа. Создать приличный сайт, в который впоследствии можно было бы «вставить» любой логотип, вряд ли возможно; логотип — это основа образа фирмы, и в его отсутствие просто нет смысла говорить о каких-то элементах фирменного стиля. Поэтому заказчик не стал возражать против того, чтобы начать наше сотрудничество с работы над логотипом. Президент фирмы Quiotix не высказал никаких особых пожеланий кроме того, что его логотип должен выглядеть профессионально и по возможности оригинально. Само название компании, полученное перестановкой букв в имени Quixote (Дон Кихот), было чистой «заумью» и не обязано было что-то значить или с чем-то ассоциироваться; сфера деятельности компании — программирование — также не имела никаких устоявшихся визуальных ассоциаций. Поэтому свобода поиска абстрактных форм для логотипа не была ничем ограничена. Работу над логотипом я всегда начинаю с посылки заказчику одновременно нескольких (не менее трех) существенно различных вариантов на выбор. Даже если ни один из них не будет безоговорочно принят, комментарии по каждому из вариантов помогают мне лучше понять предпочтения и ожидания клиента. Поэтому первые три варианта логотипа Quiotix (рис. 83) отличались по степени асимметрии композиции, характеру цветового и шрифтового решения.

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

160

Рис. 84 Попытка уклониться в сторону (а) заказчиком пресечена, и окончательный вариант (б) почти ничем не отличается от первого наброска Окрыленный успехом, я начал с того, что заменил шрифт на более простои и вписал фигуру в квадрат вместо прямоугольника (рис. 84, а). Я также изменил наклон фигуры, так чтобы горизонтальные «рукава» прорези (контур которых был в этом варианте максимально сглажен) впадали точно в углы квадрата. Целью всех этих изменений было «переписать логотип набело», сделать его более компактным, логичным и теснее интегрированным. К моему удивлению, все эти изменения были встречены без энтузиазма. По мнению заказчика, в них потерялось своеобразие логотипа, — он стал слишком причесанным и слишком похожим на других если не по форме, то по общему стилю графики. С этим, конечно, можно было поспорить, — в том случае, если бы моей целью был спор, а не удовлетворение потребностей конкретного заказчика. Для меня как для коммерческого дизайнера эта привередливость была не помехой, а ценной подсказкой — оставшись при своем мнении, я стал лучше понимать, к чему мне следует стремиться, чтобы завершить проект к взаимному удовлетворению. После интенсивных обсуждений и ряда попыток достичь компромисса мы вернулись к варианту, очень мало отличающемуся от исходного (рис. 84, б). Единственным существенным отличием рис. 84, б от рис. 83, а является лучшая координация между текстом и графикой: заметьте, как буква «I» выровнена по центру устья верхнего рукава, а один из двух штрихов буквы «X» лежит на продолжении верхней правой стороны прямоугольника. Шрифт Optima, выбранный для логотипа, интересен прежде всего тем, что, не являясь шрифтом с засечками, в то же время не похож и на классический рубленый — штрихи в нем имеют разную толщину, а их расширенные концы украшены едва заметными вогнутостями на торцах. Шрифт с засечками образовал бы две выраженные горизонтали по нижней и верхней кромке букв, раздражающие взгляд своей близостью и параллельностью («тавтологией») с краями рукава, в который вставлен текст. Классический же рубленый шрифт с одинаковой толщиной всех штрихов не очень хорошо сочетается со сложной формой графической части, содержащей узкие перешейки и расширения. Таким образом, шрифт Optima выявляет и поддерживает характер формы этого знака; сходная мотивация позднее привела меня к использованию этого же шрифта в другом логотипе (рис. 85), графика которого уже вполне сознательно подогнана под использованный шрифт.

Рис. 85 Пример подгонки графики логотипа под характер шрифта; в увеличении можно увидеть, что торцы деталей графики вогнуты так же, как и концы штрихов букв 161

Отдельного абзаца заслуживает история буквы «О». Очертания этой буквы в шрифте Optima (рис. 86, а) не годились для логотипа: хвостик вылезал слишком далеко вниз за нижнюю линию шрифта, что затрудняло вставку надписи в паз фигуры. Моя первая попытка сделать высоту «Q» такой же, как у остальных букв (рис. 86, б), была вдохновлена формой этой буквы в шрифте Erika, который использовался на одном из этапов работы над логотипом (см. рис. 84, а). Этот вариант имел еще и то преимущество, что напоминал своей формой очертания вырезов в графической части знака. К сожалению, в небольших размерах отросток буквы становится трудноразличимым, и «Q» превращается в «О», — а ведь «заумное» название компании, не опирающееся ни на какие известные слова, прочесть и без того непросто. Поэтому в конце концов нам пришлось выбрать не слишком изящный, но стилистически нейтральный и читающийся в любых размерах вариант рис. 86, в. Впоследствии это же начертание буквы «Q» использовалось во всех графических заголовках веб-сайта, также набранных шрифтом Optima. ПЕРВАЯ СТРАНИЦА Закончив логотип, я приступил к наброскам первой страницы сайта. Наброски эти, сделанные в векторном графическом редакторе, я поначалу посылал заказчику в виде цельных GIF-файлов. Только после того как дизайн страницы был окончательно согласован, я смог разрезать графические элементы на отдельные оптимизированные GIF-файлы и сверстать их вместе с текстом в HTML. Хотя во время всей работы над логотипом его цветовое решение оставалось неизменным — синяя графика (стр. 274) и черный текст на белом фоне, — схему эта совсем не обязательно было брать за основу цветового решения страницы. Конечно, если логотип использует узнаваемые, «фирменные» цвета компании, цвета эти желательно оставить неизменными и в дизайне сайта. Большинство логотипов, однако, терпимо относятся к перекрашиванию, что позволяет вписывать их в композицию с любыми доминирующими цветами. В данном же случае свежесозданный логотип и не предполагал окончательного цветового решения, так что свобода цветового творчества в дизайне сайта не была ничем ограничена. Моя всегдашняя любовь к зелено-серым тонам проявилась в первом наброске (рис. 87 на цветной вкладке), однообразном по цвету и почти лишенном графической поддержки для логотипа, который поэтому становится слишком ярко выраженным и, следовательно, неустойчивым центром композиции.

Рис. 86 Эволюция буквы «Q»

Рис. 87

(см. цветную вкладку, стр. 336)

Рис. 88 (см. цветную вкладку, стр. 336) Однако уже в этом варианте я нашел использованные впоследствии приемы выделения логотипа: небольшая падающая тень, слабый блик, имитирующий металлическую поверхность, а главное — круглое пятно света с размытыми краями в качестве фона, перекликающееся с округлостью внутренних «рукавов» знака и контрастирующее с его прямоугольным внешним контуром. Этот прием, очевидно, требует достаточно темного фона страницы, чтобы светлому пятну было на чем выделяться. Соответственно, тексту в логотипе при этом приходится переходить с белого фона на темный, что не только наносит ущерб узнаваемости знака в целом, но и влияет на читабельность текста в нем (тем более что, как я уже упоминал, название фирмы семантически никак не мотивировано). Пытаясь исправить положение, я 162

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

Рис. 89 (см.

цветную вкладку, стр. 33G)

Из незаметных на первый взгляд нюансов стоит отметить просвечивающее кое-где между желтыми облаками темно-синее небо, чей цвет перекликается с цветом логотипа. В нижней, более узкой панели с адресом и копирайтом использован другой фрагмент этой же фотографии, почти не содержащий синего. Как видите, выбранная фотография легко вписывается в композицию, связываясь с ней множеством прочных связей. Ее достоинства с запасом перевешивают единственный недостаток — определенную клишированность самой «облачной» темы, очень часто встречающейся в современном компьютерном дизайне (достаточно вспомнить «сплэш-страницу» загрузки Windows). Во всяком случае, в моем дизайне нет и следа самой распространенной ошибки — «недослучайности», назойливого повторения аморфного узора на большой площади (стр. 259). Чтобы подчеркнуть переход от белого фона, на который падает тень от логотипа и который поэтому кажется лежащим в плоскости страницы, к принципиально иной по своей роли фотографии, я «приподнял» правую часть навигационной панели, подстелив под нее небольшую плавно расширяющуюся слева направо тень. На этом же этапе был окончательно выбран шрифт для кнопок навигации и остальных текстов в графических вставках — тот же самый шрифт Optima, что и в логотипе, но набираемый только строчными буквами. В текстовой части страницы оранжевый цвет неба естественным образом выделил ссылки, маркеры элементов списка (маленькие прямоугольники) и заголовки. В целом первая страница была уже почти закончена, хотя некоторые важные изменения были все же внесены в нее на этапе работы над дизайном внутренних страниц. ВНУТРЕННИЕ СТРАНИЦЫ Сайт Quiotix невелик, большинство его страниц строятся по простейшей из возможных схем — логотип, навигационные ссылки, заголовок и основной текст. Поэтому следующая моя задача заключалась в создании «болванки» заголовка страницы, скоординированной с уже готовой навигационной панелью и блоком логотипа. 163

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

Рис. 90 (см.

цветную вкладку, стр. 336)

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

Рис. 91 (см.

цветную вкладку, стр. 33G)

Согласно принципу асинхронности информационного и визуального эмфазиса в заголовках (стр. 202) мелкий шрифт должен применяться для заголовка текущей страницы, чья информационная актуальность выше, а более крупный — для «колонтитула» раздела, ибо последний, во-первых, повторяет текст одной из кнопок навигации, а во-вторых, сам повторяется на всех принадлежащих к этому разделу страницах и, следовательно, несет существенно меньше информации. В данном случае этот парадоксальный принцип («подчеркивай неважное») подкрепляется еще и тем практическим соображением, что длина заголовка страницы намного больше длины заголовка раздела и потому требует мелкого кегля. Теперь нам остается решить последнюю задачу: как разграничить два заголовка, занимающих одну и ту же прямоугольную панель с фотографической подложкой? Обойтись без разграничения не получится, так как из-за контрастного форматирования и близкого расположения этих заголовков глаз все равно будет пытаться нащупать границу между ними. Из двух компонентов, составляющих панель, — белой подложки и полупрозрачной фотографии — разумно вторую оставить общей (объединение), а первую сохранить в фоне только одного из заголовков (противопоставление). Сужение белой полосы влечет за собой уменьшение размера связанного с ней логотипа, чему также можно найти оправдание — на внутренних страницах сайта этому элементу лучше слегка уйти в тень, высвободив пространство для несущих информацию элементов (рис. 91). Такая конструкция панели хороша еще и тем, что разносит два сходных по оформлению текстовых элемента — название фирмы в логотипе и заглавие текущей страницы — по разным «этажам», не позволяя им конфликтовать.

164

MISCELANEA Мне осталось объяснить некоторые незначительные отличия рассмотренного выше дизайна от того, который вы найдете по адресу www.quiotix.com, и рассказать о некоторых особенностях реализации сайта. Заметных изменений в дизайне было два. По просьбе клиента, которому показалось, что верхняя панель на внутренних страницах перетяжелена, я отнес строку кнопок навигации в низ страницы, поместив ее над нижней «облачной» панелью (кстати, копирайт и адрес для связи еще на предыдущем этапе были с этой панели убраны и помещены под ней в виде HTML-текста). Хотя отдельно взятая верхняя панель при этом проиграла, отношения в треугольнике «логотип — пара заголовков — кнопки навигации» растянулись тем самым на всю площадь страницы, сделав ее конструкцию более устойчивой.

Рис. 92 (см.

Рис. 93

цветную вкладку, стр. 336)

QEWS и news, или об относительности строчных и заглавных

Это, однако, повлекло за собой и изменение отношений в паре заголовков раздела и страницы на верхней панели. Центровка каждого из этих заголовков по вертикали внутри отведенной им полосы начала казаться слишком прямолинейным, неустойчивым именно благодаря своей симметрии решением. Чтобы страница в этой позе не заваливалась набок, мне пришлось отвести чуть в сторону одну из ее подпорок — а именно, уменьшить размер заголовка раздела и прибить его к правому верхнему углу отведенной для него полосы (рис. 92 на цветной вкладке). Не обошлось и без конфликта между соображениями единообразия дизайна, требующими писать заголовки разделов только строчными буквами, и устоявшимся обозначением одного из продуктов фирмы — Quiotix Embedded Web Server, сокращенно QEWS. В споре между заказчиком, отстаивавшим привычное написание заглавными в колонтитуле соответствующего раздела сервера, и дизайнером, ратовавшим за единообразие строчных букв, был достигнут компромисс: заглавные «Q» и «Е» были уменьшены до размера строчных, а штрихи их пропорционально утолщены. Полученное в результате гибридное «QEWS» интересно сравнить с набранным натуральными строчными буквами заголовком «news» (рис. 93). Как можно видеть на рис. 92 на цветной вкладке, внутритекстовые заголовки оформлены изменением начертания и цвета (желтый полужирный курсив), — но без изменения кегля, так как любой крупный шрифт вступил бы в немедленный конфликт с мелким шрифтом графического заголовка страницы. Узость колонки с текстом не позволяет использовать какие бы то ни было приемы верстки с горизонтальными втяжками, поэтому для списков с маркерами мне пришлось отказаться от использования тега UL, ограничившись добавлением в начало каждого абзаца списка маленького желтого графического прямоугольника. В конце 1997 года, когда создавался сайт, полагаться на использование CSS было еще рискованно; теперь для той же цели лучше было бы воспользоваться обычными тегами UL и LI, у которых с помощью CSS подавлены нежелательные отступы и маркеры по умолчанию заменены на графические вставки.

165

Галерея Э т о т р аз д ел — не к ата ло г U RL- адр е сов, а аль бом р е продукций в се х упоминавш их ся р а не е с тр а ниц , до сто йных в ним а ния ч и та т ел я и к а к пр име ры о бр азцово го д из а й на , и к а к иллюстрации к обсужд авш имся в к н и ге т ем ам . Изображение каждой страницы снабжено перечислением самых заметных особенностей ее дизайна со ссылками (номера страниц в скобках) на те разделы книги, где излагается соответствующий теоретический материал. Обратные ссылки вида «пример такой-то» ведут из основного текста книги на номер в Галерее. Автор, к сожалению, не может гарантировать, что по приведенным ниже адресам вы найдете те самые страницы, чьи копии здесь приведены. За время, прошедшее с момента написания книги, дизайн этих страниц мог измениться, они могли переехать по другому адресу или вообще исчезнуть. 1 www.avsi.com/avalanche/company/index.html

Дизайн на основе прямоугольников, прямоугольники с закруглениями (99); тонкие рамки без изменения фонового цвета и толстые рамки с заливкой (96); линииразделители (93); неповторяющееся фоновое изображение (236) 2 www.elliottdickens.com

Сплэш-страница (192) дизайнерского сайта (182) приглашает пользователя привести 166

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

3 www.elliottdickens.com/browser.cgi

Первая страница того же сайта с большим фотографическим визуалом (288), обрезанным краем окна и тем самым подсказывающим зрителю главную особенность сайта — расположение страницы «лежа» с горизонтальной прокруткой вместо привычной вертикальной (197); на этой и следующих страницах черно-белые фотографии противопоставлены ярким, насыщенным цветам фона 4 www.finemagazine.com/fine1/music/torih.htm

Разноуровневые заголовки (202), скрепленные системой прямых линий в роли «вспомогательных построений» (94); подчеркивание вплотную к буквам как прием оформления текста (94); широкий капительный (126) шрифт с маленькими засечками в сочетании с каллиграфическим курсивом (136); страница в открытом с помощью 167

JavaScript окне фиксированного размера без элементов интерфейса броузера (199); фотографический фон с размывкой (300), выполняющий одновременно роль визуала страницы (288)

5 www.prophetcomm.com/iconoclast/

«Декадентская» текстура, имитирующая осыпание и деградацию материала (122); парадоксальное стремление затруднить чтение, чтобы сделать его более интересным; сходное с применением отрицательного эмфазиса в заголовках (202); сложная комбинация растровых искажений (29S) 6 http://www.metadesign.com/

Контраст тесноты и даже частичного наложения в заголовке с разреженной композицией страницы и обилием пустот (80); использован «новый гуманистический» рубленый шрифт Meta, разработанный основателем этой дизайн-студии Эриком Шпикерманном (133); размывка по Гауссу (299) помогает перевести текст заголовка на второй план восприятия 7 http://www.metadesign.com/metawho/index.htm Горизонтальная линия в роли разделителя (93); локальные ссылки, ведущие от разделов длинного документа в его начало (195); «выдернутая» цитата (pull-out) 168

quote), сообщающая основную мысль раздела (228) 7

aboutus.miningco.com

Композиция с выраженным противостоянием центра и периферии стилизована под «диаграмму»: наклонные (94) линии «выносок», сознавая иронию приема (93), тактично не доходят до назначенных им фигур в «толпе», составленной из купленных в специализированном агентстве фотографии (76) 9 www.microsoft.com/license/opendrive/

Рисованная графика (289) в качестве визуала (288), интегрированная в заголовок внутренней страницы сайта (202) размывкой краев «на фотографический манер» (299) 169

10 www.splashtech.com

Если логотип фирмы Splash (англ. «всплеск») страдает излишней иллюстративностью в ущерб простоте и символизму (267), то в визуале первой страницы (288) та же самая идея, реализованная с фотографическим реализмом (1"19), парадоксальным образом превращается во впечатляющий символ, вокруг которого выстраиваются все остальные элементы 11 www.supercede.com/prodserv/scfjava.html 12

Неповторяющееся фоновое изображение визуализирует «силовые линии» восприятия информации переднего плана (2в4); имитация типографского точечного растра позволяет фону сохранить фотографическую размытость в GIF-файле с двухцветной палитрой (264); в графических кнопках панели навигации использован «гуманистический» рубленый шрифт (133)

170

12 http://www.wps.ru/

Прямоугольники с толстым контуром (97); последовательное округленно всех углов (99); «старый» доконструктивистский рубленый шрифт Гермес (13Й) в кнопках навигации; комбинация растровых эффектов (2?5) для имитации «подпорченной» черно-белой фотографии 13 http://www.bdaweb.com/

171

14 http://www.capstonestudio.com/

172