Цей урок був написаний ще за Царя Гороха, у далекому 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.
4 коментарів
Дякую за урок. В мене вийшло от що:
http://artme.in.ua/button.jpg
Прошу вибачити за таке посиланная.
Дуже схоже на те, що я описав в уроці, молодець! Насправді, промалювавши парочку таких кнопок, над іншими вже не задумуєшся і робиш на автоматі.
п.с. я трохи підправив ваше посилання, бо спочатку була абракадабра.
Дякую за урок. В мене вийшло от що:
http://artme.in.ua/button.jpg
Прошу вибачити за таке посиланная.
Дуже схоже на те, що я описав в уроці, молодець! Насправді, промалювавши парочку таких кнопок, над іншими вже не задумуєшся і робиш на автоматі.
п.с. я трохи підправив ваше посилання, бо спочатку була абракадабра.