Як намалювати сайт.

У створенні веб-сайту дуже важливий етап отрисовки дизайну сторінок, який згодом буде зверстано і опублікований в мережі. У цій статті ви дізнаєтеся, як за допомогою Adobe Photoshop намалювати грамотний макет для сайту, на основі якого ви згодом зможете формувати більш складні макети.
Вам знадобиться
  • - програма 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
Закончите оформлення макета створенням «підвалу» або футера - пропишіть там копірайти і свої контакти.