Малюємо кнопки в стилі Web 2.0

Цей урок був написаний ще за Царя Гороха, у далекому 2007-му, але судячи з кількості переходів на оригінальну статтю, вона все ще актуальна для дизайнерів-початківців. Хочу наголосити, що дизайн Веб 2.0 не обмежується гламурними кнопками і бліками. Це скоріше підхід до дизайну веб-інтерфейсів вцілому, котрий орієнтований на зручність і простоту його використання.

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

Під словами «гламурні кнопки» я маю на увазі ті, що з бліками і відображеннями як від скляної поверхні. В якості прикладу, можна привести кнопки в ОС Windows Vista/7 або Mac OS X. Такий стиль кнопок ще називають «Aqua-Style».

В цьому уроці я приведу приклад малювання простої кнопки вигаданого інтерфейсу медіа плеєра. Для початку нам потрібен фотошоп (в даному уроці використовується версія CS3) і хоча б приблизне уявлення того, як повинна виглядати наша мега кнопка :)

Крок 1

Малюємо коло (т.я. кнопка буде круглою) за допомогою інструменту Marquee Tool (M)  , утримуючи при цьому клавішу Shift, і заливаємо його будь-яким кольором, наприклад, #7ebc00. Розмір не великий, т.я. кнопка на пів екрану нам не потрібна.

Крок 2

Двічі клікаємо на леєр (layer) з нашим колом — з’явиться вікно Layer Style. В розділі Drop Shadow ставимо Opacity = 10%, Distance = 0px, Size = 50px.

В розділі Bevel and Emboss в підрозділі Structure ставимо Size = 2px, Soften = 6px. В підрозділі Shading ставимо обидва повзунки Opacity = 46%. Для Shudow Mode задаємо такий само колір, як у нашого кола.

В розділі Stroke ставимо Size = 5px. В полі Fill Type вибираємо Gradient. Далі клікаємо по іконці поля Gradient і у вікні, що з’явилося, вибираємо кольори для градієнта: лівий край — #ddecf0; правий — #ffffff (для задання кольору краю, потрібно два рази клікнути на нижньому повзунку).

Клікаємо ОК. Рамочка для кнопки готова.

Крок 3

Створюємо новий леєр (Ctrl+J). Затиснувши клавішу Ctrl, клікаємо на леєрі з колом (причому не на назві слою, а на його прев’ю) і повинна виділитися область у формі нашого кола.

Далі вибираємо інструмент градієнт (G) з білим кольором з одного кінця і 0% прозорості з іншого. Малюємо градієнт на нашій виділеній області так, щоб білий колір був зверху. Далі потрібно посунути леєєр з градієнтом до верхнього краю кола і зменшити його висоту разів у два, так щоб вийшов овал. В результаті повинен вийти ось такий малюнок.

Якщо ж градієнт буде виходити за рамки кола з обідком, це можна виправити так: виділити область по формі нашого кола і, знаходячись на леєрі з градієнтом, натиснути на іконці маски (внизу біля іконки додавання нового леєра). Таким чином, залишиться видимою лише область в колі.

Крок 4

На новому леєрі малюємо овал (разів у три менше ніж наше основне коло) з кольором як у основи кнопки. Розташовуємо його над нашим колом і ставимо режим накладання леєра Screen, а прозорість біля 55%. Далі Filters?Blur?Gaussian Blur задаємо радіус розмиття рівним 3-5px. Розміщуємо цю пляму в нижню частину кола. Основа кнопки готова.

Крок 5

На новому леєрі малюємо білий трикутник у вигляді стандартної іконки Play або просто надпис. Розміщуємо його в центр нашої кнопки. Також, у властивостях цього леєра можна додати Outer Grow с прозорістю 45%, для ефекту підсвічування трикутника.

Все — наша кнопка готова. Далі цю тему можна розвивати і робити кнопки різних форматів та кольорів.

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

Завантажити початковий файл у форматі .psd.