Author: Голомбински К.   Хаген Р.  

Tags: связь компьютеров   сети эвм   вычислительные сети   оргсвязь   информатика   информационные технологии   дизайн   компьютерные технологии   веб дизайн  

ISBN: 978-5-496-00142-7

Year: 2013

Similar

Корпоративный веб сайт на 100%

Компьютерные сети. Принципы, технологии, протоколы

Разработка с ИИ: как эффективно использовать ChatGPT и Copilot

Вскрытие покажет! Практический анализ вредоносного ПО

Text 
                    
ББК

32.988-02-018

УДК

004.7
Голомбински К" Хаген Р.

Гбl

Добавь воздуха! Основы визуального дизайна для графики, веб
и мультимедиа.

-

СПб.: Питер,

с.: ил.

2013. - 272

ISBN 978-5-496-00142-7
Если вы начинаете разрабатывать дизайн буклета или делаете собствен­
ный веб-сайт, не имея серьезного художественного образования и опыта,
эта книга будет незаменимой для вас. Написанная легким языком и из­
бавленная от сложных профессиональных терминов и теоретических
концепций, она представляет собой понятное практическое пособие по
графическому и веб-дизайну и верстке, достаточное для освоения необхо­

димых принципов и методов работы дизайнера в любом из форматов: от
печатной продукции до веб.

ISBN 978-0240812816 англ.
ISBN 978-5-496-00142-7
© 201 О Elsevier !пс.
©Перевод на русский язык ООО !!цате;~ьство «Питер»,

© Издание

2013

на русско~~ языке, офор~ыен11е ООО Издательство «Питер»,

Права на 11здан11е поа)·чены по согаашен11ю с

Focal Press.

2013

Все права защищены. Никакая часть

данной книг11 не ~южет быть воспро11зве;~ена в какой бы то ни было форме без письменного
разрешения владельцев авторских прав.

Информация, содержащаяся в данной книге, полr~ена из источников, рассматриваемых
издательством как надежные. Тем не менее, имея в виду возможные человеческие или тех­

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

Заведующий редакцией А. Кривцов
Руководитель проекта А. Юрченко
Ведущий редактор Ю. Сергuенко
Перевод Н. Римицан

Литературный редактор Л. Родионова
Художественный редактор Л. Адуевская
Корректор Л. Казарина
Верстка Е. Волошина

ООО «Питер Пресс»,

192102, Санкт-Петербург,
3, литер А, пом. 7Н.
Налоговая льгота - общероссийский
классификатор продукции ОК 005-93, том 2;
95 3005 - литература учебная.
печать 07.12.12. Формат 84х108/16. Усл. n. л. 28,560.
Тираж 2000. Заказ 7391/12.

ул. Андреевская (д. Волкова), д.

Подписано в

Отпечатано в соответствии с предоставленными материалами

в ООО «ИПК Парето-Принт», г. Тверь,

www.pareto-print.ru


i
содержан ие
Добавь воздуха! Основы визуального дизайна

для гр афики , в еб и мультимедиа

благодарности

13

предисловие

15

глава

1

что такое дизайн?

19

чтобы объекть1 и шрифты заиграли
•

форма следует из функции

•

стиль и эпоха

•

передача сообщения

•

демократизация

•

нужен план

•

взаимодействие

•

знайте правила. нарушайте их

•

попробуйте это

глава

2

выключите компьютер

27

сбор информации и мозговой штурм
•

сбор информации

•

мозговой штурм

•

наброски

•

попробуйте это

5


глава

3

сверстать за сегодня

39

макет на все случаи жизни

•

структура макета на все случаи жизни

•

шаг №1. поля

•

шаг №2. колонки

•

шаг №З. визуальный объект

•

шаг №4. подрисуночная подпись

•

шаг №5. заголовок

•

шаг №6. текст

•

шаг №7. теги

•

попробуйте это

глава

4

грехи верстки

13 ошибок дилетанта
•

грех

•

грех №2. деформированные фото

•

грех №З. открытые фото

•

грех №4. громоздкие границы и рамки

•

грех №5. зажатые поля

•

грех N<lб. центрирование всего и вся

•

грех Хо/. объекты во всех четырех углах

•

грех

No 1.

XoS.

все, что мигает. без перерыва

заблокированное

отрицательное пространство

•
•

грех Хо

9.

перегруженный фон

грех хо 1О. издевательства над шрифтом: выворотка,
обводка, набор капсом и подчеркивание

6

•

грех № 11. неудачные буллиты

•

грех №12. висячие сроки

•

грех №13. коридоры

•

попробуйте это

49


глава

5

мини-арт-школа

61

элементы и принципы дизайна
•

элемент № 1. пространство

•

элемент №2. линия

•

элемент №3. форма

•

элемент №4. размер

•

элемент №5. шаблон

•

элемент №6. текстура

•

элемент №7. светотень

•

принцип №

1.

фокусная точка

•

принцип №

2.

контраст

•

принцип №

3.

баланс

•

принцип №

4.

движение

•

принцип №

5.

ритм

•

принцип №

6.

перспектива

•

принцип №

7.

единство

•

попробуйте это

глава

6

что такое сетка?

75

когда она необходима?
•

терминология

•

создание сетки

•

другие подходы

•

ломая сетку

•

попробуйте это

глава

7

верстка

87

расположить максимально эффективно
•

где что разместить

•

куда деть остальное

•

порядок и организация

7


•

много тем на странице

•

многостраничные макеты

•

выход здесь

•

попробуйте это

глава

8

шрифт

103

то, чего не знаешь, может навредить
•

шрифт, гарнитура, глиф

•

категории шрифтов

•

выбор и использование

•

стилевая разметка

•

большие объемы текста

•

газетная верстка

•

шрифт: не чтением единым

•

приятноедополнение

•

попробуйте это

специальный раздел: что нужно знать о дизайне логотипов

глава

9

главное о цвете

129

выбор и использование цвета
•

сила цвета: воздействие, организация и эмоции

•

культура

•

история

•

природа

•

теория цвета

•

цветоделение

•

формат СМУК

•

формат

•

советы по работе с цветом

•

цвет решает

•

попробуйте это

RGB

'-,

8


глава

10
u

визуальныи акцент

149

фотографии и иллюстрации
•

сюжет изображения

•

разрешение, формат, размер

•

несколько фотографий

•

этика редактирования

•

разнообразие

•

где брать фотографии

•

где не надо брать фотографии

•

альтернатива фотографиям

•

попробуйте это

глава

11

об инфографике

171

максимум данных в одной схеме
•

краткая история ифографики

•

инфографика нужна, если ...

•

мультимедийная инфографика

•

графическая упаковка

•

этика

•

дизайн инфографики

•

попробуйте это

глава

XXI

века

12

раскадровка. основы

185

визуальный сторителлинг
•

приступая к работе

•

фрейминг кадра

•

перспектива

•

точка обзора камеры

•

угол наклона камеры

9


•

движение

•

непрерывность

•

переходы

•

освещение

•

шрифт

•

звукоряд

•

после раскадровки

•

попробуйте это

глава

13

мультимедиакомпоненты

иногда больше

-

значит больше

•

работа с изображениями

•

видеоролики

•

аудио

•

анмация

•

интерактив

•

попробуйте это

глава

14

веб-дизайн
звезды небольшого экрана

10

201

•

как устроен интернет

•

к чему готовиться

•

веб-дизайн

•

подготовка графики

•

проектирование

•

и еще кое-что о верстке сайтов

•

что, если не сайт

•

мультимедийные сайты

•

держите руку на пульсе

•

попробуйте это

213


глава

15

в печать!

237

обзор типов бумаги и печати
•

выбор бумаги

•

способы печати и оборудование

•

составьте смету

•

подготовка документа к печати

•

что предоставить типографии

•

что дальше

•

что еще может типография

•

попробуйте это

глава

16

заключение

259

теперь вы вооружены и очень опасны,

спасибо что заглянули
•

все меняется

•

ничто не ново под луной

•

иногда требуется помощь профессионала

•

слова напутствия

словарь

263

Для получения дополнительной информации посетите наш сайт:

http://www.whitespacedesignbook.com.
Зарегистрируйтесь, используя пароль

space816.

11


Нашим студентам Школы массовых коммуникаций,
Университет Южной Флориды


благодарности
Благодарим наших талантливых мужей Гая и Грэга, которые поддер­
живали нас во всем; сыновей Бена и Карла, наших котиков Финна,
Кайли, Сальсу и Уайти, а также пса Дюка. Их вклад помимо психо­
логической поддержки просматривается между строк всей книги.

Наша особая благодарность Клиффу Келлеру
фотографа, Кэрри Маттеоли

-

-

за его мастерство

за ее художественные способности

и нашей большой приятельнице Кристин Арнольд Райли

-

за пре­

восходные советы и выразительные фотографии. Отдельное спасибо
нашей лучшей подруге Элизабет Белл за ее внимательность.
Мы также благодарны студентам Университета Южной Флориды за
их значимый вклад, в особенности Саре Уилсон, Сьюзан Шнайдер,
Меган Роуз, Хантеру Тейлору и Майклу Хардкастлу.
Еще мы выражаем признательность нашим великодушным рецен зентам:

Дженнифер Джордж-Палинонис, Университет Балл Стейт;
Стюарту Бабингтону, Колледж Спринг-Хилл;
Скотту Фарранду, Университет Южной Каролины;
Крису Балсано, Доминиканский университет;

Ане Гарнер, Университет Маркетта.

И наконец, мы благодарим издательство

Focal Press за возможность

сделать полноцветную, но недорогую книгу.

13


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

НАША ГЛАВНАЯ ИДЕЯ
Скромная маленькая книга не может стать всем для каждого. Но мы

скомбинировали в ней несколько тем, которые обычно рассматри­
ваются по отдельности.

1.

Новости, PR, реклама и маркетинговые коммуникации.
Профессии, связанные с коммуникациями, мы рассматриваем

в едином блоке, поскольку они также пересекаются и в реальной

жизни. Сегодня все в этой сфере, даже писатели, должны учиты­
вать визуальное восприятие, а основы здесь одинаковы для всех

начинающих. Но там, где различия между журналистикой и ис­

кусством стратегических коммуникаций свято соблюдаются, мы
отдаем им должное.

2.

Электронные и печатные издания
Мы не разделяем дизайн традиционных и электронных изда­
ний, поскольку и первые и вторые пока не прощаются с жизнью.

В сфере коммуникаций нужно одинаково хорошо разбираться
в дизайне и тех и других, поэтому предлагаем рассмотреть визу­

альные техники разных форматов и на разных платформах.

3.

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

вила (верстка), но если воспринимать правила только как функ­
циональную передачу информации (визуальная коммуникация)
и не развивать дизайнерское видение, то правила останутся за­

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

15


ТЕМЫ
В книге разбираются три основные темы, к которым в разных главах
мы возвращаемся, чтобы подкрепить теорию и практику.

1.

Эффективный графический дизайн выполняет четыре вещи:
привлекает

внимание,

контролирует

движения

глаз,

передает

информацию и вызывает эмоции.

2.

Любой дизайн покоится на трех китах: визуальных объектах,
шрифте и негативном пространстве.

3.

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

ТОН И СТИЛЬ ИЗЛОЖЕНИЯ
«Добавь воздуха>> намеренно написана в разговорном, непринужден­
ном стиле. Мы прибегли к неформальному тону, чтобы избежать схо­
жести с обычными учебниками. Люди в массе своей считают чтение
учебников занудным занятием, и наши студенты от него избавлены.
Мы захотели, чтобы «Добавь воздуха» читалась быстро и легко, по­

этому подаем информацию в доходчивой форме, рассчитанной на
неподготовленного читателя, и не опускаемся до снисходительного

тона. Книга написана с юмором, чтобы вы не относились к ее содер­
жанию и к нам слишком серьезно.

Учитывая прикладной характер книги, мы используем иллюстрации

в стилистике агентства

Associated Press, кроме тех примеров, которые

имеют особую творческую лицензию.

КРАТКОЕ СОДЕРЖАНИЕ ГЛАВ
Хотя каждая последующая глава логически вытекает из предыдущей

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

Главы с 1-й по 4-ю

-

это некоторым образом книга внутри книги.

Дочитав четвертую главу, читатель может выйти из игры с солидным

запасом новых знаний и навыков.

•

Глава

1 дает начинающим

дизайн?»

16

ответ на извечный вопрос «Что такое


•

Глава

2 напоминает свежеиспеченным дизайнерам, что на пред­

шествующем непосредственному проектированию этапе нужно

выключить компьютер (для сбора информации и мозгового
штурма).

•

Глава

3 посвящена макету на

все случаи жизни, в ней мы рас­

сматриваем самую универсальную форму макета и одновре­

менно формулируем основные правила работы с визуальными
объектами, шрифтом и негативным пространством.

•

Глава

4

предостерегает от самых распространенных грехов

верстки, связанных с визуальными объектами, шрифтом и ком­
позицией, и содержит перечень из

13 ошибок,

которые совер­

шают дилетанты.

После 4-й главы у читателей уже достаточно базовых знаний
и умений, чтобы приступить к выполнению заказов, как учебных,
так и рабочих. В главах с 5-й по 7-ю приводятся некоторые осно­
вополагающие детали:

•В главе

5 читатели

посещают художественную мини-школу,

где осваивают элементы и принципы дизайна, тренирующие
верный глаз.

•

В главе

6 речь

идет о сетке как о каркасе, который организует

визуальную коммуникацию в комплексных и многооконных/

многостраничных интерфейсах.

•

В главе

7 читатели учатся

заполнять пустое пространство ма­

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

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

•

В главе

8 от правил подбора шрифта для форматов и проектов,

в основе которых лежит текст, мы переходим к творческому

использованию шрифта.

•

В главе

9

обыгрываем использование цвета, подыскиваем ис­

точники вдохновения и рассматриваем цвет как культуру, науку
и технологию.

•

Глава 1О обстоятельно повествует о технике, технологии и этике
дизайна с фотографиями и иллюстрациями.

17


Остальные главы касаются высшего пилотажа дизайнерской ра­

боты:

•

В главе

11

коротко рассказывается об инфографике, то есть

о максимуме информации в минимуме пространства.

•

В главе

12

описываются основные понятия раскадровки: пла­

нирование визуального сторителлинга для видео, кино и ани­
мации.

•В главе

13

мы переходим к проектированию визуальной ком­

муникации как к комплексу мультимедиа-компонентов: слайд­
шоу, видео- и аудиоклипов, анимации и интерактивных эле­
ментов.

•Глава

14

обращается к вопросам визуальной коммуникации

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

•

Глава

15

рассматривает все производственные типографские

детали, от бумаги, фальцовки и переплетного дела до работы
с печатными машинами.

•Глава

16 -

завершающая, в которой мы произносим несколько

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

«Попробуйте это». В конце книги приведен небольшой полезный
словарь терминов.

Также мы приглашаем читателей посетить сайт книги:

www.whitespacedesignbook.com.
Практические руководства по дизайну и верстке, как правило,

похожи одно на другое. Книга «Добавь воздуха!>> была задумана

как всестороннее полное руководство, описывающее работу как
с традиционными, так и с новыми форматами медиа

-

один крат­

кий и практический источник информации обо всех платформах
и для всех специализаций.

18


что такое дизайн?
чтобы объекты и шрифты заиграли


в

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

до сигналов светофора. Вы об этом даже не задумываетесь,

пока не наткнетесь на месседж, который будет непонятен вам.
Визуальная культура

-

это язык, и, как у любого языка, у нее есть

правила, благодаря которым коммуникация становится возможной.
Тут дела обстоят так же, как с грамматикой: возможно, вы не можете

точно сформулировать правила, но сразу же насторожитесь, если
кто-то их нарушит.

Правила дизайна

-

в некотором роде грамматика визуальной

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

на котором раньше только читали. Воспринимайте эту книгу как

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

-

Заниматься такой грамматикой

-

дело довольно увлекательное,

это язык, и, как у любого

и мы надеемся, что пробудим у вас аппетит к получению дальней­

языка, у нее есть правила,

ших знаний о визуальной культуре и дизайне.

благодаря которым
коммуникация становится

ФОРМА СЛЕДУЕТ ИЗ ФУНКЦИИ

возможной.

Вверху: Некоторые
проекты

-

уже классика,

как Тадж-Махал.

Другие -

универсальны,

как международные знаки.

Внизу: Этот тип
коммуникации особенно
действен, поскольку

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

-

от модных вещей и мебели до архитектуры. Но не­

смотря на различия, все виды дизайна связаны между собой фор­
мулой (<форма следует из функции». Хороший проект есть результат
взаимодействия ((формы» как искусства и ((функции» как пользы.
((Форма» связана с материальным мастерством

-

с тем, как некая

вещь выглядит. Дизайн, родившийся благодаря промышленной

нарушение правила здесь

революции и массовому производству при капитализме (функция),

тоже является способом

вышел за эти тесные рамки и теперь вдохновляется изобрази­

передачи сообщения.

тельными и даже исполнительскими видами искусства (форма).
Большинство дизайнеров изучали искусство в том или ином

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

ся. Это и есть стиль.
В отличие от художника, дизайнер не может создавать искусство

ради искусства или полагаться исключительно на свой вкус. У него
всегда есть заказ, который надо выполнить, и этот заказ влияет на

форму проекта. Он вынужден быть практичным.
((Функция» в формуле ((форма следует из функции» соответствует

полезности дизайна, будь то эргономичная панель приборов в ва­

шей машине или же сайт производителя этого автомобиля.

20

Добавь воздуха!


СТИЛЬ И ЭПОХА
Помимо формы и функции дизайн связан с направлени­
ями стилей, саму визуальную культуру в значительной
степени дизайнеры и моделируют. И если глаз у вас

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

Например по множеству визуальных признаков

-

по

автомобилям, декорациям, костюмам актеров и оформ­
лению титров

-

можно определить приблизительный

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

разные функции, как правило, они обладают одинаковой формой,
будто их спроектировали одновременно.

Искривление времени.
И если глаз наметан,

можно связать любой стиль

На дизайн также влияет и развитие технологий. Холодильники

с историческим периодом,

50-60- х

который его породил.

годов, равно как и автомобили того же периода, щеголя­

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

принадлежат одной эре технологий и дизайна. Вспомните, как из­

менялся облик телевизоров, компьютеров и мобильных телефонов.
Не все дизайнерские работы выдерживают испытание временем.

Реклама

Minerva

Motoгcycle ( 191 О г.)
и винтажная этикетка для

овощных ящиков

( 1940 г.).

Некоторые выходят из моды, на них вешают ярлык «олдскул)),

Воспроизводится с разрешения

они становятся объектом для шуток. Другие считаются непод-

Dover

Глава

PuЬlications,

1.

lnc.

Что такое дизайн!

21


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

CJiVL ~

г~ 'v.~

--~=

свои проекты до мельчайших деталей

на бумаге .

1

D~ и ·и

1

_1

Наброски помогают определиться

с фокусной точкой , привлекающей
и удерживающей внимание ,

и оптимальным образом расположить

все прочие элементы. Удобочитаемость ,

~

полезность и внешняя привлекательность
играют решающую роль.

Плохо спланированный , плохо

---.i

скомпонованный макет неспособен

передать сообщение и стоит дизайнеру
и фирме времени и денег.

Справа: Наброски обложки , клапанов

.А::::-

и разворота буклета.

- '
-==-

Внизу: Готовый разворот буклета.

l.<'arlf'1'

i11

St~coщlar)

(,o(·al
E(l11cntio11 ...

Ас

Acc:L11mcd Ь)· Samou Мч;шnе •а
fnu!ht f"ofмlkst РтМ.е School" and

ТМтс- " 1 reuon 1tu1 w~h а high pnrtnugr о(
Cudsml Mooncy м:n.Jшus i1П' succl:'Мful htyiond tup
a.nd olim кh1C'V!' prom1ncna 1n dscir ~
f~ldi of mdavor. Texhn, 1mpan: ;and 5CUCkrm мnрс
К.t0.- 1n l1k .и ~о м ~1ia. Vk Ьd DW кudcna
tot«the!r~~ml

;andolfn- rhctnthemeamto

rrxhtL

Wmud fxulty who '«kt !О uua.ll
1umgch о( ch~r and bl"tlong n}~
Меж dw1 lul.f о( our (JC\llry hold
Юv&tКrd dq:~ i.nd i1I ~ dcYottd ro u-adung. А
~ uxhcr кu&m1 rюо nJA1m1 .ndn-кiu.11 .a&u-naon
;and qшhiy c'-oom ь-. Scudnмl ~ dw dott'
rd.aaoNhapt thq- iw'd:I ..,...ь, dwu tc;кhn. х dla
IПlporw1C
dwirltwa..

in 1hnr мudrrn..

awnlve.tin

"""'""'
"~"
W11b

~.10

confidrrкt',

°'*'"

r~n·11tal 111\nl\t-'lllf'llf

..
,........_Th
__-"""'
"_o(
~ь~ .-1prk.-"'din~IDll

c.dioal

<Jlll"llUllfduЬtand~~liamlllod:

-

~ • PJO\Tn io Ьt

Jn&nhrr.

.",~ llJFdwт ~odwn.~

-~-ьlmoatdilwipaf JD - -

~Ol)mpц:t

\n:Club

l>r:tm.aOub
Frc-nд1Club

1rкстш аuь
КtyOub
LtttnrV ~1Jpnnc

.шonalHonor~

Coug;irTrxb N~ipcт

r""'"' fot 11К' с.nш.

l\op C.lub

R....-LШ
RоЬос:юОuЬ

SAl)I>

SpinkhCtub
Scu<kni<.ioYnnaкm

Добавь воздуха!

txиption1lly

'""""""

CЬatOub

22

~·ar11lt~
at tht mft of uxtuna. C...rd1n.tl Моо~ tw

Мжm

an

'°"'

jourflJJ Dook ofl.IIO u а "Тор 25 l~IWU: School",
c.иdirwil Moanry H1gh School C!'IJO)"J а п-putaoon

м:hool

Cantuul

М0011су~е
~1 щad.rnu

~l«kd Ьу thtTa~ ~ nщ.,_

u 1 k~ 1n Ь:~! ~Jму eduaьon Ь.Сd on
1tron1 iadnnic md moDI kIOmhip. Jn ~oon"'
our ounancЬng x.adnnк::t. our ttudmn 1no aughc
m1pon:am l1k k-мom- to ~ 1Ьоu1 оrк ~.со
rrкh ош "Jd 10 gl\'I: Ntk

1

Моооq- pirmь

~
(жшt ID

houn

~У"#

pr

appmx111Шely

12.000

ro our кhoolStmnc p.vmul

•

ртщv.~ coшriЬuts"I

tWdtna' .tadnnк xh)t'Ytl'flmt kvd.


властными времени или классическими, среди них Парфенон или
Тадж-Махал. Какие-то становятся универсальными, как например
международные знаки. В основе некоторых дизайнерских работ

-

более ранние стили, только видоизмененные. Типографский шрифт

Cooper Black

штурмом взял рекламный рынок США в 20-е годы,

впал в немилость и затем снова стал актуальным в 70-е.

ПЕРЕДАЧА СООБЩЕНИЯ
Хотя формы графического дизайна видоизменяются вместе с ви зуальной культурой и технологиями, его специфическая функция
остается стабильной

-

это передача информации визуальными

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

альной культуре и мы оцениваем и нас оценивают исключительно

Шрифт

Cooper Black.

В 70-е годы такой же
уродливый , каким был
в 20-е.

по внешнему виду. Неписаные правила визуальной коммуникации
могут пригодиться каждому. Это называется медиаграмотностью.

ДЕМОКРАТИЗАЦИЯ
Когда-то давным-давно графическим дизайном занимались только
специально обученные люди. Они тратили годы на постижение ис­
кусства визуальной коммуникации (и до сих пор, кстати, тратят).
Но сегодня доступ к программам создания визуальной коммуни­
кации имеют все, у кого есть компьютер.

Мало кто знает, как правильно распоряжаться оказавшимися в тво­
ем распоряжении технологиями. В результате визуальная культура

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

-

плохую

коммуникацию. Потратив время на изучение основ дизайна, вы

значительно улучшите свои визуальные сообщения, будь то ваше

Верхнее изображение
воспроизводится с разрешения

Dover

PuЬlications,

lnc.

резюме, мультимедийный сайт или слайды для презентации.

НУЖЕН ПЛАН
Графический дизайн основан на организации визуальных объектов
в пространстве. В общем, это пространство представляет собой

двух.мерную плоскость, то есть плоскую поверхность (бумага или
экран монитора). Ключевые слова здесь: «плаю> и «организацию>
с целью «коммуникацию>. Когда вы пишете речь или статью, то
сперва составляете план, располагаете свои мысли в логическом

и эффективном порядке. И в графическом дизайне вы располага­
ете все элементы от материала (текста) до визуальных объектов
(иллюстраций) в логическом и эффективном порядке.
Глава 1. Что такое дизайн?

23


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

ХОРОШИЙ
ГРАФИЧЕСКИЙ
ДИЗАЙН :

Итак, графический дизайн должен реализовать ваш план: отвлечь

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

ности

-

от одной детали к другой (на странице или на экране).

В результате зритель считывает информацию. Продумывайте

Привлекает внимание .

дизайн так, чтобы он притягивал внимание, направлял взгляд по
макету, был интересным и экспрессивным.

движени е глаз на

ВЗАИМОДЕЙСТВИЕ

страни ц е или э кран е.

Теперь вам нужны структурные элементы, чтобы привлечь вни­

Контролирует

мание и контролировать его, чтобы передать информацию и вы­

звать эмоции. Проще говоря, в эффективном дизайне и верстке

изображения и слова сообщают информацию в комплексе, и не
так важно, какое именно визуальное средство использовалось.

Передает информацию.

У вас есть только три структурных элемента: визуальные объекты,
шрифтовое оформление и пространство.
Визуальные объекты

-

знаки, символы, иконки, рисунки, иллю­

страции, фотографии, фото, видео и т. д.

Вь1зывает эмоции .

-

не нуждаются в развер­

нутых объяснениях. Что касается шрифта. Графически текст пред­

ставлен в виде шрифта, визуальной формы языка. Для шрифтового
оформления есть правила, которые вам еще предстоит узнать. Но

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

создавать и с помощью шрифтов. К тому же некоторые объекты,
например логотипы и инфографика, немыслимы без текста.

Новички часто совершают ошибку, игнорируя пространство. Будет
слишком много пространства

-

и визуальные объекты и шрифты

потеряются или не вступят во взаимодействие. Недостаточно про­

странства

-

они начнут конфликтовать.

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

который необходимо заполнить. Оно реально, даже когда мы на­
зываем его « пустотой », « воздухом » или, что корректнее, «отрица­

тельным пространством » (поскольку не все пустое пространство
белое). В графическом дизайне отрицательное пространство всегда

весомо и структурировано. Есть даже поговорка: «белое про стран ство

-

это хорошее пространство» . И хотя дилетанты стремятся

поплотнее забить его картинками и шрифтами, важно помнить:

24

Добавь воздуха!


белое пространство

-

вам не враг, не

нужно с ним бороться.
Исследуйте компоновку визуальных

объектов и шрифтов в пространстве.
Поразмыслите над тем, что вы видите.

ЗНАЙТЕ ПРАВИЛА.
НАРУШАЙТЕ ИХ
Наши студенты любят находить ис­
ключения из правил, которые мы им

преподаем. Что не может не радовать,
ведь это означает, что они учатся ви­

деть дизайн. Часто такие исключе­

ния из правил представляют собой
хорошие примеры плохого дизайна, но
иногда

-

хорошие примеры хороше­

го. В таком случае мы объясняем, как

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

себе настоящие профессионалы, и пе­
ременчивые дизайнерские тенденции.

Опытные дизайнеры знают, что де-

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

использовать правила и одновременно выходить за их рамки без

Правила? Какие такие
правила? Этот постер
нарушает немалое

ущерба для визуальной коммуникации. В этой книге описываются

количество правил

основополагающие правила. Однако освоив азы, вы тоже сможете

типографики. Но он

найти пути для вольной интерпретации правил. По крайней мере

работает, поскольку

мы на это надеемся.

вызывает сильное, сложное,
в чем-то грязное чувство,

Вольное обращение с правилами может породить нечто новое, ин­

естественное для каждого,

новационное, может изменить тенденции в этой сфере. Ведь дизайн,

кто наблюдает за жестким

как визуальная культура и язык, не статичен, он живой, поэтому

соперничеством женщин

заниматься им так интересно. Времена меняются. Меняются стили.

на роликах.

И правила переписываются под новую реальность.
В качестве основы взята

Важный момент: не нарушайте правила дизайна по неведению.

фотография Чарли Шу.

Изучите их. А потом уже нарушайте, если это имеет смысл. Срабо­
тало

-

ну и прекрасно. Просто напоминайте себе время от времени,

что у вас есть задача. Она называется «визуальная коммуникация».

Гnава 1. Что такое дизайн/

25


• • 8 ПОПРОБУЙТЕ ЭТО
1.

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

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

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

Форма и функция.

формой предмета и его функцией. Влияет ли функция предмета

Несмотря на различия,

на его форму, ограничивает ли возможность выбора форм?

все дизайнерские

Способствует ли форма предмета реализации его функции?

проекты связаны между

собой формулой: «форма
следует из функции».
Хороший дизайн есть
результат взаимодействия

«формы» как искусства
и «функции» как пользы.
Возьмите для примера

2.

Выберите предмет, который уже вышел из моды. Откуда вам
известно, что он уже неактуален? Какие признаки указывают на

временной период, в который он был создан? Объясните, в чем
его старомодность. В форме? В функции? В том и в друтом?

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

одну из ваших любимых

вещей. Каков был

Почему этот пример привлек ваше внимание. На какую часть

замысел дизайнераr

дизайна вы посмотрели прежде всего? Что притянуло ваш взгляд

Какие признаки относятся

в первую очередь?

к форме, а какие

-

к функцииr

Как дизайн руководит перемещением взгляда по макету. В каком

порядке вы просматриваете визуальные объекты,
размещенные в пространстве? Составьте список

объектов в том порядке, в каком перемещал­
ся ваш взгляд.

Какие сообщения передает дизайн? Со­
ставьте список. Объясните, как дизайн

передает эту информацию.
Вызывает ли дизайн эмоции, и если

да, то какие? Каким образом? По­
чему?

26

Добавь воздуха!


t

вь1ключите компьютер

сбор информации и мозговой штурм

IOUT МAGNOLIA
GARDENS
МЕЕТ ТНЕ

STAFF

OUR FACIUТIES

ome to Magnolia Gardens ALF
~t

venduci dernam esequo volupta tiamet quis sed
s peritem qui Ыacearchil maximus maio. Edigendit
Jsti velignihil maxim ressusc iatiis eos autatem
·аtщ aditatem as voluptatisse solc•rae que noЬitis
arum a11ьusdam tacer1t utatet maximus ·
comrr olorro desequame diost, aditiam, ~
Seqш1e

Alюut

porro quos aria

noЬis

audis andi

Magnolia Gardens • Meet the staff • Our Facilities • ff"eqt

Magnolia Gardens ,t\ssisted L.iving Facility • 3800 62nd Av1
(727) 489-6440 • -w.magnoliagard.


д

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

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

подготовительную работу.

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

карандашом по бумаге. Поэтому мы вынуждены попросить
вас выключить компьютер.

СБОР ИНФОРМАЦИИ
Всегда начинайте со сбора информации. Если повезет, она
поступит непосредственно от человека, который дал вам за­

дание. Давайте будем называть этого человека, кем бы он ни

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

информацию о цели разработки и сроках выполнения. На
противоположном полюсе находится масштабная кампания,

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

нескольких проектов, связанных с решением обозримых задач.
Независимо от того, кто собирает информацию и каков объем

работы, вам нужны достоверные ответы на некоторые стан­
дартные вопросы:

1• Какова цель? Коммуникационные цели определяют все от формата до шрифта. Четкие цели важны, поскольку на
них ориентируются при оценке успешности дизайна. Итак,

Обращайтесь к своей

в чем конкретно состоит цель визуальной коммуникации?

аудитории. С точки
зрения визуальной

Какие чувства, мысли вы хотите пробудить у аудитории?

коммуникации важно, чтобы

Должна ли она узнать что-то новое? Вы намерены вы­

разговор велся на одном

звать убежденность или предпочтение? Или призываете

языке с аудиторией. Так,

к действиям или определенному поведению? Кстати, об

визуальный ряд канала

аудитории

МТV и эстетика первых
видеоигр

-

это часть

коллективной памяти

поколения Х.

2.

...

Что представляет собой аудитория? Кому адресован ди­
зайн? Преданным клиентам или случайным покупателям?
Влиятельным деловым людям или молодежи, помешанной

на новых технологиях? Знание целевой аудитории име­
ет решающее значение для визуальной коммуникации,

которая вызовет резонанс.

28

Добавь воздуха!

PR-

и рекламные агентства


уделяют особое внимание сбо­

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

общения. СМИ обращаются
к общественному мнению,
чтобы выявить недостатки.
С точки зрения визуальной

коммуникации важно, чтобы
разговор велся на одном язы­

Lихшу

Lii in9 at AjfordaЬle Price
1

Magnolia Gardens ALF is wholly owned Ьу Palm Lake Village
Housing Corporation. lt was built in 2003.
Wc offer luxurious and affordaЫc ALF apartmcnts. We are managcd
Ьу MIA Consul i
up, lnc. for more 1n
ion, visit the
following w
ite: www.m1a90n:su1ting.oom.

ке с аудиторией. Так, визуаль­
ный ряд канала

MTV

тика первых видеоигр

и эсте­

-

это

часть коллективной памяти

Eligibilll)· Rcquirements
То Ье eligiЫe

for occuparcy in Magnolia
Gardens ALF, applicants must mcet he
following minimum requirements:

поколения Х.

3.

Принимайте во внимание

Доступность. Людям,

и физические возможности аудитории. Если работа нацелена

страдающим цветовой

на поколение бэбибумеров, которому все чаще требуются очки,

слепотой, легче находить

как это отразится на вашем проекте? Дизайн должен быть уни­

гиперссылки на странице,

версальным. Задумайтесь, ведь, возможно, некоторые члены

если те подчеркнуты, а не

аудитории страдают цветовой слепотой. Нужно ли переводить

просто меняют цвет при

текст на другие языки? Понадобится ли версия со шрифтом

наведении курсора.

Брайля? Если вы разрабатываете веб-дизайн, что можно пред­

Воспроизводится

ложить посетителям с ослабленным зрением или слухом?

с разрешения

Следует ли согласовать ваш проект с другими дизайнами? Каж­

Magnolia

Gardens ALF.

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

Если предыдущие версии дизайна и визуальная идентичность

фирмы вам неизвестны, ознакомьтесь с ними. Изучите печатную
продукцию организации и визуальное решение ее сайтов.

Тем временем получите от заказчика оригинал логотипа в век­

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

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

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

на длительный период, ваш проект может быть частью серии
или кампании, которым соответствует определенный «лук»,

Глава

2. Сбор информации и мозговой штурм 29


в этом случае вы должны ориентироваться и на него. Так что

не бойтесь задавать вопросы.

4.

Кто конкурент, и о чем говорит его визуальная коммуникация?
Собирая информацию, необходимо учитывать и графический
дизайн конкурента. Вы не можете выстраивать визуальные

сообщения, если не знаете, как сделал это конкурент. Если в на­
стоящее время он помешан на зеленом, возможно, вам стоит

изменить планы и отказаться от этого тона. Если на домашней

Вернуть отправителю?

странице конкурента изображена маленькая девочка, выберите

Дизайн, который не

что-то другое для своей страницы. Если конкурент позициони­

достигнет адресата, не

рует себя как «надежную фирму)) ... Ну, вы поняли мысль.

передаст и сообщение.

Соблюдайте технические
требования при создании

5.

Как будет доставляться или распространяться готовая продук ция? Нет ничего более важного для определения физических

электронной и печатной

размеров проекта, чем формат, то

продукции.

есть средство передачи, посредник

в некотором роде. Это печатная
продукция или электронная? Если

печатная, то какая именно? Если
электронная, то какая именно?

Для создания ре­
NOPOSTAGE
NECESSARY
IF MAILED
JNТНЕ

UNIТED STAТES

кламы вам пона­

добятся точные
параметры, или

спецификация.
И это не всегда

BUSINESS REPLY МА1L
POsт.-.GE WILLдt: Р~Ю ВУ

ширина колонок

в

ADORES'):Ef

EAGLE DATA. INC.
дТТN, ТREASURE ISLAND PARТNERSHJPSURVEY
12495 34ТН ST. NORTH UN IТ А
SТ PEТERSBURG. FL33716-9841

миллиметрах

или

расчерчен­

ная

страница.

Графика, напри­
мер, измеряется

1•• 11".11.1 ••• 1••• 11.11 •• 1.1 •• 1••1•• 1•• 1".111 •• 1.1

и в пикселях.

Для веб-графики
вес файла столь же важен, как и размер в пикселях. Для видео­

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

макета, но и размер предмета, в котором эта продукция будет вы ставлена, например стойки для журналов.

Узнайте характеристики печатного оборудования. Большинство
принтеров рассчитаны на бумагу определенного формата, так что

ваш дизайн должен строго умещаться, например, на листе фор­
мата

30

Добавь воздуха!

Letter или Legal.

Самые распространенные модели лазерных


LDAIDR'S ПЕШЕSТ,

НDТТЕSТ

HluH-TECH IПDUSTA':J SECTDA:

и струйных принтеров подразумевают непечатаемую область по

Чтобь1 не превысить

краям страницы, так что даже если вы очень хотите запечатать

бюджет, минимизируйте

поля, это вам не удастся.

или исключите из дизайна

Письма порождают проблемы другого рода . Будет ли конверт?

в одну или две краски

Какого размера? Убедитесь, что лист, который вы оформили, в него

вместо четырех.

поместится. Или это открытка? В любом случае, учтите все требо­

Для онлайн-проекта

излишества. Напечатайте

вания почтовых служб. Наконец, купите коробку и сложите туда

задействуйте бесплатное

дорогие образцы печатного дизайна, поскольку пренебрежительное

программное обеспечение

к ним отношение сделает их бесполезными.

вместо платного.

6.

Каков бюджет? Не надо быть семи пядей во лбу, чтобы понять:
размер бюджета влияет на дизайн и зависит от того, сколько
часов вашей работы готовы оплатить босс или клиент. Бюджет
также определяет, какие визуальные объекты вы сможете ис­
пользовать, включая количество красок для печатного издания,

типы и набор виджетов, которые вы можете добавить на сайт,

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

-

первокласс­

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

эффектную вещь, используя только черную краску и газетную
Глава

1. Сбор информации и мозговой штурм 31


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

INSIDE:
8

eo..~r S1oryi Depamncnt of

Humry

rctti...es Nll:lonal

hun<.•r

8

Fi.C\.llty art show ~ rww:

8

USF Вot:inic Gardcn1 announces iь annual holid.ay
planifalr,Nove:mЬer

12-14

Будет дурным тоном представить кли­

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

с вырубкой, уложенный в стильный по­
лупрозрачный конверт, в который он

влюбится, но не сможет напечатать из-за
ограничений в материальных средствах.

Если вы не знаете, во сколько примерно

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

работаете с видео, то неплохо наладить
взаимосвязи с уже зарекомендовавшими

себя продюсерами, видеооператорами
и редакторами постпродакшна, которые

согласятся прикинуть смету. Или, если

вдруг повезет, разобраться во всем вам
поможет штатный главный технолог.

7. А как насчет сроков и рабочего цикла?
Срок
Вь1держивайте
дедпайны, вне зависимости
от того, завязаны ли они

на периодичности (как
газеты, журналы, бюллетени)

-

это дата, когда результат работы

достигает аудитории. Рабочий цикл

-

это время, за которое дизайнеры и сотрудники отделов производства

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

или на определенных

был установлен дедлайн, вам нужен календарный график, в котором

событиях или сезонности.

все даты будут скоординированы со всеми и с каждым.

Есть и другие временнь1е параметры. Например, проект может быть
связан с определенным сезоном или каким-то особым периодом.
Горячие новости должны достичь адресата немедленно, для просто

актуальных новостей это не так критично . Иногда сообщение может

не иметь привязки ко времени. Хотя бывает так , что само оно не
ограничено временнь1ми рамками, зато ограничен канал передачи.
Поэтому дизайнер должен знать «срок хранения)) и самого сообще­
ния, и средства его доставки.

8.

Кто предоставляет информационные материалы? Чтобы работа
над проектом спорилась, вам нужны логотипы, цветовые пали­

тры, фотографии и даже некоторое количество юридической
зауми. Босс или клиент перешлют вам эти материалы? Или вы

32

Добавь воздуха!


должны сами их собрать или создать с нуля? Если у организации

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

-

это хорошее решение.

Теперь о тексте. Кто его напишет?
Если вы не копирайтер и не жур­
налист, когда вы получите текст?

CREATIVE BRIEF

Каким будет объем? Дизайнеры
и копирайтеры часто не сходятся

~OIИSllJIS~~uЫ.m~por~occupotopt'JChlltrwndllЬlflCl~:IJIPI

dt-1.qut

во мнениях , и вы должны воспри­

нимать это как положительный

момент. В любом случае, цель уди зайнеров и копирайтеров одна.

~ lfll"1~i.cc.ьo~umm::hlц tempofТO~llCCU!Nrumqul!~~om­

~ srtlCW@ pra1tm ~•tatem ~ srt qwtum t'llCl\!'dolupu spistrum et odlpiduade' im tug..,.

i.cvipl vok..arn.QUIS ~ YOknerJ int IUm fкr.111 '<'OlupUI UttmQU .ЬUS.М a:insIO vt ut орьт s
e'll't'll n.vnQUUn:.t.cllS.111QU111'1'1 fк~ QUICOl'l~SI non pofpos dolucmu'nlSf't
'<'efltur~ ~nt м qw,m, QUidlJWrldrs mdщ:!I:,-:~ ~ llse"t YOlum QUilm'\P orument wtr t!5 f't
mn;f'nd ~WQU.i ~ Фо ~ res~ PfN od1 vo1upU1, а qwm valupuie Pt' nim doluptи ~~

wvsro си УОlщ!tи NC od most>И opt.15 кcvso. ~ latQUI conrt utlupt•M et еа dohJpWs tt\Jfes ~
QUlm te1S QUaS moяunt por .Jtus ~Щ tю\06к!um WS. ip$US ~ЬО, \Мnl ~ moiore М ~
omnetcn~l"l'IЬ:mll'lcttmQUat!mesnost~..,,~onvnolvptl1e-mнNПti.1etur'
т.,....Audlenu:
XlmUs,~tUSi IS(\OluptJ.!tethit.non~~IOl'l~m r'llh~minlut. sint IИCQnЖJISf"М\ltn 1Ю

9.

"dея, offictts d!Ut YOiof

Какие еще факторы необходимо

УО1о ~

учесть? Задавайте вопросы сразу,

W'llitU11

чтобы потом не болела голова.

На основе полученной информа­
ции составляется план проекта,

техническое задание . Рекламные
агентства называют этот документ

ws </)Wple rldudl•t ···еюрsм ~.ant es mi. noЬts ~11m е"1 votlOl'e ptOfit
iNgnat .ю.Jffljm .11runt doluptaS1mus vтш11s posquи nthillмn t'I0'5 ad QU1i e111qu.m УО1о Vlt et

fuq~ss1m1, cor~I dtlen11 orepere, u111!N<IOSt al~ offic.w cuscipsam rКt~ ~11:1NrIO dolupиtum
l«:iur .11rum idи.lm fugi.1 s@d бtem doluptur1Ximp:кs1m а11vtes1lla11unt dok.lptaqUt" nis .m щжеm

QuisW!"N:I~ ~ ~iquatQUl!YCIЬ"ЯК!IUf ~urnc~ 1Ud1t fug..WP1'1lllSIUSinConsed

qwm C!IUS QUO t~и dolut ~ nutp. l'IOМ«~ 1-um h.JrumYOluptatur mint pt'fferum •ssim ntii
QUli\lt volol"1oonsrquam~..цulqu.ate1fug~ ~uodf'St.t'XPii rwitio UtQi.lim 1psun11s
doluтr:m in cusd.w num.ciuis et et et volorum fug" sit. nist. soluptit'S м QU1 cpt~ ommos dolortЬus QUOdl re ~ dl doiupQ~ \1О1бt doluut.)(lui !'@ et dolo od !NoQntatl!S suritiЬus Ut eiur1 Quiicon
rt'll.m Y,\iS ~t. WllMI !'StOtl:SpМ QUim qursdl О1'1'1М1 UIIO\IS.OS nrs dotкu cumet et ~
l.rSi
id (IUllte VOlupQme:C\.lm IUs.Jprfl voicn offia Ьiмd1rwim,1Н1'11@'5 lspl!iК ~

"'°'""°"
""""'"

~~мs:

1 Utetfac1.urr,con~dlдcorumetetusмnet11Ьo

2

EQui~ateWТN!т.qritutvoluPfatr:m\IOloradmi.

З COJ aut Quid!m ntSt., smt QUld milit mnim .к.i olfloPISl

креативным брифом, дизайнерские

фирмы

-

дизайнерским брифом.

Как бы он ни назывался, мы крайне
рекомендуем такой план составить.

Благодаря этой наглядной схеме
цели визуальной коммуникации

Utet fld ium, con ~бdus. COf\lm et etuwn et L.Ьо. Narn fкcum id es INXllТ\PO rPOJ~ бdolor~
•muwm. ut ut remolum cons@Quo'Юiofe рю YOlorttarur1 Qul ьеаtе wne rNgl'l•t ut voluptatl!m YOlor ad
ml volu~ coremodictJs et eяrum 1psum ~ 11"1НТ1рес1 unюt1tur o)Ut dlOl'Unt
~l'olfdonlnv.

Ut quim ipsur1t1s OOkJtml lf'I cusdie num. QUI\ et et et llOlot\Jm fug" Slt., rиst. solupt.Jt<S "-11 QUI op!'@ et dolo od ml!Ontates
sun!•Ьus U1et1Jf'0u" con l'@!Umviwsldellandlt. wtl~t ~s.ped qu«nQIJISdlomnltJ ~еоsм
da/f<QcumetetelC.et'ltlieus.I ~adquuitevolupta~cumiuw~~ol'flcl blindillrwim.
tr:m rб ~ epudlcIOot so/upQt.

DtSSotqUie ommos dolonЬus quodi te~ ci doluixa~ ~ dolut•taQUI

G ocцЬcwupid ~ QU•S quvnt.

окажутся на виду, а процесс про­

ектирования будет идти без сбоев.

МОЗГОВОЙ ШТУРМ

Придерживайтесь
курса. Неважно, как

Итак, бриф у вас на руках. Теперь пришло время заняться мозговым
штурмом

-

продумать концепцию дизайна и возможности его

реализации . И даже не думайте пока включать компьютер.

-

креативный бриф или
как-то еще,

-

главное,

что он поможет вам не

Наш мозговой штурм проходит примерно так:

1.

называть план проекта

отклоняться от темы,

Разгрузка . Начните с разгрузки мозга . Соберите все , что мо­
жете, и выплесните на бумагу. Стройте диаграммы и рисуйте

стрелочки. Дорогу свободным ассоциациям! Побеждает самый

планомерно выполнять
задание и у ложиться
в отведенные сроки.

длинный список.

2.

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

и ваш мозг заняты повседневной размеренной работой. Такие
виды деятельности тоже вдохновляют. Поделайте упражнения
Глава

2. Сбор информации и мозговой штурм 33


FIУЖНД-:ХОРОШАЯ ИДЕЯ ... НУЖНА ХОРОШАЯ ИДЕЯ ...
Зацикливаться на идее придумать хорошую идею -

это ложный путь. Ничто так не сбивает

творческий настрой, как попытка выдавить из себя что-то гениальное .

Лучше выдавать много идей, так гораздо плодотворнее и веселее. Хороших, плохих,
средненьких . Не мешайте себе. Не критикуйте. Просто много-много идей. Вот это как раз
творческий процесс.

На самом деле состояние, когда вы предельно сконцентрированы и придумывается новые
решения, потеряв счет времени, называется «потоком». И где-то в том длинном списке , что вы
сгенерили, ждет своего часа отличная идея.

Техники мозгового штурма, стимулирующие творчество
Мозговой штурм как технику для генерирования креативных идей изобрел Алекс Осборн, один
из основателей легендарного рекламного агентства BBDO. Сегодня нам известно, что у каждого
человека есть креативный потенциал, который только и ждет, пока его реализуют.

Попробуйте эти приемы мозгового штурма:

1.

БЕГЛОЕ МЫШЛЕНИЕ

В конце 60-х -

начале 70-х гг. Фрэнк Уильямс

3.

КЬЮБИНГ

Техника, созданная гуру писательского

и Боб Эберле (оба преподаватели) задались

мастерства Элизабет Коуэн-Нилд, названа

целью пробудить творческие способности

так по шести сторонам куба и направлена

у школьников. Они описали «беглое

на нестандартное мышление.

мышление» как метод быстро сгенерировать
большое количество идей. Главное здесь
количество, качество значения не имеет.

Попробуйте:

Напишите двадцать способов выполнить ... (впи­

1. Опишите.
2.

Проанализируйте.

3. Сравните.

шите ваш проект).

4. Ассоциируйте .

2. SCAMPER

5. Примените.

Методика Боба Эберле:

6. Приведите доводы

SС -

substitute (замените)

«За» или «против».

comblпe (комбинируйте)

А- adapt (добавляйте)
М -

magпify/modify (модифицируйте)

8
о

Р-

put (примените для чего-то другого)

1..1..

1
Q)

Е-

eliminate (удалите части)

>
<;:::

"'

u

· о.

R-

rearrange/reverse (поменяйте местами,
переверните)

@
о

ь

е


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

3.

Трансформация. Теперь снова за работу. Изменяйте в нечто со­
вершенно иное. Доведите все или часть до абсурда. Дайте волю
своей противоречивой натуре. Соедините вместе несочетаемое

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

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

ры чего-либо. Пусть органы чувств работают на полную катушку
и воспринимают звуки, запахи и вкусы. Концепцией может быть

тема, метафора или аналогия . Иногда прийти к концепции помогает
мозговой штурм «впиши недостающие слова» . Например:

•

Эта компания (организация,

тема,

продукт,

услуга,

проект

тема,

продукт,

услуга,

проект

Эта компания (организация, тема,

продукт,

услуга,

проект

продукт,

услуга,

проект

и т. д.) так

•

и т. д.) так же

•

, как и

и т. д.) в больше степени

•

_ _ , чем

Эта компания (организация,

и т. д.) в меньшей степени

•

что могло бы
""
наити
отклик

у аудитории.
Или что дви­
жет ею. Напишите столько

идей, сколько
получится.

Потому что
совершенно

дурацкая идея

'что

Эта компания (организация,

Подумайте,

тема,

,чем

__ .

вдруг может
переродиться
в блестящую.

Эта компания (организация, тема, продукт, услуга, проект
и т. д.) похожа на

_ _ _ _

Подумайте, что могло бы найти отклик у аудитории. Или что дви­
жет ею. Напишите столько идей, сколько получится. Потому что

совершенно дурацкая идея вдруг может переродиться в блестящую.
Как только у вас появилась концепция, вы готовы приступить
к проектированию

-

по-прежнему не включая компьютер . Так что

не откладывайте пока в сторону карандаш и бумагу.

НАБРОСКИ
Лучший способ быстро изучить возможности дизайна

-

это де­

лать эскизы, небольшие наброски макета, которые можно быстро
нарисовать и". быстро отвергнуть.
Пусть слово « набросок» вас не пугает. Многие дизайнеры не

умеют рисовать. Наброски в действительности больше напоГлава

2. Сбор и н формации и мозгово й штур м 35


минают

каракули,

чем

рисунки. От вас только

требуется справиться с
прямоугольниками и ли­
ниями, показывающими,

как визуальные объекты и
LE i;Тo.S/~~д~
Coaat

• •mtмtShlp

Gotf Toumament

CONTENT AREA

Membership
t$М Яо11о8 Oi.-Cout. ~ . 8tl е"'

! •.r.•s

•

R

.... ollSМ. 11ru llound.cl 11"11183 И NАРМ Ronda C3lllf

•1'148'W'tnm""8unc»1'861'11CDnOt111CIМU.wt

,.,...111 ln8nci8tylf0tl0. ~

зволяют дизайнерам при­

and~lliJOl.W~Ul'll8tl)'fJC)pOtUl.МSllDOUtbletlfcм

~~tolr'lerN•""~~tuPol're:h8m~anctltl'lh8net"81f

Hewfatter

Daflt: Qa22.200til

кидывать множество идей

Vatpa81u..
Loeldon: St P.Oaflt: Nov ,8. 200t

макета и сопоставлять их,

прежде чем выбрать луч­

Sehol1rsh1p1

Lon"

."
...
._."

Contact Us
н

шую из них.

..........

еа ..."

.....

Если вы начинающий ди­

~ss

-...

ISM'

в пространстве. Простые
карандашные рисунки по­

СОМС.Ж Wt~OМt'lмrwogNT8l!l'Ol&.y81Мc:onWIUOU8lytarlhepe.:28..,._

ectvrt.

шрифты будут размещены

зайнер, то имеет смысл

взять для набросков бума-

lii

гу в клеточку, поскольку

важно, чтобы пропорции

наброска соответствовали
пропорциям будущего ма­

FOOTER

кета. Так, если макет дол­

жен быть размером
Вверху: Каркас сайта,
показывающий структурные

блоки страниц.
Воспроизводится

8,5

х

11 дюймов (тот самый фор­
Letter, 216 х 279 мм), то для набросков вы просто отсчитываете
8,5 клетки по горизонтали и 11 клеток по вертикали. Дизайнеры
мат

используют наброски для разработки как одностраничного, так
и многостраничного дизайна.

с разрешения Института
менеджмента по снабжению,

Раскадровка. Для проекта, который подразумевает исполь­

отделение Florida Gulf Coast.

зование анимации или видео, нужны раскадровки, то есть серия

набросков, отражающих изменения в фокусе с течением времени.
В общем, это похоже на комикс .

Наброски для веб-диэайна. При разработке веб-дизайна
наброски обычно представляют собой варианты главной страницы

и интерфейса. Поскольку веб-сайт

-

это нелинейная структура,

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

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

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

Макет полось.1. В мире периодики - газет, журналов и бюл­
летеней

-

набросок называется макетом полосы. Как и другие

виды наброска, его рисуют на бумаге в уменьшенном масштабе,

36

Добавь воздуха!


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

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

Черновики и эскизы. Следующий этап дизайнерского про­
цесса может протекать по-разному. Одни предпочитают доработать

лучшие наброски до черновиков, которые представляют собой

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

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

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

туральную величину, чтобы босс или клиент могли повертеть его
в руках и прикинуть, что к чему.

В веб-пространстве эквивалентом макета является бета-версия
сайта, пока недоступная пользователям. Босс или клиент тести­

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

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

прямоутольники на верхнем слое указывают, какие области шаблона
можно редактировать. Уникальные имена, заданные открытым для

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

Возвращаясь назад к универсальному проектированию, мы видим,

Набросок, эскиз,

что обычно дизайнерский процесс включает в себя набросок, черно­

финальный вариант.

вик и эскиз. Но появление компьютера изменило привычный ход

Обычно дизайнеры

вещей. Теперь у каждого дизайнера свой рабочий процесс. Неко­

последовательно

торые показывают боссу или клиенту предварительные наброски,

выполняют сначала

чтобы поскорее получить обратную связь. Другие переходят от

набросок, потом эскиз,

наброска к законченному эскизу, минуя этап черновика.

потом финальный вариант.

Каким бы ни был проект, редко удается избежать изменений эскиза

этап черновиков, который

Некоторые пропускают

в соответствии с пожеланиями босса или клиента. Так что приго­

находится между этапом

товьтесь вносить изменения в макет по несколько раз. Серьезно,

набросков и этапом

внесите этот пункт в ваш календарный график.

эскиза.

Вне зависимости от того, как дизайнеры попадают из пункта А
в пункт Б, никто из них не садится за компьютер сразу. Лучшие

всегда начинают с обстоятельного сбора информации. И, верите
Глава 1. Сбор информации и мозговой штурм

37


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

стадии доработки, прежде чем проект будет завершен.

8 8 8 ПОПРОБУЙТЕ ЭТО
1.

Получили заказ? Задайте все нужные вопросы, потом набросайте
дизайнерский бриф.

2.

Сходите в библиотеку, покопайтесь в Интернете, соберите всю
возможную информацию по теме, с которой вам предстоит
работать.

3.

Сделайте наброски домашней страницы сайта вашей страны
или вашего города. Исследуйте социально-демографический

профиль вашей аудитории. С учетом этих данных об аудитории,
Иэ первь1х уст. Создайте
серию бумажных пакетов

что нужно принять в расчет?

4.

Посетите сайт почтовой службы той страны, куда предпола­

для ланчей, на которые

гается выслать ваше творение. Найдите и прочитайте правила

в качестве спикеров

и инструкции, касающиеся отправки деловых писем.

будут приглашены
эксперты в области

5.

Создайте серию бумажных пакетов для ланчей, на которые
в качестве спикеров будут приглашены эксперты в области по­

полиграфии, интернет-

лиграфии, интернет- и видеопродукции.

и видеопродукции.

6.

Придумайте 50 типов списков идей, которые вы можете соста­
вить на стадии разгрузки во время мозгового штурма. Теперь

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

7.

Чтобы подвергнуть концепции вашего проекта мозговому
штурму, придумайте

10

правдоподобных способов дополнить

следующее предложение:

Наш

8.

настолько~~~~-' что~~~~~~~~-

Предложите новые варианты дизайна вашей визитной карточки,
сделав

10 уменьшенных, но выдержав пропорции, набросков на

бумаге в клеточку. Пусть визитка будет стандартной по размеру:

3,5

9.

х

2 дюйма (90

х

50

мм) или

2

х

3,5 дюйма (50

х

90

мм).

Раздобудьте прейскурант на размещение онлайн-публикаций.
Каковы технические требования к рекламному баннеру? Какие
возможны размеры? Допустима ли анимация? Какой формат?

Продолжительность? Размер файла? Сделайте наброски или рас­
кадровку для рекламного баннера, подходящего для конкретной
публикации.

38

Добавь воздуха!


t

сверстать за сегодня
макет на все случаи жизни


в

от мы и добрались до третьей главы. Время идет,
и компьютер манит к себе. Вы думаете: «У меня
нет времени читать книгу. Я должен все сделать

сегоднЯ>>.

Хорошо, будь по-вашему. У вас дедлайн. Что дальше?
Эта глава посвящена макету на все случаи жизни, потому
,~--~

...

н- ~fti) ц"' ~1 f н- Е.i!Г
~~

что он будет полезен в любой ситуации, он понятен всем
и каждому, хорошо смотрится и предназначен для про­

стых проектов, например для рекламного объявления

или флаера. Но даже сложный дизайн, такой как целая
печатная или экранная новостная страница, в конеч­

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

Освоив верстку на все случаи жизни, вы значительно

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

Дизайн на все случаи жизни работает, потому что ос­
нован на западном принципе чтения: слева направо

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

СТРУКТУРА МАКЕТА
НА ВСЕ СЛУЧАИ ЖИЗНИ
1.

Поля. Со всех четырех сторон задайте просторные
поля.

2.

Колонки. Установите границы колонок. Количество
колонок зависит от ширины полосы.

3.

Визуальный объект. Разместите визуальный объект
в самом верху страницы.

4.

Подрисуночная подпись. Расположите под визу­

альным объектом подпись, если она нужна.

5.

Заголовок. Разместите заголовок под подрисуночной
подписью.

40

Добавь воздуха!


6.

Текст. Вставьте текст в колонки под заголовком.

7.

Теги. Если необходимо, поместите информацию о фир­
ме (логотип, контактную информацию) в правом ниж­
нем углу.

Макет размером 5 х

7 ДЮЙМОВ (127
Шаг

Поля

No 1.
-

со всех сторон. Черные

со всех четырех сторон. В нашем понимании

просторные поля составляют не менее

178 мм)

0,5 дюйма ( 13 мм)

Прежде всего задайте просторные поля вдоль границ
макета

х

с полями шириной

0,5

дюйма

(13

линии обозначают

мм)

границы документа.

на средней рекламной листовке или флаере. Наружные

Розовые и фиолетовые

поля еще иногда называют «пространством для больших

линии

-

границы полей.

пальцев». Ширина полей увеличивается пропорциональ­

но размеру макета. Чем больше макет, тем шире поля.
Воспринимайте поля как ощутимую границу или рамку

отрицательного пространства, которая как бы говорит:
«Все, что внутри, составляет единое целое».

Шаг

Колонки

No2.

Теперь разделите пространство внутри полей на верти­
кальные колонки. Они не только позволят вам аккуратно

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

раться сквозь длинные горизонтальные строчки и большие

Фиолетовые

блоки текста. Благодаря колонкам строки становятся коро­

че, а блоки

уже. Таким образом, колонки

-

направляющ

это что-то

-

колонок

вроде тромплея (обмана зрения): «Давай, читай, это не

ограничиваю

займет много временю>.

размеры
текстовых

Для небольшой рекламной листовки или флаера двух ко­

колонок

лонок вполне достаточно. Если макет больше, возможно,

и средника

понадобится увеличить и количество колонок. Следите за

между ними.

тем, чтобы отрицательное пространство между колонка­
ми было не слишком маленьким и не слишком большим.
Ваша цель

-

сделать так, чтобы колонки воспринимались

как самостоятельные объекты, но при этом составляющие
единое целое.

Шаг NоЗ. Визуальный объект
Теперь разместите визуальный объект. Здесь

-

это средство при -

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

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

Глава

3.

Макет на все случаи жизни

41


направленное сверху вниз. Пусть изображение будет свое­
образным знаком «Добро пожаловать!» вашего макета.
«Повесьте» ваш визуальный объект под верхним полем.

Шаг

No4.

Подрисуночная подпись

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

связанных с новостями макетах изображения говорят сами
за себя и в подписи не нуждаются. Если мы готовим ре­

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

и для заголовка или основного текста. Выберите кегль от

9
Вверху: Располагаясь в верхней

до

12.

«Восьмерку>> читать тяжеловато, а 12-й

-

слиш­

ком крупный или, как сказали бы некоторые дизайнеры,

части макета, графический объект

лошадиный. (При всем уважении к этим благородным

становится стартовой точкой.

животным, «лошадиный» в графическом дизайне

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

все не комплимент. «Лошадиный»

-

-

это во­

означает неуклюжий,

громоздкий и неизящный.)

а ее длина не должна превосходить

Шаг

ширину самой иллюстрации.

Заголовок должен производить самое сильное впечатление,

NoS.

Заголовок

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

макета. Сначала они обращают внимание на изображение,
а затем изучают заголовок.

Зачастую люди хотят видеть только изображение и за­
головок. Поэтому приложите соответствующие усилия

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

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

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

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

вашего дизайна. Так, если вы собираетесь говорить с ауди -

42

Добавь воздуха!


торией на языке улицы, не надо ставить шрифт, который

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

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

более безболезненно? Переносы лучше всего делать, когда
завершена основная мысль, часть сложного предложения

или фраза. Никогда не ставьте перенос в слове с дефисом.
И никогда не оставляйте всего одно слово на второй строке.
Посмотрите на три заголовка, приведенных ниже. В каком

из них перенос выполнен наиболее удачно?

Poor рlаппlпg оп your part does поt coпstl­
tute а crlsls оп my part.
Poor рlаппiпg оп your part
does поt coпstltute а crlsls оп my part.
Poor рlаппlпg оп your part does поt coпstltute а crlsls оп
my part.

Заrоловок. Заголовок должен
бросаться в глаза. Чтобы выделить
его, используйте крупный кегль,

интересный шрифт и яркий цвет.

Ответ: наиболее удачен второй заголовок.
Если перед вами макет солидного журнала, в котором

Выровняйте заголовок по ширине,
от поля до поля, избегайте
некорректных переносов.

следует привести имя автора статьи, поместите его под

заголовком, подпись должна быть значительно меньше
заголовка.

Шаг

No6.

Текст

Вы или кто-то еще написали блестящий текст. Теперь его
нужно залить в верстку, обращайтесь с ним с почтением.

1. Заголовок и лид должны образовывать единство. Между
заголовком и лидом не должно быть ничего кроме стро­

ки с именем автора текста. Иными словами, физическая
дистанция между заголовком и лидом отсутствует.

Человек заканчивает читать заголовок и тут же пере­
ключается на лид.

2.

Залейте текст в приятные глазу колонки, которые так
и просят: «Прочитай меня». Если текста слишком мало,

чтобы заполнить все колонки, уравновесьте их с помо­
щью отрицательного пространства. Оставить колонку
пустой

-

это нормально. Белое пространство вам не

враг.

Глава

3. Макет на все случаи жизни 43


Кстати, короткие абзацы как бы говорят: «Это не за­
ймет много временю>. Делайте короткими и колонки.
Читатель охотнее одолеет несколько коротких колонок,

чем одну длинную, в которой будет написано все то
же самое, что и в коротких. Однако не переборщите

-

слишком краткие колонки провоцируют прерывистое

чтение. Учитывайте, что оптимальная длина колонки
составляет от

5 до 25

см.

3. Для текста возьмите разборчивый шрифт и задайте для
него 9-11-й кегль. Разборчивые шрифты легко читать,
так человек может сосредоточиться на написанном

и не отвлекаться на мысли вроде: «Какая интересная

гарнитура!)) или «Вот бы разобрать, что тут написано!)).

Самый распространенный из разборчивых шрифтов Times New Roman. И именно по этой причине мы не
советуем ero использовать. Подберите удобочитаемое
начертание для основного текста, даже если процесс

выбора покажется вам утомительным. Убедитесь, что
шрифт основного текста не конфликтует со шрифтом
заголовка . Пусть заголовок задает тон.

Раэ"етка текста. Наш
пример демонстрирует

4.

Мы рекомендуем не выравнивать текст по формату. Ровный

несколько лучших

левый край и рваный правый

вариантов верстки,

строке в среднем по

включая заливку текста

слов в строке будет зависеть от ширины колонки и подобран­

в удобные для чтения

6-12

-

это верняк. Размещайте на

слов, учтите лишь, что количество

ного кегля. Если умещается только по

колонки и сохранение

с дефисами, требующих переноса,

визуального единства

-

3-4 -

а у вас уйма слов

есть несколько выходов:

понизить кегль или расширить колонки, или и то и другое.

заголовка и лида.

S.

Пара советов касательно абзацных отступов и отбивок: отступ
в лиде не нужен. Если собираетесь делать абзацные отступы
в остальном тексте, задайте автоматический отступ, равный

по ширине примерно

15

4-5 символам шрифта.

Например, отступ

мм, вероятно, великоват. В случае, когда между абзацами

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

что внизу есть некрасивые переносы абзацев или предложений?
Не начинается ли новая колонка с последнего слова предложения
из предыдущей? И в том и в другом случае исправьте ситуацию.

Должны ли все колонки быть одинаковой длины? Нет.

Шаг

No7.

Теги

Это вся информация, которая обычно находится под основным
информационным блоком, такая как логотип, список тем, слоган,

URL-aдpec, юридический адрес и карта, телефонный номер и, к со­
жалению, иногда всякая юридическая чушь.

44

Добавь воздуха!


1• Не забудьте о тегах, это может быть важно. По крайней
мере учтите логотип и веб-адрес .

2.

Размещайте информацию в правом нижнем углу, в этой
точке обычно заканчивают чтение. Информация о фир­
ме

-

это последнее, что человек должен прочитать .

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

-

-

пока

в рекламной сфере его

называют « мышиным » . Разумеется, нельзя изменить

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

всегда передает сообщение. Однако именно из-за его уни ­
версальности мы советуем не использовать его все время.

Обращайтесь к нему только когда это действительно не­
обходимо .
Прежде чем умчаться доделывать горящий проект, мы рекомендуем
вам прочитать следующую главу. В четвертой главе перечислены

самые распространенные и ошибки верстки

-

грехи , которые свой­

ственны новичкам. Мы просто хотим, чтобы вы не опозорились.

Т егм. Размещайте
контактную информацию
в правом нижнем углу,

в этой точке обычно

заканчивают чтение. Это

• • •ПОПРОБУЙТЕ ЭТО
1.

последнее, что человек

должен прочитать.

Начните разрабатывать некий проект, который был бы вам
интересен. Подготовьте несколько набросков, отталкиваясь
от макета на каждый день. Сколько вариаций на мотив этого

шаблона вы сумеете предложить?

2.

Разыщите примеры использования макета на каждый день
в разделе новостей и в рекламе. А в Интернете они встречаются?

Найдите и отметьте все компоненты такой верстки . Макеты

похожи между собой или нет?

3.

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

•
•

проведите небольшое исследование;

сформулируйте идею и напишите текст, используйте подхо­

дящие цитаты;

•
•

подыщите подходящие иллюстрации;

экспериментируйте со шрифтами, пока не подберете гармо­

ничную пару; шрифт должен соответствовать вашей идее;

•
•

ориентируясь на макет на каждый день, сделайте наброски;
подготовьте эскиз плаката .

Глава 3. Макет на все случаи жизни

45


МАКЕТ НА ВСЕ СЛУЧАИ ЖИЗНИ. ГАЛЕРЕЯ

Sent. Occalllre prat acemam, saлt earchlcallls qu~ sunt. Lo Ьealllr mln plant exerum qша cus,
saperum oos esto Ьlatem quaSSll volupta musande pra

А

fresh take оп classic fare

BY J ANES MIТН

maio officic, quc corem quis dolupru
riЬcation nobls cum nonscd quos ipsum
ra voluptat cnihili tiissi Ьеа doluptasObls щ magnarur siri Ьcrar er аш
sal
est lignis dusdaectem volesr arcm
vellecae prem hir ipsaeces doluprae posti
volupra riЬc~ vcrcicnt voluptatcr ius
consediatius assunt quibus, utcnis dolcnis volorro cum expeUest es sundcliresre cxplamus molum , quc maximolut
earcmoloris minvent quae nis aribus mil voloris сх еа cnt.
Magni volupri busdae nimcr ctur accil cs expcrepernat qui cotarac.
ria dolorir dolor as dolorch
lm asi dc:nt dc:blta
enicndam nonserrum
consequc: volo que coribw
OUR
REVIEW:
а~ ncm ium escimpores
inihica epudis quc: nonec с:а
sapicndi naшribcrum ear
Food
quis quas at.
aut aur liqui iliquunr,
Ur aligend aerias dc:lAtmosphere
ommolorcs as cs id quislaЬor ad minvc:licшs,
Service
sumquia
ditae. Vidiribus
invelessum a.spiducil ipsa
idesc:cшr alir, sunduci
Price
SS$ dissin esrioп: ttprature
роге eos cndiae. Lesr fugiac
llcndj Ыашr, si quam quid
Tribuм FooJ Criti€

****
***
***

magnis qui sa cuptatqui
aligcnc vc:nd~ nia consequiatia dolo~ .
offictatc: voluptat fuga. Porerfercsc
alitarur, voluptas incil ipsa veliquc: nos

46

Добавь воздуха!

libus aut

ре

odis doltcac-

prent min c:r volor а asit laut magnima
ionse.ria enihic tc:mpori dolupta cos.sita
testio magnis si arior si ат aut.


Your Commercial Interiors Experts.

SALES

Faccum eatlo lumquld elestlu mquodlstls eture aborelc lpsaped quae
dolorrum vellaut atusam nlenls dltataquo cullupta volorlo. Exersperum
voluptatia del ln nullore corumet est quls excema tlbusaplta ра allbus
cum delltaepe lum rerltatiunt, nonsedls slt quamus dolor re suntemo
luplent.

· F1oorlng

Dus nos re enda lllbus con exercl omnls qulbusclmus etlorlt lmendandl
doluptatis sl ommodlt landltatust fuga . Perlt et id eture, torum ne aute
nusa voluptatur allaemat fug ltate porest, quate mlntota noЫtat
emporum lltaqul conseque sltet qul sl nonsequlae volorestis ldusant,
quatem am cus se lam re, voles derchliltas exceatem fug lam, ut moluptates voloruntist, soluptati nonsequ landltiaslta vel exerovldlt vel llquas
dltla que nos lpsam, iderroreptas dus rem. Ut laut elunt.

· Wall ftnlshes
· Furnlture, seatlng and f11es
· Wlndow coverlngs
· Custom mlllwork
CONSULТING

· Corporate relocatlons
· FF&.E Procurement
· Space plannlng
· Materlal analysls and selectlon
· Project and lnstallation management
· LEED certlflcatlons

The road

М)~
traveled.

Vines
lnternational

Cindy Concord
Wine Consultant
_11uy _ _ _ 1:c;e·

•

Eiщtklnll tat8 1nd frah.a. P:ocl.'C€ ~с~ес:
~n·: ~:~а: :--е re-;:~: с!~.~
~~.;

,"r-7~ ~<OnJ е-:: ~cDe·y

. . . . . . . . . . V:w:<a·)

has

е'сес:«-а f·г,:·

tS :;ia::kej 1'>1П

Гo\.l'•en-s

':x\asle n,~:ta~:Y-..alC1

:· ~а:....а~ 1;

For more inlormation
farmer's markets and
locally grown produce in your
агеа, visit our Web site at:
оп

www.buylrnhbuy1ocal.org

•

591 О Merlot Parkway
Anytown, NY 3361 О
800.555. 1234
555.555.4567 ext. 1 11
www.vinesinternational.com
cindy@vinesinternational.com

Нellthlet' envlrvnment. ~ОСЗI 'ood ooesri t ~.а-. е ;~
t"<:>ei ta·

T~!S redl..ces ca'OCr
pad.;:191'"\a:eri.a\s

Qic\{je f~·'$$.>YS a_n,::

Buy Fresh. Buy Local.
Глава

3. Макет на все случаи жизни 47


t

грехи верс тки
13 ошибок дилетанта

LawnCare

ompetitive Prices

• Mowing
ра

• Hedging
• Weed trimming
• Edging
• Вlowing
• Mulching

quibus maximusto verc, voluptatur то

s sus eatium fuga. Er est, il inctistcm ct

t

dolorch enircstrum is estiore erur?

psam laute corion nem quis anditat emoe cnisqш: ptrum volcscr iostisiti ipsandc
ndac ipsae vcllor aut opti tcm audit cat
\ porcpro vition con rcrum explaЬor
а

dolupris dcllupisti cum vcliam estis


ГРЕШНИКИ:
1.

13

ОШИБОК

Все, что мигает. Без
перерыва. Сведите

Greenwise Lawn
Care

моргание анимированных

картинок к минимуму.

2.

Деформированные фото.
Пропорции фотографии

§rм~rт' S~ГRV'lC:E

должны соответствовать

* COMP:ET'1T'1V:E P'R'lC:ES

•

макету .

3.

Открытые фото.
Используйте волосяные
линии для обводки

фотографий с нечеткими
границами .

4.

Громоздкие границы

ф

и рамки. Для группировки
и разделения объектов
задействуйте отрицательное

пространство . Если все-таки

нужно добавить границу или
рамку , делайте это элегантно.

5.

Зажатые поля. Щедро

Agn imin rem quisquiam sequam ent mod eum
aлjeni
omnis exped qui nonet verit di omn
g.it il ip andae
l.atque sitiore persped
conserorem lias num volorunt,

........._"

excerum quam corro cust. occus nonessi audam

ф

rug1tae

-_ audi officru rehendem qui neceariaLi od:i te oone.m comnis

lat.

· Mowing
Hedging
Weed trimming
· Edging
· Blowing
· Mulching

отводите место под поля ,

•

essure Wa hing
Lanai s ф
Decks
Driveways
Window cleaning
exterior only)

учитывайте внутренние
и внешние отступы .

6.

Центрирование
всего и вся. Избегайте
выравнивания по центру.

7.

Объекты во всех четырех углах. Нагромождать -

8.

Заблокированное отрицательное пространство.

плохо . Группировать -

хорошо.

Неиспользованное отрицательное пространство следует перенаправить вовне.

9.

Перегруженный фон. Обращайтесь с фоном как с отрицательным пространством .
Плиточки оставьте для ванной.

1О. Издевательства над шрифтом. Дважды подумайте , прежде чем делать выворотку,
набирать капсом или использовать подчеркивание и обводку.

1 1. Неудачные буллиты. Используйте подходящие символы и задавайте правильные отступы ,
выравнивая списки.

12. Висячие строки («вдовы» и «сироть1»). Избегайте некрасивых переносов в абзаце,
начальных и концевых висячих строк .

13. Коридоры. Обходитесь без коридоров в колонках, образующихся при выравнивании текста
по ширине .


ч
1•

то до ошибок и грехов верстки

-

то их масса. Для вас мы

сократили список до чертовой дюжины самых заметных,

бросающихся в глаза в непрофессиональных работах.

Все, что мигает. Без перерыва

2. Деформированные фото
3. Открытые фото
4. Громоздкие границы и рамки
5. Зажатые поля
6. Центрирование всего и вся
7. Объекты во всех четырех углах
8. Заблокированное отрицательное пространство
9. Перегруженный фон
1О. Издевательства над шрифтом
1 1• Неудачные буллиты

12. Висячие строки

13. Коридоры
ГРЕХ №1. ВСЕ, ЧТО МИГАЕТ.
БЕЗ ПЕРЕРЫВА
Не надо использовать анимацию, которая будет мерцать и мигать
до скончания веков. Пусть картинка, какой бы она ни была, мор­

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

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

А теперь переходим к визуальным объектам ...

ГРЕХ №2. ДЕФОРМИРОВАННЫЕ
ФОТО
Дело обстоит так: фотография не совпадает по размеру с тексто­

вым блоком, и вы растягиваете ее, пока она не станет соразмерной
с ним. Плохая идея. Теперь у вас новая проблема

-

искаженное

фото. Люди на фотографии заполучили конусообразные головы

или расплющился парадный план продукта. Масштабировать изо-

Глава

4. Грехи верстки 51


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

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

Чтобы правильно поменять раз­

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

бражение слишком маленькое,
увеличьте его, соблюдая пpo­

gnimin rem quisquiam sequam ent mod eum es ellanie1 порции, чтобы оно идеально
nnis exped qui nonet verit di omnis aut et fugit il ipsandc: совпало с текстовым блоком,
mserorem 1ias num vo1orunt. ontataue sitiore nersne и опкропьте излишки.
Искаженная

ГРЕХ №3. ОТКРЫТЫЕ ФОТО

и открытая

фотография? Человек
с газонокосилкой

откровенных снимках. Открытая фотография

действительно такой

деформированное фото?

-

не коротышка).
А без рамки небо
сливается с фоном.
Фотографии необходима
тонкая рамка.

-

та, которая нуж­

дается в рамке. Не всем им нужна рамка, но некоторым

коротышка или это

(Ответ: этот человек

Эта ошибка касается только фотографий, и мы говорим здесь не об

-

нужна.

Если вы не можете сказать, где начинается и где заканчивается

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

Даже если рамка требуется только для одной фотографии, сделайте
ее для всех остальных, дабы сохранить единообразие.
Используйте волосяную линию, она очертит границы изображения,
не отвлекая от него внимание на себя. Вы же хотите, чтобы чита­
тель подумал: «Отличная фотка», а не «Ого, какая жирная рамка!»

ГРЕХ №4. ГРОМОЗДКИЕ
ГРАНИЦЫ И РАМКИ
Делать границы и рамки насыщенными

-

значит совершать ошиб­

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

потому, что беспокоятся о визуальном разделении объектов.
Границы и рамки

-

как заборы. Они сигнализируют: «Стоп». Заду­

майтесь, что и от чего вы отгораживаете. Широкие границы и рамки

52

Добавь воздуха!


ПРАВЕДНИКИ:

5

ШАГОВ К ВИЗУАЛЬНОМУ УСПЕХУ

Если вы не допускаете ошибок, то получа­
ете совсем другой результат. Вот что нужно

сделать, чтобы макет был удачным :

1. Определите фокусную точку. Фото­
графия с правильными пропорциями
и крупный , хорошо заметный заголовок

формируют точку, на которой взгляд

фокусируется в первую очередь.

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

его. Вместо того чтобы загромождать
у глы деталями , сгруппируйте их в четыре

блока: иллюстрация и заголово к; м а р ки­
рованный список; текст и те ги.

LawnCm
• MOW\"11

• Hoc!J!nx
• Woedtтlmmln1

ентиры. Эту функцию могут выпол­
нять строгие вертикали выровненных по

inci dalorem. Aqua1 ЬЬоrе ра qulЬщ muimщto vc~ 'IO!upt11tш mo
~ inilqw: m:ttm ra c:ommod fUf1hua tш nDWD f'up. Е1 ас. il lncmrcm ct
aplau1harun1mi1

• Edi\"11
• Blowtna

u~ dolomwidem nd u

· м.~ hlna

rтm~r ar~ct ~aonкqu ammdк iJ-~ 1utopri ц:111, llldltt:a1

Pm

3. Дайте читателю визуальные ори­

Great Service ,_.,,. Competitive Prices
Commodiк:itia

u... WuhlllJ
• Lanw

• De•kt
• DrlY<Wllyt
• Window cloonln1
(oxttrlor only)

Udandш dcmquun

virio ш ct ued qul doloreh cni1cкrum il a6ore tt\11'"}
riorVDO lupn.ti ь...п., ч~-п l:aotc .....nori nm1 qu;. andiw иn·

~ a:prnlЧ'Wfl ili&Jlit Nincin hКх pt m8quc ~ volaerioltil1ti ipaDde
'{>А roa niuc .:шdк ~

dio eu1 quuntca1 pcRptO vition aon

raWD с:zр1аЬо1"

a:Woaa11шimfцp.a.miwв111:W....:ЬZ.1adokaptudalupdti(l,IDl'fdial:Dctlli

YOlorrp шч- .aipa . . . llJ Ьспь:m.

Call today for an estimate

555-123-4567

левому краю текстовых блоков.

www.greenwiselc.com

4. Правильно используйте шрифты.
В этом примере капсом набран только
заголовок. Присутствие одной гарнитуры обеспечива-ет визуальное единство. Прочие элемен­

ты верстки (например, удачно подобранные буллиты) безупречны. Никакой дурновкусицы не
наблюдается.

5. Следуйте девизу «простота и сдержанность». Этого достаточно.

отвлекают внимание читателя, а ведь он должен заинтересоваться

тем, что внутри рамки, а не ею самой.

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

не хуже сп р авится с визуал ьным разделен ием объектов.

ГРЕХ №5 . ЗАЖАТЫЕ ПОЛЯ
Когда вам все же необходима рамка, то в нутри нее без полей не
обойтись. Если общее правило гласит: «Не экономьте на полях>>,
Глава

4. Грехи верстки 53


то, какой бы ни была рамка

* Mowing
* Hedging
~

~
~
~

даже если она

-

занимает всю страницу, весь разворот или всю
электронную страницу,

-

вы должны задать

дополнительные поля. В рекламных изданиях,

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

Weed trimming
Edging
Blowing
Mulching

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

любого фрейма

-

внешний отступ. Внешний

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

к фрейму. Это не только некрасиво, но и влияет
удобочитаемость.
Не жалейте «воздуха» на поля

-

где бы они ни

находились. Учитесь замечать места, где его
не хватает.

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

пространства. >Кирная
рамка перегружает м ак ет,

а нехватка полей внутри
н ее «ду ш ит» тек ст.

ГРЕХ №6. ЦЕНТРИРОВАНИЕ
ВСЕГО И ВСЯ
Дилетанты любят располагать все по центру. Иллюстрации, заго­
ловок, текст, теги

-

ровнехонько по середине . Признайтесь, таково

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

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

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

ГРЕХ №7. ОБЪЕКТЫ ВО ВСЕХ
ЧЕТЫРЕХ УГЛАХ
Второе искушение начинающего дизайнера после выравнивания
по центру

-

это заполнение всех четырех углов макета, равно

как и любого другого свободного места. В результате визуальное
сообщение выглядит «шумным » , непривлекательным и беспоря­
дочным . Не забываем: белое пространство вам не враг.

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

54

Добавь воздуха!


•••••••••••••••••••••••••••••••••••••••••••••••••
•
•
•
•
•
•
•
•

6reenwise Lawn
Care

•

•
•
•
•

•

•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•

§~~ rf S1E'RV'1C1E

•

•
•

•
•

* CO'М.P1Erf'1rf'1V1E P'R'1C1ES

•

Agnimin rem quisquiam sequam ent mod eum es ellanieni
omnis exped qui nonet verit di omnis aut et fugit il ipsandae
conserorem lias num volorunt, optatque sitiore persped
excerum quam corro cust, occus nonessi audam fugitae
audi offictu rehendem qui neceariati odi te nonem comn is
lat.

•
•
•
•
•
•
•

•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•

•
•
•
•
•
•
•

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

Выравнивание

визуального позитивного пространства.

по центру, заполнение

углов . Мы глубоко
К примеру, блок с тегами: логотип, список тем, URL-aдpec, юри­

убеждены , что люди ,

дический адрес, телефон и т. д. Это один блок, а не пять разных.

которые все выравнивают

Поэтому группировка не только облегчает макет, но экономно

по центру и запол н яют

и эффективно расходует пространство.

все четыре угл а макета ,
нужда ются в лечении.

Нагромождать

-

плохо. Группировать

-

хорошо.

Симметричное
ра с п ол ож е ни е элементов
ус по каи в ает, как

ГРЕХ №8. ЗАБЛОКИРОВАННОЕ
ОТРИЦАТЕЛЬНОЕ
ПРОСТРАНСТВО

и ани м ирован н ая картинка ,
н о з рителя не должно
клонить в сон от вашего

дизайна .

Другое правило компоновки предписывает распределять свободное

негативное пространство ближе к внешним краям макета . Забло­
кированная область

-

это озерцо негативного пространства, со

всех сторон окруженное текстом и изображениями . Это пузырек
воздуха, которому некуда деться.

Глава

4. Грехи верстки 55


Пустое место в центре макета

Architecture
in the Garden

отвлекает внимание читателя

от других элементов. Чтобы

предотвратить блокирование

Garden seats, arЬors and
trellises add ап elegant
touch to your backyard.
Sape endit aspit hilles
sim qui sum, expercillita
aditaquae culparum sedis
eiusdam volorem ipic tectaquat.
Ugit veris esequamus,
quam am, consed eum
voloreium eum dolorer
atemolupta dest accum que
con nat deЬitatio ero magnihilique rae lique core con
conseque aut accatur?
Qyi Ыаm, corepudam
quam aceperferci in еа
doloresti totatem peratium
est verum verferatus ilic tem
saniet rem quiaes maiorestiunt es etur rectatis dolupta
de doluptatiunt archilignia
pre cusam et lit es rempore
ne plam aut aut et ut et ut
arum cus ium fugit eos senis
nonsequo eos nam aruptum
faccuptas erum et fuga.
Osapiciatur, sum que
comnimu samustest et
prae pro ех es simpori
cullorerum reptate nectore
sequis dem quat ut eaqui
od quame es quatemossit
audi tentionsed es iundae
aut eatemquam est et illiqui
aturitam doloratempos
exernati volorem atempore
volupti iusdae deЬiscit ver-

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

был открыт.

ГРЕХ №9.
ПЕРЕГРУЖЕН­

НЫЙ ФОН
Задача «воздуха» состоит в том,

чтобы уравновесить позитив­
ное пространство, занятое ви­

зуальными объектами и тек­
стом. Тогда зачем некоторые

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

кондрашка хватить!

Продумывая фон для сайта
или печатного издания, будьте
nam, entem estrunt laborest, vel ipide maximincient
quoTur'
Qyaspiendic to te dest
officil iberum ditae volorem
аЬ intem conseque ma adis

dis audam eaquiduntius
eossus et facea vel ipit
parum sum volore delis
que dem et officta spedias
magnihilla del magnis
doluptas erum laboreiunto

милосердны к своему дизай­

ну и к своей аудитории. Белое
пространство вам не враг. Не
превращайте отрицательное
пространство, на котором от­

дыхает глаз, в перегруженный

позитив, соперничающий с ил­

Для чеrо эдесь дыра?

люстрациями и текстом за внимание читателя. Фон не должен

Распределяйте белое

препятствовать визуальной коммуникации. И мерцать, кстати,

пространство по внешним

он тоже не должен.

краям макета.

ГРЕХ №10. ИЗДЕВАТЕЛЬСТВА

НАД ШРИФТОМ: ВЫВОРОТКА,
ОБВОДКА, НАБОР КАПСОМ
И ПОДЧЕРКИВАНИЕ
Играя со шрифтами, любители идут на четыре рискованных шага:

1) оформление шрифта вывороткой; 2) использование обводки;
3) набор капсом и 4) подчеркивание. Подумайте дважды, прежде
56

Добавь воздуха!


CALLs tJS TODA'f
-LJ5(j1

el-.-чем использовать хотя бы один пункт и боже вас сохрани заинте­

Переrруженнь1й фон.

ресоваться всеми сразу.

Этим все сказано.

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

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

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

Во-вторых, часто новички инвертируют контрастные шрифты
(рисунок которых включает в себя тонкие и из толстые штрихи). На
жаргоне шрифтовиков тонкий штрих -

это та же волосяная линия.

Тонкие и толстые штрихи есть не у всех шрифтов, но у многих.
Если вы инвертируете шрифт с очень тонкими штрихами, у вас
могут возникнуть проблемы при печати

-

сверхтонкие штрихи

инвертированных букв скорее всего исчезнут. Все потому что бу­
мага

-

абсорбент, и краска (которой при инвертировании гораздо

больше) растекается. После того как бумага впитает краску, тонкие
штрихи инвертированных букв могут получиться еще тоньше, чем

Гnааа

4. Грехи верстки 57


вы предполагали. Тогда уж точно возникнут проблемы

ГАЛЕРЕЯ

ИЗДЕВАТЕЛЬСТВ
НАД ШРИФТОМ

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

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

очень коротких текстах. Для инвертирования выберите

неконтрастный шрифт с толстыми штрихами, чтобы текст

Выворот1\н

оставался удобочитаемым.

vбиваст ;~ста-

Обводка. Это обведение по контуру символов шрифта,

"

JI 11 IJ I р IНf Yl'H

так называемых глифов. Дилетанты любят делать обводку,
потому что умеют. Или считают, что это круто смотрится
или помогает выделить важную мысль. На самом деле

обводка искажает пропорции и тонкие штрихи глифа.

~

-

~~

Это как если бы вы обвели Мону Лизу толстым черным
маркером. Но есть же и друтие, лучшие способы привлечь
внимание читателя.

Заrnавные буквы. Представьте, что едете по незна­
комой дороге. Вдали виднеется дорожный знак. Вы еще

недостаточно близко, чтобы разобрать написанные слова,
но что это за знак, уже можно сказать, ориентируясь на

ТЕКСТ, НАБРАН­

форму слов. Люди читают слова, а не буквы. Но если вы

НЫЙ КАПСОМ, НЕ

пишете прописными буквами, форма утрачивается.

ТОЛЬКО ТЯЖЕЛО

Слова обладают узнаваемой формой из-за имеющихся

ЧИТАТЬ, ОН ТАКЖЕ

в них букв с верхними и нижними выносными элементами.

ВЫЗЫВАЕТ ОЩУЩЕ ­

НИЕ, ЧТО НА ТЕБЯ
КРИЧАТ.

Хотите быть похо­
жим на подрост­

ка~ Используйте
подчеркивание,

чтобы привлечь
внимание!!!
(И побольше восклицатель­
ных знаков, если на то пошло)

Строчные буквы с верхним выносным элементом

- это
d, f, h, k, 1, t. Строчные буквы с нижним
выносным элементом - g, j, р, q, у. Именно выносные эле­
глифы вроде Ь,

менты придают форму слову.
У прописных букв нет выносных элементов, поэтому для

расшифровки слов из таких букв читателю придется при­
ложить чуть больше старания. Если хотите написать слова

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

использовать прописные буквы для всего текста.

Подчеркивание. Никогда не используйте подчер­
кивание для выделения написанного. Есть много других

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

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

слов в тексте используйте шрифт друтого цвета или курсив.

58

Добавь воздуха!


Новички, пытаясь выделить шрифт, совершают несколько

ошибок сразу и еще ставят три восклицательных знака,
что только ухудшает ситуацию. (Если постановка воскли цательного знака обоснована, одного всегда достаточно.)

Объединить все эти эффекты

-

все равно что разгуливать

с прилипшим к ботинку куском туалетной бумаги.

Pressure Washing

ГРЕХ №11. НЕУДАЧНЫЕ

~Lanai's

БУЛЛИТЬI
Применительно к буллитированию можно говорить об
ошибках двух видов:

1• Использование неудачно подобранных буллитов.

2.

Неверное выравнивание маркированных списков.

~

Decks
~ Driveways
* Window cleaning
"exterior only)

Простые, но элегантные точки или цифры всегда смо­
трятся выигрышно. Звездочки, дефисы и смайлики

-

нет. Декоративные маркеры не должны выпадать из

Плохой буллит, хороший

общей концепции дизайна. Избегайте попсы. Это то,

буллит. Помните, что звездочки

что касается неправильной маркировки.

-

это не маркеры. Используйте
настоящие буллиты и, пожалуйста,

Второй вид ошибок связан с выравниванием. Для него не­

научитесь делать абзацные отступы.

обходимы абзацные отступы, благодаря которым буллиты
или цифры выстраиваются на поле в линию. Что бы текст
воспринимался целостно, образуя отдельную вертикаль:

•

всегда выравнивайте буллиты по вертикали;

•

всегда выравнивайте текст по вертикали.

Pressure Washing
• Lanais
• Decks

Понятно!

• Driveways
ГРЕХ № 12. ВИСЯЧИЕ СТРОКИ
Верхние и нижние висячие строки

-

это досадная ошибка

в типографике. Верхняя висячая строка (((вдова)))

-

• Window cleaning
(exterior only)

когда

последняя строка абзаца оказывается в начале следующей
колонки. Нижняя висячая строка (<<сирота)))

-

когда

первая строка нового абзаца оказывается последней

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

Если вы не можете запомнить разницу между верхними

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

Глава

4.

Грехи верстки

59


ГРЕХ № 13. КОРИДОРЫ
Если вы не профи или не работаете в газете или журнале, то после
выравнивания текста по ширине в нем появятся большие пробелы

"1

между словами. Это создает так называ­

емые коридоры внутри текста, которые
сказываются на удобочитаемости.

1

Выровненный по ширине текст будет хоро­
шо смотреться, если выдержано правиль­
1

ное соотношение между кеглем шрифта
и шириной колонки. Избавиться от кори­
доров можно, предприняв следующее:
1

1• Расширьте колонки, удлинив таким об1

I

Agnimin гсm quisqt1iam sequam ent mod cum es ellanieni
omnis exped qui nonet verit di omnis aut et fugit il ipsandae
conserorem lias num volorunt. optatque sitiore persped
excerum quam соrто cust, occus nonessi audam fugitae
audi offictu rehendem qui neceariati odi te nonem comnis
lat.

-~~~~~~~~~~~~~~~~~~~~~~

Сосчитайте
пробрешины.

разом строки.

2.
3.

Понизьте кегль.
Скомбинируйте пункт 1спунктом2.

Какой будет наша рекомендация, касающаяся использования выравнивания по шири

Сощурьтесь, чтобы

Мы осветили

увидеть коридоры

будьте взять список с собой.

белого пространства,

-

не? Ее нет. Выключайте текст по левому краю. Проблема решена.

13

проступков. Идите и больше не грешите. Не за­

разрывающие

выровненный по

ширине текст. Ужасно
смотрится, да~

• • •ПОПРОБУЙТЕ ЭТО
1• Вернитесь к разделу <<Попробуйте это))

предыдущих трех глав.

Найдите ошибки в своей верстке.

2.

Сверстайте методическую листовку, в которой разъяснялись
бы

13

грехов верстки. Убедитесь, что сама она не содержит ни

одной из них.

3.

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

4.

В поисках сокровищ в Интернете: засеките, сколько времени
у вас уйдет на то, чтобы найти примеры всех

60

Добавь воздуха!

13

грехов в Сети.


t

мини-арт- ш кола
v

элементы и пр инципы дизаина

~1.;lJ
LETT
Ignis ге volores еа
ihit ~ccusa nonsequi qui dolupor as агiа delluptatem quiam
~uam ipsam dio.
in роге dolor aliquuntiae et,
us remod utat а venisVolo ocaut aut et earupic totati derferi
е pelicat. dolecum harcill.

PRE~

CARDF

YOUR


Б

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

необязательно уметь рисовать (и многие из них совсем ничего

нарисовать не в состоянии), знать элементы и принципы построения
визуальной композиции, которая привлечет внимание и передаст

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

Во-первых, мы познакомим вас с семью

элементами дизайна. Это основные еди ницы визуальной коммуникации, слово

«элемент» употребляется неспроста.

1. Пространство
2. Линия
3. Форма
4. Размер
5. Шаблон
6. Текстура
7. Светотень
Во-вторых, рассмотрим семь принципов,
или правил, хорошего дизайна.

1• Фокусная точка

Положительное
и отрицательное

2. Контраст
3. Баланс
4. Движение
5. Ритм
6. Перспектива
7. Единство

пространство.

Данные элементы и правила послужат вам двумя способами: с их

Где какое? Поменять

помощью вы освоите специальную терминологию и создадите более

местами отрицательное

эффективные визуальные сообщения.

и положительное
пространство

-

интересное

визуальное решение.

Но главное: вам всегда
нужны и то и другое.

ЭЛЕМЕНТ № 1. ПРОСТРАНСТВО
Можно говорить о пространстве, метафорически представляя его
в виде песочницы, где вместе играют визуальные объекты и шриф­
ты. Вы уже узнали о существовании отрицательного и положи­

тельного пространства. Позитивное пространство
Негативное пространство

62

Добавь воздуха!

-

-

пустое, оно не враг вам.

заполненное.


Fine Line

HeavvLine
1exturral Lm.e
~~-ЕИw
VhimSic~l Li11e
Линия

-

везде и всюду. На

изображении слева линия передает
направление и движение. В примерах
вверху линия символизирует
индивидуальность.

Пространство, позитивное либо негативное,

-

это не просто один

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

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

два разных изображения, в зависимости от того, какое простран­
ство глаз принимает за отрицательное или положительное. Тем не
менее даже если ваша цель

-

обмануть зрение, отрицательное и по­

ложительное пространства играют важную комплиментарную роль

для успешной визуальной коммуникации в графическом дизайне.

ЭЛЕМЕНТ №2. ЛИНИЯ
Поскольку отрицательное пространство

ство, наш главный инструмент

-

-

это пустое простран -

линия, которая обозначит гра­

ницы отрицательного или создаст положительное пространство.

Глава 5. Мини-арт-школа

63


Обратите внимание: мы не используем слова «примитив» приме­
нительно к линии, поскольку линии могут быть очень даже слож­
ными. Например, передающие человеческую речь и воссоздающие

окружающий нас мир. Однако линии все же примитивны, в том

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

Линии могут быть прямыми, ломаными и кривыми. Могут быть
толстыми или тонкими, сплошными или пунктирными. Границы

страницы или экрана

-

это линии. Формировать их может и от­

рицательное пространство (линии полей).

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

мер, горизонтальные строки текста на данной странице. Шрифт
выстраивается в горизонталь по так называемой базовой линии,

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

AMERICAN
SKVSCRAPER

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

-

вертикаль справа. Верх, низ

и стороны прямоугольной фотографии (с рамкой или без нее)
образуют горизонтальные и вертикальные линии. Все эти виды

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

считывания информации или получения отклика.

ЭЛЕМЕНТ №3. ФОРМА
Воспитатели в яслях приходят в восторг, когда малыш рисует свой

первый крут

-

пусть даже это очень условный крут. Он нарисовал

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

Мау

31 through
December 31

at

Н1е

MUSEUM OF
MODERN ART

-

это контур. Думаем, у нас получится поразмыш­

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

форму. Текстовые блоки чаще всего тоже прямоугольны. Именно
потому мы и называем их блоками.
В искусстве говорят о двух видах формы: неорганической и ор­
ганической. Неорганические формы

-

геометрические, напри­

мер идеальные круги, квадраты, прямоугольники, треугольни

64

Добавь воздуха!

-


ки и т. д. Они редко
встречаются в приро­

де. Органические фор­
мы

-

МЕ ТО SERENITEA

естественные.

Мы можем, например,

As ut ut et am ersperlt et excerum quaepud ltlscll landuciis vldus pos et
velestla que so111que sinctJo consero vldendi te ersplet tpis aut quatio. Ent
as nlmolut eatuг, stnverl offictem lptenda qulsd consequas dolupls lnclllaut

свести форму почти

rehenltatem aЬorum, sam aut аЬо. Itatestempos autatum ut erchlli gnihlt
essl derepel es untlo qulam, nectorr oreptat odl odltate sequo optls pero-

любой груши к двум

rum quatem ldelecus dlt preldenlas nonsercla velest offlcat estlas dud con
nam hlclunt facea sotuptatur?

основным кругам, но

реальная

груша

Porro Ыaceattae nesslt.aslt, slta non eлdundШon nem slm dolo et anda pre
et ma10 optatur? Qu!Ьererum voluptas eaquid magnthlcld maxlmus denlt,
sus allbusdllnt eturecaЬo. Iqul dolorun tendlpsam aut utentJbus volo optas
acipsam dlo. Ut et quae noЫs maxim nlam, quos dolectemque odl occuptl·
Ьus maximus.

все

равно имеет немного
неправильную орга­

ническую форму.
Форма способна вы звать мгновенное уз­

.5НOP0NLINE

навание. Подумайте
о раковине морского

гребешка или косми -

Axlm qula dolorepudi odlt
sundlgendem elessum hlllatur,
Jn rent qul ad marosae rspedltibus.

ческам шаттле. Фор­

555·753·9514 •

'НOLIDAY

lnfo@)serenlteagl~ndtea.com

ма может пробуждать
воспоминания. Кон­

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

Вверху: Огромный лист
слева

-

явный акцент,

но в левом верхнем

ЭЛЕМЕНТ №4. РАЗМЕР

углу на контрасте с ним

Упоминание размера в качестве элемента графического дизайна не

меньший по размеру

вызывает особых вопросов. Мы говорим о соотношении размеров,

логотип

расположен значительно

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

( 125

х

125

пикселей, 11-й кегль) и пропорций

-

вместе это

визуально интересное
решение.

На странице

(нельзя деформировать фотографии). Понятно, что размер крайне

напротив: Этот плакат

важен для компоновки. Он может заставить элементы кричать.

работает, поскольку
в его основе мгновенно

Или шептать.

узнаваемое очертание

небоскреба Chrysleг

ЭЛЕМЕНТ №5. ШАБЛОН

Buildiпg.

Шаблон означает повторение. Для обоев и оберточной бумаги
характерны шаблоны. Клонирование буллита в каждом пункте
маркированного списка

-

тоже пример шаблона. Четыре сгруп -

пированных вместе фотографии в верстке

-

и это шаблон.

Как и форма, шаблон может быть неорганическим и органиче­
ским. Неорганические шаблоны воспроизводятся точь-в-точь,

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

5.

Мини-арт-школа

65


LETTERPRESS
lgпis re volores еа пoblt , ut re sequia delest,
quibusam fugitis solori ullupit atur re, od eпduc i m
et iпt• am , sequia пihit occusa пoпsequi qui doluptiam autet quia dolor as aria delluptatem quiam
sita autasse пtotatquam ipsam dio.

ltae пesed ut volut iп роге dolor al i quuпt i ae et,
пoпseritae comпimus remod utat а veпisVolo occatum repudioпem aut aut et earupic totati derferi
tiasiпveпis qui попе pelicat. dolecum ha rcill .

•

PRESENT THIS
CARD FOR 25% OFF
YOUR PURCНASE

"

"

Текстура. На этой

Шаблоны дают ощущение порядка и предсказуемости. В зави­

почтовой открытке

симости от того, как шаблон используется, он может сообщать

наложенные друг

и тактильные свойства.

на друга шаблоны,
текстуры и формы
создают иллюзию

трех измерений.

ЭЛЕМЕНТ №6. ТЕКСТУРА
Обычно мы говорим о текстуре в контексте трехмерных изображе­

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

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

умелого обращения с линией, формой, шаблоном и двухмерного
эквивалента луча света

-

светотени.

ЭЛЕМЕНТ №7. СВЕТОТЕНЬ
Здесь мы говорим об оттенках светлого и темного. Между черным
и белым

66

Добавь воздуха!

-

широкий спектр оттенков серого, он так и называется .


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

-

-

или наобо­

мы получаем различные оттенки серого.

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

Светотень. Мы

четливее мы ощущаем глубину и объем. Изображения с небольшим

подразумеваем

количеством серых тонов кажутся «плоскими)).

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

-

все из-за их широкого

соотношение света

и тени. Контраст между
освещенными ангелами

и черным фоном создает
ауру таинственности .

спектра цветовых значений, в котором представлены оттенки от

Воспроизводится

очень светлых до очень темных. Цветным фотографиям, которые

с разрешения

конвертируются плохо, обычно не хватает тоновой проработки.

Exploration.

Odyssey Marine

Эти снимки становятся слишком светлыми, слишком темными
или слишком серыми. В резуль­

тате изображение получается
нечетким.

А значит, у цвета тоже есть све­

тотень. Даже цветное изобра­
жение может казаться плоским

с малой градацией тонов.
Говоря о светотени как о прин­
ципе дизайна мы подразумеваем
свет, тень и все, что находится
между ними, независимо от того,

идет ли речь о белом/черном/
сером или о цветном спектре .

Светотень может быть необхо­
дима для сильной композиции.

Ее используют, чтобы создать
ощущение глубины, как и для
иллюзии текстуры. Мы привно­

сим разнообразие с ее помощью,
избегаем визуальной монотонно­
сти. Еще мы используем светлые

или темные тона, чтобы выде­
лить один предмет или ослабить
значимость другого.

Большинство искусствоведов
считают одним из элементов ди­

зайна цвет. Мы же полагаем, что
он настолько важен, что достоин

отдельной главы.

Глава

5. Мини-арт-школа 67


в.,м-p....w-­

.'lri!r,,..,..-tlt"'1riimilr:'

~--~~ft<i-•ttf'UJ-..,,,_,
--·•4id/1't(;t~•;f
.,_,,,,J.1.,_~"..-.

...--·--fWtlflfGo&.CW.
..,._,~.w,,,._.,.,.;

"'""'""''*'frf~~,,.

---........

-~-"".,,,ь.".,.,.__

~i/ln~·····
.,..,_,/W'_"
__ •

.,..~too•*f"l<-.8f$

~ OTEL

·--·

~"~'"""""'~-"

~e1w~1we

..............

~--- ......

_

........ __.,..,........,.._,,_...,.
__
......... ___ ..._

tt. _ _ ... ,....."_ ........ _..._. ....... _ .

" ...........................
-~

-"" ...................................
o--.-.......-............ ........
..... 41: ........ "

.......... _ _ ..,..,...,......,..

""8d• .......

~

c-.:...-..... ..-- ...... .-. ..... r." ...... .
... ,...... ..... ......
• .,._
,..."_..__.,._t
•.---__..,...
__.....
_ ,.... ..... ,...,.._.._...,....._. ........ ..._i-.
.о...w...

,ць.

........... -..-.
.._ ..... "......,.._._...,.. ... "................
_...,..
.......
_...
....... " ..... .... -·--"
...
.......
.....................
-w....-...-· -.-.
...........
"....................... ..........
" ......
........
___.....
.,......,.......,__
............
_"__.. __ ....,._._..,..
.........
....,...,..........__""
......."_ ......... ___
1..kW•-.-- ........................
....,...,._.....__
.....,..............._ . . •. .
r..,....-..,_...,..
" ........_..._.
_
_..,....,..,....,..._ .........
_._.,.....
--..""

...

_

_

~ddo._o...-~

~

r..--. .....

....... -

~-

~

__ _

-"~ "'(-,

~......_

_

....... .n-.1o1....,. ...... " ... "

Фокусная точка

Добавьте все вышесказанное в ваш арсенал и перейдем к семи

и контраст. На этом

принципам дизайна.

макете соединение

фотографии с крупной
декоративной R образует
фокусную точку.
притягивающую к себе

внимание. Посмотрите,
как линия кресел

подводит к декоративной

R, которая в свою
очередь переводит
взгляд на заголовок.

ПРИНЦИП №

1.

ФОКУСНАЯ

ТОЧКА
Из главы о макете на все случаи жизни вы помните, что визуаль­

ный объект работает как точка входа

-

место, с которого взгляд

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

прежде всего обращает на себя внимание, где бы ни располагалась.
Другой термин

-

визуальный центр интереса, поскольку на ней

сосредоточивается внимание смотрящего.

Правило №1, касающееся фокусной точки: у вас должна быть фо­
кусная точка. Без нее зритель не поймет, на что смотреть в первую
очередь.

Правило №2, касающееся фокусной точки: ограничьтесь одной
фокусной точкой на экранную или печатную страницу, историю

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

своей фокусной точкой, но на странице как на едином целом одна

68

Добавь воздуха!


история должна доминировать и работать как точка

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

'

,

~:

остается самым заметным элементом визуальной

' - = . ,.

коммуникации. Возможно, фокусная точка становит­

~;;~~

ся таковой в окружении негативного пространства.

Возможно, изогнутая линия в буквальном смысле

упирается в фокусную точку. Возможно, именно фор­

ма фокусной точки делает ее столь броской. Или ее
размер. Может быть так, что фокусная точка светлее
или темнее, чем остальной макет. Тогда это контраст.

Allejandro and Ana Gonzales
cordlally invite you to attend

а

dinner party in celebration

ПРИНЦИП №2. КОНТРАСТ
Контраст

важный принцип дизайна интересных

-

макетов (противоположность

-

бездарные макеты).

Контраст как принцип дает широчайшие возможности
и существует безграничное количество способов его

of Ana's
5aturday,
• 6:30

will
Ьу

Ье

РМ

40th

Ьirthday

SeptemЬer

•

4, 2004

· Beer, wine t!:t sodas

served • Please RSVP

August 31 (555.555.3456)

· For directions, please go to
www.gonzaleshome.com/mao

достижения.

Начнем с элементов дизайна. Вы можете сыграть на
контрасте заполненного и свободного пространства
или использовать контрастирующие линии и формы. Вольны поме­

Баланс. Этот дизайн -

стить рядом объекты, контрастные по размеру. Расположив шаблон

пример того, как работает

там, где поблизости нет других шаблонов, вы получите контраст.

нарушение правил.

То же справедливо и для текстуры. Или создайте контраст между

Бездарным, выровненным

двумя разными шаблонами или двумя разными текстурами. Цвет

по центру макетом

и светотень

-

тоже эффективны. Одновременное использование

темных и светлых тонов или цветов вновь порождает контраст.

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

он не стал благодаря
выверенному балансу,

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

обращению со шрифтом.
А коридоров-то нет!

ПРИНЦИП №3. БАЛАНС
Представьте себе весы

-

дощечку, уравновешенную в центре.

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

уравновешены. Чтобы достичь равновесия, каждая сторона должна
нести на себе одинаковый вес.
В дизайне мы говорим о балансе, имея в виду визуальный вес.

Вы стремитесь к тому, чтобы ваш макет и дизайн были сбалан сированы, если только не преследуете цель вызвать у аудитории

беспокойство, напряжение или тревогу. Есть три вида визуального
баланса: радиальный, симметричный и асимметричный.
При радиальном балансе элементы располагаются вокруг центра
кругами, как в ловцах снов индейцев оджибве. Такие круговые
Глава 5. Мини-арт-школа

69


элементы, зачастую имеющие

Е

о

u
,.j

L:

...,о

~~

о

u...

с

Q.J
с

о

а::

©
о
fо

е

мистическое

значение,

есть

во многих культурах по всему

миру. Интересно то, что где бы
вы ни разделили радиальный

l)

баланс, вы всегда получите две

2

симметричные половины. Толь­
ко радиальный дизайн имеет

о_

такую особенность.

z

Независимо от формы, для до­

о

t{

u
::=)
о

ш

стижения симметричного ба­
ланса необходимо, чтобы каж­
дая сторона состоящего из двух

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

область применения. Но он
может казаться традиционным

и консервативным (а иногда чо­

порным и скучным).
В асимметрии, наоборот, по­
лучаются две неравные части.

Асимметричный баланс визу­
SMIТHTOWN
UNIVERSIТY

ально интереснее, чем симме­

тричный.

В примере с качелями мы мо­

жем сбалансировать вес двух

Движение. Как передано

неравных сторон, сместив точку

движение в двух данных

опоры.

примерах~ Обведите
кружком элемент, который

Говоря о визуальном весе, мы

был применен:

должны иначе подходить к са­

мому понятию веса. Представь­

а) диагональная линия;

те себе горизонтальную ось

б) s-образная кривая;

и центр визуальной тяжести.

Сдвиг вертикальной централь­

в) размытие изображения;
г) глубина резкости;

д) все перечисленное.

ной оси или центра визуальной
The path to enlightenment . ..
тяжести влево или вправо соз­

mabatma c;a!!dy

дает асимметрию.

ThrSl'°l'f"tlк№wTampo
1n-.м-s..-.тampa.FtЗ1660

Не выровненный по центру

макет необязательно сбалан -

70

Добавь воздуха!


сирован. Мы снова должны принимать в расчет визуальный вес.
Положительное пространство визуально тяжелее, чем отрицатель­

ное. Так что большой объем заполненного пространства требует
уравновешивающего объема пустого пространства. Темные тона
визуально тяжелее светлых. Поэтому, если получается много

темных тонов, нужно сбалансировать их соответствующим коли­
чеством светлых. Большие по размеру объекты визуально тяжелее
маленьких и т. д.

Хороший ди­
зайн контроли­

рует движение

взгляда по ком­
позиции. Линии

ПРИНЦИП №4. ДВИЖЕНИЕ
Принцип движения основан на идее, что хороший дизайн ведет
взгляд по макету. Линии помогают перемещаться по печатной

подсказывают,
как считы­

вать информа­

странице или экрану.

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

-

передавать всевозможные символические послания.

Горизонтальные линии устремляются слева направо или справа

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

цию с печат­

ной страницы
или экрана.

или резкого спуска вниз (водопад). Диагональные линии образуют

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

где-то там, на линии горизонта, дорогу. Кроме того, изогнутые ли­
нии передают, например, дистанцию или меандрическое движение.

В действии принцип движения можно увидеть в рекламах автомо­

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

-

это же средство передвижения.

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

В вашем распоряжении могут одновременно оказаться несколько

динамичных линий разного типа

-

лишь бы они не затрудняли

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

Должна быть некая схема перемещения взгляда по странице (пе­

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

еще более популярная

-

круговая (приводит взгляд читателя об­

ратно к началу, и послание прочитывается еще раз).

Глава

5.

Мини-арт-школа

71


Основная цель схем

-

направить взгляд по

макету для получения информации и эмо­
ций. Так что, реализуя эти цели, мыслите
стратегически.

ПРИНЦИП №5. РИТМ
Регулярный либо нерегулярный шаблон

ISHLY

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

1)

в ладоши и танцевать. В графическом ди­

why should i
attend havayah? take
our quiz inside ... р 4

special
events:

2)

retreats, theme parks,
mitzvahs galore! ... р 8

3)

~~:vurot?

actor's studio,
israel, leadership development,
unreal text study,
spirituality & many
more!".p 9

зайне ритмическое движение немыслимо

без повторяющихся элементов

-

это как

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

желтого цвета луны тоже обеспечит рит­
мическое движение. Зададут ритм и колон -

ки, и группы фотографий, и шрифтовое
единообразие. Такой визуальный ритм
не просто создает ощущение визуальной
целостности, но и направляет взгляд от
одного элемента к другому.

Ритм. Сосчитайте,
сколько типов ритма
использовано в данном
макете: повторяющаяся
сетка, квадраты,

звезды, цвета, шрифты
и буллиты.

ПРИНЦИП №6. ПЕРСПЕКТИВА
Перспектива относится к другому типу динамики

-

иллюзии

движения от переднего плана через второй к заднему плану. Суще­

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

1. Линия горизонта. Представьте себе, что вы делаете карандаш­
ный набросок пейзажа с линией горизонта там, где встреча­

ются земля и небо. Эта линия создает ощущение расстояния.
Приближение линии горизонта к нижнему краю пейзажа

сократит воображаемое расстояние. Приближение линии
горизонта к верхнему краю картины увеличит воображаемое
расстояние.

72

Добавь воздуха!


2.

Относительный размер и масштаб. В дополнение к линии го­

Перспектива.

ризонта относительные размеры объектов могут порождать

Перспектива важна не

ощущение расстояния: более крупные объекты кажутся ближе,

только на музейных

чем мелкие, которые воспринимаются как находящиеся вдалеке.

картинах. Все четыре
типа перспективы могут

3.

Линейная перспектива. Как уже говорилось ранее, две диа­

быть эффективными, если

гонали, сближающиеся и пересекающиеся где-то там вдали

применить их к элементам

в точке схода (или расходящиеся все шире по мере приближения
к переднему плану), тоже создают ощущение движения с по­

графического дизайна,

включая шрифт.

мощью линейной перспективы.

4.

Воздушная перспектива. Наконец, цвет и тон могут порождать
чувство перспективы или расстояния. Темные тона всегда ка­

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

в сочетаниях. Кстати, не думайте, будто подразумеваются только

изображения. Того же эффекта перспективы можно добиться
с визуальными объектами и текстом.

ПРИНЦИП №7. ЕДИНСТВО
Последний принцип

-

единство

-

может показаться немного

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

работая на единую цель.
Вы никогда не наденете пляжные шорты и шлепки с классической

рубашкой, с пиджаком и галстуком. В этом ансамбле нет единства,

Глава 5. Мини-арт-школа

73


и человек, надевший визуально не сочетающиеся вещи, будет иметь

несуразный вид. То же и в графическом дизайне.
Макет смотрится как единое целое, если различные его части визу­
ально взаимосвязаны. В хорошем дизайне есть некое согласование,

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

Семь элементов дизайна

-

ваши основные единицы визуальной

коммуникации. Семь принципов дизайна

-

это руководство по

созданию эффективной композиции, будь то фотография или
макет с иллюстрациями и текстом. Дайте сигнал оркестру играть

-

туш, так как вы только что окончили художественную мини школу.

ПОПРОБУЙТЕ ЭТО• • •
1. Что такое тесселяция?

Если не знаете -

узнайте. Как знание

элементов и принципов дизайна поможет вам объснить, что
такое тесселяция, без диплома учителя математики?

1.

Посетите виртуальный читальный зал Библиотеки Конгресса

(http://www.loc.gov!rr!print).

Побродите там немного, пока не

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

объясните, почему эти фотографии вам симпатичны.

3.

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

макетом, который действительно работает. Используйте эле­

менты и принципы дизайна, объясняя, почему макет удачен.
Теперь проделайте все то же самое с рекламой, обнаруженной
в том же номере.

4.

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

информацию и вызывает эмоции

-

или выясните, почему этого

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

Внесите необходимые изменения.

5.

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

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

74

Добавь воздуха!


что такое сетка?
когда она не о бходима?


с

етка

- это горизонтальные и вертикальные линии, очерчи­

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

ваете карту. Страница тетрадки в клетку

-

не что иное, как сетка.

Параллели и меридианы

формируют сетку планеты.
В графическом дизайне
сетки

нужны для

слож­

ных или многостраничных

макетов, чтобы была со­
ADOIJTME

WELCOМE ТОМУ

ONEAТING

ONEXERCISE

tin:m qui Ьli1.on1c 1111 augucro s11n11 lon: nunctn cscctcm \·clcnt la fcugait nosto
ct 11.l1unod olortio nscc1c diena fcu fcu faccum alit, quipн W1mюlobor outat
Dipit nit lum nril utpat, quamc:t, кndrcm 11.i.scilis c~to commy nibb cxcro
conis1. Dolorpcro c:it clit dolon:m \'Ci 1nusto conscqui lin hcn1m d10 conulpu

МУRООМ

tpatio clcnd1p sustrud cuga11 lutcm .unt, sum quis ad m1n hendit atct, quisadio
dunt ulputct ,,..;sau110.tuer iusto od escquamet num dolor«t lon:m 1!11 ad tal.

ON SLEEPING

МYPEOl'LE

WEBPAGE

IЬh ct wismodit ат, vclcnt duismod10 сх и ct utpa11c vulputp;at1a щ murcct
vullamc onscctc t1sl i1111m cuis dcl dunt ,,..;, ntbb cu11am volon: mod1p cxcro
conum dcl cl cxcr autpat prae.s11n cu fac.1 Ыаоn: dolupu.t !а &«10mmy cюsto

dipit lam am, commy num qu1 Ы:.tndip cu f1tip ct wl il dcliscuipsus11sl dolan:
vclisisi Ыandn: volobor pel'llШ "';sadia1e.m пnt la к1l1qu.ttn dolon:.rscn1s ad
cum 1riu.яic duip са faciduisl cugai1 alit ipit la commod ecaiamct nim nis nun
ipsusto cn1s am vcl cl dolon: rмgrшcip exc.nuse:iduisl с.1 cnun:m \'clc.n1bb
cuisi

блюдена общая скелетная
структура. Помимо веб­
сайтов и газет сетки используются в журналах,

информационных бюлле­
тенях, буклетах и рекла­
ме. Даже колонки макета
на все случаи жизни тоже

ЛЬоut те.

1 On Ea1i11c 1 On Sl«pina 1 Оа Excrcitc 1 ~У ROOCll 1 Му Pcoplc

можно считать сеткой.

Представьте себе сетку
как каркас, составленный

Использование сетки.
Пример веб-страницы,

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

в которой используется

помогает организовывать компоненты на макете. Ее линии группи­

се"fка из двух столбцов

руют и выравнивают визуальные объекты, текст и отрицательное

и двух строк.

пространство.

В этой главе мы рассмотрим термины, которыми описывают сетка,

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

ТЕРМИНОЛОГИЯ
Формат. В самом начале работы с макетом необходимо опре­
делить размеры страницы, печатной или электронной. По сути,
границы страницы и есть ваши основные линии сетки. Для многих

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

зитная карточка имеет формат

3,5 х 2 дюйма (90 х 50 мм), а многие
веб-страницы - размер 800 х 600 пикселей. В любом случае формат
определит тип и расположение других линий сетки, которые вам

понадобятся. Кстати, запомните: первая цифра обозначает ширину,
а вторая

-

высоту.

Поля: верхний колонтитул, нижний колонтитул,
боковые поля. Другой общепринятый набор линий сетки

76

Добавь воздуха!


Верхнее поле
используется для выставления ширины полей со всех че­

(верхний колонтитул)

тырех сторон макета. Верхнее поле называется верхним
колонтитулом, а нижнее

-

нижним.

В одностраничном макете боковые поля

1

-

это просто левое

-1- -

-

-

-

-

-

-

-

- 1-

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

Правое и левое

частью разворота, внешние поля становятся тем самым

поля («место для
большого пальца»)

«местом для больших пальцев».

Поля необязательно должны быть одинаковыми со всех
четырех сторон. Так, для верхнего поля вы можете за­

дать размер
и нижнего

2 дюйма (50 мм), а для внутреннего, внешнего
- 1 дюйм (25 мм). Но у многостраничного ма­

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

Определение формата и полей

-

первый важный шаг в соз­

дании макета. Есть и другие типы линий сетки, которые вам

нужно будет учесть: выпуск за обрез, полоса набора/зона

Нижнее поле (нижний колонтитул)

безопасности и обрезной формат.

Обрезной формат. В промышленной печати обрез­

Вверху: Одиночная страница
с полями.

ной формат соответствует физическим параметрам печат­
ной страницы и чаще всего идентичен ему. Так, обрезной
формат популярного в США формата

8

х

11

дюймов

(216

х

279

Letter

составляет

мм). Но в то же время размер

папки такого формата на стадии печати чуть больше:

12

дюймов

(228

х

305

9

х

мм), ширина еще и удваивается, а к

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

Внизу: Линия выпуска за

обрез (розового цвета) обычно
располагается на расстоянии

3-5 мм от линии обреза (черного
цвета). Чтобы не зарезалась нужная
информация, располагайте ее в зоне

безопасности (желтого цвета).

линии обреза и сгиба. Без них может оказаться, что клапаны
буклета загнуты не в ту сторону, а карманы расположены
вверх тормашками.

Линия выпуска за обрез

Полагаем, вы намерены заполнить элементами дизайна

каждый квадратный миллиметр или пиксель вашей рабочей
области. Вы правы и неправы одновременно.

Линия обреза ---~

Выпуск за обрез. Выпуск необходим, когда содержимое

Зона

страницы должно быть напечатано в край. Таким образом,

безопасности

фон, визуальные объекты или текст выходят за страницу.

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

линией обреза. Печатники берут слегка увеличившийся

в размерах макет, выводят на печать и обрезают края, чтобы
получить нужный вид. Отсюда и термин обрезной формат.
Как часть сетки линия выпуска за обрез, гарантирует, что
Глава 6. Что такое сетка!

77


печатник обрежет ваш блок пра­
- г

вильно.

1

Зона

1

безопасности

Размещать картинку или текст
в край или нет

-

зависит от же­

лания дизайнера. Содержимое

Зона

электронной страницы всег­

безопасности
Поле переплета

да размещено «В край». Пусть

текст, видео или реклама на веб­
странице робко останавливаются
в непосредственной близости от
границ дисплея, все равно есть

детали, как минимум фон, кото­
рые уходят «Под обрез». Уделите
особое внимание подбору запол нителя этого пространства.

Промежутки
Вверху: Две страницы, состыкованные друг за другом,
с областями безопасности (желтые). Пространство между
областями безопасности называется полем переплета
(зеленое).

Фоновый шаблон, текстура или

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

Внизу: Фрагмент разворота, демонстрирующий средник

беречь

-

никогда не печатайте в

край теги. Поэтому такое большое

и поле переплета.

значение имеет зона безопасности.

Полоса набора/зона бе­
зопасности. Зона безопас­
aor wt utenie ougnas ms etue \'О

о

em \'etOs

ности

s accum aut uullaor susto doloЬotem do dotore
em quipit ulpulat praessi.

lunuan vu1estrud ounguercilit alisit
\У

num vullaor

QUIOl \•eleut

:JlLQluumat.
nquamdel
tumdelirit
~1 elit iriureeougna augait
;molesed tat,
d dolor illa ate

nonsequ lSse•lorer ат iusci

eet. vetiqui scilit wis 1шUа fac1p exercip eu·:unet duisit vullaor~ si Ыа faciduis et, sisl
olore vulput ad nu.gnis nisi tisit lor susting
umroodo loЬore. doloru scillaore \'tro diam vuUa
eumnюd tat Uptat
eriшeet

dolortis nim qui te eummod dit, qua-

em cr adiamet ueriшe estrud et, \'UJla faccununy
dolorem ad er augait tutet Yent at
ui tie dipsusci tin hent Yel utpat.

11atuniitismod

xeratio erэt auguer sisi еа faciduлt ad do oWt
tem qWsl ute duipiscilit, quam digna consectm del utat. Susto con vullan ех et et "ris am zznt
umsao et pt3eSstd tat. Ut ullam zzritissim in ent
· ат nullunшiy nununy niam ad diat at. si .

Wt \'e1endigna
.ocip euguer

·scil Jandit nulta ac:<:um iuscilis nostrud tio od

diat ех euga.it

это надежная граница

ной страницы. То, что вы раз­

местите в ней, будет напечатано
ip erit "is dolorem num do el ulp\.
motor sed euismod eugiate m
os num nummodiat. Andign.it ute d
ommod tie euis. num do odotoreriU
oreros exer incili.s a1net prat ~at eS!
· а~

.si.

utlan и еа conuJlan vul13ndigna cor ат iusci
um velis15I eu faccumm odigna faci Ыа acip

-

вашей электронной или бумаж­

1ore feu.m oulla consequ 3!11COo.se
t\'Ulputalissi .
duisis ismolor peraese ctetuer cinci
1s :un, volent ше conscd nugruЫ
ui ting ese magna feuш ' 'ehquan1e1
aore tat, conuUa f-acio veliquis null:

taore consectet tоЬос inis ahqua~

или появится на экране так, как

и задумано,

-

случайно не об­

режется и не выпадет из области
просмотра. Все, что выходит за ее
пределы, оказывается под ударом.

Вы наблюдали это явление, когда

смотрели по телевизору фильмы
широкоэкранного формата: здо­
ровые куски по сторонам ори

Средник

-

гинального фильма обрезаются,
Поле переплета

чтобы фильм «поместился» в те­

леэкран. Или вы видели фильмы
после леттербоксинга: в ориги­
нальном формате, но с черными
полосами негативного простран­

ства сверху и снизу.

78

Добавь воздуха!


Зона безопасности особенно важна при
создании документов , страницы кото­
рых стыкуются друт с другом на разво­

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

уйти за сгиб или вовсе исчезнуть по­

сле обрезки. Читатели не увидят и тем
более не считают вашу информацию.

Колонка, средник, поле пе­
реплета. Чтобы получить удобные
для чтения и приятные глазу колонки,
важно учитывать пространство , не за­

нятое текстом. Средник

-

это негатив­

ная область между ними. Многоколо­
ночная сетка чаще всего ассоциируется

у нас с версткой новостных изданий,

но на сайтах, сопутствующих рекламных материалах с большим

Сеткой пользуются

количеством текста колонки тоже в почете. В любом случае, про­

не только графические

странство между колонками не позволяет им сливаться.

дизайнеры. Художникам

Поле переплета

-

это « Воздух» между страницами разворота. Оно

расположено там, где тетради многостраничного издания соеди­

няются скрепками. Поле переплета

-

сумма двух полей : правого

поле левой страницы и левого поля правой.

Юнит сетки, или модуль. в дополнение к вертикальным

иногда тоже приходится
расчерчивать сетку,
поскольку она помогает
им придерживаться

пропорций . Каждый
юнит сетки становится

самостоятельной картинкой

колонкам, сетка может быть поделена на прямоугольники или ква­

во взаимодействии

драты, называемые юнитами . Иногда они отделены друг от друга

с другими юнитами. Также

белым пространством, иногда

сетка незаменима при

-

нет. Обычно мы представляем

себе сетку, разбитую на одинаковые модули, хотя не стоит забывать

«переводе» небольшого

и об асимметричных сетках, которые образуют основу для асим­

изображения на огромный

метричного дизайна, довольно интересного визуального решения.

формат

-

прием

используется в настенной
живописи.

СОЗДАНИЕ СЕТКИ
Создание сетки

-

не бином Ньютона. Не усложняйте . Смысл ее как

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

Сетка обязательно должна присутствовать в ваших набросках .
Начните с типа проекта, который вам предстоит реализовать . Ба­

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

как для создания веб-страниц оптимальны две-три колонки с за­
головком на всю ширину колонок .

Прикиньте, как вы заполните свою сетку. Текста мало или много?

Определитесь с количеством колонок и их шириной, не забывая,
Глава

6. Что такое сетка! 79


ВСЕ О ПРОПОРЦИЯХ
Соотношение сторон

-

это соотношение ширины и высоты телевизионного экрана, кино­

экрана и монитора.

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

4:3. Вот почему

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

Итак, например , независимо от диагонали вашего современного широкоэкранного телевизора
соотношение ширины и высоты составит

16 юнитов в ширину и 9 юнитов в высоту, или 16 на
9. Такое соотношение сторон обозначают как 16:9 или 1,78: 1.
Соотношение сторон компьютерных мониторов может различаться. Но в основном, как и для
телевидения стандартного разрешения , используется соотношение
формат, такой как

4:3 или более широкий

16:9.

Проблема в том, что вы не можете спроектировать квадрат­
ный дизайн и рассчитывать, что он будет хорошо смотреться

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

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

Стандартное разре­

Соотношения ширины и высоты (для США):

шение (SD) ТУ (4 х 3)

Стандартный телевизор и монитор: 1,33: 1
Широкоэкранный телевизор и монитор:
Американский киноформат:

1,78: 1

1,85: 1 или 2,35: 1

35-мм пленка и цифровая фотосъемка:

1,5: 1

HDTV (16

х 9)

что текст должен быть удобочитаемым. Если макет многостра­
ничный,

-

неважно, бумажный или электронный,

-

то с каким

количеством страниц придется работать? На воздушную верстку,

где много отрицательного пространство, уйдет больше страниц.

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

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

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

ный объект большого формата, например в изображение во всю

80

Добавь воздуха!


стену. Чем больше страниц, тем выше расходы. Бюджет позволяет?
Или ваша задача

-

запихнуть десять килограммов барахла в сумку,

рассчитанную на пять?

НАБРОСОК
СЕТКИ

Также вам следует хорошенько продумать, как расположить визу­

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

Сетка начинается от rраниц макета. Теперь вы уже
знаете, что набросок начинают с того, что рисуют внешние границы

будущего макета. Помните, что он должен быть пропорциональным
окончательному формату макета. Соблюдение пропорций крайне

Сначала нарисуйте
рамку той же формы

важно, вы не сможете подогнать квадратный колышек к круглой

и пропорций , что и ваш

дырке , и вы не сможете разместить горизонтальную рекламу в уз­

документ.

кой вертикальной колонке журнала. В мире кино и телевидения
понятие пропорциональности известно как соотношение стор о н ,

или коэффициент пропорциональности . Используйте бумагу

1

1

в клеточку на этом этапе. Помогает.

1

1

1

В зависимости от формата и проекта, от вас может потребоваться
сделать несколько набросков . Возможно, будут нужны наброски

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

с них начинает складываться мнение обо всем макете.

-

~------

1

Затем добавьте поnн. Не забывайте о зоне безопасности. Так,
типичная зона безопасности в печатной рекламе подразумевает
отступ от линии обреза на

1

-

Добавь те линии
необходимых полей.

10 мм. Однако во многих случаях 10 мм

слишком мало для визуально комфортных полей.
Определенные виды переплета, например скрепление тремя коль­

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

блока с плоским корешком, которое мы видим в толстых жур ­
налах и переплетенных книгах, съедает поле переплета и может

покуситься на ваш дизайн.

Скорее всего вы не хотите, чтобы макет был напичкан инфор­

-

1

-

- - -

-

-

-

1

-

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

-1

-

- - -

-

-

1

-1-

мацией чересчур плотно. Достаточно широкие поля обеспечат
наличие отрицательного пространства даже в перегруженном

Добавьте направляющие

текстом макете. Строгих правил насчет полей не существует, но

колонок, соответствующие

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

размеру страницы и,

рекомендуем назначать поля шириной не менее

мере, всегда учитывайте зону безопасности .

13 мм. По крайней

по необходимости, другие
линии сетки.

Глава

6.

Что такое сетка?

81


Добавьте колонки и дру­

ТЬrее_

rие направляющие. Опре­

Rivers

деляясь с количеством

Dentistry

удобочитаемости колонки должны

колонок,

ориентируйтесь на образцы газет­

b~diatric

ной продукции. Для максимальной

быть не менее

50 мм шириной. Про­

изведем элементарные подсчеты: из
ширины страницы вычтите левое

и правое поля плюс заложите не­
много на средник и затем разделите

на два. Полученное число округли­
те

-

это и есть количество колонок.

Если вы переведете пиксели в дюй­

Us, necn1mq\le conseq\lam id шо cupta
vol\lptat omnis vollt1ptat\11" шоd qt1i q ii
conseq11i apit eossi inciisc ipiciooi ipsa
demш qt1e 1шllestia voluptat.
lt qно co11serc lliciшt1santo шaios
sit fugian1 acen1n1 et resseq\le
poreces as dolliquas reiшn qwanda
,·olo i.t1 rerш11 dolorib erci.tn11S at1t
шiligna tatit1rn as i.t1cte11de de tniu\lllore11i.tn et, sitit1sae vol\ltam ''ellant,
q11i i11st odigenclic te1n dol11ptat 111.
enteш

3 Commerce Ave.
ree Rivers, МА 11111
5-555-9876
w. Зriversdental . сот

Ristiatш, quis ipsam ''olenih iliciшo
estib11S q11idi doleaeш eseq1ii шolutat
renш1 harш1t sitiusae vol11taш vellant,
qui i11St ocligendic tеш doluptat 111

мы, то эти подсчеты будут спра­

ведливы и для веб-страницы. Про­
сто умножьте ширину колонки на

разрешение веб-страницы, которое
составляет

72 dpi.

Колонки шири­

2 дюйма становятся колонками
144 пикселя шириной. Или, если ко­

ной

лонки веб-страницы должны быть
разными, убедитесь, что ширина
колонки годится для конкретного

содержимого. Так, если вы планиру­
ете использовать колонку слева для

навигации, сделайте ее достаточно

широкой, чтобы в ней поместилась
кнопка с самой длинной подписью.
Фото в макете© Catalin Petolea - Fotolia.com.

Нестандартная сетка на основе доминирующей
иллюстрации

Вы вовсе не обязаны использовать
максимально возможное количество

колонок. Начинающие дизайнеры
часто задают минимум колонок, что­

Сетка начинается с обычных границ документа и полей, но

бы было проще. Тем не менее, боль­

все другие линии связаны с формами, линиями и элементами,

шее количество колонок дает больше

продиктованными самой иллюстрацией.

возможностей для компоновки. Но

Так как прежде всего мы смотрим на иллюстрацию, и наш
взгляд притягивают глаза человека, эдесь мы и разместим
заголовок.

вы поступайте так, как вам удобно.
Чтобы реализовать задуманное, по­
мимо вертикальных колонок вам,

Содержание изображения (в данном случае визуальный вес

возможно, придется добавить гори -

головы мальчика) помогает определиться с размещением

зонтальные направляющие. К при­

и выравниванием текстового блока ниже.

меру, вы хотите, чтобы верхняя
и нижняя часть макета восприни­

мались отдельными блоками. До-

82

Добавь воздуха!


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

сетку. Проведите горизонтальные направляющие, и

тогда станет возможной любая комбинация модулей.

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

материалы в соответствии с направляющими полей и

колонок. Здесь не может быть ничего непривязанного
к линии сетки. В этом и состоит ее прелесть. Она по­
зволяет не думать о том, как и где разместить текст,

Фото© Catalin Petolea - Fotolia.com

Повесьте элементы дизайна на

иллюстрации и отрицательное пространство.

просушку. «Развешивание белья»

Вы не обязаны заполнять материалом каждый ква­

это техника, предполагающая

дратный сантиметр. Помните: белое пространство

не враг вам. Отрицательное пространство обладает
визуальным весом и позволяет разгрузить макет.

Также оно помогает выделить и сакцентировать вни мание на самом важном

-

целые модули сетки. Попробуйте вынести лишнее
отрицательное пространство ко внешним границам

макета, чтобы избежать «пузыря воздуха».
Сделав несколько набросков, вы, вполне возможно,
решите перестроить сетку. Прекрасно. Это ваша сетка.

-

выравнивание выстроенных на одной
линии, но неодинаковые по весу

элементов по верхнему краю. Они как бы
свисают, напоминая белье, развешенное
на веревке.

на тексте и иллюстрациях.

Вы можете заполнять отрицательным пространством

Это ваш дизайн. Вы

-

В примере ниже элементы дизайна
выстроены в линию поперек страницы

с четырехколоночной сеткой.

Намеренно оставляя нижние границы
неровными, вы создаете внизу страницы

белое пространство интересной формы.

создатель своей сетки.

ДРУГИЕ ПОДХОДЫ
Следующий подход, больше ориентированный на
одностраничные макеты (плакаты, листовки, почто­
вые открытки и флаеры), предполагает, что структуру
сетки задает основная иллюстрация.

Проектирование начинается с того же: с определения

: / {,r,1111,; /

формата и полей. Далее пусть композиционные эле­

l"""""''-'illJw'l'

менты (линии и формы) подскажут структуру сетки

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

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

/ {,(,1'11r.tf _,~
l'crcidunt\W(lll•<>rp

Croi!odolorpi:r scqua!,
qual. Mod modo!or
pcriu,rrudoturat\"Clcnl
am •щ~uс cnmm<>d

croнodo!orpi:r!oequat,

t10n1Cqu1ttmvi:n1m

11on..,qu11cm•'<'n1m

voloЬon:miJш:i.1шa1

•~>lol'юrrmj]u1aru1a1

lmvullu!pn.!lam,quк

lmV\lllu1pra1lam.qua1

U1!orpen:iliquamcon

ei!orrerciliquamcon
•·cnisWtJod"iP"'um

....:nis&litdoduipшm

чшн.

MoJ modolor

pcriu.1rudc1ш.r•"C1tn1
~m cщr;uc

ci>mmoJ

augaitdolo,..
mini•dolorcf.cc"\Jmdolo:>r
•i.Ommolorcconкquat

1eiduissc 1'niguc ...,1сиinк
cocqu.iaclullamconoc
dit...,lctvolci.scctccui
1cmagnibhcufo:uginn
vnit. volor aca.m dunt
lorcmnumzzrili1...,lin
ut1t.\"Craticmodnlorcm

amcoП!e<juis1Jolum>·•I

•m.:onocчui•ldo1um•·cl

7.:иili•lutp1rcmdolorsc

CNCIV5Пlmingi:uguc

cr:ucrosшm1n11:cuguc

dolcsticJioJi•t. L'ivclJo

facipi1uicri1dclulla.:orr

i•ciri1utcritdclu1l•c<>re

Jelc•scd1oн.LTm,·01orsir

niiЬlaoпinimili1iri1

cuiЫ•on:inimi1itirit

adi~afcuissimnulJ•nJrc

au~tdolon:mir:i•Jolon:

•ug;iit dolorc: minis dolorr
liccumdolor1i.

minism<..Jmrкlo,,Jo

facc1.1mJolor<1

\'u1laf:aciliqu1r:ucrinim
vcro:nnosnonsa:tcm
cr:umsanhcndigni•iscrciJ
ipsum...,lutpatipitwis
aliqui•1dioodtcV1Jll1
•Uj.!;UCCm•dololюr•um

dionummynimvcr•i
Era~quislJolun:i11кe1,

/ f.rr1/r1rtj

+

.~r:ucrodolм.lorccxcni•I

doacrsit,qui•lilo:u11:•it
adio11scdo1urpratcri•cuКU"г.itacildioca(a,·rum

doloretatccscquipsum
мnullaorc:ICuminitclis

amct. scndi~im un,
"<:rosriw:dmo1i>rali1,qui
acm'"%Cl'l:ilutpat,•i
OrcJolumqu.itini1oum
in,i:e:'lim•·"]utrг.11.v.:nt
autni>n>efдcummv
ni•irr.vcli1comzиilulla

conscdmolura!iquih1a
ad!at . ...,ndn:con"'"dipit
iraco::icu(l;'i1utat.U1
duntlanutnonulpu1

quipit•rucconullandiaNmiril\afcuiri1ircufcui
Ьlnndoododolorcrat
dclit1orrmin1tc.1cг.ilcm

volorcmin•"Cndipct•"Cr
sumiritlutlum"nacm
oJolutprationscquiЫ1
соnк

Глава

uismod doloЬor

6. Что такое сетка1 83


ОДНАСЕТКА­
ТРИ СПОСОБА
Не все графические
дизайнеры используют

сетку. Многие убеждены,
будто сетка ограничивают их

свободу самовыражения. Мы
с этим не согласны. Базовая
сетка важна для сохранения

единообразия дизайна
в многостраничном макете.

И, как мы уже говорили, она
снимает вопросы, касающиеся
расположения элементов.

Перед нами три страницы
из одной книги. Все они
сверстаны по сетке

3 х 3,

при

этом заметно различаются.

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

Lett:
..,

'CU"C~q..1t8Cl8edlsl)r.!to
"nuAedldDores(:k.*Jt!IS8!'0~

O.C..Jd~~~Sl.N..

Qur nimшanlfllOf dolorem "fX ра t1mt
rol.uptшa quidern ipanum kl mпim ат qW
on1nU- dcЬi~ dUtt qul vnЬ nt' nl!lor lifquJ
ali1Jn1volщ~W:ligt:ndln<Ьcpc"vtlJICOR

poqxнmun aut om.nim qu. ei iш qlIOdl
dolorum voluptш, qWd qut Y\!nd.iuWi no.
volupta qxurk quoam, con cupr.ita 1tmquedokn1h Ulau1 li1 au1 tapliqut pl11 a!flOIU
cquiai: dо!щ рUЬо. H•riO ЬlаЬо~ aurc non
сопv01 na:t•sit11 ~ mil ida.nmw
duntw ..anim, quLi 1 !Ьr.- ~id.-. 1ore te"ndior
aprnwi1 - R&.~ cxrro wd1r rtm а alrмn1m
romri» alit а qщ: .,,,Jum ntw юlupknl odio.

_.t

fup. Nam ahcnimщt С1 mi, Wlml u1 uiЬus
aur 'f'Ofupu voloriЬш ck>lum У\"!11 '1:Drillwn n
pratOr ~arur. qw.1iЬus, °'l\X rqжru сопо
opc<1NS, que- 11ta1lbnrin tщxatnn nam n nim
UI eil' fCl'C'8Ullll
.al.1[

81щt\

ii&orrum. fusa.

«:JWk rlC' .ool.J.u~
omnihin dt'

lu.UЬut--,

dcbш1.Ь.um~rnolon&n1e1t,conк-­

qiu1 audae p~I.

<:- tol« rqw:rovldm1 Шupq1 qlWpd mt.mo:nd&ndx nis n num qw.m. 1nno COllИ'­
(('d Ы.coNCqw.m quod.1 mtcpiWJl"Мiu
quwнur~

Eimim quiЬш, nitac vdt.aui rtш tut щ а im
!Usa. Ut lk eum aulli:oqicdi doJ.im 'tlOtlupcнl
vd.tnl ai.IЬ. quidaum qu:atm' liqllК di quщ
ptdic luя. ur officiи prorm1 d11cm•~
Ьо. ~m
а1..-яц R

n Ltm Nrdm1, conmi adipм doIOrcc
rol.0tq> l!'inupl accmpoti ы.шr.

№1qutы.in1.

ScМu1 v.:lliЬul aur fцg:a. ~upni юlещо wkn·
dJcl 'nlmpora as cipclis dulupra •lnacm
-con ORRk:ndiJ mln11<1 c:on p rcptlV-


fь-.t.l"miJdJ.ikc<to«t.otЬe~lromow

to1tw111rкa1~

~~1емh.м~-.!РЫ

toЪrllf!kl1r1~ptu.aU"tмrlyl~.0ш

&.кuttw D1rкIOr с", doJn. А. JioNDU and
lhankr.·tn·PhiAtph.IThttt.ol~.~
md'-'ulty.forthntU1~11\th8"F"fll't

a1.-tyan.,,,.~-i

Alf'h.aThNn.ltlon8/~•.W...t,

r"n""'ll"'•---1.d 2005/:!00ЬylfJll' Tha

mn..-mDoll CDRWl'В two d.ln pncw 1о d1t'
opm111f! ol tt. AmnY8ll н ~ ~hPn

"tuch•МIOfllthe~"-"ly11.1Ь.::nЪN

~""~tlwnn<>u1мxu.ful

C.C.,~мdwnr-up"rtwAHA;.

IUC0!88fu.l~~Mrown""SoflD"

.......,.,ll)Uml8inttwworld. lna1d1ЬDn.the
orprn.r...ition~ttl>dmt~rp<llllw
~.m.t~llWf"ll"!" Вu1muchofour
~м". м11udmt.•ndt.ni.lt),drvetap.
out о1 f"<:pentncn il'I the c'-room w~ .,...,

~twld

~m&ln80Ml~~1;1r1ltwPAf

111'

c~at

ltwUniwmt\' ol№<v.Ш Lм VLop

"-lthtf1"1~alholм&lhr<;.)u1h"<!1t
~ .... f\l<:h•tu~Jtudtnistror.
Caiifonш. Arlz:oN. N- Маi.:о. •nd Т~ 1

~

PhlAtptwThfta
'JIONO".:tioWlr1y

throuF ltt pwn&!Uw litttori8n.

WO!.llJJik.rtocnroun.pl"Y")OПl!Who~IC'OJ
•l •rrpin.lto~laldngthnrwort.\o

iUI.'

tlw~tloNIШp•J'klr:'f"nlting•ttlwВМennМI

,о1.,.

"°4"'"11'18 ln f'tu~1ptu• (d"№J) inh r-._'\ltl\...

ttw~~ lwt>Uld11krk>~•ge,n.pm­
olfкim. to w\..t tЬе 11'.itWМ! 11'1 d'"'&,p1rч;
•"•t\hatlhrWpttrW..~forlhfp~

O\rector't~\es.lgl')

~olgnt1tudco&Ac'O'W\"J10tlw-.'3l'ldl'rfufl)

fnmd}y md МN worЩ шА .1t lhf rtu A!pha
ThN1'i.tl:ION!Offia.to.Jlltw-..lwnoitlw
PhlAlpNThffil<:.ovnciLto.Allttwf.-ull)"'hn

kmpwd 1О pu,_ Cl.'l'Wfl ~·

"'tlw

N.lt~O(fic:~(~RrJl"lia l.-.honor1ng

illlld wU~ity f;aQJltv P"fntmiorn ln

"'hoiw•1!offi!N'dlnlpПIЬ0nl.l'ltl'К't~
0'8ре llWФЬfnoouki\·~ fortlw*Pbl Alph.I
Thttafaadl)' le.:lwroll.hr'l'~Aw.1rd*~nd
toulJ~tlwthonrw•lth&'.viual1t11Nhor!

-...1"•1.Ыdim.attht:l'tliAtrNТМA

..... ttwco.antn.IOORl)dunng

~Dl5 ltw"my~IO.itend~

tt.. (M1<:tupn.11and.. Southrrn CAlifanu.

OU.Ь.-.

lln<I

tЬе Nonhwnt)• .В о1 whкh

~1Spotttt.IOflOW"Wet.111'. l t11worth

mmtlonln:S lhlL wh1k' room ~11!!1lor1hr AltA
11Wflins~f1Q9Юr.tlllfllk'•nd~l1$hwa

~•'"YlmJ'"l*Oll~".th.tnlcslOtlw~olthr

dou№,

l.кv/ry..Jvw.nwho~ruиd ~ Dunч

о;цvр;иЧ

ltwNorih\'oat~n~g.thcluncheon

~.~thP.dp!l10n.~rJll.fJAon
•• M<.><1UN5tat#Uruwn1tv·В.Шnp.g.i•"•

---

•1'h!A!phalhtt.fтlfndly·~liм

An

~oltu.lll8pinfl&titlkk~iкe.Jintht'

dwrattloiS99J!"'l"ru&)lt buptofO\ll'

f<)I" ltW' l"lu Alph.I ТМА G)nV,,.,ЬOn •1
llvHy•ttRcFilC)-1':rul'$1.ilndln8 1~!08"

""'"""'

Тhм ь.. Ь-..IU'Юthet~ ~ \"Nl'fi)f

f'tuAl.pN n-..1 woWd liJ.to
my-11,

'°~ tNrU.

Ьul•'rJТ~offiaя.h.m.:lшl1n1

WmdYThn5QJJ·~nffкf>-vr.c..d)n

OurNoo..Jconmutilfoft<ln'~ Ь..>
olllworlt~w\fVVl"t:ofourmuit~

l.owf\.~.mdoшк\IOml~fUfttw
~ fou.r ~_..,,.,_., Moor Jaяi;.t vaiu.lf'd

~ont1wotpntUЬ011·sm.1n• COIOtmlt""'°"
.,..J1n.Udwf..:ul1v-8•~.n.J.ш.Jмt
nffк.nwho~tinw!Ddwtrdw~

8onwal м-,.. the prostam will indlkk>

<:Ol"~l111i'"'-~tl--•.....И
w1llЬ.prtntni1nawlV'tl ~~.

•IOW'di.ble~~lкulr.-1

- l u k }'О11 ."m..-v.iflltll8d ID Ьwud ia

}88ial.thi!Ьetoi.lu..."'\.lrlhrrfuм.mdeil"'"

PhiAlph.IThNdfSJ'l'O'llYJr81ffulklltw

~

pictwnoisruм~opeciolli~.-.~

.-Jtlanltl'Wforherk'r'!'!alOOUrhorD'

К.O.тw1111f.кaltvмi~whD-n"tlnnl..,.
~lndd"qu..ned~k>ltonr~hill~

on dм IPJ-'11= of "<;mt~ 1« Tf8dun&
tht f'i.t lf1 lhr T-m-·FIPC Cиltun *

ihot1nrwt',.,.nrtf~fOW~cmtntl

""''~

~·f~tolhfiмnyltuJmtt.f•1'ilY
8dv.-.n,~illndro.nl~whPhillw

IOhopublithed.
~­

Mмlt ~·f«ull)'.ad•1...rfort.Jtorrt)
Unn-·""'"lor2'\-нn

withhonr:nW11h•IL.\.lnH1МDtYf1'Qmtlw

l.:N\lnlt} of5ou!h AonJ.I tht,t\Nr \\olr"'-W.

cnll«tn-d\-Иlh115Ul:.h•9IК•~JW11r

lwouldaitabl.#IDr<wnd mv

torigntuЬЬDni

loPn!tidsllDl.•'ldWn:.h!l.-ldhllwl/l!'J.mtttw1
D• rldlWuoch ·lкullyмtY.....forA~

thrЬtrthollNlrton.DilvidCмl\'t..n!W~

Uni~rurl~y.-.n

..,J_.o.XIOS

\W.Ow.konw1h»hltu~PЬi

AlpN11wtillr1~h.rorfd1
JCarty,,_..f..:ultyad~itol"for

TD"DIUrwVl!Plt\iorlZYNl"ll

J08eph CINdy·&cull)'8dY8111'for
the C.Иlqr oi. Mount Si.int Vinrl!IU

lot24yc;in
A.n.t '11"1'~ wordscl!NnU.m

Prepa.-atlons
are unde,-way
for our Bl•nnlaJ
Conve.ntlon
to Ье held ln
Phlladelphla ln
early January.

ow«ltoGr11vdonA. TuмWtforlus
rontinued~~~on~

ol thr orpnwi!IOll-

l would ~ 1111

~-.....nto•pplyforitw~

Tonst.i.11 A"-;ard. and f.a.liy .dv~
k>tn['OUl'AjJt'thrtr~to~

bl.ttis•~•htd!1soв-J1o

~1NIJIUIIO"rnemЬim.e>k'l'VIC
thlvМfUUf--in~...d
~lnEuroi.-aН!Jtor,·.Furtlwr

onfnnNtion l<lav•U.Ьlr on!Jiv•I Мр
w-·~pN!hrtuq/pмd&.htm.

!/

f8\.tU~,l-'d~IOWmthl!~"\n'IЬon

olttw~·,~."

•

NfWS LtlT~

••

N«WS

:тn

•

В другом варианте данного подхода задействованы размеры как

Вверху: Сетка здесь

самого большого, так и самого маленького изображения по отно­

ломается за счет

шению к размерам макета. После того как вы зададите поля, раз­

поворота фотографии,

делите страницу на максимально возможное, исходя из размеров

самого маленького изображения, количество колонок или модулей.

что производит

впечатление и пробуждает
визуальный интерес .

Предположим, у вас заготовлены две фотографии. В ширину одно

фото составляет примерно две трети от области безопасности и две
трети

-

в высоту. Раз упомянуты <<Трети», значит, мы имеем сетку

3 х 3, которая разделяет страницу на три колонки поперек и на три
модуля вдоль. Но другая фотография составляет примерно одну
треть от области безопасности в ширину и одну шестую в высо­
ту. «Шестая)) означает сетку

3х6-

три колонки поперек и шесть

модулей вдоль. Поскольку максимально количество модулей дает

больше возможностей для манипуляций, выбирайте сетку

3

х

6.

ЛОМАЯ СЕТКУ
Хотите как-то оживить макет? Сломайте сетку. Такой прием может

привлечь внимание или вызвать эмоции. В любом случае это путь
поразить аудиторию чем-то неожиданным.

Заголовок или иллюстрации, напечатанные в край,

-

самый рас­

пространенный способ нарушить структуру сетки. Еще можно
Глааа

6. Что такое сетка1 85


расширить или сузить одну колонку так, чтобы она отличалась от
остальных. Также вы допустимо наклонить какой-либо элемент

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

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

• • •ПОПРОБУЙТЕ ЭТО
1. Сравните веб-сайты и визуальную коммуникацию двух конку­
рирующих организаций. Обратите внимание на структуру сеток.

2.

Попробуйте вычислить зону безопасности для листа форматом

8,5

х

11

дюймов

(216 х 279 мм) для

вашего принтера. Если мате­

риал будет выходить за обрез сверху, снизу и по бокам, сколько
белого поля останется?

3. Вычислите зону безопасности для листа форматом 8,5 х 11 дюй­
мов для копира, которым вы пользуетесь чаще всего. Если мате­

риал будет выходить за обрез сверху, снизу и по бокам, сколько
белого поля останется?

4.

Найдите три примера, где сетка ломается. Определите, как этот
ход помог

-

если помог

-

улучшить визуальную коммуника­

цию (привлек внимание, направил движение взгляда, передал
информацию и вызвал эмоции)?

5.

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

с форматом. Интернет?

8,5

х

11

дюймов? Таблоид? Затем возь­

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

6.

Сделайте плакат размером 8,5 х 14 дюймов, анонсирующий ве­
ломарафон или первое выступления вашей группы. Во-первых,

напишите текст. Не забудьте о контактной информации. Во­

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

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

86

Добавь воздуха!


верстка
расположить максимально эффективно

А STEARNS COUNTY EXTENSION SER

Авоuт ТНЕ WORKSHOP

Maiossunt. Ulparci utatius plit
maxima velen1mus sitatum aut
quam harchil laborrovid moleces
experupta cum et qui dolorem
remamenecto magniminus
naturiore optate voleni am еа
dolesse quassin comnihi caecte
cone solore, sum quas sol-


п

рофессия графического дизайнера чем-то напоминает
профессию гида. Гид организует экскурсию. Дизайнер
организует макет. Оба приветствуют посетителей на

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

-

это расположение иллюстраций и текста в пространстве,

которое и планирует дизайн. Макет

-

это путешествие посетителей

по вашей сетке и живописные виды, что встречаются им на пути.

Дизайнеру, выступающему в качестве гида, важно решить, каким

Начните с фокусной
точки. Фокусная точка

-

маршрутом он поведет «туристов)) и какие достопримечательности

это визуальный старт

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

просмотра макета. Ею

увлекательный тур по макету.

может быть впечатляющая

фотография, иллюстрация,
текст или комбинация
того, другого и третьего.

ГДЕ ЧТО РАЗМЕСТИТЬ
Макет начинается с набросков, и первым делом вы рисуете сетку.

Линии сетки должны передавать формат, пропорциональный
настоящему, и отображать линии полей,
направляющие колонок и другие обя­

зательные или факультативные линии
сетки. После того как вы нарисовали
подходящую сетку, можно приступать

к добавлению первого элемента макета:

фокусной точки.

Определите фокусную точ­
ку. Если возвратиться к аналогии

с туристами, ваша фокусная точка
представляет собой большой знак
с надписью «все самое интерес­

ное начинается здесь)). Это тот
элемент макета, который при влекает внимание посетителей
в первую очередь.

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

формой, цветовой гаммой или интересным углом. Сама

типографика также может стать фокусной точкой. Тогда
используется контраст между некоторыми элементами

дизайна: пространством, линией, формой, размером,
шаблоном, текстурой, светотенью и цветом.

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

точка расположена вверху. Но если вы знакомы хотя бы

88

Добавь воздуха!


'1

_....,_,...,.,. ....

м.a..c.u.i.- - - pk

.......

~11Ьort910d...-..

~-· ... °'*"-

"'-~·he•~

-to~P<t*-~-.­
И""8dl0ir-W:JO~

~)CU'""~~

-к

aat.ill1DЦIO~­

.......... " ....

~-()OIМ»llltlr....t..u

~.

..... lllPlf!d ..... at.aped-

~-

~--­
............
" .......... "

............. "

.,.,,...~~~

~

~н.....,..-~..с

-oun...--ain-i
.(J(Jl' . .....,,... ....

HBMMINGBIRJЭS

AllOl.n'tмl~

А.801JТ ТНЕ W ORKSHOP

--~~"!~

_llpld_

........ """. -ь.­

Maюssunt.

"'dlc.---~·

....,:.pad .....

Steams County Couгthous4!
2222 Couгthouse Dnve

_..,_.""*--"...-

--

"~Qg;,_.,-~
"

.........

St. Ooud. MN 55555

'l'Ollr"I-

Ulpan:J utatJus pl1t

rn;oona velenlfТ'IJS 5'to u.m аи\

q..wn harch l IIOorrcмd moteces
~pta cum et qu• dolore'n
~o~m1nus

COll'Т

nati.riore opme wlent

n.s """""°Р • &ее and орео

dolesse quaяin c04'1'V'lih

to"" publk. rrn
lmrted
'°"'

~ """'!:.
to the
30 regrstnnts.
~
seat today Regmeonline at
W'WYt<.st61mCOIJГ\ty.orglextensюn

D•REC1'10N.!I

Золотое сечение. Золотое
сечение - это пропорция 1: 1,618.

ttaш

moluptJ quIOet:llsque en;s
ea-un ldeJ ipit ао licimo Ьenos
lm Ol.JCJa e!t 1М el.m doh.m SI
'e'ltr"lt арсЮ molut est asped eos
• .,,. <podent

Если оно реализуется как золотой
прямоугольник, то становится своего

рода композиционной сеткой,

ат еа.

саюе

cone solore. sun quas юl­
oreprem. Et anderem exped ut
etus ip5U1'\ quiandrs eos con nam
SI cor se ipitaeperurn m fuga.
А.80UТ ТtlE INSТ'JltUCТOR

ltr.is molupti

earvm tdel

qvideЬsque

e.atrs

1рп. .ю iticiтю Ьenos

1П"1 с:kюа ~rt

lnis et.m dok.m ~
vent apiod molut est asped eos
~ 1ptdent hariЬeaьum volectae optatae Occusam anst. core
re, culla simod qu1 nos int everie
rnaio offkaent aprtat

SТEARNS
COUNТY

предполагающей асимметричное

Ex'rENSION
SERVI

расположение элементов макета.

с азами теории дизайна, у вас есть и другие возможности . Поэтому
мы расскажем вам о золотом сечении и правиле третей.

Золотое сечение. Это просто соотношение 1:1,618. Мате­
матики и ученые в таком же восторге от золотого сечения, как

и художники, дизайнеры и вообще представители творческих

профессий. Раньше ему даже приписывались магические свойства .

Особенной данную пропорцию делает ее математический принцип:
отношение а к Ь такое же, как и отношение Ь к [а+Ь]. В общем, нарисуйте квадрат, и если увеличить ширину квадрата, умножив ее на

1,618, мы получим так называемый золотой

прямоугольник, какие

встречаются в искусстве, архитектуре и дизайне сплошь и рядом.

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

Гnава

7.

Верстка

89


Золотое сечение, реализуемое как золотой прямоугольник, ста­
новится своего рода композиционной сеткой, предполагающей
асимметричное расположение элементов макета.

Золотая сетка опирается на золотую пропорцию, чтобы устано­
вить несимметричную сетку

3х 3

на золотом прямоугольнике.

А это подводит нас
к правилу третей.

Правило тре­
тей. Как и в случае
с золотой сеткой,
это правило под­

разумевает табли NМ! , quaemam valoreot. sumet\.reecla volo
chictium neet) renlenimua del moluptatlslm
вumenem . Nвquam lpsan, q..i omnenl atu
luptattr еЬо . Delgвnecus . vokJptatiae ratiis
8О1о lnclam IUquiam velвs dolвr1sit l~aquat
sitlum sequldusant, sвquas dolupld вste est
od de rehвnirrint1X auta quiaturtand dolupti
rum ilaЬor spuditam, slntur rвptl Ьlandam, t
ев comnim.JS .

Solaccate pra voloreptaque cusdta
с:tв duclat.

natlon par·
la esem. Del lmom гае dlas

3,

х

которая

обусловливает ви­
зуально

essn, quв nis
fuga. Udl
t, sltate dolo-

интерес­

ное и асимметрич­

noeamвndis

tlonвst 1

3

цу

а

ное расположение
элементов.

reptlunt1X re

Et qLi dol.Jptat apid1X1tem qul cone qulaept 1 rion enl cus
reptat atqLie enclignl sequlзlt et еа dere lant tem et
dвstrunt. ВIXltlo . Porume ncn noЬlt fugla qu dвstJo еа
porepel liquatJo lus nest, endaepe.

Правило третей
просто разделяет
макет

-

вне зави­

симости от формата

-

на шесть оди­

наковых

Правило третей.
Дизайнер этого
сайта использовал
правило третей,

чтобы определиться
с размещением
основного заголовка.

юнитов.

Тогда фокусной точкой становится одно из четырех пересечений
линий сетки. Вуаля!

-

приятная глазу асимметрия перед вами.

О правиле третей еще можно поразмышлять в контексте симме­

тричного и асимметричного баланса. Симметричный баланс ассо­
циируется у нас с цифрой два, например, с двумя симметричными

половинами макета, поэтому самый быстрый путь к асимметрии
это работа с цифрой

3, как в

сетке

-

3 х 3.

КУДА ДЕТЬ ОСТАЛЬНОЕ
И вот ваша фокусная точка находится на своем месте и готова
сыграть свою роль, то бишь привлечь внимание аудитории. Теперь
нужно добавить то, на что аудитория посмотрит во вторую очередь,
и это, как правило, текст.

Разметка текста. Размещение и разметка начинаются со
вставки основного текста и простых заголовков; другие типографи ческие элементы, такие как подрисуночные подписи и контактная

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

90

Добавь воздуха!


После того как вы выбрали, где
разместить текст, можно присту­

пать к стилевой разметке

-

ТНЕ

подо­

брать правильный шрифт, размер
и цвет. Проверьте, не забыли ли вы
случайно часть текста. Из-за после­

lSLAN D O F

SANTORINI
Et erum in recace lic rem. ltas incriurn
hillesr, ommolo eum rcmpore nihicidipsum veni sir am quo voluprae
ma as maionsed quodi andi des
dolorepcas earum solupta nullaЬo.
Cesr ех eum volorem odirate.

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

Aquariume endandae поп corumento
ex perovir рее debls maiorro viderovit
ducim quarquamusam fuga. Axirllinirn olor aJias is et atque est, soluprarqui
siribwa nis ut laur pedirae sitaqui
nisque cuJlenimet magnamuscid
magnis dis qu.iae.

Вот еще советы по разметке текста:

1• Заголовок и лид должны состав­
лять единое целое.

2.

Уменьшайте интерлиньяж в за­
головках, занимающих две и бо­
лее строк.

3.

Разбивайте текст на колонки,
чтобы длинный текст оставался
удобочитаемым.

4.

Избегайте выравнивания по
центру и по ширине.

5.

Следите, чтобы не было некра­
сивых переносов.

6.

Фото воспроизводится с разрешения Кристин Арнольд Райль.

Избегайте висячих строк.

Размещение визуальных
объектов. Помимо иллюстра­

ЕСЛИ ТЕКСТ ЕЩЕ НЕ ГОТОВ?

ции, служащей точкой фокуса, у

Это обычный вопрос: что должно быть готово раньше

вас могут быть и другие визуаль­

текст или макет. В идеале дизайнер хочет получить весь

ные объекты.

текст до того, как начнет работу над макетом. Однако,

1•

Располагайте визуальные объ­

-

возможно, босс или клиент жаждут увидеть дизайн, прежде
чем предоставить текст. Возможно и такое, что райтеры не

екты вверху макета или близко

могут начать работать над текстом, пока не узнают, какое

к верху. Размещение фотогра­

пространство по объему необходимо заполнить. Что де­

фий в верхней части макета осо­

лать, если вы не в состоянии сделать макет без текста, но

бенно важно. Фотографии

не получить текст без макета также не удается?

-

это магниты для взгляда, и если

они размещены внизу, то немед­

ленно увлекают вниз за собой
и взгляд, и читатель уходит со

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

страницы, пропуская нужную

информацию, которую вы хо­
тели ему сообщить. Означает

и не несут никакой смысловой нагрузки. Эти слова могут
быть на реально существующем языке или «псевдогре­

ческом».

«Lorem ipsum» -

тарабарщина, не имеющая

ли это, что никогда не следует

значения. «Рыбу» можно форматировать, как и обычный

размещать фотографии внизу?

текст, поэтому это хорошая временная замена настоящему

Нет. Но ...

тексту. Она позволяет вам продолжить работу над макетом.


2. Если у изображения есть направле­
Faculty Spotllght

ние, убедитесь, что оно направляет
верно. Мы всегда говорим студен­

Raising the Bar on Legal Education
д,.
~

doleui.
Eaenim

"""·

iduлt

venit
laoril
eaerat.
Oвtio

delit
aldido
dolorer
adipeum
nonsent
lоЬо~

Okr'tir!!ЩlatUlullaleuQartesecleniЬhersl\.~ipi'!ipeuguedolcм'si..rnmo:lrt vulla

:~~=:ro~m~:i:=:a:~~ ~f-:
OdoloЬorem

doluptat 11.ci Щ nullan
heniL ut aut prauenit do en. aciliL
velnto commod tinibh e:r. eueni1i ti.n
vel'Oltin.iam do conetue Гacilla at dolore faci еа fвcililim in veleetie enim
noмed dolon! tati11 etue volortie tat.
Eaequat ullan velit, consecte delit
vulput niai.m at. Ro dit dolortio odoleмctem

autem nullutpat. Ut lum·
undn te te min henieim eugiam,
cor aliquat. Dui11 acaun ad dolortinis
diat ipiaim quis num illupt.aL, con
hendion sequat.

Gait
luptat iriliм ecU!tue volor sed cUt
adia.m i111' er acililliln veroe eri·
uвtrud magna соnве commy nulla
Гacxumaan elie niaciniacip et, 1uato
dolwnmo loreetu eraeaed modo odo.
lor suatrud tet num eaed eaenмi ПО8
dolenia.met veraeu enia.m, velent
aciniat volor aJit w:iAcilit euipi•i
ldunt adipa fattu.mmy ПIШ'I
iureraeetio еа feum quat, veliqui eu
feu feugiatet nummy nuJput vu}.
laor periustie con ut wi.ui Ыaoreet
aliquam volore tat, sit ut la facin

"·eniam. весЦ! moloЬortie eating
er11easit, conвenim ipiвl utpв.t., qui
tatie tie r11a::um1 11ndreri uscipiв
moloЬor sectem de!Ui eummy nulputpatie delenim quam quia dolore core
mqna 11diamco mmodolorer iuatie
d.igna rac:ilisi.
Modolorti1 dolestD OOipit, quat.
lm iliqW. dunt lam volor ве vel
iu.trud et aug11it, vulput iu.trud
eu reum irit wiв n.Jt eu raci:umмn
et prвt. Ut volorpero el"tlll amcortiв
a.m, vel ulla reu reumв.an henim
velesectem nonullandre conum am
eщiвit veniamcommy nonaequiвci
ent doleatie mod magniв ad.io odi·
a.moo nsenit lu.m autat. Rit n011 ad
t.atueru et amcon vullaoreet, sequiai.
Faci. eatD en.Jm 11d.iat. lrit wi1 dio
commy nulla auga.it d.ipi1i1 вlit. aut..e
euiвim inв eugiam dolorero commolortie mincinci tiв ndmodigna aci et,
verit nim qua.m dip et аШ amconвed
ent nim accum nu.m aJit la aci t.at.
Rat. Cu.m dit. la.met, commolupt.at. То dipiвl digniв niв duiu.enim
doloreet, quia niam ad del erri tinciliqui tio eniв a.met aut lummodolorer aim
et. conaequat.e dole8ed
ming eвtio eum mat. Ов alili eleв­
tionuJla racip eu faccum ewn nul·
laoreetum еlме racipit veratue del
ut irit \"eliquat, con hendreril eui.I
ama.mcon&ed. dignia.m cmuequat wi•
nim voior@ min noru dolore molor ве

zzrit

там: <<Изображения

-

это указате­

ли. Убедитесь, что они указывают
туда, куда надо)). Если у фотографии
или иллюстрации есть заметное

направление (динамика отдельных
линий или лицо, повернутое в опре­

деленную сторону), убедитесь, что
направление согласовано с сопут­

ствующим текстом

или другим

элементом макета, принимающим

эстафету визуальной экскурсии.

3. Зеркальное поворот фотографии плохая идея. Возможно, эта мысль
кажется вам привлекательной, осо­

бенно если персонаж на ней смо­
трит «Не в ту сторону)). Зеркальный

Вверху: Пример вверху иллюстрирует несколько ошибок:

поворот фотографий недопустим

не надо делать узкую колонку справа от изображения и не

в новостных изданиях

надо размещать фотографию так, чтобы она находилась

-

совсем!

-

и хотя он может быть использован

между заголовком и лидом.

в рекламе, вы все равно рискуете на­

влечь на себя неприятности. Никог­

Внизу: Уффф, так уже лучше.

да не поворачивайте фотографию
с текстом

Fвculty

Spotllght

-

причины, как мы на­

деемся, очевидны. При зеркальном

Raising the Bar on Legal Education

повороте фотографии известной

o::~:~:i:':::tt

личности характерные черты лица

reum iПt wi! niL eu
faccum.u.net prat.
L't volorpero еrов
amcor1.i1 am. vel ul1a
reu reumaan henim
veleaect.em nonullandn c:ooum ат
faciliвiminveleвt:i.eenim
euga.it '-eniamcommy
nonaed dolore tati1 etue
noneeqUl.ICl ent
volortie tat. Eeequat
dolмtie mod. magni11
uJlan velit, conиcte delit
adio od..ia.mm naenit
vulput ni8im at. Ко d.it
lum aut.at. Rit nов ad
dolortiood.oleaect.em
t.atuero et amcon vul11utem nuJlutpat. Ut
lao~t. RqUisi
lumвandre te te min
Facit1:11tDenim
heniвim eugiam, cor
adiat.. Int wU d.io
aliquat. Dui8 amun 11.d
cummy nu..lla •uga.it
dolortiniв diat ipiвim
Olortin utpat. U\ ulla leugait ев1 Er"lilrl f1 sit. '.tllessendit ipit ip euuue dolor sunrrcd:t d.ipil!lil!I alit aut.e
quiв nwn illuptat, con
eumm ing 1Ng1a.m
adex8UIТ1fТ'alolorperoOO~qi.eroconYelismokJ'sect8!Тlnulafeu;iiatat.9Зi1
hendion вequat.
dolon!ro commoloм.ie
nu~ iustJцl essis с1оЬ'е minЬ'l eugait illacre dolore magni:S auфatie C01Щ.1iSi er
Aa:um doleмi. Ех
miлcinci ti! nia·
alitadl
enim niaciduлt venit
modiJna 11ci et, vent
laor il uвrat. 01tio delit aliв do doreu reugiatet nummy nulput vulnim quam dip et aJi1 a.mco1151!'d ent
lorer ad.il)8wn nwn nonsent loЬorem
laor periшt:ie con ut wiмi Ыaoreet
nim accum nu.m alit 111 ac:i tat.
vulla commy nuJluptat.
aliquam volore tat., sit ut la facin
Rat. Cum dit lamet, commolupGait luptat iriliu ~tue volor
veniam, aecte moloЬortie eating
tat. То dipisl dignie ni8 duiuenim
вес!. d.it adiam ing er acilisim veroa
eraeuit, eon.вenim ipiвl utpat, qui
dolo'"t, quiв niam ad del erd tineriustrud JD8il18 conae commy nuJla
tat.ie tie faecums andreri U8Cipi!I
ciliqui tio eni1 amet aut lummodoraa:um.вan eli1 niвciniвcip et, IWltD
moloЬor aect.em deliв eummy nuJput· lon!r sim и:rit et. con.aequat.e dolesed
dolum.mo lonetu eraeвed modo odopatie delenim quam quia dolore со~ ming eвtio eum diet. 01 ali1i еlм·
lor 1uatrud tet num евеd eul'OI nов
magna adiamco mmodolorer iu.tie
tionuJla racip eu fattum eum nuJdoleniamet veraea eniam, velent
digna raciliвi.
laoreetum eleee facipit veratue del
aciniat volor alit wUcilit euipiвi.
Modolortil!I dolмto od..ipit, quat.
ut irit veliquat, con hendRril eui1
ldunt ad.igna rattwnmy num
Im iliquiв dunt \ат volor ее vel
11.diammnaed dip.iam. conщuat wis
iureraeвtio еа feum quat, vвliqui eu
iшt.rud et aupit, vulput. iu.trud 1t1 nim volore min veru dolore molor ве
ut aut praeмMt do eroe
acilit veluto commod
tinibh о. eueniai tin
veroвtinia.m do co~tu.e
racilla at dolore faci ев

могут быть переданы неудачно.

4. Всегда размещайте фотографию так,
чтобы она не прерывала текст и не
мешала чтению. Нельзя ставить фо­

тографию, разрывая ею строку или
колонку. Другая распространенная

ошибка

-

изображение между за­

головком и лидом. Размещение ил -

люстрации по центру колонки без
привязки к линиям сетки

-

еще

одна распространенная ошибка,
ведущая к плачевным результатам.

5.

Когда задаете обтекание текстом.
убедитесь, что колонки получаются

не слишком узкими, хотя бы с дву­
мя-тремя словами на строку.

92

Добавь воздуха!


Использование

Если иллюстраций много ...

1. Один размер или разные размеры? Если у вас больше одной ил­
люстрации, пусть будут разных размеров, и не бойтесь, что они
станут соперничать друг с другом. Основная иллюстрация

больше всех. Контраст размеров

-

-

это интересное решение,

оно помогает выстроить визуальную иерархию.

2.

Пожалуйста, соблюдайте баланс. Если на одной печатной или
электронной странице у вас несколько изображений, разме­

нескольких

иллюстраций. Если у вас
несколько изображений,
размещайте их, сохраняя

общий баланс макета.
Контраст между размерами
изображений создает
приятную асимметрию.

щайте их так, чтобы сохранить общий баланс макета. Избегайте

Оставляйте отрицательное

перекосов. Представьте, что вы сажаете людей в маленькую

пространство, но следите,

лодку. Что случится, если все сядут на одну сторону?

чтобы оно не было
ограниченным со всех

3. Фотопортреты. Если вы работаете с несколькими фотопортре­
тами, они должны быть одного размера. Для оптимального вы­
равнивания масштабируйте и ориентируйтесь на уровень глаз.

сторон. Между ним
и внешними границами

макета не должно быть
ничего.

Где оставлять отрицательное пространство. Мы
верим, что к настоящему моменту вы уже поняли, что белое про­
странство

-

не враг вам. Оно структурирует, отделяя элементы

друг от друга и дает зрителю возможность отдохнуть и избежать
перегрузки.

Но даже на белое в макете распространяются правила верстки.
Старайтесь собирать маленькие островки отрицательного про­

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

93


ПОРЯДОК И ОРГАНИЗАЦИЯ
У вас есть сетка, точка фокуса, заголовок, текст и

1-2 иллюстрации.

Пока все по плану. Но это еще не гарантирует, что у вас получится
увлекательная визуальная экскурсия, достойная записи в дневнике.

Автомати­

И тут немного гештальтпсихологии придется как раз кстати.

Гештальтпсихология. В начале ХХ века немецкие психо­

чески и бес-

логи изучали процесс восприятия объектов человеческим мозгом

сознательно

структурирует и упорядочивает наблюдаемые объекты. Были вы­

и обнаружили, что автоматически и бессознательно мозг упрощает,
явлены специфические шаблоны восприятия, которые получили

мозг упрощает,

структури­

название гештальт-принципов. Четыре из них представляют осо­

бый интерес для дизайнеров.

1.

Близость.
Объекты, сто­

рует и упо­

ящие

рядочивает

рядом,

мы восприни

-

маем как одну

наблюдаемые

группу. Част-

••••
••
•
•
••
••
••••
•••• •• ••

ный принцип (общей судьбы) гласит, что объекты, движущи­

объекты

еся в одном направлении, мы относим к одной группе. Круги
слева на рисунке мы считаем принадлежащими к одной группе,

а справа

-

к двум. Возможность группировать объекты помо­

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

2.

Схожесть. Мозг группирует стимулы с оди­
наковыми свойствами (элементы одинако­
вого цвета или формы). В данном примере
мы группируем квадраты с квадратами,

а круги с кругами. В дизайне схожесть ис­
пользуется для создания единства, так до­

стигается порядок и организованность.

3.

81188
11111111
81188
81188

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

Справа взгляд следует по волне через А до звезды. В ваш макет
этот принцип может привнести направленность и динамику.

94

Добавь воздуха!


AЬout

the Center 1 lnзtructors 1 Schedule/Feeз 1 Newз 1 Events 1 Volunteer Opportunities 1 Мaps/Directions 1 Home Page

~ml~~~'8·!1~/
..,.,.._..

Ьоеt\118 \/ОЦ)V, utate" oa:un -

~lur. utootetoul """"""· - "
nonol ...... kUltlo8I <W .а \llllquoln ер

""'*"

---~--....,

\/ОЦ>1818t11А11- ... ....,, nonecli - -

dilnl orrmodlo - - - ~811"1 ..... - - " " ' om ll'ljla- nonom lo~­

---""'**

_Nt.,..,,.__~....,.... Мо

4'А "' .... _ , i , 1'11 ~
~ ..... ll*lolo od ul"""" - - ....

od "*"'181• ~· ~.., i 11 elurn . . .

Classes for Adults

Classes for Kids

Drawlng

RЬer

Llfe Drawing •

Вeginning Weavlng

t11Т1 -

"'е11Цj1оо CЦ)lcal i8ul quom NI ld
._,. ро1с hl8 m8>dm - . . . . . . od quom сµ

out8llurn nocatuodll c.-n, ~ tll1"1. ~·
~-... .... УW18С11Ш1 А1ЬJ11 ~.
~ мquoo

•

8atik +

Plllnllng

watert:o1or Рв1nапg • •
Aayllc Palntlng " .

.........

*

MlxedМedla

Вeginning Ceramlcs •
Making МOЬlles • +
Мosalcs from Fooncl OЬjecls •
Gllm Вв1 Jewelry • • •

Вegmklg Plюltq8phy.

Studlo Llfi1ang

*

P8lnllng

..,, - - " twclW 81, ;oUтq.11 о1 doЦ>llll 8ul

olR8l8.,. 81'*'""rorttanomcon,..,,_188ct•

Arts

wа1егсоа Pailang " .

Classes for Seniors

Pho""8Phr

MlxedMedla
Вeglnnlng Ceramics •

Вeglnnilg Photognlphy •
Mllldng а Plnhole Camera •

ollli<rn cµi luo otuo.

Plllntlng
wa\8rcolrж Pailang " .
Acrytlc Palntilg " .
Classes offenкJ вt the following iellflls: •

Вeginner

+1nllimledilltв

*

МtвflaNJ

ГЕШТАЛЬТ В ДЕЙСТВИИ
Близость. На этой веб-странице есть иллюстрация, элементы навигации, заголовок, основной текст
и три разных списка. Следовательно, зрителю предстоит изучить семь различных блоков. Но благо­

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

основной текст и группы списков.

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

-

часть единого кластера опции навигации. Схожи друг

с другом и три списка.

Непрерывность. Буква J в «Join us)) подводит взгляд к лиду, затем мы следим за невидимыми
линиями сетки, которые соединяют воедино элементы веб-страницы по вертикали и по горизонтали.
Основной текст выровнен по верху списков, размещенных в рамке. И так макет ((ведет)) читателя от
одного элемента к другому.

Замкнутость. Заголовок (<Center for the Arts)) состоит не из букв. Строго говоря, это отверстия
внутри буквенных форм, вырубленные в иллюстрации . Мозг заполняет пробелы, и поэтому мы вос­
принимаем их как слова.


Carol & Frank Morsani Center for Advanced Healthcare • USF Health Pavilion South

ENHANCING

ТНЕ

PATIENT EXPERIENCE
Patients will have the option to:
• Rcqucs1 appoin1mc:n1s onlinc: with queнionna.irc:s guiding
thcm 10 1hc: righ1 placc:
• Complctc: regis1г.i1ion, mN.io:a.I information, HIPAA, and
mcdio:a.I ~rds n::lca-'C' onlinC' al tЬc:ir convi::nic:ncc
• Rrquc:s1 rcmindc:n via c:ma.il or phonc: and rccc:ivc dircc1iшu
tohciliry

checlr. in 24 houn prior 10 visit and prin1
appoin1mc:n1 'ummuy

• EJecrronicaJly

~
•

__::_:.....-=:::==:!!••d

С...01 &: Fnшk

Monaa.1 Ccatcr IUr ЛdY&Dced Health~

At location, patients will find:

4.

• Mariy 5~ialty кrvicc:s al onc: loa1ion, with the apabiliry 10
Шit:dulc multiple appointmcnu in onc day

няем имеющиеся пробелы и

• VaJc1 carpark.ing
• Concic:rgc 10 ~t and dim:t p01titnrs to appropriatr officc:

•

Ассе55 10 ТVs,

Замкнутость. В уме мы запол­

computcr sa1ions,

wi~le:s11

завершаем фигуру. В данном

c;i.pabiliry

• Кiosk aV2ilaЬl1: in wa.iting room, whcrc paticnt сал ор1 10 sclf
check-in, confirm cm:ii1 иrd paymcni. and clo:-c1ronicaJJy sign
documc:nts

примере мы видим звезду, хотя

a.IJ

контур звезды не нарисован.

• Scrvicei. brought 10 paticnt, iлcluding in-~гюn алd vidro
consults wi1h spccialists

Мы изображаем только часть, а

• Samc o:hy n::iulu and follow-up o.rc

восприятие читателя восполня

• Prnonaliиd p<1.ticn1 ~uc:ation iл our pillirn1 lib~

ет недостающее, и в результате

USF HeaJth PaYil.io11 South

•

USF Hcalth Ь...., ш...,....~ tаш app...W.
ю diиue .....up:ma11 aad prnmdoa ro cn-

ate a llkloч panacnhlp witЬ oar puic:aa with
inaased quality ud safay ud 1uperior кrvice.

он видит фигуру целиком. Это

Patient follow up:

открывает нам широкие воз­

• Тimcly n:::sults rcportrd алd aV2ilaЬlc for n:viC'W on-linc
• Follow-up caJls and

su~

to cha::k paticnn progrc:g

можности создания компози­

• Pa1icn1 u.1isf.1.C1ionsurvtyviac-mail

1

1

-·
Н

F.Al.TH

Check out our new

-

ции на основе взаимодействия

• E-visiь алd c-mail com:1pondcnce
• Cum::n1 hcalth upda1cs and information ~ c-ma.iled to

положительного и отрицатель­

thcpa1icn1

• Appoin1mcnr rcmindcп 10 schedulc no:r aлnuaJ cum,
orothcrscrvic.es
1

Ac.cz:55 10 paticnt and &mily

~ АЬШrу 10

1"\сmЬеп'

ного пространств.

medicaJ re:ords

corrcspond and follow D.mi1y m(mЬc~' hea.lth

Применяя гештальт-принципы, вы

• Accns ro suppotl gruups

облегчите своему читателю путе­

weЬtfte

1t www.m~h•11thcar1.u1f.edu

шествие по макету.

L'OO' ___________

1

Создание иерархии. Визу­

альная иерархия с взаимным расположением элементов и кон­

Визуальная иерархия.
Заголовки различного
размера образуют
визуальную иерархию

трастирующими размерами

-

еще один способ провести зрителя

по макету. Благодаря ей зритель знает, какие части макета важнее

остальных и на что надо обратить особое внимание.

даже в том случае, если

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

макет содержит большое

по степени их важности. Самый главный элемент

количество текста.

ная иллюстрация или заголовок

Приводится с разрешения

USF Health.

-

-

обычно основ­

становится фокусной точкой.

Если элемент расположен в верхней части макета, это говорит о его

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

множество разрозненных материалов или блоков информации раз­
личного характера. Лучше всего она заметна в газете. У передовицы

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

96

Добавь воздуха!


МНОГО ТЕМ НА СТРАНИЦЕ

МОДУЛЬНАЯ

До сих пор мы рассуждали преимущественно о макетах, по­

ВЕРСТКА

священных одной-единственной теме. Но что если ваш макет

должен включать в себя несколько небольших материалов на
странице? Упорядоченный макет с несколькими материалами

на одной странице или на нескольких страницах

-

это форма

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

Модульная верстка. Современное веяние - использовать

ЗАГОЛОВОК БУДЕТ ЗДЕСЬ

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

-

в сет­

ке страницы. К журналам и веб-сайтам это тоже применимо.

Придание тексту прямоуголыюй формы. Материал состоит по
меньшей мере из заголовка и текста. Иногда есть еще подза­

головок, расположенный между заголовком и лидом. Между

подзаголовком и лидом также может быть строка с именем ав­

ЗАГОЛОВОК БУДЕТ ЗДЕСЬ

тора статьи. Множество статей сопровождаются фотографией
или иллюстрацией с подписью.

Каждая часть статьи

текст

-

-

иллюстрация, заголовок, основной

представляет собой прямоугольник, который вам

надо разместить в общем прямоугольнике, отведенном под

всю статью. Такой вот своеобразный пазл.

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

порядке. В идеале порядок таков: иллюстрация, заголовок, лид.
Вот несколько полезных советов:

1• Основной текст. Залейте текст в колонки сетки. Выровняйте
колонки по высоте, распределяя весь имеющийся текст.

Колонка более

25

см

-

слишком длинная. Менее

5

см

-

слишком короткая. Какое оформление статьи получится у

ЗАГОЛОВОК БУДЕТ ЗДЕСЬ

~

вас: в одну колонку или в пять колонок?

2.

Заголовок. Расположите его вверху статьи. Ширина его
должна совпадать по ширине с группой всех текстовых ко­
лонок под ним, он накрывает их, как крыша накрывает дом.

Дайте заголовок крупным кеглем, гораздо более крупным,
чем текст.

3.

Подзаголовок. Если он есть, ставьте его между заголовком
и лидом. Он мельче заголовка, но крупнее основного текста.

4.

Строка с именем автора. Если автор статьи удостоился от­
дельной строки с именем, вставьте ее между подзаголовком

и лидом. Дайте имя автора шрифтом скромного размера.

ЗАГОЛОВОК
БУДЕТ ЗДЕСЬ


5.

Иллюстрация/фотография. Расположение иллюстрации зависит
от ее размера и направления изображения. Как правило, фото
ставят в самом верху статьи, потому что изображение притя­
гивает к себе взгляд. Но изображение, как и фокусная точка,

Модульная верстка.

может находиться и под заголовком или справа или слева от

Статьи хорошо

него. Но никогда не ставьте иллюстрацию между заголовком и

вписываются в сетку

лидом. Никогда-никогда. Если у изображения есть направление,

благодаря своей

оно должно указывать на статью. Куда бы вы ни поместили

прямоугольной форме.

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

Weekend

The

Florida

Gazette
_ _ _ _ _ _ _ _ _ _ _ _ _ _"___ ...,,,.m........
",.,.._
...._ _....,........
ы"

_...,,fl.oridaguzne.com

а

...,,,
___

"wю,,,

*""-"·~,y:c:::o;g;g_,

6. Подрисуночная подпись.
Как правило, ее ставят не­
посредственно под изо­

AIЖZ

Fnd.i.y. ;..lowmЬer

З,

2006

Local artist wins "Best of Show"
Us1oodюod1p1l•'<':~uL•

под фотографией должна

что и фотография.

Верстка по модуль­

rcwnipi1num:l.8netl•f.к:•r.~c1:
rкini•n. ~i! 1"r...~n ,~,. "'

Ыockbusters

ло, но не всегда. Подпись

быть такой же ширины,

ttwn •·ullan eugua 8di.am i"'idun1l•COfcc1inl:SUlldet8d 1.;11
Upw.. Ut 18rricon hnнm ilil ad
dcli•dodolarsi
Twn iliqu1• иipws cмlu1s doloЬtorc mi"'i1i1. ~im zлi1. qui c>t
nc m1na e.'{cn:I eum и.r1~1.
s.cq11111ui:mingn1oi:t.5<."llcu

Museums
gear up fo r
summer

бражением. Как прави­

ной системе. К сожале-

'ICClcc,cl•C"11ш~<11c~ч11a1c

IC:u rOIC(ummy flUllll>C <J<.>kfl1_..,

Tot'1.~f.a:,vn1тщn,;

•·olup1•111Cminae81f3l:o;urninк

o:лimdolol:м;.-wr11s;шdmi1

dlmtUf(llflJCIXpll l16-

m.>Slr..J lll! IOl'ai!a't"CI U11COП­
lot'CICl Yel ipC'l illcugj81 "i••lit

нию, верстать статьи по мо­

til i l(U1r1)mod1pitnl!orюn

niЬhncusi811Ct.~•i.

дульной сетке не так просто,

c:sannum ,.и i~1 I ~ am,

An:umиrilitaminibl1n

\rn1ldddOO~dl1lutc

~csriD11Кncroc.1rxip11

смs.: min

\l\ltsequ.ll iliqщt

prкstrW. dolorpcnв

1р с:х ~

w1 dul11tpal1rum

vohip\al,cons«lt'l,.jcurм:ili1

cl ut •111 iril

\et11m+riliqu.tt~deli18d1a1

ipcиriliniЬhCl.q11811'1Cruc~el

tliquisaciduntlll l~1mм.
Vulluиt. \1{$.'i bliМW QТ1
\<:liurtmq.iiismodta11ncil·

aJpil а.11 \-nll CI IUI lrit l<W'e
erit .ul cn:idui Ы..m: Cl<C~lic
l'cum iril!utnuJput;lo/;!mllJ'liam

qu1t11r'IOl'l.Ч\ju1~ilulputp;i.tcн>l­

omndit.<1ui:unolup1.11ni1pr.11..:
do odolor ;ii;.:umы nJillmcon...ed
181. U! &с1 curn t'\I roкcwn~ cr

\'Тll~~etlor11m•crill

commodiJ"'11S1.n.idmin.:in•clcnimdolmic•clC111S;al'l;iccumп.·

at ld et. '"1dun1 niatumli1
t111U1н:'D1mtu1pi1lon:r*'11

nun:mitgna;ilum1n•·cn1•ug1am
qt.13t. M111niЬh e11guc mo~oЬorc

dolomn dokwt: 11;~ам

dnlohorcminu1cd111corl.М"ll<3lll

(,-ucaan1,я

\OIOl"t"IТ1dUПIUlfЦ(!,!1im\Clul­

(i111-non1,,..n.dr\.-.:1
luta1lc 1111d 1!15 dulol" ipi~

pulCln•ul.:п

110r1SL-nt1u\L1f,>uga1tcham,
atJS1rudct.-iЬЬn1okж

-.liantrorcrcip11n1sinod
modolum sмdn:ctum nvl·
l•imS11nhtn111pi1 iU!!Cina
niini*'t\c:ui,•1.lgUl:fl)l\\isi
bla~1mw;t!utp;itua

Если вы подгоните все статьи
1ure m1ЧJ111am LUJI adi8mcommy
n1m.-cliqt.1111em nil>hc1"'i!l.'i
'\tt>d11 ipi,a11si1 n1m noo cr~11Ju
mmo!Of'<'lt:I ([С m.:.:l:onu 11111J:81
R111n aJ fcui_""i ii'{\l'llJ'~ (>f'<:l'l:1li1
•olotsili11JC'1.1"1.lldm1n•cli1
l<1f1Wl.a.tl:sdi:imdo:JC11tull.;i
r""...., tnlЬhC'1'1nhcт!Crcr .... 11e

lupt11tl1№.1m)~1a11
el*-odroюdi1uJID.m1ull:i

conscquar,1-.:111.1-ul'-'r

как вам могло показаться.

...... lurpcroik>lupt.;il.

Vtl.Jipt!dtpLl.l~licdolor
щU81rnU1\Clitn1salC'llorn:1

разместите их друг под дру­

§l;\:\C tl J1JП-1 fC1J11t~1

L'nt..Jiam IJ">Ш" •ull.nнт,..,
nom ~J.a"'" С'ТТ1

Ou>n~om

С~••

гом, читатель заснет. Чтобы

......~,~ о~ ~

1.111.Amctucmodttui:

Ы.commy ~ 8Тlcooum

Dut ...... r~кluш crll\ ... im г.rтiun' ming
t"Uis nonscquWim dip а11111 CJI; aJipыm
ibquip i~•~ rx1l1s d.iprк1 JDSim и.ri~
f-lci Ьl.ш roip cJ1criшlnld molupwion с\

ai=a.m

n•rn qul!ll iun:

.alt5eol ~о"'''

m~e:aaua:ci.qu1s1

lancxnic~oc«cтalis

Riliquisi'i- Urt" mi..i.. •Cl ~IC'l'll •U11* vcl11
Jonie romed dLW nomol!МВI. l::~uis
м:cum 11 uiaic rnintt C.ll Г..,;um.!.1.11 UI iril1~

ms nomill:.rUem di>lent
~mdn:m1ll..-Ы1StOod
doloкt-J111a1.pn1~1:wn.
qt1.ilttmati11iint.COМC'nl1d

.... 1am,,~\d

nummod

l'\Ol~\:111fJПhmJЬ/i('<SI

f.xum~

Gai1lum1111isnrsrюnscqu8J8Cl•cl11Lalcu1

modia1 !.11n ull•

'tlli..im~lk\,~'f!'

IUR' d!L qu1"8t llll!I

им одну форм, затем просто
•

тi..:cU11>1 .:1n111к1p,11<1t.>ct"1~1

1onн•loЬurr:i:u"'tw1onю.Jo.:un­

Genealogy workshop at the History Center

.:lpi1nioo1.lf'Alpm.
comm) n1m 'm•lll'll, 1d
crodooloro.1XCW1'Jdolcn1

,~1

под один размер и придадите

wisnulpu1pМpnL•u.llilor'Cvcrsitcurcuis

csirudminvelcugutnnli!.Cinu.llanhenim
1.:п

nwn iurr doloeom:tuc dolon:icl num dolor

iusto doknd=v dionsequ.ipil

i~.!.1.11•u.llamo.:m111l8m.un,quaa.U1i:im

Quмc lloloЬorc

qual pivs..il •el с! pr-~L siwo dolOl"C'l11 init
Wldn:moJneq11111
An aJ~i1 .,.;..;:;];,~ l!\a8Jlihh C\J@:.-t 1ll111c

,Cl"ll, quis niaw miniЬh cu Гcupi1 кi Ы.
Гn1is .Jiam 12J'i1.111rud 1а1 •=im itlim k•niwn

tin

С1ЯJ1

•ullute

do enill

modiocnl.I~

макет смотрелся интересно,
нужно варьировать и размер

и расположение статей. Для
асимметрии одни статьи сде­

лайте длинными, узкими и

1cC'OПSl:ddeldolor~n.~U811C1ni1lup:•I.

вертикальными, а другие

-

горизонтальными и широ­

You should see his middle game
Chess tourney

lupW,

1"UIТI Ю

n в1. comed dun1

•·o1°"ioodioodc:r~иril
&Ulpllll.C\IOl~dolc$!cquisi,ed

lupWмndcialiaml.Пlliquш

CUfialxiblмжpc.....,.Usci

CWllili,alismatrudC'l.\'Ulp.4.a

crмldoiwt'Г81:ill1.18dпcr11

tinWnc'lpr:llwis.issi.

young and old.

1Ldp81. ~Oll

•'d dolcnt 1li:, sequal
iuscinhi:n1,..ci.q11isnull.an-

Roconu1ip~lan1&11.iriiD­

IJudaec1em\'<'rili11Cuf'aciliqu81

dmn1'\llp.11811veni1nul'81.u1

~i1"cl1qu.isilpr-=sc:minvc1iqu­

dokп

mod 1ern

DOl'll"C'lltirildo~L

f.dtc

f8':Мm!lll.llnanvclin;

cri fctilJ

dolomn ip exetit

м:il11

lu1p11.U1lumvel11:~vcJi1

,..,JiqiDm

dцnt

nim i111

i:um •u!

lutem-.canmyre•lissiЫam

бавьте парочку квадратных.

""1'1isimdolorperocnllll•11&1it

brings our game
enthusiasts
lsi lllL COfUJI

кими. И еще, может быть, до­

u!fllllllll~Гкiliqцicsuud

iDi1

dцnt 8\IUI., con:m

При организации содержи­

мого страницы вам необхо­

autpaU:

Пl81111i~-aliq11i1no.tic

димо разобраться и с иллю­

feuauo: mod masnii. qui lt'I.. vo-

hc:naмldolon:l\:doluap.lc1

cue1EПWloЬunicikliqiamctn1m

loЬonie cn.iмandn: do 00 cun
1·C11Jblnidmodolori-mi111cupi1

inciliqui Ы.1 Г;accwnmod min
ul1ui"t•li1.11liq1&111imulLan,

iniLSD:1:edi1.canmynul18or~m

1.1dillorcr81:Q81\/11ynt81Uancll8:Jd81\181io1.111ii:n!e0.11111$\1d~-IJ.ilf!l/OltllD8l'Oa:rosecle

dipis811111dolnJi1111Юduluput.

~imadminiкimvulp.allnonUI

q11М1

in ull8111 nulllll!lm odoltll'I: ~~ u:
«mmy llOIDUd duisnlod er ~ tin

Jon:1D1ulJIUllll•li1null..,..vel

~Jisi.

ilil 1·olomu .:orpereing c11:iA

1pi~~i!lngdi88.,veleslo

volorat:in vd \UI pnL

dol0fintidllnl•tln1mnкoctc

Am,<l'Jllel'evt'кanv1Жlrirl

molomn il'8on: 1ie cOП1flk'ldo

111mimir1uк:ilitmil-scl<'lct

u.lpWaanulpu1e~dolun:m1......,

a:nef. СО' Uul:'lfl henim Wll\81;ip IЦllМ!.. Qt81 ll,..o CO'Ull dl liii
tdtClll. ClkИt @11_ vel 1 ~t rйfl Eltl c:Фlttl:lltllr

58:11!1.,.

страциями. Будет интересно,
если вы попытаетесь варьи­
ровать их размер и располо­

жение. В газетах иллюстра-

98

Добавь воздуха!


Проблемные

Welcome New Board Members

Kwan Na.med Volunteer of the Year

Jane Peterson

Ву Апп...

Simintem que omnis milla
ре nos quassim endunt
explkluis nos moditinia ех

M11,1"U

Sam Johnson
exem idlore corehendlt
is dipsam volutemodia il
maiorit assime delignimus

Lols Gonzales
volentl net ассае natem eiur?
Aditis aut eat. Genectam oln. offictur. senima
commblo restem eossere praЬJr sum sequas
modltas de reriore sedist libustiant.

Martln Chen
volenti net ассае natem eiur
Aditis aut eal Genectam elit, offictur, senima
commolo restem eossere pratur sum sequas

Arthur Мelnlck
Simintem que omnis milla
ре nos quassim endunt

Потенциальная
проблема модульной

№pudio ~mporis

as dolut
vcrsper untiossedi dolorio essi
dolorro incruri orerionseque
volorem nonstqu iasperchil
inis mo im~I cum laces di
scrumquibw crum, vcrunt оГ6сiа nct, conscro vid moluptasi
dolupraqui dolorerum ncm
utc ilicict, сщdа ipsant e:.iribus
~ cium, unrur magnari ut
a.tur~ Mct fugit quassima.gnis
mod ur volur hicipic a~upta
spNit haл:il in repellu mqu.a·
tias escquas aplicict minveri
cusam ipsandio ma ЛС' nusam,
to[a.spi dC'mquC' C'um ullup1a1 С'[
nшsam ipidun[io соп пoп­
scquam, tC'm sa:tiur aur apicil
molC'cab oruпdC'm hilignit
aЬorrum laut ma..ioп пonc:strum
ащ officaC' landio Ьсаt latC'S·
tibus acC'pi:runt et fuga. Edit
tnecatius molupta ассаЬо. Optatibus, ttm iur l'C'rferf errovid

заголовки.

верстки

-

два

заголовка друг рядом
Kwan was named 'tOlooteer о1
theyearlorherWQl1tontheamuaJhl:iliday

Sшanne

foodcИve

eliqui at quiaC' volupta.s dolup[a
пonSC' пihillor au1 tos eumque
veliquun1iam quosapc:dis de
esequae laЬora dolliЬcrum ata·
sitati comnit qut soloria quam
non~tinum txpi:r.1e modicitC'
iпvC'nimus mo volecC'r ionstn1
C'a!Um quisquC' di1 a.s рг.1t aut ut
r«US stn: idi1 volupta 1atibus.
Тiossumt[ С'[

acC'prC'ptas comnis

doluptat.
Оп n-cllaЬo.

Uga. Ta.s tos
prt"rnat ibu.sci solupta ра soloren
dusdac:stio. Ovit quis dolortpi:·

с другом (эффект
«надгробного

камня»). В верхнем
примере заголовки
сливаются в один.

В нижнем примере
дизайнер решил

проблему, вставив
между заголовками

фотографию
и использовав

разное оформление
заголовков.

KwanNamed
Volunteer
oftheYear
Ву Апп~

Welcome New Board Members
Jane Peterson
Simintem QUe omnis milla
ре nos quassim endunt
expliquis nos moditinia ех

MitohtU

AcC'pudio remporis a.s dolur
verspcr untios.stdi dolorio ~i
dolorro incturi orerionstque
volol'C'm nonscqu ia.spcrchil
inis mo impel eum laces di
serumquibus erum, veruпt officia пеt, coпsero vid molupta.si
doluptaqui dolort'rum ПС'm
ute iliciet, cusda ipsant cuibus
es C'ium, unrur magnari u1
eatur~ Met fugit quassimagnis
mod u1 volu1 hicipic aecupta
spcdit harcil in repellu mquatias escqua.s eкplicie1 miпvC'ri
cusam ipsandio ma пе пusam,
totaspi demque C'Uffi ullup1at C't
eatus.am ipiduшio con nonscquam. ttm seC(iur aut apicil
molecab orundem hiligпit
aЬorтum laut maion nonc::яrum

---------------

_,

Sam Johnson
Suutnne Kwan was named WJ!unteer of
lheyear!1YherWQl1tonlheaлnualhdкiay

'"""""
au1 officae landio

Ьеаt la1estibus
aceperun1 et fuga. Edi1 enec.atius
molup1a ассаЬо. Op1atibus, 1em
iur rerfC'rf errovid eliqui at quiaC'
volupw dolupta nonst nihillor
ащ eos eumque veliquuntiam
quosaped.is de c::stquat laЬora
dolliЬerum atasirati comnit
quC' soloria quam nonC'Stinum
experae mod.ici1e invenimus mo
vol«:C'r ionsent пrum quisque
di1 as pra1 aut u1 recus scre idit
volupta tatibus.

exero idiore corehendit
is dipsam volutemodia il
maiorit assime delignimus

Lois Gonzales
volenti net ассае natem eiur?
Aditis aut eal Genectam elit, offictщ seшma
commoIO restem eossere prn.tur sum sequas
moditas de reriore sedist liЬustiant

Martin Chen
volenti net ассае natem eiur
Aditis aut eat. Genectam elit, offictur, senlma
commolo restem eossere pratur sum sequas

Arthur Melnick
Simintem que omnis milla
ре nos quassim endunt

---- · - - - - - - - - - - - - -

-----------------------~

ции обычно занимают около трети полосы. Сколько бы ни было
иллюстраций в вашем распоряжении, придется позаботиться о том,

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

Добавьте боковик для визуального разнообразия.
Боковик

-

это блок текста, отделенный от основного сплошным

фоном, обведенный линией или широкой полосой отрицательГлава

7. Верстка 99


ного пространства. Содержание боковика так или иначе
связано с основным текстом. Здесь можно разместить

БОКОВИК О ТОМ,
КАК ВЕРСТАТЬ
БОК О ВИКИ
Чем хороши боковики , они:

•

кую биографию, блиц-опрос или просто более детальную
информацию по какому-то аспекту статьи. Обычно пря­
моугольные по форме, боковики прекрасно вписываются
в модульные макеты.

Чтобы создать боковик, особых усилий не требуется, ну
разрежают текст в отсутствие

хорошей фотографии ;

•

короткую статью с похожим содержанием, список, крат­

доносят главную информацию ,
взятую из основного текста ;

разве что рамку сделать, а какой визуальный эффект! Та­

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

• содержат информацию ,
дополняющую основной

Самая большая ошибка начинающих дизайнеров заклю­

текст ;

чается в том, что при верстке боковиков они забывают

• в форме блиц-опросов
или списков привносят

учесть внешние и внутренние отступы. Не экономьте

на отступах! Текст не должен слипаться с внутренними
и внешними границами.

интерактивность ;

•

представляют собой
дополнительные цветовые

пятна на странице.

При верстке боковиков:

Боковики привносят дополнительные цветовые пятна.

Попробуйте сделать цветным заголовок или буллиты.

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

бросаются в глаза белые буквы.

• используйте другой шрифт
для контраста с основным
текстом ;

• добавьте цвета: сделайте
цветными буллиты , заголовки ,

рамку или фон

• если вы выбрали рамку
или фон , убедитесь, что
текст не прилипает к рамке .

Не скупитесь на внешние
и внутренние отступы.

МНОГОСТРАНИЧНЫЕ

MAKETbl
Верстка многостраничного макета, печатного или элек­

тронного, связана с дополнительными сложностями. Три

самых больших

-

это соблюдение единого оформления,

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

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

Ориентируйтесь на гештальт-теорию: повторяйте компо­

зиционные элементы

-

цвет, форму, текстуру и шаблон .

Использование определенной гарнитуры также способ­
ствует единообразию. Не менее важно задать для каждой
страницы одинаковую структуру сетки .

100

Добавь воздуха!


7""-'-

."

Residential
Remedies, LLC

::'

\-Ц.- -~

~~--

_...,...._..INclllro

•

OllPliF\Clllda.W......,.
...

owtam,_..~~~

~..,..... W...,Ьuld~nмYnll'flllCIQlll W.r.ve~

rlconall'l.dol'>~0.WpiqiкЬC8'1Ь.._.."ov.-thlT8'1\f18881
-~з.:а..т.,...,,_т.,...,$~n~

OW'~dЬulW'og~ifl
ьт.,....~

... ..,.,..1о

""-

.

-~ .... Ollek.'f'
..s~~A/1--"
............. Qal~
. . . . . Wurfrl8dlDculltw . . . . . .

lt'lalqW "tiulldlre~

...... a.-.w.prwd • Ь8 п:Ь18d 8nOl'lg

h~...Ь~

----• С..

-

•

0"•""901J81"

Большое количество текста. Серый шрифт страница за
страницей

-

это смотрится устрашающе. Следующие советы по­

могут вам оживить дизайн с большим количеством текста:

Вы находитесь здесь.
Многостраничные
макеты нуждаются
в средствах навигации

•

используйте сетку и верстайте текст элегантными колонками;

•

разбивайте текст заголовками и подзаголовками;

•

добавляйте визуальные объекты, в том числе боковики;

•

распоряжайтесь отрицательным пространством стратегиче­

(номера страниц, строка
с датой выхода издания

и содержание). Для
веб-сайтов необходимо
постоянное присутствие

ски.

панели навигации, чтобы
посетители могли без

Навигационные знаки. При просмотре многостраничного
издания читатели нуждаются в визуальных указателях, которые

затруднений найти

нужный раздел и в любой
момент и с любого места

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

вернуться на главную

диционным навигационным знакам относятся, например, содер­

страницу.

жание, тизеры, стрелочки перехода в конце неоконченного текста,

логотип или его газетный эквивалент

-

блок выпускных данных.

В интерактивных изданиях есть элементы управления и меню,

Воспроизводится

с разрешения

Residential
Remedies, LLC.

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

Эти элементы тоже должны быть одинаковыми на всех страницах.

В периодическом издании

- печатном или электронном - обяза­

тельно присутствие строки, в которой указывается дата его выхода

и, если необходимо, цена. Строка обычно располагается на полях,

но непременно попадает в зону безопасности.
Глава

7.

Верстка

101


ВЫХОД ЗДЕСЬ
Помните: хорошая верстка работает на визуальную коммуникацию,
а не вредит ей . Начинайте работу с создания сетки и притягательной
фокусной точки, которая должна направлять взгляд на макет, а не
отпугивать от него. Гештальт - принципы
непрерывность и замкнутость

-

-

близость, схожесть,

помогут вам структурировать

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

верстка. При верстке многостраничного макета необходимо до­
биваться визуального единства .

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

• • • ПОПРОБУЙТЕ ЭТО
1• Возьмите для примера несколько сайтов, газет, рекламок и

пр.

В каком количестве макетов использовано правило третей? В ка­
ком количестве макетов использован золотой прямоугольник?

2. Найдите пример рекламы в журнале,

где иллюстрации распо­

ложены горизонтально. Переверстайте рекламу, вертикально
разместив иллюстрацию.

3.

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

4.

Возьмите несколько экземпляров местной газеты. Вы можете
сказать, какая статья является главной на каждой полосе? Благо­
даря каким приемам верстки это становится очевидно?

5.

В той же газете посмотрите на формы статей . Используется ли
в газете модульная верстка? Заголовки занимают всю ширину

колонок? Если нет, то какие варианты оформления заголовка
возможны?

6.

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

информационном бюллетене. Воплотите ваш дизайн в любой
программе верстки по вашему выбору.

102

Добавь воздуха!


шрифт
то, чего не зн аешь, может навредить
'ajf Writer

Reader's Picks

:um aliares volup•lccati duci occus
1 nonecre nюluptam,
•lanist, omnis ut cos
Lis molupid untin
exerovit volupit fuga.
cide11tis eiunt odi
соп prerum asperfe
odignat.

Ax•moditiunt alit, quatio 1nt
•аЬооо tem fuga. Ent, quaspe
.ncidend quamus га eos dolupit
.is омn1t11ю1

1. X1musa cum et repel imus

2. Doluptatur. odrs ent perunt
resto odrs

:aturcomni

З.

ptati de voluptis aut
f1 id auam harion пn~

4.

OcC1.Jm corro con cone eliqu~
~ "~~е

re

-~~~а

um

intionse aut

5. Natiunti aut lantюr aut offrciet
6. Militasped maxim eic tem aut

7. Fugitibus evenduc 1enimodit
aquas quo omnisqui voloreped quostrum alit, noПEcatur
J\it incias sim alicit, nistempostis аЬ illoratur s1testio

1

nimolorepro
orem que sam
.Jupra velibus.
t

hil et lab istrum qui

1с voluptac cosam
' dis excessunt.
ntur, vcпis ct aut ct

1у card-making
hop Saturday
:Ьisse

ditatem sequam
que simustrum er•is audianimin niatc
mi, escitaecto etus

O luptatet es а
quiamen dеш:
prendcm fugia с
а nonsenis res vc

most, sequi num, qui tel'Ur
rc, tcmolcs doluptus volorcm
eosament que natquisci 1 etur,
Dtatur
oncum
:atia
~

8. Votupta ernatem oditiur,
noЬita

sit

9. Sinvellupta et еа culluptatur,
que non

1О . Dolorum name rest, cume sa

6 ...

Volunte rs needed for
2 1О h day pageant
t, in

cone
·aecte
е

simus, optatem cullitati.
Roreritat ipsa con pelluptati nim ili.-nam sunt omniste


Е

ели вы относитесь к большинству, то поначалу в текстовом
редакторе вы использовали заданный по умолчанию

New Roman

Times

12-го кегля. Но продолжая полагаться на предус­

тановки компьютера, вы упускаете из виду коммуникативную

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

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

худшем

оставит вас без аудитории.

-

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

ШРИФТ, ГАРНИТУРА, ГЛИФ
Начнем сначала. Шрифт

-

это набор символов определен­

ного размера и рисунка. Сюда относятся набор букв, набор

цифр и все специальные знаки, которые можно вызвать

нomпuvwxuz

нажатием клавиш

Shift, Ctrl

или

Alt.

Гарнитура, или семейство шрифтов, состоит из нескольких

12~~C7UQO

шрифтов.

Times Bold, Times Italic

и

Times Roman -

это три

шрифта, хотя семейство часто считают за один шрифт.
Глиф

-

это отдельно взятый символ шрифта. Глифы

-

это

не только заглавные и прописные буквы. Есть пунктуа­
Шрифт задает тон. Грамотно

ционные, математические и прочие символы (такие как знак

подобранная гарнитура не только

копирайта или товарный знак), и даже чисто декоратив­

задает тон всему документу, но

ные глифы. Набор большинства шрифтов включает в себя

и непосредственно влияет на его

265

удобочитаемость, разборчивость
и визуальную иерархию.

глифов. Шрифты в формате ОреnТуреф, разработанном

совместно

Microsoft

и

Adobe,

могут применяться в разных

операционных системах и содержат более

65

ООО глифов.

КАТЕГОРИИ ШРИФТОВ
Аналогично тому, как мы классифицируем по родам и видам рас­

тения и животных, мы можем сделать это и со шрифтами. Формы
глифов шрифта определяют его категорию, научиться распознавать

и идентифицировать которую

-

важный первый шаг в выборе

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

В различных источниках вы столкнетесь с различной типологией.
Мы же упомянем лишь несколько основных категорий и дадим

общие рекомендации по их использованию.

104

Добавь воздуха!


Э"ЛЕМЕRТ

1 ШРРIФТА

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

Линия прописных

___..

Аа

Линия строчных
Базовая линия

Bl5

Высота
строчного
знака

Наплыв

Засечка

Ее

Основной штрих,
штамб
Внутрибуквенный
просвет

Перекладина

F

Концевой
элемент

т

очка

Овал
Нижний выносной
элемент

Антиква старого стиля и переходная антиква
Описание: Классические и традиционные шрифты старого сти ­
ля имеют засечки

-

небольшие « ножки » на окончаниях глифа.

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

8. Шри фт 105


Классика. Антиквенные

постановку наплыва (если соединить вспомогательной линией

шрифты придают

самые тонкие элементы округлого глифа, получится диагональ).

макету классический,

традиционный вид. Это

Переходная антиква возникла на базе антиквы старого стиля и во

самые удобочитаемые

многом на нее похожа. Имеются и засечки, и толстые и тонкие

шрифты для печатных

соединительные элементы. Самое большое отличие

изданий.

раженная диагональ наплыва или полное ее отсутствие.

-

менее вы­

Поскольку эти шрифты похожи, в книге мы будем называть их
шрифтами старого стиля.
Где лучше использовать: В случае с печатной продукцией шрифты
старого стиля самые удобочитаемые. Крупные полужирные версии
хороши для заголовков. С другой стороны при выворотке могут
потеряться соединительные штрихи и треугольнички засечек.

Засечки и тонкие штрихи незаметны также на мониторах и теле­

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

Шрифты старого стиля имеют
закругляющиеся засечки.

Вот некоторые примеры:

Berkeley Oldstyle Book
Baskerville Old Face
106

Добавь воздуха!


Рубленые шрифты (гротески)
Описание: Модные сегодня рубленые шрифты не имеют
засечек и отличаются одинаковой толщиной всех линий.

В ходу гротески самых разнообразных форм и размеров:
от округлых до высоких и узких до почти квадратных.

Где лучше использовать: В печатной продукции

-

в за­

головках и других быстросчитываемых информационных
блоках (боковики и подрисуночные подписи). Также хо­
рошо переносят выворотку. На экране рубленые шрифты
по удобочитаемости превосходят все остальные. Самые
удобочитаемые экранные шрифты

Arial -

- Helvetica, Verdana,

относятся как раз к гротескам. Крупные полужир­

ные версии как будто созданы для заголовков.

Regional Transit Authority
В гротесковых шрифтах нет
засечек. Вот некоторые примеры:

Futura

Myriad Pro
Рукописные шрифты
Описание: Если шрифт выглядит так, будто его перенесли
с приглашения на свадьбу, и напоминает об искусстве кал Annandale Regional
Transit Authority

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

тать шрифты с соединительными штрихами всегда нелегко.
Где лучше использовать: Из-за проблемы разборчивости приме­

Современность.

нение таких шрифтов ограничивается небольшими текстами, как

Если для макета нужен

в печатной, так и в электронной форме. Зато отдельные символы

современный шрифт,

образуют интересные декоративные элементы водяных знаков

попробуйте гротеск.

и логотипов или прекрасные буквицы (инициалы).

Если хотите что-то
по-настоящему

современное, набирайте
Рукописные шрифты отличают
соединительные штрихи.

Вот некоторые примеры:

текст строчными буквами.
Фото©

Ann Triling Fotolia.com.

J/1dt r7{д-шидд1?.d

аг~У?/r
Глава

8. Шрифт 107


INTRODUCTION:

.........

-·'-*'8 ....

c:uoмriitll~~-~---­

Oll~ .......

1~-.<o)

~----~-

......

. . . . l:l!;llDl8

-

~ ..... ~Dl..И"Ulll ....... "~"".ь-....,,....,

---~~ ·-~._..._-..-

........ ~ .....

Ylf\,.-_..._........ "•• ~--ICCll~­

с

~-saiw ...... ~tlA...i~~-----~

...

.

сЬ~~ "1,118t.181'1:181:1008"1d0--....,.,
f1'8!f\Olllf1l~"111:i~",~:~

-~~8t.·-~--..~
.......,"

C08'W---~1... 00/at8.-clN ......

"_.r...,.

M~••.J0.11" "...
~моm

r.н!Ull'IOl.U.Ato'I~

M8dli.'8u18'1!it"""8"*...,_
-...~
__._ ......i
~

~

....,...,.,__....,....,_

. , . ....

.... -----....."-"'*""'...,,.......io..;p!

~*'8Clltl~--~
..,. ........ ~ _....__.
. . . . . 11118 ....... е.....
<411M_.....,lla_
IR ..... '8118Dlar'I•...._.

-""~"'

Опасные иэrибы.
Декоративные
причудливые шрифты
отлично контрастируют
с прямоугольником

страницы. Рукописные

шрифты особенно
хороши в сочетании

с простыми формами

(старым стилем
и гротеском).
Воспроизводится
с разрешения

lto!lrit"

Декоративные шрифты
Описание: Эта категория крайне разнообразна. Есть здесь шриф­
ты, имитирующие каллиграфию, винтажные шрифты, гранжевые
и манерные гарнитуры.

Где лучше использовать: И в печатной, и в электронной версии

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

-

не самый лучший вариант.

Выворотка может смотреться хорошо, а может никак не смотреться,

все зависит от толщины элементов конкретных глифов. Шрифты
с тонкими штрихами инвертируются плохо.

USF

College of the Arts.

Еще две общие категории шрифтов

-

шрифты нового стиля и бру­

сковые шрифты. Многие люди претерпели адовы муки, пытаясь

отличить данные шрифты от антиквы старого стиля. Чтобы это
сделать, нужно обратить внимание на форму засечек.

Декоративные гарнитур включают в себя
рукописные и исторические формы.
Вот некоторые примеры :

gн-ls ~f е

Veir"d

D~u1scb

Go1bic

172.2. i9RT5 & 'Ri9FT5
Шрифты новоrо стиля
Описание: В шрифтах нового стиля очень тонкие засечки, и на­
плыв округлых букв расположен вертикально, а не диагонально,

как у шрифтов старого стиля.

108

Добавь воздуха!


Где лучше использовать: Они хорошо
подходят для заголовков, декоратив­

ных деталей и орнаментов. Для тек­

стов их лучше не брать, и выворотку
делать тоже не стоит (слишком тонкие

засечки). Также не рекомендуется при­
менять их в электронных изданиях.

У шрифтов нового стиля
очень тонкие засечки и ярко
выраженная вертикальная ось .

Вот некоторые примеры:

Bernhardt Modern

о 1'1с.м .,;nd -

tnk>mw1ion .ьо..t mc S-.-1....ir.wc ia

l"ICf'IAlloмl а- hcld ~ 'Jlanjiin,

aun.

"""' ~~~~~~~~­

"""- ~~~~~~~~-

Oty.SQw,Zip _ _ _ _ _ __

__

"""" ~~~~~~~~­

Cg Modern 20

.......

~~~~~~---

-...........-......--.. ....
....................

~-.--.-.--~c.a..
0llorol~-1" ....... .._....

Didot
Брусковые шрифты

..

1.-

Вода камень точит. Декоративные шрифты, такие
как эта гарнитура в азиатском стиле, полностью

Описание: Брусковые напоминают

подчиняют себе макет, даже если приведены

шрифты старого стиля, только засеч-

в небольшом объеме.

ки у них неконтрастные и мощные.

Некоторые брусковые шрифты вы­

Воспроизводится с разрешения

Stetson University College

of Law.

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

Где лучше использовать: Брусковые шрифты были созданы специ ально для плакатов, поэтому они хороши в заголовках печатной

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

дойдут лучше. При выворотке из-за массивных засечек брусковые

шрифты смотрятся очень неплохо.
Гnава

8. Шрифт 109


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

коративные шрифты.

У брусковых шрифтов мощные засечки
со скруглением и без него.

Вот некоторые примеры:

New Century
Schoolbook
ITC Cheltenham
Std Book

Rockwell
ВЫБОР И ИСПОЛЬЗОВАНИЕ
Графические дизайнеры любят экспериментировать с гарнитурами,
что вполне понятно

-

не так-то легко сохранить ясный разум,

когда перед тобой открылся целый мир шрифтов. Но! Пожалуйста,
боритесь с подобным позывом. Макет с разномастной стилевой
разметкой громко кричит: «Меня сделал любитель!))

1•

Выберите один удобочитаемый шрифт для основного текста.
Удостоверьтесь, что он принадлежит большому семейству,

в которое входят несколько шрифтов с разными начертаниями.
Так, для печатной продукции хорошим решением будет

Adobe
Garamond Pro, который является частью семейства, включающе­
го в себя жирное, курсивное, полужирное начертания. Исполь­

зование только одного семейства шрифтов дает вам широкие

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

-

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

-

это самый предпочтительный вариант ввиду их удобо­

читаемости.

Чтобы достичь единства стиля и одновременно разнообразия,
выберите гарнитуру, в которой имеется несколько вариантов

отдельных шрифтов, такую как

11 О

Добавь воздуха!

Verdana.


Jchedule of ~ti\Jities
Saturday 1О a.m.
• Apple Clder Presslng
• Pumpkin Carving Contest
• Horse-drawn Hayrides

Saturday 12 p.m.
• Apple Clder Presslng
• Apple Pie Eatlng Cootest
• ВоЬЫng for Apples
• Pumpkin Rolllng Race

Saturday 2 p.m.
• Horse-drawn Нау Rides
• Announcement of Contesl Winners

Saturday 4 p.m.
• Bluegrass Concert

AJI Day
• Chlldren's Games
• Chlldren's Cran Tent
• Food Vendors
• 4-Н Club Dlsplays

2.

Найдите второй, контрастирующий с первым, шрифт для за­

Соблюдайте

головков. Если для основного текста вы взяли антикву, то «на­

единообразие. Работая

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

гротесковым и мегастильным

-

вместе они будут смотреться

над макетом любого
типа, обходитесь одной­
двумя гарнитурами.

Ограниченное количество
шрифтов создает
единство и предупреждает

замечательно. Или вы можете взять для заголовка шрифт из той

возникновение визуального

же гарнитуры, что и для основного текста, и контраста достичь

беспорядка.

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

Гротесковые шрифты довольно нейтральны и хорошо сочета­
ются с другими шрифтами. Сосредоточьте свое внимание на
них, если готовите электронное издание.

Не используйте два декоративных шрифта одновременно, они
начнут конкурировать друг с другом. То же с рукописными

шрифтами. Это как примадонны мира шрифтов: вы не можете
выделить двум примадоннам одну гримерку на двоих.

Глава

8.

Шрифт

111


10

ПУНКТОВ­

ЭТО ВСЕГДА

10

СТИЛЕВАЯ РАЗМЕТКА
Если вы правильно выбрали гарнитуру, то можете исполь­
зовать жирный, курсив, полужирный и другие начертания

ПУНКТОВ ?

шрифта. В программы, в которой вы работаете, должны
быть дополнительные средства форматирования

-

из­

Как бы не так. Каждый из

менение интерлиньяжа, кернинга и межсимвольного рас­

нижеприведенных шрифтов

стояния,

дан десяткой, и каждый из них

которые повышают удобочитаемость дизайна

-

и его привлекательность.

занимает разное вертикальное
и горизонтальное

Кеrль. Вы подбираете шрифты, а потом кегль. В тек­

пространство. Основной

стовых редакторах по умолчанию выставлен 12-й кегль,

текст 1О-го или 1 1-го кегля,

и как-то так получается, что 12-й кегль редко подходит.

набранный шрифтом старого
стиля,

-

беспроигрышный

вариант. Что касается других

Выбирая размер для основного текста, попробуйте до­
статочно крупный и легкочитаемый. Начните с 10-го или

шрифтов, тут вы должны

11-го кегля, но будьте готовы к тому, что размер придется

положиться на свое мнение

менять еще не раз. Размер шрифта определяется расстоя -

о том, каким должно быть

нием от верхнего выносного элемента до нижнего. Из-за

идеальное соотношение

разной длины верхних и нижних выносных элементов по

размеров.

отношению к высоте строчного знака (очка) одни шрифты
кажутся мельче, а другие

All 10-point fonts are not
created equal

All 10-point fonts are not created equal

крупнее. Принимая решение,

вы должны полагаться на свой глаз.

Не забывайте ориентироваться на аудиторию. Если ваша
аудитория

All 10-point f onts are not
created equal

-

-

читатели средних лет и старше, лучше делайте

шрифт крупнее, а не мельче. Люди со слабеющим зрением

ценят крупный шрифт. Поверьте.
Шрифты для заголовков выбирайте, отталкиваясь от
удобочитаемости и контраста. Набранный 12-м кеглем
заголовок едва ли контрастирует с 10-м кеглем основного

All 10-point fonts are not
created equal

All 10-point fonts
created equal

.ALt IO·poiY?.t SoY?.ts

аге

not

текств, а заголовок 36-го кегля

-

прекрасно.

Полужирный wрифт и курсив. В былые времена
выделить слово можно было, только написав его про­
писными буквами или подчеркнув. Слава богу, с тех пор
многое изменилось. Теперь в нашем инструментарии есть

а.Ре 11,0t

полужирное начертание и курсив

.

Используя полужирный шрифт или курсив, удобно акцен -

cY"ea..tec! equ.a..L

тировать внимание на отдельных словах или небольших

All 10-po inl fonls
equol

o re nol creoled

фрагментах текста, также оба этих начертания хороши
в заголовках и подзаголовках.

Подчеркнем: используйте полужирный шрифт и курсив
лишь изредка. Ни тот ни другой не годятся для целых

страниц или длинных абзацев. Так-то. Курсив тяжело
читать, если его много, особенно с экрана. А если все вы делять полужирным, то зачем тогда нужно выделение! Оно

112

Добавь воздуха!


теряет смысл. Выделить слишком много

-

значит не
•ANТIPASТI

выделить ничего.

Shriпip with Garlic
Ducient peribus, apid ullab inum quassin ihitisqui
dolorem reperia tiusae nullitiae minus, cus dollate
corit volut i1 in поп estinve nimped ............... 8

Jwnbo

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

Prosciutto & Melon
Оп erferum et exceatur, occatest di ommolup
taquae mod eum nienderendae. . . . . . . . . . . . . . . . . . 7

добиться не применением полужирного, а повыше­
нием кегля, изменением цвета или использованием

Mozzarella Caprese
ltatiam senessecum inia noЬitio nserio quosae
sinvenimi, sum in eum Гugit fugiasim uibusci . . .

другого шрифта.

Все прописные. Еще один олдскульный способ
выделить слово

-

Di dem saлditam, sum am ut expernat prati dene
cuptatqui iundusapid etur sit es ipsandam nossim
nimille ntibusda .............................. 9

набрать его прописными. Длин­

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

•ZUPPA

соотносят форму каждой буквы с соответствующим

Pasta Е Fagioli

ей звуком

-

Igendus molores sitatur sed quo

буквы вместе со звуками рождают слово.

Со временем ребенок начинает опознавать слово по

форме и он уже не разбивает его на составляющие
буквы и не обдумывает каждую из них. Но если вы
набираете слова прописными буквами, они пред­

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

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

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

.. 6

Brwochetta

•

.. . .. . ....... 4

INSAlAТE

Classic Caesar
Quiasped estis nis id ut iliquia erferepta que еа que
prorporia quo voluptaspis . . . . . . . . . . . . . . . . . . . . . . 7

lnsalata Caprese
Uptios clicias dolor ad utemo et laceatur, nullupt
atempelitam nonsequo . . . . . . .

..

В

Escarole Siciliano
Is sendus quias аш doloribus noЬisto es dit omnihicab
in utatum, nam res ''el ius sinte et lacepro reritinci
cus aut prem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

..._ SPECIALIТA DELLA CASA
Bistecca А1 Barolo
Uptios clicias dolor ad utemo et lae<atur, nullupt
esciet auda sam sequam quassin iatempore eaquam
quatio qui in parcipis ......................... 21

Costata Di ViteUo
ls sendus quias aut doloribus nohisю es dit utatum,
nam res \•el ius sinte et . . . . . . . . . . . . . . . . . . . . . . . l 7

включая удобочитаемость.

Интерлиньяж. Интерлиньяж - это технический
термин, обозначающий межстрочный интервал.

Costata D'AgneUo
Aqui dellationem cus dolora conecerero eum re
magnima acli con commo Ыа vereperum nobis . . . . 18

В былые времена наборщики могли увеличить его,
только добавляя шпоны

-

пробельный матери­

ал, отделяющий одну текстовую строку от другой.

Сегодня это расстояние высчитывает компьютер:
каждому кеглю соответствует определенное число

(процент от размера шрифта), задающее размер
межстрочного интервала. По умолчанию это число

..._ fARINACEI
-------·------------~------·

Linguine Alla Napoletana
Ат laut opta doloritatum vendae. Nam rest alit qui
corem apiet quos eum delene plabores а poreper.

l4

Spaghetti А1 Pomodoro
ltas aut aut faccabo. mi, int dundae nulparume
placilit occus alist . . . .
. . . . . . . . . . . . . 12

Fettuccine Alfredo
Quiasped estis nis id ut iliquia erferepta que...

. . 12

годится почти во всех случаях, однако иногда его
приходится изменять.

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

высить удобочитаемость поможет дополнительное
пространство между строками. Небольшое увели­

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

оформление для создания порядка
и иерархии.

чение интерлиньяжа выручит вас также, если текст

Гnава

8.

Шрифт

113


набран гротесковым шрифтом или
если строки получаются слишком

длинными (например, в широких

колонках). Не переусердствуйте
с увеличением межстрочного ин­
тервала, потому что в таком случае

это опять же скажется на удобо­
читаемости.

Допустимо увеличить интерли­
ньяж в чисто декоративных целях,
но только на ограниченном отрез­

ке текста (в противном случае это
нарушит плавность чтения). Не­

большое расширение интервала
может придать тексту элегантность

и легкость, просто не забывайте об

удобочитаемости.
А вот в случае с заголовками умень­

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

ется колоссальным. Для заголовков

более чем в одну строку уменьшите
интерлиньяж, чтобы строки «сбли­
зилисм. Новички часто забывают

об этом и оставляют между стро­
ками заголовка промежуток, по

которому может проехать автобус.

Кернинr. Изменение отрица­
тельного пространства между дву­
мя знаками называется кернингом.

Шрифтовой тюнинr.

В большинстве программ верстки расстояния между знаками

Большие межсимвольные

регулируются автоматически. Тем не менее вам может понадобится

интервалы в заголовке

более тонкая настройка.

и увеличенный
интерлиньяж в основном

тексте создают в этой
рекламе ощущение

легкости и свободы.

Когда в буквах верхнего регистра присутствуют диагонали, как,
например, в заглавной

W, может сложиться впечатление, что рядом

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

F.

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

получились более компактными или, наоборот, разреженными.

114

Добавь воздуха!


Иногда трекинг помогает «втянуть» или <<разогнать» текст.
Например, если у вас есть висячая строка в конце колонки,
можно сократить межсимвольные интервалы в предложе­

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

пользуйтесь трекингом с осторожностью. Тут легко увлечься
и получить на выходе сжатый донельзя текст. Постарайтесь
не превышать параметр

-10.

Табуnяция и отточия. Иногда для выравнивания

ТЕРМИНОЛОГИЯ
Интерлиньяж

-

это

интервал между строками .

Уменьшайте его , если имеете
дело с крупным заголовком ,
занимающим несколько строк.

Видите разницу?

используется табуляция. Применяйте ее, например, для

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

Компактный

без каких-либо зацепок. Чтобы читателю не пришлось со­
вершать умопомрачительный прыжок через Гранд-Каньон

белого пространства, задаются отточия, которые работают

заголовок

в качестве визуальных мостков. Они помогают взгляду

перейти от одного визуального объекта к другому.

Компактный

БОЛЬШИЕ ОБЪЕМЫ ТЕКСТА

заголовок

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

и удобочитаемая антиква. Продираясь сквозь дебри текста,
мы, как минимум, теряем охоту к чтению. Но есть и хорошие

новости. Если для коммуникации необходим длинный текст,

существуют способы раздробить этот пугающий объем на
небольшие фрагменты.

Трекинr означает изменение
расстояния между знаками

в строке . Его можно уменьшать
или увеличивать для вгонки
текста или для усиления
впечатления .

Обоэначение абэаца. Как правило, абзац обозна­
чается красной строкой или дополнительной отбивкой.

Трекинг увеличен

К сожалению, люди в большинстве своем используют для

Трекинг уменьшен

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

Насколько большими должны быть интервалы? Используйте
трезвый расчет: абзацные отступы делайте одинаковыми,

Кернинг

-

изменение

интервала между от дельными

глифами. К паре глифов справа

мы применили кернинг - 78.

достаточно большими, чтобы обозначить их присутствие

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

We We

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

Глава

8. Шрифт 115


0e.a1pi1o..r-.т-i.

l'tJii..rт.,....~ ~--....-.­

P..rт1;1i;•aaцli.11Pt~Ьo.-:lcun1CUtun:i"llhwpPCJroll@~

lhat mdudr 1 l!DflWl1, ...urliDD and

a>-ltO.Ч

The n.mculucn" appropnll8e

b~l•udlic'nteandtl;J(l'l['~lnduwy~pt

I'rogram

~-it.1foaмaon.U:.ip«11ol~~

Allcl~P"O(ll'llll'\a

mN;un ФОdЩ.:. in -~ chanк:to:r 1t111U ь.п...-

rom...oo.. 1)-ра.

llllfUl:lfll, fiNll'ltt. NМOrDl:trc'ЬUofь,op:DIJOnll. •ndfOfl"!Utll,I rr.NljJC."ПICl"lf
a::;am ~-~.tueh.,.П\UЬtlr\{1:11ridlm:.I~ 1л-~onmultiplr

.................

l"hen~o/m..1du&e.pt'fCU<nC\•lum~.1ni:trrom9ю1.i

'YЬc.oyarr

6n1112ior«l!-1:iindt11.nlndudc-huainrt6roca..'hn. l11t1~1h;o1
lho:tr~Ont'cno.;hf..:.t'Yn)·t'tfф!p.oitк'lpllltJlЪe~;arr.1v:uЬI*

юht'lpthtJЬ.Мknь"11.hdw~ nr~m11kt-up.toмtwrol

tht-.iiuj~hour~ ~~lmdU....-h~IOthelllt'olsi­
~ktJllll:t':l~il~ Thr-lpC':ll"'"'~ЬcapmйinlJw..-мion•
l1111dk'~olWfd.wor111 .m:1~1hr~k"'°" Tht'
~lt'nd'UЬr01"Erl.tlr . . . ~p8r8oldarproи11U11.

..qc.a

~rvi.tw

-....,

...

aw

Ап-М.
t ""..,.. т..е ~· . т-."
с..а.
f'D()'nк tnlntna 1в pnмded Ьу loctl ~nes who ;are u-auwd '1nd

~ Ьу

thc

rw,itl(lnlll ofFlct';thrstrsinJr11:"~~«ed1n41&l~~ndl'ld!Jf:'I Anr\f'f)·o/
~1311ОМ prml<k'-·h щfnui,; ln -.:'1Иl',1m.1lt~llitfV>Ct proo.iden., "'1.Кh
• ~ 5maD ~ Dt-vdopncl"JI Cemcr. Pf'0"1dt' ttw w.ruлg. Ьut Lht- РfОИ/'Н1 С81\ he
o(ft'ft'd 1hmi.1gh 1 C'OfМNIШ) rw t«hnk-11 collqtt' 'У"-~ Ful'rrx·• ~ .Ьr nlfl'tntly
IDu itl po&1...flt'COndiory 1nМ111.l(ioN otrmna onr о1 t':ucT1X'1 progDIDl. lnducЬna 16
l«tlNC"IJ.&ndconvnWUl}'~(Ьap-"..,..,J.1~щ.~t'Yt'nl.cfm)
<"..-Мr"м.,.
Вn::ou,..d

ttw

•k r...t в..~

м t.-.1<.:а..1......,.

мdr12rчiieolnult'n:.l5 itDt ...rt'

1•-aiu.blt'.

~~anЬr ~

"*1cuur!irt"Urncula1DhclplflltNC10nmnotdм.o~.1ndpnonuno/"~8JQUP"

IXh•u.:knt~1~workЬo...-.11W1~ :ind0>-RO\Cdl8
conwn.~far~.1Ь.-pian.Up8.&ndЬrapramcn.

Мld~indtмuyor~~i--. lnltr\IC"IDRan~IC!pCflh.11
~ IJIOl'll focшrd О111 pRrtind;ar ~ _ , , "i>r:a USU18 fd.Tnic:1..-nc ~~

andvldrocцidwif. llw-~m-tap.w*blrfor;a~~
~-~diм..,.. dw-radV'IJЩll dlt'~

llllCefWLl'.мt!rxprofl,nlDt1,_,.ailcl.1,......ш~~~~aкh

(•w.iyfromthc

pЬmunf.1 pmt'n& (dwr. ~ ~ ~"

u.. r"111a1N ..юn1

NOltptOliDmlconu.inthcfoll.:--aiЬ,«u"·odl$11~1e».lnd

""""'""~
• lnuodumon•ndttw

~

.l.fondtrl

·

М:/.~l11t1Ai.~

md

•

f'\Nlt11;NltThC"~IЬ'I

•

Fil"l8nn.ii.~~T"'*

~ ~ ~

on 1О Fцr'frac- and

ttw

~utrrrun FouncЬ•1n11.

<"--'___. ..... l-...ч •kT-'•

• М:lrlu:м~~ireT.i...'tll:

The- t:aм-r.rol.-.outhcm c.&!alomia Ol"Jltin;&lly~ thr f:utTt:IC ~ur'lh1p
т,_.~~11U1thrl99Qf,1ht'prqirari1 has1--n~:U'ldrкp:andt'd

tllldt'r dw ~dltlt' hvip. м~мn ~ulfm:1n Found:шnn 1n К:1мu (~, М(.)
,,..~dlhr~prrlllldi:Тllainnry•'Jdrly.cr\81htcou"!ry ~~rrfrtТ
~-lldlr:!Ьnhip~-•Wr.nlughckm.ondstr111,~""fP~Pl<'I S l.OOO ln rtw

- ~~11

МомуЬ~

l':IClll8lonand~

~•t-llw~olk~ln1WCh .... rt1W~IOlllOIМCDl"IUl.'«'ll4t&OriN

~P\Upoч'and,.--ldl

•

J.eepi~olallp;nd~1t1U\eir~:1nd~IU(.rr:t"il;hdw-m•_,

prwt'd1Dddc-ctnxuc"~·ndodX"rc.'Olnll'lmiqu&

•

()pn'.WO.. •nd

Ь.....Ьwоr

r.._cTr.1<

11w"'3roa~TNm

0

.ainformшon rrc:~. nanufarn.~.and~ ~nrtм:Jrt....ih~
Olht'r.dkn~;aП~.lndlCl:llqlk~~~ct.Мlertkvc.olopmt:nt
Тhr: Fnimt' pRW11n11an ~ l:Jr ~ 1О Ь:ш on :1 ~ Ьu.anr.. ctu.rЬr ttw

[whi111_ ......,,_

. ....,.._..
•

FastTnc

Thetr.!lW1',~:irrfol".-rt-ur-.~~.lndcolkprg~"dt

iW•.dlrL

)lllNI~ (itoof.ф

{)qJllUDrillol~m.Aп..h:i.iP'O'·idcd11;hoЬ.tttiptbn\11rn;1~ А

'811111..~Ь.~2".ul.oЬirlormc:.-"-tю"·~dispЬC'edl'R"mttwiriQЬl;•arrмJlr.

ddwblloucflU81hrSВ.-ll-...erand~~

F.-Тrx '\~ \'o:lllUl't'. ~ щd l..il8m.Ц111D

Your

&..псм 1Л'

far a.D

"'°l«s<a~~or~Ьt-t'иffr""·lor~ddn-rryot1~1""'8 "'°"~
ka м.t о.- 1а andudt' n.rUuns. f~. tdinlvncnь, llddloon81

~-~~,~"~.1tiuиnn..pЬn,-...i•ll18

~ .Ь..-... C"!Oo'"I\

~md~a~,-r~

...mrтr.,-.1c'8hrfdr\1wr,~

t.Тixalю1..::ludts

~~oppunvnllinincaildl.a

Тo~•~lnolf'l!l:T...: . .u...._..._ь.,'t'~~aad

,_....._...
1'м:h.Jvlr

~aadP~Qnmuaoaaadc.m.tlc".1uan1&~t'Y'rt)

..t ~l)rf"

К.~О}. м.а..L

11

"

Развеваем скуку.

Все еще не определились с размером? Смотрите на работы других

Насыщенные цветные

дизайнеров. Учитесь у них. Какие интервалы смотрятся симпатич­

подзаголовки,

но? Старайтесь не делать абзацы длинными, чтобы не отпугнуть

разделители колонок

ленивого читателя.

и маркированные списки

разбивают длинный

Заrоловки и подэаrоловки. Заголовки и подзаголовки

скучный текст на блоки.

тоже прекрасно разбивают текст на блоки. Стильно оформленные
заголовки и подзаголовки на контрасте с основным текстом создают

некий ритм навигации по макету.

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

что заголовки нужно размещать ближе к тексту, к которому они
относятся, и дальше от других материалов.

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

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

ему текста. Выдерживайте уровни заголовков и единообразие их

шрифтового оформления.

Экранные wрифть1. Если дизайн требует крупного заго­
ловка, выберите гарнитуру, в которую входят экранные шрифты

116

Добавь воздуха!


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

АРКИРОВАННЫЕ

идеально подходят для плакатов, газет, журналов и ре­

кламы. Главное правило: использовать экранный шрифт

списки

только для заголовков, данных 20-м кеглем или крупнее.

Маркированные списки. Сложно представить себе

• Если список продолжает
основной текст, разметьте его

лучший способ сообщить информацию быстро и кратко,

так же, как и текст.

нежели маркированный список. Буллиты сразу привле­

кают к себе внимание, так что читатель в мгновение ока

•

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

он должен контрастировать
с текстом.

При выборе шрифта для маркированного списка у вас
есть две возможности: либо сделать его таким же, что

Если список помещен в боковик,

• Продумайте общее

и окружающий текст, либо сыграть на контрасте.

расположение списка, чтобы

Если маркированный список встроен в основной текст,

достичь максимального эффекта.

то и разметить его следует так же (те же шрифт, кегль

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

• Задайте выступы.
• Для большей удобочитаемости

от основного текста. Маленькая отбивка воспринимается

используйте отбивку между

как ошибка верстки. Большая образует зияющую дыру.

строками списка .

Если вставлен список в боковик или визуально отделен от

• Проявите мудрость при выборе

текста каким-то другим способом, задайте для него шрифт,

буллитов.

который хорошо контрастирует с основным текстом. Так,

если для текста вы выбрали антикву, для визуального

обособленного маркированного списка подойдет гротеск.

•

Не используйте звездочки
в качестве декоративных

буллитов.
Помещен список прямо в текст или в отдельную рамку,

ему нужен выступ (это когда первая строка абзаца выступает влево, своего рода отступ наоборот). Выступ
смещает цифры или буллиты влево и выравнивает текст

по вертикали. Одновременно с выступом целесообразно задать
отбивки между абзацами. Дополнительное отрицательное про­
странство помогает отделить пункты списка и лучше воспринять

их. «Воздух» и визуальная группировка улучшают коммуникацию.

Наконец, проявите мудрость при выборе буллитов. Вы можете укра­
сить список декоративными значками, но, как и в случае с осталь­

ными дизайнерскими решениями, можно не означает нужно. Если

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

-

тоже неплохой вариант. Маленькие

цветные точки в начале каждой строки помогут читателю с нави -

гацией по списку. Но будьте добры, придерживайтесь какого-то

одного цвета. Вы же не хотите, чтобы ваш список выглядел, как
пакетик разноцветных драже.

Гnава

8. Шрифт 117


ГАЗЕТНАЯ

Bayville's Тор Ten Family Destinations

ВЕРСТКА

By&aySmith

В том, что касается прида­

Bar.ntr SшjfWri/er

Reader's Picks

Ch. Itatum aliare.s voluptat ommolc::cati duci occus

Axtmodi+iunt af•!, quatiO inl

eaquc non nonecte moluptam,
omnisci Ьlanist, omnis u1 c:os
cverumquis molupid untin

oonsequo excrov1t volupit fuga..
1tatem. Ucidentis eiunt ocli
re11diciisi соп p.rerum aspcrfe
riarus aut odignat.

ста удобоваримой формы,

1. Xiroosacum etrepel imus

газетам нет равных. У них

2. Doluptatur od""isenlperunt

есть чему поучиться и что

"''"""''

Nonseccatur conшi
iusam reptati de voluptis aut

que porem id quam barion nos

3. Occum corro oon cone elique

позаимствовать. Редакторы·

.t.

верстальщики ежедневных

si ne.ct::a ditatur, vmdi cusam

SоЬе

repero Ьеамn

i!'ltlOrlSeaut

ipis "-eligendia adit doU:am
5. NзЬunliautlantiorautofficiel

autcm deblt recabore, endit:irur,

sam as es exerovit, nobis аЬоrа
vc:rcpcr atquas moluptaquc pelecc11.quo omniste: ctusam resed
quiare sequam, cr que num
dolorae rectum, nonsequides
ut mo et a~d maiores clcccpc:
atiatur?

Magnam qtti cum ium
experem quideblt dolupic turirrmquo iumt vtndis

ips:2menet hi1 tt lab istrum qui
nonsc:quide volupr-Ac ccm.m
repres quo dis exceuunt.
Ron:.hcntur, vrnis ct ащ ct

ния большим объемам тек -

'гьооо tem fuga. Ent. Q<Jaspe
incidendi quamus ra eos do!upit
llSlt.omnitaJnt

6.

Мil;tasped maxJm ее

tem aut

газет могут сверстать пять
или шесть материалов с не­
малым количеством текста

АЬоvе:

Lamen! faceaquas qoo ~ voЬ-eped quostrum aГll , nonecatш
sim a!lcit, n1steщюsьs аь lloratш sdes1IO.

sвqui consвd estilve'"I incias

lаЬо. Eritium in nimolortpro
cor $ifa volut ЬЬоrс:m quc sam
ct eaquo сх са volupta vclibus.

O luptatct cs autct facea
quiamcn dcstcm assit
prendcm fugia ct h.icaЬore
а non~nis res voloresequid

m0st, sequi num, qui tetu.r
n; tcmolcs doluptus volott:.m
a>samcnt que natquiscia crur,
tct dolliquis suntcsc iistot2tur
maximus torrum quac non cum
narur? Qui :шdam dolut.11tia
doJupt2t. CдntinruJ pag~ 6 .. •

8. Volupta ematem oe!lliuf
noOO: sil

на первой полосе, причем

9. Sinve'luptaetNC'JCupta:W

каждая их статья будет чет­

1 0.DolonJ'11narr.erest.curre~

ко подчинена визуальной

..,.non

иерархии. Такой фантасти­
ческий результат во многом

достигается за счет форма­

Holiday card-making
workshop Saturday
Vitis dc:Ьissc ditatcm scqu-am
renda sed quc simustr\lm errum ipsapis audianimin niatc
nt9ci aut mi, escit11ecto erus
ct quamc ditiumq uostiЬc
rspedjs caquia nWlia sam а
ci\1m invcnda et, quc liqui n:s
mo!ore.ium que ra~m alit,
cvclici:ic:s sincipsam, -:1ura ncm
quarcm. Occum diorrovit cos
aut qW ЫаЬоrеm. U1quam
quiati re optac:cese elenditius
c:xpliquae. Actsequi 1Ulderib
usciet as aliqui01 11et quis rcm
bces inctur?
Hc=:ndcni mendentc peris
aut laut liae. Ra dolore:pc:ria
dcribus ciatcm nimilJa ccpcruntio doluprae ~uac volum

Volunteers needed for
201 О holiday pageant

dolor re a.1mcnis am, qui nit
laccusdam as aut ut ips:im
q1.1iatum ct poratusdaest alict2s
pr:atendw iur mo torum in
parumqu iscimil ilia dotupr.it
quc vcl inctiumquid qu:tc sc
derchilliquc vt:llupra acimpor
cpcritis rcm. 1Ьса ct rc, vc11t\1r
re.ro isrinvt:ro volcndus voUand

On con corunt. Bc.re5t, in
enis nam еа pcrum rcpc conc
que concsciist re soluptaectc
serema.tc santis ad еа do1upris
ct, custotati conscqui odissinulla.m fugjutem. Lit ut
aspidcr fcmarc ad quuntibus sit
ma volupta qш1.rcmp orporae
nusanis mo voJcs nonscquatur,
sed que nulla а comnic11 iendamCJ\t latis csc nestium q1.1ibus
re corus~ magnat.

Pudi nis cndac асс.асре
ligendae nat dolor urn con5eq1.10 tcm nit exccpud icipsum
cusandendiat quatur, assimi,
volecro quo dempor rehcndi

ssimщ., ор

tcm cullitati.

Ron:rit>1.t ips>1. con pellupt2ti rum ili~am sunt omniste
et quost prae most n:ped ut
dolorae soluptac nimoles post,
volupta dolescipidit iur acerita
consc:d maio. Jtac. Iri ul ped
maior magnis deлdit quam,
tcm seris sun1 ra sum isqui
цЬorepudac sendicit iusae quo
id emarum siлciun tistiatcmpor susandc lc.ntion sequas
dcl~ clestia cs c:xcestiac ni
dolori dolorunturis anr ех et
voluptatc latcmod ut rcm non
pliaestii eruris volum qui sit
rem quat aceperu pciorrovit,

тирования текста.

Заголовки. Красиво
оформленный заголовок,
как аппетитный кусочек,

который как бы говорит:
«Прочитай меня!» Версталь­
щики газет хорошо знают,

как вызвать интерес и от­
разиться

визуальную ие­

рархию такими приемами,
как положение на странице

и шрифтовой контраст.
В информационных

Разные размеры заголовков подчеркивают, что какие-то статьи

бюллетенях

важнее остальных: чем крупнее заголовок, тем важнее статья.

используются те же

Заголовки варьируются и по величине шрифта (как правило, не

приемы, что и в газетах.

менее 24-го кегля), они обычно занимают более одной строки

И там и там заголовки

и нуждаются в ручной корректировке интерлиньяжа.

разного размера

формируют визуальную

Другой способ: использовать в заголовках конденсированный

иерархию, а колонки

шрифт. Сочинение заголовков для статей

делают и то и другое

должны быть содержательными, но при этом лаконичными. Кон­

более удобным для
чтения.

-

дело мудреное, они

денсированные шрифты имеют более узкое начертание, чем стан­
дартные. Они занимают меньше места, поэтому заголовок, на­

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

118

Добавь воздуха!


Колонки. Газетный текст разбит на колонки, пото­
му что гораздо легче пробегать глазами по коротким
строчкам, чем по занимающим всю ширину полосы или

экрана. Газетный формат учит нас тому, что

(5

см)

-

2 дюйма

оптимальный размер для колонки, не слиш­

ком широкий и не слишком узкий. Высота колонки

должна составлять не менее

10-12 дюймов (25-30

2 дюймов (5 см), а обычно

см).

Даже если вы не хотите использовать колонки в своей
верстке, можно позаимствовать их принцип и сокра­

тить длину строки за счет увеличения полей.

Выключка строк. Единственное, что не стоит за­
имствовать у газетной верстки,

-

Onulputet lum zzril ullam
inci tat lutat. Ut !а commod
еа acilla facip er se volore feu
feuipsusto dunt ilit at.
Ut er alit inciduis nis et am
zzriure rciliquis dionsecte
modio consectem num
incing еа aut et incipiscilis ad
dionulla con eum zzrillandre
el digniate verat.

это выравнивание по

ширине. Существует выключка по левому, по правому

краю, по центру и по формату (по ширине). Проще
читать текст, выровненный по левому краю, поскольку

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

Duipit dolor se diat, volor se
magnis nis nullam, consed
ming еа consectet dui eu
feum vullandre molumsan
hent dolor alit nos num ip
elit aliquat at veliquip

ШРИФТ: НЕ ЧТЕНИЕМ

ЕДИНЫМ

Коридоры . В выровненном по

В дополнение к различным уловкам со шрифтом, при -

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

ширине тексте могут «завестись»

уродливые коридоры

белого пространства, если
соотношение кегля и ширины

колонки подобрано неудачно.

что любой декоративный шрифт поможет задать общий

Профессионалы в газетах легко

тон и настроение. Но не списывайте со счетов тради­

справляются с такой задачей ,

ционные шрифты, которые тоже можно использовать

но вы лучше даже не пытайтесь .

креативно. Что бы вы ни выбрали, не переборщите
с креативностью

-

очень тонка грань между шрифтом,

сообщающим информацию, и шрифтом, мешающим

Сколько белых промежутков
можно найти в приведенной

выше колонке?

ее воспринимать.

Полужирный шрифт и курсив. Мы уже гово­
рили, как полужирное и курсивное начертание может

заострять внимание читателя на отдельных словах. Но есть у таких

шрифтов и декоративная функция. Оба типа выделения хорошо
подходят для создания интересных врезав, подзаголовков, подрису­

ночных подписей, заголовков и других коротких фрагментов текста.

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

казания, что и «все прописные» (удобочитаемость), потому исполь­
зовать ее следует с осторожностью

-

только в коротких текстах.

Глава

8. Шрифт 119


Выворотный шрифт. Выворотка -

это светлый шрифт на

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

боковиках и других элементах макета. Как и «все прописные», вы­
воротку лучше применять как можно реже. Большое количество

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

воит большой объем информа­
ции, то вряд ли захотите снизить

удобочитаемость шрифта или
утомить читателя.

Решив использовать выворот­

(jift <'Easket Ьу
!п ~ocus

ку, будьте осмотрительны при

выборе шрифта. Некоторые из

1Jesign,

них в результате становятся ме­

нее разборчивыми, чем другие.
Современные шрифты с их уль­

~asket

тратонкими перекладинами при

Contents:

Day Planner

выворотке смотрятся откровен

Franklin Covey

Alphabet Stickers

Ballard Designs

Blossom Notecards

Crane & Со.

Small Notepad

Crane & Со.

Photo Album

Maude Asbury

Memo Pad Block
Floral Ceramic Stamp Вох
Decorative Pens
Certificate for Graphic Design Services
from In Focus Design ($150 value)

-

но плохо, так что лучше всего

брать гротески, их штрихи чуть
более толстые (хотя брусковые

и антиквенные шрифты в полу­
жирной версии, а также некото­
рые декоративные производят

не меньший эффект).

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

циалы представляют собой пре­
красную динамическую точку,

Графические формы

привлекающую к себе внимание в первую очередь. Вы можете

букв привлекают внимание

задать ему цвет и размер (в пунктах или в количестве символов

и могут выступить

в глубину/высоту) и сделать его совершенно отличным от шрифта

в качестве фокусной точки

не хуже изображения.

основного текста и сыграть на контрасте.

Лучше всего использовать только один утопленный инициал на

страницу или статью, и только в самом начале. Если разворот

многостраничный, можно сделать более одного инициала, но не

120

Добавь воздуха!


ВЕРСТАЙ КАК П РОФЕ ССИОНАЛ. ПУНКТУАЦИЯ

Кавычки

"Прямые кавычки"

Кавычками-« елочками»

Многоточие

Длинное тире
Короткое тире

Штрихи
Специальные символы

1'

1' J'

З"

1/2, 1/4, копирайт, зареги­

V2, 1-4, ©, ®

стрированный товарный знак

Диакритические знаки

а,

n, е ,

а, п , е , о

о

надо ставить его в каждый абзац без исключения. И когда вы ис­

пользуете более одного утопленного инициала на развороте, то

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

встретить логотипы, колонцифры, врезы и другие элементы типо­

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

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

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

или прочую графику. Вот где истинное веселье.

ПРИЯТНОЕ ДОПОЛНЕНИЕ
Большинство гарнитур включают в себя

265

символов, но это го­

раздо большее число, чем сумма букв верхнего и нижнего регистра,

цифр и основных пунктуационных знаков. Что представляют собой
остальные сто с лишком глифов?

Пунктуация для профессионалов. Если вы до сих пор
набираете многоточие как «точка пробел точка пробел точка»,
Глава 8. Шрифт

121


то вы не правы. Среди этих

265 символов есть пунктуа­
ционные знаки, созданные

специально и соответству­

ющие кегельной площадке

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

хотя такие глифы совершен но необходимы, для того

чтобы оформить документ
профессионально.
К примеру, вам требуются
кавычки-«елочкю> для вы­

деления цитат. Вам нужны

прямые кавычек для обо­
значения минут и секунд,

чтобы не пришлось писать
словами

«минут»

и

«Се­

кунд».

Дефис необходим для слож­
ных слов, короткое тире

Creative cJ\l[enus • CJ3eautiful Presentation
ufttention to CJJetail
On-site and Off-site catering availahle

-

для постановки между ци­

фрами

( «3-4

недели»). Еще

нужно длинное тире, оно
заменяет запятые, двоето­

чия и скобки, если требует­

(763)262-6615 •www.acateredevent.net
acateredevent@izoom.net

ся привнести в текст эмоци­
ональность.

Если вы не считаете, будто
специальные символы вы­

Удивительный

OpenType.

Данная

глядят лучше, чем набранные тяп-ляп с клавиатуры, мы вернем
вам ваши деньги. На самом деле не вернем. Тем не менее усвойте,

реклама на полную

как выглядит правильная пунктуация, и научитесь ее использовать.

задействует потенциал

Ведь все, чего вы не знаете о шрифте, может вам навредить.

декоративных

OpenType. Шрифты OpenType содержат не стандартный набор

подстановочных символов

и цифр старого стиля.

из

265 символов, а гораздо больший. Они были разработаны для ис­
- фирм
Apple и Microsoft - и могут включать в себя около 65 ООО символов.
пользования под различными операционными системами

Помимо традиционных пунктуационных знаков и диакритических

символов шрифты

OpenType предлагают следующие возможности.

Лигатурьt. Это символ, объединяющий две буквы, единый глиф,
призванный заменить два стандартных символа. Лигатуры созда-

122

Добавь воздуха!


ны для определенных буквенных пар, которые
некрасиво сочетаются друг с другом из-за рас ­

положения точки над

i

или « Крючочка)) у

f.

ЛИГА- ЧТО ?

Декоративнь~е альтернативные глифы. Термин

Не знаете, в чем различие между лигатурой

говорит сам за себя

и декоративными альтернативными

-

это декоративная замена

традиционного курсива. Такие буквенные формы
с росчерками не годятся для основного текста, но

глифами?
Декоративные альтернативные

очень красиво смотрятся в крупных заголовках,

глифы

в качестве инициалов или во врезах.

в гарнитуре. Первая буква в парах ниже на

Цифры старого стиля. Замечали, что обычные
цифры часто кажутся слишком большими и не­
ловко выпирают в тексте? Все потому, что по

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

цифры старого стиля. К ним как раз применимо

это версии отдельных глифов

-

рисунке -

стандартный курсивный глиф.

А вторая -

с росчерком .

МсЖ

Q~

AlA
R'I(

понятие «высота строчного символа » , есть у них
и верхние и нижние выносные элементы, как

Лигатуры

у других символов шрифта. Визуально они со­

двух стандартных глифов, которые плохо

четаются с текстом гораздо лучше стандартных.

сочетаются друг с другом . Так, когда рядом

Неалфавитные шрифты. Если вы когда-нибудь
видели декоративный орнамент, сигнализиру­

стоят

f

-

это декоративные замены

и i, концевой элемент

f

находит

на точку над i. Примеры некоторых
классических лигатур приведены ниже .

ющий об окончании повествования, вы видели

Посмотрите, как решена проблема

неалфавитный шрифт. Он выглядит, как груп­

сочетания

па пиктограмм, но на самом деле это символы

1h ct fi
ffiffiH

шрифта . Во многих шрифтах несколько таких
символов включены в набор из

265

символов

(больше всего пиктограмм содержат шрифты

OpenType) .

Но существуют шрифты, которые

состоят только из пиктограмм.

f

и i.

fl

С технической точки зрения, это символы шриф­
та, так что вы можете изменять их так же, как и

шрифты: варьировать их размер, цвет и ориентацию в пространстве. Вы вольны использовать их как буллиты,

хотя с некоторыми ограничениями (не все такие буллиты хороши).

Графическая форма буквы в сочетании с неалфавитным символом
могут стать основой для логотипа. Последовательность неалфа­
витных символов неплохо смотрится в качестве концовки или

декоративной рамки. Они также могут быть сами по себе в качестве
украшения.

Все еще думаете, что шрифты

-

это скучно? Нет? И мы так не

думаем. Они, пожалуй, самый главный инструмент в арсенале
средств визуальной коммуникации. Используйте его, но не зло­

употребляйте.
Гnааа 8. Шрифт

123


8 8 8 ПОПРОБУЙТЕ ЭТО
1.

Заведите свайп-файл и сохраняйте в него удачные примеры
типографики: интересные гарнитуры, необычные неалфавитные

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

-

почему они вам нравятся, почему

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

2.

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

3.

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

4.

Освойте жанр типографического автопортрета. «Нарисуйте»
крупный портрет исключительно глифами (включая цифры
и пунктуационные знаки, но не пиктограммы). Можно варьи­

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

шрифт для передачи вербальной информации.

5. Почитайте об одном из известных создателей шрифтов. Напиши­
те короткую статью

(1-2 абзаца)

и сверстайте одностраничный

макет, используя свою статью в качестве наполнения. Возьмите

только те шрифты, что были разработаны этим человеком.
Никаких фотографий или иллюстраций, только шрифты.

6.

Подготовьте ресторанное меню с вертикальной фальцовкой
и размером сторон

11 дюймов (216 х 279 мм), окончатель­
ный размер в сложенном состоянии - 4, 25 на 11 дюймов (108 х
279 мм). Вам понадобится сделать дизайн обложки и разворота.
Дизайн для задней сторонки - по желанию. Начните с того, что
8,5

на

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

Ставьте правильные пунктуационные знаки, абзацные отступы,
маркированные списки и выступы, табуляции и заполнители
табуляции
Фото © Moreno
Soppelsa - Fotolia.com.

124

Добавь воздуха!

-

все как положено.

Open Туре - зарегистрированная торговая марка и торговая
Microsoft Corporation в США и/или других странах.

марка


1

т 8"а11.

1111

IQ

а ша noemd

n

n r.-ledae :шd lflfonn&dan, a-aruforra.Шa ptopll fiom Q)nrait CllПIWJleQ: lnlO

Cltlll.!Ot

;ia ю 1an11onn ом.

wco

prod1IC8I.

A.~rat Кapl.u1 arмl МkЬ,;· 1 H .mlc111 ;

l,.d(llU: afW.ЬZ.O, :шd th:i.t.~ i.hc ...-kin :шd odwJp: ol ~"F'"'"'ud mntcn~[l j. Вщl,_ Шо rdWtoll!Ш! 2W\i.l.111 WИ· ll'f·"
~ш ln dic ldlD dw: the cunenl period !а t1mc .nll Ье ddincd • tМ Atwadon AF.Soc:bl ~ CU1 ~ #ld со Ь- chmo com~:.+C":> -,i
.:нnmwilt:ycngtpmmt.IOCЬ.l'f\ral.clect:ronk~or~orotha:phpcaimediasuch111pdat).CoinmonЬma of8DGai11:.;,.
s dirкt acdotr. infUrmaUc:a ~nadon 8UCh u publk:spakia&. inlta01tx-, p.m'onnancz, :шd ~doll$.Тhе \UI!: ofthe tиm -...-.c:Lil int.

mn ~ шdе.аЬ medla wbldi &n' i>nned raalriiJ' Ьу r.М:publkм а poup. l.n a81Jdal way. mha- tШ rмd!a prod~ Ьr joщnaliш. edltoa a.n
аар} 11 oftm m1:1kkml tЬе б~ ~ ID Ь- ailned tD,, kП11 •IOCial media" • - ~ lt IOlhy. Thc BJosOn 2004 wnr-e_ Ji,ily 12-l:O.. 2'.
vdla• 1а tЬemootЬ. leadlncup 10thucvmt 1О dllal. dic<:OfniЧ: ~ofblogina. .dш, JOdal IКnl'D!Ь., шd ttlar.ed aic.linoiop:. lnlO а мw rc.~.
VI' of AIM and Sochl Меd1а, :шd now Ьаd ofBaЬ)'{Antet.QЖ!I.) m 1"7 ia ~а Гomr. ol mrrшшnity-dma [nrenж c:ontco1< aod Ь,. Dandl Jkrry
tЬt o:iiЫ>or11d~ Ьulldins ol comlИшill.J' :шd tЪс 1Ubjea/Ylta~ d shaml •lf'8CI'• ..ь decuooic mIOla. н,,, id"Emd io JUCii ~ • •ooQ,.i mcdi;i.
!r·:и. indllltdal medЬ.,-=h uм~pas, icl~11, :шd hlm. WhRclod&/ medil.;u.: rdui-.dyltte1:pc.'bli~aod~bl~rool.dut~anyurv (C"ta1 pnva.
w рuЫ.ЬЬ Womuodoii. Шtnpla af!DdшtrlaJ rnedia . . . indudc 1 prfaq pral ora ~ment-lf'UШ'dspec:ttum ucma..·IDduкrill. me:Ji." IRl...V•
· .:оси1 media шd ladllltrial nlo!'C(J.i. i. the c.paЬillf7 to mсЬ anafl or larp audJmas; rar aampk, i:liЬct а Ыое pcwr 1:н а ~Oll ..Ь.:- ma:r rасЬ. Rra pearpli! o r 1о
rr'.dhlduttПal medladcpaidoa tksrudJ. SD.ineofihae pmpertllsaм:R.di - Ьodt loduarial aod IOdal med1a .mnolopo pn:wilkк:akшdmablt: шуgое ю ,_._
..111у ownod. printcl:y o r Ьу JOl'C1!11XDIO 80dal media took an!: реп~ О, llYlilablr, ID ш.~ u lkik or DO QЖ.'--blllty - loduR:rial tr>edia pюdi.ii:tion t)'pially мqWm. .
.О .48.JOIW C8ll opcntc d. me:u-.1 tL produaion.Ra:znq- - dle i:-. ""• Ьs-. a:>rn.IJI~ produciкl Ьу Ь1dшпlаl meclJa aJI Ьt lo111 (сЬуа, -0, or ew11 manШ•J
r-on-; оn1т 1М parddpшu damUwi anr ddar ln iapoмtJ. N indl.ISfrlal raed1a m: cwn:ndr мl.optinc 1ОС1а1 тсdЬ woi., r:hll: Ьшrе: m•r мt1
Ьс d!a1na.iw a:i Jin
·•l'llt:le а nцр%!м attkl.. il prinЩ UJd d!яrlЪura! dun&n aJlrtOf i.... madr 8:1 .!iat .all'\e amde) wi..,.,. 80Cial mediacш Ьс ~ Woo.t Jмtan~r Ь,. oomma:ri or
.d юсiа1 fledia. 1houpi. mm.mшiliy-o1med, a:>:lшwnlrf
'""'1 •rJ ~р.-т< ane ND Ь,. ~ шd 11111111Ьу1mamin. Thq ua 'ьосЬ юdа1 шd lndurtrfal ~
,ui:'ion Тt.мform. м.rМu md Fteedom. У~ '&!lder • :.··
OllJ .М thcir lmpilcuknl io шms ofЬoth llODDIDJ!Da мd iQllQI ЬЬсnу. ~w. f<
.1irfomwl011 tmllOmy" iockк:t!.ЬcWUDdedyi!!!;CCOOO I'
..,..'tQof'lfhathasCIOl'De10Ьcknмm•"80daJ rмdf1.".Aodiтw lt.mo11idZll!llOQ.·
•, ~L'ur oltЬiluiarc:Ь,. k suddrot, Ьecamect.r tl'u wlw
.Т.ng1wayon tM !nllfmet was ЕМ i...,.. oldJclcal Darw\niJm, chctwYinJ ofdi.·
1tc!I.- :tuaUy р~ 11: Ъ,. !nfitilu: liliЬ-U.."(.fli«li1)Jnf<.,
' .i.11 ri:edii ckpmd оо ln~niak>м Ь.-С- peopW u dм diaa&llioo and l'\
~.11 t. Sodal mеШЬ. ~ tov.ad • pram1::11 1 f~ ,
..З<QA.<wnrt1, uoppoкd t0 calldnau dami..[j)Sodal inedil. utllltia и.
• 1._I ~1 uat.n. Clalms or ..-arnдll :т quk:kly UЫl>UOnN
nr<J u~ pomd aod ~ Ь,. alL l1w 1реес:1 о( c:ommunladon. Ьn:aii
,h- •ofl°Мtorlc.Induaio11ilm,umtt,utcd •1 мr;o.vr
~8811impoщntpar10ГUDday'1lana11.9l1110dal

·~

"°'

Best-selling author
& Motivational Speaker

Denisha
Washington

>Ф

1di~Compt.iUeiiliUGm.tralM0t0"N.-

"•hipw!di.~tL {diaOOo~mcdU;m:not6n.ire..
ktuon1onllne:hawncxonlyc:rntednew..-ap10CDП111111.11ic.~
aw aU~l\7~tb111»,todud111&!.ntcmc1farwm.

1.r· i:p8~ШIOdalmtdlaЬy.ddlчca:вmniu, losu11 ••r•
t • .~dui:iotЬcunkp:~tofte:hool'

-.d ~:okmu!Wia. Tedшo&ops Izadudt.: Ь1ор, piau-e · i •
··1· lixш.Wi:eM~.ndPl-..Ьшip lavfJO<:t

""'"i-dfll. Uld ,"lllrl:.rt owr Щ !О пате 1. fnr. Мщ of chsr юсt.1
Ltmal. ~Di&J 7. TJPfPad,Wo~V<11,Ezp,_;'°'1&-

l: 1' TW11blr,J&iku.firir\li&idalD ~!..{..:>
о

<1:'dnawork ~-· NuuhdlМa\J, ~a:

, &-.df.:., ~t.So<:UJ ЬookmuЬnc {or JOC111 ••

tJ \

~ng. М1Ц ~t,

NowPublkOp111kwl Jlta: ~lniaм, Y..!p;_-~ bНтfc .\tк:hia... i.-.rm, cx:.~~ ud

P1cr-aVJdmth&rq:Yo1:TiW.Vlmeo.~
~-,ap.c:o.roComr 1unlty ~Y:iw

'1>.1
!..
-i.

•oe"·PЬ.tfDrm.i: CiкoE.oi\'lttual "~Sec:oll<:il..lfc, Th~

UllJn agrqatorr. 1" miiЬcs, T"'1rw 1-·
o. 10 .1dop;diarle\~ d~1

1r~"ndfа1::м;...r1О help wg;\:c[ ~r prodUCЬ. f-1,...!Jt,
.'"'"'"~ coм.'t'JoiallllncJOdaltooed.11wamu:ii ~:-ic:нctrftlipl-.ysa..:t1".n

-

-ti 11X1allnuna:O .xi, aated 1as"' Ь ip.11~hk L'l.1 sa~ pc.-.

hosts the

"

lt!edrmoa:.a!Dtionofknoo..кa,..

ilnмl

-

шa lшnllt'l'2tldwdt-Ьafobl1rtdm...~ ro trand0n:ibroad tи1 11~Ymanrr.-

...,ao k> :i. tr.u111f.жnW1\! i:r.'tl

·AIWirR~inrooжin~1prod OO!'f, •,.drasК&pl.uand 1~Н-11.iohi dr.fin«юd; J

•, .r.J diaalk:olrW t:."CUion Uld

h!lduiolop:.l Ь.~

.-r-pa>"l o-d roq1e111"(1J. bui::sa. .Ь.О ~ ioaoc:ial media<11111et~mrd u.:11 si

lk-8 1" Ьca drmq:&mw ln dк \4ea dш rhcQЦф\tpuiod ln 1irмwillЬr c
1rediie-t. :t't!ltnlllll!J ~t. IOdal \val. ~11 111k broadca11 or ~
Gr-.f!ooudiпaactk. lnfO~ di.cmin&d08ls.;ii..J11P'.blk ~

wdn,..

·.1 MAtrrt111ioa "F-Socialmrdiacao Ьe.ud1oha~dite11coinpo~~11 \&n, inli:i
idм!r ph)'lical rllfd" Ndi •pl111J.Cm: ll>OQ fi..muoftodalmedЬ.-<:ot-oepn," ~ 111,an<
IOflf. pМDПNn..e,шdd.em<>r111r.r.tio111."T1мU1C of· 'w~"IOClal 11~·1t"has~aad

~·Ulled ~ ckк:riЬemeclla....ЬlcЬan:ft.-a181!.onalni1 ~dlepvbli

р.111: uЦa; wzт, n

>in: (.;• "'P)if. . .Jica mns.drt":itheinl~1ohirw"' ..J t.'w:IE:lm ~·
nedia" io d ·l'>Ol'ldu: b l1111 Ufl tD ~ ~ml IU dJomu !Ье comioa; IOfCd:.
Mo/Al) .nc!Soo.dM....tia.and-helldoi ~111'r.coni)loJ9')

25th
Annual

~m..a31W •IVl"'Ьo

....

<Ulil

•

Yiadк

"""'""1nltyaord 1N- aibl«"i--

"-'

.~ ..i r.he-

orl

media df
,-1пш'

· рапiщ

1

lit~ cr

~

~СОЮШ\1

~

ormll'

''"

\iaioa trpic"
-UncxЬt

.dal ~ С811 •

.unaиoualy Ь•

1Ьy proliesUonWandtro11W Ь:-"

(l•mmut1.1ty.-.dloo.-

111rnonl1

."')'1. -Ь.

~ ..w.lo o.

'J"linc). A•

.... ~ a.ano1

'tlde • 1'«

~ io.divio

..t мed!a" an::

x:h zero .-.

"'°'-

1щ:еd Ь~

m

·~(n-e!I P'

Jcriablrrai!J"'

1.f.l and. JIO'.I
Ф1

.p«a1~1j-

~; rodnm'

'Jodal ~

"J.• _.

•1 ~,

"ltd70<

n ic:i ,...1017

11 · ~LI~

r.n y111L

..Ь.lnic

nwdi .nd ind•

. fucuado11d

teclaaokifls in10 • rм- Юrm о

&о ~ -ь1 ntnl"Otla. and А!Шеd
form cl roJnmunlry.d.1-m1!111trnor1 mn1t'l'11

Ышc '..!iricdio

-а ир!.

'mIOa c:oap.x

иdt.шmafillpmdlll:l!dЬ,. ic·"rmlba.cdl юn

~11~ 1t -U,.. 'IМ8ЮtO'i?Ot' '~н~Jul121-:U. :I'

...

111CJшeЬodi 10CO.

1rЬuandfr«Jon'-'r().;/W ~~~ mmynftll.. a.w.."~~ tnd~ r im!'lk:пioNin1fflllJ ,•fЬoi.h ~mk:faodpoliЩl l

Wordsmith
Awards

io ~М tМ wкkrlyiJJ& eoonomk. •
·nd UC:...,;I ~ dw.:wЬtЬ of wtu.r hu «11n11 ai М Ь-~11 и "юсW motdia~ .Andfl."W 1
lddmly Ьеат. dбir thl.t ~iw- р а.
1ic l11finli.: IDOtW.n-< ·.- i11pшlill1а~on1Ье lnln"IW! - 11..- lnr о( di,;al О.,,.h;М;
1i1~ filibu.tm111-"(<f}[edi1IJnfvrma1l1111 ou.p"• .inil buman i111trau..1пmn-ar1ly, ..х:Ы rмdi1 ~рюd оо lnk"...-tiu• ~ peoplt •
(Xlra{ :ао рrвm1Ш.11 f nh.direc:Don for,r•:ll.i..ч.IY'f_.,..,·"I<:.."
;,, ullt 1fitha:in1нn.-!~ u "f'Г=-rl' l ro uUw.car ikm.(})
ue qukldy rtaN11ior..! ml<> ptr.tliurio" ~ 10 dм IПO!."lner ~r. -.. k>di diaml 1111....,,,",, . .._," potied шd •inred Ь,. alL 1М IJl«'I

1uaitJy11~:11 1 maм1o'r.l!lda~or.a.>-.i:;·~·~ Ji!frm::o1 i.n-1' aau:me-•...-• -.d ~ ~";. olic:ll'211 llnponan1panofrod.y'·
~Moio111 lu.W;~JOcU! n."'111 •..i·Щ.~T-..tnci11t mh ~1~...

111ПC11ts , lnJCU1r ~ na oreYe11 ed.Jtlnc

,.-•r

ns.h :;-'f 1th~{d1J1rion ~

.-1 "JIPIU":ONonlinreluw!notonlycrn•
...ocW ажШ '311 t&kc nw17 difЬ'cn1 Юuns
....uk4h211J18.aowdtowci ... 1odvolctowclP.1·
:11. 1 1 В!rozF, ~Jош-1. Opm ~ Т~Р

"f teclшolcs:r, ma.-knlч. ~nd юdа1 llWdi.a.\
'- ~"'lop . ..-.il4-d.a.p.m: .1 .. - .
-. of 1ОШ1 medA ~ ~pptk8»• •а...-4<:.•-

.ЬО. Bit:TВU. F.aЬook, J.mЬ:fIA.MySpagr, Oтku1,Slcynwt.

l:i\,

:..(!ч. ElqSoci81мrwodr.agrqpOOo:"

Goos\oe Rcada. Co:~U UkSocW ncwa: Dlg. М"~п. R.tddit. !'·,,.
ti.unm.n, Junin.1"1', SUdwn,, SkлxAudio and М181с~ tn-m. Th! НуJWМас
м .-....~ .vir--. W"~ Alh~. Goop м.-nEo1utai11rnmtМcdb 6с: l:n1ttnl.nmюr Pl.ador.вr. 0 1
, 1• jм, (wd.~ ln R!<'> "' r.azs. nurnrrous (Q(nptnlel 1.od brands Ь....с Мра 181nil. tlw pUdonar and dlanr.ek :aЬrr·"ll- t.! 111! 10 rqu&.1111ry m ·"'f-[7) Rкmit,.d:J.•"'' ··'
' '··
W phanuf;OlnJlaniallllnc.odal
~ma1cd U8taa 8.IPJr кassiblr ~ i "...tаЫе publkh.
·..i: utd -ь..ь...еd r~ 1r
:"-.or of~ a:od laltinnzi.,, oud"ormin& рм- 1
"в1а11 produonL Andra. К.рlа11 n..
"-.!Ь~ol'WeЬ 2..0, шdthai ·..,.. d." cnraCXN> &Ш!.
... "
....,"-.... ~."-dcooR111"\ l ]. Вшi.-al.oidrrtoo daJ ,
•l l&J&irl&)[G):

Ddicioш. Sa.imblr\Jpon.

~

", ••• '\."!l;flQDrtnihoeld.el.diuthccvnmt pc> J l"1imewiU~ddii ttd •dwAl1:tntlo11~.5oclalmedi1caoM..мlioh~tl oxcx;a
.;--"·. "-.......-...,~.ty ~JOdal vva1, d«troU:: bt1.· ·ut • oyndkatiDn. orodlrr pЬyDal medi.a 1udi :ао prin1).Com.mon IOmu ol .oual те
0
-..~ acdon 1.nrorm1r' 1n diшmillltioo "о а 1
~,f'!', inmllЬOOm.. pnfvrmana, алd dmio1111111dons.ThC' uи olthe 1crm JOG.

·:-...-....."·~У

" •.• "

,- •

.....

.....-.! .;ockкr1Ьc r

1 :.whkh1~fofinaiinalcl1

Ь,m.. p

._

• uoor ;" '-

.d -ay, n!hcithюnкdlaprod.uadЬ,.Joumaliш.edit

• ·; ·""\.'>.L•.-": .' . " "~ ~ ""JXtI0n toh~ooincddwtetm"'wxA! 111С<Ы - • .n. Шldcnr:andittod17- lЬc81oeOn20CWcoa~, Jul1 12-:З..
,,• ··•'-"-"" ",";"• ••; ·- ,,",_Uu leardm_, up • thucw:n110ditoal ~c:omlq~ ofblocllч. YtilW,юdaliшworЬ.1ndrd:lted t«hoolopainto• мw i>rt. :>t' 1 ·-

~'

"" ".-:: · • \ • • " ~W dia, 1 .J _.hardolB&ЬJCairer.com) ill \997 iodocrlbнformolmmmunity.d.hral.ln1a-oкairi1a1.1; andЬ,.IJuмli ~ ; ..: "
"" .~.._.;,,., • •; "._..,:·.-...."•._,, ;,wJd] 1olo.•"Ull.unitytnd dм.JUb;taiw:f:r~naofr.hatcd "1~" ..ЬdtdroakmIOIL Нeid"m-ed юам:hrу.~сшн, ".oo;W ~
• '.;""..._•• ( •,-" :-"~ • • ":~ .-.~-'.аа.1111 ~ as м 1111рареn. ~11, ancl filro. WbllclOdal medla ane rflali\'Cly inapeмi"'and ас:ааi!М aook dw aublca:iiyooe t~ pn.....,~ .:.;.
• · -- -.·. ·"~.·.-.1·0."i:.,,•, :uform lon.Enmp\aoflrw;!uarWrllifd;..~lndiмkap:intin&ptcмor1~t-ll'Uitcd~mhcim.."Шd1111 airoedi~"an-cor•·.:
,., • ' ·'"' " '-' ."........~ '- "1 tllf;'uщ ~ medl. lil t:Ьcap3bl!J1r !О r-=h miallorlupaudlaircs; l'oraampk.cither• bloef'C* or11ekvlsioo dмJ... mq 1:adi xru i:it.,U.o r · r.i~­

-; ...X•~_";"•._"._"'--..· ;~"~iU.dcr<odo11ihtltUd)'.
'•"'• ·_"

Saturday,
December 18
7:00 p.m.

Pinehurst College's Wolford Auditorium
7528 South State Street • Amelia, WI
www.wordsmithawards.org • (555) 213-3653
1-'f'(j-J*:t'

";

Somcofdим:pro~aжR.di - ЬodiindшtrWandroc;ialtoedi:.~pl'O"idetcaie.шumaЬl.t&:JYDIWtv~·

..•., ·.•~ "_""".; ~·;, ,._.:1' 0. rb 1 JO'Rf"ll-n1; llXUI medJ.aroolt~~W2iJ1Ьk IOallJODC'llt lin\eor noCllllC.IJAЬllitr · induatn.J medЬ рn:>1Ь :tioo l)'p;.;ally te.i••:.."-'•
"., '-'• ; · · ·~··•·--~ ~ ~ inanJ ofproduWori.R«cncy- Wtinw: 1аа М-c:omni.unkaDont p~oed Ь,. Wdw~al malia о.а М loaa {day" -Ь. ~ ~ -W· •

·.. ·

. , , ..... f>

rf;"Jd
l=•~o

....

-

l,u.ArКD

~nc. udYOkc<:mtЩronanwaf-. :. :
f~l'lary; TYptJ'ld.Wo.d.Pмl., '<·"-,
".'L.Чall,Fr~.:

(' pl111on 1;•.·

•"t.fni.,ccl-1'
•'inua! or:i'.1

'{1 1а~А

rt=Ut

1..Ь.. ~11

-,~

~·,:

•• collV"• n u:.

чн•...,,

·:~ ~, "1«·

".nrm broao ·::tr.

-r .IO

. lw:!Нam."J .
...dla:;u UJa" у~.

~' ~·-· 1.

"'ODr::Ow.C..:> r.

•

Гnааа

8.

dia.~··

Шрифт

125


•

u

о дизаи не логотипов

с

амые узнаваемые и известные логотипы в мире

-

вопло­

щенная простота. Элегантный внешний вид таких знаков
не дает никакого представления о том, какая гигантская

работа стоит за ними: тысячи часов мозгового штурма, набросков,

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

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

размера. Возможно,

дизайнером, или создать что-то сам остоятельно, вот несколько

вещей, которые вы обязаны знать:

1.

слишком общего. Если получившийся дизайн легко подошел

ваш логотип будет

бы другой организации с другим названием и другой миссией,

использован на

возвращайтесь к стадии набросков.

рекламном щите. Или
на визитной карточке.

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

Логотипы должнь1 быть уникальными. Избегайте чего-то

2.

Логотипы должны быть масштабируемыми. Дизайн должен
быть четким и удобочитаемым

-

будь он размером хоть с по­

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

чтобы была возможность

в логотипе использован не один шрифт, убедитесь, что оба

изменять их размер.

удобочитаемы, даже если логотип значительно уменьшится.

Единственный масштабируемый формат готового изображе­
ния

-

векторный, так что проверьте комплектность (файлы

векторной графики чаще всего имеют расширение
графии

-

.eps). Фото­

это растровые изображения, и они не могут быть

смасштабированы без потери в разрешении. По этой причине

никогда не используйте в логотипе фотографию.

126

Добавь воздуха!


Сочетания двух

шрифтов. Будьте
внимательны со

шрифтовые пары. Сжатие
логотипа lпkwoгks

ТАТТОО

f;.~
ANTON GROUP • LLC

может сделать более
мелкий заголовок Т attoo
Studio неразборчивым.

Шрифты в логотипе

Aпton Group сходны
по форме и сохранят
удобочитаемость, даже
если будут уменьшены.
Логотип

lnkworks

был создан

на основе шрифта

3.

Простота -

это достоинство. Логотип должен быть при­

автор шрифта

lnked God;
- Gyom Seguin.

способлен к любому применению. Сложные иллюстрированные
логотипы отлично смотрятся на рекламном щите, но что, если

вы хотите вышить логотип на тенниске? У компании, которая

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

4.

Оrраничьте количество цветов. Чем больше цветов, тем до­
роже обойдется печать. Разумным будет взять два стандартных
цвета: обычно черный плюс один плашечный. Выбор плашеч­
ного цвета аналогичен выбору банки с краской в строительном
магазине. Поскольку вы берете цвета «прямо из банки)), они
хорошо сочетаются друг с другом, что важно для вас, ведь вы

пытаетесь создать гармоничный визуальный брендинг.

5. Убедитесь, что лоrотип хорошо смотрится в черно-белом
исполнении. Случается, что по каким-то причинам цветная

печать невозможна. Логотип должен быть понятным при любых
обстоятельствах. Поэтому нужен и черно-белый вариант.

6.

Убедитесь, что вы можете сделать выворотку лоrотипа.
Выворотка

-

это типографический термин, означающий, что

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

смотрится в черно-белой версии, он получится и при выворотке.

7.

<.!<; ~

1У"\

Старайтесь иэбеrать слишком rориэонтальноrо или вер­

Правила простоты.

тикальноrо дизайна. Такие логотипы тяжело подверстывать.

В этих логотипах

Если дизайн логотипа

использованы один-два

-

строго горизонтальный, попросите ди -

зайнера предоставить вариант с альтернативный ориентацией.

цвета, удобочитаемые

Тогда у вас под рукой всегда будет нужная форма логотипа для

шрифты и простые формы.

любой композиции.
Глава

8. Шрифт 127


Если вы сделаете лоrотип самостоятельно:

логотипы.

Сперва приобретите программу для работы с векторной

ПОЛНЫЙ ПРОВАЛ

графикой и научитесь ею пользоваться. Затем приступайте:

1• Оцените

преиму­

щества словесного

ANTONIO'S
Jince I926

знака. Порой легче
справиться с исклю­
чительно текстовыми

Peterson Painting
Services
Клипарт и шрифт

Sans -

-

отличная

логотипами, но это

стартовая точка для начинающего

если у вас набита рука,

дизайнера логотипов.

и вы можете класси-

фицировать шрифты и подбирать правильное их сочета­
ние. Если вы решили взять более одного шрифта, выберите

Comic

всегда плохая идея .

Шрифтовые логотипы, как
например этот,

контрастирующие друг с другом, но хорошо сочетающиеся.

2.

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

что в их честь можно назвать целые временнь1е периоды .
Среди тех, которыми еще не так давно слишком злоупо­

требляли,

(Zapfino) -

Zapfino.

предустановленный на вашем компьютере шрифт. Купите

вот

что-нибудь новенькое. Или скачайте бесплатно (смотрите,

почему логотип неудачен.

не нарушайте авторское право). Или наймите специалиста,

Штрихи шрифта делают его

чтобы он создал новый шрифт специально для вас.

неудобочитаемым , а градиент
вызовет проблемы при печати .

и

Вот хороший житейский принцип: не берите для логотипа

Слабый контраст и заюзанный
шрифт

Mistral, Papyrus, Copperplate Gothic

3.

Никаких клипартов. Если вы хотите добавить графику
(иконку, или символ), возьмите декоративный неалфавит­
ный шрифт или орнамент. Но будьте внимательны при
выборе: шрифтовая пиктограмма в виде смайлика ничуть
не лучше клипарта в виде смайлика.

4.

Используйте простые формы. Если у вас достаточно
храбрости, попробуйте добавить в логотип простую форму,
например квадрат, круг или линию. Сочетание простых

форм и интересных глифов может оказаться очень интерес­
ным. За вдохновением и инструкциями еще раз вернитесь

в мини-арт-школу и обратитесь к гештальт-принципам .

5.
Симпатично , но этот

Протестируйте. Наконец, после того как вы оценили
и рассмотрели разные варианты логотипа, нужно при­

логотип нельзя уменьшить,

кинуть, как он будет выглядеть. Разместите его на сайте

инвертировать или перевести

или на фирменном бланке и подумайте, насколько он

в черно-белый вариант без

вписывается в окружение. Возможно, вы обнаружите, что

потерь .

логотип, отлично смотревшийся в одиночку на листе, не

так хорошо показывает себя на пестрой обложке буклета.

128

Добавь воздуха!


главное о цвете
выбор и использование цвета
1

u .., 1

L.rt·•..:•·:" · "··.,..';1:1
." ..•'

.

.

111 13-week semester pro~1 ram
asses located in historic
"Legal London"

в, 1oomsbury

ke up to 16 hours of ABA-accredited
v courses with U.S. and U.К. Facul~~-- .

.
·1sters,

.

~ericies

-"


с

просите у детей, какие их самые любимые цвета, и полу­
чите восторженные ответы: «Красный!», «Синий!» Люди

просто реагируют на цвет. Наш выбор всего

до автомобиля

-

-

от одежды

обусловлен тем, что цвета сообщают нам.

В этой главе мы научимся использовать возможности цвета на

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

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

прежде чем дать конкретные советы касательно цветового дизайна.

СИЛА ЦВЕТА: ВОЗДЕЙСТВИЕ,
ОРГАНИЗАЦИЯ И ЭМОЦИИ
Цвет оказывает визуальное воздействие. Цвет
привлекает внимание. Он заставляет вас смотреть. Нарисуйте на

Цвет орrаниэует.

черно-белом плакате один ярко-розовый объект

Изменение цвета кнопок

-

пусть это бу­

дет шляпа. Розовый цвет незамедлительно становится фокусной

навигации помогает

точкой, он притягивает внимание в том числе и из-за контраста.

посетителю сайта
узнать, где он находится

Но оттенок и интенсивность цвета здесь сами по себе уже фокус­

в данный момент.

ная точка, они сами по себе обеспечивают контраст, сами по себе
создают впечатление.

Воспроизводится
с разрешения

Если цвет захватывает внимание, можно использовать это, чтобы

Агеа

направлять движение глаз по макету. Взгляд будет следовать за

Tampa Вау
Regional Tranportation
Authority.

Home

Latest Traffic

About

EXl'ANDМ-Y

цветом, как собака следит за поваром на кухне.

Community Forum

Video Library

Recent Forum Topics
Forvm

МеmЬеrа.:

Toplcs: 16

35

Twitter Archive

Recent Tweets
Followers: 671
Upd•'-:238

Facebook

TBARTA

Regional Transportation
News
• Speci81 leglslati.e sess/on on
Sunrol/1 Но wonl yet (lay
нews 9 Tampa lay)
11/ЗQ/2009 S:S4pm

130

Добавь воздуха!


Цвет организует. Представь­
те себе, что вы в аэропорту. Вы
видите большую группу людей,
одетых в красные футболки. Либо
они принадлежат к одной группе,

либо это необычное случайное со­
впадение. Ставим на то, что это
группа.

С помощью цвета можно сорти­

ровать и группировать объекты
и показывать, что с чем соотносит­

ся. Этот принцип лежит в основе
систем цветового кодирования

(электрические схемы и автосто­
янки). Не стоит забывать об этом
свойстве цвета при проектиро­
вании.

• Full 13-week semester program
• Classes located in historic Bloomsbury
- "Legal London"
• Take up to 16 hours of ABA-accredited
law courses with U.S. and U. К. Faculty-·•
• lntemships with Britis~ barristers, '
solicitors and govemment agencies

Guided tours ofLgn~.o"

Цвет вызывает эмоции.
У каждого футбольного клуба есть
свои цвета. Такая концепция на­

правлена на пробуждение сильных
ощущений: эмоции, которые мы

• Houses of Par1iament
• Royal Courts of Jus1Jce
• Windsor Castle
• Oxford
• Stonehenge
• Вath

.
'

.··

•

·'

испытываем, зависят от того, на
какие цвета мы смотрим,

-

сво­

ей команды или соперника. Это
яркий пример того, как ловко ди -

Otrice of lnternational алd Graduate Programs
(727) 562-7849 • international@law.stetson.edu
www.law.stetson.edu/intemational

Cou.ege of Law

зайнеры могут использовать цвет

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

Это патриотично. Синий,
красный и белый цвета

ная реакция является приобретенной, но к теории и символизму

пробуждают национальную

цвета мы еще вернемся. Что же касается дизайна, то одни люди как

гордость у американцев.

будто рождаются с чувством цвета, а другие не могут подобрать

И у британцев.

одинаковую пару носков. К счастью, этому можно помочь.

И у французов ...

КУЛЬТУРА

с разрешения

Воспроизводится

Stetson
University College of Law.

Хотя у христиан на Западе красный и зеленый цвета ассоциируются
с Рождеством, не все празднуют Рождество или воспринимают

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

красный цвет от зеленого. Другой пример культурного значения

цвета, используемого для передачи визуальных сообщений,

-

это

красный и зеленый сигналы светофора.

Глава

9.

Главное о цвете

131


Обычно цветам придают символическое значение, которое зависит
от принадлежности к культуре, но даже в рамках одной культуры

Ретроцвет. Вы когда­
нибудь замечали, что
в 50-е годы в фаворе
были бирюзовый,
розовый и черный~ Вы
когда-нибудь замечали,
что абсолютно все

в 50-е годы описывалось
прилагательным

«атомный»~

тот или иной цвет может сообщать разную информацию в за­
висимости от контекста. Белый может символизировать чистоту

(цвет отсылает нас к мысли о непорочности невесты). Но в Китае
девушки выходят замуж в красных нарядах, поскольку этот цвет

приносит удачу. В США красное свадебное платье может шокиро­
вать, потому что в этом государстве красные одежды вызывают

другие ассоциации. Не будем забывать, что в некоторых странах
Средиземноморья и в Индии

-

это цвет траура, в то время как

для американцев и европейцев цветом траура считается черный.

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

вещей. Зеленый может означать «свежий», <mрохладный», «нату­

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

Иными словами, не считайте смысловой подтекст чем-то само

собой разумеющимся.

ИСТОРИЯ
Как и стили в одежде, мода на конкретные цвета приходит и уходит.
Если у кого-то из ваших знакомых ванная комната с давних времен

132

Добавь воздуха!


облицована розовым кафелем, вы понимаете, о чем мы. Знания
о смене цветовых трендов помогают выбирать и отвергать оттенки,
тесно связанные с определенной эпохой.

Ребекка, например, как-то раз ненароком выдала свой возраст, рас­
сказав, что в детстве у нее было ярко-оранжевое синельное покрыва­
ло, желто-оранжево-зеленые занавески в ромашку и огромный лох­
матый зеленый коврик-ступня. Для тех, кто не понял: ярко-красный,

зеленый, золотистый и коричневый цвета были в моде в начале 70-х.
У каждого десятилетия есть своя цветовая палитра, а то и две. Розо­

вый, черный и бирюзовый до сих пор вызывают в памяти 50-е годы.
Яркий неон заставляет вспомнить о 80-х.

У матери-природы

На самом деле дизайнеры, работающие с цветами, решают, какие

замечательное

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

чувство цвета. Если два

выбирать цвета для своего проекта вы можете, основываясь на

цвета можно встретить

тенденциях грядущего.

вместе в природе, то
велик шанс, что они

будут великолепно

ПРИРОДА

смотреться рядом
и на вашем макете.

Если сочетание цветов все еще дается вам с трудом, берите пример

Цветовую палитру этого

с природы. Цвета, которые встречаются вместе в естественной среде,

журнального разворота

составят хорошую цветовую композицию и в вашем проекте. Воз­

подсказали голубое небо

можно, сами вы никогда бы не решились сочетать ярко-оранжевый,

и желтые листья.

Historic

HATТ.IESBURG
/'А._,

0 .,_ . .

".k'I.
.... -

-.-n~.w.....- .....

_._,....,...,.."рМwо...---

_........&-~-........--

"--.........,.,,.a:-.....,

--w......r..."......
..,..t..,.._"
.....
_

.....__...,"""....61--....-......
......,_ __..................
_._.,.._,...

_.,.._" __ qouo,...._.....,._oklor~
..._
_._. .......

~ .......... ",..__
"""" ..................""
li<n,....,._,.._..t..,..i
....... ............
..._....._._._ ... ..-...".............
"_ ...........
.................. __

____

~

_..,..оц...,."

.,....,.._<"'Ч'"'"'dnld.•-••.J-11>1<
,ш
1'f"'il><f"I~ .... ~" ......... ~

....

~

~....,.~111....-monooi

~-.о..

......... ......--...........__ ..........
.......
.......

........,, "•dlunat!'

_....

_.......,"...-.
,..........,.
......,."
...... .,...._ .....

~~~ilJ~·

rw&t- (."'"" ........ _......
~_......_

......... ~~·­
.....,_....,....,.....,n_,_j
...".................. _...,.

"".Sh.oan_.......,..,...,._
4-to•.-ilpon"clila......,..,..

----~-­
,...,_
... ~"'*'"-"'~1

,__....,,__ .... ,...Ur..,..J.
- - ......._......, iolpdкuo

o.l'fМl"~opmf- ......

-<"OllllnpA'.,..~w4d;,

,Wo" · - ............ "npWn.

-..i.iю1..-e1C8tl

.............

,,.,,,a."-~-.-rqи-i

,..""liiLu"lliftl"ihcni<!.,..Ь•
wrc---".11au..i-i.P"f""'f'

..--i..o.....-W.~

......m

~-----i.-~wudo1<1n
--~-'J'f""-

widi-Nl181fN111amu.il.,_I_.._~ ... - - ......
~•lflll

ft~мtiur ... _

,ia...~"".Jo:~.~-.._...

_....,...i,...iw...-nlКc-.l'tq-n•n•..-...i.

if'i'I• ..,..-i.-.

...

...." .......... (S--daiiapl8D~

d&>-

И.04'1""""'Рt.о--~...._.,._...,...

_.~

......._~qcn..

ia.-a..,o..-alf'IO~-

• •-.dupuoan d i.nc .X...t

iup" jlf'a"ll""• n •.,... тcpolllllo dic-t «Dofi>I

.- r-...-.м •

___ __

....... -.1... ~ ......
w..." ...... _.,...."".~

..,...ы-;

"

~.,...tcuiuocpu11<11-ote"1'8p..~
dln~ .• i.м.1" ....1«q1ai•
~..Н..."p11<pU.oucna!111Wi1
l\orl>o . - . - . . Nш.11"' fupo-io..

~lfi

__.._,"qurwo&.Ьci.t.t..­

~.od"-...a.<UIOOl'~.l·~lk,tn.ooL...C..ad ......

•

....... ,.,..." ......... ..r.

..........

1.;r1c-i--11-.w.""-aw".P"J'I........ ~

.............. -..r;...l!Ьn!Ь....Ь.~i"...,.,...

c-.rw*om........,....,,1111!."...wi..~..._•-..a..-.

•....-&m.-.od" ......_,Jмv.;,.,dlpWqw~Ь....

МCN811diii~чiк .... - - . q " u . - \ o l -".dlupa.N'-klln~IЬwo.Joiol- . . . . ~ .........

~'f"<-_,...-."'J'Wlaf\.wl--~~

~w,...-a•U~uldoaм.an~do.

.....i.:t-- ........,_ . . .

i-.....ь.-...oмuclk.11;...,J • ..JМ,_\R_......,._

--~"-""",...,.uiw..&---·--"""pWr:u-• .... -ЧU-.iмt• ..... M"...,.__
~-"lnlllnwl!-llllltpdat.&lipoih ......

-.,..i.w,.w.u. ..... .i......-м..i" ...... ...,...__...

...-..•~!Wfl'l-I08

Глава

....

~-

9. Главное о цвете 133


темно-зеленый и насыщенный сине-фиолетовый,
но у стрелиции как раз такая цветовая схема.

Если в вашей верстке размещена цветная

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

Весь фокус в том, чтобы смотреть
и видеть. Изучите задействованные

в макете фотографии. Доминирую­
щие цвета подскажут, какой должна

быть цветовая гамма.

ЦВЕТОВОЕ КОЛЕСО

ТЕОРИЯ ЦВЕТА
Некоторые знания в области теории
цвета и принципа использования

цветового колеса позволяют избежать
многих затруднений и определиться

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

физику и химию отложим в сторону.

«Рождество,
короли и си­

ние джинсы».
Заучив эту

фразу, вы за­
помните три

первичных

цвета и до­
полнительные

к ним цвета.

Цвет

-

это свет, наблюдаем ли мы его как свет от наших мониторов

или как отраженный свет на запечатанной поверхности, например

на бумаге. С технической точки зрения

парадоксом,

-

-

возможно, это покажется

белый представляет собой смешение всех цветов

видимой человеческому глазу части спектра, а черный

-

это от­

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

А черный цвет вообразите как вакуум в космосе, без света и звезд.
Но такие размышления, пожалуй, приведут нас к физике и химии.
Так что переходим к цветовому колесу.

«Рождество, короли и синие джинсы)). Заучив эту фразу, вы запом­
ните три первичных цвета и дополнительные к ним цвета. Цвета

Рождества

-

красный и зеленый. Королевские цвета

-

пурпурный

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

расположения на цветовом колесе

-

в дизайне вещи прямо-таки

необходимой.

Цветовое колесо выглядит как часы с круглым циферблатом: на нем
присутствуют три первичных, три вторичных и шесть третичных

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

134

Добавь воздуха!


Первичные цвета. Это желтый, красный и голубой . Про­

••

должая аналогию с циферблатом, они расположены через четыре
«часа)) друг от друга

на

-

12, 4 и 8 «часах))

соответственно. Таким

•

образом эти цвета образуют треугольник.

Вторичные и дополнительные цвета. Затем мы можем
получить дополнительные цвета, смешивая два первичных цвета.

Возможно, кое-что вы помните из начальной школы. Если смешать
желтый и синий, получится зеленый, расположенный на колесе
между желтым и синим . Если смешать синий и красный, получится
пурпурный, расположенный на колесе между синим и красным.

Первич-

Первич-

НЫЙ

ный

Желтый

Вторичный

Дополнительные

+Синий

=Зеленый

Красный и зеленый

Синий

+Красный

=

Красный

+Желтый

=Оранжевый

Желтый и пурпурный

Фиолетовый

Синий и оранжевый

Если смешать красный с желтым, получится

-

правильно

-

оран -

жевый, расположенный между красным и желтым.

Заметьте, каждый вторичный цвет расположен на цветовом колесе
точно напротив основного цвета, который он дополняет. Согласно
правилу «рождество, короли и синие джинсы)), зеленый находится
напротив красного, пурпурный

вый

-

-

напротив желтого, а оранже­

Аналоrичные цвета.
Аналогичные цвета
расположены на цветовом

напротив синего.

колесе друг рядом

Теперь вы знаете об отношениях между первичными и вторичны­

с другом. Несмотря

ми цветами: смешение двух первичных образует вторичный цвет,

на то что третий набор

являющийся дополнительным для третьего первичного. Теперь вам

захватывает третичные

также известно, как создавать цветовой контраст: парные цвета на

цвета, он считается
аналогичным.

колесе расположены друг напротив друга.

Первичный

Вторичный

Третичный

Желтый

+Оранжевый

= Желто-оранжевый

Желтый

+Зеленый

=

Желто-зеленый

Синий

+Зеленый

=

Голубовато-зеленый

Синий

+

Фиолетовый

= Сине-фиолетовый

Красный

+

Фиолетовый

= Красно-фиолетовый

Красный

+Оранжевый

= Красно-оранжевый

•• •
•• •
•• •
Глава

9.

Главное о цвете

135


Теплее, теплее ...
Один и тот же дизайн
реализован в теплой

(слева) и ХОЛОДНОЙ
цветовой гамме

(справа). Какой из
них заметнее? Какой
дизайн предпочли

бы вы?

candy candy
Аналоrичные цвета. Итак, вы знаете, как взаимосвязаны
цвета, расположенные на колесе рядом. Их соединение дает про­
межуточные цвета, а еще они связаны потому, что содержат не­

которое количество тех цветов, которые находятся рядом с ними.

Мы называем их аналогичными. Сочетание аналогичных цветов
создает единство.

Хотя первичные цвета

-

это желтый, синий и красный, другие

тройки с цветового колеса тоже образуют приятные цветовые пали -

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

тройку цветовой гаммы.

Третичные цвета. Смешайте первичный цвет с ближайшим
к нему вторичным, и получится более изысканный промежуточный
третичный цвет.

Таким образом, цвет может быть смешением цветов. Желтый,
например, уже не просто желтый. Перед вами первичный чистый

136

Добавь воздуха!


желтый? Или это более холодный желтый с оттенком зеленого?

Возможно, вы видите более теплый желтый с примесью оранжевого.

Температура цвета. Понятие о теплых и холодных цветах
открывает еще одно свойство цветового колеса: одна его сторона

теплая, а другая
желтая сторона

-

-

холодная. Очевидно, что красно-оранжево­
теплая, а зелено-сине-пурпурная

-

холодная.

Возможно, немного менее очевидно другое: можно «подогреть»

Нейтральнь1й

серый. Все квадраты
в центре окрашены

в пятьдесятипроцентный

серый, но каждый из них
выглядит по-разному.

Серый изменяется
визуально, в зависимости

холодный цвет, добавив в него немного красного, оранжевого или

от того, с каким цветом

желтого. Или же «охладить» теплый, добавив немного зеленого,

соседствует.

синего или пурпурного. Именно по такому принципу работают
контрастирующие цвета. Обратите внимание, что каждая пара
цветов, расположенных на колесе друг напротив друга (а потому
контрастирующих), включает в себя и теплый, и холодный цвета.
Другой полезный факт о теплом и холодном цветах сводится

к тому, что в макете теплый цвет кажется расположенным ближе,
а холодный

-

дальше. Такое знание поможет вам выделить одни

элементы макета и сгладить другие.

Но это еще не все о цветовом колесе. Мы смешивали схожие краски,
расположенные на колесе по соседству, и соединяли контрастиру­

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

случится нечто неожиданное: мы получим серый! Возможно, вам

удавалось достичь такого эффекта в начале вашей дизайнерской
карьеры, в детстве, когда вы рисовали пальчиковыми красками.

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

ющемся с любым другим. Серый отражает оттенки контрасти­

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

голубоватый оттенок, а голубая рубашка тот же самый серый ко­
стюм сделает теплее и подарит ему слабый оранжевый тон. В таком
Глава 9. Главное о цвете

137


случае наши глаза распознают

дополнительный цвет, и это
явление называется спонтан­
ным контрастом.

Оттенок, насыщен­
ность и яркость. Цвето­
вое колесо, как мы его описа­
ли, имеет дело с оттенком, или

чистым цветом . Оттенок

-

это ответ на вопрос: « Какой
цвет из имеющихся на коле­

се? » Насыщенность и яркость
описывают другие параметры

цвета. Насыщенность озна­
чает интенсивность опреде­
ленного оттенка, с яркостью

все понятно. Что ж, давайте
поговорим о насыщенности.

Насыщенность отвечает на

вопрос: « Сколько чистого
цвета? » Если вы прольете ви­

ноградный сок на белую ру­

башку, получится фиолетовое
пятно. Количество фиолето­
вого в пятне связано с тем,

насколько сильно рубашка
пропиталась соком. Сначала,
скорее всего, получится хо­

роший такой, насыщенный

фиолетовый. После того как
вы постираете рубашку, пятно

поблекнет, и оттенок станет
менее насыщенным. Теперь,

Один цвет, разная

если вы капнете на пятно от сока горчицы, фиолетовый еще по­

яркость. Если взять

теряет в насыщенности, выйдет менее чистый, более грязный

различные тона одного

оттенок (сероватый).

цвета, создается
ощущение, что в макете
используются
несколько цветов.

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

Параметр яркости соответствует количеству серого (от белого до
черного по шкале оттенков серого), присутствующего в цвете. Яр­
кость отвечает на вопрос: « Насколько светлый или темный цвет?»
Говоря о яркости, мы подразумеваем насыщенность и ненасыщен -

ность тона. Вы хотите добиться пастельного фиолетового? Или тона

138 Добавь воздуха!


«баклажан»? Чтобы получить пастельные, то есть ненасыщенные
тона, нужно разбавить цвет белым (или светлыми оттенками се­
рого). Чтобы получить мрачные, то есть насыщенные тона, нужно
заглушить оттенок черным (или темными градациями серого).
Возвращаясь к пятну от виноградного сока: полинявшее пятно

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

что обеспечило более светлый пастельный тон оставшемуся фио­
летовому цвету. Если бы мы не стирали эту рубашку, то пигмент,

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

Цветовое колесо.

цвет пятна более темным.

Электронная версия.

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

-

это только начало. Чтобы определиться с цветом, надо принимать

Мониторы используют
другой метод

цветообразования. Цвета
на экране образуются
из различных

во внимание культуру, исторический контекст и законы природы,

комбинаций красного,

а также учитывать возможную реакцию людей. Более того, для хо­

зеленого и синего,

рошего цветового дизайна нужно знать технологию цветоделения.

вместо красного, синего
и желтого, используемых

в классической модели

ЦВЕТОДЕЛЕНИЕ

цветового колеса.

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

оказался пошлым розовым. Чистый синий пре­
вратился в сине-зеленый.

Выдержать цветовой баланс при переносе
с одного устройства на другое

-

одна из

сложнейших дизайнерских задач. Чтобы
научить вас ее решать, мы расскажем

вам о технологии цветоделения. Со­

кращения покажутся сперва тарабар­
щиной: СМУК,

RGB

RGВ-МОДЕЛЬ

и все такое ... Но

ЦВЕТОВОГО

на самом деле, это просто.

КОЛЕСА

Цвет на печати/цвет на экра­
не. Самый короткий ответ на вопрос
«Что стало с моим цветом?» таков: мо­
ниторы и принтеры «говорят» на разных

языках. Мониторы и принтеры обраба­
тывают цвет по двум совершенно разным

технологиям. Цвет на мониторе формируется
аддитивным способом, а цвет на печати

-

суб­

трактивным. При создании электронного цвета све­

товые потоки накладываются один на другой. Печатные

цвета - это сочетание бумажного носителя и типографской краски.
Глава 9. Главное о цвете

139


Цветовое колесо, как мы уже говорили, основано на печатаемом

цвете и субтрактивной системе цвета: поскольку белый

-

это

сумма всех цветов и поскольку в основном мы запечатываем бе­

лую бумагу, то чтобы получить конкретные цвета на печати, мы,
теоретически, должны «вычесть» цвет из белого

бумажного фона, который отражает белый свет.

Print

Prlnt Prestt: :о=([C
= "="•
=m=I =====~
Prlnter: : PostStript<i> Flle

В отличие от субтрактивного цвета, который мы

РРО: ( Dtvice lndtpendent
1

с;.,.. ,,а1

"...
...........

видим на бумаге, электронный цвет возникает

Color Mw91rnent

благодаря аддитивной модели цветообразова­

Print

ния . Помните: черный цвет

Document (ProRlt: U.S. Web C011ttd (SWOP) v2)

QProor

(ProRle N/AJ

-

это отсутствие

цвета, а наши электронные мониторы, опять же

Options Color H•ndling:

теоретически, в выключенном состоянии черные.

1ltt lnOeslgt1 O.ttrmint ~

Выходит, чтобы получить цвет на электронном

Printer Profll«ia •• :1"ц.11i.1iiMIJdf13ffiffii;'Щ•lwl1M
Worklng СМУК - U.S. Wtb Co.attd {SWOP) v2
Output Colo'

экране, мы должны буквально добавить света.

Сошd

FOGRA27 050 12647-2 :2004)
FOGRA39 050 12647-2:2004)
Coated CRACoL 2006 (150 12647-2'2004)
Сошd

Dtscr1ptlon
s.Jtc:trtttD!'Ol\.i.

Помните, три первичных цвета на цветовом ко­

Europe ISO Co.attd FOCR.A.27
Color 2001 COllttd
J.ap.an Color 2001 Unco.attd
~.an Color 2002 NtWSP'!ptr
J~ Color 2003 Web COllttd
Ji.pin Wtb Co.attd (Ad)
U.S. Sheetftd COllttd v2
U.S. Shнtftd Unco.ated v2
J•рм

лесе? Это синий, красный и желтый, они же пред­

ставляют собой первичные цвета в субтрактивной
модели. При печати синий становится голубым

(cyan), красный -

U.S. Web COlttd <SWOP! v2
U.S. Web Unco.attd v2

остается желтым

Urк01ttd FOGRA29 (150 12647-2 :2004)
Web c"ttd FOGRA28 050 12647-2:2004)

СМУК. Соединяя голубой, пурпурный и желтый,

Wtb COAttd SWOP 2006 Cr.tdt 3 Pi.ptr
Wtb Co•ttd SWOP 2006 Cri.dt S Pi.ptr
Eurosc.aJe Co.attd v2
Eurosc•lt Unco.attd v2
Ceneric СМУК Profite
J.ap.an St.and.ird v2
Photoshop 4 Dtf.ault СМУК
Photoshop S Dt:f.ault СМУК

Управление цветом.
Применяйте к макету те
же цветовые профили,

пурпурным (magenta), а желтый
(yelJow). Эта система называется

теоретически, мы получаем черный (Ьlack, или

key

(ключевой цвет),

-

буква К в СМУК), хотя

принтеры расходуют черную краску, а не смеши

-

ваютСМУ.
Но в электронном пространстве мы начинаем

с черного, так что здесь нам нужна другая цветовая система. Не­

обходим эффективный способ получить белый цвет. Такая система

что и к внешнему

называется

устройству (да. это

новятся первичными в аддитивной модели, поскольку наложение

принтер). Тогда у вас

этих цветов друг на друга формирует белый. Глядя на цветовое

RGB:

красный

(red), зеленый (green),

синий (Ьlue) ста­

будет больше шансов

колесо

получить на выходе

дает пурпурный, сочетание синего и зеленого

запланированные цвета.

красного и зеленого обеспечивает нам желтый цвет. Другими сло­

Скриншот(ы)

Adobe

воспроизводятся

с разрешения

Adobe
Systems lncorporated.

RGB, интересно отметить, что сочетание синего и красного
- голубой, а сумма

вами, в аддитивной модели СМУ становятся вторичными цветами.
Короче говоря, ваши распечатки не совпадают с тем, что вы видите

на экране, потому что экран говорит по-французски, а принтер
по-португальски. Двум устройствам нужен переводчик. Такой

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

Управление цветом. Управление цветом -

это термин,

обозначающий последовательность действий, которые вы вы­

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

140

Добавь воздуха!


0LD-f'ASHIONED
STRAWBERRY
ICECREAM

Голубой

Голубой

+

Пурпурный

___
.......
...... ..._
_
....__.,..._""'·_
_
____
. ___
___
..--"""""'
..._
---.._...._"
" _...

.,.

""

__.,.~"

.......
-___
...
--.--........
.........
...._

.... __.
..,,"
_...........,_..._
..........
_..._......,._,......._.

Голубой

+

Пурпурный

+

Желтый

Голубой

+

Пурпурный

самим устройством или системными установками компьютера.

+ Желтый +

Черный

Полноцветна11 печать.

Если ваш монитор откалибровать должным образом, его установки

При полноцветной печати

совпадут с установками домашнего или промышленного принтера.

голубая, пурпурная,
желтая и черная краски

При более серьезном подходе к изображениям и верстке применя­

накладываются одна

ются цветовые профили, которые обеспечивают точный

на другую.

всегда

-

-

хотя и не

«перевод» цвета с устройства на устройство. IСС-профиль

(разработан Международным консорциумом по цвету)

-

всего

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

ли в его основе аддитивный формат

RGB

(веб-дизайн) или суб­

трактивная схема СМУК, используемая для печатной продукции.

ФОРМАТСМУК
Дизайнеры-полиграфисты работают в цветовом формате СМУК
и готовят к печати все изображения и макеты в этой системе. Са­

мая распространенная технология, используемая в полиграфии,
Глава

9. Главное о цвете 141


называется цветной (четырехкрасочной, полноцветной) печатью.
Четыре цвета краски

голубой, пурпурный, желтый и черный

-

-

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

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

-

С, М, У и К. Данная

техника называется цветоделением. Затем краски последовательно

Предупреждающий
знак. Знак «вне гаммы»

наносятся друг на друга, образуя цветное изображение на бумаге.

сигнализирует,

Как вы понимаете, чтобы сделать четыре идеально совпадающих

что выбранный вами

формы для каждой страницы, нужен некоторый опыт. Если в про­

цвет не будет адекватно

цессе печати бумага хоть чуть-чуть сдвинется, то распределение

передан при печати.

цветов, то есть совмещение, пройдет неудачно. А раз так, то фи нальные оттиски получатся смазанными.

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

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

01.: 1481

даже текст получился четким очень тяжело. Печать

О о: Fi7l
о ь: Гs2l

составного черного путем наложения голубого, пур­

с:/611 "

м:[ЗSГ "

0

v:[iOol "

Onty W~b Colors

Скриншот(ы)

К:[iil"

пурного и желтого потребует много краски. Зачем
использовать три краски, если достаточно одной?

Подготовка документа к печати в типо­
графии. Когда вы готовите к печати полноцветный документ, его и сопутствующую графику следует

Adobe

воспроизводятся

сохранить в формате СМУК. Также нужно уточнить эти цвета

с разрешения Adobe
Systems lncorporated.

непосредственно в программе (параметры СМУК). Параметры
СМУК

-

это несколько двухзначных чисел, показывающих, сколь­

ко процентов С, М, У и К в том или ином цвете. В большинстве
графических пакетов есть возможность самостоятельно задавать
такие цвете, и всегда присутствует палитра цветов, для которых
корректные параметры уже заданы.

При выборе цвета на палитре следите за предупреждениями о том,

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

-

не единственный возможный вариант.

Документы можно напечатать, используя только одну, две или

три краски. Такой процесс называется «печатью дополнительной
краской».

142

Добавь воздуха!


"'.

Вь1бор плашечноrо цвета. При выборе
плашечных цветов дизайнеры используют

веер

...

Solid to Process Guide от Pantone .
PMS - самая известная

Система

"'

.......
·~
r

и распространенная на настоящий

момент в мире система подбора

..·

плашечных цветов.

•

i

Печать дополнительной краской. Вместо того чтобы
пытаться создать конкретный цвет при помощи СМУК, можно
выбрать заранее смешанные цвета в специальном каталоге. Ком­
пания

Pantone запатентовала цветовую модель, называемую PMS'"
(PANТONE MATCHING SYSTEM'"), - самую распространенную

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

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

две формы. Для трех цветов берут три формы. Если полноцвет
четырехкрасочная печать

-

-

не нужен, то печать одной-двумя до­

полнительными красками представляет собой вполне приемлемый
с точки зрения затрат вариант.

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

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

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

Глава

9. Главное о цвете 143


Одинаковый цвет важен, например, для идентичности

®

бренда. Официальные цвета Университета Южной
Флориды

-

зеленый и золотой, его логотип печатается

с использованием двух плашечных красок:

343 (green) и PANTONE 4515 (gold)
(metallic gold) .

или

PANTONE
PANTONE 872

Если необходимо напечатать и полноцвет, и пла­

UNIVERSITY OF
SOUTH FLORIDA

с плашечным цветом к полноцветной печати, так что

Определение цвета.

вы получите и то и другое в лучшем виде. Многие ти­

При воспроизведении логотипа

пографии располагают многокрасочными печатными

шечный цвет, то есть несколько возможностей. Во­

первых, печать не ограничивается четырьмя формами.

Работник типографии может добавить еще форму

Университета Южной Флориды

машинами, способными напечатать шесть форм за раз.

для получения зеленого и золотого

Теоретически можно добавить еще, но чем больше

соответственно в различных источниках

форм требуется, тем дороже обойдутся вам услуги

используются следующие параметры

типографии.

цвета:

Другой способ : взять составной цвет вместо выбран­

Для печати плашечной краской:

ного вами плашечного. У

PANTONE® 343 и PANTONE® 4515

Например

100

цвет, выбран­

0:8:47:23 -

золотой. Однако имейте в виду, что СМУК-цвета не

М=О У=69 К=60

эквивалентны плашечным, они просто похожи. Если
вам нужен полноцвет и точный плашечный цвет, до­

С=О М=8 У=47 К=23

бавьте пантон к полноцветной печати.

Для веб-приложений
#00573С

100:0:69:60 дает нам зеленый

ный для Университета южной Флориды, а

Для полноцветной печати
С=

Pantone есть специальная та­

блица соответствия плашечных цветов цветам СМУК.

Для представления логотипа Университета в веб-среде
используется другая система, и потому перейдем от технологии
цветной печати к технологии электронного цвета .

#DFDOAS

ФOPMATRGB
Дизайнеры электронных приложений работают с форматом

RGB.

Разумеется, здесь можно не ломать голову над плашечными цвета­

ми и совмещением цветов при печати, зато есть другие проблемы,
связанные с

RGB.

Получение различных цветов на экране зависит от насыщенности
или, если говорить о свете, яркости красного, зеленого и синего

цветов вместе со всеми их разнообразными комбинациями. Это
как если бы для каждого из соединяемых друт с другом RGВ-цветов
у вас был переключатель дальнего и ближнего света фар. Одновре­
менное включение и использование трех переключателей дальнего

и ближнего света различной мощности дает нам различные цвета.
В системе

RGB

у каждой электронной «краскю> красный, синий

и зеленый имеют определенный численный параметр от О до

144

Добавь воздуха!

255,


показывающий количество цвета: О

-

его нет;

255 -

яркость. Черный, например, будет иметь параметры

абсолютная

000:000:000,

что означает, что красный, синий и зеленый цвета отсутствуют.

Белый представлен цифрами

255:255:255,

то есть красный, синий

и зеленый цвета включены на полную яркость.

Поскольку определять девять чисел абсолютно для каждого цвета

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

нациям цифр/букв в шестнадцатеричной системе. Каждый цвет

Pantone имеет конкретный номер, определяющий формулу краски,
а каждый шестнадцатеричный цвет имеет конкретный набор цифр

Вернемся к зелено-золотому логотипу Университета: его шест­

надцатеричные веб-цвета представлены, как #00573С (зеленый)

#DFDOA5

различаются,

поэтому ди­
зайнеры благо­
разумно про­
веряют, как

и букв, соответствующий формуле яркости.

и

Мониторы

(золотой).

смотрится их

детище в раз­

Все вроде бы просто, но ... та-дааам! .. не все компьютерные мони­
торы одинаковы. Их качество и возможности отображения цветов
также различаются. Так что конкретные шестнадцатеричные значе­
ния оттенков логотипа Университета на разных мониторах могут
дать разные цвета, лишая смысла идею уделять столько внимания

подбору этих оттенков.

ных браузерах
и на разных

платформах.

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

ны, на которых аудитория увидит электронные цвета. Возможно,

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

-

-

так исторически

используют «безопасные)) для Веб палитры цветов.

На большинстве мониторов они выглядят одинаково, однако эта

палитра довольно ограниченная и (уж простите) кричащая. По
мере того как качество мониторов улучшалось, дизайнеры все

чаще отказывались от безопасных палитр. Тем не менее мониторы

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

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

PMS.

Создавая дизайн для

веб- приложений, вы обращаетесь к шестнадцатеричной системе
и RGВ-цветам.
Глава

9. Главное о цвете 145


Заметность
и удобочитаемость.
Сочетайте цвета,
соблюдая осторожность,
особенно если
размещаете цветной

СОВЕТЫ ПО РАБОТЕ С ЦВЕТОМ
Выберите один основной цвет и добавьте один
или два акцентных цвета. Как говорил великий архитектор­

модернист Людвиг Мис ван дер Роэ: «Меньше

-

значит больше)).

текст на цветном фоне.

Пусть палитра цветов работает на коммуникацию.

Если не получится

Думаете, эти контрастирующие цветовые пятна хорошо дополняют

создать цветовой

друг друга? Или предпочитаете более спокойную схему холодных

контраст, текст будет
нечитабельным.

оттенков? Возможно, монохромное изображение с различными
вариациями тонов и текстур

-

как раз то, что нужно. А еще в ва­

шем распоряжении есть насыщенность и яркость.

Заметный и удобочитаемый дизайн. Учитывайте цели
дизайна и те условия, в которых зрители будут его воспринимать.

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

где абзацы разграничиваются цветом. Какими бы ни были условия,
заметный и удобочитаемый дизайн не теряет своей значимости.

Удобочитаемый дизайн означает, что его легко читать, а замет­
ный

Видно

-

что его должно быть хорошо видно. В любом случае вам

нужен контраст. Придерживайтесь сочетаний «темное на свет­
лом)) или «светлое на темном)). Если только вы не хотите создать
психоделическое настроение у читателей, держитесь подальше от

насыщенного цвета для текста и фона, поскольку это вызывает

эффект колебания, тяжело воспринимаемый глазами.
Что касается удобочитаемости и заметности, подберите параме­
тры яркости. Светлый шрифт на темном фоне бросается в глаза
(внимание: выворотка!), темный шрифт на светлом фоне

-

тоже.

А вот сочетания «темный на темном)) или «светлый на светлом))

контраста не дают и потому незаметны и неудобочитаемы.

Используйте цветовые пятна для визуального
выделения. Пятна цвета

-

как макияж. Возможно, немного

красной помады (или красная бейсболка)

-

это все, что вам нужно,

чтобы оживить свой облик. Вы в буквальном смысле добавляете

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

Если у вас черно-белая композиция, используйте насыщенный

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

Другой вариант работы с цветом

-

использовать менее насыщен­

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

146

Добавь воздуха!


вого пятна, можно приглушить его до умеренного

персикового и залить им большее пространство.

Соблюдая меры предосторожности, нанесите лег­
кие оттенки, например светло-оранжевый, поверх

темного шрифта без потери удобочитаемости.

ЦВЕТ РЕШАЕТ
Давайте повторим, чему мы уже научились:

1.

Черпайте вдохновение из природы, культуры,
истории и цветового колеса.

2.

Фраза «Рождество, короли и синие джинсы» на­
помнит о первичных и дополнительных цветах.

3.

Для яркости, или интенсивности, берите ч11стые
насыщенные оттенки.

4.

Для получения пастельных оттенков «разводите»
краску белым.

5.

Для получения более мрачных оттенков «разво­
дите» краску черным.

6.

Для создания контраста сочетайте:

•

противоположные друг другу на колесе цвета;

Визуальное

•теплые оттенки с холодными;

•

впечатление.

любой оттенок с серым;

Ярко-розовое пятно
на черно-белом макете

•светлые и темные тона (шкала оттенков серого).

немедленно становится

7.

Для соблюдения единства выбирайте аналогичные цвета на

фокусной точкой.

колесе и цвета одинаковой насыщенности и яркости.

8.

Три основных <<языка» работы с цвето:.1 -

•

это:

СМУК, образующий цвет при наложении отдельных слоев
(полноцветная печать);

•

Paпtone

(PMS) -

система подбора плашечных красок, в кото­

рой используется цифровая идентификация цветов;

• RGB -

система аддитивного цветообразования, передает

цвета на экране в шестнадцатеричном представлении.

9.

Работая с цветом:
•не злоупотребляйте одной и той же палитрой

-

дополни­

тельной, аналогичной или монохромной;

•дизайн должен быть заметным и удобочитаемым;

•

используйте цветовые пятна для визуального выделения.
Глава

9. Главное о цвете 147


И самое главное, не забудьте использовать цвет

J'Jla

для того, чтобы создать впечатление, показать,

~-

Annual
5pring Fling

что с чем соотносится и эмоционально встрях­
нуть зрителя.

Weekend

• • • ПОПРОБУЙТЕ ЭТО

5aturday, April 7

1• Соберите коллекцию печатных изданий, в ко­

9:00 a.m- 5:00 p.m

торых цвет является главным и решающим

Easur egg roll • 5cavenger hunt •
flaliyfirman·m.tls intМ
petti/19 zoo • and more!

элементом дизайна. Вы можете найти реклам­

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

обертки от конфет и других сладостей, пакеты
для покупок, упаковку фастфуда

MID

СПУ

zoo
OR INIORМATION CALL

555-214-7852
'WWW.МI DCГТYZOO.ORG

-

все, что

напечатано.

Напишите короткий абзац о каждом предмете
коллекции, пояснив, почему дизайнер выбрал

именно такой цвет. Выбор цвет продиктован
историей? Эмоциями? Культурой? Сыграло

ли цветовое колесо какую-то роль в выборе
основных или вспомогательных цветов?

Для создания

2.

Найдите три изображения, демонстрирующие, что один и тот

контраста сочетайте

же цвет может сообщать разный смысл в зависимости от куль­

противоположные

туры. Подберите три изображения, в которых красный цвет

(дополнительные) цвета

использован для передачи различных символических посланий.

на цветовом колесе.

3.

Представьте себе, что вы должны разработать бренд нового
ресторана. Придумайте ему название, затем выйдите из дома

и позаимствуйте цветовую палитру у природы. Сделайте не­

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

4.

Вас наняли в качестве сценографа для постановки мюзикла,
действие которого происходит в 90-е. Подберите историческую

цветовую палитру для общего оформления спектакля и обо­
снуйте свое решение при помощи графических аргументов.

PANTONE® и другие торговые марки Рапtопе являются собственностью
Рапtопе LLC и используются с письменного разрешения.

148

Добавь воздуха!


u

визуальнь1 и акцент

фотографии и иллюстрации


к

онечно, вполне можно напечатать мате­
риал или сделать его электронную вер­

сию, не используя никаких изображений.

Однако абсолютное большинство из нас любят,
когда текст сопровождается иллюстрациями.

И если говорить о коммуникации, то тут визу­

альные объекты важны не меньше, чем текст.
Изображения

инфографика

-

фотографии, иллюстрации,

задают общий тон, заинтере­

совывают читателя, предоставляют дополни­

тельную информацию и визуально разбивают
устрашающие текстовые блоки. Правильное

Creating
community and
academic
partnerships for
the health of
underserved
communities.

изображение может привнести в ваш макет
цвет, текстуру и динамику. Изображения

-

это

точки, на которые зритель смотрит в первую

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

вильное направление: с чего начать, куда от­
правиться затем и на чем закончить.

При выборе правильных изображений для кон­
кретного проекта нужно учитывать несколько

факторов, таких как сюжет изображения и его
качество.

СЮЖЕТ ИЗОБРАЖЕНИЯ
Разумеется, отобранные вами фотографии и ил­
люстрации должны соответствовать общему
стилю проекта, над которым вы трудитесь, а за­

висит он от того, что вы или ваш босс запла­
нировали или, что важнее, от того, что тронет

AREA HEALTH

ШUCAТION CENТERS

вашу аудиторию. Вы же не поставите клоунов

на обложку буклета инвестиционного банка.
Допустим, вы действительно подыскиваете

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

Воспроизводится с разрешения

Florida

АНЕС

150

Добавь воздуха!

Network.

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

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

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

-

отбро­

сить все плохие с технической точки зрения снимки. Это как если
бы вы сразу отправляли в корзину резюме соискателей, пишущих


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

-

нельзя.

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

Делая снимок, убирайте лишние, отвлекающие на себя внимание
предметы с заднего плана. Если это невозможно (или недопустимо,

в случае репортажа), выстройте кадр так, чтобы их не было видно.

Правило третей.

Избегайте композиций, в которых детали заднего плана (напри­

Если мы разделим этот

мер деревья или фонарные столбы) будто бы вырастают из голов

снимок сеткой из девяти

людей. Чтобы убрать отвлекающие детали, выставляйте небольшую

квадратов, то увидим, что

глубину резкости, тогда главный объект останется в фокусе, а фон

лицо объекта приходится
на пересечение двух

будет размытым.

линий сетки. Это делает

Фотографии с чем-то занятыми людьми интереснее кадров, на ко­

композицию фотографии

торых люди просто стоят. Нет ничего глупее и хуже постановочных

более интересной.

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

неудачны также снимки, на которых группа людей (члены совета
директоров, комитета, команды) выстраивается в линию, как в по­

лицейском участке при процедуре опознания преступника. Лучше

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

-

и композиция

сразу же улучшится.

Тем не менее люди

-

это всегда хороший объект для съемки,

особенно привлекательны кадры, на которых они смотрят прямо

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

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

давно прошли те времена, когда белые изображали собой все че­
ловечество. С точки зрения тактики, вы хотите, чтобы конкретная

аудитория идентифицировала себя с людьми на фотографиях.

Фотография с хорошей композицией. Техническая
сторона

-

не единственный критерий, по которому судят об удач­

ности снимка. Скучный кадр с превосходным фокусом, сохранен­
ный в

tif с разрешением 300, -

все равно паршивый снимок. В ос-

Глава

10. Фотографии и иллюстрации

151


нове хорошей фотографии

той, которая станет привлекательным

-

дополнением к вашему документу,

-

лежит хорошая композиция.

Профессиональные фотографы знают, что лучшие фотографии
обладают следующими общими характеристиками:

1.

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

-

это применить правило третей. Представьте

себе снимок как сетку

3

х

3,

затем поместите фокусную точку

на одно из четырех пересечений линий сетки.

2.

Заполненное

Заполненное кадрирование. Объект, занимающий весь кадр,
совершенно недвусмысленно сообщает, в чем суть снимка, по­

кадрирование.

скольку изображение лишено отвлекающего фона. Радикальная

Радикальная обрезка

обрезка и крупный план особенно интересны, поскольку за­

и крупный план особенно

ставляют нас взглянуть на объект по-новому.

интересны, поскольку
заставляют нас взглянуть

на объект по-новому.

3.

Естественные линии, обеспечивающие динамику. Здесь, как
и в визуальной коммуникации в целом, вы стремитесь контро­

лировать движение взгляда по фотографии.

ФОРМАТЫ ФАЙЛОВ И ИХ ПРИМЕНЕНИЕ
Форматы для печати

EPS

Форматы для Веб

Предназначен в основном для файлов

Некоторые браузеры и программы для веб-

с векторной графикой, обработанных

дизайна поддерживают векторную графику.

математически, а не пиксель за пикселем.

Не настолько универсален , как

JPG и GIF

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

Используется для двухкрасочной печати ,
когда предполагаются только две плашечные краски

GIF

Лучший формат для веб-графики с обширными цветовыми областями (логотипы

и декоративные надписи). Поддерживает
прозрачность

JPG

Не рекомендуется использовать в пе-

Идеален для публикации в Сети . Используйте

чатной продукции, хотя это допустимо.

программу для обработки фотографий, чтобы

сжатый файл, поэтому хуже смо-

оптимизировать файл и сохранить его в раз-

JPG -

трится на печати

TIF

Лучший формат для фото, которые затем
будут напечатаны в типографии

152

Добавь воздуха!

решении 72 dpi (точек на дюйм)


. . "-··------- ~-:V,,..__.
----..~'.,·....
...
-~- •..::-.-~~
.

' C"~ROIJSF.[,["
\ "_.;.·. \\rORКS ---~

1

·-·...·-·~--~ i

'·

----- - - - -

4.

'1

./

-~~---······....

Интересный свет. Мы уже упоминали о градационной шкале.

Отличия

Игра световых бликов и теней также создает хорошую, «атмос­

для веб-rрафики.

JPG

от

GIF

Оба логотипа вверху

ферную)) фотографию.

были оптимизированы
для отображения

РАЗРЕШЕНИЕ, ФОРМАТ, РАЗМЕР

в электронном виде.

Разрешение чрезвычайно важно для цифровых изображений. Если

в формате GIF (слева)

у снимка недостаточно высокое разрешение

смотрится лучше, чем

Однако логотип

обычно описыва­

-

емое как количество точек (пикселей) на дюйм,

-

в формате JPG с белой

в результате

областью вокруг него.

изображение будет нечетким и некачественным.

Текст на логотипе слева

Однако в зависимости от ситуации требуется разное разрешение

гораздо четче, а поскольк

изображений. Все зависит от назначения картинки. Для печатных

формат GIF поддерживае1

глянцевых изданий

прозрачность, и нет

-

журналов, буклетов и годовых отчетов

-

оптимальное разрешение обычно составляет

поэтому

большинство дизайнеров просто

для всех

300 dpi,
используют 300 dpi

белого прямоугольника,
как на изображении

в формате JPG.

изображений, предназначенных для печати. К газетной графике
требования иные: из-за специфических характеристик печатных

машин и бумаги используется разрешение

200 dpi,

поскольку

лишние точки на впитывающей бумаге приведут к тому, что изо­

бражения будут растекаться.
Для веб-графики необходимо более низкое разрешение (обычно

72 dpi).

На экране изображения с низким разрешением смотрятся

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

Форматы файлов

-

тоже важный фактор, которым нельзя пре­

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

Интернета и презентаций сохраняйте изображения в формате

JPG
(Joint Photographic Experts Group) или GIF (Graphic Interchange
Format). Оба формата имеют низкое разрешение, однако GIF подГлава

1О.

Фотографии и иллюстрации

153


Вектор против растра.
Оба круга увеличены
на

1ООО процентов.

Изображение слева
выполнено в векторе,
а правое

-

растровое.

Так как векторная

графика строится на
основе математических

вычислений, ее
можно увеличивать
или уменьшать до

бесконечности без
потери качества.

Растровые же
изображения теряют
четкие очертания, когда
вы увеличиваете их
размер, как показано

на рисунке справа.

держивает прозрачность, а
прозрачность

-

JPG -

нет. В контексте веб-графики

это возможность делать определенные цветовые

группы «невидимыми». Если вы когда-нибудь пытались поме­
стить логотип в формате

JPG

на цветной фон, то сталкивались

с тем, что вокруг логотипа оставался белый прямоугольник

-

то

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

JPG -

идеальный формат для Интернета, но он не годится для фай­

лов, предназначенных для печати.

JPG -

это формат со сжатием,

то есть после каждого открытия, редактирования и сохранения

он теряет часть своих данных. Для печатной продукции лучшим

форматом является ТIF

(Tagged Image Format), это файл большего

размера, и все данные остаются в целостности. Так что для печат­
ных изделий выбирайте ПР.

Еще один тип файлов для печати

- EPS (Encapsulated Postscript) -

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

EPS,

как и некоторые фотографии, содер­

жащие векторные дополнения. Обычно формат
логотипов и, как и

GIF,

EPS подходит для

он поддерживает прозрачность.

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

между собой? Хотя мы уже определили, что для печати требуется
разрешение

300 dpi, а для размещения в электронном виде - 72 dpi,

все сложнее, чем кажется. Возьмем две фотографии:

154

Добавь воздуха!


Одна из них размером
дюйм с разрешением

1х 1
300 dpi,

размер файла 263К.
Вторая

- 4,16

с разрешением

х 4,16 дюйма
72 dpi, размер

файла 263К.
Какой из этих файлов под­
ходит для печати?

Если вы считаете, что для пе­

чати годится изображение
с разрешением

300 dpi,

то

вы ошибаетесь. Пусть раз­
решение и параметры раз­

личаются, но размер файла
(263К) одинаков, а именно

размер файла является опре­
деляющим фактором когда
решаешь, можно использо­

вать файл или нет.
При помощи программы
для редактирования фото­

графий вы можете изменить
размер и разрешение любого

изображения. Но на что вам

1

Где вь1сокое разрешение? Несмотря на то

нужно обращать внимание

что одно изображение имеет разрешение

при внесении изменений,

а другое

так это на размер файла. Как

поэтому оба могут быть использованы для печати

правило, он должен остаться

Сохранение изображения

прежним или уменьшиться.

разрешении без изменения размера файла дает

-

300 dpi,
72 dpi, размер файлов одинаков, и

N11 1 в

высоком

Если в результате редакти -

изображение с физическим размером

рования размер файла уве­

же, как изображение №2.

1 х 1, такое

личился (увеличение раз­

Если для вашего проекта нужны три и более

решения), значит, качество

фотографий, действуйте по тому же алгоритму.

фотографии снизилось (она

Сначала отбросьте низкокачественные снимки,

будет нерезкой и расплыв­

затем сделайте выбор, основываясь на контрасте

чатой, с заметными пиксе­

содержимого.

Изобр. № 2: 300

~lдюймов,

~

лями).

Когда вы увеличиваете разрешение, вы увеличиваете количество

пикселей в изображении, утяжеляя тем самым файл и раздувая
физический размер изображения. С этой задачей программа справ­
ляется плохо, и картинка выходит размытой. Гораздо лучше у нее

получается уменьшать разрешение (и размер файла). В этом случае
выкидываются существующие пиксели, а не создаются новые.

Глава

10. Фотографии и иллюстрации

155


:sw.. .......... a&a.---.pш.
. . . . . . . . . . . . . 111-.ь.а~..

dolupam !'aomian fusi1111ml mal IDDiupao

_.__R~llPllitqш11"::11uraperxan.iml.шdiortpцdam.did

-wicR. otkiiona~-ida ;d......, dal11pп1l'nullТ: ndiWi ...dip<ao
..,......,.....,,

" .... - .

~111in"'8C:lш.iap=iuadolwnч.WЬwnм!IJquidц>'drc.

"'1'<"'1М queiiahipчmque iditvokиxaorra Ч"" n.uк:ldoUllf"" ui

-.t ...... •diш~coqu!dcrutiblllЬ.n1
1-: ~ mqlliaa1 e111pam> n~ cupuwr. JCC::Ulldoono n nmo а ld milltш.
uduilu ~ qiam ...lup.,... lаЬо. 11:.q""' odiuor q>d.it opn11n au
О.Ы. • dolapwpit allqu.uwWn que cus m:li сш "W!l ...d• .,...._ ~
JURWlctЬ.m ~w1ion nonpЬ.tшnis i11m а 'l'Oiorqno nюtia- - -

,_., ulpa

мm.quul'I~ чucdok.щ

m"' pWw-t.-.enck..-.,..

ьir'#Olupgquc:dandioncщmdu.s~doЬ'rpt'Of"lmiШ.corutqllida8upar
quam an Y!>lorpo ГfO't\щrc:m rati ЬЬЬo. luru1, oa:um ~ ~lllOCQ

...._ 1_ ...... .,._, _ , _
-~-~n-aJ

- · ....Ь..J*11....,., ..ь.,,.,w..
/""fWМtn.r~

.,,.,,,. .....

""1!dlndcm lurм COfUC"llU cum

rc nix R!IШ>I ......... i,...... ~ 'l'id ciutat, ocd COl&i &ЬЦquiм: -.~cpichlКinpomвqoaa.~qw.
'IOlum1I01-dolupn-.mdil:ttndllilar"""""~__,.._м....a...
riЬu.d.>c~qui:кaш1N1a.Utdt..di~...--.

....,_CI

....... ~._..

nJ.И..dlri.'J'diqФ~qac:-,_.-oaмl<!l_ ....

dolotpo~~-...ьn.-....----.".-..

..... ...

rilua~~~----A,..,._.....,_.

.l.meJ"toan Cottas:e

Общий и крупный
плань1. Если на макет

8

НЕСКОЛЬКО ФОТОГРАФИЙ

просится больше

Для рекламных проспектов, газетных и журнальных статей и сай­

фотографий, чем одна,

тов часто требуется более одной фотографии. Выбирая несколько

можно взять снимок

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

общего плана (вид

обсуждались ранее. Сначала исключите некачественные изо­

комнаты на фотографии

слева) и один снимок
крупного плана (как тот,
на котором изображена
посуда с синей росписью).

бражения, а затем оцените их на наличие/отсутствие контраста.
(Помните элементы контраста из курса мини-арт-школы?) Суще­

ствует много типов контраста, и в данном случае вам необходим
контраст самих изображений.

Контраст объектов делает

Подумайте о том, чтобы сочетать фотографии, снятые дальним

макет интереснее.

общим планом (большие по размеру), и отличающиеся по со­
держанию выполненные крупным планом, радикальнее скадри­

рованные и больше сфокусированные на конкретном предмете.
Например, снимок на котором запечатлен Гранд-Каньон,

-

это

дальний общий план. Фото кролика, примостившегося на краю
каньона,

-

это крупный план.

Соседство двух фотографий
крупного

-

-

одного общего плана и одного

хорошо иллюстрирует текст. Общий план сообщает

основную информацию: время, место и действие. Крупный план

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

156

Добавь воздуха!


ЭТИКА РЕДАКТИРОВАНИЯ
Если вы уже резвились с программами, редактирующими фото­

графии, то знаете, что фотографию можно изменять как угодно

-

можно превратить ее в акварель или уменьшить объем бедер пер­
сонажа на ней. Совершеннейшая правда, что большинство (если

не все) профессиональных коммерческих снимков подвергается

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

эффекты. И все же если не цельность нашей натуры, то хотя бы

Разнообразие. Мы

професс иональная этика должна руководить нашими решениями

живем в прекрасном

об и з менении той или иной фотографии . Страх лишиться работы

разнообразном мире.

и навлечь на себя судебный иск тоже может быть убедительным

У спешный дизайн отражает

мотивом сознательного отношения к это~1у вопросу.

это свойство и выказывает

Если фотография иллюстрирует новости, то вне зависимости от

ему уважение.

формата и контекста ограничьте редактирование действиями,

Воспроизводится

которые осуществимы в традиционной проявочной. Это сведет ре­

с разрешения

дактирование к обрезке, регулировке яркости, усилению ко нтр а ста

McBг i de, Р С.

J.

Michael

и э кспонированию

(осветлению или
затемнению

кон­

кретных областей
изображения).
Более детальная

обработка таких
снимков

может

повл е чь з а собой
иска ж ение правды.

Данное правило
применимо, кста­
ти сказать, и к но­

востн о м у бизнесу.
З а пределами мира
периодики

пра­

вила более свобод­
ны е. В рекламе, пи­
аре и

маркетинге

фотография про­
сто со здает общую

атмосферу или передает сообщение. Однако имейте в виду, что и здесь не стоит
забывать об истине. Задумайтесь , так ли уж необходимо в вашем

случае чрезмерно приукрашать реальность, вводя в заблуждение
и дезориентируя потребителя . Так что будьте осторожны с худо ­

жественными методами при обработке фотографий .

Глава

10.

Фотографии и иллюстрации

157


РАЗНООБРАЗИЕ

AЬout~GRr~

Rese.vd'I & R!atured Pro,ectS

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

MemЬer

Resourc.es

напомнить вам,

что не следует

равняться на большинство, а по­

ступать так, как должно посту­
Тhе GRN

is committed to aeati"9 tools

пать. Представление людей раз­

алd

programs for enhAncJng t:he puЬlk's
knowfedge а/юиt gtoЬallzation .

личных культур является частью

профессионального мастерства
в журналистике, рекламе и пиа­

ре. Вы ответственны за то, чтобы
О.-. Кlf'an С .

Patel Center for GloЬill SolutIOns
of South Florida
•202 Е. FOWler Ave. SOC 107
Tampa, FL 33620
Unlverщ

(

Тнс

UCLA GLOBAUZATION

RESEARCН CENТER

AFRtCA

p11one, (813) 974 · 2954
ra:x : (Вtз) 974. zs22
G8oЬalResearchOcas . usr.edu

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

циокультурных различиях. «Так делают все»

Виртуальные
фотобанки. Стоки

-

-

это не оправдание.

Вы лучше этих <<всех». Но и неумышленно нанесенный вред

-

тоже

это отличный путь

не оправдание. Еще никто не отменял термин «символическая

приобрести изображения

аннигиляция», означающий нанесение ущерба посредством сим­

профессионального

волических сообщений отдельным индивидам или группам лиц. Не

качества как для Веб,

забывайте также, что иногда проблема не в том, что представлено

так и для печати. Кроме

на фотографии, а с тем, что на ней не нашло отражения. Задайтесь

фотографий на этих

вопросом, кто или что отсутствует на изображениях вашего про­

сайтах часто продают

екта. Учитесь смотреть на картинку критически. Выделяясь среди

иллюстрации, анимацию

и видео.

большинства (что в этом случае печально), избегая визуальных
стереотипов, вы извлекаете дополнительную пользу

-

привлекаете

внимание людей, приятно удивляете их, поскольку срабатывает
эффект неожиданности.

ГДЕ БРАТЬ ФОТОГРАФИИ
Есть сильное искушение сделать все снимки самостоятельно.

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

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

Журналистам тоже все чаще приходится овладевать наукой об­
ращения с фото- или видеокамерой.

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

это на вашей камере. Помимо этого выясните, что делает фото-

158

Добавь воздуха!


Е

о

~"r 'ZfsP}9f°le-J/ouse-fi~

u

Ed'?J ~sо~ем

'"
о

µ

о

lL

USF Норе House for Eating Disorders ~а community pro;ecr
rhat providcs а supportive intervcn[ion program for aJI prople affected Ьу eating dlsor-

QJ

µ

ders. Но{Х Housc: progгams supplemenr, Ьш do nor replace, tratments provided Ьу

ro

о

other health carc professionaJs.

Норе

House is

USF HeaJth is

а

а

Q_

community initiative of USF Health

parmership of the collcges of medicine, nursing and

puЬlic

.с

health; thc

а..

schools of basic biomedical sdenccs and physical therapy and rehabllitation scicnces,
and the USF Physicians Group. USF Health is an enrcrprisc: dedicated to making
life Ьсш:r Ьу improving hea.lth in the wider environmeщ, in commuлities , and for
individuals.

©
о

µ

о
.с

What

Норе

Q_

House offers

-о

QJ

Норе House offers а widc range of resourccs for аН prople affa:r«I Ьу алd suffering

-о

from eating disoгders. Норе Hou.se supplements, Ьщ does n0t replace, treatme.nts pro-

-о

QJ

vided Ьу health carc professionaJs cxperienccd iп trearing patienrs with caring disorders.
We offer groups on а seasonaJ calcndar, and invite you to concacr Норе: House for rhe
most up-to-date schedule.

.D

Е

ш

AJI groups and work.shops arc facilicared Ьу experienccd professionals who vaJue the
whole person when dcaling with issues regarding food and Ьоdу image.
Норе House is not а medical facility or а mental health facility; therefore we do nor
require а referraJ.

Supportive lntervention Groups
These groups include cognirive behavior rherзpy, Ьоdу image groups, and
expressive therapy groups.

Parent Training Workshops
These rime limired workshops (usua!ly 4 hours) provide helpfuJ informarion
and guidance for parencs and caregivcrs whose child has Ьееn diagnosed with
ал earing disordc.r.

Professional Education
Continuing education cvents for profc.ssionals who treat eating disorders.

графию хорошей (можно, например, перечитать эту главу с самого

Бесплатные

начала). И помните: никаких фотообезглавливаний.

изображения.

Фотобанки. Если фотосъемка -

это не ваше, можно купить

изображение на фотостоке. Количество их огромно, а ассортимент
безграничен. Стоимость файла колеблется от одного доллара

На развороте буклета
вверху размещено

бесплатное изображение
из онлайн-фотобанка.

в низком разрешении и пригодном для использования в Интернете

Бесплатные версии файлов

формате до тысячи долларов за высококачественные изображения

имеют низкое разрешение

в высоком разрешении. Вы можете купить отдельные изображения

и полупрозрачную

или подписку, которая обеспечивает множественные скачивания

надпись с названием

в течение ограниченного времени. В дополнение к фотографиям

стока. Дизайнер может

многие фотобанки предлагают векторные иллюстрации, видео­

сначала протестировать

клипы и стандартную анимацию.

изображение в макете,
и если оно ПОДХОДИТ,

Одно из преимуществ виртуальных фотобанков

-

это наличие

приобрести платную

бесплатных изображений (версий платных изображений, только

версию файла с высоким

в низком разрешении). В результате у вас есть возможность испы­

разрешением без

тать одну картинку или более в проекте и решить, что вам нравится

полупрозрачной надписи.

больше, прежде чем покупать. Зачастую бесплатные изображения

имеют полупрозрачную надпись с названием фотобанка, чтобы
Глава 1О. Фотографии и иллюстрации

159


предупредить использование

картинки без оплаты.

photo release

Пока вы еще не достали деньги
из кошелька, предупреждаем:

Client:

как правило, вы можете приоб­

Project:
Jobt:

рести изображения, свободные
от отчислений, и с управля -

емыми правами. Свободные

1do hereby grant to ln Focus Oesign photographer _ _ _ _ _ _ _ , and
to hls/her employees ог assigns, permlssion to photograph and use such phot09raphs

от отчислений изображения

of me, in any manner for the project specilied above. Such use to include, but is not
limited to: puЬlication, display, advertlsing, edltorial lllustration, resale, web use, etc. 1
hегеЬу

swear that 1am of sound mind and body,and agree to all terms stated

дешевле, но минус в том, что

аЬоvе.

вы не получаете эксклюзивных

прав на них. Можно выбрать
отличную картинку, а потом

DescriptionofShoot: _ _ _ _ _ _ _ _ _ _ _ _ _ _ __

обнаружить, что другая орга­
низация в вашем городе уже

использует его в своем про­

Subject'sName(Printed): - - - - - - - - - - - - - -

екте. Так бывает.

Telephone: - - - - - - - E-mall: _ _ _ _ _ _ __

Subject'sSlgnature: - - - - - - - - - Oate: _ _ __

Выбор изображений с управ­

WitnessSignature: - - - - - - - - - - Date: _ _ __

ляемыми правами решает эту

проблему. Однако такие материалы стоят дороже. Может
случиться так, что вы отдадите

деньги за одно изображение
для одного проекта, а затем

будете вынуждены платить за
возможность использования

того же изображения в дру­
гом проекте еще раз. Чтобы
не тратиться на изображение
с управляемыми правами, не

Доrовор на

использовав преимущества такой лицензии, вы должны все тща­

использование

тельно спланировать

снимков. Если на

купленная для дорогого проспекта, может послужить вам при

фотографии изображены

следующем апдейте веб-сайта или в нынешнем годовом отчете.

люди, убедитесь,

-

подумать, например, как фотография,

что все модели

Неважно, где вы приобретаете стоковую фотографию и какого она

(профессиональные

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

или нет) подписали

запрещают перепродавать изображения и могут лимитировать

договор на дальнейшее

их изменение, способ и частоту использования. Приобретая и ис­

использование снимков.

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

мелким шрифтом.

Работа с фотографами. Если у вас есть в запасе время
и позволяет бюджет, то наилучшим решением будет нанять про­

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

160

Добавь воздуха!


Save lmage As " .
Add lmage to iPhoto library
Use lmage as Desktop Picture

съемка для каталога, для журнала

-

все это требует разного виде­

Вы не должны это

ния и разного оборудования. Попробуйте найти кого-то с опытом

делать только потому,

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

что можете. Есть

вочник, но надежнее использовать знакомства. Попросите коллег

две по-настоящему

и знающих друзей порекомендовать вам кого-нибудь.

веские причины, почему
не надо воровать

Как только найдете фотОI·рафа, полностью обговорите все усло­

графику из Интернета:

вия. Каждый хочет знать, какие отведены срок!!. :\lожет также

оптимизированная

получиться, что вы ждете исходные варианты

веб-графика будет,

каждого сни:-.1ка

скорее всего, не того

в высоком разрешении, а фотограф передаст ва:-.1 только ко:-.шлект

разрешения, что нужно

отретушированных картинок. Удостоверьтесь с сачого начала, что

вам, к тому же это

вы одинаково понимаете поставленные задачи.

противозаконно.

Если на фотографии изображены люди, убедитесь, что все ;-..юдели

(профессиональные или нет) подписали договор на дальнейшее
использование снимков. За несовершеннолетних расписываются

родители или опекуны. Часто у фотографов есть свои договоры,
но для вашего проекта потребуется отдельный документ.
У вас будет больше шансов получить именно те снимки, кото­

рые вам нужны, если вы снабдите фотографа всей необходимой
Глава

1О.

Фотографии и иллюстрации

161


информацией
по

проекту.

Фотоrрафии
должны быть
напечатаны
или переданы
в

электрон­

ном формате!
Какое общее
настроение
ДОЛЖНЫ пере­

дать снимки!

Фотоrраф мо­
жет спросить
вас о многом.

Будьте rотовы
дать развернутые ответы.

Иnnюстрации

Покажите фотоrрафу предварительный макет, это поможет ему

в архитектуре.

спланировать работу, например определиться с ориентацией

Архитекторы используют

снимков, направлением содержимоrо (влево или вправо) и т. д.

иллюстрацию, чтобы
показать клиенту перед

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

Помните, что фотоrрафы

-

тоже люди креативные. Предоставьте

им столько информации, чтобы потом вы моrли отойти в сторону

и наблюдать за работой. Но не стесняйтесь давать обратную связь
по необходимости.

Иллюстрация

Carrie

Matteoli, AIA.

ГДЕ НЕ НАДО БРАТЬ
ФОТОГРАФИИ
Зачем обращаться к фотографу или платить фотобанку, если в Ин­
тернете можно найти миллиарды бесплатных галерей! По двум

причинам. Во-первых, как мы уже обсудили, электронные файлы
обладают недостаточным разрешением для печати. Во-вторых, что
намноrо важнее, это противозаконно.

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

те, это еще не значит, что это можно свободно брать и использовать.
Взять изображение (или текст, или что уrодно еще) с чьеrо-либо
сайта и использовать без разрешения

-

означает попросту украсть.

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

162

Добавь воздуха!

-

значит


Иллюстрация дает жизнь воображаемому.
Если все-таки найдете фотографию
огнедышащего дракона, дайте нам

знать. Мы можем тоже захотеть
такую.

пользовано всеми, даже не

думайте заимствовать его,

не спросив разрешения. Обнаружив
в Сети изображение, которое вам жизнен-

но необходимо, сперва найдите владельца и получите
письменное разрешение на использование.

АЛЬТЕРНАТИВА ФОТОГРАФИЯМ
Возможно, поджимает время или у вас совсем небольшой бюджет,

или есть какая-то особая идея. В таких случаях можно не зацикли­

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

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

Иллюстрации. Ни при каких обстоятельствах не надо вос­
принимать иллюстрации как второсортную замену фотографиям.
Напротив, зачастую иллюстрации

-

лучший или даже единствен­

ный выход.

Иллюстрации придают форму воображаемому. Скажем, вы пишете
повесть об огнедышащих драконах. Допустим, вы хотите найти
фотографию, которая сопроводила бы вашу 11стор11ю. Что ж, удачи!
Сотни лет иллюстраторы облекали в визуальную форму образы,

Фотография

пейзажи и предметы, существующие только в воображае.юм :vшре.

становится

Художественная литература (для детей и взрослых) немысл11:v1а

без великолепных иллюстраций, оживляющих все

-

от фей до

летучих обезьян.

иллюстрацией.

Программы
редактирования

фотографий могут

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

превратить обычные
снимки в интересные

иллюстрации.

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

Глава

1О. Фотографии и иллюстрации

163


чала работ. Гораздо про­
ще предоставить рисунок

с изображением фонтана,
аллеи и кустов, чем опи

-

сать, как все будет выгля деть, словами.

Иллюстрации нужны,
если заявлена щепетиль­

ная тема. Иногда ил­
люстрации

-

лучший

выход, чем фотографии,
если

затронута

щепе­

тильная тема, например,
смерть,

нападение

или

изнасилование. В статьи

о публичных людях (осо­
бенно в сатирические)

-

политиках или знамени­

Клипарты. Клипарты это другая визуальная
альтернатива

фотографиям. Но клипарт
клипарту рознь. Удалите
предустановленный мусор
и изучите ассортимент

профессионально
выполненных векторных

тостях

-

удачно вписываются карикатуры. Другой пример такого

типа иллюстраций

-

шаржи.

Иллюстрации показывают изменения с течением времени. Фото­

графии запечатлевают один момент, с помощью иллюстраций же
можно показать, как положение дел менялось с течением времени.

Адвокаты используют иллюстрации с этой целью. Представьте, что

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

иллюстраций,

время или после происшествия, но отдельные фотографии не могут

предлагаемый

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

фотобанками.
Использованная
иллюстрация приводится

с разрешения
PuЬlications,

Dover

Иллюстрации представляют упрощенную схему улиц и положение

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

lnc.

Анимация как фокусная точка.
Динамичная последовательность сменяющих
друг друга изображений и текста заменяет

•

"_
~~-

.--•

на данном сайте статичную фотографию.

---·-··
v?'w:1

.....-~-100-

....

~·,,,-~--·-""",....

..... ._.,.
.....,. ............
,......... ._."'"-

"'"·""··"'~·-

~·"---.<""""'!

тoii-.~..,,...."~

.........

.... - . - .

..,...,,..,.. ,...,..

1n focus des1gn

164

Добавь воздуха!

INT DESIGN


Иллюстрации передают ощущение вре­
мени. До появления фотографии иллю­

страции были единственным способом
отразить ежедневную жизнь и конкрет­

ные события. Египетское иероглифиче­
ское письмо, гобелен из Байе, петроглифы
американских индейцев и даже граффити
70-х годов прошлого века

-

все они обла­

дают уникальным духом и цветовой пали -

трой. Воспроизводя исторические стили
в современном дизайне, можно передать
ощущение конкретного времени и места.

Используя программы редактирования

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

поискать интересующие вас объекты на
стоковых сайтах.

Клипарты. Клипарты -

это другая

визуальная альтернатива фотографиям.
Но клипарт клипарту рознь. Вы разду­
мываете, не использовать ли вам один

клипартик из предустановленной коллек­

ции? Ай-ай-ай! Клипарты, поставляемые
вместе с компьютерными программа­
ми, откровенно плохи, удалите их не­

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

клипарт, посетите один из фотобанков
и купите что-нибудь подходящее. Можно

•

-·-

"'"-"
Q<""·""'

......
...•.... ',......00."..,_...
~··

-·_ "_..,.

......

.,.._,.w.,,,,::-,:;:
........ .............. .•.
.................. . ...-.
......... ........,_ .... _...,
'--~----"

с~·-~._.,._,.,.."....,

".,....,,.".,.,"'\1" .... ,._."
•·ох ......... - -...........
,. _ _ ."_"'9
................."""""""''··"""
..

-

.....,,....к..

_ ---

. ._..,_....,...,"....,

~-·-

~.,.,_,

в макете место изображения.

•

"_

,..,."_, "'

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

,._~

"_""......__..,..,.
-·--<_,.,.....,...,.,,.

т-...-""

,.,.,.... < ,.....,..,"... ",.... " ......

1n rocus des1gn

ln l ocu!i deslQn

~

-

... ·--··----·--01.-••ftJt1••" ..,.___
Глава

1О. Фотографии и иллюстрации

165


также приобрести альбомы классических свободных от отчисле­
ний клипартов, которые вы можете отсканировать и использовать

в публикациях. Если повезет, к книге будет приложен диск, и не­
обходимость в сканировании отпадет.

Видео- и мультимедиакомпоненты. Попу­

'

~еобычное вы­
деление цита-

..,
ты-хорошии

способ побу­
дить прочитать

весь текс' '

лярность сайтов, на которых выкладываются видеоро­
лики, не позволяет усомниться в том, что демократи­

зация дизайна коснулась и видеопродукции. Сегодня

помимо фотографий и иллюстраций почти все сайты
содержат и видеоклипы, и анимацию, ведь это бес­

подобные фокусные точки, основанные на движении,
а потому привлекающие внимание в первую очередь.

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

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

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

кетом. Выберите титульный слайд, который дал бы
представление о содержании видеоклипа и гармони­

ровал с остальными элементами макета. Качество,
стиль и скорость видео и анимационных переходов также влияют

на макет в целом. Видеоклип, который идет с неровной скоростью,
и слишком быстрые или медленные анимационные переходы тоже

обращают на себя ненужное внимание. Видео и анимация плохо­

го качества, как и в случае с фотографией, нивелируют качество
всего проекта.

Растрированный
шрифт. Для создания
по-настоящему

интересного эффекта
заполните контур букв

изображением. Или
используйте программу
для редактирования

картинки, чтобы надпись
была как будто отлитой
из золота.

166

Добавь воздуха!


of fantasy fiction, steampunk
has worked its way into animalion,
movies, television, cos-play and
even costume jewelry.
А suЬgenre

c~:-~?.~~g-~
~lf-'r'..J.r-...o~ddt.~;..n
...,..".<OfP"'lllкU!чua-. Ol!l11uqni••"'"--

......

1•cu-..,.-;,...uи~nminl.ь.inapм·· ~
rumiddlar.x.itl"•Ulll..i..~Мll'IQmlOfXмr.,..Wpaoidnк
"'.,,.....dia.,-. Nм.f..rnih.o,••111fltn"""f*lllJ9UТ"'-"lut

..--~-i--liplmur.._....ь..t.x.." ..... -

'"' Df'""""" r-- r.omoiJlilroaa... .:-... ....,..,. ..... Nам. 8'Wi •
.....,...,..,....,.....inь..p.-.dlcluaк.Rnn .... i..~nct­
.irm.~,-ofli.1P1&11 •k. wdu&onarAl.u- '"'!*oikld 1111111fii

.....
-·-

c:-f.11Ц1111, oцwn-af&c»-nm1l qцi-_t1e,

111rddih.'qur__.. llltld.Jpu ..,,_..,.Ч-­

щ_
ilf"""""'im...lmdldd..

,..Жict.-alut~...dl..,.

Шрифт как изображение. Возможно, по какой-то причине

Пустить в ход все

вам приходится выбирать между плохой фотографией и убогим

средства. Комбинируя
интересные иллюстрации,

клипартом. Доверьтесь своему вкусу и отбросьте оба. С задачей

декоративный

привнесения визуального акцента в объемный текст справится

и растрированный

декоративный шрифт.

шрифты, можно создать
богатые текстурные

Формы букв интересны. Большинство из нас в последний раз

композиции.

разглядывали отдельные буквы алфавита в детском саду. Когда

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

ленным звуком. После того как наш мозг привыкает ставить знак

равенства между формой и звуком и ассоциировать буквенные со­
четания со звучанием и значением слов, осознанные размышления

о формах уходят на дальний план.
Во имя хорошего дизайна мы призываем вас обратить взор на

буквенные формы. В качестве элемента дизайна буквенные фор­
мы просто великолепны. Отдельные символы, слова могут иметь

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

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

знаков. Повторяющиеся декоративные буквы дадут фону текстуру.

Глава

10.

Фотографии и иллюстрации

167


В главе

8

о типографике мы уже говорили о традиционных

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

-

это врезы и растрированный

шрифт.
Врезы. Врез, или врезка,

-

это цитата из текста, которую

нужно выделить. Если вы выбрали особенно интересную,
привлекательную или необычную цитату, она вызовет желание
прочитать весь текст.

Врез часто оформляется рамкой. Поскольку цитата обыч­

DIAМONDS

но относительно короткая, кегль шрифта нужно увеличить

так, чтобы фраза бросилась в глаза и воспринималась как
графический элемент или визуальный объект. Если хочется
нахулиганить, используйте кавычки-«лапки» вместо «елочек».

Когда источник цитаты столь же значим, как и сама цитата,
укажите его здесь же.

Реклама предметов роскоши
отличается от других видов
рекламы и направлена на

создание особенного ощущения.

Вот некоторые советы касательно оформления врезов:

1.

Эта реклама искусственных

2.

алмазов выводит на первый план

Не забывайте делать внутренние и внешние отступы. Не
обсчитайтесь с полями.

При добавлении цвета во врез есть две возможности:
цветным может быть весь врез или же задайте цветной

престиж и эксклюзивность.

фон (заливку) или границы рамки (обводку). Если вы

l

выбрали цветной фон, убедитесь что цвет текста контра­
стирует с ним.

Ourl.....dodl _ _ _

3.

ь,",.."1-4d!pt.
Wc art"

ю 111r.: 1h•1 ,..,.,

""'ulf(I' ~ ~lш

•01;&!

tkoliir.h1nl ··i1h ~ ..... "

•••1111 \'QШ p<.!r..;h;uc th->.1
1.1111~-00n l'u;i"""""'- IJ..1-uu •Тt" 1101 J l(•..,,
"ill l>o:

s.::.

1lн1llo:J

Rq>11bli,

o;.."o;,n,J

1irнpl)· """"

rh ...

Gold •11d Di•n1c111d Sour~c "i1hir1 • --rt •nd l.c:ep ,h, ,i:iru .и our
1l1a11k,..x11Ur•u1r•"1:Т1l1on.!i!l1<•f"l<lro111ickт•OC'n

for ПIOl't" int°ormJrion оп CW,.., Мut... ~ н..:!
uur oщ~uin~ <kq.> ..,..,.... nplu••!l<JI" pk-..1!.C' ""' ur..н цо:-\•11с ~·
w"-vi.~i1>wrn·k.nr1

Используйте отрицательный отступ, чтобы вынести от­
крывающую кавычку за пределы поля, служащего границей

между рамкой и текстом. Вторую и последующие строки

выровняйте по первой букве после открывающей кавычки.

Растрированный шрифт. Растрированный шрифт пред­

cY.c'f. ~hиь!tr
CULTUR~·

DIAМONDS

ставляет собой символ, слово или строчку, заполненные

изображением или каким-то иным образом измененные при

помощи фоторедактора. Такой шрифт часто можно встретить
в журналах, газетах, на плакатах, сайтах, в заставках к видео­

роликам, телевизионным программам и кинофильмам. У вас

есть техническая возможность придать шрифту вид, будто его
IO."~, ........ FL°W7'·:wfl•~

tl.J.Pi-17'1'6•• ••J.1'1'-1771

выплавили из блестящей меди, оттиснули на ржавом металле
или высекли из камня.

Воспроизводится

с разрешения Odyssey

Marine Exploration.

168

Добавь воздуха!

Резюмируя то, что вы узнали о визуальной привлекательности,

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

что нужно придирчиво относиться к качеству. Выбирайте под­

ходящее разрешение, формат и размер файла. Если фотографии


использовать нельзя, не сбрасывайте со счетов иллюстрации,
клипарты, видео и декоративный шрифт

-

тоже визуально силь­

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

Если нужно общаться с фотографами и иллюстраторами, делайте

это с уважением, которого они заслуживают. Хотите раздобыть

фотографии или изменить их

-

действуйте так, чтобы ваша со­

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

рядом. Для такого двойного удара вам понадобится инфографика,
которую мы и обсудим в следующей главе.

• • • ПОПРОБУЙТЕ ЭТО
1• Найдите пример печатного издания, где фотография не справля ется со своими функциями (плохое качество, неудачная компо­

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

изображение. Объясните, почему выбранная вами фотография
лучше решает задачи дизайна.

2. Проведите мозговой штурм на тему использования фотографий
в приведенных ниже ситуациях. Создайте серию набросков
для каждой из них. Используйте два или более изображений
в каждом наброске:
а) очерк об известном артисте для раздела <<Досуг)) широкопо­
лосной газеты; артист открывает местное мероприятие на

следующей неделе;

б) буклет-((гармошка)) небольшого независимого книжного
магазина; буклет должен быть с неограниченным сроком
годности, иными словами, не привязывайте его содержание
к определенному временному периоду;

в) небольшая афиша предстоящего фестиваля

Latin Jazz.

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

Глава 10. Фотографии и иллюстрации

169


Сравните фотографии и способы их использования. Поду­
майте, какими средствами созданы эти композиции, какая

работа проведена с цветом, какие изменения были внесены
в фоторедакторе. Выберите одну тему и сделайте две рекламы:
одну традиционную для данной продукции, а вторую

-

в со­

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

4. Возьмите два журнала -

предназначенный для широкой аудито­

рии и нацеленный на конкретную группу. Сопоставьте подборку

изображений в обоих журналах. В чем сходство, в чем различие?
Возьмите рекламу, сделанную вами в третьем упражнении, или

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

5.

Сделайте разворот в журнальном стиле для статьи о клубе
восточных единоборств при университете. Готовый разворот
появится в университетском журнале. Для справки: айкидо

-

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

Посетите сайт книги «Добавь воздуха!» и посмотрите галерею
фотографий по теме «айкидо». Сколько изображений нужно
вам? Какие вы выберете? Объясните сделанный выбор и свер­
стайте разворот, используя изображения и текстовую «рыбу».

170

Добавь воздуха!


~

об инфогр афике
u

максимум дан ных в однои схеме

As consenias et quisit h
quat ut untor aut duscin
tiosa quia doluptatur re

d

Ccn1 ttN. mlnnuq.u.t1c111 li"ct

mod1 wrt"nt duknd11 li..:Jt rcm
u.lp.Jrum Шn1f 1iwo ~ qш:
~

quoum qu.u ct ip1du.;.11
l.l 1n1. аре- ~-o­

rn.xii1 <irumcndн

lup1.:.:ab ш1еt occullu р1:нш rcm
щuide$•it;uiш

conte;i.c
Nam ат dolles
c:st, ~uis nobis
rr~;;.

е

tt

.uit

СUЦ\'йt

"t6c1WA
onкqu:u

rumfug.L
quo tcn н
wu.oo. Е
Ыandisqt

qui dolorcri·
Ьсr:а pedi1 rt:m
fuga. Nam carc:
o:planto 1t n ,
tscqшm reacm

А au1c а1
aliJic la Р'

nostibш.

sundi:JitU
Ydiqui со
ct tt quos
harchi1 ia
omnis 2р
Equis с

Vclc.шum

rc.n: omnis sunruri bwa.ntur, cullor sunt
fwU m;Uoncm o lupw sunribusam quia
vulor aut cruntcm toS apliquc ашn е1
pore. occum et opu1qui qui unt quacrfcrum

qu~•

quis cw:r
~diucr

Florida Manatee Population

1999

н:n1.

!.:t:ttCI

ЬЬoria.u

2001

2003

2005

19~

2О1


в

конце

XIX

века люди узнавали новости либо от соседей,

либо из газет, в которые был практически один только текст.

Мелкий шрифт колонка за колонкой разбавлялся редкими

вкраплениями графических объектов

-

ксилографиями. В те

времена люди действительно читали. Слово за словом. Вот ведь
как все поменялось.

В начале

XXI

века для чтения люди получают более короткие

и удобные визуальные блоки через мобильные телефоны и компью­
теры, через цифровое телевидение и газеты. Мы ищем картинки
и заголовки, которые пробуждают наш интерес, а затем читаем
внимательнее или не читаем. Иногда мы просматриваем страницу

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

ИСКУССТВО

Все чаще СМИ и рекламные агентства прибегают

ОСТАВЛЯТЬ СУТЬ

к инфографике как средству передачи сообщения
аудитории. Инфографика, что следует из названия,

Иногда инфографика передает

представляет информацию графически. Объедините

информацию быстрее и лучше, чем

репортерское чутье на интересные новости с дизай­

слова. Как, например, в этом случае:
Последний подсчет голосов показал,

что 20

% избирателей

на участке А

нерской способностью визуализировать их

-

вот

вам и инфографика.
Но возможности инфографики гораздо шире, чем

проголосовали за кандидата Смита,

поддержка главной новости. Во-первых, она нужна

1О % проголосовали за кандидата

не только в журналистике. Во- вторых, инфографика

Джонса, 65

может передать более глубокие смыслы, чем сплош -

кандидата

% проголосовали за
Доу и 5 % проголосовали

за вписанного кандидата Андерсона.

Или мы могли пойти таким путем:

Распределение голосов
на участке А

ной текст. И отнимает меньше времени и места.

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

которые мы так любим ненавидеть.
Далее мы немного поговорим о том, как развивалась

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

Смит

диаграмм, графиков и временньrх шкал.

КРАТКАЯ ИСТОРИЯ
ИНФОГРАФИКИ
Газете

USA Today обычно ставят в заслугу популяри­

зацию современной инфографики, а разноцветные

диаграммы и графики так и остаются фирменным
знаком этого СМИ. Но люди стали использовать

графику для передачи информации гораздо раньше

1982 года 172

Добавь воздуха!

года основания газеты.


;{

/

/

/

~-

!

I
l

i

f

т

~

о

о

о

о

о

о

·----11--

------··J

Первобытный человек делился информацией при помощи кар­

Есть ли там

тинок, выдолбленных или нарисованных на скалах в пещерах, не

кто-нибудь?

говоря уже о татуировках на теле. По всему миру древние расска­

Многопрофильная

зывали о себе и о мире вокруг, используя пиктограммы от японских

команда под

кандзи, заимствованных из китайского иероглифического письма,
до древнеегипетской иероглифики.

Сагана разработала
эту пластинку,

Если взять относительно недавний период, то

зонд НАСА, запущенный в

руководством Карла

Voyager, космический

1977 году, среди прочего несет послание

внеземным цивилизациям в виде пластинки с пиктограммами. На
случай, если мы не одни во Вселенной. Кроме шуток.

прикрепленную затем

к обшивке космического

зонда Voyager. Она
символически передает

основную информацию
о человеке, его

ИНФОГРАФИКА НУЖНА, ЕСЛИ ...

внешнем виде и месте
происхождения.

Помимо общения с инопланетянами, инфографика полезна, если:

•

нужно быстро сообщить что-то;

•

письменное или устное сообщение слишком сложное для по­
нимания или скучное;

•

аудитория плохо слышит или читает

-

или совсем не может

слышать и читать.

Гnава 11. Инфографика

173


Иногда взятая вами тема сама подсказывает, что ей нужна инфогра­

фика, и даже то, какой вид инфографики будет уместен. Например,
если тема

-

ведущие актеры (герои, злодеи и жертвы), то напра­

шиваются справочные блоки с биографиями. Даты подразумевают

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

Схема работы сердца человека

легающая к зданию территория) намекает
на карты.

Аорта

Верхняя полая

МУЛЬТИМЕДИЙНАЯ
ИНФОГРАФИКА

XXI

ВЕКА

В телевизионном бизнесе инфографи -

ка включает в себя звук и движение.
С изобретением видеоигр она получи­
ла возможность быть трехмерной. По
мере того как Интернет ((заселялся» все

плотнее, инфографика становилась ин­

терактивной. Цветная графика, звуковые
эффекты, анимация, объемность и инте­

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

Взгляните на схематичное изображение
сердца и кровеносной системы. На печа­

ти мы используем стрелки и цифры для
указания направления кровотока, а также

добавляем краткое пояснение.
Схемы следующеrо
поколения. Данная
схема работы сердечной
мышцы

-

прекрасный

образец для печати.
Для электронного
использования мы можем
сделать еще один шаг

и добавить интерактивную

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

Трехмерная проекция обеспечила бы нечто вроде прогулки по пар­

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

-

стук сердца со студийными

звуковыми эффектами и, возможно, музыкой.

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

анимацию и аудио.

впадать в крайности, но почему бы не воспользоваться пре­

Иллюстрация Сагуl

имуществами мультимедиа там, где это уместно и решает по­

Loper.

ставленные задачи.

174

Добавь воздуха!


ТИПЫ ИНФОГРАФИКИ
Наша осознанно ироничная инфографика о типах инфографики. Выдерживать чистоту типов не
требуется. Смешивайте и соединяйте. Или придумайте новую форму.

Текстовая врезка
Профили

• Биографическая
врезка

Два по цене

Скачки

одного

• Нумерованные
списки

• Отчеты

• В двух словах

• Ранжирование

• Советы

• Рейтинги

• Врезка с фактами

• Очки

Знакомьтесь

D

Первая

• Образцы

• До/После

• Инструкции

• За/Против

• Краткий обзор

Цепи

• Временные шкалы

• Проблема/Решение
• Сравнение/Контраст

1О-ка

Временная шкала
До

После

..
5.

"

Карты

Схемы

Диаграммы

• Географические

• В разрезе

• Секторная диаграмма

• Геологические

• Схемы

• Гистограмма

• Статистические

•Чертежи

•

Вы здесь

•График

Иллюстрации

Части буквы

Скру­
гленная
засечка

•

Диаграмма рассеяния

•

Блок-схема


Не только дnя
новостей. Инфографика

и графическая упаковка
используются для того,

ГРАФИЧЕСКАЯ УПАКОВКА
Мультимедийная го нз о- инфографика породила хорошую идею

-

комбинировать различные типы инфографики. В центр блока

чтобы газеты, журналы

новостей, к примеру, помещается иллюстрация, не исключаются

и годовые отчеты

также более мелкие чертежи, диаграммы, временнь1е шкалы, био­

смотрелись эффектнее.

графические врезы и т. д. Благодаря комбинации ладно скроенной

Воспроизводится
с разрешения

National
АНЕС Organization.

статьи, фотографий и инфографики вы сразу достигаете визуаль­

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

1. Не думайте,

что история не нуждается в «упаковке», только

потому что вы не в новостном бизнесе. Рассказывание истории

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

2..

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

Каждому по силам создать простые схемы и графики. Эффек­
тивные графические упаковки
профессионалов.

176

Добавь воздуха!

-

это результат усилий команды


ЭТИКА
Как и в случае с любой другой коммуника­

ДИАГРАММЫ ИНОГДА

цией, предназначенной для общего пользо­

ВРУТ

вания, есть этические принципы, которые

необходимо соблюдать при создании ин­
фографики. Вот несколько самых главных.
Вам известны слова <<плагиат» и «копи­
райт»? Никогда не используйте чужую

графику без разрешения, а после того как
вы это разрешение получите, укажите ее

источник. Обычно авторство указывается

Обе секторные диаграммы, приведенные
ниже, содержат правильные данные. Но
каждая из них «говорит» по-своему.

Плохо выполненные диаграммы могут
ввести в заблуждение. В данном случае
тенденциозный выбор данных определяет
ложное впечатление.

в левом нижнем углу. То же самое касается

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

11

Число
проголосо­
вавших за
поправку

строить домыслы запрещено под страхом

краха карьеры. Но, в любом случае, в ин­

фографике главное -

информация, а никак

не вымысел. Используйте информацию из
достоверных источников, на которые мож­

но сослаться. Если информации не хватает,

потратьте больше времени и усилий для ее

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

имеем в виду, что к любым данным следу­
ет отноститься критически. Кто оплатил
это исследование? Какие цели преследуют

ваши источники, кто их финансирует? По­

1111 За поправку

стоянное скептическое отношение к любой

информации

-

это не просто професси -

анальная болезнь всех, кто в варится ин­

D

Против

1111

За пересмотр

поправки

формационном бизнесе. Это обязательное
условие и залог успеха. И вот мы плавно

подошли к рассуждениям о способах не­

объективной подачи цифр.
Статистика (и люди) может хитрить. Вот

поправки

D Воздержапись

две главных причины, из-за которых у вас

могут быть проблемы, когда вы приводите
статистические данные:

зупречны с самого

1) данные небе­
начала; 2) ваша интер­

претация данных сомнительна или вводит

в заблуждение. Избегайте и того и другого.
Глава 1 1. Инфографика

177


Если данные для инфографики вы собирали не сами, отнеситесь
к ним с долей скептицизма. Разыщите исходное исследование

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

Думайте об

инфографике
как о дизайне
в дизайне.

ческое представление, выполненное вами, тоже будет таким. Вот
несколько причин, по которым прекрасные статистические данные

могут быть представлены недостоверно:

•

разили только те, что подтверждают вашу точку зрения;

•вы не учли денежную инфляцию (или дефляцию);

Правила

•

хорошей

•

верстки
прекрасно

подходят

для хорошей

инфографики.

ваша выборка сделана по принципу <<снятия сливок», вы от­

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

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

статистические данные, обратитесь к тому, кто умеет.

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

на курсы, пригласите на обед эксперта.
Следовать этическим принципам

-

означает принимать во вни­

мание разные культуры и национальности, считаться с разно­

образием вашей аудитории. Лучше всего люди реагируют, когда вы

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

верными, неадекватными, несправедливыми и оскорбительными.
Мы галопом пробежались по истории от древних наскальных

рисунков до мультимедийной инфографики, а также рассказали,

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

-

переходим к дизайну и конкретным советам.

ДИЗАЙН ИНФОГРАФИКИ
Все те принципы и приемы дизайна, которые мы рассматривали

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

применение и ваше знание цвета, типографики, фотографии
и иллюстрации. В дополнение к основам дизайна мы предлагаем

следующие советы касательно разработки инфографики.

178

Добавь воздуха!


As consenias et quisit harum coneceperum
quat ut untor aut duscimpost, sincimi lluptiosa quia doluptatur re laborum quiaerum

d

~~§.1~"
modic

anш.mdh

1 Ьu.

ki..:etquidisn
nlml

aиqicdipsшasimш

dolotnaucwlor
molupusteaem

.....,_..,..
.--~

чuotntimpotWa111
WЬЬo..&qu.edю
ЬЬndi.quia n 11ш,

pu.N1 r=i

Е!Е! ..........

""'="""'
...........

~

".........._
......... =

••l!lllllllГl =:~o;ia

bЬoriнкqiwn

-=mk<N<.

off'кidolorestvakri

kipiaЬ lnm: occullu

~ .o-

llll>'n\L

~opodidЬquld

rum-~~••o

..........

A IUU"apiddis

а111aimu11n:m

riu1' Lщxu minum

C0Jn1t ....llupnir,a1.11

dolor aliaЬo.

eaquc

[;.p.Na....au::

дu..b~Wdl'Q.J\llQCllQJ. JU!l 'l"'"tщ
qUКf'O'l'МknoЬitmaiorttcnкNitiup(

-~

~~IIO'"'"OfJ'O"'IЧ""m faciiк.
. - : l i - ddla quamш pon. qшmmd daor
--sditison ipli:nd. ranerqiali qui$mo

-

v........

_

~а111чuе~

ltas

tсqШ!К!О О11 modlпq uoм/mnш,
111ш

ckinpcirnwid mШч.,.. а ddlun.

~ц

ilihш doloщmx limpot 11StNm 11uliм aia
di>iцn.u~iwnJU1ailЬUWDha.Wsi1

.drnu:imamraqulкcau:conrcn1mn
au1odisalUiq....,ampro cxpЬЬ<ionc- niiidd

~~...ьm-aditpШJCIUS

JI>llNiNt' №111 ali.s auda ооlщкiо nwomD

rm: omnit. яшшri ь....~щ gdio, - •
haru ~ohipc»tw1dtкмaai qw..

C'll""'fU~ЧWSooiorш!lhilh,r11m
lwdui-upm:NIЬcia"*iiaNllt

1rm ndli.u1

"*"&111~-~autnet

_...lfk:lqui-'ldpшni'up.№munt.
E.q..lfacnruulaЬo. TcrкolfiaЬlnvdi-

nulparum cullm1 owiwкlx mlnщx. Ur

~.aaa.aopa!OIUi.,iunc ~

Florida Manatee Population 1999-2009

auhщapc

quia non ~.

nоЫ.

Apit Н ttpn.tu rmm1. !llLllY\ fxipg di1, qiм:

rmc

rnliк:iat amllldк

ipandi.. lnWl'I

rm'lpol'

LtnnsdaltQIS!!'l.sun_.,..p,wcieVCIЦICali!td).

rwt1111RN:-..alfOll~od~glllc:I
~8'1Jf'O!Dll!Vlt.11111CU--1Ьo.Oв~­

tr01••~~\l8Dllm.anpud
nPreoc:aфqi.8'11Qlnldфrlle(.1111q.J:1*11

m•d4Qll~t18J'•adii-rlll!IJIJl,atlcae'
lllltlOU'!lai11Aeц1dl!'JdПllQID~ ........
IOЦl!aednrlldc:ЦКaвatesla'dsSllllUIUfirwes•
~remlaclrlpcxe/fl8:Cil'lollllal\.l1CllUal*

!llX81t. ulltior ..ь.:n na,.; acicuart. cwrns
queNf!lldlilq»esl&tlen:lsin/W\l!lllМIWnm

w:l1Sestlad~\8'IU'Ci01181SUSnemck'\dlir
ci85J1tdm:icorQ.ll'ladtrdsdokжllrllк:щltaeproc:cr1st

__.....

elf\JglacliW!ISllOllnrt--~WlltllsDum
18i"8$dl:Dru'nlll'llollk:'811'1DUC•~-

--..-

So&n:8: AtniJRsh8rxl'lt'dife~COrn­
~F'llt'IRIW!df4Atмlrthh!8*Мlna11e

1.

Инфографика должна быть самодостаточной. Наверное, это

Не забывайте

самый важный постулат, который необходимо запомнить. Люди

о единстве. Для

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

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

2.

графиков и диаграмм
используйте ту цветовую
палитру, которая

гармонирует с палитрой
всего дизайна.

Как следует изучите свою тему, прежде чем начать работу.

Маленькая фотография -

Нужно хорошо разбираться в материале, который беретесь

© Nicholas Larento -

иллюстрировать. Если сами не понимаете, о чем тут речь, как

fotolia.com.

донести сообщение до других?

3. Чтобы организовать и структурировать инфографику, исполь­
зуйте сетку. Думайте об инфографике как о дизайне в дизайне.
Правила хорошей верстки прекрасно подходят для хорошей

инфографики. Как и в верстке, сетка упорядочивает различные
части макета, такие как врезы и выноски. Выравнивая элементы

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

4.

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

странства между разными элементами, чтобы они не слипались.

Глава 1 1. Инфографика

179


ЧАСТИ ИНФОГРАФИКИ
Аннотация. Это блок

Заголовок. Сделайте его
крупным, ярким, четким,

текста содержит краткую

содержательным и лаконичным

информацию о схеме

Most folks kпow that по matter how а cat falls, it сап
right itself to laпd оп its feet. This diagram highlights
some other lesser-kпowп cat skills related to cat
aпatomy, ог as we like to thiпk of it, "cat-atomy."
Ears.

СараЫе

of dete ctiп g the so u пd of а
radius.

сап орепег withiп а three-Ыock

Eyes. Two typical
1. You

аге а

expressioпs:

complete idiot.

2. 1 am cute, апd you must pet/feed me. NOW.
3. Closed. As iп s l eep iпg .
Cold апd wet, for buryiп g iп owп e r 's armpit duriп g t h uпderstorms .
Whiskers. Bui lt-iп !аре measure, i.e" if my
whiskers fit through th is hole, the rest of те will
fit through this hole.
erfectly calibrated to Ье the о posite color of
's furпiture ог cloth i пg оп апу iveп day.
Source: R.J. Hagen Research Labs, 2008
Design: Rebecca Hagen, 2008

Строка с указанием

Строка с именем автора.
Отдайте должное дизайнеру,
создавшему инфографику

источника. В этой строке

Вь1носки. Содержат

располагаются сведения

конкретную информацию

об источнике данных

об от дельных элементах

инфографики

Используйте принцип сходства. Помните: группировать
рошо, загромождать

5.

-

-

хо­

плохо.

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

ководство, предписывающее придерживаться при оформлении
элементов дизайна определенного стиля. Если руководства не

существует, то ведь есть вы. Пропишите стилевое оформление
сами.

180

Добавь воздуха!


6. Будьте внимательны, если Florida AHEC's Clinical Training Sites 2003-2004
предполагается черно-бе-

лая графика. Цвет

-

один

из ваших самых сильных
союзников, он организует

элементы макета и служит

ориентиром для читателей.

Если вы не можете исполь­
зовать цвет, вам поможет
шкала оттенков серого, но

каждый следующий от­
тенок должен отличаться
от предыдущего, как ми­

нимум, на

20

процентов,

или возникнут сложности
с различением оттенков.

7.

Указывайте авторство, где
это необходимо. Это ка­
сается источника ваших
данных и источника всех

фотоrрафий или иллюстра­
ций, используемых вами.

8.

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

9.

Не растекайтесь мысью по древу. Заголовки и названия делайте
короткими. По возможности объясняйте тему и цель в шести
словах или менее. Аннотацию и выноски представьте лаконично

и безлично. Используйте глаголы действия.

Отображение

данных. Карты широко

Что касается отдельных элементов:

1.

Карты. Поместите карту на сетку и удалите ненужные детали.
Упорядочивайте и упрощайте. Не забудьте указать масштаб. По

2.

того, чтобы показать
местонахождение, но

необходимости добавьте легенду и стороны света (по меньшей

они также могут быть

мере, укажите, где север), дайте ориентиры для читателя.

дополнены условными

Секторные диаграммы . Секторные диаграммы показывают
части целого. Круг целиком представляет

3.

используются для

100

процентов. Не

обозначениями.
Воспроизводится

забудьте отметить, что такое это <щелое)). Не делайте из этого

с разрешения Florida

тайны. Затем аккуратно «порежьте)) диаграмму на сектора.

АНЕС

Network.

Глава

11.

Графики. Известные своими пиками и впадинами, графики
хороши, коrда нужно показать изменения с течением времени.

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

ось У (которая вертикальная) -это рост. Что вы собрались изИнфографика

181


ЧАСТИ КАРТЫ
Карты -

распространенная графическая форма. Существует несколько видов

карт, например географические, геологические и статистические карты.
Воспроизводится с разрешения

USF Health.

USF Health Orthopaedic Surgery and Sports Medicine Center
1З8th

"1,I

Main
entrance

/

.;;

Врезка.
Врезка

-

Avenue

;:;

это

укрупненная

версия неболь­
шого сегмента

USF Health

Ориентиры.

"Е
>
Qj

Такие точки

"'3

помогают

"'

Orthopedic Surgery

о

карты

а:>

and Sports Medicine
Center

читателю

"'с

::

о

t

о

.,;

USF Colle

е.о

Qj

v

2

Указатели. Рамка

а:>

....

uЫic

Holly Drfve

с указателями со-

Heal

могут быть

~===~

~

USF

держит ключевые

сориентироваться

по карте . Это
организации ,
улицы или другие
метки

элементы карты

Кеу
о

Distance in Miles

-

University Community Hospital Complex

-

University of South Florida Faci lities

Стрелка компаса указывает

\

на север и позволяет связать

карту со сторонами света

У словнь1е

обозначения.

Символы и другие
отметки

Масштаб. Масштаб
позволяет определять

мерить? Данные по фондовой бирже? Осадки? Интенсивность

расстояние

движения каждый день? Это ваш У. Ось Х

-

это всегда время,

прямая направлена слева (из прошлого) направо (в будущее).
В трехмерной графике ось

4.

Z нацелена прямо

на читателя.

Гистограммы. Гистограммы хороши для сравнения чего-ни­
будь с чем-нибудь. Лучше всего располагать прямоугольники
горизонтально

182

Добавь воздуха!

-

если только вы не имеете дело со временем.


Semantic analysis of tweets around the #internetsummit hashtag
lnternet &Technology Summit 2009 • Tampa, Florida

Когда гистограмма показывает изменения с течением времени,

Визуализация даннь1х.

то пусть оно будет расположено по оси абсцисс (горизонталь­

Это способ подачи

но), а прямоугольники

полученных данных

-

вертикально. Пронумеруйте каждый

прямоугольник. Лучше разобраться в ситуации поможет сетка.

5.

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

-

чиной и следствием и т. д. По правилам хорошо бы ограничиться

10-20

пунктами на шкале. Лучшие шкалы всегда привязаны

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

-

отрезки

в графической форме.
В его основе лежат
простые секторные
диаграммы и гистограммы
или комплексные
схемы, такие как
приведенная выше схема

семантического анализа.

Воспроизводится

времени. Если в вашей временной шкале есть гигантские пере­

с разрешения

рывы, лучшим вариантом будет формат списка.

lnsight.
Глава

lnnovation

11. Инфографика

183


6.

Схемы и иллюстрации. Это самый сложный для выполнения
стиль графики, который требует художественного мастерства.
Лучшие схемы и иллюстрации

простые. И тут правила хо­

-

рошей композиции помогут вам создать действенные схемы

и иллюстрации. Дайте им фокусные точки, ритм и динамику.
Как все типы визуальной коммуникации, лучшая инфографика по­
дает точную информацию в простой форме. Тренируйтесь, и вы не

ошибетесь. А теперь переходим к раскадровкам для создания видео.

8 8 8 ПОПРОБУЙТЕ ЭТО
1.

Подготовьте инфографику своей биографии. Сначала приду­
майте, где она могла бы пригодиться, на вашей страничке в со­
циальной сети, например, или в вашем резюме? Доработайте ее
с учетом назначения.

2.

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

3.

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

график или диаграмму.

4.

Соблюдая правила составления карт, набросайте план одной
комнаты в вашем доме или офисе.

Вероятность того, что за вами кто-то наблюдает,
в зависимости от глупости ваших действий

80%
..а

....
u

о
::i:

....

60%

а;

о

о..

QI
са

40%
20%

Неглупые

184

Добавь воздуха!

Немного

Довольно

Очень

Крайне

Глупее не

глупые

глупые

глупые

глупые

бывает


i

а кадров ка. основь1
u

ви зуальныи с торителлинг


п

режде чем мы закончим разговор о визуальных сред­

ствах

-

фотографиях, иллюстрациях и инфографике,

давайте рассмотрим и раскадровку. Раскадровка

-

-

это

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

Раскадровка визуализирует весь проект в форме отдельных сцен,
снимков или экранов. Она необходима для того, чтобы понять,

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

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

рекламы, корпоративного видео, информационного видео-выпуска

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

ПРИСТУПАЯ К РАБОТЕ
Итак, у вас есть проект, нуждающийся в раскадровке.
Прежде всего надо подумать, как рассказать историю

кадр за кадром. Многие аспекты, раскрытые в
предыдущих главах, применимы и в этой

сфере. Начинаете вы со сбора информа­
ции и мозгового штурма. Вы принима­

ете во внимание формат и соотношение ширины и высоты пространства

и экспериментируете с визуальной

композицией, делая наброски.
Элементы дизайна

-

пространство,

линия, форма, размер, шаблон, тек­
стура и светотень

-

становятся ва­

шими инструментами создания ви

-

зуальной истории. Как вы увидите,

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

будут важными инструментами рас­
Фото

186

Добавь воздуха!

© mipan - Fotolia.com.

кадровки.


-

;r" -

D

~

:1
1

1

''

Чтобы сделать раскадровку, необязательно являться превосходным

Раскадровки:от

иллюстратором. Можно сделать грубые зарисовки своих идей,

грубого наброска

обозначив фигуры контурами, примерно как перед версткой. Или

до экранника. Сара

же можно использовать, соединять и комбинировать фотографии

Уилсон, которая учится

и штриховые иллюстрации со стока. Если вы видите себя фото­

на кинорежиссера,

графом, возьмите в руки камеру.

сначала набросала свои

Мы считаем, что у вас уже есть внушительный арсенал визуальных

вовлекла исполнителей

инструментов для создания эффектной раскадровки. Восполь­

и свою команду

зуйтесь им. Однако вашим главным инструментом по-прежнему

в неделю съемок

остаются глаза. Что касается новых дизайнерских инструментов,

и редактирования.

то вот те, с которыми вы вот-вот познакомитесь:

•

Кадрирование

•

Перспектива

идеи на бумаге, а потом

Получился
превосходный
короткометражный

фильм «Рапсодия».
В представленной здесь
последовательности

•

Точка обзора камеры

отражены различные
уровни установки камеры.

•

Угол наклона камеры

•Движение

•

Последовательность кадров

•Переходы
•Освещение

•Шрифт

Обратите внимание:
первый кадр снят из
положения снизу, а угол
наклона камеры задает
динамичную линию

горизонта.

Раскадровки
«Рапсодии» и экранники
воспроизводятся

с разрешения Сары Уилсон.

•Звукоряд
Глава

12. Раскадровка

187


ВИЗУАЛЬНЫЙ СЛОВАРЬ ТИПОВ СЪЕМОЧНЫХ ПЛАНОВ

Макрокрупный план

Среднекрупный план

Полный крупный план

Широкий крупный план

Крупный план

Среднекрупный план

Полный средний план

Среднеобщий план

Коллаж

Полиэкран

Дальний план


ФРЕЙМИНГ КАДРА
Определение того, как изображение будет выстроено относи­
тельно четырех углов экрана, называется фреймингом. Основные
планы

крупный, средний и общий с вариациями, существуют

-

Акцентируйте
внимание, настраивая

также коллаж и полиэкран.

глубину резкости.

Дальний общий план дает зрителю возможность сориентироваться,

Парадный план розы

где происходит действие, прежде чем начать следить за развитием

Аmегiсап Beauty.
Роза на переднем

истории.

Отец рекламы Дэвид Огилви учил делать продукт главным героем.

плане (вверху) дает
ощущение отдаления,

Парадный план в этом случае демонстрирует лучшие внешние ха­

и перспектива уводит

рактеристики объекта, как если бы он был кинозвездой. ((Хорошо,

взгляд к подвешенному

мистер Демилль, я готова для крупного плана»,

горшку с папоротником

-

говорила старею­

щая кинозвезда Глория Свенсон, игравшая стареющую кинозвезду

на заднем плане. На

в фильме «Бульвар Сансет», который был снят в 50-е годы.

нижнем снимке из-за

незначительной глубины

Чем дальше <<Четвертая стена» экрана (то есть невидимая стена

резкости розу становится

между актерами и зрителями) отстоит от фокусной точки кадра,

фокусной точкой.

тем более безличностным получается символический тон. Но по
мере того как <(четвертая стена» приближается

к фокусной точке, аудитория все сильнее ощу­
щает свою взаимосвязь с тем, кто в этой точке
находится.

ПЕРСПЕКТИВА
Как принцип дизайна перспектива обретает
особое значение для кино- и видеопродукции,
а потому и для раскадровки. Если фрейминг
определяет визуальное поле зрителя, то пер­
спектива ответственна за то, насколько зритель

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

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

спектива, создаваемая ниспадающей линией
видимости и точкой схождения перспективы,

тоже отдаляет расстояние. Если говорить о мас­

штабе, то перспектива, которую формируют на
снимке разновеликие объекты, может усилить
ощущение расстояния (например, когда на зад­

нике изображена широкая аллея, а не переднем
плане

-

два человека). Запомните также термин

«глубина резкости», обозначающий диапазон
Гnава 12. Раскадровка

189


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

Но главное, помимо чувства пространства перспек­
тива создает ощущение эмоциональной дистанции

или, наоборот, близости. Перспектива может пере­
давать и символические смыслы, например чувство

свободы на открытом пространстве

-

и тревоги

и напряжения в замкнутом помещении с низким

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

небо или равнина

-

транслировать грустное со­

общение о хрупкости человеческой жизни.

ТОЧКА ОБЗОРА КАМЕРЫ
Говоря о перспективе, невозможно обойти сторо­

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

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

наблюдать за историей с различных точек.
Вы хотите, чтобы публика оставались невидимым
всеведущим третьим лицом? Или вы хотите, чтобы
она принимала участие в истории и видела про­

Точка обзора.

исходящее глазами главного героя? Например, и главный герой,

Один из эффективных

и зрители могут одновременно смотреть прямо в глаза злодею

способов показать двоих

и выиграть эту дуэль .

беседующих людей

-

это снимать через плечо

А может, зрители должны видеть то, что видит главный злодей,

с позиции стороннего

вместе с ним подкрадываться к ничего не подозревающей жертве

наблюдателя.

и заглядывать ей через плечо? В знаменитой сцене в душе из хич­

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

торый, возможно, рассказывает, как сделать то-то и то-то, читает

новости, продает продукт или ведет занятие йогой.

Короче говоря, планируйте точку обзора.

190

Добавь воздуха!


УГОЛ НАКЛОНА КАМЕРЫ

Съемка на уровне
глаз-

Определение угла наклона камеры также взаимосвязано с пер­

не единственный

спективой и точкой обзора. Вы всегда можете снимать прямо, то

способ. Варьируйте угол

есть горизонтально, но помимо этого существуют другие способы

наклона камеры, чтобы

расположить камеру и сделать эффектный кадр. Повернув камеру

рассказать вашу историю,

под углом, можно вызвать чувство тревоги за счет наклоненной

как, например, сделано

линии горизонта и нарушенного визуального равновесия зрителя.

Если выбрать такую точку съемки, чтобы камера была направле­

на этом натюрморте,

снятом с верхней точки.

Съемка сверху делает

на сверху вниз на фокусную точку, то последняя будет казаться

перспективу плоской,

маленькой, что создаст символическое ощущение ничтожности

зато на первый план

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

выходят текстура

прямо противоположного эффекта, придав ей большие размер

и рисунок.

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

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

Тем не менее необязательно всегда снимать спереди. Можно сфото­
графировать сзади, со стороны или под углом

45 °. ЭкспериментиГлава 12. Раскадровка

191


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

ДВИЖЕНИЕ
До сего момента мы рассматривали этот принцип дизайна приме­

нительно к статичным изображениям. Но движения на раскадров­

ке

-

совершенно другой аспект, который требует иного подхода.

Например, при панорамировании статичная камера поворачи­

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

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

Если используется ручная камера

и идет или бежит через сцену,

-

-

телеоператор держит камеру

получается прыгающее изображе­

ние. Такая манера съемки усиливает ощущение реальности, особен но если видеозапись сделана для экстренного выпуска новостей, но

долгий просмотр фильма, отснятого в подобной манере, утомляет.
К счастью есть <<Стэдикам))

-

система крепления камеры на теле

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

вместе с фокусной точкой. Вспомните классический фильм Роджера
Паттерсона про йети, вышедший в

1967 году. Там камера следует за

высоким лохматым, размахивающим руками двуногим существом,

смотрящим прямо в камеру и уходящим в лес. Мистификация или
нет, но это запоминающийся пример следящей фокусировки.
При наезде камера наезжает на сцену. При приближении непод­
вижная камера наезжает на сцену, объектив фокусируется на

192

Добавь воздуха!


Движение. Эти кадры демонстрируют
следящую съемку неподвижной камерой.

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

он перемещается в сторону негативного

пространства, расположенного справа. Без этого
негативного пространства велосипедист выглядел

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

нужной части кадра. При съемке передвижной камерой, камера,

установленная на тележке, двигается прямо на точку фокуса.
Как и в других случаях, не требуется придерживаться какого-то
одного типа съемки. Вы можете достичь нескольких эффектов

одновременно. Следящая съемка в печально известном фильме
про йети явно ведется с рук. Немало сцен мы видели в кино, когда

камера снимает панорамой и приближает, будучи установленной
наверху тележки.

НЕПРЕРЫВНОСТЬ
Единство

-

существенный момент, если вы рассказываете одну

историю, используя много кадров. Каждый снимок должен основы­
ваться на предыдущем и подготавливать к следующему. Так полу­
чается связное повествование. Оказалась ли визуальная история
связной от начала до конца и от кадра к кадру? Понятны ли точки

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

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

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

-

разогрев необязателен

и действующих лиц. Середина

-

-

и определять место действия
это развитие действия. Она со­

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

побуждением к действию, скрытым или явным.
В рекламе хронометраж обретает особенное значение (у вас есть 1О,

15 или 30 секунд). Вы не можете сделать раскадровку на 60 секунд
или даже на 12 секунд, если все, чем вы располагаете, - 10 секунд.
Глава

11.

Раскадровка

193


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

По необходимости проставьте хронометраж на кадрах,
и используйте часы, чтобы контролировать его .

ПЕРЕХОДЫ
В фильмах и видеороликах частью последовательности
кадров являются переходы между кадрами и эпизодами.

Самый распространенный тип

-

простой монтажный

переход (от установочного кадра, на котором разговарива­
ют два актера, к крупному плану одного из собеседников).
Перебивка «перебивает)) основное действие, вставляя что­
то еще, происходящее параллельно. Если в эпизоде показа­

ны двое спорящих около стоящего на обочине автомобиля,

то вставленный кадр с головой собаки, наблюдающей за
спором в окно, будет перебивкой. Кадр с проносящимися
мимо автомобилями тоже будет перебивкой.
Вставной кадр

-

это кадр, данный крупным планом, до­

бавляющий что-то важное к эпизоду. В эпизоде с двумя
спорящими людьми кадр со спущенной шиной будет

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

Некоторые виды переходов обозначают разные события,
происходящие одновременно и даже в разных местах, или,

наоборот, флешбэки. Позаботьтесь о том, чтобы зритель
не потерял нить повествования.

Эффект ((шторка)), наплыв и плавный переход

ния говорят сами за себя

-

-

назва­

хорошо зарекомендовали, но

в неопытных руках могут получиться низкосортными.

ОСВЕЩЕНИЕ
В раскадровке для создания драматического эффекта вы
можете использовать свет и тень. Здесь на первый план
выходят принципы контраста.

Заполняющее освещение.
На втором рисунке использовано
заполняющее освещение, которое

осветляет затемненные области.

Основной свет

-

это главный источник освещения в кад­

ре, естественный либо искусственный. Заполняющее осве­
щение дополняет основной свет, осветляя ненужные тени.

Заднее освещение

-

это источник света, подсвечивающий

точку фокуса с обратной стороны для придания контраста

и объема. Большинству кадров нужна комбинация всех
трех освещений, чтобы изображение получилось реали­
стичным, <<Как в ЖИЗНИ)).

194

Добавь воздуха!


Нижняя треть экрана.

В телевизионном мире

-

«нижняя треть экрана»

это специальный термин

для обозначения
подложки и текста на ней,
которые размещаются

в нижней трети экрана.

Помните правило третей?

А о переднем, среднем
и заднем плане не

забыли? Передний план
внизу экрана кажется

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

Нижняя треть экрана
может содержать текст

Если необходимо усилить драматизм, варьируют направление света

или изображение,

и степень освещенности. Мягкий свет или светлые малоконтраст­

например ЛОГОТИП,

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

В любом случае текст

должен быть заметным
и удобочитаемым,
особенно если он

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

экране появляются супергерои, рок-звезды или рестлеры). Боковое

наложен на видеоряд

(то есть на движущееся

изображение). Почему
титры «Утренних

новостей» на 7-м канале
удобочитаемы?

освещение дает длинные тени и усиливает ощущение трехмерного

Фото

пространства, в отличие от уплощающего эффекта мягкого света.

Foюlia.com.

Планируя раскадровку, помните, что свет

-

статичный или нет.

-

© David Lawrence -

тоже действующее

лицо вашей истории, пусть не главное, но второстепенное, если

использовать его с умом. Все эти эффекты годятся и для статичных
объектов, равно как и для информационной графики. Боковое

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

скольку отвлечет зрителя от цели визуальной коммуникации.

ШРИФТ
Переходим к словам и звукам

-

на экране и вне его,

-

являющимся

частью показа или относящимся больше к режиссерским задачам.
Глава

12. Раскадровка

195


Что касается текста, появляющегося на экране, то титры

-

это

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

-

это двигающийся текст, скользящий или медленно

ползущий по экрану. Вы все время видите ее на новостных каналах
или во время чрезвычайных ситуаций.

Работая над титрами, делайте акцент на разборчивости и удобо­
читаемости, вне зависимости от того, статичные это титры или

анимированные. Контраст

-

то есть цвет и светотень

-

играет

решающую роль, неважно, делаете вы выворотку или нет.

Если вы но....

вичок, вашеи

....

главнои за-

дачей должно
стать приду­
мывание убой­
ной идеи.

Никакие день-

ЗВУКОРЯД
В главе о раскадровке книги о визуальной коммуникации тема
«звукоряд» выглядит странно. Однако это очевидный момент,

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

Согласно сценарию впишите ваши ремарки касательно взаимо­

действия аудио и картинки. Пишите все очень подробно: кто кому
и когда говорит.

Также укажите, где вступает фоновая музыка, звуковые семплы

(SFX)

и визуальные эффекты

комментатора или диктора

(FX), голос
(ANNCR).

за кадром

(VO),

голос

Нет ничего тяжелее, чем писать диалоги. И ничего хуже, чем не­

ги не смогут

сделать
плохую идею
хорошей.

естественные, натянутые остроты. Мы вас предупредили. Не со­
ветуем, если вы только начинаете, привлекать много персонажей

и прописывать диалоги между ними

-

особенно развернутые,

-

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

С другой стороны, не лишайте зрителей звука только потому, что

вы теперь

слух

-

-

визуальный коммуникатор. Аудиоряд -услаждающий

может спасти вашу визуальную историю или, наоборот,

загубить.

ПОСЛЕРАСКАДРОВКИ
После того как раскадровка закончена и перед тем как начнутся

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

монтаж приблизительных набросков будущих кадров. С этой целью

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

196

Добавь воздуха!


Такие материалы предварительного производства называют ви­

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

ляете свою раскадровку невпечатлительным людям с туго набитыми
кошельками. Но видеоматик нужен не только для упражнений

в креативном снобизме

-

это полезная вещь, которая покажет

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

ного бюджета: помните о принципе

KISS («Делай проще и короче))).

Производство видеоклипов требует денег, а производство филь­
мов

-

еще больших. Американский кинорежиссер Сесиль де Милль

известен своими роскошными постановками, стоившим отнюдь

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

ние убойной идеи. Никакие деньги не смогут сделать плохую идею
хорошей. Лучшие идеи всегда те, в которых нет ничего лишнего.

Не пишите сценарий для двух персонажей, если хватит одного. Не

планируйте натурную съемку, если можно обойтись студийной. Не
рисуйте много декораций, если достаточно одной. И не планируй­

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

• • •ПОПРОБУЙТЕ ЭТО
1• Разработайте идею для короткого учебного видео о раскадровке.
Затем подготовьте раскадровку вашей идеи.

2.

Сделайте раскадровку любимой сцены из любимого фильма.
Примите во внимание:

•

Фрейминг

•

Перспективу

•

Точку обзора камеры

•

Угол наклона камеры

•

Движение

•

Последовательность кадров

•

Переходы

•

Освещение

•

Шрифт

•

Звукоряд
Глава

12. Раскадровка

197


3.

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

4.

•

Фрейминг

•

Перспективу

•

Точку обзора камеры

•

Угол наклона камеры

•

Движение

•

Последовательность кадров

•

Переходы

•

Освещение

•

Шрифт

•

Звукоряд

Помните фильм Паттерсона «Йети))? Давайте подурачимся
и сделаем серьезную вещь. Выберите три пункта из списка
и подготовьте раскадровку с несколькими основными кадрами
для каждого из них.

•

музыкальный видеоклип с йети в главной роли;

• телевизионное

интервью с йети;

•

реалити-шоу с участием йети;

•

кинематографическая фантасмагория

-

съемки йети в его

естественной среде обитания;

•

обзор наиболее интересных наблюдений за йети в стиле
обзора спортивных событий;

•

рекламно-информационный ролик, в котором Паттерсон
и йети продают продукт;

•
•

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

Это упражнение из разряда тех, где можно использовать во­

ображение на всю катушку, не ограничивая себя. Не забудьте:
«эксперты)) полагают, что йети Паттерсона

5.

-

женского пола.

Сделайте раскадровку новой 15-секундной телерекламы товара
широкого потребления, который есть у вас на кухне, в кладовке,
прачечной или ванной. Начните с уникального торгового пред­

ложения (УТП) продукта. Затем разработайте концепцию. Что
делать дальше, вы уже знаете.

198

Добавь воздуха!


Concept StoryЬoud
Job Number:

Date:

Title:

Length:

Client:

Writer:

1. Time:

2. Time:

3. Time:

Audio:

Audio:

Audio:

4. Time:

5. Time:

6. Time:

Audio:

Audio:

Audio:

7. Time:

8. Time:

9. Time:

Audio:

Audio:

Audio:

Page_of_


lodized Salt

ТV

Date: 11.30.09
Project: Salt-1V-001
Length: :15
Creative Team: Susan Snyder & Meaghan Rose

SFX: children playing in the pool (throughout]
1" Child:

Зсd

А

right angle is 90 degrees.

Child: Haiku is

а

form of Japanese poetry.

2" Child: The U.S. has

а

bicameral

Congress.

ANNCR [VO): The iodine in iodized
salt is essential for healthy brain
development.

Фотографии воспроизводятся с разрешения Кэти Робертс.


1

му-льтимедиакомпоненть1
иногда больше - значит больше
Exploring l 9th Century 11Book Farming"
Оliнч·

II.

к"11,.,, .

r'n1·111 • Elk Rive1·, МN

lf(ФЦМ

The Oliver

ОхlНоrм

Omnlandlt eiur sl deЫta atlustionsed quam que velllc·
ture cus dolut et entia dlsitibL s lpsam dit parlanlm
hillaut asperch illqul duclls aL ta consequos arclendlt
laborepro сап rem lplcat anln\i, sum estlssu ndlgnam
fuga. Ut aut lltassus, consedl sum aut qul fug las elus.
Jmpoг га dlsclma поЫt еа adl nullant, seque expllt allquamus eaquae cusdam accL s quis dolum explabo.
Ci omnimporem fugia que elLsae doluptia allquaerovid erisquat.

Н.


в

комбинации различных форм представления информа­
ции нет ничего нового. В немых фильмах, например, были
вставки с титрами в рамочке

-

с диалогами и пояснением

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

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

DVD.

Степень использования мультимедийного
дизайна разнится в зависимости от ситуа­

ции. Простое слайд-шоу оживляет статич­

ный веб-сайт, а в то же самое время в другом
пространстве геймеры погружаются в целые
виртуальные миры.

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

-

ется не только через зрение, но и посредством

слуха и осязания (запахи пока еще нельзя
передавать через компьютер, но дайте срок ... )
Мультимедиа.

Во-вторых, мультимедиа

Начало. До появления

чтобы пассивно получать информацию, аудитория участвует в про­

звука в кино музыкальное

цессе, дает обратную связь и вводит собственные данные. Темп,

сопровождение

скорость подачи информации и ее детализация

фильма в кинотеатрах

от пользователя.

обеспечивал оркестр.

Обратите внимание
на оркестровую яму
внизу снимка.

Кинотеатр в Т ампе,

1930 год. Из коллекции

Burgert Brothers.

-

это интерактивность. Вместо того

-

все это зависит

В относительно недавнем прошлом создание мультимедийных

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

Некоторые из-них предустановлены на вашем компьютере.

С любезного разрешения

Tampa-Hillsborough County
PuЫic Library System.

РАБОТА С ИЗОБРАЖЕНИЯМИ
В том что касается привлечения внимания, изображения без труда
удерживают пальму первенства. Но статичные картинки они та­
кие, знаете ли ... статичные. Если же сделать из них слайд-шоу или

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

Слайд-шоу. Компилируя слайд-шоу из отдельных картинок,
принимайте во внимание их содержание, переходы и возможность

управления со стороны пользователя. Для акцентов на баннере или
определенной области информации выбирайте качественные изо-

202

Добавь воздуха!


бражения, объединенные темой (цветом, сюжетом
и т. д.) и с одинаковой ориентацией.
Если слайд-шоу должно рассказать какую-то исто­

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

выстроить сюжетную линию и подобрать правиль­
ные кадры. Такой подход особенно удобен, если пла­

нируется закадровый текст. Выбирайте фотографии

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

димое для раскрытия истории изображение обычно
полезнее, чем технически совершенный снимок.

Переходы в слайд-шоу. Программы для компиляции
слайдов предлагают много типов переходов. Вам,

как ребенку в кондитерской, захочется попробо­
вать каждый из них. Гоните от себя это желание.
Простое

-

всегда лучшее, выберите один стиль

и придерживайтесь его. Традиционная нарезка

-

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

-

продолжительность показа и ско­

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

этого необходимое время.
Эффект Кена Бернса позволяет оживить неподвиж ные изображения путем панорамирования или при ближения и удаления изображений в слайд-шоу.
Бернс использовал эту технику при работе с истор и ческими фотографиями, письмами и картами в своих
документальных фильмах. Эффект предустановлен
во многих непрофессиональных программах об-

Выберите только один. Не позволяйте
переходам между слайдами затмить

сами слайды. Выберите один простой
стиль переходов и придерживайтесь его.

Мы рекомендуем резкий или плавный
монтажные переходы, в противовес

бесконтрольным вспышкам и вращению.
Глава 13. Мультимедиа

203


работки видео, но обращайтесь с ним
осторожно и включайте только когда

он улучшает коммуникационную функ цию. Не надо задействовать его только
потому, что он вам нравится.

Повторять или не повторять? Слайд­

шоу можно зациклить до бесконечно­
сти или выставить определенное ко­
личество повторов

-

все зависит от

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

тить его лишь однажды. Как правило,
лучший вариант

-

дать пользователю

возможность контролировать воспро­
изведение: запускать, останавливать, повторять, ставить на паузу

Галереи изображений.

Существует
множество недорогих

и бесплатных плагинов
для воспроизведения

фотографий на сайтах
и в блогах. В качестве
примера приведен

интерфейс плагина

Lightbox.

и регулировать громкость.

Интерактивные rалереи изображений. При просмотре
интерактивных галерей изображений у зрителей больше контроля

над опциями просмотра. Некоторые фоторедакторы заточены
под создание уже готовой для размещения в Сети галереи из вы -

бранных вами изображений. Все что нужно сделать,

-

загрузить

файлы на сервер.
Фотохостинги предлагают похожие опции. Регистрация обычно

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

хотите разместить фотографии непосредственно на своей странич­
ке, некоторые сервисы «умеют» генерировать строки кода, которые

позволят отображать фотографии там, где вам нужно, а хранить
их при этом на фотохостинге.

ВИДЕОРОЛИКИ
Определение видео охватывает широкий диапазон

-

от тщатель­

но продуманных дорогих роликов до домашних видео, снятых на

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

и среди прочего видеоинструкции.

Простые программы для видеомонтажа столь же популярны, как

и софт для создания слайд- шоу, поэтому и дилетанты вполне могут

204

Добавь воздуха!


мастерить ролики хороше­

го качества. В клипе глав­
ное не дизайн, а сценарий,

съемка и обработка, хотя
иногда участие художни­

ка-постановщика необ­
ходимо. Как и в случае с

фотографиями, если став­
ки высоки, съемку видео

лучше доверить профес­
сионалам. Но вдруг судь­

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

1.

Установите камеру на
штатив или другую ста­

бильную поверхность.
Дрожание кадра очень быстро приедается.

2.

Снимайте при ярком равномерном освещении. Избегайте рез­
кого контрастного света и подсветки сзади, а также всего, что

3.

чем нужно.

Дополнительная

воспринимается как световой спецэффект.

видеосъемка, сделанная

По возможности сделайте пробную видеосъемку, чтобы про­

вас бироллами, которые

тестировать мизансцены, звук и свет.

4.

Снимайте больше,

Снимайте каждый фрагмент по меньшей мере на 10-15 секунд

«про запас», обеспечит
мы сможете использовать
для переходов между
видеороликами.

дольше, чем, по вашему мнению, нужно (отснятые, но неот­
редактированные материалы, используемые в качестве визу­
ального наполнения или для создания переходов, называют

«биролламю>

-

отрезать, а вот

от англ.

b-roll). Лишний материал всегда можно
вставить то, что не было снято, - это уже из

области волшебства.

5.

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

6.

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

7.

Выстраивайте композицию в кадре. Используйте правило тре­
тей в качестве руководства к действию и размещайте фокусную
точку соответствующим образом.

8.

Не разговаривайте во время съемки - вдруг микрофон запишет
ваш голос~ Шумные вздохи за кадром тоже могут представлять

проблему.

Глава 13. Мультимедиа

205


Интервью и монологи («говорящие головы»)

1.

Снимайте в спокойной тихой обстановке.

2.

С умом подойдите к выбору «говорящей головы)). Не все могут
интересно и увлекательно говорить на камеру.

3.

'"'"

Делайте пробную съемку... Бере­

женого бог бережет.

При обработке

1•

Выбирайте простые переходы -

резкие или плавные. Придерживай­
тесь ОДНОГО СТИЛЯ, внимание ДОЛЖНО

быть сконцентрировано на видео,
а не на переходах.

2.

Не затягивайте продолжитель­

ность ролика. Случайные пользо­
ватели выдержат несколько секунд,

а любители смотреть видео

-

не

более минуты.
Кодирование. Кодирование

-

это

последний этап создания видео.

Существуют различные форматы
Под управлением. Если на сайте есть аудиои видеоклипы, позвольте пользователям ими управлять

(запускать/останавливать, прибавлять/убавлять звук).

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

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

MPEG-4 (Motion Pictures Expert Group)

очень распро­

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

206

Добавь воздуха!


Съемка видео и ero
обработка - не ваш
конек? Те же самые стоки,
что предлагают фотогра­

фии, часто продают и ви деоролики. Иногда такая
покупка значительно эко­
номит время и деньги.

АУДИО
Как вы знаете, аудио тоже
входит в состав мультиме­

диа

в

виде

закадрового

текста или естественного
шума, сопровождая отсня

-

тый видеоматериал. Это

также может быть фоновая
музыка, или музыкальная

подложка, на сайте или в

DVD-проекте. Короткие

аудиоклипы (SFХ)призваны
сигнализировать о каком-то

действии, например о на­
жатии кнопки или отправке

электронного письма. Ау­
дио

-

это приятные слуху

звуки, подчеркивающие, что
важно, а что

-

нет, и задаю­

щие тон и настроение.

В дотелевизионную эпоху,

когда бал правило радио,
хорошая программа была
настоящим представлением.

И именно такой и должна

•

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

1.

Используйте звуковое сопровождение, особенно звуки актива­
ции (например, нажатия кнопок) дозированно. Как и в случае

с большинством элементов дизайна, немного

-

это вполне

достаточно.

2.

Фоновая музыка поддерживает общую атмосферу и месседж

Вы сль1шите? Аудио

-

это эффективный
мультимедийный

компонент. Попробуйте
представить себе
звуковое сопровождение
ДЛЯ ЭТИХ двух

фотографий.

проекта. Она не должна задавать тон.

Глава

13. Мультимедиа

207


8 0 0

Unti ~d-1
1

@>

~

lО<Ж

,.

s

~

"

1'

3.

,,

(Llyer 1, RC8/8) •

Предоставьте пользователям кон­

троль: возможность запускать, оста­
навливать, ставить на паузу и регули­

ровать громкость звука. Не раз и не два

•

~

1' lr
1;
lr

неожиданного грохота из динамиков.

..

о

,

•

Ooc:4J9.SЧS2L11C

-

-

·•

АIОМАТ10Н (FМN[S)

С-:]· г:-r

г- ~ •
0.1 мс. •

"""

•

4. Если аудио представляет собой после­
довательное изложение событий, где яс­
ность превыше всего (интервью), сделай­

... "

rr:

мы с вами подпрыгивали на стуле от

+4

,.

0.1 ис. •

0.1 И<. "

~·

...

·~

>J

0.1

ис. •

01

мс..•

'

--

•
0.1~ "'

•
О..tис... •

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

-

не встроенный в ви­

деокамеру. Аудитория скорее простит

плохое изображение, чем плохой звук.

5!!

з

Где взять аудио. Аудиосопровождение, музыку, а также различные сиг­

Расчетная, или

налы активации (например, звук для кнопок) можно купить на

твиновая, анимация.

стоках. Есть и такие сайты, которые предлагают звуки и музыку

Цифровая анимация
основывается на том же
принципе, что и анимация,

нарисованная от руки.

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

Серия изображений,

Как ни грустно сознавать, но временами, то, что аудитория слышит,

каждое из которых

а не, что она видит, выходит на первый план. Временами требуется

слегка отличается от

сделать интервью без видеоряда. В любом случае под рукой должно

предыдущего, быстро
проносится перед

быть хорошее звукозаписывающее оборудование.

глазами, и таким образом
создается иллюзия
движения.

Скриншот(ы)

Adobe
Photoshop CS4

воспроизводятся

с разрешения

Adobe
Systems lncorporated.

АНИМАЦИЯ
Миллионы детей выросли, наблюдая за шумными потасовками
кота и мыши. Но анимация выросла тоже. Она повсюду, от при­

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

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

в сфере компетенции профессионалов высокого класса. Более
простая и распространенная анимация, такая как переходы между

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

Если вы твердо намерены попробовать свои силы в анимации,
возьмитесь за специальные программы

-

освоить их сложно, но

можно. Любой может анимировать логотипы, титры для видео,

рекламные баннеры и отдельно взятые компоненты веб-сайтов,

208

Добавь воздуха!


идляэтогонеобязательноиметьдиплом

дизайнера.

GREENW_ SE

Расчетная, или твиновая, ани­
мация. Цифровая анимация основывается на том же принципе, что и ани

-

мация, нарисованная от руки. Серия

изображений, каждое из которых слегка
отличается от предыдущего, быстро

GREENW1SE

проносится перед глазами, и таким образом создается иллюзия движения.

Скорость цифровой анимации состав­
ляет примерно

30 кадров

в секунду, так

GREENWiSE

что для одной секунды ролика нужны

30

изображений, а это большой объем

работы. Однако если вы используете
твины, компьютер дорисует все за вас.

В расчетной анимации есть только ос­

GREENWiSE

новные изменения движения или фор­

мы. Представьте себе, что на первом
кадре в верхнем левом углу изображен
красный круг, а на последнем

-

тот же

самый красный круг в нижнем правом

~

GREENWISE

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

Просто

дорисует все промежуточные кадры, необходимые для передви­

хорошо. Анимация не

жения красного круга из левого верхнего в правый нижний угол.

обязана быть сложной.

Расчетная анимация прекрасно работает с простыми движениями

за несколько секунд

и может также использоваться для передачи изменения цвета и не­

вырастает буква

прозрачности или для постепенного появления или исчезновения

и листочек над ней.

-

значит,

На этом логотипе

1

объекта.
Раскадровки

-

превосходный метод планирования расчетной

анимации. Стрелками обозначаются движения вместе с взаимо­
связями между формами и текстом. Каждый набросок раскадровки
сопровождается описанием содержания и звуковой подложки.

Все дело во времени. На самом деле не движение выделяет
анимацию среди других видов графики. А временной компонент.

Анимированные элементы появляются, исчезают и меняют форму
в различных точках временной шкалы. Скорость показа и переходы

никак не волнуют нас, если мы работаем над печатным дизайном
или создаем статичный веб-сайт, но в анимации и видео скорость

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

-

успокаивают.

Глава

13. Мультимедиа

209


Exploring 19th Century "Book Farming"
Oliver Н.

Кelley

Farm • Elk River,

МN

Omniandit eiur si deblta atiustionsed quam que vellic·
ture cus dolut et entia disitibus ipsam dit parianim
hillaut asperch iliqui duciis auta consequos arciendit
laЬorepro con rem ipicat animi , sum estissu ndignam
fuga. Ut aut litassus, consedi sum aut qui fugias eius.
lmpor га discima noblt еа adi nullant, seque explit ali·
quamus eaquae cusdam accus quis dolum explabo.
Ci omnlmporem fugia que eiusae doluptla aliquae·
гovid erisquat.

Мультимедийный

Другой важный момент

сторителлинг.

определить, как долго должен длиться ваш ролик? Это зависит от

Интерактивная страница
вверху содержит

фотографии, текст,
слайд-шоу, инфографику
и видеоролики.

-

продолжительность. Как

задачи анимации. Чем длиннее ролик, тем тяжелее файл, однако
помните о возможных ограничениях и, за редкими исключениями,

не ставьте бесконечный повтор анимации. Проигрывайте один или
несколько раз, не более. Не зацикливайте резкие и прерывистые

Поэтому процесс

ролики, чтобы у зрителей не разболелась голова.

обучения превращается

Форматы файлов для анимации. Как обычно, чтобы

в мультисенсорный, а его
темп регулируется самим

обучающимся.

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

рекламным баннерам, например, могут предъявляться требования

касательно их физического размера, веса файла и количества по­
вторений. Самые распространенные форматы файлов для анима­
ции

-

это

.GIF и . SWF.

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

эта анимация не дополняет хаос сама по себе. Используйте ее

21 О

Добавь воздуха!


целенаправленно, убедившись, что это подходящее средство для
передачи вашего сообщения, а не ради того, чтобы использовать.

Не каждая

ИНТЕРАКТИВ
Самое замечательное качество мультимедиа

-

они позволяют

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

элемент, из тех, что мы обсуждали выше,

-

функции управления

видео и аудио, просмотра фотогалереи, переход по ссылкам

-

история,

не каждый
сюжет по-

в той или иной степени тоже интерактивен. Но теперь мы можем

гораздо большее. Помните нашу мультимедийную инфографику,

тянет на

демонстрирующую работу сердца? Мы тогда упоминали трехмер­
ную анимацию и предлагали аудитории виртуальную прогулку

по путям кровообращения. А давайте снабдим проект еще и за­
кадровым комментарием!

Необязательно ограничиваться одной мультимедийной инфогра­

фикой. Представьте себе сайт о человеческом сердце с вышеупо­
мянутой ЗD-моделью в качестве центрального элемента, другие

интерактивные функции и ссылки предоставляют дополнительную

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

степень риска возникновения сердечно-сосудистого заболевания.
Можно включиться в увлекательную игру на тему «здоровье сердца))

и с помощью тренировок и сбалансированной диеты дать отпор

полноцен­

ный проект.

В его основе

должна быть

глубокая,
интересная
и многогран­
ная тема.

генетической предрасположенности к недугу в виртуальной среде.

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

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

Если вы хотите стать частью команды, работающей над интерак­
тивным мультимедиапроектом, вот несколько моментов, которые

необходимо иметь в виду.

1• Не каждая история, не каждый сюжет потянет на полноценный
проект. В его основе должна быть глубокая, интересная и много­
гранная тема.

2.

Выбирайте лучшие мультимедийные элементы для конкретной
темы. Если у вас нет подходящего кандидата на роль «ГоворяГлава

13. Мультимедиа

211


щей головы» или диктора, вычеркните видеомонолог из плана.

Рассмотрите возможности иных форм подачи информации,
например инфографику.

3.

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

у информации должна быть четкая фокусная точка.

4.

Определитесь с общим стилем оформления, затем подберите
элементы дизайна, которые ему соответствуют.

5.

Сделайте интерфейс понятным. Кнопки должны выглядеть, как
кнопки, чтобы их было легко найти и чтобы ими было легко
пользоваться. То же касается ссылок.

6.

Не позволяйте технологиям затмить информацию или историю.
Технология должна быть невидимой пользователю.

Новые технологии вдохновляют дизайнеров и визкомов на многое.
Просто помните, что подгонять дизайн гостиной под журнальный
столик

-

по меньшей мере неразумно.

• • • ПОПРОБУЙТЕ ЭТО
1.

Посетите сайт какой-нибудь известной и крупной газеты. По­
смотрите на примеры мультимедийного сторителлинга. Какие

элементы в них задействованы? Эффективны ли они? Почему
да или почему нет? Напишите короткую критическую статью

с обоснованиями.

2.

Возьмите три простых логотипа. Сделайте три раскадровки для
анимации каждого из них.

3.

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

предъявляются к размеру файла, формату, продолжительности?
Потратьте немного времени на изучение анимированных ре­

кламных баннеров на этом сайте. Какие анимационные техники
были использованы?

4.

Посетите сток, где продаются аудио- и видеозаписи. В каком
формате они представлены? Какие жанры и стили есть в нали­
чии? Найдите видеоролик и несколько аудиозаписей, которые

вам нравятся. Устройте себе мозговой штурм и набросайте
варианты их использования на каком-нибудь сайте.

5.

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

212

Добавь воздуха!


веб-дизайн
з везды небольшого экрана


р

азвитие Интернета серьезно повлияло на личные и про­

фессиональные коммуникации, и это еще слабо сказано.
Незаменимые когда-то книги

и справочник «Желтые страницы»

-

-

многотомные энциклопедии
уступили место электронным

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

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

КАК УСТРОЕН ИНТЕРНЕТ
Работая с веб-контентом, важно представлять себе, как полу­

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

ется некорректно или не отображается вообще.

Доступ на существующие сайты. Чтобы получить до­
ступ в Интернет, вам нужен компьютер, интернет-браузер и по­
ставщик интернет-услуги

(ISP).

Когда вы задаете ключевые слова

в поисковике или вводите URL-aдpec и нажимаете

Enter, ваш запрос

отсылается провайдеру, он в свою очередь передает запрос во Все­

мирную паутину

(World Wide Web),

физической основой которой

является Интернет. Информация из Сети, совпадающая с запросом,

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

Ваш сайт в

WWW. Чтобы разместить и поддерживать свой

сайт в Сети, нужно еще кое-что: место на сервере (хостинг), до­
менное имя и протокол передачи файлов

(FTP).

Хостинг. Пространство на сервере для вашего сайта

-

это как бы

место на парковке. Возможно, ваш провайдер предлагает хостинг
с пакетом услуг или вы можете купить его у независимого хосте­

ра. Место на сервере зависит от размера дискового пространства

и доступности прочих функций, например предельного количества
электронных ящиков.

По умолчанию имя сервера плюс название директории, присваи­

ваемое хостинговой компанией, становится URL-aдpecoм вашего
сайта. Ваша хостинговая компания может предоставить вам на-

214

Добавь воздуха!


КАК УСТРОЕНА СЕТЬ
Удивляетесь, как компьютеру удается собирать данные с серверов по всему свету~ Вот краткое
объяснение того, как устроена Всемирная паутина.

8 Baw провайдер. Запрос направляется
8

Baw

в Сеть через интернет-провайдера.

компьютер

Сервера провайдера соединены

и браузер.

с серверами по всему миру.

~

Чтобы получить

информацию из
Сети, вы вводите
запрос в поисковую
систему посредством

веб-приложения

-

браузера.

D

( =-=-=-=-= '

'-./

е Назад к браузеру. Провайдер направляет

е Сеть. Информация,

результаты поиска на ваш компьютер. Браузер

соответствующая

отображает конкретную страницу или список

поисковому запросу,

страниц, соответствующих критериям поиска.

собирается и отсылается
обратно провайдеру.

Кликните, чтобы запустить процесс заново.

бор цифр, разделенных точками,

-

это IР-адрес, который также

определяет координаты вашего сайта в Интернете. Никто не хочет

получить адрес вроде www.вашВеб-хостер.сот!-название сайта
или, еще хуже,

65.97.106.162.

Вот поэтому нужны доменные имена.

Доменные имена. Доменное имя

-

это URL-aдpec, который вы

приобретаете при регистрации, это как номерной знак автомобиля,
сделанный на заказ. Доменные имена подбираются с тем расчетом,

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

зоне

-

.сот, но есть и другие. Зона

личных веб-страниц,

.org -

.net была

предназначена для

для групп и предприятий,

правительственных организаций и

.edu -

.gov -

для

для образовательных

учреждений.

Купив доменное имя, вы должны прописать его в DNS-системе
вашего хоста. Это действие «устанавливает связь)) между хостом

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

14. Веб-диэайн

215


ЧТОБЫ САЙТ ПОЯВИЛСЯ В СЕТИ
Чтобы разместить сайт в Сети, нужен компьютер с доступом к Интернету, хостинг-провайдер
и FТР-клиент. Хост - это как оплаченное место на парковке, только в Сети. FТР-клиент,
если продолжить сравнение,

D

это пропуск на частную парковку. Вот как это устроено:

---

FTP
(File Transfer Protocol)
~~

( =-=-=-=-= '
8

-

·-·-·-·-·-- ·--

1. 11.

е Можно смотреть. По оконч

Запустите FTP.
Запустите FТР­
клиент. Войдите
в систему, используя
предоставленные
хостинг­

провайдером логин
и пароль.

процесса загрузки ваш хостер делает

файлы доступными для посетителей.

f) Скопируйте. FТР-клиент
открывает два окна: в одном

показаны файлы на локальном
компьютере, в другом

-

файлы

на сервере. Переместите файлы,
которые вы хотите загрузить,

из локальной папки в папку
удаленного сервера.

доменное имя в

DNS

и перенаправляет браузер на ваш веб-сайт.

Если звезды будут благосклонны, ваша веб-страничка отобразится
в окне браузера пользователя.

Протокол передачи файлов

(FTP).

Для заключительного этапа про­

цесса нужен механизм, который «припаркует» ваши веб-страницы

на сервере. Веб-дизайнеры хранят файлы в двух местах: в папке
на персональном компьютере и в такой же папке на сервере. При

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

своих браузеров.
Чтобы соединиться с сервером, который представляет собой
удаленный компьютер, вам нужно клиентское FТР-приложение­

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

в диалоговом окне нового соединения, FТР-клиент перебросит
мостик от вашего компьютера к серверному пространству. За­
гружать файлы так же просто, как перетаскивать мышкой из
папки в папку.

216

Добавь воздуха!


К ЧЕМУ ГОТОВИТЬСЯ
Если вы читаете эту главу, то, вероятно, до­
пускаете мысль, что вам придется работать

с Сетью на профессиональном уровне или

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

писали код и собирали приложения с нуля.

С тех пор все переменилось, и если вы не
знаете языков программирования , то нече­

го и волноваться, в вашем взаимодействии

с веб-сайтами вряд ли будет фигурировать
код . Зато придется делать следующее:

1• Готовить

простые изображения и кон­

тент для существующего сайта. Вы пре­

доставляете текст и графику, оптими­
зированные для использования в Сети,

веб-мастеру, который загрузит изобра­
жения и текст за вас. Мы еще коротко

поговорим об оптимизации графики.

2.

Работать с CMS, веб-приложением, ко­
торое управляет контентом сайта и в
мгновение ока генерирует страницы из

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

сделать визуально целостный сайт. Такие системы идеальны

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

CMS,

например, для электронных

рассылок, которые делают сайт более функциональным .

3.

4.

Создавать сайты на основе шаблона. Шаблоны позволяют взять

Это неизбежно.
Готовите ли вы

готовый дизайн и наполнить его новым содержанием. Шаблоны

изображения и логотипы

хранятся на сервере провайдера, также их можно скачать и раз ­

для существующей

местить в личном серверном пространстве.

страницы или хотите

Взаимодействовать с опытными веб-дизайнерами и разработ­
чиками при создании определенных сайтов с определенным

функционалом. Привлечь профессионалов следует также и в

создать сайт с нуля, вам

придется работать с Веб.
Смиритесь.

случае, если от попадания на первые строчки поисковиков за­

висит успех сайта. Хотя веб-дизайн
автоматизированный процесс,

SEO

это в большей степени
(оптимизация поиско­

вых систем) требует серьезного планирования и воплощения.

Глава 14. Веб-дизайн

217


Ovll volos por1e qul re me nl

tem quata cut vent es volore
teнltas edll odl re repelee
ecutdendemet et fuge.

*
.

CURRENТ NEWS

. . ~- Clr'
_._.,.,...

HEADUNE HERE.

HEADUNE HERE.

HEADUNE HERE.

Ovlt volee por1e qul 111 me nl
tem quato cu1 vent 11 volo111rum le мm volorum lnullau
llllltas edlt odl 111 ПIPll•
ecutdendemet et fuge. Ge.plaЬorerlae peгumquo ommostНll dee reвped 8О1 cloluptur
нm eгuptlo lntlbuиm eceetlam
volupte tur1but volorer volor em

Ovlt vole1 por1e qul re me nl
tem quete cu1 vent а1 voloreгum 1а 11m volorum lnullau
te111ta1 edlt odl re ropelee
ecutdendamet et fuge. Geneet
pleborenн perumquo ommost1181 dn 111ropod 8О1 doluptur
11m erupllo ln~buмm ecntlem
volupte tur1bus voloror rum

Ovlt volee por1e qul re ma nl
tem qU818 cu1 vent 11 volororum 1а 11m volorum lnullau
t1111tas edlt odl 111 111Р8111
eculdandamet et fuge. Gennt
plallorer1ae perumquo ommost1181 dee 111nped 001 doluptur
нm eгupl!o ln~buнm ecestlam
voluplll turlbu1 volo111r rum

1 Terms of Serv1ce 1 Pr1vacy Pol1cy 1 Contact Us 1 About Us 1 Job Opportun1t1es
f ЩJ'{f щt1t JО()Ч

Хороший дизайн

-

это всегда хороший

ВЕБ-ДИЗАЙН

дизайн. В основе

Чем веб-дизайн похож на дизайн печатной про­

грамотной разработки

дукции. Хороший дизайн

сайта

посредством чего он реализован. Конечный продукт должен при­

-

базовые

-

это всегда хороший дизайн, неважно

композиционные

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

элементы и принципы

информацию и вызывать эмоции.

дизайна, такие как

фокусная точка, баланс,

Вашему сайту нужны фокусная точка, визуальная иерархия, ба­

динамика, линия, форма,

ланс, ритм и хорошая верстка. Сайты, состоящие только из одной

светотень и, разумеется,

страницы, встречаются редко, а это значит, что вам нужно со­

«воздух».

блюдать единство и обеспечить удобную для посетителей систему

Структурная сетка
особенно важна для

навигации.

Чем веб-дизайн отличается от дизайна печатной

сохранения визуального

продукции. Сайты нелинейны. В отличие от книг, журналов или

единообразия нелинейно

многостраничных документов, многостраничные сайты нелинейны.

связанных между собой

Вместо того чтобы последовательно перейти от главы

страниц.

1 к главе 2,

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

Иерархия, повторение и единство, присущие дизайну, играют при
этом решающую роль.

218

Добавь воздуха!


Сайты могут быть интерак­

тивными и задействовать сразу
несколько каналов восприятия.

Сайты, за счет присутствия ани мации, видео и аудио, обогащают
наше восприятие. Блоги, форумы
и прочий UGS-контент (то есть
создаваемый пользователями)
делают сайты интерактивными

и динамичными. Веб-дизайнер

должен разработать структуру,
которая сохранила бы логику
и упорядоченность, несмотря на

постоянно обновляющееся со­
держимое.

Шрифты ведут себя по-разному.
Во многом выбор шрифтов для
веб-проекта аналогичен выбо­

Выбор шрифтов для Веб. Чтобы шрифты адекватно

ру шрифтов для печатного про­

отображались в разных браузерах, выбирайте только те из них,

дукта. Декоративные гарнитуры

которые являются общими для разных платформ. Если, верстая

привносят индивидуальность

сайт, вы предпочли редкие декоративные гарнитуры, в системе

и стиль, прочие же выбираются

некоторых пользователей они могут быть заменены на

Helvetica.

с учетом их удобочитаемости.

Шрифты разного кегля обра­
зуют визуальную иерархию, но

удобочитаемость электронной

БЕЗОПАСНЫЕ ШРИФТЫ

страницы определяется не теми

Вы хотите, чтобы дизайн сайта одинаково отображался

же самыми критериями, что удо­

в разных браузерах и на разных платформах?

бочитаемость печатной.

Используйте шрифты, которые есть практически
на всех компьютерах. Вот их неполный список.

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

чати и действуйте от обратного.
Для электронных документов
самыми удобочитаемыми шриф­
тами считаются гротесковые, а

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

Выбор шрифтов для электрон­
ного документа

-

это не просто

поиск стильных или удобочита­
емых начертаний. Все сложнее.

Arial

Palatino

Arial Black

Tahoma

Courier

Times New Roman

Georgia

Times

Helvetica

Trebuchet

lmpact

Verdana

Monaco

В расчет приходится принимать
и технические сложности. На
Глава

14.

Веб-диэайн

219


самом деле в вашем распо­

ряжении крайне ограничен­

ное количество шрифтов,
из которого вы можете вы

-

бирать. И вот почему.
Вы прописываете понра­

вившиеся вам шрифты
в коде страниц или в при

-

лагаемой таблице стилей
и когда размещаете гото­
вые страницы на удален­
ном сервере, в ход идут не

сами шрифты, а их специ­
фикации. Когда браузер
посетителя вашего сайта

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

спецификации и ищет на
локальном ПК указанные

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

переносе документа

с одного

компьютера

на

другой у вас слетали шриф­
ты и стилевое оформление,
вы понимаете, о чем речь.

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

Times, Arial, Helvetica,

ответствующих этому кри

Жди неожиданноrо.
Каждый брауэер
и монитор передают

цвета по-своему. Вверху
вы видите одну и ту же

домашнюю страницу,
представленную на двух

разных мониторах.

терию семейств, в него входят, например,
Veгdana,

Georgia и Trebuchet.

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

или

Courier

Helvetica

(шрифты по умолчанию), а это может нарушить всю

эстетическую концепцию. Если хочется использовать декоративные

шрифты, придется перевести текст в графику и разместить его
Воспроизводится
с разрешения

Alfredo
Estefes, Salsa Passion.

220

Добавь воздуха!

в макете, как обычную иллюстрацию.


Цвета ведут себя плохо. Цве­
та для веб-сайта подбирают
по

тем

же

критериям,

что

и для других дизайнерских
проектов: цветовое колесо,

исторические темы, эмоцио­

нальный или культурный мес­
седж или сочетаемость цветов
на странице.

Будьте готовы к тому, что цве­

та отобразятся по-разному­
в зависимости от того, где

их просматривают. Каждый

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

Безопасные цвета.

это извечная проблема.

-

Перечень веб­

Для устранения такой проблемы была придумана «веб-безопасная»

беэопасных цветов был

цветовая палитра. К сожалению, эту палитру из

подготовлен в 90-е годы

пустили в середине

90- х годов,

216

цветов вы­

когда большинство людей все еще

с целью предупредить

пользовались мониторами с восьмибитной матрицей. Когда все

красочное искажение.

перешли на мониторы с шестнадцатибитным цветовым профи­

Список устарел, когда

лем, только

22 первоначальных цвета выдержали эту перестройку

и остались безопасными.
Можете себе представить, как тяжело креативить, имея в распор я жении только

22 цвета!

качество мониторов
улучшилось.

Поэтому веб-дизайнеры редко утруждают

себя обращением к безопасной палитре.

Скриншот(ы)

Adobe

воспроизводятся

с разрешения Adobe
Systems lncorporated.

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

ПОДГОТОВКА ГРАФИКИ
Даже если вам никогда не приходилось иметь дело с сайтами,
в какой-то момент кто-нибудь обязательно попросит вас подгото­

вить графику для размещения на существующем сайте.

Работа с дизайнером или разработчиком. Когда вы
сотрудничаете с профессиональными дизайнерами и разработчи ками, ваша цель

-

снабдить их как можно более качественными

изображениями самого высокого разрешения. Фотографии предо­
ставляйте в формате

JPG,

а логотипы

-

в векторе. Дизайнер или

Глава

14. Веб-дизайн

221


ПЕРЕВОД В GIF-ФOPMAT
В процессе оптимизации

Save For Web & Devices

вы ДОЛЖНЫ найти
золотую середину между

небольшим размером
файла и приемлемым
качеством изображения.

Выберите
установки. Выберите
установки в зависимости

от типа изображения.

Здесь ввиду больших
цветных областей

на изображении мы
предпочли

GIF.

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

--

8:

--

Alph.a.:

-- На:

файла.
Скриншот(ы) Adobe воспроизводятся с разрешения Adobe Systems

lncorporated.

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

Самостоятельная подготовка графики. Это несколько
этапов. Сначала нужно изменить размер иллюстрации, подогнав

под нужные параметры. Если это растровое изображение, вы­
ставьте разрешение

72 dpi -

получится среднего размера файл.

Но если очень нужно, можно уменьшить его еще, поскольку чем

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

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

бражениями просто подберите уровень качества в диапазоне от
минимального до максимального. А вот вес файла векторной кар­
тинки зависит от используемой в ней цветовой модели. Функция

предварительного просмотра позволит оценить, как будет выгля-

222

Добавь воздуха!


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

-

это

GIF и PNG.

И вот оптимизированное изображение готово к загрузке.

ПРОЕКТИРОВАНИЕ
Поскольку веб-сайт

-

это сложная комбинация текста, иллюстра­

ций и программных средств, лучшие сайты возникают в резуль­

тате объединенных усилий дизайнеров, разработчиков, райтеров
и экспертов по юзабилити. Работаете ли вы над дизайном, ре­
дактируете ли существующий

сайт в одиночку или создаете
что-то новое в команде, всегда

Prellmlnary Web Outline:

нужно знать, что делать, когда

А

CATERED EVENT
Home Page

хочешь получить грамотный

веб-сайт.
AЬout

Планирование. Вопло­

FAQ

Us

щая любой проект, его стре­

Links

Contact

• Single page with

links to related
rypes or vendors:
Photographers,

мятся сделать столь же пре­

DJs,Florists.

красным, каким был утверж­

Вakeries.etc.

денный план. То же с веб­
сайтом, так что продумайте

стилевое оформление, кон­
тент, месседж и пути реали­

added ai а bunon in the main
navigation (up one level)

complete menus
о•

• Do )'01.I want people to Ь@аЫе
to Ofder on-line? PiJYon·line?
Ву credit carcl? Or just call to
order

зации.

• lndividual

• [)о

you want
down here?

а menu Ьreak­

·А 1а

carte menus

°'
·Othertypeof
breakdown (Ьу
meal? Evenl type

Other opllons:
lnclude info on geographic service аП!а?

lnclude estimated pricing?
FAQ section optional

е1с.?)

Совершенно необходимо ста­
вить перед собой четкие цели.
Первые сайты напоминали

статичные онлайн-проспекты, но современный сайт отличают

постоянно обновляющийся контент и интерактивные компоненты
для привлечения и/или развлечения посетителей. Нужно знать, что

Карта сайта

-

это

детальный план страниц
сайта и их соединения,

важнейший инструмент

должен рассказывать ваш сайт и что для этого требуется сделать

проектирования,

(иногда подключить дополнительное программное обеспечение,

учитывающий

вставить новые элементы кода, а иногда найти отдельное серверное

нелинейную природу

пространство).

веб-сайтов.

Подготовка набросков для веб-дизайна

-

это не так-то просто,

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

Наброски дают представление о том, как будет выглядеть главная
и другие страницы, при этом нужно учитывать, что их содержание

Глава 14. Веб-диэайн

223


:f

СТАНДАРТНЫЕ КОМПОНЕНТЫ ВЕБ-САЙТА
Верхний

колонтитул.

Содержит название
v

·1 9 ·
&
Moreno G p1ne

саита и зачастую
логотип или другую

'~

Scoliosis

"'

графику.

!~~~l!=lllBllll!•l!l:ВI

Навиrация.

_....,.с..
on --т118у
.......
.......
JllO--.
.,..,.,, ...,. ,,_.......,.. ...
~-

TESTIMONIA L...S

~

~~~.,....-

которые

. . . . . . . . . . . . 11С1188111

fll ~ - - . . : • ,,_ .......... r8CНl«y IClalf8d • . -

fll8W' . - -

• lwwkt~Ь.
~'!Otlll""f,.,_c11М.

,_.~ .._~...,"атс.•т"""'88'1811с81

Контент.

......

т

'ZТZ7

.... " ............

JiWOn Ll.8f8I' . . . .

)r, ....,,, т-...

Dr....... ,___, ,....,..... 81111

.,.......,.",.....,

Информационное

"'818с:81

my rfЬ.flun.a,.jftw•l'llord

--....................
~

,,_ _

~...-..:y·~~"811c81C81ar~fl/
~ .... "
. . . """""'8881 •.,........,. ,..._.,_.

-- ......

наполнение обычно

·~- ....... C8"""8d~-·~.Dr .
......
....... ....,. .... ,..
,.....,._..
-""" ..._, ~ ~Dr. NDr-. . _ _ . . , . ....... ..-.:i:k8 llf.:8 . " 81111 ' - airn..,._. J.OOO-. . . . , _ , , , _ Ol81N81118/c
t81JW~~.Н8trМD88*'t'..-cydNi'll

или три колонки. Так

..__.~ . . . . . . acri-~.lallilo8i8CDr'Т82lofl,8nd-­
r~ Dr- -.......,.,.....-CC8JY"818nd-..,.,..~C..C--....-.

называемые «богатые

..-..n- ln 8CIOllD888"d..,..,_.~-М818..,11CDW r~ 111N lcollo8ls

............ lll ... 8"8Cllc8•~,........---~"'-~SOCМtJМdllO.~ol"

......

.....

~

~IOlt'lll~c-a.-·

....

awtl"8d1•fМlllklmponmy
~1-.ttfor• -...,.., Мd
tOloИWJov&tt'81JМCSSC:oflotl1

сайты имеют более

1'81

~

А ~

• "'-

~

того же сайта.

.....

~·"""
ЬМ-.N.,........w""'°

должна быть

nott'""9 '-81:/aatdP8'd!S,

одинаковой на

....-cl88,d'llt'Dpr'lak,,..--..
Мlltned",

......

всех страницах

на ключевые слова»
М8

в другие места

Навигация
8 AX8g8<f7, I~

..._~...,....

....

приводят вас

torrмto~_mydllcror

-•ltlerlra..,_"nocsc.

".~,,,-~Collllge-

занимает одну, две

Ряд ссылок,

..._...., llfW1,....

н.р1D1 for а.......

.

ln T.-noe,

........ 1n T8mtlll.

высокий рейтинг
в поисковиках.

1
Шаблон для фона. Это

Нижний колонтитул. Часто

необязательный элемент дизайна. Фон

содержит адрес организации

может быть и однотонным. Не ставьте

и контактную информацию ,

пестрый шаблон под текст .

а также текстовую версию

навигации сайта .

Веб-сайт воспроизводится

может меняться. Обновление текста и иллюстраций на страницах

с разрешения Могеnо

иногда требует больше или меньше места, чем первоначальный

and Scoliosis.

Spine

контент, что потенциально влияет на визуальный баланс.

Компоненты веб-страницы. На наброске присутствуют
все общие для веб-дизайна компоненты: верхний колонтитул
(заголовок, или хедер), навигация (ссылки, или линки) и контент

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

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

Система навигации. Представляет собой список кнопок или ссы­
лок, которые переводят посетителей в другие части сайта. Нередко
располагается над или под верхним колонтитулом, или и там и там,

если таких рядов несколько. Но чаще всего навигационные кноп-

224

Добавь воздуха!


1· 111!JJ.:",j. 14.r..j 6-" r(,,~.L.

а 7с..,.;.,,.. •"fi?..._,

Лlll:X."T па: \'Dl.'t

W.'ПJDDi.'G

SfECIAL~

"~~

cJ.ПRJNG~

LINIS
cct."'IAC'Тt..~

111е СМ-81W_..iltkpcdaр8сеto11111111 yaur

.,acilll..,.__... ita.-.....~ . .-UЬ..-.

=:.::о-=:"~~с:=.=:--

...........

~
~·-.ь-~
-....л,mw--.,. ..... c---awedlis•id8J
loc8ic8 " • ...._ . . . . . . . . . . . ..

n.c.......w... ..._ь..~....-.

1990,.-. altw:I оr,....а.мс. lhll il
__,,._.t.. Н-, -.itll adaliw _ . . . Ь,. АС-.1

...ь-.се

~roo-11&.danapliaaWlar1-qall~

-~..-...tD--)'081'....Wilia.
-"--f,•.-ЫC'l'8t.

c.11 • .-.,1D.-....ah8ve.irla-Woc.'t-.illo
Wp J'OID _.с,.__. lpC!dКUl8.

ки на сайтах размещают в левом боковике, а в блогах

-

в правом

(такой вариант предпочтителен, если кнопок слишком много).
Контент. Информационное наполнение, конечно же, занимает

Точное соответствие?
Главная и второстепенные
страницы сайта

необязательно должны

центральную часть страницы и часто сверстано в несколько ко­

иметь идентичный дизайн.

лонок.

Однако единообразное

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

-

шрифты, цвета, сетку

-

непременное условие.

Воплощение набросков происходит с помощью графического ре­

стилевое оформление

-

шрифты, цвета, формы
и структура сетки

-

непременное условие.

Сайт воспроизводится

с разрешения

Carousell

Works.

дактора, любого на ваш выбор. Некоторые дизайнеры работают
в программах верстки или фотообработки, затем «нарезают» то,

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

-

либо в НТМL-редакторе, либо

в верстальной «визивиг»-программе.

Какого размера должна быть страница? Главное правило дизайна
веб-страниц гласит: стремись к наименьшему общему знаменателю.
Ваша цель

-

сделать так, чтобы содержимое и дизайн страницы

отображались на любых мониторах, желательно без необходимости
прокрутки. Поскольку у всех пользователей разное оборудование

Гnава

14. Веб-диэайн

225


Очень ПЛОХОЙ гип.

и разный софт, определить усредненный размер окна очень не­

Однажды Ребекка

просто. Первоначально стандартной веб-странице соответствовал

наткнулась на сайт,

размер

выглядевший примерно

с большей диагональю и более высоким разрешением, стандартный

так. Ей понадобилось

20 минут, чтобы понять,
что точечная линия это инструмент навигации

по сайту. Не издевайтесь
над посетителями. Пусть
кнопки выглядят как
кнопки.

640

х

480

пикселей. Когда люди перешли на мониторы

размер увеличился до

800

х

600

пикселей. Чтобы угодить всем,

некоторые дизайнеры ориентируются на стандартную ширину,

составляющую примерно

774

пикселя. Стандартный размер про­

должает увеличиваться, как и не прекращают совершенствоваться

программы, и теперь можно создать страницу размером

768

1024

х

пикселей.

ГИП (графический интерфейс пользователя,

GUI). Вы подготовили

эскизы будущего дизайна сайта и начали мастерить сайт, используя

выбранные цвета, шрифты и информационное наполнение. Вам

нужно узнать, как посетители будут взаимодействовать с сайтом.
Легко ли найти навигационные кнопки? Понятны ли ссылки?
Если посетитель попадет на второстепенную страницу, легко ли

он поймет, где оказался? Просто ли ему будет вернуться обратно?
Это важно.

226

Добавь воздуха!


Вот несколько советов по созданию хорошего ГИП:

1•

Назначение каждой страницы должно быть понятно с перво­
го взгляда. Используйте простые описательные заголовки
и текст. Посетители никогда не должны задаваться вопросом:

«0

2.
3.

чем эта страница~»

Выпадающие меню.

Названия ссылок должны быть ясными и простыми. Не

Они вроде бы экономят

нужно линков вроде «Итог нашего опыта», пусть лучше будет

место, но для многих

«О нас».

представляют сложности

в использовании. Если

Название линка должно быть таким же, как и заголовок со­

можете, откажитесь

ответствующей страницы. Другими словами, вы кликаете на

ОТ НИХ, ВО ВСЯКОМ

«О нас» и попадаете на страницу с заголовком

случае не делайте

«0 нас». Кажет­

ся, что это очевидно, но вы удивитесь, как часто это правило

их многоуровневыми.

нарушается.

4.

Сделайте так,

чтобы кнопки
и ссылки выгля

-

дели, как кнопки

и ссылки. Пусть
текст

или

сама

кнопка меняют
цвет при
дении

наве­

he

курсора,

нужна подсказка,
что кнопка

-

это

кнопка. Посети­
тели ни при ка­

ких обстоятель­
ствах не должны

разбираться
с тем, что у вас

где и как это най­

ти. Посетители

не будут ломать
голову. Они про­

Society

13ii.fi@@.Щite

suntlat _urltempos

moa quae nullorror s 1t etumenl dolenls
eosam vent lacerum dolore volenda sltas et
andam , qulatlo ritaturl dlsque ni Jpsa volorrum
et offlcldust et hlllab llluptatae. Ferl bus
nonsectio. Nl mposslm ll llluptassl as doluptJo
eaqul ld moluptaepta post alla nonsectia
nonsequost, undit, utasitibus quuntu г, consequi
nooюus

que et autaspe ris votuptam venda allt, corlore,
sl mus slmporehen1 s et acllssl ut quate laut
harclmus quasplendem lus ellqul rest des
molo re etur ? Solestl tem. Itatum aut qul qula

erat.
Preservatlon SOclety Parade of Homes
Untur? Lorum slt, nullatl atis pedls aut volupta
ve lls si nctot asperor ioratlum nonsecab lm l nus
ve llcimus, conse slmet harumque se et quiam,
omnlmlnctlo . Aquas est re molo et asl nt рlаЬо .
Nam, temqui duntionsed que nullorepe
doluptatls slm enda sum hllland ellacerunt ut
е а 11 Ius ut venla susam rereped que omnl s ln

Parade of Homes
OctoЬe r

7

Т1ckets ava l Ыe

at the
Preserva tJ on Soclety Office
5 10

рег

person

Quarterty Meetlng
NovmЬer 12, 7:00 p.m .
Presbyterlan Church

6925 Church Street
Glendale FL, 3 3111
Free and open to the

puЫ l c

communlty Garage Sale
November 18

ln the Hlstorlc Distrlct
partlclpate, contact the
Preservat lon Soclety at

То

555· 098· 7654

сто уйдут с сайта.

5.

Навигация должна быть неизменной: одинаковые ссылки
в одинаковом стиле, расположенные на всех страницах в од­

ном и том же месте. Это правило единства.

6.

С осторожностью используйте выпадающие меню. Они
экономят место, но для многих людей могут быть сложными
в использовании, особенно если это меню многоуровневое.

7.

В навигации всегда должна присутствовать ссылка на до­
машнюю страницу. Если в дизайне задействован логотип,

Глава

14.

Веб-дизайн

227


2
з

<!ООСТУРЕ ht111I PUSLIC ·зс
то XJiTrt.. 1 .е Tronsi tlonol
"http://- •.З.org/rR/xht•l 1/DTD/xht•l1-tronsi tionol .dtd">
<html x•lns="http://-.wЗ.org/1999/xhtJAI">
<head>

н·

4

5

s"descript1on" content•"The Corousel 1 IIOrks: on etegont, historic recpet1on hol I ond
faci l 1 t.., for weddings, events, part1es and •eet1ngs in 8i9 Loke (centr'ol) M1nnesoto. Cal 1
763-263-7779.. />
<eeto no

ЬOnqvet

6
7

(1Deta http-equiv:c"Content-Type• content•"textlht•I; &oarset•ISO-SSS9-1" />

з

9
10
11

<t1tle >Тhe

< eta

CO!"OVSetl Uorks :: H1stor'ic Reception Holl for 1Jedd1ngs, Мeetings, Events </t1tte>

content= Corousell IIOrks, Carousel, wedding, нddings, r'eception holt,
holl, reception, holl, holls, Ьanquet, event, fcicility, 8i9 Lake, Mi~soto, МN,
Мont1celto, Elk R1ve", pr'•vate party, por'ty r008, r00ta rentat• />
<t 1nk href="corouset t .css• r'el="st..,Lesheet• type=•text/css" />
noм="key.юrds"

Ьanquet

12
13
14
1S
16

~scr1pt type• "text/.JovaScr'ipt• >

2е

f...--ction t1tЦ)r'eloodl11I09U {) {
vor dadoculllent ; if(d.leages ){ if(! d.t111...p ) d.1111...p•,_
r'oy ();
vor i, j=d.11114). length,a= t111~eloadlea9es.0f"9'.lllltnts; for( 1=0 ; i <o. length; i++)
if ( o ( i ) . 1nd . Of ("•" )!•0 ){ d.ММ...р ( j ]•,_
; d.MM4) (j ++ ) .Sr'C• o ( i J; }}
}

21
22
23
24

f...--ction МtLswopltagRestore () {
vor i,x,a=doc:uaent .1111..sr; for( i a:0 ; o&& i <o.tength&&(x,..o ( i J)&&x.oSN:; i++) x .src=x .oSN:;
}

17

18
19

2S
26

27
28
29
зе

31
32

f...--ction 1111-findOЬJ(n, d ) {
.
vor p,i,x; if(! d ) d=doc:UIDent ; if((p=n. 1nd Of("?"))>e&&PQl"ent.fl'Ollles.length ) {
d=por'ent.fr'Clllles (n. иЬ tr't1'19 {p+1 )) . doc:\aent ; n• n.
tr'1r {0 ,р ); }
if(!(x• d (n ))&&d. oll ) x• d. oll (n J; for ( i • 0 ; !x&& i <d.foras.length;i ++) X" d.fortaS ( i )(n J;
for( it0; !x&&d. loyer'S&& i <d. ta..,ers. length; i ++) x• МtL( indOЬj{n,d. loo,jers ( i ) .doc:uaent
if(! x && d.getEle.entSyld ) x• d.getEI
ntSyld ( n ); reЬrn х;
}

>;

~

Не позволяйте

сделайте его рабочей ссылкой. Чаще всего логотип размещают

коду эапуrать вас.

в левом верхнем углу страницы.

Непосвященным код
веб-страницы кажется

8.

ницы в окне браузера стандартного размера. Без прокрутки.

чем-то ужасным. Но

чтобы уметь вставлять
названия страниц,

9.
1О.

это необходимо для
оптимизации поисковых

систем, до какой-то
степени понимать код
все-таки надо.

Используйте цвет для организации и упорядочения сложных
сайтов.

описания и ключевые
слова, поскольку

Кнопки навигации должны быть видимы при загрузке стра­

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

11.

Простая строка поиска- лучшее решение даже для сложных
сайтов .

Оптимизация поисковых систем

(SEO). SEO -

это

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

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

позиция сайта в результатах поиска зависит от объема и качества
его информационной составляющей. Здесь под качеством пони­
мается достаточное количество ключевых слов .

228

Добавь воздуха!


Чтобы оптимизировать сайт, составьте перечень
ключевых слов, которые с наибольшей вероятностью

А

будут задаваться при поиске, и вставьте эти слова

Blog about Art •

в содержание страницы. Чем больше ключевых слов
в тексте страницы, чем выше в списке результатов

поиска она будет расположена.
Например, если вы предлагаете услуги по уходу за

PAGES

газоном, вставляйте в текст слова «газон)), «уход

Wha·

AЬout

за газоном)), «трава)), «косить)), «косить траву)). Не

Dique1
quodit 1
fueitinc
dolendi

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

TextiieArt

снованно повторяющимися ключевыми словами,

клиническим идиотом. Найдите баланс между

odist as

Ноте

он будет выглядеть ненастоящим или написанным

Sedigni
sitet ра

SEO

и хорошим копирайтингом.

duntorE

dlМ8nt:art.com

ducipsa
omniat:

Также необходимо вплести ключевые слова в на­

freilCfll8iera(.CDm

звания страниц, заголовки и гиперссылки. Если вы

19thcentury.bloppot.com

неплохо соображаете, то вставите эти слова также

SCIOttkeUJy.bloppot.CDm

в код сайта. Да, код пугает! Но умение добавлять

offida ·
Aiigni с
doiupta
nemqu<

ключевые слова в соответствующие разделы НТМL­

reperd
doloritc

кода стоит потраченного времени. Если вы очень

Ciunt u

хорошо соображаете, то приобретете доменное имя,

moiorit

содержащее ключевые слова.

По правде говоря,

SEO -

более сложный процесс, чем мы описали,

так что если вам необходимо занять верхние строчки поисковиков,
привлеките к работе специалиста.

Делайте ссылки

активными. Ссылки
должны меняться при
клике или при наведении

Доступность. Несмотря на замечательные мультимедийные

курсора. Изменение

возможности Сети, главным средством передачи информации

только цвета

по-прежнему остается текст, а интерфейс по большей части ви­

не лучшее решение.

зуальный и подразумевает использование клавиатуры и мыши.

Стандарты доступности веб-контента

(WCAG),

опубликованные

Инициативной группой в области обеспечения интернет-доступно­

сти

-

Людям, страдающим
цветовой слепотой,
проще различать

подчеркнутые ссылки.

(Web AccessiЬility Initiative), предлагают руководящие принципы

для создания сайтов, доступных людям с нарушениями зрения,

слуха и прочими физическими ограничениями.
Вот несколько советов, как сделать сайт доступным:

1• Не

переводите значимый текст в графику. Скринриде­

ры не умеют распознавать слова, сконвертированные

в графику. (Между прочим, этого не умеют и поисковые

системы, что снижает эффективность вашего

2.

SEO.)

Убедитесь, что размер шрифта можно поменять. Обычно
браузеры предоставляют пользователям возможность

увеличить размер шрифта для лучшей удобочитаемости.
Глава

14.

Веб-диэайн

229


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

ДОСТУПНЫЙ
ВЕБ-ДИЗАЙН

3.

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

Поставьте себе цель
сделать сайт доступным

страниц есть поле, где можно разместить альтернативный

для максимального количества

текст (мини-подпись, которую «видят» скринридеры и по­

людей . Вот некоторые советы

исковики) для любой графики макета. Можете вставить

касательно доступности:

1.

альтернативный текст вручную в НТМL-коде страницы,
а если альтернативный текст содержит ключевые слова,

Не переводите текст

это повышает эффективность

в графику.

2. Убедитесь,

4.

что можно

них курсора. Однако если меняется только цвет, страда­
ющие цветовой слепотой люди не смогут этого заметить.

Приводите текстовые

Зато подчеркнутый текст видят все. (Честно говоря, ак­

эквиваленты для всех

тивные ссылки

графических изображений .

4.

Подчеркивайте
гиперссылки .

5.

6.

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

изменять размер шрифта.

3.

SEO.

-

это единственный допустимый способ

применить подчеркивание.)

5.

Делайте кликабельные области большими. Тем, кто
не очень уверенно обращается с мышкой, может быть

Делайте кликабельные

трудно щелкнуть по маленькой кнопке или по фрагменту

области большими .

интерактивного изображения. Не экономьте на размерах

Предоставляйте
отключаемые субтитры
для видео .

кликабельной области.

6.

Дополняйте видео субтитрами. Или другой вариант давайте версию ролика с сурдопереводом. Аналогичным

образом предоставляйте текстовую версию для аудио

или аудиоверсию сайта (зачитываемую диктором) для
слабовидящих.

И ЕЩЕ КОЕ-ЧТО О ВЕРСТКЕ

САЙТОВ
Фиксированная или резиновая верстка. Многие
веб-дизайнеры, которые начинали в полиграфической среде, пред­
почитают фиксированную ширину страницы. Как это следует из
названия, ширина дизайна остается одинаковой вне зависимости от

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

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

заться слишком маленькими при просмотре на большом экране.
Многие дизайнеры предпочитают резиновый макет, который рас­

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

230

Добавь воздуха!


Design Sf!rvices

Welcome to Sunflower Landscaping Design, Inc.

Grounda Maintenance

Urem qul bl aortie tat auguero stlnit lore m i nci n esectem vel ent l a feuga lt nosto et alismod olortio
nsecte di gna feu reu raccum allt, qui pit w ismolobor autat. Oi pl t nlt lum zzril utpat, quamet, sendrem
luscili s eraesto commy ni bh exero cortisl.

ArЬorlst

S8'Vices

l.мdlй!\)e

Lighting

lrr1gatlon Design

Oolor pe ro ех eli t dol or em ve l l ri usto consequ i ti n heni m dio conu lpu tpati o elendip svstrud euga it lutem
zzrit, sum qul s ad m l n hendlt atet, qui s adio dunt ulputet w ls augtatuer i usto od esequamet num
doloreet lorem ilit ad tat. Ibh et wismodit am , ve lent duismod io ех ех et utpatie vulputpati n ut erlureet
vull amc onsecte tisl i llam eui s de l dunt w is ni bh eugiam volore mod1p exero conum de l el exer autpat
pгaest i n eu faci Ыаоrе doluptat la faccummy nosto dlplt l am am, commy num qul Ыand i p eu facip et
vel il del ls eui psustisl do lore veli sisi Ыand r e volobor peratet w i s adiatem z.z rit la acili quam dolorer
seni s ad eum l riustJe dui p еа faci duisl euga it al it l pit la commod eugi amet ni m ni s nl m Jpsusto en ls am
vel el dolore magnlscl p exerius ci dulsl ut er1urem veleni bh eulsl.
То ех

Cl1ck here for 1 9allery or
our newe5t idea5 in
residential l•nd~pift9 .

exer l ng et am, quamet, vul la facincl nci dunt acillao rerl ll s modlam vel lllquat. Ut veraessi.

Feum iusto eummy nos at alls nulla feu feu facl te exerostie euga lt lustl n eum nis dunt la faci lluptat
iuscl pl ssecte vel ulla faci plt, vercillt lnlbh eugiam, quls eros nlam veliquat. Pit nostrud tle fadnibh eum
еа faccummy nos nl m l nit el lplscidunt autpat lupt.atuer sit lamcore ех el in vel erosting et, veniamcore
magniam , quam, commodl

Dct+gn Stryk:Jt 1 Groчndt

Mtints;мщ

We are e11i>erts ln tropkal
landsc•pe pl•nts. Click here
to view 01.1r ljiltllery.

1 ArЬodst Servi«s 1 '-lnsk<;ooc Ughbng l laiQotJgn Pc$jgn 1 ~

l\WIUl1IS&n!Ш..11111.1.!11<11 ~
De~n, Inc. 1 222 Н.in Street 1 AnytDwn А. ЭЭЭЭЭ
1nrp05чn"9srJondкtpjnя cC)Q! 1 813·"9·9816

Sunl\ower UndI08pil\t

Фиксированная или

резиновая. Одним
дизайнерам нравится
эластичный тип сайтов,

перестаивающийся под

окно браузера. Другие
Dl!Sign Sf!rvfces

Grouncls Maintenance
ArЬartlt

Serllices

Lмd8Cllpe

L1ghtlng

Imgatlon Dl!Sign
Photo Gal

Welcome to Sunflower Landscaping
Design, Inc.

отдают предпочтение

фиксированному

Uгem qui Ыаогtiе tat auguero stlnit lore mincin
esectem velent la feugalt nosto et al ismod olortio
nsecte d l gnв feu feu faccum al lt, quiplt wlsmolobor
autat. Oipit nlt lum zzrll utpat, quamet, sendrem
luscilis eraesto commy nibh exero cortisl.

Oolorpero ех elit dolorem vel i rlusto consequi tin
henl m dio conulpu tpatlo elendlp sustrud eugait
lutem zzrit, sum quis ad mln hendit atet, quis adio
dunt ulputet wls auglatuer lusto od esequamet num
doloreet lorem llit ad tat. l bh et wismodlt am ,
velent dulsmodlo ех ех et utpatie vulputpatin ut
eriuгeet vullamc onsecte tisl illam eu is del dunt wis
nlbh eugiam volore modlp ехего conum del el exer
autpat praestin eu faci Ыаоrе doluptat la faccummy
nosto dipit lam am, commy num qui Ыandi p eu
racip et vel il del l s eulpsustisl dolore vel lsl si Ыаndге
volobor peratet wis adlatem zzri t la acillquam
dolorer senis a d eum iriustie duip еа facldui sl euga it
alit lplt la commod eugiamet nim nl s nl m ipsusto
enls am vel el dolore magnlsclp exerius cl dulsl ut
eriurem velenlbh eulsi.

-

компоненты страницы

остаются там, где были
размещены изначально.

Вверху: Резиновая верстка
страницы, растянувшаяся на

большом экране.
We 1re e•pet1S in trop1cal
lan.dsиpe ptanь . Ctick here
\О view our 01llery .

Слева: Та же резиновая
верстка страницы на экране

маленького размера.

exer lng et am, quamet, vulla faclncl ncldunt
acillao rerilis modlam vel Ш qu at . Ut veraessi .

То ех

Feum lusto eummy nos at alls nulla feu feu faci te
exerostie eugalt lustln eum nls dunt la faclll uptat
luscipl ssecte vel ulla faclpit, vercilit inlbh eugiam,
quis eros niom vellquat. Plt nostrud tie facln ibh eu m
еа faccummy nos nlm lnlt el l plscldunt autpat
luptatuer sit lamcore ех el ln vel erosting et,
veniamcore magniam, quam, commodi

Onteo :;,ats;ca 1 GmunФ """*"'!К' 1 Arlwjtt Strv!c:ea 1 !мdкмt ЦgЬt;oq l lrriqltjpn Dlljqn 12ЬrdDJillla
&111111..11а

1 ~ 111111111 l!llliml!lиDa

Sunltower LAndtc.aplng DesJon, Inc:. 1 222 "'84n Street 1 AnytDwn FL 33333
tnlp8tunflpwtf11NlwpjQg cpm 1 813· 999·98'6

Глава

14. Веб-дизайн

231


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

размеров. Замощение шаблоном, однотонный цвет и текст сам по
Преимущество блога.

себе

Одно из преимуществ

плохо

все это растягиваются легко. А вот графика растягивается

блага перед веб-сайтом

и искажается.

-

что по горизонтали, что по вертикали,

-

расплывается

заключается в том, что

У резиновых макетов есть и другие недостатки. Неконтролируемая

чрезвычайно текстовый

контент блага делает

ширина колонок может привести к появлению чересчур длинных

его более релевантным

и сложных для чтения строчек, при этом сама колонка укорачива­

ДЛЯ ПОИСКОВИКОВ.

ется, и на странице образуются бессмысленные пустоты.
Компромиссное решение

-

резиновый дизайн с верх­
ним

пределом

ширины.

В данной ситуации стра­
ница растягивается, пока не
достигает заданного преде­

ла. Вы можете установить

What to do when it's raining outside?

предел в точке, где шрифт

Oi que dotore-p roremos sandae m11ni aspedit, ad
quodit quid rnotupt.t tNpicи •tur, si rwm
futitincture eossimporem qui as allquas ad е:х et н

еще не утратил удобочита­

dotendi t1temporit lantium et i lluptltlЬet cor re,

емости, а элементы дизай­

odist auim lliЬus n\m imusdle none pnie pnit.

Sedlg:ni enimet aut et eYttitl odianl dul archki qu1m,
sitet p1rd1 pro quundae. н~ ОО1'1 exce-ro
cklntotentf dtm expt i Ьus adi1t"nd aкtotam hit odis
~pмndam, omnts mlltuptur aut wn.m as maio
omnlatiis dt doton ut odisda qu1it.tm И'qU&tem QUO
оШdа

на не уползли в негативное

пространство.

SIJ)ldent.

Atlanl dotupus e-st ve-ntit>N dotuptatecto toS sint
dotupt.ate cor ~tio c:omnis nis molorl con
nemquossum vol.est, мttm quidl fnt motorporem

ЧТО, ЕСЛИ

,.,,.ro - - · dolupt!
nlsti Ыandlenas
ta vol.endit,
votorem ut fut•·

dotoriUitМI taЬortit

Cloot ut ommotut ml nV'tt iЬus is et, 1d unt vol.upid

НЕ САЙТ

motor1Ьus

ratur atlЬus, cor~id ls am aut dotuptA
tcturio ritluи~ et QUis нl'ddмl lpwipld eиquod
l tatмю

Hecte<N.

~

vol.ut

~erl~

1rtits lderoNPtum elфefiЬus.

'"''

Для многих предприятий

Vfctorian in Florida?

и организаций хороший
Asit YenCklnto Ыaut ut 11 lpittsl nos quaepudit, quis
ei1A, ех ero YOtorrum lnti1ndiae ~ aut et atls
mol.uptia dotort"S slmus, quam, aut llt quae volupU.
ectemporurn am si indume rem l•Ьо. S.picHatus de-5

t

•n~f$ ~•n dfpktls mo t~up i..tur, Qpl.it

dolomt wnimus et uta quewndem f1.11 it11 exercim
hlirdat tcullesti.am а.1На dudendi animporit utam
'l'OtupЦitur audisqu1eя re \'Otupta sрШо Ьн
dotorepr••· Odit •Nl"n •Ut taЬortp tatium, lum

t

' repudaep№$ quae cuptu dol.uptat llsto нr1tм et 11
lpsanlh IНatur modit wHЬus aut repUt pl.a qul
•$petli$1.il dotuptf tendion c:omnit, s.ats dotupta

ectate pornttum YOtorepeШ• peditl• nl t\ltat~
quatio lnutpa nonиquunt н consedi oШcita ncmum
et prat ant facert Ьuquam мqul de мstlamus ut
e1turf$ dol.uptas et fualtlЬusa lnt Yenfetu ~iatt
rnpet<Щ>tiur mod QU1 \jmm, nonsenda nonsenda
dotorit nt harcide nlmu$, eidistium lpidtЬi$ $f • ut:
рrм.т aCCISdl. nihiU.$ нqufatfi utae. Нем
eomequ&n'IUS, sus enitt que nost f.dtium awrovidus.
sam , ln tt enlmotort nem cutpa Яm QUlt quodi

...

веб-сайт

-

основа всего.

Но если вы собираетесь
опубликовать свои произ­
ведения, построить соб­
ственную социальную сеть

или укрепить свои пози­
ции в уже существующих,
наилучшим решением для

вас является блог, а может,

будет достаточно нового
аккаунта.

Блоrи (сокращение от

web log) - это платформа для самопуб­

ликации. Многие блоги представляют собой индивидуальные
форумы для размышлений и разглагольствований, но деловые люди

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

232

Добавь воздуха!


гда даже более) влиятельные, чем
журналисты. И это положение

Carouse.11 Works Hlstoric Evll!nt Ce:nte:r

вещей имеет плюсы и минусы

для сотрудников отдела обще­

ственной информации

дущих блоги своих организаций

~

.:,

CAROUSEI.L
>:1 \\'ORKS ilf

предоставляют другие блогеры,

~

--,

··w.A_.~
1
- ~,·;
~"

"

'

, W\::._ I~ '

......... ....

\. -

...

.

_ _ _ 1tА,
1•'"-ll~~yo.o
4ом

•-1•i.. .... \n'f1Ch"
,.,.._ ....

~ -·-

wtUu~••tJI.,.•

ТЬ.

Carou е11 W<>rb: AD Rlstorlt Vtout for
Wtddlnas, м"rtnas & Speclal Evtats

контактирующие со СМИ. Та­

n.c c..roi.Н:11 Wotl<' "~ мrfe<t Рк• 10 l'w»t row 11>«>~ ~-ое 11 • \OlltdcltflO
ttltЬr.a"°"'

lжponC. l t ..... Ac....iЬtric·•

бизнеса в Сети.

~-j

'

и проверяющих данные, которые

кова новая реальность ведения

--~1 ~~

_. - •
11

-----·

(PIO), ве­

_,.,.

Ь.q-., Ьuw-.u1 ~•1

or

Ьw1"d8Y$>Мfl/' An _.,lcor~

li\•

"° Оt!Ч•, thc ~-М" 'Worla 1'а y.nt lfot "''- 1~ 10 .кc:omodatt • Worft111at1
lмJ• ..... ~с:и.,

"~~fOf"-C:...-1
\'i.U..\C.-&eмor'C'tSfl'lt

~nyoran!l"~ttмr.w •1.VYdi-rA11nv1ttfкщ.&.c~

~~--U<'e

lclc~lo<llion f0t • ЬU. "''' ftttt•or olf-t•te "'"~"8

""1!1•

=~~~6:~--

ТМ СатоuиН Wot111 JUlfNt M•<t npuily ~-·щ !o<l(t 1990,
levflofovsorчl-tNc1t11m~1Н<:1.кow.... dot•(ki1Ntw:m119Ь.,A
C.utШ [w.r>t. 'IO~ --.•1!irмl1 r«epo.Ofl hd « Ntloq,vd !._.rу _Ье..Ы.,.,
~IOtlotl'tO\ll'-ckf;qg.~.Ot$QК-.I-.

catt 1U toery оо Wot<l&llt •

Разница между благом и сайтом
состоит в том, что содержание

блага распространяется по под­
писке. Можно подписаться на

RSS-ленту блага, и когда появ­

t!М(Ш~

н ..." 1~
~ТОУе!•-·~-u..

Am•dne Wt clOll>p

sм,.. ,._._~

~~Our\11'1'..UfКllif\'lf,
ptWl"~r.u.111t..-:-·fl!ff«::JYt
v.;10l7fl<lrtlootcihoto;. fflVC

0#.Wmиd-t:C-иl
'Wor\ls?~'fO'#ltphotOJ

ние автоматически доставляется

w. см'1 '"'"' '°~ you rutte'tO'll'_,,t

o.d~hOIO'fOVI~

_,.,,~

lndVфtritn(f,'l"tblllOll
rac1-Ьoo1t1

__

_ .,.
c.atao1.i.ellWO<ii:'

!&O,_....St"1t'lor1h
819L.tkf.№<.SSЭ09

...n.e1 r ... rtt1./llOl.0111y<Jt11t
l'IOiЬ ... •"'*Pt'.-..1

ew-ri
~

ляется новый пост, его содержа-

rrм_......,.

Wllltl,Clll""~.~19-

oи:ueuol•

....

76)-263-7119 •

... nue. Jn111)1t1'1ea:phut0t

(

wet..V-'tour~

~-

-.с-~

lor..._11'11'~"

...

прямиком на компьютер подпис­

чика. Через

RSS распространяют

новости, анонсы и статьи блоге­

ры, работающие на организации.
С друтой стороны, автор, желающий свести с кем-либо счеты, может

Социальные сети.

быстро повлиять на мнение огромного количества подписчиков,

Социальные сети
созданы для общения

используя эту же систему.

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

людей со схожими

интересами и судьбами.

многочисленных блогосервисов или скачиваете определенную

Просторы для дизайна

программу и устанавливаете ее на собственном сервере.

на большинстве таких

Правила дизайна блага те же, что и для веб-страницы. Поскольку

блоги ведут люди, мало разбирающиеся в

HTML,

существуют

сайтов минимальны,
хотя во многих системах

можно поменять

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

цветовую палитру,

бесплатны. А если это не совсем то, что вы ищете, шаблон легко под­

вставить индивидуальные

править. При помощи каскадной таблицы стилей

(CSS) можно по­

графические элементы,

менять цветовую палитру. Имея фоторедактор и FТР-доступ к сер­

например баннеры

веру, легко создавать и загружать всю необходимую вам графику.

и видеоролики

Социальные сети. Друтая альтернатива сайту- присутствие
в социальной сети. Социальные сети позволяют людям общаться
друг с друтом в рамках одной системы. Создав аккаунт и заполнив
страницу по своему усмотрению, вы вольны пригласить друзей

и коллег посмотреть вашу страницу и стать членом сообщества.

и добавить виджеты.
Кастомизированная
страница в Фейсбуке
воспроизводится

с разрешения

Facebook.

Большинство социальных сетей предоставляют возможность
корректировать вид страницы, например с помощью различных

тем оформления. Многие обеспечивают доступ к

CSS,

которые

позволяют менять шрифты, их цвет, фоновые изображения и бан Глава

14.

Веб-диэайн

233


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

МУЛЬТИМЕДИЙНЫЕ САЙТЫ
Посколь­

ку

Flashcaйты графические
в своей основе,
они нечув­
ствительны

к некоррект­

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

Для по-настоящему интегрированного интерактивного веб- дизайна
простого визивиг-редактора страниц недостаточно, тут нужна

мультимедийная платформа, такая как

Adobe

Flashф.

С помощью

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

композицию, не задумываясь о коде, а

Flash

встраивает шрифты

непосредственно в страницу, поэтому отпадает необходимость
переводить декоративные шрифты в графику.
Все браузеры интерпретируют коды веб-страниц по-своему,

ному про­

чтению кода

браузером
и отобража­
ются верно.

и НТМL-страницы могут отображаться не так, как это было заду­
мано. Случается, что объекты и текст неожиданно для вас меняют
свое местоположение, а поскольку Flash-caйты

-

графические

в своей основе, они нечувствительны к некорректному прочтению

кода браузером и отображаются верно.
Самые сильные стороны

Flash -

мультимедийная интеграция

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

в правый нижний? В НТМL-среде такая анимация либо зациклена,
либо проигрывается однажды. В среде

Flash дизайнер

может при­

вязать движение круга к перемещению курсора. Используя язык
сценариев

ActionScript,

нетрудно запрограммировать круг так,

чтобы он следовал за курсором по всему экрану или подпрыгивал
при щелчке по нему мышью.

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

медленно ползут через всю страницу. С помощью

Flash дизайнеры

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

234

Добавь воздуха!

-

открывать


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

Flash имеют на удивление малень­
Поэтому страницы загружаются быстро - качество,

которое весьма ценят пользователи.

Если

настолько хорош, почему не все им пользуются? К со­

Flash

жалению, есть у него несколько недостатков.

1. Flash

не для слабонервных. Если вы хотите в полной

мере насладиться интерактивностью программы, вам придется

изучить

ActionScript.

Или же нанять профессионального веб­

дизайнера или разработчика.

2.

Нужен плаrин. Чтобы просматривать Flash-caйты нужно
установить специальный плагин. К счастью, примерно у

97%

пользователей плагин для просмотра Flash-caйтoв встроен

в браузер.

3.

Проблемы с

SEO. По природе своей Flash-caйты неудобны

для поисковиков, заточенных под НТМL-сайты и распознающих
текст. В процессе индексирования поисковые машины могут

полностью проигнорировать созданные на

Flash

странички.

Такие сайты не невидимы, просто нужно предпринять некие

усилия и включить в них дополнительную информацию, спец и ально для поисковиков.

ДЕРЖИТЕ РУКУ НА ПУЛЬСЕ
Сегодня в мире правит цифровая коммуникация, и цифровые тех­
нологии меняются и совершенствуются каждый день. Всегда быть
в курсе происходящего

-

очень трудоемкая задача.

Не позволяйте технологиям напугать вас. Помните, главная тен­

денция

-

анимация, видео и сайты в формате «сделай сам». Чтобы

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

профессионала.

• • •ПОПРОБУЙТЕ ЭТО
1• Посетите свой любимый сайт. Нарисуйте карту сайта, со всеми
страницами и ссылками.

2.

Найдите какой-нибудь каталог, проспект, постер, рекламу или
флаер, на котором указан адрес в Интернете. Посетите указан-

Глава

14. Веб-дизайн

235


ный сайт. Сравните печатный вариант и его электронный аналог.
Какие различия вы видите в дизайне? Какие есть сходства? По­
чему?

3.

Найдите функцию оптимизации в своем фоторедакторе. По­
пробуйте применить ее к различным типам изображений. Со­

храните изображения, меняя настройки. Сравните результаты
и окончательные размеры файлов с исходниками.

4.

Найдите сайт, дизайн которого кажется вам по-настоящему
кошмарным. Используя программу верстки, переделайте дизайн
главной страницы, применив хорошие техники дизайна и ГИП.

5.

Найдите 2-3 очень сложных сайта. Походите по сайтам и посмо­
трите, как функционирует навигация. Что работает? Что нет?
У вас возникает ощущение, будто вы потерялись, или всегда
понятно, где находишься? Почему?

6.

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

7.

Посетите 1-2 коммерческих сайта, предназначенных для ши­
рокой аудитории. Испытайте их функциональность и доступ­
ность. Что сделал дизайнер сайта для его доступности? Что бы
вы порекомендовали сделать, чтобы усилить ее?

236

Добавь воздуха!


в печать!
обзор типов бумаги и печати


х

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

ных: это их портативные и тактильные свойства. Мобильные

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

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

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

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

Бумага способствует
коммуникации.Бумагу
можно подержать в руках;
в случае электронного

ВЫБОР БУМАГИ
Печать и распространение продукции завершают процесс про­

документа тактильные

ектирования, но решения, касающиеся производства и бумаги,

ощущения недостижимы.

принимают уже в самом начале.

238

Добавь воздуха!


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

задачу он выполняет и от размера вашего бюджета.

Внешний вид бумаrи и ощущения от прикосно­
вения к ней. Разнообразие цветов, веса и текстур определяет
привлекательность бумаги. Напечатанный на гладкой глянцевой

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

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

печатанная шаблонами, декорированная различными фактурными
изображениями или с вкраплениями цветочных лепестков.

Чтобы упростить выбор бумаги, производители выпускают ката­
логи образцов своей продукции, которые можно получить у них

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

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

Чтобы упро­
стить выбор
бумаги, про­
изводители
выпускают

каталоги об­
разцов своей

продукции,
которые
можно полу­

назначение, с разной отделкой и ценой.

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

аппарата, у них недостаточно веса и крепости для такой цели.

Вес

-

это одно из многих свойств, которое вы должны принимать

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

чить у них

(или у их
дистрибью­
торов) бес­
платно.

тонкие линии (например, штрихи некоторых шрифтов) могут
слегка растечься и выглядеть толще, чем нужно. В зависимости от

впитывающей способности бумаги фотографии и иллюстрации,

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

получаются на самой белой бумаге.

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

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

Глава

15. Бумага и печать

239


ТИПЫ БУМАГИ, ПОВЕРХНОСТИ И ИХ ПРИМЕНЕНИЕ
Бумага
Мелованная

Поверхность

Применение

Цена

$-$$$$

Глянцевая ,

Журналы , проспекты,

матовая , матовая

ЛИСТОВКИ , плакаты ,

фотобумага,

годовые отчеты , папки-

атласная

карманы , почтовые
открытки

Немелованная:
•печатная;

•писчая;

•

обложечная .

Гладкая,

Проспекты, бланки,

ультрагладкая,

визитки, приглашения,

веленевая,

годовые отчеты, папки-

$$-$$$$

рифленая, под

карманы. Подходит для

полотно, войлочная

дорогостоящих проектов,
когда тактильное
ощущение дополняет

дизайн

С дополнитель-

Приглашения , проспекты ,

ной обработкой

упаковка , папки-карманы ,

поверхности

обложки . Некоторые

$$-$$$$

виды для особых сфер
применения : бумага
с защитой от копирования,
самокопирующая и т . д .

Бумага различается по многим характеристикам, таким как непро­

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

-

процессы энерго- и водо­

затратные, задействующие едкие химические вещества, например

белила и нефтеотходы. При этом печатная продукция чаще всего
быстро оказывается на свалках.

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

-

это предпочесть пере­

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

из-за ее отличных свойств.

240

Добавь воздуха!


СВОЙСТВА БУМАГИ
Свойство бумаги

Что это такое

Непрозрачность

Степень прозрачности

Если требуется печать с двух

бумажного листа

сторон (журнал , газета) , вам

Почему это важно

нужна непрозрачная бумага

Шероховатость

Естественный микрорельеф

Шероховатая бумага лучше

поверхности, образовавшийся

сгибается и рвется, поэтому

при переплетении волокон

подходит в случае фальцовки
и перфорирования

Белизна

Способность материала

Чем белее бумага, тем она

отражать свет ; зависит

дороже и тем лучше на ней

от количества красителей

проявляются краски. Для

в своем составе

печати портретов выбирайте

теплые оттенки белой бумаги ,
для пейзажей

-

холодные
1

Плотность

Отношение массы бумаги

Если вы не учтете

к ее поверхности. Плотность

данное свойство бумаги,

определяет прочность,

ваш проспект может

пухлость и зачастую

соскользнуть со стеллажа,

непрозрачность бумаги

а рекламная листовка утратит

первоначальный вид уже
в процессе пересылки

или, что еще хуже, будет
отвергнута заказчиком

и потребует переделки
Облачность

Общее распределение
волокон по бумажному листу

Хорошая бумага имеет
равномерное распределение
волокон, плохая

-

неравномерное . Облачная
бумага впитывает краску
за счет рыхлой структуры ,
поэтому печать получается

недостаточно четкой

Гладкость

Тактильное ощущение

Степень гладкости бумаги

от бумаги

определяет характер
документа и влияет на то,

как краски ложатся на бумагу

Глава

15. Бумага и печать

241


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

БЕРЕГИТЕ

Но теперь такая бумага

ПРИРОДУ

не единственная возможность:

-

на рынке присутствует, например, бумага из прочных

волокон, таких как бамбук или конопля, есть в продаже

Ищете безвредную для

и краски на основе сои.

экологии бумагу? Изучите
каталоги и порасспросите

Параллельно изготовители бумаги пытаются, хоть это не­

типографии об имеющихся

легко, внести изменения и в производственные процессы.

у них возможностях .

Одни перестали вырубать леса, другие перешли на бес­

Информацию об экологически

хлорные отбеливатели и прочие менее вредные химические

чистой бумаге и ее

вещества. Многие пытаются снизить расход потребления

производстве можно найти

энергии и воды.

также на следующих сайтах:

Независимая лесная
сертификация

http://www.fsc.org/

По-прежнему ли производство бумаги загрязняет окружа­
ющую среду? Да. Но у вас есть выбор. Займитесь самооб­
разованием. Ищите способы печати и бумагу, обладающие
природоохранными сертификатами

лесная сертификация),

SFI

FSC

(Независимая

(Устойчивая лесная инициати­

Устойчивая лесная

ва),

инициатива

с местными типографиями. Не бойтесь задавать вопросы.

http://www.sfi program.org/

Green Seal
http://www.greenseal.org/

Green Seal

и др. Изучайте возможности, пообщайтесь

Не выйти за рамки бюджета. Как правило, полиграфия

-

это главная статья расходов в печатном проекте. Так что

затраты

-

важнейший критерий при выборе бумаги и ти -

пографских услуг. Доступные средства определяют выбор
бумаги эконом- или премиум-класса. Бюджет также дик­

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

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

СПОСОБЫ ПЕЧАТИ
И ОБОРУДОВАНИЕ
Качество печатной продукции

-

не единственный критерий при

выборе способа печати. Необходимо принять во внимание раз­
мер бюджета, не говоря уже о сроках рабочего цикла. Как любит
говорить Ребекка (и не только она): <<Скорость, качество, цена.
Выберите любые два пункта».

Распечатка собственными силами. Если сделать нужно
быстро, бюджет мизерный или его нет вовсе, а объемы незначитель-

242

Добавь воздуха!


ные, сойдет и распечатка на офис­
ном или домашнем оборудовании.
Используйте установленный на

компьютере софт, и проблемы со

шрифтами вряд ли возникнут.
Но есть и серьезные минусы.
В этом случае возможности огра­

ничены форматом бумаги, на ко­
торый рассчитан ваш принтер

(АЗ, А4 .. . ). Если у вас нет прин­
тера с функцией печати с выхо­
дом за обрез (скорее всего, нет),
вариантов оформления продукции
остается еще меньше. Как правило,
принтеры предусматривают не­

печатаемые поля примерно

сверху и по бокам и

13

5

мм

мм снизу.

Все, что окажется вне зоны безо­
пасности и слишком близко к краю
листа, не напечатается. Вы также

не сможете использовать любую
бумагу по собственному желанию:
в зависимости от модели придется

взять листы либо для струйного,
либо для лазерного принтера.

The Carousell Works is pl.....I '° inпod=
Event, thc ne\\ a.dus.i\'t ашn to

А Catered

thcir hisroric C\-'tnt cmrrr.

Ktvin and \'rnr~ &те:. owncn of А Catem:I
havt то~ than ~d\~ )nt"S a.pcric~
aшring and hOJpiШity. lЪcir crta{i\-e mcnus,
Ьeiuriful pRXncition and attt:n1ion 10 dttail а~
E~t.

in

~minuant

of Uк Ьаt cш·ring compaлies of thc-

Twjn Ciries..
А

Carousetl Works

160 Ыс ~ Nonh • 8if Lakc. MN SSJ&J
(76J);!:6.}-77i9 . Fu (763)263-7789
-.._. arowdhtorks.nn • arou.d@lhntxd.nn
Dц,rc,JacoЬka.

CaterIO E~nt sen;a:s aJI

typtS

l'foprinof

of g;arherings from

large corpor.i1e C'\'C-Пls 10 in1im:HC' dinner ~ies, on·
site at the Caroщcll Worlu, or at rhe loc:ation of your
choict. Oeliciow exrcuriVC' Ьох luncha: аи m:idc to

ordC'r and ddivtrtd

со )'UUr

door.

8 CAlL ТООАУ to akc advan~ of this
sp«iaJ offer- receiVt: а 10% discount оп :а.11 n'enu
schcduloo алd hdd а< 1h• Carousdl Wo<ks ь.rо"
Dca:mlxr 31. 2006."

Печатные документы с фальцовкой

А

Catered Event

160 lAc~~ North • Rig l...akc-. MN 'i5JO<J
(763)262"'611 • ""(76.Щ6НЮI~
"'"''W.11a1~n1.~ • .a1~~1~11.Q1Dm.nd

"'"in &: Vmcifit (Ь~. 0wnm

довольно тяжело изготавливать

самостоятельно. В типографии есть
отдел препресс-допечатной под-

готовки,

-

где осуществляют спуск полос, чтобы все напечаталось

в нужном порядке. Но если вы распечатываете документ сами,

Почему я не могу
сделать выпуск

придется сделать это самостоятельно, хоть это и непросто. А когда

за обрез? Большинство

вы справитесь со спуском полос, вас ожидает множество веселых

домашних принтеров

часов, которые вы проведете, фальцуя листы.

не поддерживают печать

И наконец, если распечатываете документ на принтере, не надей­
тесь получить цвета, которые вы видели на экране.

Если собираетесь распечатывать документ сами, вам с самого на­

чала нужно соблюдать определенные правила дизайна.

в край. Если вы хотите
распечатать дизайн
самостоятельно, задайте

обрамление. Если
вы этого не сделаете,
то оно, к вашему

Оперативная nолиrрафи.я. Удивительно, но оборудование

неудовольствию,

для оперативной полиграфии выдает продукцию настолько разного

все равно у вас будет.

качества, что иногда даже лучше напечатать документ дома. Тем

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

Гnава

15. Бумага и печать

243


Листовые

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

офсетные ма­

лать

шины облада­

формата и типа. Сделают спуск полос, фальцовку, комплектовку,

500 копий или более, в типографии напечатают (даже с выпу­

ском за обрез) и переплетут все, что вам нужно, на бумаге любого
некоторые типы скрепления и даже наклеят штрихкод.

ют широким
спектром
возможно­

стей. Если

нужно сделать

500 ко­

пий или более,
в типогра­

фии вам на­
печатают

и переплетут
все, что нуж­

но, на бумаге
любого фор­
мата и типа.

Типографии предлагают различные услуги: перфорация, высечка,
конгрев и тиснение фольгой,

-

которые либо осуществляют сами,

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

Pantone Solid Chips Set или Process Coated Chip Set). Помните, если
ваш монитор не откалиброван, напечатанные цвета не совпадут
с цветами на экране.

Важно отметить, что при листовой офсетной печати чем больше
тираж, тем ниже стоимость экземпляра. Первый тираж обходится
дорого, затраты на дополнительные тиражи ничтожны. К приме­

500 экземпляров полноцветной листовки стоит
1000 экземпляров той же самой листовки обойдется
всего лишь в $1050. Добавив еще $50, вы удвоите тираж.

ру, первый тираж

$1000.
вам

Печать

Рулонная офсетная печать. Рулонную печать используют
в случае большого тиража

( 1О ООО- 20 ООО экземпляров или более).

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

-

обрезанные листы.

Цифровая печать. В последние годы стала популярной циф­
ровая печать. При офсетной печати применяются обычные краски,
а при цифровой

-

красящие порошки. Сама по себе цифровая

печать похожа на распечатку на лазерном принтере или цветное

фотокопирование.
Качество цифровой печати сегодня заметно улучшилось и теперь

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

500 экземпляров обходятся
$500, то 1000 экземпляров будут стоить $1000. Цифровая печать

подходит для небольших тиражей.

Одна из привлекательных характеристик цифрового метода

-

пе­

чать с переменными данными. Это очень удобно, если вы собира­
етесь сделать масштабную рассылку. Можно создать базу данных
с именами, изображениями и другими сведениями о получателе
и в мгновение ока распечатать индивидуальные письма.

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

244

Добавь воздуха!


ЧЕТЫРЕ ТИПА ДЕКОРАТИВНОЙ ОТДЕЛКИ
На бумагу можно нанести не только краски. Существует множество типов отделки
бумаги, которые возможны на послепечатном этапе и позволяют вам создать нечто
особенное. Вот четыре наиболее распространенных типа.

Фольrирование

Тиснение

Лакировка

Высечка

Тонкий слой

Выполняется

На отдельные

Процесс вырубки из

фольги наносится

с помощью клише,

участки макета

листа прямоугольной

на определенные

позволяющего

(местная лакировка)

формы изделия (или

участки вашего

получить рельефный

или на всю

отверстия) сложной

макета. Используя

рисунок. В ходу

страницу (сплошная

конфигурации.

тона от медного

также конгерев

лакировка)

Используется

до серебряного

(выпуклое

наносится тонкий

для чего угодно,

и золотого, вы

изображение)

слой лака ,

от скругления

добиваетесь

и обратный конгрев

защищающий макет

углов визитки до

впечатляющего

(вдавленное

от загрязнений .

вырезания папки

результата, особенно

изображение).

Лак может

с кармашком;

в комплексе

Тиснение без

быть глянцевым

лежит в основе

с тиснением

использования краски

и матовым , что ,

перфорирования

и фольги называют

как правило ,

слепым тиснением

обыгрывается

(блинтом)

в дизайне

адресами, кличками и породами животных. На открытке при -

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

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

рительную смету расходов. А еще лучше

-

несколько смет.

Глава

1S. Бумага и печать

245


СОСТАВЬТЕ СМЕТУ
Некоторые организации просят как минимум у трех разных ти­

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

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

выбор. Более того, как и в других
случаях, самый дешевый вариант

request for quote
Job Name:

Quontity:

не всегда является оптимальным

выбором.

Surgical Associates Physician Guide

2,500 5,000 7,500 10,000

Чтобы смета была точной, типо­

Flat Size: 8 х 9 inches

Finished Size: 4 х 9 inches

графиям нужны подробные дан­

Pages: 24 (includes self-cover}

ные по потенциальному заказу.

Ключевой является следующая
Binding & Finishlng: Trim, saddle-stitch

информация:

Paper

Cover Stock:

Weight:

Text Stock: Gloss

Weight:

1•
1001Ь

text

lnks: 4/ 4

Тираж. Сколько экземпля -

ров требуется напечатать? Лучше
предоставлять несколько цифр

Reversals: Yes

500, 1000
1500 экземпляров. Узнайте, су­

Bleeds: Four sides

для оценки- например

Screens:

и

Artwork:

О Vendor Supplied

[!] Customer Supplied

О Quark

ществуют ли скидки на крупные

заказы и есть ли они вообще.

Software:

О Pagemaker

0

lnDesign

О Other

Помните: необходимо учесть как

Proofs: Mock-up, color laser

общие предусмотренные бюд­

Delivery Date/lnstrudions:

жетом расходы, так и стоимость

WШ

deliver to Surgical Associates ofWest Florida

отдельной копии.

Notes:

2.

Размер в развернутом виде /

окончательный размер. Размеры
Please return blds Ьу:

документа перед комплектовкой

January 11 , 2008

Phone: 813.997.2079

e-mail: rjh@infocusdesign.net

и после нее различаются. Напри мер, в развернутом виде сложен­

ная втрое брошюра будет иметь
параметры

300 мм), а окончательный размер
4 х 9 дюймов (100 х 230 мм).

Запрос на цену.
Запросите цену
в типографии, чтобы
составить смету.

3.

9 х 12 дюймов (230

х

после фальцовки составит

Количество страниц. Если речь идет о буклете, уточните коли чество створок. В случае многостраничного документа, напри­

мер информационного бюллетеня или годового отчета, нужно
указать количество страниц. Из-за особого способа печати

многостраничных документов количество страниц должно быть

246

Добавь воздуха!


1

!

Папка карман
в развернутом виде

!

!

-·
!,
:

Задняя сторонка

!
!!

Передняя сторонка

i

1

~
!i

Окончательный
размер папки

1

~: ---------------------------------------------- ! ------------------------------------------- :~

о

о

-

кратно четырем, что следует учесть заранее. Если обложку вы

Размер в развернутом

передаете в печать вместе с блоком, тогда прибавьте к общему

виде

количеству страниц переднюю, заднюю и две внутренние сто­

размер. Размеры

ронки обложки. Если обложка печатается на другой бумаге, для
нее нужна отдельная смета.

/

окончательный

документа перед

комплектовкой и после
нее различаются.

4.

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

Это будет универсальная бумага, которая всегда есть в запасе
у типографии, и ее использование сэкономит вам деньги, если

Типографии заказывают
бумагу, ориентируясь
на размер в развернутом

виде, так что убедитесь,
что эти параметры
включены в ваш запрос

на цену.

качество материала не слишком важно для проекта.

5.

Количество красок. Запись о количестве используемых красок
выглядит как сумма чисел. Первое слагаемое обозначает коли­

чество красок, которое будет нанесено на одну сторону бумаги,
а второе

-

количество красок для другой стороны. Документ

с двухсторонней полноцветной печатью будет обозначен, как

4+4 -

полноцвет с двух сторон. Двухцветный документ будет

описан как

2+2

вместе с пометкой, какие именно краски ис­

пользовать. В информации для сметы также нужно указать,
планируется ли лакировка (местная или сплошная).

6.

Выпуск за обрез. Нужно ли печатать документ в край! Со сколь­
ки сторон, если да!
Глава 15. Бумага и печать

247


РАСПРОСТРАНЕННЫЕ ВИДЫ ФАЛЬЦОВКИ
С фальцованным листом бумаги проще управиться. Большое количество информации можно
уместить в удобном формате. Приведем примеры фальцовки, которая лежит в основе
изготовления плакатов, буклетов, брошюр и т. д. Если размеры стандартные, то будучи
распространенными эти типы фальцовки обойдутся вам не слишком дорого.

Когда вы действительно хотите произвести впечатление своим печатным изделием,
рассмотрите вариант незаурядной формы с интересной фальцовкой. Но сначала

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

----- 1

Односгибная

Параллельная

Фальцовка гармошкой

Трехсгибная

двухсгибная

Фальцовка « калиткой »

Фальцовка тетрадей

Двойная параллельная

альбомного типа

(французский вариант )

7.

Переплет и отделка. Что еще должна сделать типография, кроме
как нанести краски на бумагу? Фальцовку, брошюровку, отделку,

вырубку (отверстия для визиток и

CD- дисков, перфорация для

отрывных карточек и карманы для папок), тиснение фольгой,
конгрев, обратный конгрев и т. д.

8.

Сроки. У типографии, вероятно, есть и другие клиенты. Чтобы
помочь ей уложиться в ваши сроки и сроки других, называйте

248

Добавь воздуха!


конкретную дату, когда заказ должен

быть готов .

9.

Все готово. Что произойдет с гото­
вым заказом? Будет ли он достав­

лен вам, боссу или клиенту? Или
вы сразу отправите его на почту?

Должен ли быть заказ доставлен по
разным адресам? Убедитесь, что у

типографии есть все необходимые
инструкции на этот счет.

РАСПРОСТРАНЕННЫЕ ВИДЫ

СКРЕПЛЕНИЯ БРОШЮР
Вид скрепления зависит от многих факторов:
бюджета, уровня качества, необходимости
обновлять документ и потребностей конечного
пользователя документа.

Вот некоторые наиболее распространенные типы
скрепления:

ПОДГОТОВКА
ДОКУМЕНТА
К ПЕЧАТИ
Разумеется, вы хотите сделать все воз­

можное, чтобы проект был реализован
правильно, вовремя и в рамках бюд­

жета. Вот несколько советов о том, как

Шитье внакидку

Бес швейное
скрепление

этого достичь.

Внимательно вычитайте до­
кумент. Да, кому-то придется за­
няться корректурой. Кроме того, уде­

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

дополнительным элементам. Как пра­
вило, при корректуре все сосредо­
точиваются на тексте и пропускают

опечатки в других местах. Нет ничего

Скрепление

Скрепление

хуже, чем грубая ошибка в крупном

спиралью

пластмассовой

гребнеобразной скобой

жирном заголовке.

Проверив макет на отсутствие опечаток
несколько раз просмотрите его, пре­

жде чем отправить в печать. Обратите

внимание на единообразие. Не слете­
ли ли шрифты, в порядке ли размеры
и цвета? Все ли выровнено, особенно на

разворотах? Одинаково ли оформлены
иллюстрации, если сделана обводка, то
везде ли?

Скрепление тремя

Скрепление

кольцами

VeloBiпd "

Хороший способ увидеть ошибки ди­
зайна

-

это распечатать его и рассмо­

треть разложенные на полу страницы

Глава 15. Бумага и печать

249


При коррек­

туре уделите

«вверх ногами». Тогда текст не отвлекает, и так гораздо проще
увидеть потенциальные недочеты.

Если предполагается скрепление, фальцовка, высечка или что-то

особое внима-

еще, выведите весь макет, чтобы еще раз проверить все выравни­

ние заголовкам,

В случае бесшвейного скрепления и скрепления спиралью, об­

подрисуноч­
ным подписям
и прочим до­

вания и измерения.

ратите внимание на поля переплета. Текст, предназначенный для

чтения, не должен быть слишком близко к корешку, иначе его
«съест» скрепление или его продырявят, закрепляя спираль или

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

полнительным
элементам по-

мимо основного

чем документ отправится в печать.

Другие детали документа. Помимо исправления ошибок
дизайна нужно проверить следующее:

1.

и корректный формат.

текста. Нет
ничего хуже,

чем грубая

2.

Соответствуют ли параметры документа цветовой модели
(многокрасочная печать или печать дополнительным цветом).

3.

Проверьте выпуски за обрез. Если предполагается печать в край,
нужно задать выпуски по

ошибка в круп­

3

мм за линией обреза документа.

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

ном жирном за­
головке.

Убедитесь, что все изображения имеют высокое разрешение

мат. Если не будет дополнительных

3

мм, на краю страницы

в этом месте проявится белое поле.

4.

Уберите лишние изображения и текстовые врезки с монтажного
поля. Лишний материал перегружает документ, а значит и файл.
Это может вызвать проблемы при печати.

5.

По той же причине, удалите неиспользованные цвета на панели

Swatches

(Каталог).

Проведите предпечатную проверку. Первое, что делают
в типографии, когда получают от вас файлы,

-

проверяют матери -

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

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

в типографию?
Такую проверку профессиональной программы верстки выполняют

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

250

Добавь воздуха!


соответствие цветового пространства. Диалоговые

окна программы обычно позволяют вам сразу ис­

править обнаруженные ошибки.

ЧТО ПЕРЕДАТЬ

Еще проверка хороша тем, что после нее удобно

В ТИПОГРАФИЮ

сформировать пакет (пекедж) для типографии,
в этот комплект войдут копия документа, а также

задействованные шрифты и изображения.

ЧТО ПРЕДОСТАВИТЬ
ТИПОГРАФИИ

Чтобы получившийся результат
полностью соответствовал вашей

задумке, предоставьте типографии:

•

формате;

•

1.

• копию каждого шрифта,

профессиональная дизайнерская программа.

Все иллюстрации и фотографии в высоком раз­
решении, нужного размера и сохраненные в кор­

ректном формате (обычно ТIF или

3.

использованного в макете;

Файл документа в формате той программы,
в которой вы его создали. И да, это должна быть

2.

копию каждой иллюстрации,
использованной в макете;

Чтобы напечатать ваш проект типографии потре­
буется следующее:

копию документа в исходном

EPS).

Копии всех используемых в макете шрифтов.
(Если вы работаете в профессиональной про­
грамме верстки, пункты

1-3

вы выполните на­

•

печатную копию документа

(подписной макет);

• записку с контактной информацией
или

• качественный РDF-файл. Выбрав
этот вариант, уточните в типографии
требования к РDF-файлам.

жатием одной кнопки.)

4.

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

глядеть в результате. В типографии его используют как образец.

5.

Сопроводите материалы своей контактной информацией,
списком всех файлов с указанием их содержимого, названия
и версии программы.

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

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

-

нет, мы не про электронную почту.

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

Глава 15. Бумага и печать

251


Когда пекедж весит более

5

Мбайт, чтобы закачать файлы вам

понадобится FТР-клиент. FТР-клиенты позволяют передавать
большие объемы данных, которые нельзя послать по электронной

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

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

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

PDF,

который выступит в роли твердой копии.

ЧТО ДАЛЬШЕ
Получив файлы, типография проводит свою проверку: проверяется
комплектность, уточняются данные по бумаге и краскам, заявлен ным заказчиком, а распечатанный макет передается штатному

корректору. Этот этап

-

ваш последний шанс убедиться, что до­

кумент в порядке, прежде чем он уйдет в печать.

Раньше в типографии файлы заказчика использовали для созда­

ния пленки, а пленка становилась основой для печатной формы.

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

Спросите у представителя типографии, какой вид пробных отти­
сков принят в его организации и когда их ожидать.

Типография (или босс, или клиент) потребуют, чтобы вы утвердили
пробный оттиск, прежде чем проект уйдет в печать. Дождавшись

его, перейдите к сравнению со своей последней копией. Обратите
внимание на следующие моменты:

1• Текст.

Убедитесь, что весь текст на месте и нигде не съехало

обтекание.

2.

Шрифты. Проверьте их комплектность. Отсутствующие шрифты
чаще всего заменяются на

Courier, глифы которого страшны как

смертный грех, зато их легко заметить.

252

Добавь воздуха!


3.

Колонтитулы. Проверьте пагинацию и расположение номеров
страниц.

4.

Все фотографии и/или иллюстрации. Убедитесь, что они на
нужном месте и в нужном масштабе.

5.

Поля (внешние и внутренние) и выравнивание элементов, ко­
торые должны быть одинаковыми везде.

6.

Плашечные цвета. Корректно ли они назначены.

7.

Элементы отделки. Тщательно проверьте параметры вырубки,
перфорации, фальцовки и фольгирования.

8.

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

Прямо на оттиске обведите в кружок места, которые нуждаются

в исправлении. В типографии вас попросят подписать бланк, указав:

•

можно ли отправлять материалы в печать;

•

все ли исправления внесены;

•

нужен ли новый пробный оттиск.

Вы удивитесь, сколько ошибок вы не заметили раньше. Увы, даль­
нейшее внесение исправлений будет стоить вам дополнительных

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

Пробные описки
бывают различных
видов, от совмещенной

цветопробы до
распечатки макета

в полном объеме и в
натуральную величину.

".
Глава

1S. Бумага и печать

253


КАКОЙ ОТТИСК ТРЕБУЕТСЯ
Тип документа

Печатная проба

Фирменный бланк, визитная карточка,

Совмещенная цветопроба

конверт

распечатка

Плакат

/ Плоттерная

Совмещенная цветопроба, деленный цветной
оттиск (может быть вполовину реального

размера)
Папка с карманом

Распечатка на бумаге, совмещенная цветопроба,
пробная вырубка

Буклет

Совмещенная цветопроба, деленный цветной
оттиск, распечатка на бумаге с образцом биговки

Информационный бюллетень

Распечатка на бумаге , деленный цветной оттиск,
совмещенная цветопроба

Годовой отчет

Распечатка на бумаге, деленный цветной оттиск,
совмещенная цветопроба

Почтовая открытка

Деленный цветной оттиск

Коrда нужна проверка печати. Для печатных заказов,
где важно совмещение цветов и высокое качество, используется

проверка печати. Вы можете просмотреть первые листы заказа,

присутствуя при печати. Сверьте цвета, пока весь тираж еще не
напечатан. Имейте в виду: если этот этап важен для дела, вам при­

дется подстроиться под расписание типографии. Возможно, нужно
будет явиться посреди ночи, и никто

-

ни вы, ни ваш босс

-

не

уговорит печатников перенести время, чтобы вы могли поспать.
Твердо решив, что ваш проект нуждается в проверке печати:

1.

Убедитесь, что используется заявленная бумага (плотность,
отделка, цвет).

2.

Просмотрите листы, удостоверьтесь, что все элементы на месте
и все воспроизведено корректно.

3.

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

254

Добавь воздуха!


совпадать. Если вы видите, что они расходятся, обра­

титесь к типографскому работнику.

4.

Проверьте цвета. Убедитесь, что плашечные и основные
цвета напечатаны правильно

-

в типографии навер­

няка есть веер с образцами, но вы можете прийти со
своим, если хотите. Также убедитесь, что цвет везде
одинаковый. Можно сложить лист и сравнить цвета на
нескольких страницах.

5.

Проверьте лакировку и прочую отделку, если она при­
менялась. Убедитесь, что использовано правильное
покрытие (матовое, глянцевое)

6.

Возьмите лупу и внимательно рассмотрите точки кра­
ски. Они должны иметь четкие очертания. Если точки
расплывчатые, это может негативно сказаться на вос­

произведении цвета. Спросите работника типографии
об этом.

7.
8.

Любые заметные дефекты обведите в кружок.

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

Готовый продукт. После того как получите готовый
заказ, еще раз удостоверьтесь, что все в порядке. Сверьтесь
с последней копией, по которой вы вносили корректуру.

Если обнаружилось что-то, чего не было в вашем ориги­
нале, попросите типографию проверить оттиски. Если на
оттисках все нормально, вы вправе потребовать от типо­
графии перепечатать тираж за ее счет.
Соответствие

ЧТО ЕЩЕ МОЖЕТ ТИПОГРАФИЯ
Помимо собственно печати у типографии могут быть широкие воз­
можности в других областях. Консультируйтесь с вашей тип о графи -

плаwечным цветам.

Делайте проверку печати,
если корректность цвета

является определяющей

в проекте. Принесите

ей по поводу дизайна и печати еще в процессе подготовки макета,

с собой веер с образцами

это поможет избежать многих ошибок. Типография предоставит

для сравнения.

вам образцы бумаги или полиграфической продукции, чтобы вы
оценили плотность материала и другие важные характеристики,

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

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

Глава 15. Бумага и печать

255


Дополнительный

дукции. Они могут запечатать ее в пленку и оформить для пере­

сервис. Кроме печати

сылки. В некоторых организациях есть связи с службами доставки,

типографии могут

некоторые сами могут предоставить такие услуги.

предложить вам услуги
комплектовки, маркировки,

Для того чтобы тщательно спланировать дизайн, начиная выбором

организацию рассылки

бумаги и заканчивая проверкой печати, жизненно необходимы

и прочие услуги.

хорошие деловые отношения с типографией.

Воспроизводится
с разрешения

Odyssey Marine

Exploration.

256

Добавь воздуха!


• • •ПОПРОБУЙТЕ ЭТО
1.

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

2.

Найдите в своей программе функции package (упаковка) preflight
(автоматическая проверка файлов на предмет возможных тех -

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

3.

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

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

4.

Отправляйтесь в организацию, которая занимается оператив­
ной полиграфией, или зайдите на ее сайт. Делает ли компания
переплет? Фальцовку? Биговку? Высечку? Тиснение? Какие виды

бумаги можно использовать? Какие еще услуги предлагаются?

5.

Поищите информацию об экологически безопасных способах
печати. Затем напишите электронное информационное письмо

по этой теме и оформите его графически.

6.

Подумайте, как можно организовать ваше присутствие в типо­
графии при печати.

7.

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

а) какого цвета и какой плотности предлагается бумага?
б) это бумага эконом-, премиум-класса или нечто среднее?
в) какова яркость бумаги?
г) какие виды отделки бумаги предлагаются?
д) можно ли использовать эту бумагу для лазерного прин­
тера? Это вторичная бумага?
е) прилагается ли к бумаге конверт? Если да, то какие есть
размеры?

Затем пригласите представителя типографии и обсудите с ним,

какая бумага устроит вас обоих.

Глава

15. Бумага и печать

257


заключен и е
теперь вы вооружены и очень опасны,

спасибо, что з аглянули


Е

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

-

поздравляем. Вы научились от­

личать хороший дизайн от плохого. Наша миссия выполнена.

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

ВСЕ МЕНЯЕТСЯ
Нет необходимости напоминать, что медийный бизнес постоянно
изменяется, это и так хорошо известно. Единственная неизменная

вещь

это изменения, особенно в среде коммуникаций, где мы

-

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

никации. И каждый

значит каждый. Иногда любители и зрители

-

оказываются лучшими визуальными коммуникаторами, чем про­

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

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

Реальность требует, чтобы вне зависимости от рода своей деятель­

ности вы развивали хорошее вИдение, а чтобы обрести его, недо­
статочно просто запомнить правила верстки. Важно понимать,

почему эти правила работают

-

или не работают,

-

для чего

необходимо обладать кое-какими знаниями об искусстве, дизайне

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

НИЧТО НЕ НОВО ПОД ЛУНОЙ
Хотя все в сфере медиа непрерывно изменяется
делей до технологий,

-

-

от бизнес-мо­

про графический дизайн можно сказать:

ничто не ново под луной.

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

которая заимствует инновации в сфере рекламы, и т. д.
Мы все

-

визуальные коммуникаторы

-

используем одни и те же

правила графического дизайна и верстки и нарушаем их. Стили

260

Добавь воздуха!


и тренды меняются, но основы визуальной коммуникации остаются

прежними, вне зависимости от платформы и формата. Хороший
дизайн

-

это хороший дизайн. Форма следует из функции. Ис­

пользуйте иллюстрации и текст, чтобы привлечь внимание, кон­

тролировать скольжение взгляда по макету, передать информацию
и вызвать эмоции. Белое пространство не враг вам.

ИНОГДА ТРЕБУЕТСЯ ПОМОЩЬ
ПРОФЕССИОНАЛА
По крайней мере сейчас у вас достаточно знаний, чтобы работать
среди экспертов в сфере визуальной коммуникации и не испыты­

вать на себе их презрение.
Умение отличить хорошее от плохого определяет также здравую

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

-

художников,

дизайнеров, арт-директоров, иллюстраторов, фотографов, видео-,
кинооператоров и т. д.

СЛОВА НАПУТСТВИЯ
Если наша скромная книга

-

ваше первое знакомство с визуальной

коммуникацией и дизайном, то есть еще много интересных вещей,

которым вы можете научиться. Если видите себя графическим ди­
зайнером в будущем, действуйте. Пойдите на курсы, подпишитесь
на онлайн-занятия. Читайте, читайте, читайте. Найдите наставника.

Если скромных познаний достаточно, мы рады, что вы получили

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

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

Глава

16. Заключение

261


словарь

А
ANNCR.

Сокращение от

announcer-

диктор.

с
CMS

(Система управления контентон). Веб-приложение, управ­

ляющее контентом и моментально генерирующее страницы из име­

ющейся информации. Благодаря

CMS

не имеющие представления

о кодировании пользователи могут создавать веб-сайты, соблюдая

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

CSS (каскадная

таблица стилей) позволяет форматировать текст

и страницы на этапе разработки и проектирования веб-сайта.

F
FTP

(протокол передачи файлов). Позволяет загружать иска­

чивать файлы большого размера.

FX.

Сокращение, используемое для обозначения визуальных эф­

фектов.

н

С[

HTML. Аббревиатура от Hypertext Markup Language (язык разметки
гипертекста). Код, лежащий в основе большинства веб-страниц.


о

А

OpenType®. Шрифты OpenType были разрабо­

Аналогичный цвет. Аналогичные цвета рас­

таны для использования в разных операционных

положены на цветовом колесе друг рядом с дру­

системах

и мо­

гом и хорошо сочетаются, поскольку содержат

гут включать в себя около 65 ООО глифов. По­

некоторое количество цветов, находящихся

мимо традиционных пунктуационных знаков

справа или слева.

-

компаний

Apple и Microsoft -

и диакритических символов шрифты

OpenType

содержат лигатуры, росчерки и цифры старого
стиля.

Аннотация. Краткий текст с пояснением обще­

го содержания инфографики.
Асимметричнь1й баланс. Визуальная ось

s
SEO

центр визуального притяжения

-

-

смещена, по­

этому изображение визуально сбалансировано,
(Оптимизация поисковых систем). На­

хоть оно и не симметрично.

бор приемов, которые позволяют сделать сайт
более релевантным для поисковиков.

SFX. Аббревиатура от sound effects -

звуковые

семплы.

Базовая линия. Воображаемая линия, прохо­

дящая по нижнему краю глифов шрифта.
Бегущая строка. На экране монитора или теле­

v
VO.

Б

визора наложенный на изображение двигаю­
Аббревиатура от

voiceover -

комментарий, озвучание.

закадровый

щийся текст.

Белое пространство. То же, что и отрицатель­
ное, или негативное, пространство.

Бесплатное изображение. Картинка со стока

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

Бета-версия сайта. Рабочая, тестовая версия
сайта, недоступная широкой аудитории.

Биролл (Ь

roll). Архивная пленка, используемая

в качестве визуального наполнения или для
создания переходов между роликами.

Близость. Гештальт-принцип, согласно кото­
рому глаз воспринимает расположенные рядом

предметы как принадлежащие к одной группе.

Боковик. Отдельно стоящий текстовый блок
текста со сплошным фоном, обведенный рам­
кой или широкой каймой отрицательного про-

264

Добавь воздуха!


странства, содержание боковика так или иначе
связано с основным текстом.

Боковое освещение. Создает длинные тени

«Визивиг»,

WYSIWYG. Аббревиатура от
what уои see is what уои get, тип программы,
который не требует от пользователей навыков
написания кода.

и увеличивает ощущение объемности простран­
ства, в отличие от уплощающего эффекта мяг­

Внутренний и внешний отступ. Поле внутри

кого освещения.

текстового фрейма называется внутренним

Бриф, креативный, или дизайнерский. Ин­

текстового фрейма называется внешним (рас­

(расстояние между текстом и рамкой). Поле вне
струкция, созданная общими усилиями креа­

стояние между рамкой и другими элементами

тивной команды, содержит основные сведения

макета).

и ответы на возможные вопросы по проекту.

Волосяная линия. Максимально тонкая линия

Брусковые шрифты. Брусковые шрифты на­
поминают шрифты старого стиля, отпичаются
неконтрастными и мощными засечками. Были
созданы специально для

плакатов, поэтому

хороши для заголовков в печатной продукции.

или граница.

Врез. Звучная цитата, вынесенная из основного

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

Врезка. Отдельный фрагмент на карте, данный

в

с увеличением.

Веб-безопасная палитра. Перечень цветов,

которые можно было использовать в электрон­
ной среде без страха, что цвет поведет себя не­

Вставной кадр. Кадр, данный крупным планом
и привносящий что-то важное в эпизод.

адекватно, появился в 90-е годы. Список устарел,

Вторичные цвета. Смешение двух первичных

когда качество мониторов улучшилось.

цветов дает вторичный дополнительный цвет
третьего первичного цвета.

Векторное изображение. В его основе пежит
математическое представление геометрических

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

Верхнее освещение. Основное освещение,
направленное сверху.

Верхние выносные элементы. Часть глифа,
выдвинутая выше линии строчного элемента,

например у символов Ь,

d,f, h, k, 1, t.

Верхний колонтитул, хедер, заголовок.

Выворотный шрифт. Цвет фона становит­
ся цветом буквы и наоборот: например, белый
шрифт на темном фоне.

Выноска. Небольшой текстовый блок, содержа­
щий пояснение деталей инфографики.
Выпадающее меню. В электронной среде, на­

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

Верхнее поле называется верхним колонтиту­

Выпуск за обрез. Некое содержание выходит

лом.

за пределы зоны безопасности на поля и далее

Верхняя висячая строка, «сирота>>. Несколь­

за пределы страницы или экрана.

ко одиноких слов, скучающих в верхней строчке

Вь1сота строчного символа. Равна высоте

колонки.

строчной буквы х в конкретной гарнитуре.

Словарь

265


Выступ. Первая строка абзаца смещается влево

Декоративные шрифты. Никак не связаны

относительно остального текста. Это отступ

между собой, однако все они появились относи -

наоборот. Необходим для оформления маркиро­

тельно недавно и используют их исключительно

ванных и нумерованных списков, а также цитат.

в декоративных целях.

Длинное тире. Исторически это длина, ко­

г

торую занимала буква

Гарнитура, или семейство шрифтов. Ряд
взаимосвязанных шрифтов, например

New Roman, Times Bold

и

m

(отсюда

em dash);

за­

меняет запятые, двоеточия, скобки, привносит
экспрессию.

Times

Times Italic.

Дополнительные цвета. Цвета, расположен­
ные на цветовом колесе друг напротив друга.

Гештальт-теория. В начале ХХ века группа
немецких психологов исследовала способы ин­
терпретации и структурирования человеческим

мозгом визуальной информации. В результате
исследований были сформулированы гештальт­
принципы. См.: Близость, Непрерывность,

ж
Жесткий свет и темные малоконтрастные

тона. Подчеркивают тени, делают изображение
контрастны:-.1.

Схожесть, Замкнутость.
Глиф. Отдельно взятый символ шрифта, будь
то буква, цифра, пунктуационный знак, пик­

3

тограмма или специальный символ. Большин­

Заднее освещение, контровый свет. Источ­

ство шрифтов состоят из

ник света расположен позади фокусной точки,

265 глифов. Шрифт
65 ООО глифов.

делает ее более контрастной и придает ей объем.

Глубина резкости. Диапазон расстояний на

Зажатое пространство. «Пузыри» зажатого

OpenType включает

в себя

снимке, в пределах которого предметы воспри­

текстом отрицательного пространства, не не­

нимаются как резкие.

сущие никакой функции.

Графическая упаковка. В мире новостей

Замкнутость. Принцип гештальт-теории, со­

используется для оформления репортажа не­

гласно которому люди мысленно восполняют

сколькими видами графики одновременно.

пробелы, завершая образ.

Гротесковые шрифты. Не имеют засечек,

Заполненное кадрирование. В кадре все

формируются штрихами одинаковой толщи­

внимание устремлено на мелкую деталь фокус­

ны. Самые удобочитаемые и подходящие для

ной точки.

электронных документов шрифты.
Заполняющее освещение. Дополняет ос­
новное освещение, устраняя ненужные тени

д

и понижая контраст.

Дальний план. Используется для показа места

Засечки. Маленькие штрихи, которыми закан­

действия.

чиваются основные штрихи глифа.

Декоративные альтернативные глифы.

Затемнение и осветление. Техники редак­

Декоративная замена традиционного курсива.

тирования фотоизображения. В аналоговой

266

Добавь воздуха!


фотографии эти эффекты достигались путем
увеличения /уменьшения экспозиции; сегод­

ня

-

за счет цифровой обработки.

к
Кавычки «елочки». Пунктуационные знаки,

с помощью которых оформляются цитаты. Не
Затухание. Применительно к фото и видео

путать со штрихами (прямыми кавычками)- их

означает постепенное замещение одного кадра

используют для обозначения минут и секунд.

другим.

См. также Штрихи.

Зацикливание. Бесконечное повторение ани­

Кавычки "лапки". Используются для оформ­

мации или видео.

ления вложенных цитат.

Золотое сечение, золотая пропорция. Равна

Капитель. Текст набран прописными буквами,

отношению

первая буква несколько больше остальных, а все

1: 1,618,

придерживаясь которого

можно создать ряд эстетически безупречных

они

геометрических фигур.

ные глифы.

-

немного меньше, чем обычные пропис­

Зона безопасности. Материалу, находяще­

Карта сайта. В веб-дизайне план, на котором

муся в зоне безопасности на странице, ничто

показаны связи и переходы между страницами

не угрожает.

сайта, представляется в виде древовидной диа­

граммы или блок-схемы.

Кернинг. Изменение отрицательного простран­

и

ства между двумя символами или глифами.

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

-

Изображение,

Коллаж. Вариант монтажа фото и видео, когда
в кадре представлены несколько картинок.

Компас. Показывает стороны света на карте.

свободное от отчислений.
Конденсированный шрифт. Сжатые шрифты
Изображение, свободное от отчислений.

уже стандартных буквенных форм и занимают

Недорогая картинка, приобретаемая на стоке без

меньше места.

гарантии, что ваш конкурент не использует ее

тоже. Если такая гарантия все-таки нужна, купи­

те Изображение с управляемыми правами.

Концепция. Творческая объединяющая идея,

которая управляет сообщением, содержащимся
в дизайне.

Имитация текста, или «рыба». Любой текст,
используемый временно вместо 001ысленного
текста.

Короткое тире. Исторически это длина, кото­

рую занимала буква п (отсюда еп

dash), ставится

для обозначения диапазона между цифрами.

Интерлиньяж. Отрицательное пространство
между строками текста.

Крупный план. В видео- и фотосъемке укруп­
ненное изображение фокусной точки. Суще­

Инфографика. Представляет информацию

ствуют различные вариации крупного плана:

графическим способом

макрокрупный, среднекрупный, полный и ши­

-

в графиках, таблицах,

картах, цифрах и диаграммах.

рокий. На макрокрупном плане видны только

глаза объекта, на среднекрупном

-

объект пред­

ставлен по пояс.

Словарь

267


Навигационная цепочка, «хлебные крош­

л

ки». Система в веб-дизайне, благодаря которой

Лигатура. Специальное сочетание двух букв,
представляющее собой единый глиф. Заменяет

посетители всегда знают свое местонахождение

в киберпространстве.

две стандартные буквы, которые рядом смотрят­
ся некрасиво, например

fi.

Навигация. В веб-дизайне система, позволяю­
щая пользователям перемещаться со страницы

Лид. Первый, вводный абзац текста.

Линейка. Обычно линия границы или рамки.
Линия горизонта. Линия, разделяющая небо
и землю, передает ощущение дистанции. Явля­
ется ключевой для создания перспективы.

на страницу с по~ющью гиперссылок, кнопок

и т. д.

Наезд. Наезд камеры на сцену при видео- и ки­

носъемке. Неподвижная камера приближает
сцену оптическими средствами. В случае с пере­
движной камерой, ее устанавливают на тележку

и сближают с фокусной точкой.

м

Наружные поля. В английском языке обозна­

Масштаб. Относительный размер и пропорция.

чаются также термином «место для большого
папьца", поскопьку если вы держите в руках

Масштабная линейка. Демонстрирует, на­

твердую копию, дпя большого папьца как раз

сколько план меньше реальных размеров объ­

достаточно места между обрезом и полосой

екта (в одном сантиметре столько-то метров).

набора.

«Мышиный» шрифт. То есть очень мелкий

Насыщенность. Копичество или интенсив­

шрифт, зачастую в рекламе им набрана инфор­

ность цвета.

мация о фирме.

Неалфавитные шрифты. Набор пиктограмм,

Модульная верстка. Материалы размещают­

с технической точки зрения имеющий характе­

ся каждый в своем прямоугольнике, а прямо­

ристики шрифта.

угольники вписаны в сетку страницы. Данный
принцип используется в журналах и на сайтах.
Музыкальная подложка. Фоновое музы­
кальное сопровождение основного видео и/
или аудио.

Мягкий свет и светлые малоконтрастные
тона. Сглаживают тени, снижая контраст. В та­
ком свете люди и продукты выглядят привле­

Непрерывность. Гештапьт-принцип говорит

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

Нижнее освещение. Основной свет, светящий
прямо снизу вверх.

Нижний выносной элемент. Часть глифа,
опущенная ниже базовой линии, например

g,

j,p, q,y.

кательнее.

Нижний колонтитул, футер. Нижнее попе
страницы ипи экрана.

н

Нижняя висячая строка, «вдова>>. Несколько

Набросок. Небольшие эскизы, которые вы

одиноких слов, скучающих на поспедней строке

можете быстро нарисовать и так же быстро

копонки.

отвергнуть.

268

Добавь воздуха!


ный наплыв менее выражен или его нет совсем.

о

Шрифты переходной антиквы удобочитаемы.

Обрезка. Удаление лишних фрагментов изо­
бражения

!

фотографии.

Печать в четыре краски, полноцветная
печать. Оттиск получают путем совмещения

Обрезной формат. В полиграфии окончатель­

печатных форм, соответствующих четырем кра­

ный размер страницы, после того как типограф­

скам цветовой модели СМУК: голубой, пурпур­

ская машина обрезала излишки бумаги.

ной, желтой и черной.

Оптимизация. Поиск баланса между доста­

Печать плашечными цветами. Вместо того

точным разрешением и приемлемым раз~1ером

чтобы получать цвет совмещением триадных

файла, что обеспечивает изображению быструю

красок, берут уже смешанные плашечные цвета,

загрузку без окончательного уничтожения его

выбранные по книге образцов. См. также Со­

качества.

ответствие плашечному цвету.

Ориентирь1. Точки, помогающие сориентиро­
ваться по карте. Это могут быть обозначения
учреждений, улиц или другие метки.

Основной свет. Главный источник света в ка­
дре, естественный либо искусственный.

Плавный переход. В кино- и видеосъемке
постепенное исчезновение картинки перед воз­

никновением следующего кадра.

Плагин. Дополнительная надстройка для про­

граммы, обычно бесплатная.
Подрисуночная подпись. Строка текста, от­

п

носящегося к иллюстрации или фотографии

Панорамирование. Статичная камера пово­

и расположенная под ними.

рачивается вокруг своей оси, и у вас соз;:~:ается

впечатление, будто вы вертите головой.

Поле переплета. Большое внутреннее поле
между двумя страницами разворота. Эта область

Парадный план. В фото- и видеосъемке круп­

частично ((съедается» при фальцовке и скрепле­

ное изображение фокусной точки, будь то че­

нии. Не путать со Средником.

ловек или предмет, демонстрирующий свои
лучшие внешние характеристики.

Полиэкран. Экран, поделенный на две кар­
тинки.

Первичные цвета. На субтрактивном цвето­
вом колесе это красный, синий и желтый; в раз­

личных комбинациях образуют все остальные
цвета на колесе. Первичные цвета в аддитивной

модели

RGB:

красный, зеленый, синий.

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

разделение макета или композиции обеспечи­

Перебивка. В фильмах и видео перебивкой

вает интересное визуальное решение. Предпо­

называют резкое отвлечение от основного ;:~:ей­

лагается, что четыре пересечения линий сетки

ствия и вставку другого, происходящего парал­

3

лельно первому.

кусной точки в асимметричной композиции.

х

3-

это лучшие места для размещения фо­

Переходная антиква. Сформировалась на

Простой монтажный переход. В фильмах

основе антиквы старого стиля и имеет засечки,

и видеороликах последовательность кадров че­

толстые основные штрихи и тонкие соедини­

редуется переходами. Самый простой переход

тельные штрихи. Но у таких шрифтов диагональ-

от кадра к кадру так и называется.

Словарь

269


р

с

Радиальный баланс. Круговое расположение

Светотень. Светлота показывает, насколько

элементов относительно центра.

оттенок светлый или темный.

Разворот. Две страницы, расположенные друг

Семейство шрифтов, или гарнитура. Линей­

напротив друга и являющиеся частью одно­

ка связанных между собой шрифтов, например

го макета, называются разворотом, например,

Times New Roman,

Тimes

Bold

и

Times Italic.

статья в журнале или реклама может занимать
весь разворот.

Сетка. Ряды горизонтальных и вертикальных
линий, определяющих структуру дизайна.

Разрешение. Параметр четкости изображения.
Разрешение цифрового изображения измеряется

Симметричный баланс. Симметричный ба­

количеством пикселей на дюйм

(ppi) или точек
(dpi). Для веб-приложений используйте
разрешение 72 dpi. Для печатной продукции
высокого качества - 300 dpi. В периодике 200 dpi.

ланс делит дизайн на две равных половины,

на дюйм

являющиеся зеркальным отражением друг друга

Раскадровка. Разметка фильма или ан11:-.111-

в кцре передвигающуюся фокусную точку.

рованного сценария будущего фильма, видео

и электронных медиа в форме последовательных

в смысле визуального веса.

Следящая фокусировка. При съемке фильма
или видеоролика статичная камера удерживает

Служебный черный (Registration на панели
Swatches). Черная сепарация, получаемая путем

сцен или даже кадров.

совмещения всех цветных форм, используемых

Растеризованный шрифт. Буква, слово или

при выводе.

ряд слов, заполненные изображением или транс­

Соответствие плашечному цвету. Совпаде­

формированные каким-либо другим способом

ние с образцом цвета в каталоге.

в фоторедакторе.
Соотношение сторон. Отношение ширины

Растискивание. Эффект расплывания точки

электронного экрана к его высоте.

при нанесении ее на бумагу в печатной машине.
Спуск полос. Процесс допечатной подготовки,

Расчетная, или твиновая, анимация. Худож­

при котором полосы размещаются на монтаже

ник прорисовывает только основные измене­

таким образом, чтобы их можно было напеча­

ния формы или движения, затем программа

тать с обеих сторон, а также правильно сфаль­

автоматически генерирует промежуточные

цевать и затем переплести.

кадры.

Рукописные шрифты. Рукописные шрифты
отсылают нас к искусству каллиграфии. Могут
выглядеть очень элегантно, если их исполь­

зовать в декоративных целях, однако они не

слишком удобочитаемы.

Среднеобщий план. Объект представлен в ка­
дре с головы до ног или до колен.

Средний план. Используется для показа че­

ловека до уровня бедер. Полный средний
план

-

человек до уровня колен, а средне­

крупный план

-

от пояса и выше.

Средник. Промежуток отрицательного про­
странства между колонками или юнитами сетки.

Столбец. Текстовая колонка.

270

Добавь воздуха!


Структурная схема. Шаблон, представляющий

у

сетку и дизайн, готовый для редактирования
и заполнения.

«Стэдикам». Система крепления камеры на

теле оператора, чтобы изображение было ста­
бильным.

Указатели. На карте или схеме выноска с крат­

ким пояснением к какому-либо элементу карты
или схемы.

Условные обозначения. На картах

-

симво­

лы, иконки и другие отметки.

Схожесть. Принцип схожести в гештальт-тео­
рии гласит, что люди будут мысленно группиро­

вать предметы с одинаковой формой, размером
или цветом.

Установочный кадр. Кинокадр, снятый под
полным или широким углом и дающий зрителям

представление об общей сцене.

Съемка с движения. Выполняется передвиж­
ной камерой, которую устанавливают на тележку

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

Съемка с рук. Кинооператор держит камеру
в руках и перемещается вдоль сцены.

ф
Фокусная точка. Визуальный центр внимания
макета.

Формат

EPS (Encapsulated Postscript). Фор­

мат файлов векторной графики (или растровой
графики с векторными дополнениями). Как
и формат

GIF,

поддерживает прозрачность, не­

т

заменим в работе с логотипами.

Теrи, информация о фирме. Это вся инфор­

Формат

MPEG-4 (Motion Pictures Expert

мация, которую обычно можно найти в самом

Group).

Популярный формат видеофайлов

низу рекламы, такая как логотип, слоган или

для Веб, который проигрывается на различных

девиз, адрес сайта, физический адрес и карта

платформах и поддерживается почти всеми

проезда, номер телефона и иногда скучная юри -

браузерами.

дическая информация.
Формат
Титры. Любой текст на экране или любая гра­

TIF (Tagged lmage Format).

Ис­

пользуется для сохранения изображений в целях

фика, наложенная поверх другого изображения.

их последующей печати (в отличие от форматов

Тон. Отвечает на вопрос: «Какой цвет?))

GIF

и

JPG,

которые предназначены для исполь­

зования в электронном виде). Файлы в формате

Точка обзора камеры. Перспектива на уровне

ТIF имеют больший размер, но зато все данные

объектива.

остаются в сохранности.

Точка схождения. В линейной перспективе
точка схождения находится там, где две линии
пересекаются вдали.

Трекинr. Негативное пространство между ря­
дом символов, например словом, предложением

или абзацем.

Форматы

JPG Ooint Photographic Experts
Group) и GIF (Graphic lnterchange Format).
Форматы файлов изображений с низким раз­
решением, предназначенных для использования

в Сети и на экранах. Самое большое различие
между ними состоит в том, что

вает прозрачность, а

JPG -

GIF

поддержи­

нет. В случае веб­

Третичные цвета. Результат комбинации пер­

графики прозрачность означает способность

вичного и вторичного цвета.

делать невидимыми определенные цветовые

Словарь

271


группы. Если вы когда-нибудь пытались по­

Шкала оттенков серого. Постепенный пере­

местить логотип в формате

ход оттенков от черного через серый до белого.

JPG

на цветной

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

Используя формат

GIF,

можно избежать воз­

никновения белого прямоугольника.

Шрифт. Полный набор символов определен­
ного размера и рисунка.

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

Фотопортрет. Снимок крупным планом, за­

букв расположен по вертикальной, а не по гори -

хватывающий только голову и плечи объекта.

зонтальной оси, как у шрифтов старого стиля.
С осторожностью выбирайте такие шрифты для
длинного текста и не используйте в электронных

ц

документах.

Цветовая модель

Аббревиатура от

red

Штрихи, прямые кавычки. Глиф для обозна­

(зеленый), Ыие (синий). Пред­

чения минут и секунд. Не путать с кавычками­

ставляет собой аддитивную модель образования

«елочкаМИ)) и кавычками-"лапками", ис­

цветов в электронной среде путем смешения

пользующимися в оформлении цитат.

(красный),

green

RGB.

красного, зеленого и синего света.

Цветовые пятна. Красочные области для вы­
деления фокусной точки или ориентира.
Цветоделение. В полиграфии для каждой
краски используется отдельная печатная форма.
Цифры старого стиля. Представляют собой
глифы с верхними и нижними выносными эле­
ментами.

э
Экранные шрифты. Выглядят пропорцио­
нальными в крупном размере, как будто специ­
ально созданы для заголовков.

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

ч

Эффект «шторкю). В видеоролике или филь­

Черновик. Образец, проработанный чуть более

ме одно изображение постепенно закрывается

детально, чем набросок.

другим.

ш

ю

Шестнадцатеричный код. Представляет со­

Юнит, или модуль, сетки. Структурная еди­

бой набор цифр и букв для обозначения RGВ­

ница модульной сетки.

цвета.

272

Добавь воздуха!