Кнопка в фотошопі

Всім доброго часу доби, радий бачити на fotodizart.ru. Сьогодні поговоримо про таку важливу дрібницю як кнопка, а точніше як створюється кнопка в фотошопі.

Кнопка - це елемент управління, який реагує на ту чи іншу дію користувача.

Давайте розглянемо ці чотири стану:

1. Статичний стан - це стан кнопки, при якому користувач не робить ніякого дії з нею.
2. Наведення - це стан кнопки, при якому користувач навів на неї курсор миші.
3. Натискання - це стан кнопки, при якому користувач натиснув на неї.
4. Активна - це стан кнопки при якому вона є виділеної і показує користувачеві де він знаходиться (зазвичай це використовується для того щоб користувач розумів своє місце знаходження наприклад на якій сторінці сайту він знаходиться).

Що таке кнопка і які у неї бувають стану ми розібралися. Приступимо до створення кнопки в фотошопі, а точніше кнопки і її чотирьох станів.

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

За допомогою стилю шару заллємо форму кнопки лінійним градієнтом для цього йдемо шари> стиль шару> накладення градієнта або двічі кликнемо по шару з формою кнопки.

Створимо обсяг і тінь для нашої кнопки за допомогою копіювання нашого шару. Для цього, перетягніть наш шар з кнопкою на піктограму (іконку) створити новий шар. або зробіть наш шар з кнопкою активним після чого йдемо в шар> створити дублікат шару. Проробимо це дія двічі. Після чого назвемо шари кнопка, обсяг, тінь. Після чого кликнемо на шарі тінь правою кнопкою миші і відчистити стиль шару, виконаємо те ж саме з шаром обсяг. Потім поміняємо колір у шару обсяг. І зрушимо шари вниз за допомогою інструменту переміщення (V).

Щоб кнопка була більш об'ємна, створимо трохи світіння і контур, зробимо ми це через внутрішнє світіння в стилі шару. Задамо колір для світіння.

Тепер доопрацюємо шар з тінню. Йдемо шар> растеризувати. Зменшуємо непрозорість до 13%. Далі застосуємо фільтр розмиття по Гауса, з параметрами як показано на скрині нижче.

Тепер зробимо текст утисненим, а також створимо відблиск і контур на краях написи, все це ми зробимо через стилі шару.

Кнопка в фотошопі намальована. Підсумковий результат можна побачити вище, тепер зробимо інші стану для нашої кнопочки.

Насамперед укладемо створену кнопку в групу шарів і назвемо групу статичне стан. Для цього затиснемо кнопку Shift і виділимо всі шари крім фону, потім натиснемо Ctrl + G і перейменуємо групу. Продублюємо групи для інших станів кнопки, для цього йдемо шари> дублікат групи і даємо назву стану кнопки. Розташуємо групи нижче по порядку, для цього виділимо інструмент переміщення (V) виділяємо групу і натискаємо на стрілку вниз на клавіатурі.

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

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

І нарешті, зробимо кнопку в активному стан. Для цього необхідно змінити колір накладення градієнта як у кнопки наведення, а також прибрати тінь і обсяг як у кнопки натискання. Як це зробити ми вже знаємо, скажу тільки, що активній кнопці градієнт потрібно задати іншого кольору, щоб вона була помітна на тлі інших кнопок. Можна звичайно поміняти ще й колір у нашій написи, але я цього робити не буду.