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

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

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

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

Инструкция

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