Преглед на урок

Светещ стъклен бутон

Светещ стъклен бутон




1. Правите нов документ 150x50px и го запълвате с черен цвят

2. Правите нов Group (Layer -> New -> Group) и го кръщавате "glowing glass".

3. Правите нов слой и го кръщавате "glass"

4. Взимате инструмента Circle Marquee Tool с следните настройки



Сега правите окръжност в лявата страна на документа. Ще забележите, че окръжността не променя размера си.

Edit -> Fill и запълвате с бял цвят. Не деселектирайте окръжността засега.



Задръжте Shift и започнете да натискате дясната стрелка на клавиатурата. Така ще местите селекцията през 10 пиксела Преместете я колкото искате да ви е дълъг бутонът. Аз я преместих 9 пъти. Запълнете и тази селекция с бяло. Деселектирайте



5. Сега идва забавната част. Бутонът все още не прелича на такъв, но ние ще го направим. Избирате инструмента Rectangle Marquee със следните настройки:



Сега правите правоъгълник обхващащ двете половини на окръжностите:



Запълвате с бяло и деселектирате.



6. Вече имате оформен бутон. Време е да го оцветим за да стане светещ стъклен бутон. На слоят "glass" кликвате с дясното на мишката и избирате Blending Options, със следните настройки (синьото което ползвам е #00FFF7):

Натиснете върху изображението за цял размер


Натиснете върху изображението за цял размер


Натиснете върху изображението за цял размер


Натиснете върху изображението за цял размер


Натиснете върху изображението за цял размер


Натискате Ctrl+I. Променяте Blending Mode на слоя "glass" на Screen



7. Време е да направим отражение на бутона за да добие "стъклен" вид. Направете нов слой и го кръстете "reflection"

Задържайки Ctrl, кликнете на слоят "glass". Натиснете D и изберете Gradient Tool. Уверете се, че опциите на инструмента са като по долу показаните:

Натиснете върху изображението за цял размер


Сега задръжте Shift и изтеглете една линия от долната част на бутона до горният му край. Сменете Blending Mode на слоя "reflection" на Screen и намалете Opacity на 32%

Вземете Circle Marquee Tool и направете селекция подобна на тази отдолу:



Натиснете Delete на клавиатурата и деселектирайте (Ctrl+D)

8. Бутонът е готов и е време да добавим текст. Можете да използвате какъвто шрифт искате но аз ви препоръчвам този "BitDust 2". С инструмента Typography Tool напишете нещо на бутона с бял цвят.



Изглежда малко скучно нали? Нека добавим Blending Options на слоя с текста:

Натиснете върху изображението за цял размер


Бутонът е готов, но ако искате бутона още по красив, продължавайте да четете

9. Сега ще направим отражение на текста. Дублирайте слоят с текста и отидете на Edit -> Transform -> Flip Vertical

Сега теглете го надолу докато е около 1 пиксел под оригиналния текст.



Отидете на Layer -> Add Layer mask -> Reveal all. Изберете Gradient Tool и задържайки Shift изтеглете една линия от долният край на преобърнатият текст до горната част на правилният текст.



Трябва да имате красиво отражения на вашия текст

10. Сега ще добавим делител и стрелка в нашия бутон. Направете нов слой и го кръстете "divide". Вземете Rectangle Marquee Tool с настройки:

Style: Fixed Size
Wide: 1px
Height: 18px

и нагодете линията да започва 1 пиксел над най-долната точка на бутона и да свършва 1 пискел преди най-горната.



Сега запълнете с черно и преместете селекцията 1 пиксел по наляво и запълнете с бяло. Променете Blending Mode на слоя "divide" на Soft Light. Направете нов слой и го кръстете "arrow". Вземете инструмента Polygonal Lasso Tool и направете селекция подобна на тази:



Запълнете селекцията с бяло

Вече сме готови с бутонът и екстрите!



Когато искате да използвате този бутон някъде, просто провлачете групата "glowing glass" в всеки документ колкото пъти искате. Толкова е лесно. Ако фонът на документа в който слагате бутонът е много светъл променете цвета на текста на черен. Ако сте направили рефлекция на текста не забравяйте да промените и нейният цвят. За да смените текста просто използвайте Text Tool. За да смените цвета на бутона, отидете на Blending Options на слоя "Glass" и сменете цветовете.

Източник на урока: www.n-sane.net

Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: PukeMachine

Коментари

pi4agata2

Тоя урок е супер!Ето аз какво направих:

http://free.linkos.bg/bitbucket/P2%20button.png

(посмених цветовете защото така повече ме кефи)

PukeMachine

радвам се че ти харесва !

Gaara

Добре. Имам проблем точно с този урок. Тоест те са 2:

1) - Когато направя 7ма точка, не се оцветява по същият начин както е на снимките.
2) - Когато направя селекцията(момента преди delete & deselect). Правя точно както е описано, но нищо не се изтрива.

Какво и каде бъркам? Помогнете

Kommek

бате тва е ебати чудесията ама колко и да се труда да го праа не стаа

s7iVuR

Урока е супер.Само не знам как мога да направя шрифта, които изтеглих използваем.Помогнете ми.

maqpen4eva

копираш файла, отваряш на диска С: папка Windows, в нея имам папка Fonts - отваряш я и в нея поставяш фаийла

maqpen4eva

Той си отива после при другите шрифтове във ФШ, когато добавяш шрифтове,няма нужда да рестартираш програмата за да се появят в менюто

PukeMachine

Ето резултата ми от урока, не е чак толкова труден, но не е за напълно начинаещи ;)

http://i112.photobucket.com/albums/n187/PukeMachine_2006/glassbuton.jpg

bel1a

Въобще нямам такъв инструмент "Circle Marquee Tool" !!! Ползвам Photoshop 9.0, и ако вие ползвате по-стара и тук името на инструмента е друго, кажете как е !!!

maqpen4eva

Инструмента в стъпка 4. е преименуван в по-новите версии на Eliptical Marquee Tool (M)

http://i113.photobucket.com/albums/n220/maq_bg/Instrumenti%20PS/ElipticalMarqueetool.jpg

maqpen4eva

Цялата хамалогия до стъпка 6. може да се избегне само с един инструмент:

http://i113.photobucket.com/albums/n220/maq_bg/Instrumenti%20PS/buton.jpg

bel1a

Мерси ! ;)

LuCiFeR

аз също имам проблем прая сичко както трябва до 5 стъпка вкл. после 6 стъпка като я напрая "Натискате Ctrl+I. Променяте Blending Mode на слоя "glass" на Screen" бутона въобще не изглежда така и от там докато го завърша никва прилика :(

LuCiFeR

тей е преди да натисна "Ctrl+I"

http://lucifer90.hit.bg/1.gif

след
http://lucifer90.hit.bg/2.gif

Blending Mode на слоя "glass" на Screen =>
http://lucifer90.hit.bg/3.gif

7 стъпка също не ми е много лесна

LuCiFeR

искам да са извиня за флода :) като го напраех с 9 пиксела както си казал в 4 стъпка успях :)

mikeff

когато правя кръгчетата ми изписва

http://www.picsbg.com/uploads/47b76dd7c9.png
защо :(

Shackus

имам проблем при натискане на ctrl и мишката и после D нестава нищо помогнете!!!

ReXTaN

Само да попитам къде е това Circle Marquee Tool ?

maqpen4eva

Прочети предишните коментарии и ще видиш, че този въпрос вече е задаван и е отговорено

goshkoutd

Ей заради такива идиотски обяснения много от нас остават "начинаещи и аматьори".Малко критика ,при блендинг опшънс е Custom , a моето Default кайи какви промени правиш на Styles защото това е най-важната от всички стъпки !!!!!!!!!!!!!!!!!!!!!!!!!!!!!

PukeMachine

На къстъм е щото автора е снимал блендинг опциите след тва - "Натискате Ctrl+I. Променяте Blending Mode на слоя "glass" на Screen"

Dartz001

хмм тая стъпка дето тряя да се натисне ctr+i не става,не схващам та искам да си напраа един такъв бутон за фоума ми :P

PukeMachine

Тая стъпка е малко излишна, тя има за цел да направи невидим белият бутон и да остави само ефектите му видими (въпреки че бялото е покрито с градиент ефект) като с Ctrl+I го направи от бял-черен и сложен на Screen (което показва белите области само), той изчезва. Тва може да се направи и като Fill се сложи на 0%.

Dartz001

фенкс!!! :) Това ми беше нужно ^_^

VincenzobGR

Учока е супер! Много е добър!
Но не ми е ясно как да изрежа само бутона без черния фон, за да го ползвам...

™JAMEZ™

как да направе кръговете еднакви???

HogFather

Всичко е первектно:

http://prazen.free.bg/test/b_home.gif

Обаче имам 1 въпрос - как да си го направя така че фона на бутона да не е черен а да се сменя в зависимост от фона на страницата. да кажем, че страницата е синя и бутона е зелен, но фона зад бутона да не е черен а да е син (от сорта на трансперън?) или трябва да ги сменям за всяка страница.

justin87

Здр аз също имам някои добри проекта някой може ли да ми каже как и аз да мога да ги покайа тук Моля Skype:Justin_bnb Благодаря от сега

purplex

някой може ли да ми помогне с тва че не мога да го направя :-) скайп ми е: cash16money

Toxic_Virus

Елементарно :)

deadhero

Прекрасен урок. Това е най-готиния бутон, който съм виждал. Не знам как да покажа моята работа, освен чрез този адрес:http://picbg.net/u/4193/6982/199142.jpg

ToshoCorporation

Само да попитам за справка. Защо не използваш (и в други уроци съм го виждал де) - Rounded Rectangle Tool (U) със зададен ъгъл 90 градуса ? Вместо да правиш 2 окръжности и после един правоъгълник. :) Иначе урока е 6 :)

XenaGabbi

На мен нещо не ми се получава - правя всичко както е описано,но не става! Както и да е следвах стъпките донякъде и си направих друг бутон,който е по-подходящ за сайта ми - урочето обаче доста помогна!

spell

Eто при мен какво стана :)

http://i841.photobucket.com/albums/zz331/super_cool_22/Untitled-1-1.jpg


Ето го .psd файлът
http://www.mediafire.com/?2w2ng5gtmam

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.