книги хакеры / журнал хакер / специальные выпуски / Специальный выпуск 50_Optimized

этого термина. Тогда Артемий Лебедев в своем знаменитом “Ководстве” (www.artlebedev.ru/kovodstvo2/sections/ - читать всем!) описывал экранную типографику как “специфику экранного чтения и русских типографских традиций, а также совместимость с разными платформами и кодировками”.

Предлагаю коснуться этих самых правил.

ÆÈ-ØÈ È ×À-ÙÀ

1. Существует целый ряд правил, относящихся к кавычками. В русских текстах используются «елочки» или „лапки“. Для английского языка это совершенно неприемлемо: стандартными являются “такие” или ‘такие’ кавычки. Что касается значка дюйма ("), то он применяется исключительно в исходных текстах программ, иногда в электронной переписке (на самом деле знак дюйма применяется так широ-

Cправочник HTML-верстальщика

ко в электронных текстах потому, что его непостредственно можно набрать с клавиатуры в текстовом режиме (в консоли) - прим. AvaLANche'а).

2.Тире – это совсем не то же самое, что дефис. Хотя бы потому, что первое длиннее раза в два-три. Между ними существует разделение труда: тире, например, заменяет собой пропущенное слово, в то время как дефис чаще всего является “связующим звеном” сложных слов и знаком переноса.

3.В интернете часто используются знаки “знак охраны авторского права“ © и “символ зарегистрированного товарного знака“ ®. Писать их нужно именно так – комбинации (c) и (r) не годятся (опять же, в старых 7-битных кодировках этих знаков в помине не было - прим. AvaLANche'а).

4.Правильная расстановка переносов – задача более сложная, чем может показаться на первый взгляд. Важно научиться оперировать неразрывными пробелами и дефисами, чтобы исключить ситуации “разрыва” слов с предлогами или частицами. Запомни: дефис на следующую строчку не переносится. Недопустимой считается и слишком маленькая последняя строка абзаца.

Лихо? Не то слово, тем более что это лишь небольшая часть правил. Более полный вариант смотри, например, здесь - www.cs.huji.ac.il/~alexkon/typography /rules.html è www.livejournal.com/users/genn_org/18700.html. Рекомендую.

9

ЧТО ЖЕ ДЕЛАТЬ?

Честно говоря, когда я впервые ознакомился с правилами экранной типографики, я даже расстроился. Так много возни с вещами, на которые в повседневной жизни мало кто обращает внимание. Работы и так невпроворот, а тут еще к обеспечению достойного стиля, оформления и эргономичности дизайна прибавляется вылавливание ошибок типографики. Представь себе, что ты читаешь, например, электронный справочник только для того, чтобы убрать все лишние пробелы (пробел везде, где он нужен, должен быть единственным), расставить правильные кавычки, переносы, дефисы и тире. Ты уже готов пережить сильнейшее экзистенциальное потрясение в своей жизни? :) Не спеши. Есть способ проще (например, воспользоваться услугами редактора, который почему-то нашел в этой статье двойные пробелы :) - прим.Dr.).

Существует масса программ, скриптов и онлайновых сервисов, которые способны исследовать текст на предмет ляпов в тексте и в случае необходимости их ликвидировать. Среди наиболее продвинутых сервисов - «Типограф» Артемия Лебедева (www.artlebedev.ru/tools/typograf), “Типограф 1.4“ (www.typograf.ru), “Автотипографика“ (at.webcode.ru/online). Если все это не устаивает тебя по каким-то причинам, то можешь попробовать самостоятельно разработать подобный инструмент и подогнать его под свой вкус. Таким энтузиастам, как ты, могу порекомендовать проштудировать исходники с www.livejournal.com/talkread.bml?journal=david_m&itemid=2533 3, а также заглянуть в “Копилку регулярных выражений“ (www.spearance.ru/parser3/regex).

БЕЗ ТРУДА НЕ УТОПИШЬ И ТРАКТОР В ЛУЖЕ

Хочется тебе того или нет, но с правилами типографики тебе придется считаться. Если раньше заказчик мог не заметить или простить, например, ошибки набора текста, то теперь такой номер не прокатит. Требования стали значительно выше, а соблюдение правил типографики стало стандартом, де-факто. E

Скобки в простом тексте применяют только круглые. В скобки заключаются вводные слова, пояснения и дополнения к основному тексту.

ные работы и у потенциального работодателя начинают шевелиться волосы (сам знаешь где), но в то же время он не может оторвать взгляда от картины, - это безумно приятно для тебя и практически гарантирует получение заказа. Однако с этим тоже нужно не переусердствовать, так как слабые нервы и неприятие Dark’а как такового пожилыми людьми могут поспособствовать тому, что ты будешь отправлен домой заколачивать гвозди в гробик своей морской свинки :).

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

Космическая тема в стиле Future

луживают того, чтобы за ними нежно ухаживали.

Очень полезно обращать внимание на размер текста. Сверка масштаба - одно из мощнейших средств довести дизайн до совершенства. Когда масштабность не соблюдается, то есть, например, размеры шрифтов отлича- ются друг от друга даже незначительно, буквы вдруг перестают слушаться, начинают спорить друг с другом, устраивают бунт. Для композиций с небольшим количеством текста поможет принцип триединства: крупные буквы, рядом - в полтора раза мельче, внизу - еще мельче. Те строчки, что поменьше, тут же послушно подчи- нятся тем, которые побольше. Возникнет приятный глазу порядок. Буквы встанут в строй как верные и преданные слуги.

ÖÂÅÒ

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

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

Green (зеленый) и Blue (синий). Зада- ча дизайнера - уговорить всех троих хорошо поработать в коллективе и, как следствие, порадовать глаз зрителя. Для этого надо выяснить, что на самом деле любит этот "Мистер Глаз". Все видимые для человеческого глаза цвета укладываются в так называемый цветовой круг. Они выстроены друг за другом и взаимозависимы, так как каждый из них по мере движения по цветовому кругу выхо-

дит из предыдущего и постепенно переходит в следующий. Теперь ты хорошо видишь, что красный находится напротив зеленого, оранжевый напротив синего, желтый - напротив фиолетового. Оранжевый - это не совсем то же, что оранжевый. Между синим и фиолетовым идет вечная война, а зеленый вообще не признает соседей. Любой цвет также имеет насыщенность и яркость. Чем больше насыщенности, тем цвет более "цветной": минимальная насыщенность у серого цвета. Яркость цвета определяется так: чем ярче, тем светлее. Минимальная яркость у черного цвета.

РЕЦЕПТЫ КРАСОТЫ

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

Цвета, лежащие друг напротив друга (дополнительные), например, красный и зеленый, вряд ли уживутся на одной территории. Дело в том, что у них принципиальное противостояние вот уже несколько миллионов лет, примирить их - утопия. Но и утопия имеет право на существование, если ты задался целью создать дизайн в стиле "панк".

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

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

Сначала все как будто происходит само собой - работа кипит, мышка шуршит, за окном сумерки сменяются ночью. И вот приходит момент, когда ты смотришь на все то, что было сделано, и решаешь заварить себе кофе. Ты смотришь в монитор, и вдруг начи- нает резать глаз: вот здесь как-то криво, а там вообще все надо сделать подругому. Наступает момент истины - анализируешь композицию! У компо- »

Вдохновение надолго не задерживается. Если пришло - используй!

Стиль манга не обходится без мультяшных девочек в коротких платьицах

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

Целостность. Композиция будет удачной, если она не развалится на части и все ее элементы станут участниками единой команды. Как только возникает объект-конкурент, угрожающий развалить все построенное, то появится возможность прибегнуть к еще одному инструменту - балансу. Баланс. Его наличие не означает равномерного заполнения пространства объектами одного размера для уравновешивания композиции. Баланс подра-

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

Контраст. Пригодится, когда нужно будет подчеркнуть противополож-

Милитари всегда сдержан в цветах. Камуфляж и пальмы вьетнамских побережий