Как не надо делать фон

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

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

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

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

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

материальных фонов есть и более глубоко лежащие при­чины.

Прогладить с изнанки

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

Рис. 58

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

Рис. 59

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

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

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

Одномерные фоны

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

Самый распространенный в настоящее время тип фоно­вых изображений — это фоны, размножаемые только по одному измерению. Если взять в качестве фона изображение, ширина которого с гарантией превосходит любую возмож­ную ширину окна броузера (двух тысяч пикселов хватит с лихвой), то о горизонтальной повторяемости можно бу­дет забыть, и броузеру останется лишь складывать копии этого изображения в вертикальную стопку (рис. 60, б). Обеспечив однородность горизонтальной фоновой полоски в вертикальном направлении, мы сможем раскрашивать фон произвольно расположенными, лишенными какой бы то ни было повторяемости вертикальными полосами с произволь­ной текстурой (эти полосы могут быть плоскоцветными с резкими краями, а могут и пользоваться любыми гори­зонтальными градиентами или пиксельными текстурами). Классический вариант — сравнительно узкая (150—200 пик­селов) полоса более темного цвета вдоль левого края окна, служащая для размещения навигационной панели, логоти­па, минибаннеров (стр. 287) и тому подобных элементов, повторяющихся на всех страницах сайта. Такой фон выпол­няет практически ту же функцию, что и деление окна на фреймы.

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

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

Одним куском

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

Единственное, хотя и довольно досадное техническое ограничение — невозможность обеспечить совмещение

(a)

(б)

(в)

(г)

Рис. 60

Типология фонов:

(а) — обычный фон, размно­жаемый по обоим измерениям;

(б) и (в) — полосатые фоны, размножаемые только по вер­тикали и горизонтали соот­ветственно; (г) — полностра­ничный фон

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

т

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

Этот пример дает повод обсудить еще один технический аспект полностра­ничных фонов: чтобы общий вес страницы с таким фоном не выходил за рамки приличия, все фоновое изображение размерами в сотни и даже тысячи (по высоте) пикселов должно уложиться не более чем в 20—30 Кб. Достичь этого можно двумя путями: либо сжатием в JPEG с большими потерями, которые будут незаметны только для «очень фотографических», размытых и к тому же темных по цвету изображений, либо сжатием плоско­цветных изображений в GIF до 2—4-цветной гаммы (естественно, при этом придется отказаться от анти-алиасинга, что опять-таки допустимо только при низком уровне контраста). Если же в формате GIF нужно сохранить изображение с чуть более сложной текстурой, можно «аппроксимировать» ее плоским цветом с помощью, например, имитации типографского растра, как сделано в примере 11.

ЛОГОТИПЫ

Термин «логотип» в этой книге применяется к любым графическим и/или шрифтовым знакам, символам и эмбле­мам, которые могут принадлежать фирмам, организациям, проектам и событиям, отдельным людям, товарам и услугам. Важность этого, казалось бы, узкоспециального дизайнер­ского жанра именно для веб-дизайна объясняется просто: большинство страниц и сайтов в современном Интернете

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

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

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

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

Диалектика формы

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

Рис. 61«Скрытый смысл» логотипа: фигура, которой нет (а), и борьба симметричных противоположностей (б)

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

Важное понятие «скрытого смысла» стоит пояснить на паре примеров. Логотип на рис. 61, а пользуется очень распространенным приемом «до­казательства от противного»: форма пустот и вырезов в главной фигуре подразумевает наличие некоей другой фигуры — «пуансона», по форме которого были проделаны эти вырезы и в котором к тому же угадывается намек на очертания буквы «Q» (заглавной буквы названия компании). Фи­гура эта задает нам задачку, пусть и очень несложную, и интеллектуальное удовлетворение от ее решения составляет значительную часть эстетическо­го удовлетворения от самого логотипа. На рис. 61, б скрытый смысл также

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

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

На единицу площади

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

Про что картинка?

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

(а)

(в)

иллюстративности, может служить первая буква или аббре­виатура названия фирмы в качестве основы графической части знака.

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

Символ и слово

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

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

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

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

Можно сказать, что чисто графический знак идеально подходит для Mercedes Benz по той же причине, по ко­торой текстовый логотип работает для компании Microsoft. В первом случае действует примерно такая мотивация: «Мы настолько знамениты, что любой узнает наш знак даже без подписи», а во втором: «Уровень нашей компании обще­известен, так что незачем пытаться поразить потребителя какой-то небывалой графикой». Для обычных же, сред­ней руки компаний оптимальным остается традиционный подход, комбинирующий в едином логотипе графическую и текстовую части.

Аспекты логотипа

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

Форма

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

(а)

Microsoft

(б)

Рис. 63

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

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

Это не значит, конечно, что в логотипе не должно быть нюансировки (стр. 171), — наоборот, нюансы, компенсирующие всевозможные иллюзии восприятия, необычайно важны именно для логотипов, которые обя­заны оставаться безупречно правильными и при беглом взгляде, и при сколь угодно долгом рассматривании. Более того, в особо ответственных случаях приходится делать версии одного логотипа с разными наборами нюансов, предназначенные для разных размеров или разных цветовых решений. Так, логотип AT&T (рис. 67 на стр. 275) существует в нескольких вариантах для раз­ных размеров и для позитивного (темным по светлому) и негативного (светлым по темному) начертаний; эти варианты отличаются количеством и формой горизон­тальных полосок, из которых складывается изображение шара.

По адресу www.att.com/identity/stantlards/graphic/сама фир­ма AT&T дает всем заинтересованным дизайнерам очень детальные и поучительные инструкции: как выбрать один из вариантов логоти­па, какие схемы его раскраски допустимы, как правильно разместить знак на странице, и даже — какие ошибки типичны для дизайнеров, работающих с этим логотипом...

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

Конечно, далеко не любая аморфность способна быть носителем абстрактного начала. Более того, не случайно

Lucent Technologies

Рис. 64

«Красное колесо» фирмы Lucent призвано сим­волизировать оригинальность и новаторский дух ее разра­боток

Рис. 65

Эмблемы олимпий­ских игр всегда были характер­ными представителями дизай­на своего времени

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

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

Шрифт

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

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

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

Рис. 66

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

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

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

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

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

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

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

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

Текстура

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

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

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

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

Рис. 67

Логотип AT&T был создан в 1982 г., в самом начале повальной моды на ими­тацию трехмерности, и именно этот прием лежит в основе его «скрытого смысла»

Баннеры

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

Сколько натикало?

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

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

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

Статистика показывает, что ротация баннеров (подстановка новой кар­тинки при каждом запросе страницы с сервера) повышает эффективность рекламы по сравнению со статическими баннерами, висящими на одном и том же месте страницы в течение дней и недель. В то же время владелец сайта не имеет возможности динамически менять HTML-код своей стра­ницы, так чтобы при каждой загрузке страницы на ней появлялся новый, случайно выбранный из общего репертуара баннер, — тем более что сами файлы баннеров хранятся на сервере службы обмена. И хотя атрибут src тега IMG может указывать на любой URL, в том числе расположенный и на другом сервере сети, адреса всех входящих в ротацию баннеров известны только службе обмена (собственно говоря, каждый входящий в систему сайт может в любой момент изменить набор своих баннеров). Для ротации рекламы на баннерном сервере устанавливается специальная CGI-программа (стр. 71), работающая с текущими базами данных банне­ров, рекламодателей и участвующих в системе сайтов. Владельцу страницы достаточно прописать в соответствующем теге IMG особый URL, комби­нирующий адрес сервера баннерной службы, обращение к CGI-программе на этом сервере и код сайта-участника, по которому программа узнает, из какой тематической группы выбирать (по случайному алгоритму) баннер и чей счетчик показов увеличивать. Это значит, в частности, что загруз­ка страницы с рекламой может замедляться из-за перегрузки баннерного сервера. Поэтому все сколько-нибудь крупные контент-сайты предпочи­тают устанавливать на своих серверах собственные системы управления рекламой, позволяющие минимизировать задержки, полностью контроли­ровать всю показываемую на сайте рекламу, прописывать свой alt-текст для каждого баннера и включать в ротацию составные HTML-баннеры (стр. 285).

Главным мерилом эффективности баннера считается отно­шение числа посетителей, щелкнувших по нему, к общему

числу видевших страницу с этим баннером. Эта величи­на, обозначаемая по-английски аббревиатурой CTR (click-through ratio, что можно было бы перевести на русский словом «проклик»), поддается объективному измерению: по статистике сервера нетрудно подсчитать, сколько копий баннера было перекачано пользователям и сколько раз произошел переход по соответствующей ссылке. Оплата ре­кламы, тем не менее, рассчитывается обычно в зависимости от общего количества показов баннера (цены сейчас лежат в диапазоне от 3 до 50 долларов за тысячу показов в за­висимости от степени адресности рекламы). Лишь изредка цена привязывается не к количеству показов, а к количеству переходов по баннерной ссылке или даже к количеству тех людей, которые, попав через баннер на сайт рекламодателя, заказали там его продукт или услугу.

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

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

Форматы

Самый распространенный из стандартных форматов банне­ров — 468x60 пикселов. Кроме того, встречаются «половинные» баннеры 234x60, баннеры форматов 400x40, 200x40, 120x90, минибаннеры 88x31 и квадратные баннеры 125x125 (к последним, кстати, слово «баннер» не очень-то подходит, так как исходное его значение — «транспарант, заголо­вок»).

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