Ровная верстка без «на глаз»: выравнивание, сетка, направляющие и привязка
Чтобы объекты стояли ровно, включите сетку/направляющие, активируйте привязку (snap) и используйте Align/Distribute, а не ручное перетаскивание. Ниже — универсальный порядок действий и быстрые шаги для популярных программ.
Оглавление
- Что именно нужно: Align, Distribute и Snap
- Универсальный алгоритм аккуратной раскладки
- Где включить сетку и направляющие (шпаргалка)
- Figma: layout grid, tidy up и авто-отступы
- Photoshop: сетка, направляющие и «умные» подсказки
- Illustrator: привязка и выравнивание по ключевому объекту
- InDesign: направляющие, document/baseline grid и Align
- PowerPoint: guides/gridlines и distribute
- Частые ошибки
- FAQ
Что именно нужно: Align, Distribute и Snap
- Align (Выровнять) — поставить объекты по краю или по центру (лево/право/верх/низ/центр).
- Distribute (Распределить) — сделать равные промежутки между объектами.
- Snap (Привязка) — чтобы элементы «липли» к сетке, направляющим, краям и центрам других объектов (и не уезжали на 1–2 px).
Почти всегда правильный порядок такой: включили сетку/направляющие → включили привязку → выставили крайние элементы → Distribute/Align для остальных.
Универсальный алгоритм аккуратной раскладки
- Включите линейки (если есть) и задайте базовые ориентиры: поля, центр, колонки.
- Включите сетку (регулярная структура) и добавьте направляющие (точные ориентиры).
- Включите привязку (Snap) к сетке/направляющим/объектам.
- Выравнивайте через Align, а не «на глаз».
- Делайте равные отступы через Distribute (или аналог вроде Tidy up).
- Проверьте на 100% масштабе: нет ли случайных сдвигов на пиксель.
Где включить сетку и направляющие (шпаргалка)
Быстро: что искать в меню
| Программа | Сетка | Направляющие | Выравнивание/интервалы |
|---|---|---|---|
| Figma | Layout grid внутри Frame | Направляющие/привязки внутри фрейма | Align, Distribute, Tidy up |
| Photoshop | View/Просмотр → Grid | View/Просмотр → Rulers + Guides | Панель выравнивания/инструменты |
| Illustrator | View → Show Grid | Rulers + Guides | Window → Align (+ Distribute) |
| InDesign | Document/Baseline grid | Ruler Guides | Align panel |
| PowerPoint | View → Gridlines | View → Guides | Format → Align + Distribute |
Figma: layout grid, tidy up и авто-отступы
- Сетка под макет: выделите Frame → в правой панели добавьте Layout grid (Grid/Columns/Rows).
- Выравнивание: выделите объекты → используйте кнопки Align (по краям/центру).
- Равные интервалы: для 3+ элементов используйте Tidy up или Distribute spacing.
- Если это UI-блоки, быстрее и стабильнее собрать их в Auto Layout — тогда отступы и промежутки задаются числом и не «плывут».
Photoshop: сетка, направляющие и «умные» подсказки
- Включите Rulers/Линейки и перетащите направляющую с линейки на холст (или создайте направляющую по точному значению).
- Включите Grid/Сетку и при необходимости настройте шаг сетки в параметрах.
- Включите Smart Guides/Интеллектуальные направляющие — они помогают ловить центры, края и равные расстояния при перетаскивании.
Если сетка/направляющие «пропали», часто виноват общий переключатель показа вспомогательных элементов (не печатаемых). Проверьте, что он включён.
Illustrator: привязка и выравнивание по ключевому объекту
- Включите Grid и при необходимости Snap to Grid (привязку к сетке).
- Включите Guides/Направляющие и Smart Guides для подсказок по центрам/пересечениям.
- Откройте панель Align и используйте:
- Align для выравнивания,
- Distribute для равных промежутков.
- Если нельзя сдвигать «главный» элемент, включите режим ключевого объекта (выравнивание относительно выбранного ключевого).
InDesign: направляющие, document/baseline grid и Align
- Используйте Ruler Guides (направляющие из линейки) и включите привязку к ним.
- Для верстки объектов включайте Document Grid, для аккуратного текста — Baseline Grid (чтобы строки в колонках совпадали).
- В панели Align выберите, относительно чего выравнивать: выделение / страница / разворот / поля, и только потом нажимайте Align/Distribute.
PowerPoint: guides/gridlines и distribute
- Включите Guides (направляющие) и Gridlines (сетку) во вкладке Вид.
- Выделите несколько объектов → Align (лево/центр/право; верх/середина/низ).
- Для одинаковых отступов используйте Distribute horizontally/vertically.
- Если объекты слишком «липнут», временно ослабьте привязку (или отключите её в настройках сетки и направляющих).
Частые ошибки
- Выравнивают по одному объекту «на глаз», вместо Align/Distribute — получаются разные отступы.
- Жмут Distribute до того, как выставили крайние элементы: распределение обычно «держит» края, а середину перестраивает.
- Смешивают разные контейнеры (группы/фреймы/слайды): выравнивание идёт относительно неожиданной области.
- Работают без привязки и ловят «полпикселя», особенно при масштабах не 100%.
FAQ
Как сделать одинаковые отступы между карточками/иконками?
Выставьте крайние элементы, затем примените Distribute (или Tidy up в Figma). Для повторяющихся блоков лучше Auto Layout (Figma) или равные интервалы через панель Align (другие редакторы).
Почему кажется, что объекты кривые, хотя координаты ровные?
На некоторых масштабах (например, 66,7%) отображение может «шуметь». Проверьте на 100% и убедитесь, что элементы стоят на целых пикселях (для экранной графики).
Что лучше: сетка или направляющие?
Сетка — для регулярной структуры (шаг, колонки), направляющие — для точных линий (поля, оси, базовые выравнивания). В идеале используйте оба инструмента вместе.