Из-под пятницы суббота

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

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

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

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

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

Пиксельные эффекты

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

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

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

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

Здесь же уместно напомнить о правиле выравнивания пропорций при уменьшении (стр. 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.

GIF. Взамен единственного и довольно-таки абстрактного «уровня качества» степень сжатия в GIF регулируется рядом параметров, самым важным из которых является количество цветов, или размер палитры. Другие форматы, как правило, имеют лишь стандартные градации цветовой глубины: 2 цвета, 16 цветов, а потом сразу 256, 2¹⁵ (high color) и 2²⁴ (true color, стр. 61). GIF же может иметь любое количество цветов от 2 до 256, и если в изображении используется, скажем, 64 цвета (2⁶), то для хранения каждого пиксела будет взято ровно по шесть бит и ни битом больше. (Втиснув то же изображение в 60 или 40 цветов, вы получите лишь незначительный выигрыш в размере; следующий скачок оптимизации произойдет только при переходе через 32 цвета, когда размер каждого пиксела сократится еще на один бит.)

Если не применяется безопасная палитра, графическая программа са­ма решает, какие именно цвета останутся при редукции полноцветного

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

Сколько же цветов нужно для вашего изображения? Хотя опыт определения цветовых потребностей графики «на глазок» приобретается довольно быстро, во многих случаях приходится поэкспериментировать. Так, одноцветному тек­сту на одноцветном фоне должно хватить палитры из 8, а в небольших размерах даже и 4 цветов — два из них станут «основными», а остальные отойдут промежуточным тонам для анти-алиасинга. С другой стороны, 256 (а иногда и 128) цветов с диффузией обычно вполне достаточно для полно­ценной передачи фотографического изображения средних размеров (хотя с этой задачей, скорее всего, лучше справит­ся JPEG). Основная часть веб-графики располагается где-то в промежутке между этими крайностями.

Сжатие без потерь и ограниченность палитры 256 цветами, собственно говоря, никак не связаны друг с другом, хотя веб-дизайнеры, пользующиеся форматом GIF, привыкли к одновременному действию этих факторов. Разработан­ный сравнительно недавно формат PNG (Portable Network Graphics) реализует более эффективное, чем GIF, сжатие без потерь, но при этом может хранить не только графику с фиксированной палитрой, но и полноцветные изобра­жения с тремя байтами на пиксел. Этот формат имеет и множество других преимуществ, благодаря которым он, вероятно, вытеснит GIF сразу же, как только его поддержка появится в распространенных графических броузерах.

Взболтать и настоять

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

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

Главный смысл использования диффузии — в том, что изображение при этом становится гораздо терпимее к раз­меру палитры. Например, если без применения диффузии картинка не выдерживает редукции даже до 128 цветов, то с диффузией ее можно обкорнать до 64 или даже 32 цветов без особой потери качества. С другой стороны, случайная диффузия, как и любая нерегулярность («шум») в данных, резко ухудшает сжимаемость графики. Вот по­чему иногда, снизив цветность картинки, скажем, с 256 до 128 цветов, из-за этого противоположно направленного эффекта вы вместо уменьшения размера файла получите увеличение.

К сожалению, даже диффузия подчас неспособна «вытя­нуть» такие сугубо фотографические элементы изображения, как размывки и градиенты. На рис. 54 хорошо заметно, как при воспроизведении в ограниченной палитре градиент распадается на сильно портящие впечатление поперечные полосы (впрочем, надо отдать справедливость диффузии, — без нее эти полосы были бы несоизмеримо заметнее). Мно­гочисленные программы-оптимизаторы с разной степенью успеха пытаются избавиться от этой «полосатости» (англ. banding), но до конца это не удается пока что никому. Как и у программ-архиваторов, степень сжатия графической информации в GIF сильно зависит от уровня ее повторяемости и предсказуемости, а иногда еще и от ориентации картинки. Поскольку GIF сканирует изо­бражение по строкам, то, к примеру, градиент, направленный сверху вниз, сожмется куда лучше, чем тех же размеров градиент, ориентированный слева направо, а этот последний — лучше, чем градиент по диагонали. Диффузия, хотя и сильно ослабляет эффект зависимости степени сжатия от ориентации, все же не отменяет его.

Чудное мгновенье

Особый жанр искусства оптими­зации — редукция палитры кадров анимированных GIF-файлов. Не только более жесткие требования к объему

Рис. 57

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

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

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

Blow up

Напомню, что, вставляя подготовленное изображение в HTML-документ, нужно снабдить его двумя обязатель­ными вещами: alt-текстом (стр. 35) и явным указанием ширины и высоты атрибутами height и width. К пред­мету этой главы имеет прямое отношение возможность масштабирования графики указанием в HTML габаритов изображения, отличных от реальных. Если уменьшать гра­фику таким манером никакого смысла нет (лучше сразу сделать ее маленькой, сэкономив тем самым на объеме файла), то сильное растягивание картинки (в том числе и с нарушением пропорций ширины и высоты) — хотя и редко встречающийся, но достаточно интересный прием оформления.

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

25?

виде). Если же добавить к этому возможность привязать размеры графической вставки к размеру окна броузера (на­писав, например, height="100%" width="100%"), в сумме вы получите несколько «попсовый», но без сомнения весьма впечатляющий оформительский прием.

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

Функции

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

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

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

Выставочная графика

Функциональный подход к классифи­кации веб-графики позволяет выделить одну ее разновид­ность, вообще лишенную какой бы то ни было прикладной функции, — «графику ради графики», графику как таковую. К этой категории принадлежат сканированные фотографии,

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

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

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

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

серого), прописыванию заглавия и центровке изображения относительно границ окна.

Фоны

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

Сейчас нас в основном интересует тема наложения гра­фических объектов друг на друга, имеющая прямое отно­шение к такому специфическому жанру веб-графики, как фон. Изображение, URL-адрес которого указан в атрибуте background тега BODY, будет размножено броузером по всей площади окна под (и без всякой координации с) содержи­мым «переднего плана». По всей видимости, программисты фирмы Netscape, добавившие эту возможность в версии 2.0 своего броузера, не подозревали о том, сколько изобрета­тельности будет проявлено дизайнерами в реализации этой простой схемы.

Поиск по сайту: