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

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

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

Інструкція

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