Урок Кнопки Фотошоп. Як зробити кнопку в Photoshop.

При створенні сайтів або інших інтерфейсів, важливим елементом є кнопки. Фотошоп дозволяє створювати всілякі кнопки за індивідуальними критеріями. У цій статті Ви дізнаєтесь як зробити кнопку в фотошоп. Існує багато варіантів створення кнопки в Photoshop. Розглянемо кілька найбільш простих варіанов як зробити кнопку. У Фотошоп нам понадобяться в ПАНЕЛІ ІНСТРУМЕНТІВ наступні інструменти: прямокутник з округленими краями, заливка або вибір кольору (або колір можна призначити в панелі ВЛАСТИВОСТЕЙ), текст. В панелі ВЛАСТИВОСТЕЙ - колір, стилі (або в ГОЛОВНОМУ МЕНЮ вибрати у випадаючому меню ВІКНО - стилі). У вікні ШАРИ: елементи функції ƒх  (Тиснення). У вікні СИМВОЛ: розмір, шрифт. Розташування елементів інтерфейсу Photoshop можна прочитати.

Створюємо новий документ, задаємо потрібний розмір. Фон прозорий, режим RGB. Рекомендується для зручності, точності центрування і завдання розміру самої кнопки в Фотошоп використовувати напрямні (їх для наочності можна підсвітити червоним кольором в налаштуваннях програми через меню КАК), шляхом перетягування вертикальної і горизонтальної лінійки в потрібне положення. На панелі інструментів натискаємо інструмент прямокутник із закругленими краями, задаємо потрібне округлення (радіус) на панелі властивостей, ставимо курсор у вигляді хрестика на перетині лінійок і тягнемо фігуру до потрібного розміру і форми. Якщо спочатку не обрали колір в панелі інструментів, заливаємо потрібним кольором у функціях шару.

Створення кнопки в Фотошоп за допомогою готових стилів.

Найпростіший варіант отримати об'ємну кнопку - вибрати стиль в панелі властивостей фігури (або у вікні СТИЛІ, яке можна викликати в основному меню ВІКНА-в  випадаючому менню вибрати СТИЛІ), які дозволять зробити різні кнопки. У Photoshop вже присутні набори стилів (прозорі, текстурні). Вибрати з наборів відповідний стиль можна натиснувши на трикутник праворуч в наборі. В даному випадку набір ВЕБ стилі - стиль Хром. Після вибору стилю в панелі СЛОЙ можна побачити, з яких елементів функцій він складається. Кожен елемент функції можна коригувати.

Після визначення форми, кольору і стилю кнопки переходимо до написання тексту кнопки. Рекомендується створити новий шар для тексту, щоб векторна фігура не прикріплювалася до тексту. На панелі інструментів натискаємо інструмент текст, і набираємо текст на зображенні кнопки. Кількома на інструмент переміщення. Відкриваємо вікно СИМВОЛ і вибираємо шрифт, колір і розмір.

Текст можна залишити без стилю. Для застосування стилю до тексту на шарі з текстом натискаємо 2 рази або натискаємо функцію. Вибираємо наприклад Тиснення. У вікні задаємо внутрішній скіс і задаємо потрібні параметри. У підсумку отримуємо сіру хромірованнкю об'ємну кнопку з утисненим текстом.

Створення кнопки зі своїми варіантами стилів.

Стиль кнопки можна задати самому, використовуючи інструмент ФУНКЦИЯ на панелі ШАРИ. Кількома двічі на шарі кнопки або натискаємо на понели кнопку ƒх.  Найпростіший варіант - стиль шару вибираємо ТИСНЕННЯ і вибираємо необхідні параметри. Додаємо ТІНЬ.

Можна також при бажанні використовувати зовнішнє світіння, обведення, перекриття кольору або візерунка і інші стилі на вибір. Скляна кнопка в фотошопі робиться без заливки фігури кольором (непрозорість заливки -0), або залиттям таким же кольором, що і підстава (аналогічно застосовується до тексту).

Потім, як в попередньому прикладі, додаємо текст зі стилями тиснення. Можна до тексту застосовувати і інші стилі за бажанням.

Якщо кнопка готова - натискаємо на Фото в головному меню і в вкладці вибираємо "зберегти для веб пристроїв". У вікні задаємо формат PNG 24 (оп підтримує прозорість і передає максимум відтінків зображення). Тут же можна підкоригувати розмір кнопки.

Відео як намалювати скляну кнопку в Фотошоп.

Відео Скляна кнопка в фотошоп  показує як ссоздать скляну кнопку в Фотошоп за допомогою готових стилів так і самостійно.

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

Фінальне зображення:

Крок 1

Створіть новий документ (Ctrl  + N) розміром 1280 x 1024 пікселів.

крок 2

Залийте фон кольором   # СCCBCCі   пензлем  (Brush Tool) (В) великого розміру білого кольору клікніть один раз в центрі фону, щоб створити світлову пляму. Тепер фон схожий на радіальний градіент.03

крок 3

інструментом Прямокутник з округленими кутами  (Rounded Rectangle Tool) (U) намалюйте фігуру з радіусом заокруглення 180 пікселів:

крок 4

До фігурі застосувати стиль шару   накладення градієнта(Gradient Overlay). Використовуйте параметри, які показані на скріншоті:

крок 5

інструментом Овальна область виділення(Elliptical Marquee tool) (M) намалюйте кругле виділення і залийте його чорним кольором. Розмістіть його на попередній фігурі:

крок 6

Скопіюйте стилі зі шару з прямокутною фігури (клікніть правою кнопкою  миші в палітрі Шари по стилям шару і виберіть пункт Скопіювати стилі шару. Тепер перейдіть на шар з чорним колом, клікніть по ньому в палітрі Шари правою кнопкою миші і виберіть пункт Вставити стилі шару).

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

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

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

Красива кнопка для сайту

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

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

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

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

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

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

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

3. Добре, тепер встановимо напрямні, а потім вирівняємо по ним форму кнопки. Для установки направляючої пройдіть в меню View (Вид) -\u003e 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 (Фільтр) -\u003e Blur (Розмиття) -\u003e 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. Можна додати ще один невеликий відблиск внизу. Ви вже знаєте як це зробити. Зараз кнопка виглядає так:

27. Ми майже закінчили. Залишилося додати трохи ефектів. Зробимо відображення. Скопіюйте всі шари (виділіть їх і натисніть Ctrl + J). Натисніть на будь-який з скопійованих шарів правою кнопкою миші і виберіть пункт Convert to Smart Object (Перетворити в смарт-об'єкт). Після цього пройдіть в Edit (Редагування) -\u003e Transform (Трансформація) -\u003e Flip Vertical (Відбити по вертикалі). Понизьте непрозорість до 52%:

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

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

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

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

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

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

Кнопку намалювати в фотошопі не проблема. Власне я покажу метод на прикладі цієї кнопки. Використовуючи знання ви зможете створювати власні кнопки, підключаючи і використовуючи свої стилі.

Головне щоб кнопка правильно вписувалася в дизайн сайту або дизайн того, де ви будете її використовувати.

Створіть новий документ в фотошопі. Кнопку ми намалюємо за допомогою інструменту Прямокутник з округленими кутами.

Тепер необхідно налаштувати інструмент. Колір я використовував помаранчевий - # ff8b00. А радіус кутів встановив 4 пікселя.

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

Тепер зробимо невеликий обсяг в стилі flat. Парадокс, але обсяг буде в плоскому стилі. Для цього зробіть копію шару з прямокутником ( CTRL + J) І той прямокутник який нижче за верствам - пересуньте його на 2-3 пікселя вниз в робочій області. Поміняйте йому на колір на більш темний, в даному випадку - # bf6800

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

Тепер щоб кнопка була цікавіше і соковитіше - я пропоную додати стиль градієнт  на верхній прямокутник. Для цього натисніть подвійним кліком на шар з прямокутником і знайдіть стиль накладення градієнта.

Необхідно виконати настройку - кут нахилу 90 градусів.