Aqua button pro

1.
Ízelítőként álljon itt az a kép (lásd bekezdés alatti első kép), melyet a tutorial végére eredményként megkapunk. Ez a leírás a híres Aqua gomb majdnem azonos másolata. A leírás középhaladó szintű, ezért egy teljesen kezdő felhasználó számára esetleg gondot jelenthet, hogy bizonyos műveletekre csak hivatkozunk. Bár a könnyebb emészthetőség kedvéért én még finomítottam egy kicsit rajta.




Térjünk a lényegre! 



2.
Induljunk ki egy 400×300-as képből. Egy új rétegen (layer) (Layers fül > Create a new layer) hozz létre egy mintát (pattern) (Layers fül > Create new fill or adjustment layer > Pattern&) ahogy azt a kép mutatja. Használj 10-15% layer átlátszóságot (opacity). Azonban használhatsz saját mintát is, vagy akár az itt lévő képből is elkészítheted.


 



3.
Egy új csatornán (channel) (Channels fül > Create new channel) hozz létre egy pirula alakú gombot (Rounded Rectangle Tool > Radius=50px). Ahhoz hogy tökéletes legyen a dolog, a pirulának 311×96 pixel méretűnek kell lennie.


 



4.
Töltsd be a kiválasztást a pirula channel-jéről (Select > Load Selection&). Hozz létre egy új layert és töltsd ki a kiválasztást: R: 65; G: 113; B: 166; HEX: 4171A6; használd a Paint Bucket tool-t.


 



5.
Alkalmazd az Inner Shadow (Layer > Layer Style > Inner Shadow) layer stílust a pirula layer-re a képen lévő beállításokkal.


 


 


6.
Szintén alkalmazd a Bevel and Emboss (Layer > Layer Style > Bevel and Emboss) layer stílust a pirula layer-re ahogy a kép mutatja. 


 



7.
Majd a Satin (Layer > Layer Style > Satin) layer stílust.


 



8.
És a Gradient Overlay (Layer > Layer Style > Gradient Overlay) layer stílust.


 



9.
Töltsd be újra a kiválasztást a pirula channel-ről (ha nem lenne kiválasztva). Csökkentsd a kiválasztott területet méretét (Select > Modify > Contract)  10 pixel mellett kétszer. Majd lágyítsd a kiválasztott terület széleit 10 pixellel: selection (Select > Feather).


 



10.
Alt-click a New Layer gombon a Layer paletta alján. Hozz létre egy új Color Dodge layer-t color-dodge-neutral black color-ral. Töltsd ki a kiválasztást fehérrel; a Paint Bucket tool segítségével.


 



11.
Állítsd a layer Fill Opacity értékét 35%-ra (Layer > Layer Style > Blending Options). Szüntesd meg a kiválasztást (Select > Deselect).


 



12.
Alkalmazz Gaussian Blur (Filter > Blur > Gaussian Blur) filtert ahol a Radius értéke 10 pixel.


 



13.
Töltsd be a kiválasztást a pirula channel-ről és klikk az New Layer Mask (PS7-nél Add Layer Mask) gombra a Layer paletta alján.


 



14.
Válaszd ki a pirula layer-t és add a mask-ot ehhez. (PS7-nél már hozzáadtuk) Ismételd meg a 9. pontot. A pirula maszkot aktiválva töltsd ki a kiválasztást: R: 166; G: 166; B: 166; HEX: A6A6A6; a Paint Bucket tool használatával. Szüntesd meg a kiválasztást (Select > Deselect).


 


15.
Alkalmazd a Gaussian Blur filtert (Filters > Blur > Gaussian Blur) a layer mask-ra. Legyen az értéke 20 pixel.


 



16.
A Rectangular Marquee segítségével készíts egy téglalap alakú kiválasztást ahogy a képen látszik.


 



17.
Hozz létre egy új channel-t és töltsd ki a kiválasztást fehérrel (Paint Bucket tool-lal). Ferdítsd (Edit > Transform > Skew) a kiválasztást mint a képen (tartsd a Ctrl+Shift+Alt lenyomva, hogy szimmetrikus transzformációt érjünk el; az alsó sarkot mozgasd). Szüntesd meg a kiválasztást (Select > Deselect).


 



18.
Alkalmazz Gaussian Blur (Filter > Blur > Gaussian Blur) filtert ahol a Radius értéke 10 pixel.


 



19.
Válaszd a Image > Adjust > Levels-t. Állítsd az  Input levels-t 120, 1, 130-re és nyomj OK-t. Töltsd be a kiválasztást (Select > Load Selection) az erről a channel-ről.


 



20.
Hozz létre egy új layer-t. Állítsd a színeket feketére és fehérre (nyomj ‘D’-t). Használd a Linear Gradient tool-t, készíts egy átmenetet a kiválasztás aljától a tetejéig. Állítsd a Blending Mode-ot Screen-re és az Opacity-t 65%-ra.


 



21.
Írj rá egy feliratot, adj neki kevés árnyékot és van egy saját nagyon szép Aqua gombod. Szomjas vagy még?!

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét