Создание шаблона сайта. Делаем заготовку в Photoshop

ngcms ninjah бложек / 11 апреля 2011

Создаем новый файл, задаем ему размер: по ширине 1280, по высоте 1600

Т.к. за стандартный размер принимает 1024, то оставшееся место может нам пригодиться для фонового рисунка или для имитации резинового блока (100%)

По высоте, каждый проект уникальный. Это я к тому, что нам может понадобиться сделать портал или сайт визитку. Вы понимаете, что шаблон для портала по высоте будет на много длиннее, чем визитка, т.к. надо будет отобразить несколько постов, всевозможные блоки ну и т.д. Поэтому я делаю заготовку по высоте от 1500 – 2000, если будет лишнее, то просто кропну в ФШ.
Ну вот у нас получается, вот такая картина

Дальше создаем группу, называем ее setka и добавляем в нее новый слой.
Не ленитесь все делать аккуратно и все комментировать.

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

Нажимаем М, задаем фиксированный размер 1000-2000 и заливаем его любым цветом.
Теперь выравниваем наш слой с главной частью по центру. Для этого выбираем (зажав shift) наш слой и слой с бэкгаундом, нажимаем V и далее как на рисунке
Итак мы сделали основную часть нашей будущей сетки и выровняли ее по центру.

Теперь займемся колонками. Я делю макет на 4 части. Делим нашу 1000 на 4, получаем, что каждая колонка будет по 250.
Приступаем, создаем новый слой, нажимаем M, выбираем фиксированый размер, задаем его в 250 2000 и клацаем по нашей основной части. Заливаем другим цветом.

Вот, что у вас должно получиться.

Выравниваем наш слой с колонкой с основной частью. Включаем вспомогательные rulers (Ctrl+R) и устанавливаем их по краям нашей колонки.

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

Создаем новый слой, поверх слоя с колонкой. Зажимаем ctrl кликаем по слою с колонкой, чтобы появилось выделение по его контуру. Дальше заходите Select / Modify /Contract и укажите, что надо ужать выделение на 10. Полученное, ужатое выделение заливайте другим цветом.

И ставим по краям rulres.

Должно получиться вот так.

Дальше склеиваем два слоя с колонками в один (crtl+e) и копируем его (ctrl+j) и смещаем его вправо, чтобы он встал по правому краю первой колонки.

И снова выставляем rulers. Должно получиться вот так.
Далее копируем еще два раза, что бы у нас получилось 4 колонки с внутренними частями.


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

BACKGROUND – задник сайта. Возможно, фоное изображение или что угодно
TOP- логотипы, поиск, панель пользователя
LEFT-левая колонка
RIGHT-права колонка
MAINCONTENT- шапки и основная контентная часть сайта
PODVAL- счетчики, копирайты и т.д.
Сохраняем файл и называем его my_1000.psd

Если вы поняли сам принцип, то по анологии создайте себе такие заготовки для основных типов сайтов, которые вам чаще всего приходиться делать.