Вам понадобится
  • - программа Adobe Photoshop
Инструкция
1
Создайте в Фотошопе новый файл (Ctrl+N) с размерами 1040х1400, где 1400 – это высота. Включите отображение линеек (Ctrl+R) и установите в настройках линейки пиксели как единицы измерения.
2
Начните вытягивать направляющие так, чтобы они соответствовали границам блоков макета. Боковые границы растяните так, чтобы до краев осталось 40 пикселей. Верхние и нижние границы также должны оставлять по 40 пикселей с каждой стороны до границ фона.
3
Затем выделите направляющую, которая составит ширину верхней шапки – 200 пикселей вниз от верхней границы фона.
4
Чтобы сформировать сайдбары слева и справа макета, установите направляющие на 240 пикселей от границы фона слева, и на 800 справа.
5
Отступите по 5 пикселей внутрь от левого и правого сайдбара и проведите еще две вертикальных направляющих. Затем проведите еще две направляющих на 245 пикселей слева и на 795 справа.
6
Теперь отмерьте от границы шапки 30 пикселей и проведите горизонтальную направляющую для горизонтального меню.
7
Выделите прямоугольным выделением с помощью клавиши М узкую область горизонтального меню, которую вы только что наметили. Выберите инструмент заливки и залейте область нейтральным светло-серым цветом.
8
Выберите инструмент заливки и залейте область нейтральным светло-серым цветом. Нажмите в меню «Выделение-Модификация-Сжатие», укажите параметр в 1 пиксель и нажмите «ОК». Залейте область более светлым оттенком серого – у вас появится рамка меню.
9
Создайте новый слой и выберите подходящее изображение для иконки или логотипа сайта, а затем откройте его.
10
Вставьте на новом слое в шапку изображение, разместив его с левого края. Правее изображения впишите с помощью любого шрифта текстовый заголовок сайта.
11
Блоки сайта оформляйте в той же цветовой гамме, что и только что созданная шапка. Выделите область левого сайдбара и проведите с ней те же операции по заливке двумя цветами, как с блоком меню.
12
То же самое сделайте с центральным широким блоком контента. Скопируйте слой с левым сайдбаром и поместите его в качестве правого сайдбара.
13
Добавьте текст на свой макет – выберите нейтральный шрифт и впишите заголовки меню, примеры новостей, фотографии, раздел тегов и ссылок.
14
Закончите оформление макета созданием «подвала» или футера – пропишите там копирайты и свои контакты.