Кнопка в стилі Web 2.0

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

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

1. Створюємо новий документ або відкриваємо макет дизайну для веб-сторінки, якщо Ви хочете створити меню із цих кнопок. Я створила документ розміром 400х110px, тільки для кнопки.

2. Далі беремо інструмент Rounded Rectangle Tool (U), щоб створити форму для кнопки.

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

Тепер створіть форму на полотні, цвіт форми зараз не має значення.

3. Тепер задамо стилі шару для нашої форми. Ідемо у властивості Blending Options (подвійний клич по шарі поруч із назвою на палітрі шарі або ж через меню Layer > Layer Style.. > Blending Options) і виставляємо значення як показане на скриншотах:

Inner Shadow:

Gradient Overlay:

Ви можете використовувати будь-який цвіт який захочете, але кнопка повинна виглядати об'ємно, приблизно от так:

4. Тепер час додати симпатичний глянсовий ефект на нашу майбутню кнопку. Створимо виділення у формі нашої кнопки, це можна зробити затисши Ctrl кликнувши по іконці шару на палітрі шарів. Далі зменшимо його приблизно на 5 пикселей з усіх боків. Для цього йдемо Select > Modify > Contract і вводимо у вікні, що з'явилося, значення 5. От так це повинне виглядати:

Тепер створимо новий шар і заллємо наше виділення градієнтів від Білого до прозорого зверху долілиць. От так:

Далі нам необхідно зробити криву використовуючи иснтрумент Pen Tool, зробіть криву прямо поверх виділення, уклавши в нього нижню частину білого градієнта кнопки й видалите її. От що вийшло в мене:

Я ще використовувала більшу м'яку кисть для видалення частини країв (зм'якшення), так вони виглядають набагато краще.

5. Тепер додамо текст на нашу кнопку. Беремо иснтрумент Horizontal Type Tool (T) і пишемо бажаний текст.

Для верхнього тексту я використовувала шрифт Black Italic, 24 pt, Sharp, #fff, для нижнього - Semibold Italic, 12 pt, Sharp, #fff і додала у властивостях Blending Options тінь:

Drop Shadow:

От так це виглядає:

На закінчення я додала відбиття й шестірню для краси.

І червоний варіант :)

Кориснi статтi:

Кнопка в стилі Web 2.0

Джерело: photoweb.com.ua