Як намалювати сайт
Відео: Малюємо сайт в Photoshop. Урок 0 - Налаштування
У створенні веб-сайту дуже важливий етап відтворення дизайну сторінок, який згодом буде зверстаний і опублікований в мережі. У цій статті ви дізнаєтеся, як за допомогою Adobe Photoshop намалювати грамотний макет для сайту, на основі якого ви згодом зможете формувати більш складні макети.
Створіть в Фотошопі новий файл (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
Закінчите оформлення макета створенням «підвалу» або футера - пропишіть там авторські права і свої контакти.
Поділися в соціальних мережах:
Схожі
- Як прибрати задній фон у відео
- Як намалювати сльозу в фотошопі
- Як у фотошопі поставити фон
- Як зробити фотографію більш чіткої
- Як у фотошопі вирізати печатку
- Як зробити макет сайту
- Як намалювати дим в фотошопі
- Як зробити картинку фоном для сайту
- Як розібрати шари в photoshop
- Як обробити край в photoshop
- Як створити графічну електронний підпис
- Як створити шаблон psd
- Як поміняти шапку сайту
- Як намалювати графічний нік
- Як намалювати воду в фотошопі
- Як у фотошопі замінити текст
- Як задати прозорість
- Як закріпити шари в фотошопі
- Як відобразити зображення в фотошопі
- Як зробити рамку на аватарку
- Як намалювати скло в photoshop