Как наложить сетку на дизайн сайта?

Question

[freeman0204]

Нашел вот такую картинку

как я понимаю это 12 колонная сетка наложенная на дизайн сайта.

Вот еще один дизайн скачанный,

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

Так же как разделить колонки, указал на скриншоте, задать 6 или 7 колонок заголовку? там буква "Е" заходит на начало 7 колонки. То же касается остальных подобных случаев.

И что делать если дизайн без подобной сетки? У кого то было такое на практике? Может есть шаблон 12 колонной сетки который накладывается на дизайн сайта, если таковой сетки нет?

Получается даже если в сайте 12 колонок, но могут отличаться отступы между ними и ширина колонок в зависимости от разрешения, например 960px или 1200px, и нужно каждый раз новая сетка? Может есть генератор? Полностью готовые сетки не предлагайте, я пока учусь свои создавать.

Answer 1

[Pavel Designer]

1. Выше указали плагин для Фотошопа, расставляющий сетку.
2. Вообще, я эту сетку расставлял сам за пару минут. Выставить в настройках Фотошопа сетку (настройки этой сетки Edit - Preferences - Guides, grid and slices, а сама сетка включается по Ctrl +') по 8рх (это значение для удобства, ну и просто я люблю делать именно так под 960; можно посчитать другие значения исходя из целей) и делишь направляющими на нужное количество колонок (6, 8, 12 и т.п.) кратное модулю в 8рх. Потом рисуешь вертикальные полупрозрачные прямоугольники и расставляешь как надо. Все, сетка готова.
Соответственно, для другой ширины окна придется делать новый макет с новой шириной колонок (если подразумевается изменение их ширины). На моей практике для верстальщика достаточно макета под минимальную и под максимальную ширину. Дальше он сам.

Готовые не предлагать, но я на всякий случай оставлю это здесь:
3.Если лень настраивать самому, то гуглите "XXX grid psd", где ХХХ — это ширина макета и/или указание других особенностей (например, бутстрап).
Пример запроса
4. Сайты типа 960.gs на которых готовая сетка под ширину 960рх. На главной можно просто скачать готовые шаблоны с нанесенной сеткой. Собственно, по запросу в поисковике можно скачать такие же шаблоны под разную ширину макета.

Comments

[freeman0204]

Спасибо всем за информацию. Хочу под итожить. (немного запутался)
- сетка на дизайне это работа дизайнера?
- на данный момент все шаблоны (бесплатные) которые я скачал с интернета, у них были Guides как на второй картинке. В таком случаи мне не нужно скачивать сетку "XXX grid psd" так как она уже есть? Если ее нету я ищу "XXX grid psd" и подставляю в макет, но нюанс в том, если ее изначально нет, значит и дизайн был сделан непонятно как и сетка вряд ли подойдет тогда? (это по поводу визуальной сетки)
- по поводу самого кода. Так как ширина колонок и расстояния разные, скорее всего нужно писать код сетки почти всегда новый, неплохо было бы генерировать сетку, я зашел на 1200px.com выставил параметры и нажал скачать Variable CSS Fluid вот что выдает screenshot.ru/2f0331d444351d1420101a7d619f1aea что это может быть?
- На счет отступов слева и справа я понял что они предусмотрены, получается есть ширина сетки, а отступы это margin по сторонам которые доплюсовуются до ширины макета?

Моя понять как правильно верстать, раньше верстал на глаз, но если использовать сетку и знать расстояния отступов и т.д. то это получается просто перенос psd в html. Этого я и хочу добиться. Что бы не выдумывать отступов и размеров которых нет в макете.

[Pavel Designer]

Артур Черешнюк: 1. Изначально сетка создавалась всегда вручную, потом появились плагины и автоматические сервисы. Как было сделано в каждом конкретном скаченном шаблоне известно одному автору шаблона))
2. Оба варианта на скриншоте это сетки, просто в одном варианте показаны только окрашеные столбцы, а во втором направляющие. Не исключено что в первом макете можно включить напрявляющие, а на втором в одном из слоев есть дополнительно столбцы (не раз встречал такое, да и сам использую оба варианта). Если нужны именно сетки без дизайна, то просто гуглите конкретно их. Если же нужен дизайн с сеткой, то тут уже как повезет (предположу что в платных шаблонах сетка есть гарантированно).
3. Сервис сломали) У меня тоже самое выдает, благо подобных есть немало и можно попробовать другой.
4. Макет в ширину имеет Н колонок, у каждой из них есть отступы У (т.е. расстояние между колонками получается 2*У). Чтобы контент не прилипал друг к другу в соседних колонках. Собственно, колонка это модульная единица и контент на странице располагается исходя из этого. Важно понимать что сначала располагается контент красиво и понятно, а уже потом ищется решение для сетки. Хотя чаще дизайнер сначала рисует сетку, а потом пытается впихнуть в нее контент))

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

[freeman0204]

Pavel Designer: Понятно) Вот еще попытался разобраться. Нашел такой сайт app.responsify.it создал стандартную сетку 12 колонок и отступы между ними 1.5 (как я понимаю это em?) screenshot.ru/b0182971f7836f04134603ae31aa8de1 . Подставил на свой дизайн. Вот что получилось: screenshot.ru/94281d61d6212e5c989b8b98c2dfb033 вроде бы подходит и ширина получается 960px как обычно и делают. Вот картинка без направляющих screenshot.ru/6504c88865f93904ae996bd95ddf192c теперь все более ясно и можно работать!) Но что беспокоит Фон и картинка растягивается на всю ширину браузера как я понимаю. Как мне зделать так что бы контент был 960px но тянулся (резинился) к меньшему, а фон изначально и картинка, была изначально растянута на весь экран? Я знаком с max-width: 100%; height: auto; но не не пойму как применить.

[Pavel Designer]

Артур Черешнюк: Насчет верстки не скажу, я же только дизайнер) Беглый поиск выдал вот это habrahabr.ru/post/148427
Оно?

[freeman0204]

Pavel Designer: Не совсем но будет полезно, спасибо)

Answer 2

[Алексей Начаров]

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

Сетки отличаются конечно и по числу колонок и по величине этих колонок, отупов между ними.

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