Сделать стартовой Добавить в закладки Обратная связь Новости по RSS 2.0
Главная страница » Уроки Photoshop » Web » Стеклянная кнопка

Стеклянная кнопка

Автор: LuLu | Категория: Уроки Photoshop » Web | 25 мая 2007
Этот очень простой урок научит Вас делать вот такую кнопку, можно также использовать в качестве логотипа, решать Вам :)
1. Создайте новый документ 400х400px, залейте фон серым цветом #485355, затем создайте новый слой, сделайте круглое выделение инструментом Eliptical Marquee Tool (чтобы сделать идеально круглым удерживайте при выделении кнопку Shift) и зайлейте его цветом #d9520d.

2. Примените к слою следующие стили ( Layer > Layer style > Blending options):

Стеклянная кнопка

Стеклянная кнопка

Стеклянная кнопка

Стеклянная кнопка

Стеклянная кнопка

Теперь Ваша кнопка должна выглядеть вот так:



3. Сделайте клик по иконке слоя, удерживая кнопку Ctrl чтобы получить выделение в форме кнопки:

4. Создайте новый слой, затем идем Select > Modify > Contract и ставим значение 3 в строке ввода.

5. Теперь берем инструмент градиентной заливки ( Gradient Tool) и выставляем такие значения (радиальный градиент от белого к прозрачному.):

И залейте выделенную область сверху вниз (чтобы получить четко вертикальную заливку, удерживайте кнопку Shift), теперь кнопка должна выглядеть так:

6. Теперь нажмите Ctrl+T для свободной трансформации объекта и в верхней части меню выставьте ширину в процентах равную 75%:

7. Смените режим наложения слоя на палитре слоев на Overlay:

8. Сделайте снова выделение нашей круглой кнопки (удерживая Ctrl кликаем по иконке слоя с кнопкой), создайте новый слой, далее снова идем в Select > Modify > Contract, вводим значение 2 и делаем еще одну градиентную радиальную заливку от белого к прозрачному и оставляем как есть.

9. Если выделение Вы не снимали, просто создаем новый слой и делаем градиентную заливку, но по меньше, не через всю кнопку, снизу вверх. Если сняли выделение, то сделайте его снова. У слоя понижаем прозрачность ( Opacity) до 80% и меняем режим наложения на Overlay.

10. Теперь добавим еще пару ярких отметин, создаем новый слой, берем большую мягкую кисть белого цвета (например радиусом 100px) и делаем несколько мазков внизу слева кнопки и симметрично вверху справа, прозрачность слоя устанавливаем в 45%, режим наложения в Overlay. Кстати, мазки лучше делать имея выделение кнопки, так Вы не выйдете за границы самой кнопки и рисовать кисть будет только по ней.

11. Делаем почти тоже самое, что и в Шаге 10, только берем кисть черного цвета, режим наложения слоя ставим в Soft Light, а прозрачность в 40%. Так мы добавим кнопке немножко контраста.

12. Снова создаем новый слой, идем в Filter > Render > Clouds (по желанию можно применить еще фильтр Filter > Cketch > Chrome..), меняем режим наложения слоя на Overlay, а прозрачность понижаем до 60%.


13. В заключение добавляем надпись белого цвета, а в стилях слоя ставим такие настройки:

 

 

Стеклянная кнопка

 

 

Стеклянная кнопка

 

14. Вот и все, наша кнопка готова :)


 

 
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Другие новости по теме:


Просмотров: 30751 | Напечатать | Комментарии (29)

#1 написал: Kratos (2 июня 2007 11:15)
Очень хороший урок wink
#2 написал: John_webMaker (18 июня 2007 16:17)
Как по русски "Soft Light"???
#3 написал: LuLu (18 июня 2007 17:33)
Мягкий свет или что-то в этом роде.
#4 написал: kurtov (2 июля 2007 16:15)
урок замечательный
только это не понятно - Select > Modify > Contract , дословный перевод - Выберите>, Изменяют> Контракт , и что бы это значало ?
зачем надо это по английски писать ? , у увсех стоит русифицированный фотошоп, а уроки по английски ...

Overlay тоже не понятная команда ...
короче - не получается ни хрена !
#5 написал: LuLu (2 июля 2007 21:53)
Не понимаю зачем пользоваться русской версией фотошоп, если название команд отличается в различных версиях перевода, английский - это универсальный вариант, сначала сложно - но потом привыкаешь. Если Вы не хотите использовать английскую версию, то либо не пользуйтесь этими уроками, либо загляните как минимум в словарь и сопоставьте названия команд, делать в 2х вариантах я не буду.
#6 написал: 3AHYDA (3 июля 2007 14:06)
У меня немецкая версия Corel Draw. Я тоже не понимаю ваших приказов и не могу их найти. Mожно лично для меня всё ещё раз по немецки повторить. ну пожа-а-а-алуйста.
#7 написал: Agniya (11 июля 2007 18:06)
Где находится Gradient Tool, подскажите пожалуйста winked
#8 написал: Agniya (11 июля 2007 18:11)
Gradient Tool где находится? wink

Gradient Tool нашелся, спасибо! =)))
#9 написал: hdOgre (31 октября 2007 19:08)
Хороший урок - простой, короткий, еффектный и емкий. Редко когда такие качества сочетаются. Пасибо.

П.С.: товарищи недовольные - английский надо учить, или лингву ставить. Не распыляйтесь на мелко-критику.
#10 написал: kolasur (3 ноября 2007 21:11)
Урок супер

ЗЫ почемуйто у всех русский фотошоп, у мя английский bully [/hide]
#11 написал: Artes (8 ноября 2007 00:42)
3AHYDA,
kurtov,
Что вы LuLu грузите... вам надо вы и разбирайтесь... спасибо скажите что хоть что-то поняли... у меня тоже Русский фотошоп, так ниче разбираюсь и не жужу bully

урок странный но прикольная штука получилась =)
#12 написал: Teolinka (17 ноября 2007 15:22)
пойдёт на пользу дизайнерам)
#13 написал: Алеххх (22 ноября 2007 18:06)
чо за лузеры собрались... урок отличный.
а остальным: у кого стоит русский фотошоп тот НЕ дизайнер. Учите элементарный англ. чайники.
Автору respect.
For all stupid people: Yor fucking lusers!!! ))))
#14 написал: mazter-zero (2 декабря 2007 21:02)
wink Вот умора ))) Я не могу юзать Фотошоп на рус.яз
#15 написал: Mars (8 декабря 2007 10:02)
Толи я дуб, толи чтото в этом уроке недогнал
4 попытки и в результате нечего

хотя чтото стало получаться, но почемуто не так как в примере.
Как у других?
#16 написал: tango (23 декабря 2007 01:02)
У меня все получилось, только кажется кнопка немножко, совсем немножко светловата от оригинала. Но все получается!! У меня Мастер крейтив сьют 3-и (енто для тех у кого с английским плохо winked ) не русифицирован. Все понятно. Спасибо за урок.
#17 написал: SimBioZz (10 января 2008 16:37)
Elliptical Marque- как это по руски что ето ?? Вопроос не по теме)))
#18 написал: SilentHunter (11 января 2008 05:21)
Цитата: SimBioZz
Elliptical Marque- как это по руски что ето ?? Вопроос не по теме)))

Это инструмент "Круглое выделение" или как там в переводе... (Используйте англ версию фотошопа... это проще и удобнее... Раньше у самого и дома и на работе стояли русские версии.. в обоих перевод разный... и не поймешь чего и куда надо...) winked

Урок хороший, только в пункте 12 надо наверное добавить строку относительно цвета заднего и переднего плана, перед применением фильтра Clouds (Облака)... Что бы один был светлый, другой - темный.. или что-то в этом роде...
#19 написал: ZAR (2 февраля 2008 13:35)
Я все понял, но у меня вопрос где можна достать перевод с русского на английский? У меня CS3! Я когда ставил, у меня не спрашивало какой язык
я б хотел а сразу на русский!!!
#20 написал: lhvr (19 февраля 2008 02:08)
Я вообще не понимаю, для кого уроки???? для знающих людей они не нужно, а для чайников тут нифига не понятно!!! Если вы уж пишете уроки, то пишите подробно все от начала до конца, вплоть до того, как создать "новый документ"!!!
#21 написал: Waltz (4 апреля 2008 21:54)
Спасибо за урок! А так, в идеале хотелось бы не просто как обезьяна, повторять все что написано, а понимать для чего делается каждый шаг. Какие шаги обязательны для создания эффекта шара, какие для стекла, какие для декора, какие корректирующие и т. д.
#22 написал: CryeD (17 апреля 2008 21:01)
Класный урок, пасиб fellow , вот только не могу понять что ето :

"(чтобы сделать идеально круглым удерживайте при выделении кнопку Shift)"
И еще, хорошо что я понял, а вот новис не поймет Filter > "C"ketch > Chrome, Sketch пишется через "S" !!!!
#23 написал: Emperio (8 мая 2008 20:20)
Хочеш стать мастером PHOTOSHOP поставь английскую версию. Блин большенство уроков для английских интерфейсов.
#24 написал: Onam (28 мая 2008 16:18)
У меня тоже русская сначала была.Но уроки все на инглиш.Я удалил и скачал русскую=)!а урок рально клёвый!
#25 написал: onam (29 мая 2008 12:47)
Тоесть инглиш я скачал а не рус=)
#26 написал: sviat (17 июля 2008 21:22)
кнопку сделал. прикольно получилось. а что такое Overlay до сих пор непонял. bully
#27 написал: Rembrandt (18 августа 2008 11:21)
Спасибо LuLu , буду использовать на своем сайте
#28 написал: flowering (18 августа 2008 12:22)
sviat,
Overlay - Перекрытие, насколько я знаю
Select > Modify > Contract - Выделение > Модификация > Сжать
#29 написал: airpups (13 мая 2010 22:51)
Одна просьба у вас очень хорошые уроки , но я в фотошопе не давно и пользуюсь руской версией и я не понима когда вы пишете в шагах куда ити например " Select > Modify > Contract" можна писати и по англ. а в душках по рускому ????
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.
Навигация по сайту
Популярные статьи

Друзья
elLf houSE
Арт Студия Black Nephrite
Музкальные новости Германии
Мир фотошопа
Реклама

Рейтинг блогов

Rambler's Top100
Главная страница | Регистрация | Добавить новость | Новое на сайте | Статистика

При перепечатке материалов с сайта ссылка на источник обязательна (кликабельная и не шифрованая).
Запрещено вносить изменения в графический материал, например, обрезание водяного знака или перекрытие его своим знаками.