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

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

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