- •Дмитрий кирсанов
- •Глава I. Техминимум 18
- •Глава II. Основы дизайна 56
- •Глава III. Дизайн веб-сайтов 131
- •Глава IV. Веб-графика 175
- •Оглавление
- •II.1 Пространственные отношения (78)
- •II.10 Нюансировка (172)
- •V.3 Галерея (323)
- •Предисловие
- •Что здесь есть и чего здесь нет
- •Примеры
- •Соглашения
- •Сверим часы
- •Как выбрать дизайнера
- •Почему эта тема?
- •Сам себе Гутенберг
- •Глава I. Техминимум
- •Кодировки текста
- •Однобайтовые кодировки
- •Семейство 8859
- •Двухбайтовые кодировки
- •История
- •В начале был sgml
- •Прикладная философия
- •Золотой век
- •Html плюс
- •Идолы рынка
- •Бяки и буки
- •Три, четыре...
- •Синтаксис
- •Подстановки
- •Минимальный документ
- •Текстовая разметка
- •Ссылки и привязки
- •Изображения и объекты
- •Национальные особенности
- •Согласование кодировок
- •Среды и доступность
- •Доступность: таблицы
- •Как писать alt-тексты
- •Доступность: изображения-карты
- •Мета-данные и поиск
- •Мертвая зона
- •Принципы
- •Возможности
- •Модульный html
- •Режем по живому
- •Сборно-панельный сайт
- •Например
- •Синтаксис
- •Уровни соответствия
- •Конверсия
- •Надстройки
- •Графика
- •Вектор в Интернете
- •На все четыре стороны
- •Палитры
- •Системы представления цвета
- •Программирование
- •Динамический html
- •Модульные технологии
- •Динамические страницы
- •Глава II. Основы дизайна
- •Как учиться дизайну
- •Дизайн и «чужое творчество»
- •Материалы и инструменты
- •Пространственные отношения
- •Относительность размера
- •Форма и размер
- •Искусство выравнивания текста
- •Цвет и размер
- •Текстура и размер
- •Пропорции
- •Золото и пластмасса
- •Пропорций простота
- •Микропропорции
- •Размещение
- •Одноуровневые элементы
- •Разноуровневые элементы
- •Плотность
- •Пол и характер
- •Плотность текста
- •В нужное время и в нужном месте
- •Дизайн Пизанской башни
- •Прямоугольники
- •Круги и закругления
- •Кривые Безье
- •Бесформенность
- •Как устроен цвет
- •Прогулка по цветовому кругу
- •Главные цвета
- •Восприятие цвета
- •Сочетаемость цветов
- •Текст и фон
- •Текстуры
- •Плоский цвет
- •Геометрические текстуры
- •Пиксельные текстуры
- •Фотографические текстуры
- •Материальные текстуры
- •Шрифт и текст
- •Элементы шрифта.
- •Гарнитура, начертание, шрифт
- •Виды начертаний
- •Шрифты и время.
- •Переходные шрифты
- •Новая антиква
- •Кларендон
- •Новые рубленые
- •Маятник гуманизма
- •Подбор Шрифтов
- •Единство противоположностей
- •Слишком декоративные шрифты
- •Развивая тему
- •Шрифты и названия
- •Параметры Набора
- •Прописные и строчные
- •Интервалы
- •Выравнивание и отступы
- •Размещение
- •Чья случайность лучше?
- •Текст как текстура
- •Единство
- •Академический стиль
- •В полный рост
- •Размещение
- •Текстура
- •Центр масс системы
- •Правило рычага
- •Контраст
- •Контраст — это продолжение единства другими средствами
- •Одномерный контраст
- •Многомерный контраст
- •Аспекты контраста
- •Расстояние
- •Расположение
- •Текстура
- •Динамика
- •Динамика явная
- •Ветер по Гауссу
- •Динамика совсем явная
- •Динамика неявная
- •Нюансировка
- •Пространственные отношения
- •Глава III. Дизайн веб-сайтов
- •Преграды и препоны
- •От общего к частному
- •Типы сайтов
- •Первый шаг
- •В мире .Org
- •Скорей любите нас
- •Бесплатный сыр
- •Устройство сайта
- •Неупорядоченный континуум
- •Топология сайта
- •Распределение материала
- •Фреймы и окна
- •Первая страница
- •Всплеск и вскрик
- •Формат страницы
- •Заметки о полях
- •Во первых строках
- •У голубого экрана
- •Если тебе дадут линованную бумагу — пиши поперек
- •Ступеньки ригидности
- •Заглавия и заголовки
- •Заглавие
- •Заголовки: логика
- •Заголовки: дизайн
- •Разделители
- •Баннеры
- •Навигация
- •Общий обзор
- •Семантика
- •Разновидности одинаковости
- •По ту сторону кнопок
- •Символы и метафоры
- •Особые случаи
- •Динамическая навигация
- •Блоки текста
- •Коренные шрифты
- •Все шрифты ношу с собой
- •Осторожно: кириллица
- •Другие параметры
- •Правила набора текстов
- •Расстановка пробелов
- •Неразрываемые пробелы
- •Текстовые выделения
- •Спецсимволы
- •Позиционирование
- •Дурная наследственность
- •Двойное дно
- •Белое место
- •Фэйсом об тэйбл
- •Позиционирование в css
- •Глава IV. Веб-графика
- •Техника
- •Палитра и диффузия
- •Цветовые границы
- •Экранный анти-алиасинг
- •Пиксельные эффекты
- •Оптимизация
- •Взболтать и настоять
- •Чудное мгновенье
- •Функции
- •Выставочная графика
- •Как не надо делать фон
- •Прогладить с изнанки
- •Одномерные фоны
- •Одним куском
- •Логотипы
- •Диалектика формы
- •На единицу площади
- •Про что картинка?
- •Символ и слово
- •Аспекты логотипа
- •Текстура
- •Баннеры
- •Сколько натикало?
- •Форматы
- •В нужное время и в нужном месте
- •Слева при входе
- •В начале было что-то
- •Собственная гордость
- •Удар ниже пояса
- •Смена поколений
- •На килограмм живого веса
- •Рынок визуалов
- •Трехмерность
- •Император иллюзий
- •Пластмассовый призрак
- •Скульптура или барельеф
- •Искусство искажений
- •Нетекстурирующие эффекты
- •Текстурирующие эффекты
- •Логотип
- •Цветовая схема
- •Входные цвета
- •Информационные цвета
- •Первая страница
- •Карты на стол
- •Навигация
- •Логотип
- •Первая страница
- •Внутренние страницы
- •Галерея
- •15. (Книги России 1) www.Books.Ru
- •Индекс Символы.
- •А(латиница).
Интервалы
Огромное влияние на восприятие текста оказывают интервалы набора — расстояния между буквами в словах, между словами и между строками в абзацах. Развивая аналогию с голосом, читающим текст, величины интервалов можно уподобить быстроте произнесения слов — с той только разницей, что интервалы в наборе можно менять по двум измерениям, а не по одному.
Прежде чем пускаться в эксперименты, позаботьтесь о правильной установке межбуквенного расстояния в зависимости от кегля шрифта. Чем меньше кегль шрифта, тем свободнее, дальше друг от друга должны стоять буквы, и наоборот — чем крупнее шрифт, тем относительно теснее должен быть набор (рис. 37). Интервалы «по умолчанию» в большинстве шрифтов рассчитаны на кегль 10
Где он стоял опершись на статую. С лицом перепол Где он стоял опершись на статую. С лицом
Где он стоял опершись на стат
Где он стоял
Где он стоял опершись на статую. С лицом
Где он стоял опершись на статую
Где он стоял
Рис. 37
Автоматическая регулировка межбуквенных, расстояний в зависимости от кегля: текст без трекинга (вверху) и с трекингом (внизу)
142
Где он стоял
Где он стоял
Рис. 38
Ручная регулировка межбуквенных расстояний — кернинг
пунктов (приблизительно такой, как у основного текста в этой книге). Регулировка плотности набора, называемая трекингом (tracking), в некоторых программах делается автоматически, но в других ее приходится осуществлять вручную.
Трекинг сдвигает или раздвигает все буквы на одну и ту же величину, исправляя тем самым кажущееся изменение плотности при изменении кегля. Но многие пары букв при этом по-прежнему оказываются стоящими слишком тесно или слишком свободно — например, даже если сдвинуть буквы «Г» и «А» вплотную, визуально между ними будет «дырка», обусловленная формой этих букв. Такие «дырки» и «слипания» букв, особенно заметные в крупном кегле, дизайнер должен исправлять вручную.
Регулировка эта называется кернингом (kerning). Во многих шрифтах содержатся данные для автоматического кернинга определенных пар букв (обычно только латинского алфавита), однако далеко не все программы пользуются этой информацией и далеко не всегда результаты автоматического кернинга хорошо смотрятся во всех размерах. Возьмите себе за правило не оставлять ни одной надписи с достаточно крупным шрифтом без ручной регулировки расстояния между символами (рис. 38).
Трекинг и кернинг изменяют межбуквенные интервалы незначительно, чисто косметически. Однако ничто не мешает вам раздвинуть буквы в строке на любое расстояние (лишь бы текст при этом оставался читабельным текстом, а не превращался в набор отдельных букв). Разрядка, так же как и курсив и почти любое нестандартное написание, заставляет текст звучать подчеркнуто, медленно и даже торжественно (вспомните речь ангелов в «Москве—Петушках» Венички Ерофеева). Хотя английской типографской традиции выделение разрядкой несвойственно, в англоязычных заголовках оно дает сходный эффект.
Особенно сильное впечатление увеличение межбуквенных интервалов производит в сочетании со стилем «все строчные». При использовании только заглавных букв, наоборот, растянутый заголовок выглядит привычнее и строже. (Смесь регистров с разрядкой лучше не употреблять.) Если же из композиции очевидно, что разрядка была введена только для того, чтобы уравнять длину строки с длиной какого-то другого элемента, необычность звучания почти исчезает,
143
заглушенная удовлетворением от аккуратной подгонки и координации частей (рис. 39).
Иногда в заголовках применяются и отрицательные межбуквенные интервалы, т. е. наложение букв друг на друга. При этом буквы надписи могут окрашиваться в разный цвет (пример 13), бросать друг на друга тени или просто «срастаться» в единое целое (см. пример на рис. 39); особенно удобны для этого жирные рубленые шрифты, тесному контакту которых не мешают засечки.
Если абзац содержит больше трех строк текста, можно попробовать растянуть его по вертикали, увеличив интервалы между строками (интерлиньяж). Это нередко делается с теми же целями, что и горизонтальная разрядка, — для выравнивания текстового блока по высоте с другим элементом или просто для того, чтобы заполнить коротким текстом побольше места. Хотя и в меньшей степени, чем горизонтальная разрядка, этот прием выделения также придает тексту характерно свободное, неспешное, убедительное звучание. Особенно хорошо растянутый интерлиньяж смотрится с теми шрифтами, у которых высота заглавных
сильно превосходит высоту строчных.
В заголовках иногда применяется и противоположный прием — нулевой интерлиньяж, при котором строки текста Вплотную прилегают друг к другу, а выступающие элементы букв даже заезжают на соседнюю строку. Чтобы прием этот не смотрелся ошибкой или неаккуратностью, а придавал заголовку динамичность и выразительность, обостряя смысловые отношения внутри текста, нужно выполнить довольно много условий, самое главное из которых — достаточный контраст между сталкиваемыми строками по шрифту, кеглю или цвету (а лучше всего — сразу по нескольким параметрам). Скажем, если сделать верхнюю строку крупным шрифтом более светлого цвета, наложение на нее выступающих элементов букв нижней, набранной меньшим кеглем и более темной по цвету строки будет восприниматься естественно, не будет раздражать взгляд или мешать чтению.
Кроме того, учтите, что при нулевом интерлиньяже линия стыка строк становится весьма сильной осью композиции, требующей координации (чаще всего выравнивания по высоте) с другими элементами и не терпящей в непосредственной близости от себя других активных горизонталей (так что прием этот лучше не применять к блокам из
144
трех и больше строк). И наконец, «сплющенный» заголовок будет смотреться выразительно только тогда, когда его теснота подчеркнута достаточно большим количеством пустого пространства вокруг него.
Вспомнив принципы размещения материала на плоскости, о которых мы говорили на стр. 86, вы без труда сообразите, что два последних приема — увеличенный против обычного или нулевой интерлиньяж — суть частные случаи двумерного размещения букв с явным предпочтением одного из направлений.