Как делать сетку: анализ, расчет и построение / Хабр

анализ, расчет и построение / Хабр

Intro

Краткая предыстория

Привет, Хабр. Я читаю тебя без малого 10 лет, но ни разу не писал статей. Сначала сказать было нечего, потом — некогда. Но сегодня звёзды сошлись и подвернулась подходящая тема. Модульная сетка.

Казалось бы, набросать сетку — дело пяти минут. Всё разжёвано до нас, и бутстрапы есть на любой вкус, и «Аннушка уже пролила своё масло…». Но на практике у дизайнеров частенько возникают вопросы. Многих вводят в ступор даже небольшие отступления от привычных 12-колоночных сеток, потому что им не до конца понятны принципы построения.

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

Словом, в очередной раз отвечая на вопрос по модульной сетке и не найдя ни одной подходящей ссылки, решил как-то обобщить в заметке всё, что размазывалось по десяткам комментариев на разных сайтах.

Как работает сетка

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

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

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

Чем определяется структура сетки

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

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

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

Если контент простой и неизменный, и известен вам заранее, то проще всего будет отталкиваться именно от него. Если же контент сложный и непредсказуемый (например, user-generated — пользовательский), то сетка в большей степени будет определяться форматом носителя и общими принципами типографики и композиции.

Начало построения. Вертикальный ритм

Когда речь идёт о сайтах или печатной продукции, дизайн во многом зависит от типографики и свойств текста. Поэтому построение сетки удобно начинать с вертикального ритма.

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

Вариант «А». Подход «от строки»

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

Для этого нужно представить, что каждый элемент дизайна, включая отступы, занимает по высоте некоторое количество абстрактных строк. Потом сложить все строки вместе и разделить на них высоту макета. А затем каждую абстрактную строку разбить на N реальных строк, соответствующих нужному интерлиньяжу — так, чтобы в них адекватно поместился заданный текст.

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

Допустим, вам нужно сверстать на листе А4 список лучших работников месяца. Их у вас трое. Для каждого сотрудника вы делаете блок-карточку: слева фото, справа текст. Фотография крупнее, поэтому высота карточки равна ее высоте. Кроме того, на листе нужно разместить шапку с заголовком, а внизу — блок контактной информации [профсоюза гениев].

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

Если теперь принять высоту шапки за одну «строку», получится, что весь ваш контент занимает 9 абстрактных «строк». Если вам трудно абстрагироваться от интерлиньяжа, назовите эти «строки» рядами или горизонтальными блоками. Предположим, вы еще захотите добавить по 1/2 строки воздуха перед верхним и нижним краями листа. Итого, ваш макет нужно делить на 10 строк:

В результате вы делите ваш носитель (лист A4) по высоте на 10 «строк». Получаются блоки высотой около 3 сантиметров. Очевидно, что это слишком крупная разлиновка, чтобы верстать по ней тексты, контактную информацию и прочие мелочи.

Вы смотрите на свои текстовки и понимаете, что возле каждой фотографии у вас получается описание где-то на 10—12 строчек текста. То есть, каждый блок нужно разделить еще на 5—6 частей. Предположим, вы перестраховываетесь и берете большее значение, чтобы по одной строчке ушло на отступы. Бинго. Теперь ваш макет представляет собой 10 блоков по 6 строк в каждой. То есть 60 строк. С учетом высоты листа (~300 мм), каждая строка получилась высотой ~5мм. Всё, можно прототипировать прототип, а затем дизайнить дизайн.

А как же быть с размером шрифта? О, теперь всё очень просто! По всё той же логике «правила внешнего и внутреннего», интерлиньяж должен составлять примерно 150—200% от высоты кегля. То есть размер вашего шрифта будет в 1,5—2 раза меньше высоты строки. А это от 2,5 до 3,3мм. Этот размер несложно подобрать в пунктах или даже просто на глаз.

Подчеркну, что не обязательно вымерять тысячные доли с калькулятором. У вас есть глазомер и чувство пропорции — их должно быть достаточно. И даже если они пока не развиты, спустя сотню-другую макетов вы сможете попадать в сетку пальцем с точностью до 1-2 пикселей, даже при скрытых направляющих и отключенной привязке. И не забывайте, что человеческий глаз воспринимает размеры и расстояния с поправками на физиологию. Поэтому и сама сетка — не догма, а лишь грубое подспорье в расчетах. Последнее слово всегда за оптической компенсацией. К этой теме вернёмся ниже.

Ещё момент. Бывает так, что после всех расчетов выясняется, что шрифт слишком крупный или интерлиньяж слишком мелкий. В этом случае вы либо делаете перерасчет сетки, либо просто используете пропорциональные значения. Как правило, компромиссный вариант — это половинный или полуторный интерлиньяж.

Вариант «Б». Подход «от кегля»

Далеко не всегда у вас будет предсказуемый контент и фиксированный холст. В веб-дизайне вы куда чаще работаете с тотальной неопределенностью.

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

В таких условиях, очевидно, нет смысла пытаться определять количество строк. Зато можно танцевать от обратного: от размера шрифта (кегля). И это даже проще.

Всё, что вам нужно, это выбрать для проекта базовый кегль, который будет достаточно крупным, чтобы хорошо читаться, и при этом достаточно компактным, чтобы в строку основных текстовых блоков помещались 7—8 слов. Строго говоря, для русского языка достаточно и 5—6 слов, потому что в среднем у нас, конечно, длиннее и тверже. Но это ориентир, а не догма. Опираться нужно на конкретный макет, конкретный шрифт плюс собственное зрение и опыт.

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

Для педантов отмечу: таки да, для кегля уже изобретены относительные единицы измерения, и это прекрасно. Но если мы углубимся в это здесь, то старость наступит незаметно, и первую сетку наш юный читатель достроит примерно к тому моменту, когда в полной мере прочувствует бесперспективность своих отчислений в пенсионный фонд. Поэтому и здесь, и далее по тексту «px» — простые квадратные пиксели. Без учёта ретин, без учета адаптивностей, а также «без колонок, без усилка и без защиты от дурака, которого ты здесь валяешь».


Сразу ответ на частый вопрос: «базовый» не означает «самый мелкий». В любом макете почти всегда будут и менее заметные надписи: сноски, примечания, подстрочники и т.п. Здесь же речь идет о том шрифте, которым вы будете набирать основную массу текста. Вспомните любой текстовый редактор. Вы открываете новый файл и начинаете печатать каким-то «просто шрифтом», лишенным какого-либо специального форматирования — это и есть базовый шрифт, basefont. Если вам нужно сделать надпись помельче, никто не запрещает использовать мелкий кегль, это нормально.

Итак, определились с базовым шрифтом. Что дальше? А дальше — интерлиньяж. По уже упомянутым традициям современной типографики он составит 150—200% от кегля. А иногда и более.

(Подчеркну: речь о современных реалиях. Просьба не попрекать Брингхерстом и другими классиками книжной типографики — они, безусловно, взорвали свой танцпол, но с тех пор мир немного изменился. Те 120—180% всё-таки рассчитывались для книг, да ещё и в латинице).

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

По личному опыту, для простых коммерческих сайтов довольно удобен базовый интерлиньяж 15px. (Подразумевается 30px, но на уровне верстки удобнее сразу работать с половинчатым, т.к. он дает хорошие отступы в 15px и 45px. Важно понять, что в контексте модульной сетки 15 и 30 суть одно и то же — вы просто работаете либо с половинным значением «тридцатки», либо с целым значением «пятнашки»). Хотя при всей любви к классическим модульным сеткам, не отрицаю плюсы той же трендовой 4-пиксельной сетки для UI-дизайна. Сетки разные нужны, сетки разные важны. Это инструмент, а не религия.

Результат по вертикали

Теперь, когда у нас есть базовый интерлиньяж, мы можем разлинеить макет и следовать, наконец-то, вертикальному ритму. Это значит, что каждый элемент дизайна будет занимать по высоте некоторое число строк. С ритмом становится удобно и легко работать. Не нужно вычислять точные значения в пикселях. Вы меряете всё строками. Заголовок первого уровня — 4 строки, иллюстрация — 8 строк, аватар — 3 строки, кнопка — 3 строки, меню — 5 строк, отступ — 1 строка и т.п. (Надеюсь, вы понимаете, что это фигуральный пример, а не рецепт успеха).

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

Колонки и межколоночный интервал

От чего зависит число колонок

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

Например, если вы верстаете блок про времена года, вашим магическим числом наверняка будет 4. Вы можете сгруппировать их в один ряд или в два. При этом число колонок получится кратным либо двум, либо четырем. То есть есть смысл опираться на числа 2, 4, 6, 8, 12 или 16.

Усложним. Предположим, под блоком с временами года у вас идёт блок с тремя рекламными объявлениями. Очевидно, для этой части макета удобнее было бы число колонок, кратное трем: 3, 6, 12… Но сетка в 3 колонки явно неудачна для времен года. Поэтому нужно искать для них какой-то общий знаменатель. Предыдущий абзац подсказывает, что вам нужна сетка на 6 или 12 колонок.

*Еще пример. Вам нужно сверстать типовой блок-визитку, состоящий из логотипа/аватара (слева) и контактной информации (справа). Сколько нужно колонок? Давайте прикинем.

Если мы хотим сделать равновесную композицию, то можно обойтись даже двумя колонками. В этом случае выравнивание лого будет центральным, а текст придется размещать на глаз. А можно предположить, что текст по ширине занимает места примерно вдвое больше, чем логотип, и соответственно сделать блок в три колонки. А можно пойти еще дальше и заложить в сетку еще и отступы. Допустим, слева и справа будет поля по 1 колонке, логотип займет 2 колонки, текст 4, плюс 1 колонка отступа между лого и текстом — итого 8 колонок.*

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

Когда речь идёт об отдельно взятом макете, подогнать дизайн под новую сетку нетрудно. Если же проект большой и предполагает изобилие страниц или макетов с единой канвой (сайт, брошюра, книга и т. д.), лучше заложить в сетку некоторый запас прочности и хорошенько протестировать ее со случайным контентом из разных страниц. Запас прочности, как правило, достигается кратным увеличением числа колонок: например, вам сейчас нужно только 3, а вы закладываете 6 или 9.

Отмечу один нюанс. Если вы делаете нечто с выраженной центральной композицией и активно используете горизонтальное выравнивание по центру, выгоднее сделать число колонок нечетным. Это позволит равномернее распределять отступы и контент. Совет касается и внутреннего дробления колонок. В примере выше, если у вас было 3 колонки и вам понадобилось их детализировать, при центральной композиции вы разобьете каждую колонку еще на 3, а вот при симметричной — на 2 или 4. В итоге, в первом случае колонок станет 9, а во втором — 6 или 12.

Почему все любят 12-колоночные сетки

Тут всё просто. Число 12 делится на: 12, 6, 4, 3, 2, 1. Поэтому сетка получается гибкой и позволяет органично верстать блоки почти любого количества или ширины. Более того, отбрасывая по краям макета 1 или 2 колонки в качестве полей, вы получаете в центре блок, который делится ещё и на 10, 5 или 8.

Из личного опыта добавлю, что очень удобно рисовать адаптивные макеты, отталкиваясь от ширины в 1200 пикселей, особенно без межколоночных интервалов. Вы получаете 12 колонок с приятной шириной ровно в 100 пикселей и постоянно оргазмируете от круглых чисел в процессе работы. И когда вам нужно поместить на макет плашку кнопки, вы не тянете границы прямоугольника туда-сюда, а мгновенно и не задумываясь вбиваете размер: 300 на 60 и кликаете на макет. К слову, полезно приучить себя позиционировать элементы не мышкой и стрелками, а вбиванием цифры отступов по иксу и игреку — макеты станут опрятнее.

Если контент не подразумевает верстку встык, бывает удобно сделать 24 колонки и работать с ними так же, как с межколоночным интервалом, просто отступая при необходимости полную колонку в 50px. Это создает вокруг контента достаточно воздуха, и макет смотрится дорого. Если же требуется интервал помельче, берется ровно половина колонки, то есть 25px. Все расчеты на лету, числа удобные.

Межколоночное расстояние (gutter)

Зачем и когда нужно делать отступы между колонками?

Мы не всегда делаем мозаику. Чаще всего контент не верстается встык — между двумя блоками должно быть какое-то расстояние, чтобы они не слиплись и не перекрыли друг друга.

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

В большинстве случаев, межколоночный интервал значительно меньше ширины колонки. Его размер тоже определяется особенностями контента. Если вы верстаете интерфейс, где много классических элементов управления, узкое межколоночное расстояние служит удобным разделителем. Например, между поисковой строкой и кнопкой, или между чекбоксом и его лейблом. (Хотя в целом здесь есть смысл подумать о «квадратной» сетке: 4px или иной, вообще без всяких колонок, и для этого тоже есть причины). Если же вы верстаете страницу с крупными текстовыми блоками, организованными всего в 2—3 колонки, то межколоночное расстояние имеет смысл сделать большим, чтобы дать контенту максимум воздуха.

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

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

Модуль

Собственно, вот таким непростым путём мы с вами добрались до определяющего понятия «модуль», в честь которого и названа модульная сетка. Обычно с него начинают, но судя по вопросам дизайнеров, такой подход не работает. Так что же это вообще такое и зачем оно нужно?

По сути, это просто пропорция. Ширина модуля равна ширине колонки, а высота — нескольким строкам. Скольким именно? Зависит от вашего дизайна и от эффекта, которого вы хотите добиться.

*Несколько лет назад мне довелось делать сайт, посвященный пилонам — шестам для танцев. Естественно, модуль там был сильно вытянут по вертикали. Я использовал соотношение ширины и высоты почти 1:3. Во-первых, потому что подавляющее большинство иллюстраций было портретной ориентации и тоже вытянуто. Во-вторых, потому что сам продукт и весь стиль предполагал некоторую долю фаллической символики. Модуль определяется и контентом, и композицией, и стилем.

Если вы делаете нечто «стабильное», то наоборот: есть смысл подумать о модуле, чуть вытянутом по горизонтали. Если же вы верстаете огромную длинную таблицу, которая служит основным контентом в макете, то очевидно, что за модуль нужно принимать одну или две базовых строки этой самой таблицы. Словом, думайте.*

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

Допустим, вы делаете портал. У вас есть меню высотой в 3 строки, затем следует баннер главной новости высотой в 9 строк, затем ряд каких-то цифр (курсов валют, погоды и др) в 3 строки, затем ряд из нескольких новостей второго плана на 9 строк. То есть весь контент чередуется: 3-9-3-9-3-9-3… На практике этот прием редко оправдан, он не очень-то гибок. Но стоит держать в голове, что ритм может быть сложным.

Сетка в сетке

Да, бывает и такое. Когда проект сложный и многокомпонентный, вы можете использовать несколько вложенных сеток. Простейший пример: общая раскладка макета (layout) использует гигантские колонки с крупным текстом, а внутри одной из них лежит форма калькулятора с кучей элементов управления, сверстанных по квадратной сетке в 4px. В этом нет ничего особенно криминального.

Более того, когда речь идёт о сайтах, часть вашего контента может быть вообще посторонней и встраиваемой: плееры, онлайн-карты, виджеты, платежные фреймы и т.д. Миллион вариантов. У этих элементов будут свои внутренние сетки, которые вы не контролируете. И это тоже нормально.

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

Оптическая компенсация

Дизайнерам-перфекционистам бывает трудно понять этот момент. Сетка — это просто методология для упрощения расчетов. Это не символ веры, не закон мироздания, и не панацея. Более того, математические пропорции по чисто физиологическим причинам не являются идеальными для человеческого восприятия. Сетка не учитывает возникновение оптических иллюзий и искажений.

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

Отдельный важный момент: элементы в сетке выравниваются по визуальной массе, а не по габаритным границам. Это значит, что (в идеале) круг, выровненный по левому полю, почти всегда окажется на несколько пикселей левее квадрата, который выровнен по тому же полю. А мелкий подстрочник под крупным заголовком почти всегда нужно смещать вправо, потому что оптически левый край первой буквы заголовка окажется правее, чем «по расчетам». Это частности оптической компенсации.

Таких тонкостей довольно много. Но важно понимать, что в случае с веб-дизайном вы почти никогда не получите идеальную картинку. Веб-верстка зачастую формализована, она опирается на формульные зависимости фреймворков, чтобы гибко адаптироваться под разные устройства и платформы. И адекватно масштабировать ваше 3-пиксельное смещение заголовка с учетом всех особенностей сглаживания, антиалиасинга и прочих ругательных слов практически невозможно. Это нужно воспринимать философски.

Резюме

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

Используйте сетки в Adobe InDesign

Руководство пользователя
Отмена

Поиск

Последнее обновление
Nov 29, 2021 09:16:05 AM GMT

1. Руководство пользователя InDesign
2. Основы работы с InDesign
   1. Введение в InDesign
      1. Новые возможности InDesign
      2. Системные требования
      3. Общие вопросы
      4. Использование библиотек Creative Cloud
   2. Рабочая среда
      1. Основные сведения о рабочей среде
      2. Панель инструментов
      3. Установка параметров
      4. Рабочая среда «Сенсорное управление»
      5. Комбинации клавиш по умолчанию
      6. Восстановление документа и отмена
3. Создание документов и макетов
   1. Документы и страницы
      1. Создание документов
      2. Работа со страницами-шаблонами
      3. Работа с несколькими документами
      4. Задайте размер страницы, поля или области выпуска
      5. Работа с файлами и шаблонами
      6. Создание файлов книг
      7. Добавление основной нумерации страниц
      8. Нумерация страниц, глав и разделов
      9. Преобразование документов QuarkXPress и PageMaker
      10. Совместное использование содержимого
      11. Основные рабочие процессы с управляемыми файлами
      12. Сохранение документов
   2. Сетки
      1. Сетки
      2. Форматирование сеток
   3. Средства создания макетов
      1. Линейки
4. Добавить содержимое
   1. Текст
      1. Добавление текста к фреймам
      2. Связывание текстовых блоков
      3. Возможности для арабского языка и иврита в InDesign
      4. Создание текста по контуру
      5. Маркеры и нумерация
      6. Глифы и специальные символы
      7. Компоновка текста
      8. Текстовые переменные
      9. Создание QR-кодов
      10. Редактирование текста
      11. Выравнивание текста
      12. Обтекание текста вокруг объектов
      13. Привязанные объекты
      14. Связанное содержимое
      15. Форматирование абзацев
      16. Форматирование символов
      17. Найти/заменить
      18. Проверка орфографии и языковые словари
   2. Типографика
      1. Использование шрифтов в InDesign
      2. Кернинг и трекинг
   3. Форматирование текста
      1. Форматирование текста
      2. Работа с пакетами стилей
      3. Табуляторы и отступы
   4. Рецензирование текста
      1. Отслеживание и просмотр изменений
      2. Добавление редакционных примечаний в InDesign
      3. Импорт комментариев файла PDF
   5. Добавление ссылок
      1. Создание оглавления
      2. Сноски
      3. Создание указателя
      4. Концевые сноски
      5. Подписи
   6. Стили
      1. Стили абзацев и символов
      2. Сопоставление, экспорт и организация стилей
      3. Стили объектов
      4. Буквицы и вложенные стили
      5. Работа со стилями
      6. Интерлиньяж
   7. Таблицы
      1. Форматирование таблиц
      2. Создание таблиц
      3. Стили таблиц и ячеек
      4. Выделение и редактирование таблиц
      5. Обводка и заливка таблиц
   8. Интерактивные функции
      1. Гиперссылки
      2. Динамические документы PDF
      3. Закладки
      4. Кнопки
      5. Формы
      6. Анимация
      7. Перекрестные ссылки
      8. Структурирование документов PDF
      9. Переходы страниц
      10. Аудио и видео
   9. Графические объекты
      1. Знакомство с контурами и фигурами
      2. Рисование с помощью инструмента «Карандаш»
      3. Рисование с помощью инструмента «Перо»
      4. Применение параметров линии (штриха) 
      5. Составные контуры и фигуры
      6. Редактирование контуров
      7. Обтравочные контуры
      8. Изменение параметров угла
      9. Выравнивание и распределение объектов
      10. Связанные и встроенные графические объекты
      11. Интеграция ресурсов AEM
   10. Цвет и прозрачность
       1. Применение цвета
       2. Использование цветов из импортированной графики
       3. Работа с цветовыми образцами
       4. Смешение красок
       5. Оттенки
       6. Знакомство с плашечными и триадными цветами
       7. Наложение цветов
       8. Градиенты
       9. Сведение прозрачного графического объекта
       10. Добавление эффектов прозрачности
5. Общий доступ
   1. Работа с облачными документами InDesign
   2. Облачные документы в InDesign | Часто задаваемые вопросы
   3. Общий доступ и совместная работа        
   4. Отправка на редактирование
   5. Проверка опубликованного документа InDesign
   6. Управление отзывами 
6. Публикация
   1. Размещение, экспорт и публикация
      1. Публикация в Интернете
      2. Копирование и вставка графических объектов
      3. Экспорт содержимого в формат EPUB
      4. Параметры Adobe PDF
      5. Экспорт содержимого в формат HTML
      6. Экспорт в формат Adobe PDF
      7. Экспорт в формат JPEG
      8. Экспорт в HTML
      9. Обзор DPS и AEM Mobile
      10. Поддерживаемые форматы файлов
   2. Печать
      1. Печать брошюр
      2. Метки и выпуск за обрез
      3. Печать документов
      4. Краски, цветоделенные формы и линиатура растра
      5. Наложение
      6. Создание PostScript и EPS-файлов
      7. Предпечатная проверка файлов перед отправкой
      8. Печать миниатюр или документов большого формата
      9. Подготовка файлов PDF для поставщиков услуг
      10. Подготовка к печати цветоделенных форм
7. Расширение InDesign
   1. Автоматизация
      1. Объединение данных
      2. Плагины
      3. Расширение Capture в InDesign
      4. Разработка сценариев
8. Устранение неполадок
   1. Исправленные ошибки
   2. Аварийное завершение работы при запуске
   3. Ошибка папки настроек: только для чтения
   4. Поиск и устранение проблем с файлами
   5. Невозможно экспортировать в PDF
   6. Восстановление документов InDesign

Беспристрастный язык. Мы заменяем неинклюзивный язык в InDesign 2022 (версия 17.0) и далее, чтобы отразить основополагающие ценности Adobe в отношении инклюзивности. Любая ссылка на эталонную страницу (Master page) заменяется ссылкой на страницу-шаблон (Parent page) в наших статьях справки для английского, датского, венгерского, испанского, итальянского, бразильского варианта португальского, португальского и японского языков.

Использование сеток

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

Сетка из базовых линий (слева) и сетка документа (справа)

При отображении на экране видны следующие особенности сеток.

• Сетка из базовых линий покрывает все развороты, а сетка документа — весь монтажный стол.

• Сетки из базовых линий и сетки документа отображаются на каждом развороте; их нельзя связывать с шаблонами.

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

Настройка сетки из базовых линий

Настройка сетки из базовых линий для всего документа производится в диалоговом окне «Установки сетки».

Базовые линии
для фрейма можно настроить в диалоговом окне «Параметры текстового фрейма»
(см. раздел Изменение свойств текстовых фреймов).

1. Выберите меню «Редактирование > Установки > Сетки» (Windows) или «InDesign > Установки > Сетки» (Mac OS).

2. Выберите цвет базовой сетки в меню «Цвет». В этом меню можно также выбрать «Заказной».

3. В параметре «Относительно» укажите положение начала сетки — верхний край страницы или верхнее поле.

4. В поле «Начало» введите значение, на которое следует сдвинуть сетку относительно верхнего края страницы или верхнего поля страницы (в зависимости от параметра, выбранного в меню «Относительно»). При возникновении проблем с выравниванием вертикальной линейки по этой сетке попробуйте начать с нулевого значения.

5. В поле «Линия через каждые» введите значение интервала между линиями сетки. В большинстве случаев это значение будет соответствовать интерлиньяжу основного текста, чтобы строки текста было легко выровнять по этой сетке.

   Сетка из базовых линий в окне документа

   A. Первая линия сетки B. Интервал между линиями сетки 

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

   Сетка из базовых линий при масштабе меньше (слева) и больше (справа) указанного минимального масштаба.

7. Нажмите кнопку «ОК».

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

Настройка сетки документа

1. Выберите меню «Редактирование > Установки > Сетки» (Windows) или «InDesign > Установки > Сетки» (Mac OS).

2. Выберите цвет сетки документа в меню «Цвет». В этом меню можно также выбрать «Заказной».

3. Чтобы задать горизонтальный интервал сетки, укажите значение в поле «Линия через каждые» в группе «По горизонтали», а затем укажите значение для параметра «Внутреннее деление на» между соседними линиями сетки.

4. Чтобы задать вертикальный интервал сетки, укажите значение в поле «Линия через каждые» в группе «По вертикали», а затем укажите значение для параметра «Внутреннее деление на» между соседними линиями сетки.

5. Выполните одно из следующих действий и нажмите кнопку «ОК»:

   • Чтобы расположить сетку из базовых линий и сетку документа под остальными объектами, установите флажок «Сетки на заднем плане».

   • Чтобы расположить сетку из базовых линий и сетку документа над остальными объектами, снимите флажок «Сетки на заднем плане».

Чтобы расположить направляющие под остальными объектами, щелкните правой кнопкой мыши (Windows) или удерживая кнопку «Control» (Mac OS) пустую область в окне документа, а затем выберите команду «Направляющие на заднем плане» в контекстном меню.

Отображение и скрытие сеток

• Чтобы показать или скрыть базовую сетку, выберите меню «Просмотр > Сетки и направляющие > Показать/скрыть базовую сетку».

• Чтобы показать или скрыть сетку документа, выберите меню «Просмотр > Сетки и направляющие > Показать/скрыть сетку документа».

Привязка объектов к сетке

Если привязка разрешена, перемещенный в зону привязки сетки объект будет привязан к сетке.

Привязка объектов к сетке документа

1. Выберите меню «Вид > Сетки и направляющие»
   и убедитесь, что флажок «Привязать к сетке документа» установлен.
   В противном случае установите его.

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

2. Чтобы задать область привязки, выберите меню «Редактирование > Установки > Направляющие и монтажный стол» (Windows) или «InDesign > Установки > Направляющие и монтажный стол» (Mac OS), введите значение в поле «Активная зона» и нажмите кнопку «ОК». Значение в поле «Активная зона» всегда вводится в пикселах.

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

Вход в учетную запись

Войти

Управление учетной записью

Простое пошаговое руководство по переносу или увеличению изображений — искусство — это развлечение

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

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

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

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

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

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

При рисовании сеток важно помнить, что они должен иметь соотношение 1:1 . Это очень важно — иначе ваш рисунок исказится! По сути, соотношение 1:1 означает, что у вас будет такое же количество линий на холсте, как и на эталонной фотографии, и что в обоих случаях линии должны быть расположены на одинаковом расстоянии друг от друга — идеальные квадраты.

Запутались? Это довольно легко, как только вы освоитесь. Давайте посмотрим на метод сетки в действии, и это будет иметь больше смысла.

Допустим, вы хотите нарисовать следующее изображение:

Эта эталонная фотография размером 5 x 7 дюймов. Как назло, вы хотите сделать картину размером 5 x 7 дюймов из этой фотографии. Так что нарисовать сетку будет довольно просто. Но если вы хотите сделать большую картину, вы также можете сделать картину размером 10″ x 14″ или 15″ x 21″ или 20″ x 28″ . Почему именно эти размеры, а не другие? Потому что эти размеры имеют то же соотношение, что и эталонное фото 5 x 7 дюймов. Другими словами:

Видишь? Это базовая математика. Размер вашего изображения всегда должен быть пропорционален размеру референсной фотографии.

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

Итак, вернемся к созданию сетки. Вот как вы хотите, чтобы ваша сетка выглядела:

Чтобы нарисовать сетку:

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

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

Вуаля, у вас есть сетка! Теперь повторите ту же процедуру на бумаге или холсте:

.

Теперь у вас есть сетка на вашей рабочей поверхности, которая идеально соответствует сетке вашей эталонной фотографии. Браво!

Так как эта картина будет точно такого же размера, как эталонная фотография, квадраты на этом холсте также имеют размер 1 квадратный дюйм. Если бы эта картина была размером 10 x 14 дюймов, то квадраты должны были бы быть 2 квадратных дюйма, потому что:

Видишь?

По сути, чтобы увеличить изображение, вам нужно будет выполнить такую ​​математику (даже если вы ненавидите математику!). Это необходимо для того, чтобы убедиться, что увеличение точно пропорционально оригиналу. Если вы не уверены, правильно ли вы сделали математику, просто посчитайте количество квадратов в каждой строке и в каждом столбце и спросите себя:

Если вы можете ответить «да» на оба вопроса, значит, вы успешно разобрались с процессом построения сетки!

Теперь вернемся к сетке 5 x 7 дюймов выше.

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

А вот так это выглядит на бумаге или холсте:

Итак, теперь ваша задача — перенести то, что вы видите на эталонной фотографии, блок за блоком на холст или бумагу. Когда я использую метод сетки, я всегда начинаю с верхнего левого угла и двигаюсь поперек и вниз. Поскольку квадрат A1 пуст на контрольной фотографии, мы перейдем к A2. Нарисуйте в формате A2 именно так, как вы его видите:

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

Первый блок был легким! Теперь сделайте следующий блок:

Итак, вы видите, что при передаче изображения вы уделяете внимание только одному блоку за раз. Не беспокойтесь о других блоках — просто сосредоточьтесь на этом одном блоке. Старайтесь изо всех сил копировать то, что вы видите в этом маленьком квадрате на фотографии, в соответствующий квадрат на бумаге или холсте. Сосредоточьтесь на правильном размещении каждой строки! Вот:

И затем следующий квадрат:

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

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

Видеодемонстрации

Если вы хотите посмотреть видеодемонстрацию метода сетки, просмотрите эти курсы на Skillshare. Получите немедленный доступ с 14-дневной бесплатной пробной версией или используйте наш код ARTISFUN30, чтобы получить годовую подписку со скидкой 30%! Если вы зарегистрируетесь по любой из этих ссылок, я получу комиссию, которая поможет поддержать этот сайт!

Вкратце…

Метод сетки веками использовался художниками как инструмент для создания правильных пропорций. Художники эпохи Возрождения, даже великий Леонардо да Винчи, использовали метод сетки! Метод сетки восходит к древним египтянам. Очевидно, что это полезный метод как для художников, так и для начинающих художников. Если вы планируете использовать метод сетки, помните о следующих советах:

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

.

Эти размеры подходят, поскольку все они равны 8 x 10 дюймов. По сути, если вы умножаете одну сторону на 2, умножьте и другую сторону на 2. Только так увеличение будет пропорционально правильным!

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

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

Это

Страница 9  из 15-страничного руководства, объясняющего, как рисовать фотореалистично.

Перейти на страницу 10

Оглавление

Продолжайте учиться…

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

Ознакомьтесь с направлением фотореализма в искусстве, прочитав мой обзор фотореализма .

Указанные ниже книги доступны на Amazon. Как партнер Amazon я зарабатываю на соответствующих покупках.

Введение в художественные техники

Как рисовать с фотореализмом

Секреты реалистичного рисования

Курс рисования

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

Бесплатный курс спиртовых маркеров

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

Пошаговые руководства

Учебники по рисованию

Учебники по рисованию

Учебники по раскрашиванию

CSS Grid Layout

❮ Предыдущая
Следующий ❯

Основной

Правый

Попробуй сам »

Grid Layout

Модуль CSS Grid Layout предлагает систему компоновки на основе сетки со строками и
столбцы, что упрощает разработку веб-страниц без использования плавающих элементов и
позиционирование.

Поддержка браузера

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

Элементы сетки

Макет сетки состоит из родительского элемента с одним или несколькими дочерними элементами.

Пример

<дел >
  <дел>1
  <дел >2