Як створити кнопку

Як створити кнопку

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

Інструкція

  1. Створіть у програмі новий документ (Файл — Створити або File — New). Тепер переведіть документ в режим сірого кольору, для цього виберіть Image — Mode — Grayscale. Тепер за допомогою інструменту Прямокутник створіть прямокутник, відповідний розмірами вашої майбутньої кнопки. Тепер переведіть зображення в режим RBG. Відкрийте палітру RBG (ліворуч) і встановіть всі значення на 170. Залийте прямокутник сірим кольором.
  2. Тепер натисніть Image — Mode — Bitmap, щоб перевести зображення в режим Bitmap. У вікні Bitmap в списку Use виберіть значення Halftone Screen. Повинно відкритися ще одне вікно. У цьому вікні встановіть наступні значення параметрів:

    Frequency: 256

    Lines / inch

    Angle: 45

    Shape / Round

    У вас вийде прямокутник, поцяткований зірочками.
  3. Тепер знову переведіть зображення в режим Grayscale (Image — Mode — Grayscale). Встановіть співвідношення розмірів (Size Ratio) 1. Зображення знову переведіть в режим RBG. Застосуйте фільтр Stylize — Fmd Edges.
  4. Далі застосуйте фільтр Blur — Motion Blur, в ньому виставте наступні параметри:

    Angle — 36

    Distance — 19

    Ці значення не обов’язкові, ви можете прийняти свої власні, в залежності від того результату, який хочете отримати в результаті. Це відноситься до всіх параметрів, наведених у цій інструкції — спробуйте поекспериментувати і подивитися, що у вас вийде, можливо, вас влаштує якийсь інший варіант, відмінний від того, що вийде в підсумку у автора інструкції.
  5. Тепер розфарбуйте ваше зображення. Для цього виберіть Image — Adjustements — Hue / Saturation. Там поставте прапорець навпроти Colorize і, рухаючи важелі, виберіть бажаний колір окантовки вашої кнопки.
  6. Тепер інструментом Rectangular Marquee виділіть виступаючу частину кнопки і зробіть її трохи світліше. Для цього змініть криві зображення — Image — Adjustements — Curves.
  7. Якщо результат вас вже влаштовує, ви можете зупинитися на цьому і вважати, що ваша кнопка закінчена. Але при бажанні ви можете ще трохи відредагувати зображення, щоб воно виглядало краще.
  8. Для цього нам потрібно позбавитися від зрізаних кутів. Виберіть інструмент Rectangular Marquee і виділіть ту області кнопки, яка вам потрібна (без некрасивих кутів) і скопіюйте (Edit — Copy або ж поєднанням клавіш Ctrl + C). Потім натисніть Ctrl + V, щоб вставити скопійоване на новий шар. Застосуйте Image — Rotate Canvas — Flip Horizontal.
  9. Знову виділіть потрібний фрагмент, скопіюйте і ще раз застосуєте Image — Rotate Canvas — Flip Horizontal. Таким чином, зображення повернеться до свого первісного вигляду. Тепер видаліть даний фрагмент (як правило, це самий верхній шар на панелі шарів). Тепер вставте фрагмент з буфера, використовуючи Edit — Paste. Перетягніть фрагмент в лівий край вашої кнопки, зробіть так, щоб край був прямокутним. Так само поступите і з правим кутом.
  10. Тепер на кнопку необхідно додати текст. Для цього за допомогою інструменту текст створіть необхідну напис, змінивши колір на більш відповідний. Застосуйте до кнопки фільтр Blur, щоб трохи її розмити.