Сергей Ткач

Работы Сергея Ткача:

Сергей Ткач

10-пиксельная сетка

Существует такая дизайнерская технология — «8pt grid». Идея в том, чтобы сделать ширину, высоту и все отступы в блоках кратными восьми. То есть не может быть, например, поля ввода высотой 30 пикселей, оно должно равняться 24 или 32 пикселям. Не может между блоками быть 10 пикселей отступа, но может быть 8 или 16.

Кроме того, система хорошо подходит для работы со всеми распространенными сегодня размерами экранов:

И так далее.

Система «8pt grid» вносит четкий порядок в макет, упрощая работу верстальщику, который знает, что не может быть отступа меньше 8 пикселей.

Вот как выглядит фрагмент макета, выполненного по технологии «8pt grid»:

Однако у «8pt grid» есть и недостатки:

10-пиксельная сетка

Представляю технологию «10-пиксельная сетка». По сути это та же «8pt grid», но минимальный отступ равен не 8, а 10 пикселям. И вот что это меняет:

Но есть и недостатки:

Как использовать 10-пиксельную сетку в Фотошопе?

Для начала в настройках Фотошопа установим следующие значения:

Затем включим привязку к сетке:

Далее для всех тестовых блоков настроим межстрочный интервал, кратный десяти:

Всё. Теперь все блоки в макете, даже если они не видимы, равняем по 10-пиксельной сетке, а все тексты ставим на сетку их базовой линией, что автоматически реализует вертикальный ритм вместе с 10-пиксельной сеткой. Одним выстрелом — двух зайцев. Вот как это выглядит у меня:

А вот макет целиком. Правда чистенький?

Дополнительно

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

«Картинка с вертикальным ритмом»

Просто сказка