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

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

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-пиксельное смещение заголовка с учетом всех особенностей сглаживания, антиалиасинга и прочих ругательных слов практически невозможно. Это нужно воспринимать философски.

Резюме

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

Как сделать сетку в Photoshop

Как партнер Amazon, мы зарабатываем на соответствующих покупках.

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

Быстрая Навигация

• Пошаговое руководство о том, как сделать сетку в Photoshop
  • Создание сетки в Photoshop
  • Использование сетки по умолчанию в Photoshop
  • Настройка сетки по умолчанию в Photoshop
• Часто задаваемые вопросы
  • В чем разница между сеткой и направляющей?
  • Нужно ли отключать сетку перед печатью дизайна?
  • Что означает привязка и почему это важно при использовании сетки в Photoshop?
  • Как скрыть линии сетки в Photoshop?
  • Могу ли я заблокировать линии сетки в Photoshop?
  • Могу ли я изменить внешний вид моей сетки?
• Заключение

Пошаговое руководство о том, как сделать сетку в Photoshop

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

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

Создание сетки в Photoshop

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

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

Использование сетки по умолчанию в Photoshop

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

1. Запустите Photoshop, а затем открыть любое существующее изображение или создайте новый файл. Чтобы открыть файл, вы можете использовать любой из этих методов:

• Открыть прямо с главной страницы.
• Перейдите в меню «Файл» > «Открыть», а затем выберите файл, с которым вы хотите работать.
• Нажмите клавишу CTRL + O, а затем выберите файл, над которым хотите работать.

Чтобы создать новый файл, вы можете использовать любой из этих методов:

• Создавайте прямо с главной страницы.
• Перейдите в меню «Файл» > «Создать», а затем выберите нужные размеры для вашего файла.
• Нажмите клавишу CTRL + N и введите спецификации, необходимые для вашего проекта.

2. Как только ваш файл появится в интерфейсе Photoshop, перейдите в строку меню в верхней части интерфейса Photoshop.
3. В строке меню нажмите «Просмотр». Это откроет для вас раскрывающееся меню. Теперь из меню перейдите к «Показать», а затем нажмите «Сетка» в каскадном меню. Вы также можете использовать для этого сочетание клавиш. Нажмите клавиши CTRL + ‘ вместе, чтобы сделать ту же процедуру проще.

4. Теперь вы увидите, что сетка мгновенно появится в вашем рабочем пространстве Photoshop.

Настройка сетки по умолчанию в Photoshop

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

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

1. Запустите Photoshop и откройте существующее изображение, с которым вы хотите работать, или создайте новый файл.
2. Как только ваш файл появится в рабочей области Photoshop, перейдите в строку меню в верхней части интерфейса.
3. В строке меню нажмите «Изменить». Это откроет для вас раскрывающееся меню. Здесь перейдите в «Настройки»> «Направляющие, сетка и фрагменты».

4. Теперь вы увидите диалоговое окно.

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

• Найдите строку меню в верхней части интерфейса Photoshop.
• Перейдите в «Просмотр»> «Привязать», а затем нажмите «Сетка».

• Теперь объекты встанут на свое точное место в вашей сетке.

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

Часто задаваемые вопросы

В чем разница между сеткой и направляющей?

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

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

Нужно ли отключать сетку перед печатью дизайна?

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

Что означает привязка и почему это важно при использовании сетки в Photoshop?

Привязка — это функция Photoshop, которая помогает точно размещать объекты в вашем проекте. Когда вы включаете «Snap» при использовании сеток, линии сетки работают как магниты. Они тянут объект точно к его точному местоположению. Сетки помещают объект на место, как только вы двигаться вперед эта линия.

Как скрыть линии сетки в Photoshop?

Вы можете легко скрывать и отображать линии сетки в Photoshop. Если ваши линии сетки видны и вы хотите их скрыть, перейдите в «Просмотр»> «Показать»> «Сетка». Опция «Сетка» в этот момент будет отмечена галочкой. При нажатии на нее знак будет удален, а линии сетки спрятаны.

Могу ли я заблокировать линии сетки в Photoshop?

Да, вы можете легко заблокировать линии сетки в Photoshop. Если вы не хотите случайно переместить сетку с рабочего места, то лучше их заблокировать. Для этого откройте меню «Вид» и нажмите «Заблокировать направляющие». Вы также можете нажать ALT + CTRL +; сделать это.

Могу ли я изменить внешний вид моей сетки?

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

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

Заключение

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

Как сделать сетку в Illustrator?

Последнее обновление: 25 ноября 2022 г., 8:14

Illustrator — отличный инструмент для создания сеток, и есть несколько разных способов сделать это. Один из способов — использовать Инструмент «Прямоугольник» (М) и создать прямоугольник той же ширины и высоты, что и сетка, которую вы хотите создать. Вы можете указать ширину и высоту вашего прямоугольника в инструменте быстрого доступа Transform.

Затем щелкните значок опорной точки (A) на панели инструментов и перетащите прямоугольник так, чтобы он оказался в центре сетки. Или используйте инструмент «Выравнивание», чтобы выровнять прямоугольник по центру.

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

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

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

СОВЕТ ПРОФЕССИОНАЛА: При создании сетки в Illustrator важно сначала создать новый слой для работы. Это гарантирует, что ваши линии сетки не будут мешать другим элементам вашего дизайна. Чтобы создать новый слой, перейдите в меню «Слой» и выберите «Новый слой». Затем используйте инструмент «Отрезок линии» (расположенный под инструментом «Карандаш»), чтобы нарисовать горизонтальные и вертикальные линии в рабочей области. Чтобы ваши линии располагались равномерно, удерживайте нажатой клавишу «Shift» во время рисования. Наконец, используйте инструмент «Выбрать», чтобы выбрать все ваши линии, и перейдите в «Правка> Копировать». Теперь вы можете вставить свою сетку в любой другой слой в вашем документе.

Вы также можете использовать команду «Сетка» (G), чтобы создать линии сетки на прямоугольнике. Или перейдите в меню «Вид» и нажмите «Показать сетку». Вы также можете использовать команду «Привязать к сетке» (S), чтобы сохранить согласованность линий сетки. На правой панели также есть инструменты быстрого доступа, такие как «Линейка и сетки» и «Параметры привязки», чтобы мгновенно отображать или активировать линии сетки, привязку к сетке и команду «точка и пиксели».

При создании сетки в Illustrator важно помнить о разрешении вашего файла. Если сетка слишком маленькая, ее не будет видно, а если сетка слишком большая, она займет слишком много места. Вы можете настроить размер сетки, нажав кнопку «Сетка», а затем щелкнув отдельные линии сетки. Или перейдите в меню «Правка», найдите «Настройки» и нажмите «Направляющие и сетка».

Появится диалоговое окно, в котором вы можете настроить размер каждой ячейки сетки. Вы можете изменить разрешение, нажав кнопку «Масштаб» и выбрав большее значение. Нажмите «ОК», когда вы будете удовлетворены, и обратите внимание, как изменится ваша сетка.

Энтузиаст технологий и соучредитель Women Coders SF.

Пошаговое руководство по созданию сетки CSS

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

1. Настройка контейнера сетки и элементов сетки

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

Чтобы превратить элемент в контейнер сетки, нам нужно использовать либо display: grid; или дисплей : встроенная сетка; недвижимость. Первый приводит к сетке на уровне блоков, а второй — к сетке на встроенном уровне.

Базовую сетку CSS с тремя строками и тремя столбцами можно разметить с помощью следующего HTML-кода:

 

  
1.
  
2.
  
3.
  
4.
  
5.
  
6.
  
7.
  
8.
  
9.
 

В CSS мы используем display: grid; в элементе  .container , чтобы создать CSS-сетку на уровне блоков. Свойства grid-template-rows и grid-template-columns определяют количество и размер строк и столбцов в сетке.

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

 .контейнер {
  высота: 90вх;
  поля: 2re;
  отображение: сетка;
  столбцы сетки-шаблона: 1fr 1fr 1fr;
  строки шаблона сетки: 1fr 1fr 1fr;
}
.клетка {
  белый цвет;
  размер шрифта: 3rem;
  выравнивание текста: по центру;
  набивка: 4рем;
}
.cell-1 {
  фон: небесно-голубой;
}
.cell-2 {
  фон: оранжево-красный;
}
.cell-3 {
  фон: королевский синий;
}
.cell-4 {
  фон: золото;
}
.cell-5 {
  фон: сине-фиолетовый;
}
.cell-6 {
  фон: салатовый;
}
.cell-7 {
  фон: коралловый;
}
.cell-8 {
  фон: светло-зеленый;
}
.cell-9{
  фон: темно-бордовый;
} 

Вот как теперь наша сетка CSS выглядит в браузере:

Мы можем легко изменить как размер, так и расположение дорожек сетки, добавив новые значения в grid-template-columns и grid -template-rows свойства. Например:

 .container {
  столбцы сетки-шаблона: 2fr 1fr 1fr 200px;
  строки шаблона сетки: 1fr 1fr 1fr;
} 

Поскольку в измененной сетке 4 столбца вместо 3, . cell-9 div можно найти отдельно в третьей строке:

2. Добавить желоба

Свойство grid-gap является сокращением для grid-row-gap и grid-colum н- зазор . Мы можем использовать его, чтобы быстро добавить промежутки между дорожками сетки.

Вернемся к предыдущей сетке 3*3 и добавим промежуток в 10 пикселей между ячейками сетки. Мы можем добавить свойство grid-gap в контейнер сетки следующим образом:

 .container {
  зазор сетки: 10px 10px;
} 

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

3. Позиция ячеек сетки

Мы можем указать размер и расположение отдельных ячеек сетки, используя сетку . свойства row и grid-column . Нам нужно добавить эти два свойства к ячейкам сетки, которые мы хотим расположить.

Сначала рассмотрим простой случай. Допустим, мы хотим переместить ячейку 1 во вторую строку и третий столбец сетки (в текущее место ячейки 6). Для этого нам просто нужно добавить следующие два правила CSS в .ячейка-1 :

 .ячейка-1 {
  сетка-ряд: 2;
  сетка-столбец: 3;
} 

Как вы можете видеть ниже, ячейка 1 была перемещена в то место, на которое мы нацелились, а остальные ячейки продолжают следовать порядку по умолчанию:

4. Размер ячеек сетки

Мы не можем использовать только grid-row и grid-column , чтобы изменить порядок ячеек, но они также позволяют нам изменять их размер. На самом деле, оба они сокращенные. 9Свойство 0052 grid-row является сокращением для grid-row-start и grid-row-end , тогда как grid-column состоит из grid-column-start и grid-column-end характеристики.

Допустим, мы хотим, чтобы ячейка 1 занимала первую строку. Мы можем реализовать макет, добавив следующие правила стиля:

 .cell-1 {
  сетка-ряд: 1;
  сетка-столбец: 1/4;
} 

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

Свойство grid-row работает так же, как grid-column . Допустим, мы хотим реализовать более сложный макет и иметь основную область содержимого рядом с заголовком (ячейка 1). Например, мы можем распределить ячейку 2 по первому и второму столбцам, а также по второй и третьей строкам, используя следующий код:

 .cell-2 {
  сетка-ряд: 2/4;
  сетка-столбец: 1/3;
} 

Расширенная область основного контента уже готова в браузере:

5. Определение именованных областей сетки

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

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

HTML очень похож на предыдущий пример. Мы просто укладываем ячейки друг на друга. Однако, ради доступности, здесь мы используем семантические теги HTML: header , main , side , footer .

 <дел>
  
Заголовок
  
  
Основное содержание
  
  
 

В CSS нам нужно использовать два новых свойства: grid-template-areas для контейнера сетки и grid-area для каждой отдельной области сетки отдельно.

Во-первых, давайте воспользуемся свойством grid-area для ячеек сетки и дадим каждой из них отдельное имя. В примере мы используем имена «header», «left», «main», «right» и «footer», но вместо этого вы можете использовать любые другие.

Затем мы можем добавить свойство grid-template-areas в контейнер сетки. Это действительно удобное свойство, так как оно позволяет нам визуально упорядочивать ячейки сетки. В нашем примере мы хотим, чтобы основная область содержимого была в два раза шире одной боковой панели. Итак, мы указываем один столбец для левой боковой панели, один столбец для основной области и один для правой боковой панели.

Поскольку мы хотим, чтобы верхний и нижний колонтитулы занимали весь экран, мы указываем три-три столбца сетки для каждого. Мы устанавливаем ширину и высоту строк и столбцов с помощью свойств grid-template-rows и grid-template-columns , как и раньше:

 .container {
   высота: 90вх;
   ширина: 90vw;
   запас: 2рем авто;
   отображение: сетка;
   grid-template-areas: "заголовок заголовка заголовка"
                        "левая главная правая"
                        "нижний колонтитул нижний колонтитул";
   строки шаблона сетки: 1fr 3fr 1fr;
   столбцы сетки-шаблона: 1fr 2fr 1fr;
}
.cell-1 {
   фон: небесно-голубой;
   область сетки: заголовок;
}
. cell-2 {
   фон: оранжево-красный;
   область сетки: слева;
}
.cell-3 {
   фон: салатовый;
   область сетки: основная;
}
.cell-4 {
   фон: золото;
   область сетки: правая;
}
.cell-5 {
   фон: сине-фиолетовый;
   область сетки: нижний колонтитул;
}
.клетка {
   белый цвет;
   размер шрифта: 2.5rem;
   выравнивание текста: по центру;
   набивка: 4рем;
} 

Как вы можете видеть на скриншоте ниже, свойства grid-template-areas и grid-area автоматически сгенерировали сетку, которую мы хотели создать:

6. Создайте вложенные сетки

макет применяется только к прямым дочерним элементам контейнера сетки, потомки более низкого уровня не будут элементами сетки. Однако во многих случаях мы можем захотеть, чтобы эти элементы также были ячейками сетки. К счастью, модуль CSS Grid Layout Module позволяет элементам сетки также быть контейнерами сетки. Вложенные сетки работают по тем же правилам, что и автономные.

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

 

   
Заголовок
   
   
Основное содержание
   
   <нижний колонтитул>
       
Нижний колонтитул 1
       
Нижний колонтитул 2
       
Нижний колонтитул 3
       
Нижний колонтитул 4
   
  

В CSS добавляем display: grid; на .cell-5 и установите ширину столбцов и промежутки между столбцами, используя свойства grid-template-columns и grid-column-gap :

 .cell-5 {
   отображение: сетка;
   столбцы сетки-шаблона: 1fr 1fr 1fr 1fr;
   сетка-столбец-зазор: 1rem;
}
.ячейка-5 .ячейка {
   цвет фона: коралловый;
} 

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

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