Как нарисовать сайт?

В создании веб-сайта очень важен этап отрисовки дизайна страниц, который впоследствии будет сверстан и опубликован в сети. В этой статье вы узнаете, как при помощи Adobe Photoshop нарисовать грамотный макет для сайта, на основе которого вы впоследствии сможете формировать более сложные макеты.
Создать сайт самостоятельно с Wix.com

Вам понадобится

• - программа Adobe Photoshop

Инструкция

Создайте в Фотошопе новый файл (Ctrl+N) с размерами 1040х1400, где 1400 – это высота. Включите отображение линеек (Ctrl+R) и установите в настройках линейки пиксели как единицы измерения.

Начните вытягивать направляющие так, чтобы они соответствовали границам блоков макета. Боковые границы растяните так, чтобы до краев осталось 40 пикселей. Верхние и нижние границы также должны оставлять по 40 пикселей с каждой стороны до границ фона.

Затем выделите направляющую, которая составит ширину верхней шапки – 200 пикселей вниз от верхней границы фона.

Чтобы сформировать сайдбары слева и справа макета, установите направляющие на 240 пикселей от границы фона слева, и на 800 справа.

Отступите по 5 пикселей внутрь от левого и правого сайдбара и проведите еще две вертикальных направляющих. Затем проведите еще две направляющих на 245 пикселей слева и на 795 справа.

Теперь отмерьте от границы шапки 30 пикселей и проведите горизонтальную направляющую для горизонтального меню.

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

Выберите инструмент заливки и залейте область нейтральным светло-серым цветом. Нажмите в меню «Выделение-Модификация-Сжатие», укажите параметр в 1 пиксель и нажмите «ОК». Залейте область более светлым оттенком серого – у вас появится рамка меню.

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

Вставьте на новом слое в шапку изображение, разместив его с левого края. Правее изображения впишите с помощью любого шрифта текстовый заголовок сайта.

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

То же самое сделайте с центральным широким блоком контента. Скопируйте слой с левым сайдбаром и поместите его в качестве правого сайдбара.

Добавьте текст на свой макет – выберите нейтральный шрифт и впишите заголовки меню, примеры новостей, фотографии, раздел тегов и ссылок.

Закончите оформление макета созданием «подвала» или футера – пропишите там копирайты и свои контакты.

Оцените статью!