Расчёт модульной сетки. InDesign
Хочу показать построение сложной сетки, как в плагине Grid Calculator и работу с ней. Все расчёты можно произвести один раз, а потом забить формулы в таблицу или вообще создать свой полноценный плагин или скрипт.
В такой сетке все элементы состоят из микромодулей, что делает её очень гибкой.
Подготовительные работы
Сетка всегда строится в последнюю очередь. Должен быть выбран формат издания, гарнитуры, примерные поля, сделаны концепты разворотов. Желательно иметь план разворотов всего издания. Когда всё определено и уже есть понимание какая, примерно, нужна сетка, то можно приступать к расчёту.
-
В индизайне создаём новый документ, идём в настройки и все единицы измерения переводим в пункты. Насколько я понял, индизайн все расчёты проводит в пунктах и ошибки округления при конвертации из одной единицы измерения в другую могут негативно сказаться на сетке. В настройках документа вписываем нужный формат. Я для примера возьму формат 220×285 мм, в пунктах это будет 623,622×807,874 пт. Основная гарнитура у меня будет TT Bells 9/14 пт, дополнительная Mediator 8/10. Допустим будет журнал, предполагается 2–3 колонки текста и различные варианты верстки.
Расчёт интерлиньяжа
Для начала определим сколько строк текста помещается в наш формат. Высоту листа 807,874 делим на наш основной интерлиньяж (14 пт) и получаем 57,705 строки, округляем до 58. Теперь нам нужно узнать какой должен быть интерлиньяж, чтобы получить ровно 58 строк. Для этого высоту листа делим на 58 и округляем.
807,874/58=13,9289. Основной интерлиньяж — 13,929 пт.
Микромодуль и модуль
Сперва рассчитаем микромодуль, он послужит образующим элементом для всего остального.
В интерлиньяж по высоте должно помещаться целое количество микромодулей, чем их больше, тем более гибкая сетка. Но их не должно быть слишком много, т.к. потеряется смысл сетки.
Я возьму число 4.
Полученное значение вписываем в настройках сетки Vertical. Значение Subdivisions ставим на единицу.
В результате мы получаем интерлиньяж который поделён ещё на четыре строки.
Следующий этап это непосредственно создание микромодуля. Сейчас у нас есть только горизонтальное деление, теперь нужно добавить вертикальное и получить полноценную сетку.
Есть несколько способов добавить вертикальные линии:
-
Сделать микромодуль квадратным, то есть ширину листа поделить на значение 3,4822 пт. И по схеме расчёта интерлиньяжа добиться квадратного микромодуля. Идеальный квадрат получить конечно будет невозможно (если формат издания квадратный, то возможно), только приближенное значение. Ширину листа поделить на произвольное количество линий. Сделать микромодуль равный по пропорциям формату издания.
Я покажу третий вариант. Сперва нужно узнать пропорции, делим высоту издания на ширину.
807,874/623,622=1,2954546183425. Округляем до четвёртого знака и получаем значение 1,2955.
Теперь берём значение 3,4822 пт и делим его на 1,2955. Получаем 2,6879 пт. 3,482×2,6879 — это наш микромодуль в идеале. Конечно же ширина формата не разделится на 2,6879 пт без остатка. Поэтому количество вертикальных линий считаем также как и интерлиньяж.
Ширину листа 623,622 делим на 2,6879, округляем и получаем 232 колонки.
623,622/232=2,688 пт. Наш микромодуль будет 3,482×2,688 пт. Выставляем значения в настройках сетки.
Сетка в индизайне начинает строиться с верхнего левого угла, поэтому все погрешности и несостыковки с форматом хорошо будут заметны в нижнем правому углу. Для достижения полного соответствия формату иногда нужно поэкспериментировать с размером модуля, меняя тысячные значения.
Полоса набора и колонки
И так у нас есть сетка с микромодулем и рассчитанный интерлиньяж. Теперь нужно определиться с полями и колонками. Сейчас у нас 232 модуля по ширине и 232 по высоте, их и будем использовать в качестве единицы измерения.
Верхнее и нижнее поле должно совпадать с основным интерлиньяжем, чтобы в полосу набора помещалось равное количество строк. Поэтому количество микромодулей должно быть кратное четырём. Верхнее поле будет 12 модулей а нижнее 20.
Теперь нужно определиться с боковыми полями, колонками и средником, сумма всех этих элементов должна быть 232 микромодуля.
Полоса будет у нас делиться на 12 колонок, пусть каждая колонка будет по 10 модулей. По макетам/эскизам прикидываем какой нужен средник и смотрим сколько это микромодулей, пусть будет 6. Боковые поля будут по 20 модулей.
Считаем ширину колонок плюс ширину средника:
Вычитаем это значения из общего количества модулей по ширине.
Получается 46 микромодулей на оба поля, но мы задумывали боковые поля по 20 модулей. Можно к каждому полю добавить по 3 микромодуля. Можно увеличить средник или увеличить ширину колонки. Я добавлю по 3 модуля.
На такие расчёты важно сделать скрипт или формулы в таблице, так будет проще и быстрее.
Далее добавим обычные модули на основании базовых линий и системы колонок. Пусть модуль равен ширине колонки, а высота равна двум базовым линиям. Расстояние между модулями по горизонтали — средник, по вертикали — одна базовая линия. Не всегда по вертикали модули будут так хорошо укладываться, возможно придётся изменить верхнее/нижнее поле.
Текст
Для расчёта интерлиньяжа разного текста мы будем использовать значение кратное высоте микромодуля. Исходя из сетки основной текст имеет параметры 9/13,929 пт.
Далее нам нужен текст меньшего размера, для него берём кегель в 8 пт, а интерлиньяж на один микромодуль меньше чем основной.
Интерлиньяж для заголовков считается по такому же принципу, просто увеличиваем его с шагом в один микромодуль до получения необходимого результата.
На этом расчёты наконец-то окончены, думаю принцип построения и использования понятен. Сетку всегда можно модифицировать под свои нужды.
Важно помнить, что это конечный инструмент для выравнивания уже готового дизайна. Сетка и модули не должны ограничивать идеи. Композицию, ритм и оптическое выравнивание никто не отменял.
Учимся верстке и допечатке
a. Выбираем формат страницы А4 вертикальный (210×297 mm).
b. Поля (Margins) по умолчанию имеет заданный размер —12,7 mm, одинаковый по всем сторонам. Меняем все значения:
- Верх (Top) — 15 mm;
- Низ (Bottom) — 30 mm;
- Внутреннее поле (Inside) — 20 mm;
- Наружное поле (Outside) — 10 mm.
* ПРИВЕДЁННЫЕ ВЫШЕ РАЗМЕРЫ ПОЛЕЙ ЯВЛЯЮТСЯ РАСПРОСТРАНЕННЫМИ КЛАССИЧЕСКИМИ РАЗМЕРАМИ.
2. Устанавливаем единицы измерения — пункты (Points).
Edit > Preferences > Units & Increments
3. Строим сетку.
Для того, чтобы в итоге получилась интересующая нас сетка, изначально нам должны быть известны следующие данные:
- Общее количество строк, учитывая конструкцию сетки.
- Высота шрифта по выносимым элементам («EqПр»).
- Интервал между блоками, учитывая высоту шрифта и разрядку строк.
I. Создаём текстовой блок.
Указываем в нём интересующие нас параметры. В данном примере используется:
- Шрифт — MyriadPro;
- Кегль — 11 pt;
- Интерлиньяж (Leading) — 12 pt.
* В ЗАВИСИМОСТИ ОТ ДИЗАЙНА ПРОЕКТА ДОЛЖНА БЫТЬ ПОДОБРАНА ГАРНИТУРА ОСНОВНОГО ТЕКСТА, ТАК КАК ИМЕННО ОТНОСИТЕЛЬНО ДАННОЙ ГАРНИТУРЫ БУДЕТ СТРОИТЬСЯ МОДУЛЬНАЯ СЕТКА.
II. Заполняем страницу «рыбным» текстом.
* ДЛЯ ТОГО, ЧТОБЫ ИСПОЛЬЗОВАЛОСЬ ВАШЕ ТЕКСТОВОЕ СОДЕРЖАНИЕ, НЕОБХОДИМО СОЗДАТЬ ТЕКСТОВОЙ ФАЙЛ В ПАПКЕ ADOBE INDESIGN CS4 С НАЗВАНИЕМ PLACEHOLDER.TXT.
III. Получаем информацию о количестве строк, которым мы располагаем.
- Кликнем по текстовому полю;
- Открываем вкладку Info.
* КОГДА ТЕКСТОВОЙ БЛОК ЯВЛЯЕТСЯ АКТИВНЫМ, ВСЯ ИНФОРМАЦИЯ О СОДЕРЖАНИИ ДАННОГО БЛОКА ОТОБРАЖАЕТСЯ ВО ВКЛАДКЕ INFO — КОЛИЧЕСТВО СИМВОЛОВ, СЛОВ, СТРОК И ПАРАГРАФОВ.
Количество строк (Lines) — это именно тот пункт, который интересует нас в первую очередь.
В данном примере у нас 56 строк.
Делим количество строк на количество блоков, то есть 56 / 4 = 14
14 — это количество строк.
Выбираем оптимально меньшее значение, так как нам понадобится ещё 3 строки.
13 × 4 + 3 = 55
Для построения сетки нам понадобится 55 строк. Следовательно, удаляем лишнюю.
Определяем высоту шрифта
Для того чтобы определить высоту шрифта:
- Создаём новый текстовой блок со следующим содержанием — «EqПр»;
- Используем ту же гарнитуру, что и в первом текстовом блоке, но со значением кегля 10 pt;
- Преобразовываем данный текст в кривые — Type > Create Outlines.
Н — высота текста — 8,719 pt.
Коэффициент для 8,719 pt равен — 0,8719 pt (так как кегль (размер шрифта) — 10 pt). Округляем — 0,872 pt.
Высоту нашего шрифта, то есть 11 pt умножаем на полученный коэффициент. Полученное число — 9,592 и есть высота нашего текста.
11 pt × 0,872 pt = 9,592 pt
На данный момент нам известна часть параметров, с помощью которых мы будем строить модульную сетку, а именно:
- Количество строк — 55;
- Высота текста — 9,592 pt (коэффициент — 0,872 pt);
- Интерлиньяж — 12 pt.
IV. Устанавливаем привязку Cap Height.
Object или правой клавишей мыши кликаем на текст > Text Frame Option > Baseline Options
Или данное окно можно также открыть при нажатии Ctrl + B
First Baseline > Offset – из выпадающего меню выбираем пункт Cap Height
4. Построение модульной сетки.
Переходим на Мастер-страницы (A-master).
A-master — это некий шаблон, который применяется ко всем создаваемым страницам, автоматически дублирующий все необходимые компоненты.
Именно здесь и будет создаваться наша модульная сетка.
Для перехода на A-master: Pages > A-master (двойной клик).
Дополнительные необходимые параметры для построения модульной сетки
55 (количество строк) — 1 (минус одна строка, так как она просчитывается по высоте (H)) = 54
54 (количество строк) × 12 pt (интерлиньяж) = 648 pt
Данное полученное значение является высотой от первой строчки до верхнего выносного элемента последней.
648 pt + 9,592 pt (высота текста) = 657,592 pt
Данное значение и есть высота нашего прямоугольника.
12 pt (интерлиньяж) × 2 − 9,592 pt (высота текста) = 14,408 pt
Интервал между блоками.
Сейчас мы имеем все необходимые параметры для того, чтобы можно было построить модульную сетку.
_________________________________________________________________________________________
ШАГ 1
Рисуем прямоугольник с привязками по боковым полям. После чего вводим уже известную нам высоту прямоугольника, которая равняется 657,592 pt.
ШАГ 2
Открываем вкладку Scripts.
Windows > Automation > Scripts > MakeGrid
В открывшемся окне MakeGrid вводим следующие параметры:
- Ряды (Rows) — 4;
- Интервал между блоками (Row Gutter) — 14,408 pt.
ШАГ 3
Добавляем направляющие вокруг объектов.
Для этого выделяем 4 левых блока и открываем ещё один скрипт AddGuides.
Теперь выбираем следующие пункты:
- Верх (Тор);
- Низ (Bottom).
ШАГ 4
Выделяем 2 верхних блока, ещё раз открываем скрипт AddGuides и выбираем следующие пункты:
- Слева (Left);
- Справа (Right).
Далее удаляем имеющиеся у нас прямоугольники. Копируем слой с Guides и переносим на другую страницу, нижний — блокируем.
Ctrl + H — отображает или скрывает Guides.
ШАГ 5
Настройка базовых линий.
Alt + Ctrl + ’ — отображает или скрывает базовые линии.
Рисуем прямоугольник от верха документа до первого Guide. Смотрим, чему равняется высота прямоугольника.
Edit > Preferences > Grids
В графе Start указываем высоту прямоугольника.
Значение графы Increment Every должно совпадать со значением интерлиньяжа, то есть равняться 12 pt.
Перетаскивая фреймы в другое место, всегда будет соблюдаться кратность, учитывая, что интерлиньяж равен шагу базовых линий.
Построение модульной сетки в InDesign. Очень подробно.
В этом уроке рассказываю как строить модульную сетку в InDesign. Очень подробно об инструментах, которые Индизайн для этого предоставляет, и о том как насаживать текст на модульную сетку. О самом построении сетки говорим с 0:50 до 13:15. А потом оставшиеся полчаса о том, как на нее закреплять текст. #урок #сетка #индизайн Этот урок сделан, как демонстрация нашего учебного подхода. Курсы и мастер-классы смотрите на сайте Школы: Блог Школы: Оповещения о наборах на курсы, работы учеников, и изредка посты о теории дизайна: • VK-паблик: • TG-канал: • Insta: • Энциклопедия Графдизайна (уйма референсов!): Допссылки: → Этот урок по сетке считаю морально устаревшим. Создал плейлист с тремя более качественными уроками: → с 49:00 до 53:00 даю бонусный трюк в Индизайне. Подробнее о нем можно посмотреть тут:
Alexander Shirokov
Спасибо большое за очень полезное видео! А нет ли у вас видео, как вот также встроенную таблицу по модульной сетке выровнять?
long tongue
Чел, я тебя люблю. Спасибо большое за видос, невероятно полезно. Плюс отдельное уважение за то, что рассказываешь про горячие клавиши
Sivel Pashalieva
КРУТО! Спасибо большое, очень выручили!
Desu Art
Здравствуйте! Спасибо большое за видеоурок! У меня вопрос, как можно убрать такую сетку отдельно для некоторых страниц, чтобы не было привязки именно к этой модульной сетке? Иначе не могу сверстать отдельные рекламные страницы с тектом и изменить интерлиньяж.
Геннадий Милютин
Спасибо — большое! Вы очень помогли.
Deep Sound
Это не "построение модульной сетки", это "построение базовой сетки текста", и если уж совсем по-хорошему делать, то базовая сетка текста должна просчитываться по формулам, относительно кегля основного текста, и размеров листа, на котором просчитывается сетка. Потому что потом по базовой сетке, делается сетка для выравнивания изображений относительно текста, а уже относительно этих двух сеток, делается колоночная сетка, и вот тогда уже можно говорить о "модулях", полях, и прочих вещах. Потому что нормальная модульная сетка, состоит по сути из трёх-четырёх слоёв сеток, которым проставлены опции отображения относительно параметров зума.
p cool
За работой лучше воспринимается информация, чем просто урок на определенную тему.
Спасибо тебе! Приятно смотреть и слушать!
Очень понравилась дополнительная информация, например, по поводу вёрстки, спасибо, продолжай, если нравится, хорошо получается)
Liza Maj
Спасибо большое за полезный урок!
Georgy Warrior
смотреть строго на скорости 1,75
inka chery
ну какой же крутой чел)
Юлия Синенко
Спасибо Вадим! Надо с водой!))
Вадим Александрович
Очень познавательно, начинающие не умеют маленькие детали просчитывать наперед. Поэтому большая польза твоих видео где есть решения дополнительных задач! Спасибо! Все очень подробно! Особенно нравится, что говоришь сочетания клавиш (выводишь на экран в других видео), после пары твоих уроков сочетания запоминаются в голове.
Lil Safonova
Очень большое спасибо, интересно и понятно !
Eva Luck
Спасибо, вам Вадим, огромное, вы очень хорошо, отлично, лучше всех объясняете. Счастья вам
Anna M
Урок мега крутой и полезный, всё нужное, спасибо.
Andriy Bond
Крутяк, огромное спасибо за урок и за интересные идеи!
Irene Simon
Совершенно случайно попала на Ваши уроки — смотрю и получаю удовольствие! Излагаете очень полезную информацию доступно и легко. Думаю на ваш курс записаться. Мечтаю делать такое же классное оформление, но пока новичок. Вы молодец!
наталья забика
у меня почему то не хотела появляться сетка, что можно сделать чтоб она появилась
VIDEOMiN .NET
03:44 
04:35 
03:14 
01:37 
04:36 
05:28 
06:01 