Як намалювати кнопки для сайту. Як намалювати дизайн сайту.

Зручний інтерфейс, відмінно промальована графіка, правильне розташування елементів на сторінці - половина успіху сайту у відвідувача. Малювання кнопок для сайту - невелика, але важлива частина роботи над онлайн-проектом.
Інструкція
1
Спробуйте намалювати круглу кнопку. Наведений нижче спосіб універсальний і для створення логотипів, аватарок. Малювати її не складно, незважаючи на кількість дій, яке вам доведеться зробити.
2
Відкрийте програму Adobe Photoshop. Створіть новий документ, натиснувши комбінацію «Ctrl + N». Параметри зображення 300 * 300, дозвіл 72 пікселя/дюйм. Фон і колірної режим за замовчуванням білий і RGB відповідно.
3
Найкраще малювати векторами, щоб при зменшенні кнопки не погіршився її якість. Виберіть інструмент «Овал», затисніть Shift і від центру намалюйте коло.
4
Тепер до одержали колі застосуєте кілька ефектів. Пройдіть в меню «Шари» - «Стиль шару» - «Параметри накладання». Тут потрібно буде накласти градієнт.
5
Далі тут же поставте галочку навпроти «Тиснення», щоб надати кнопці необхідну опуклість, і встановіть наступні параметри: стиль - обвідним тиснення, метод - м'яка огранювання, глибина - 220%, розмір - 1 піксель, пом'якшення - 5 пікселів , кут - 135о без глобального освітлення, висота - 32, режим підсвічування - нормальний з непрозорістю 30%, режим тіні - множення з непрозорістю 25%
6
Для додання ще більшого обсягу тут же в параметрах накладення поставте галочку на «Тінь» і встановіть наступні параметри: режим накладення - множення, прозорість - 40%, кут - 125о з використанням глобального освітлення, зміщення - 5 пікселів, розмір - 20 пікселів.
7
Результатом проведених дій стане таке зображення, як показано на малюнку.
8
Тепер створіть новий шар, знову виберіть «Овал» і намалюйте коло меншого радіуса, ніж перша фігура. Відкрийте «Параметри накладання», поставте галочку навпроти «Внутрішня тінь» і встановіть параметри: режим накладення - м'яке світло, кут - 125о, зміщення - 0 пікселів, стягання - 45%, Розмір - 21 піксель.
9
Далі тут же в параметрах накладення відзначте «Накладення градієнта» і створіть градієнт з параметрами як на картинці. Натисніть ОК
10
Далі встановіть стиль накладення - радіальний, масштаб - 124%
11
Тепер поставте галочку напроти пункту «Обведення» і задайте такі параметри: розмір - 5 пікселів, положення - зовні, режим накладення - нормальний, непрозорість - 100%, тип обведення - градієнт.
12
У підсумку цих дій повинне вийти щось, вже більш схоже на кнопку. Ви можете знову відкрити параметри накладення і поекспериментувати з ними.
13
Тепер потрібно додати кнопки відблисків, щоб кнопка знайшла скляну фактуру. Для цього знову створіть новий шар, виберіть інструмент «Овальний виділення», створіть овал над кнопкою і залийте його білим за допомогою інструменту «Заливка». Затисніть Ctrl, клікніть на шар з кольоровим кругом, інвертуйте виділення («Виділення» - «Інверсія»). Тепер тисніть Delete. Овал повинен обрізатися по периметру круга.
14
На панелі шарів змініть параметр «Звичайна» на «М'яке світло», потім натисніть на значок векторної маски і виберіть інструмент «Заливка» - «Градієнт». Залийте відблиск знизу вгору. Кнопка майже готова.
15
Можна на кнопку додати напис. До неї також можна застосувати ефекти накладення, такі як внутрішнє, зовнішнє світіння, градієнт і так далі. Не бійтеся експериментів, чим більше фантазії ви докладаєте в роботі, тим швидше освоїте як сам редактор, так і веб-дизайн.
Зверніть увагу
Як намалювати макет сайту. Приступимо до малювання макету майбутнього сайту. Буду малювати звичайно нескладний макет, так сказати theme framework - мінімальний дизайн, але за допомогою якого можна зробити цілком пристойний і насичений дизайн сайту.
Корисна порада
Як намалювати макет для сайту в Photoshop. Перш ніж приступити до роботи, потрібно визначитися зі структурою.
У створенні веб-сайту дуже важливий етап отрисовки дизайну сторінок, який згодом буде зверстано і опублікований в мережі. У цій статті ви дізнаєтеся, як за допомогою 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
Закончите оформлення макета створенням «підвалу» або футера - пропишіть там копірайти і свої контакти.