Красива кнопка для сайту, уроки фотошопа (photoshop) - відеоуроки фотошопа, дизайн, фотографія

Ось вона, та сама глянсова кнопка, яку ми отримаємо в результаті:

А тепер відкривайте фотошоп і готуйтеся до роботи!

Створіть новий документ розміром 800x500px.

Для початку потрібно поставити форму майбутньої кнопки. Цим і займемося. Відразу скажу - в цьому уроці я розповім про досить складному шляху створення форм. Якщо ви не хочете працювати з Pen Tool (інструмент перо), або для вас це поки що складно відразу переходите до глави 2, там буде показаний більш простий шлях.

Ну а глава 1 для тих, хто хоче навчитися чомусь новому.

Глава 1. Створюємо форму кнопки за допомогою Pen Tool

Забігаючи вперед обговоримо, які є плюси у способу з використанням Pen Tool. Перш за все, гнучкість в створенні форми. Ви можете "виліпити" все що завгодно. Природно, інструменти на зразок Rectangle Tool (прямокутник) зробити цього не дозволяють, так що ви будете отримувати вельми стандартні кнопки.

1. Отже, досить балачок. Приступимо. Візьміть інструмент Pen Tool (Перо) і створіть приблизно таку фігуру:

Якщо хочете дізнатися більше про роботу з інструментом Pen Tool прочитайте відповідний урок.

2. Форма нашої кнопки вийшла дуже кривою і приблизною. Зараз ми торкнемося дуже важливу тему - робота з направляючими. Напрямні сильно допомагають в роботі дизайнера. За ним зручно відміряти відстань. Зараз ви самі все зрозумієте. Для початку краще залити фон якимось кольором, що відрізняється від білого. Нехай це буде сірий (# d9d9d9). Беремо інструмент Paint Bucket Tool (Заливка) і вирушаємо на шар Background, потім заливаємо його вибраним кольором:

3. Добре, тепер встановимо напрямні, а потім вирівняємо по ним форму кнопки. Для установки направляючої пройдіть в меню View (Вид) -> New Guide (Нова напрямна). Відзначте галочку Vertical (Вертикальне) і введіть значення 200px:

Як бачите, напрямна з'явилася в положенні 200px від лівого краю полотна. Якщо зараз ви натиснете поєднання клавіш Ctrl + H то напрямна зникне. Повторне натискання цього поєднання поверне направляючу назад.

5. Встановіть ще одну направляючу в положення Vertical 600px:

6. Знадобляться ще 4 напрямні в положеннях Vertical 160 і 640px, а також Horizontal 150 і 350px. Має вийти приблизно так:

7. Прийшов час вирівняти форму. Для цього візьміть Direct Selection Tool (Направлене виділення):

А потім спираючись на сітку працюйте з формою. Якщо не вистачає напрямних, сміливо додавайте. Напрямні можна також додавати з лінійки (викликається за допомогою Ctrl + R). Для цього натисніть на ризику лінійки і як-би "витягуйте" з неї напрямні. Під час роботи для зручності користуйтеся масштабуванням і наближайте полотно (Ctrl + коліщатко мишки).

Отже, повинна вийти така заготовка для майбутньої красивою кнопки:

Як бачите, мені довелося додати ще декілька напрямних. Форма готова, можна рухатися далі.

Глава 2. Форма кнопки простими засобами.

8. Як і обіцяв, зараз розповім як зробити форму кнопки буквально за 20 секунд. Вибираємо інструмент Rounded Rectangle Tool (Прямокутник з фаскою):

Встановлюємо радіус фаски 90px:

Все, форма готова

Глава 3. Глянцевий кнопка

9. Ось ми і дісталися до створення самих ефектів для кнопки. Не важливо, яким способом ви зробили основу кнопки (форму) - принцип тут один і той же. Давайте для початку нанесемо на кнопку текст. Створіть новий шар (Shift + Ctrl + N) і напишіть будь-який текст:

Текст зробіть кольором темніше самої кнопки. До слова, для форми я використовував колір # 3e7bab, для кнопки # 183e5b.

10. Зробіть копію шару з формою (Ctrl + J). Поміняйте колір на білий, натисніть Ctrl + T (Вільна деформація), і зменшіть форму таким чином:

11. Понизьте непрозорість шару до 35%:

Як ви ймовірно здогадалися, ми тільки що зробили відблиск для нашої красивої кнопочки.

12. Створіть для відблиску маску шару:

13. Тепер візьміть м'яку чорну кисть розміром 400px:

Пройдіться цієї пензлем по нижній частині відблиску. Має вийти так:

14. Створіть копію відблиску, і на масці шару "протріть" чорної пензлем весь простір усередині відблиску, залишаючи тільки верхню частину. Режим змішування Soft Light (М'яке світло), а непрозорість встановіть 100%:

15. Створюємо новий шар, беремо м'яку білу кисть діаметром 8px і малюємо зверху від відблиску смужку (щоб смужка вийшла ідеально прямий утримуйте Shift):

16. Створюємо для цього шару маску і стираємо краю полоси:

17. дублюємо шар з смужкою і застосовуємо Filter (Фільтр) -> Blur (Розмиття) -> Gaussian Blur (За Гауса), радіус 4,6px:

18. Натискаємо Ctrl + клацання по мініатюрі шару з першим відблиском, з'явиться виділення. Перебуваючи на шарі з смужкою натискаємо Delete, потім переходимо на шар з тільки що застосованим блюр і також тиснемо Delete:

Мета цієї операції в позбавленні від зайвих частин смужки, залазити на інші елементи (до слова можна просто стерти непотрібні частини ластиком, але за допомогою виділення точніше).

19. Схоже робимо для контуру форми. Ctrl + клік по основному контуру кнопки, потім Ctrl + Shift + I для інверсії виділення, і натискаємо Delete на обох шарах з смужкою. Зараз кнопка повинна виглядати так:

20. Тепер шари з лініями можна об'єднати (Ctrl + E) і встановити непрозорість 80%, для додання природності відблиску.

21. Продовжуємо роботу з відблисками і світлом. Створіть новий шар і м'якою білою кистю намалюйте таку пляму:

22. Тепер вже знайому операцію по виділенню контуру кнопки (Ctrl + клік по формі кнопки в панелі шарів), потім інвертування Shift + Ctrl + I і Delete. Режим змішування Soft Light, непрозорість 70%:

23. Скопіюйте шар з текстом, розташуйте його під основним, задайте колір трохи світліше кнопки (у мене # 79afdb) і перемістіть цей шар на 1px вниз. Отримуємо ефект тиснення:

24. За допомогою Pen Tool створіть кілька відблисків по обом сторонам кнопки і знизьте їх непрозорість до 10-20%:

25. Ця кнопка здалася мені занадто високою, тому я виділив всі шари, крім тексту, натиснув Ctrl + T і зменшив кнопку в висоту:

26. Можна додати ще один невеликий відблиск внизу. Ви вже знаєте як це зробити. Зараз кнопка виглядає так:

А тепер за допомогою маски шару зітріть нижню частину відображення:

28. Добре, кнопка тепер дійсно красива Залишилося тільки зробити тінь. Створіть шар над фоном і під усіма іншими, і твердої пензлем намалюйте чорну лінію:

29. Застосуйте розмиття по Гауса з радіусом 8 px, непрозорість шару 46px. Допрацьовуйте тінь, поки вона вас не влаштує:

30. Власне на цьому все, професійна глянцева кнопка готова. Тепер можна видаляти фон, змінювати розмір до того, який знадобиться на сайті (Image -> Image Size) і використовувати на радість собі і користувачам.

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

А ось і фінальний результат, я ще додав трохи стильного шуму:

Поділися з друзями