Малюємо кнопку. Як намалювати кнопку в фотошопі.
Вітаю, друзі! Сьогодні ми зробимо красиву кнопку для сайту в фотошопі. Урок досить складний, але в той же час в ньому порушено багато аспектів роботи веб-дизайнера, а це значить що ви зможете створювати якісні кнопки та іконки для ваших сайтів без особливих зусиль. Нагадаю, що подібні уроки вже були і, а зараз ми занурюємося в цю тему і розглядаємо інші способи.
Перейдіть на фотографії шар 1 і перетягнути мишею і перемістити фотографію вліво замість хвилястих ліній між верхнім заголовком лідируючим сайтом. Зображення повинно бути, як в регіонах, покритих хвилястими лініями. Для того, щоб видалити надлишок фотографій, використовуваних гуму без розмитих країв, інструмент може бути встановлений на верхній панелі інструментів, які ми самі активованому натиснувши на гумки. Ми будемо намагатися, щоб стерти і подивитися, якість того, що ми досягаємо при різних настройках інструменту.
Зображення мазок в регіонах до хвилястих ліній, вони повинні діяти в якості кордону. У самому лівому краю зображення, виберіть інструмент гумової більшу і більшу пролітну кордон. Це створить ефект градієнта, щоб бути втрачена. Вся процедура також застосовуються до другого фото тепер активує натиснувши на «око» наступний шар в палітрі шарів. Потім ми переміщаємо фотографії один до одного і за рахунок переходів в собі, якщо ми об'єднуємо і створити колаж з цих фотографій.
Ось вона, та сама глянсова кнопка, яку ми отримаємо в результаті:
А тепер відкривайте фотошоп і готуйтеся до роботи!
Красива кнопка для сайту
Створіть новий документ розміром 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:
Перемістити в піддоні шар, і тут дубльований шар, в якому весь робочий час створити маску. Ми робимо це просто палітри, натисніть кнопку Додати маску. Таким чином, ми бачимо тільки ту частину зображення, яка була раніше зазначеним овальне виділення. Результати наших зусиль можна побачити тут.
Це буде кнопка, яка містить «легку» смугу. На першому етапі нам потрібно зробити основну форму кнопки. Виберіть інструмент закругленого прямокутника, введіть радіус 3 пікселя на верхньому барі і зробіть прямокутник. Результат повинен виглядати так.
6. Знадобляться ще 4 напрямні в положеннях Vertical 160 і 640px, а також Horizontal 150 і 350px. Має вийти приблизно так:
7. Прийшов час вирівняти форму. Для цього візьміть Direct Selection Tool (Направлене виділення):
Тепер ми повинні растеризувати шар, в якому розташований округлений прямокутник. Це створить новий шар, який містить лише цей прямокутник. Нам ще потрібен невеликий прямокутник. Повторно виберіть інструмент закругленого прямокутника, встановіть радіус в 10 пікселів і створіть його - він повинен виглядати так само, як на наступному зображенні, але без вибору, який буде обговорюватися в наступному абзаці.
Ви повинні створити виділення, яке показано на наступному малюнку. Тепер ми можемо видалити шар з червоним прямокутником, нам він більше не знадобиться. Натисніть кнопку «Видалити», маленький прямокутник зникне, але вибір залишиться. Вибір зникає, і результат повинен виглядати так само, як на цьому малюнку. Основна форма кнопки виконана, і ми можемо піти в кольори. У вікні «Шари» клацніть правою кнопкою миші шар за допомогою прямокутника і виберіть параметри змішування. Застосуйте наступні настройки тут.
А потім спираючись на сітку працюйте з формою. Якщо не вистачає напрямних, сміливо додавайте. Напрямні можна також додавати з лінійки (викликається за допомогою Ctrl + R). Для цього натисніть на ризику лінійки і як-би "витягуйте" з неї напрямні. Під час роботи для зручності користуйтеся масштабуванням і наближайте полотно (Ctrl + коліщатко мишки).
Кольори переходу трохи складніше. Для наступного кроку нам потрібно трохи збільшити масштаб, тому оберіть у вікні навігатора 300%. На наступному кроці ми створюємо 4 тонкі лінії. Тому виберіть інструмент «Лінія», встановіть товщину 1 піксель, а колір - білий. На прямокутнику створіть 4 рядки, щоб вони виглядали наступним чином.
Кожен рядок повинен створити свій власний шар. Для цих невеликих горизонталей встановіть охоплення 30%, потім 50% для правої вертикальної лінії і 100% для лівої вертикальної лінії. Після створення всіх рядків ми повинні створити наступний вибір. Ви повинні прочитати весь прямокутник. Тепер виберіть інструмент «Еліптичний вибір» і в верхній частині панелі інструментів, встановіть суміш в 0 пікселів і введіть «Тип» в якості виділення з виділення - третій значок зліва. Тепер немає нічого, що завадило б створення нашого вибору.
Отже, повинна вийти така заготовка для майбутньої красивою кнопки:
Як бачите, мені довелося додати ще декілька напрямних. Форма готова, можна рухатися далі.
Глава 2. Форма кнопки простими засобами.
8. Як і обіцяв, зараз розповім як зробити форму кнопки буквально за 20 секунд. Вибираємо інструмент Rounded Rectangle Tool (Прямокутник з фаскою):
Ми створимо його, як показано на наступному малюнку. Виберіть інструмент «Заливка» і заповніть шар білим кольором, як показано на малюнку. Кнопка тепер полубелая і наполовину блакитна, що не є естетичним. Помістіть маску в шар з білої частиною кнопки. Маску вставляють, натискаючи на значок білого кола на темному прямокутнику, розташованому в вікні шару внизу. Після переходу змініть рівень покриття до 30%. Якщо все виглядає так, як показано на малюнку нижче, ми можемо зробити наступний крок.
У сьогоднішній статті для вас у нас є дуже корисне керівництво по створенню професійного логотипу будинку. Все написано крок за кроком, включаючи ілюстративні приклади. Якщо ні, ви можете зробити це безкоштовно з нашими інструкціями. І це дуже практичний підручник, в якому ми покажемо вам, як зробити ідеальний логотип легко і швидко. Вставка логотипу або водяного знака в фотографії є поширеною практикою сьогодні. Логотип, вбудований в фотографію, має подвійну функцію.
Встановлюємо радіус фаски 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) і використовувати на радість собі і користувачам.
Урок вийшов дійсно довгим, однак я сподіваюся що ви дізналися багато нового, і якщо ви самі пройшли всі кроки, то тепер без зусиль зможете створити будь-яку красиву кнопку лічильника на кожній сторінці.
Сьогодні поговоримо про таку важливу дрібницю як кнопка, а точніше як створюється кнопка в фотошопі.
Кнопка може бути різного призначення і застосування наприклад для сайту, програмного інтерфейсу. Кнопка для сайту або інтерфейсу, якщо слідувати всім правилам повинна мати 3 - 4 стану. Чому запитаєте три або чотири це залежить від того чи будуть якісь стану кнопки збігатися, а також чи є необхідність в четвертому стан. На сьогоднішній день не скрізь використовуються їхні капітали кнопок, але ж це не зовсім правильно. Всі статки створюються для того щоб користувачеві було легко орієнтуватися в роботі з інтерфейсом. Говорячи простою мовою, кнопка при будь-якому дія користувача показує, що відбувається і вказує на відповідну дію.
Кнопка в фотошопі розробляється не складно, давайте все ж визначимося, що ж таке кнопка.
кнопка- це елемент управління, який реагує на ту чи іншу дію користувача.
Давайте розглянемо ці чотири стану:
- статичний стан - це стан кнопки, при якому користувач не робить ніякого дії з нею.
- наведення - це стан кнопки, при якому користувач навів на неї курсор миші.
- натискання - це стан кнопки, при якому користувач натиснув на неї.
- активна - це стан кнопки при якому вона є виділеної і показує користувачеві де він знаходиться (зазвичай це використовується для того щоб користувач розумів своє місце знаходження наприклад на якій сторінці сайту він знаходиться).
Що таке кнопка і які у неї бувають стану ми розібралися. Приступимо до створення кнопки в фотошопі, а точніше кнопки і її чотирьох станів.
Відкриваємо фотошоп, створимо новий документ з потрібними нам розмірами, фон бажано залити кольором нашого інтерфейсу, для якого ми її створюємо, це робиться для того, щоб наочно бачити як вона буде виглядати в роботі. І починаємо створення кнопки в фотошопі. Візьмемо інструмент прямокутник із закругленими краями, і створимо форму нашої майбутньої кнопки.
За допомогою стилю шару заллємо форму кнопки лінійним градієнтом для цього йдемо шари\u003e стиль шару\u003e накладення градієнта або двічі кликнемо по шару з формою кнопки.
Створимо обсяг і тінь для нашої кнопки за допомогою копіювання нашого шару. Для цього, перетягніть наш шар з кнопкою на піктограму (іконку) створити новий шар, Або зробіть наш шар з кнопкою активним після чого йдемо в шар\u003e створити дублікат шару. Проробимо це дія двічі. Після чого назвемо шари кнопка, обсяг, тінь. Після чого кликнемо на шарі тінь правою кнопкою миші і відчистити стиль шару, виконаємо те ж саме з шаром обсяг. Потім поміняємо колір у шару обсяг. І зрушимо шари вниз за допомогою інструменту переміщення (V).
Щоб кнопка була більш об'ємна, створимо трохи світіння і контур, зробимо ми це через внутрішнє світіння в стилі шару. Задамо колір для світіння.
Тепер доопрацюємо шар з тінню. йдемо шар\u003e растеризувати. Зменшуємо непрозорість до 13%. Далі застосуємо фільтр розмиття по Гауса, з параметрами як показано на скрині нижче.
Кнопка в фотошопі практично готова, залишилося додати напис на кнопку, докладніше про роботу з текстом читайте в статті. Для цього візьмемо інструмент горизонтальний текст виберемо потрібний шрифт і напишемо необхідну нам напис.
Тепер зробимо текст утисненим, а також створимо відблиск і контур на краях написи, все це ми зробимо через стилі шару.
Кнопка в фотошопі намальована. Підсумковий результат можна побачити вище, тепер зробимо інші стану для нашої кнопочки.
Насамперед укладемо створену кнопку в групу шарів і назвемо групу статичне стан. Для цього затиснемо кнопку Shiftі виділимо всі шари крім фону, потім натиснемо Ctrl +Gі перейменуємо групу. Продублюємо групи для інших станів кнопки, для цього йдемо шари\u003e дублікат групи і даємо назву стану кнопки. Розташуємо групи нижче по порядку, для цього виділимо інструмент переміщення (V)виділяємо групу і натискаємо на стрілку вниз на клавіатурі.
Тепер змінимо кожну групу під потрібне нам стан. Першою будемо змінювати групу наведення. Для цього в групі шарів з ім'ям наведення виділимо шар кнопка і відредагуємо стиль шару. У ньому ми відредагуємо тільки накладення градієнта, зробимо його світліше.
Далі відредагуємо стан кнопки при натискання. У цій кнопки відредагуємо накладення градієнта як і в попередньому стан, також потрібно поставити галочку на інверсія плюс зменшимо обсяг за рахунок чого у нас створиться враження що при натискання кнопка вдавлюється. Щоб зменшити обсяг нам доведеться виділити шари обсяг і темрява, і знають наша тінь також стане менше, і за допомогою інструменту переміщення (V)стрілочкою на клавіатурі піднімемо їх вгору.
І нарешті, зробимо кнопку в активному стан. Для цього необхідно змінити колір накладення градієнта як у кнопки наведення, а також прибрати тінь і обсяг як у кнопки натискання. Як це зробити ми вже знаємо, скажу тільки, що активній кнопці градієнт потрібно задати іншого кольору, щоб вона була помітна на тлі інших кнопок. Можна звичайно поміняти ще й колір у нашій написи, але я цього робити не буду.
Ось і все наша кнопка в фотошопі створена, я думаю урок досить зрозумілий, якщо у вас виникнуть питання пишіть в коментарях, по можливості постараюсь відповісти. Не забудьте підписатися на розсилку, щоб дізнаватися про нові статтях першими. А ще Ви можите почитати урок зі створення соціальних мереж.