GetInfo.Ru – Компьютерная библиотека
Последние поступления
Как выбрать систему управления базы данных
Базы данных03/09/14
Этапы загрузки UNIX (в схеме)
Unix27/03/12
Gatewall Antispam: тотальный контроль электронной почты
Спам21/04/11
Мастер-класс: создаем Интернет-магазин (Часть 1)
Обзоры ПО20/04/11
CorelDRAW Graphics Suite X5: Что нового?
Обзоры ПО20/07/10
Добавить статью
Самые читаемые материалы
Подбор гармоничных цветов(38635)
Колористика(21059)
Основы веб-дизайна(17236)
Шрифт. История шрифта(15698)
Пиктограммы для сайта - это просто!(15388)
Всего статей: 793Всего авторов: 364Подразделов: 47Добавлено за сутки: 0
Статьи  СТАТЬИ Форум  ФОРУМ Рейтинг  РЕЙТИНГ Поиск  ПОИСК Контакты  КОНТАКТЫ
» Главная » Основы дизайна » О кернинге, как о необходимой процедуре дизайна

О кернинге, как о необходимой процедуре дизайна


Андрей В. Кицен
fordest@mail.ru

I like to move it, move it!
(о кернинге, как о необходимой процедуре дизайна)

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

Эта процедура называется кернингом (kerning). Наверное, многие, особенно те, кто работает в графических или издательских пакетах, знают, что такое трекинг (tracking) - это величина отступа между символами в слове. Но на самом деле все то, что делается автоматически, не всегда идеально с точки зрения человеческого зрения (каламбур :-). Кернинг - это процесс регулировки межбуквенного расстояния в зависимости от конкретного сочетания символов. Взгляните на этот пример (две "почти" одинаково набранные фразы):

Если Вы не видите никакой разницы - извините, эта статья не для Вас, и дальнейшее ее прочтение никакой пользы не принесет. Спасибо тем, кто остался :-)

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

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

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

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

Многие любят готовые рецепты типа "пять-шесть правил Профессионального Дизайна" или "Как сделать за 3 минуты красивое меню". Не дождетесь. Нет никаких четких правил, по которым нужно сдвигать или раздвигать символы на столько-то-и-столько-то в зависимости от их сочетаний - нужно просто смотреть на то, что в результате получается. Я бы порекомендовал сначала выбрать наиболее проблемное сочетание (скажем ЖЭ, ГХ, ОС, КУ, LJ и т.д. - в разных гарнитурах по-разному) и сперва отрегулировать его. Затем браться за символы, расположенные в непосредственной близости справа и слева - и так постепенно расходиться в обе стороны, наблюдая за тем, что получается вцелом. Если Вы считаете, что сдвиг на один пиксель - это уже много, и "дыра" в Вашей надписи превращается в "тесноту" - попробуйте сделать следующее. В диалоговом окне форматирования текста в графическом редакторе выделите первый символ проблемного сочетания и установите для него такую величину трекинга, чтобы в результате действия anti-aliasing-а получилось такое расстояние, которое Вас устроит. Возможно, придется иногда возвращаться к некоторым символам, что поделаешь. А еще очень полезно после того, как уже "все готово", погулять пару часиков и снова взглянуть свежим глазом на свое творение - Вы сразу увидите то, что увидит посетитель Вашего сайта в первый момент, включая и неточности. Садитесь и исправляйте!

P.S. Не удивлюсь, если больше половины прочитавших эту статью скажут: "Да ну, ерунда какая, зачем тратить свое драгоценное время на какие-то мелкие тусовки пикселей, лучше в Quake..." Наверняка эти люди "занимаются дизайном" в свободное от школы/танцев/прогулок-с-друзьями/и-т.д. время. Это любители, им скоро надоест. Моя статья для тех, кто действительно хочет, чтобы их творение смотрелось хорошо, и никогда не скажет, что он уже Все Знает Про Настоящий Дизайн. Настоящий дизайн не делается за 5 минут, поверьте...

Статья взята с сайта web-студии Sparkle Design

 
04.10.2003
Версия для печати Версия для печати Запомнить ссылку Запомнить ссылку
Ваша оценка:  1   2   3   4   5     

 О проектеПерепечаткаАвторамПартнерыО нас пишут
Наверх
©2003—2007. GETINFO.RU. ВСЕ ПРАВА ЗАЩИЩЕНЫ.