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

МИ У СОЦМЕРЕЖАХ -

У створенні веб-сайту дуже важливий етап відтворення дизайну сторінок, який згодом буде зверстаний і опублікований в мережі. У цій статті ви дізнаєтеся, як за допомогою Adobe Photoshop намалювати грамотний макет для сайту, на основі якого ви згодом зможете формувати більш складні макети.

Створіть в Фотошопі новий файл (Ctrl + N) з розмірами 1040х1400, де 1400 - це висота. Увімкніть відображення лінійок (Ctrl + R) і встановіть в налаштуваннях лінійки пікселі як одиниці виміру.

Почніть витягати напрямні так, щоб вони відповідали кордонів блоків макета. Бічні межі розтягніть так, щоб до країв залишилося 40 пікселів. Верхні і нижні межі також повинні залишати по 40 пікселів з кожного боку до кордонів фону.

Потім виділіть напрямну, яка складе ширину верхньої шапки - 200 пікселів вниз від верхньої межі фону.

Щоб сформувати сайдбарі ліворуч і праворуч макета, встановіть напрямні на 240 пікселів від кордону фону зліва, і на 800 справа.

Відступите по 5 пікселів всередину від лівого та правого сайдбара і проведіть ще дві вертикальних напрямних. Потім проведіть ще дві напрямних на 245 пікселів зліва і на 795 справа.

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

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

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

Створіть новий шар і виберіть відповідне зображення для іконки або логотипу сайту, а потім відкрийте його.

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

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

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

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

Закінчите оформлення макета створенням «підвалу» або футера - пропишіть там авторські права і свої контакти.

Увага, тільки СЬОГОДНІ!