Малюємо супер-стильну навігаційну панель vista-стайл

Малюємо супер-стильну навігаційну панель vista-стайл.

Приблизний час виконання: 12 хвилин

Створіть новий документ 500х50 пикселей. Виділите прямокутну область 480х30 пикселей

Тепер Select > Modify > Smooth 2px

Створіть новий шар і залийте виділення будь-яким цвітом. Після цього застосуєте стилі:

- Gradient: #313332 > #46474a

- Stroke: #676767

Виділите верхню частину панелі (виділите всю, а потім, затисши ALT, виділите НИЖНЮ частину)

Створіть новий шар і залийте його градієнтом від білого до прозорого

Установите режим змішування для цього шару на Linear Dodge і непрозорість на 35%

 

Створіть новий шар і виділите область 1px у висоту під верхньою границею панелі, використовуючи інструмент Single Row Marquee

Залийте виділення білим

Тепер CTRL-Клич на іконці першого шару, щоб виділити його вміст

Select > Inverse, виділяємо в панелі шарів шар з однопиксельной білою смужкою й натискаємо DELETE.

 

Міняємо режим змішування для цього шару зі смужкою на Soft Light і непрозорість установлюємо на 60%

Виділите прямокутну область 130х24 пикселя й зм'якшите її Select > Modify > Smooth 2px

Створіть новий шар і залийте будь-яким цвітом. Застосуєте стилі:

- Gradient: #000000 to #2f3233

- Stroke: #0f1011 to #575858

Створіть новий шар і CTRL+клич по шарі з тільки що зробленим прямокутником. Далі Edit > Stroke 1px білого цвіту

Понизьте непрозорість шару на 15%

Виберіть верхню частину кнопки й на новому шарі залийте її градієнтом від білого до прозорого

Понизьте непрозорість шару до 80%

Додайте текст на кнопки

Тепер потрібно додати роздільники між кнопками. Створіть новий шар, виділите область інструментом Single Column Marquee і залийте її #1a1b1c. Пересуньте виділення на 1px вправо (одне натискання на стрілку вправо на клавіатурі) і залийте його тепер уже #5d5f60. Ще раз рухаємо на 1px вправо й заливаємо вже #232526

Зітріть верхню й нижню частини роздільника за допомогою ластику розміром 20px м'якої кисті й понизьте непрозорість шару до 50%

Скопіюйте шар два рази й помістите копії між іншими кнопками

 

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

Кнопка в стилі 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:

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

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

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

 

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