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

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

Інструкція

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

Відкрийте програму Adobe Photoshop. Створіть новий документ, натиснувши комбінацію «Ctrl + N». Параметри зображення 300 * 300, дозвіл 72 пікселя / дюйм. Фон і колірної режим за замовчуванням білий і RGB відповідно.

Найкраще малювати векторами, щоб при зменшенні кнопки не погіршився її якість. Виберіть інструмент «Овал», затисніть Shift і від центру намалюйте коло.

Тепер до одержали колі застосуєте кілька ефектів. Пройдіть в меню «Шари» - «Стиль шару» - «Параметри накладання». Тут потрібно буде накласти градієнт.

Далі тут же поставте галочку навпроти «Тиснення», щоб надати кнопці необхідну опуклість, і встановіть наступні параметри: стиль - обвідним тиснення, метод - м'яка ограновування, глибина - 220%, розмір - 1 піксель, пом'якшення - 5 пікселів, кут - 135о без глобального освітлення, висота - 32, режим підсвічування - нормальний з непрозорістю 30%, режим тіні - множення з непрозорістю 25%

Для додання ще більшого обсягу тут же в параметрах накладення поставте галочку на «Тінь» і встановіть наступні параметри: режим накладення - множення, прозорість - 40%, кут - 125о з використанням глобального освітлення, зсув - 5 пікселів, розмір - 20 пікселів.

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

Тепер створіть новий шар, знову виберіть «Овал» і намалюйте коло меншого радіусу, ніж перша фігура. Відкрийте «Параметри накладання», поставте галочку навпроти «Внутрішня тінь» і встановіть параметри: режим накладення - м'яке світло, кут - 125о, зсув - 0 пікселів, стягання - 45%, Розмір - 21 піксель.

Далі тут же в параметрах накладення відзначте «Накладення градієнта» і створіть градієнт з параметрами як на картинці. Натисніть ОК

Далі встановіть стиль накладення - радіальний, масштаб - 124%

Тепер поставте галочку напроти пункту «Обведення» і задайте такі параметри: розмір - 5 пікселів, положення - зовні, режим накладення - нормальний, непрозорість - 100%, тип обведення - градієнт.

У підсумку цих дій має вийти щось, вже більше схоже на кнопку. Ви можете знову відкрити параметри накладання і поекспериментувати з ними.

Тепер потрібно додати кнопки відблисків, щоб кнопка знайшла скляну фактуру. Для цього знову створіть новий шар, виберіть інструмент «Овальний виділення», створіть овал над кнопкою і залийте його білим за допомогою інструменту «Заливка». Затисніть Ctrl, клацніть на шар з кольоровим кругом, інвертуйте виділення («Виділення» - «Інверсія»). Тепер тисніть Delete. Овал повинен обрізатися по периметру кола.

На панелі шарів змініть параметр «Звичайне» на «М'яке світло», потім натисніть на значок векторної маски і виберіть інструмент «Заливка» - «Градієнт». Залийте відблиск знизу вгору. Кнопка майже готова.

Можна на кнопку додати напис. До неї також можна застосувати ефекти накладення, такі як внутрішнє, зовнішнє світіння, градієнт і так далі. Не бійтеся експериментів, чим більше фантазії ви докладаєте в роботі, тим швидше освоїте як сам редактор, так і веб-дизайн.