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

Веб–графика

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

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

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

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

Техника

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

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

ПАЛИТРА И ДИФФУЗИЯ

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

оно может распространяться либо только на количество используемых цветов, либо и на количество, и на конкретный их набор. И хотя сам формат накладывает ограничения только первого рода (стр. 61), принцип «общего знаменателя» заставляет иногда прибегать к некоторой «общепринятой» GIF-палитре с фиксированными цветами.

Зачем это нужно? Дело в том, что перевод изображения в ограниченную палитру часто сопровождается диффузией (dithering). При этом области, которые в оригинале были залиты однородным цветом, после преобразования заполняются смесью беспорядочно разбросанных пикселов разных цветов. Как правило, каждый отсутствующий в редуцированной палитре цвет передается смесью в нужной пропорции пикселов двух самых близких к нему цветов новой палитры. В результате изображение приобретает характерную зернистую, шершавую фактуру. Очень часто диффузия является единственным способом хоть сколько–нибудь адекватно передать исходные цвета с помощью палитры, на которой этих цветов уже нет (рис. 54).

Рис. 54 Диффузия под микроскопом: так Adobe Photo–shop распределяет пикселы при попытке передать черно–белый градиент восьмицветной палитрой

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

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

Проблема эта действительно серьезна, так как для многих изображений, составляющих нередко основу дизайна страницы, диффузия крайне нежелательна. Что же делать? Оказывается, существует набор из 216 цветов, которые с гарантией никогда не подвергаются диффузии ни в одном из броузеров и ни на одной из платформ. Если ваше изображение будет содержать только цвета из этого набора (или, по крайней мере, к этому набору будут относиться цвета, занимающие наибольшую площадь), на 256-цветном экране оно будет выглядеть намного чище и привлекательнее. Эту палитру часто называют «безопасной» (англ. Browser–safe palette) или «интернетовской».

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

Очевидно, что серьезно относящийся к цветовому решению своих работ дизайнер должен позаботиться о цветовой безопасности на самых ранних стадиях проекта. Встроенная или загружаемая «интернет–палитра» есть сейчас во многих векторных и растровых графических программах. Ничто не мешает вам выбирать ее цветовые значения и вручную, пользуясь таким несложным правилом: 216 цветов этой палитры получаются комбинированием красной, зеленой и синей составляющих, каждая из которых может принимать только шестнадцатеричные значения 00, 33, 66, 99, СС и FF (или десятичные 0, 51, 102, 153, 204 и 255). Таким образом, три составляющих, каждая из которых может принимать шесть разных значений, дают б 3 = 216 возможных цветов.