Создание шаблона сайта. Делаем заготовку в Photoshop
Создаем новый файл, задаем ему размер: по ширине 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
Если вы поняли сам принцип, то по анологии создайте себе такие заготовки для основных типов сайтов, которые вам чаще всего приходиться делать.


- Игорь Пресняков лучший гитарист в мире
- Самые ожидаемые фильмы 2012
- Босс школоло задротов?
- Бездомный Mustard поет Radiohead- Creep
- Учусь рисовать 1
- Next Generation CMS шаблон- Пого Ин Того 2. версия 0.9.3
- Перегрузки 18+
- Список лучший сайтов с бесплатными шрифтами
- Список лучших бесплатных фотостоков
- Как это было
- Next Generation CMS- Новый дизайн сайта
- Британская журналистка Лиззи Фелан о войне в Ливии (видео)
- Филиппинский художник, иллюстратор RUA
- Русский спецназовец в Ливии
- Отличная реклама новых зомби карт для CoD: BlackOps
- А вы хотите сделать свой дизайн сайта лучше? (Часть 2)
- А вы хотите сделать свой дизайн сайта лучше?
- Европейские бродяги- фотограф Ли Джефрис
- Альбиносы
- Антон Семенов (Gloom82)- МЕГА художник

Ooooops
Looks like Twitter's feed isn't working at the moment.


- Создание шаблона сайта. Делаем заготовку в Photoshop
- Шаблон для Next Generation CMS - Вася Химик
- Игорь Пресняков лучший гитарист в мире
- Самые ожидаемые фильмы 2012
- PSD Сетка для создания шаблона сайта
- Огромная коллекция шрифтов на Фонтов.нет
- Антон Семенов (Gloom82)- МЕГА художник
- Next Generation CMS- Новый дизайн сайта
- Next Generation CMS шаблон- Пого Ин Того 2. версия 0.9.3
- Список лучший сайтов с бесплатными шрифтами
- Перегрузки 18+
- Список лучших бесплатных фотостоков
- Zadrot. Бесплатный шаблон для ngcms
- Мистер Пачебайло- шаблон для NextGenerationCMS (ngcms)
- Рекорды Гинеса (часть 2)
- Шаблон для ngcms - Мистер Пачебайло (Pink)
- Филиппинский художник, иллюстратор RUA
- Пого Ин Того (Blue). NextGeneration CMS шаблон
- Аgapov - ngcms шаблон
- Альбиносы


