Doorzichtige Glazen Button

Info 
Door: Onbekend lid Moeilijkheidsgraad: 2/3
Views:19.183Reacties: 17(Bekijken)
  Log in om zelf te reageren
 Waardering:7.8/10 (4 stemmen)



Deze tutorial leert je een glazen knop maken voor je website. Let er wel op dat je misschien een aantal keer zal moeten proberen om het gewenste effect te verkrijgen. Volhouden is de boodschap want het resultaat is het zeker waard.

Open een nieuw document met witte achtergrond.

Op een nieuwe layer tekenen we met de marquee tools een vorm van een knop. Ik gebruikte 2 cirkels en verbond deze met een rechthoek.

http://users.pandora.be/skralan/webnation/glass_pill/selectie.jpg Fig. 1. Selectie.

We vullen deze met zwart, en zetten daarna de Fill op 0% in het layers palette.

http://users.pandora.be/skralan/webnation/glass_pill/fill0.jpg Fig. 2. Fill 0%.

We behouden de selectie. Dit doen we totdat we klaar zijn met alle layer styles toe te passen.

Dubbelklik op de layer met de selectie. Hierdoor verschijnt het layer styles venster.
De eerste layer style die we toepassen is Drop Shadow. Met volgende settings:

http://users.pandora.be/skralan/webnation/glass_pill/drop_shadow.jpg Fig. 3. Drop Shadow.

Volgende layer style is Inner glow, met volgende settings:

http://users.pandora.be/skralan/webnation/glass_pill/inner_glow.jpg Fig. 4. Inner Glow.

Volgende layer style is Bevel and Emboss. Volgende settings:

http://users.pandora.be/skralan/webnation/glass_pill/bevel_emboss.jpg Fig. 5. Bevel And Emboss.

De gloss contour bij de bevel and emboss ziet er zo uit:
Probeer deze zo goed mogelijk na te doen.

http://users.pandora.be/skralan/webnation/glass_pill/bevel_emboss_contour.jpg Fig. 6. Bevel And Emboss > Gloss Contour.

Nu gaan we naar de contour subsectie van Bevel and Emboss, volgende settings:

http://users.pandora.be/skralan/webnation/glass_pill/contour.jpg Fig. 7. Contour.

De laatste layer style is Satin, volgende settings :
De contour bij satin is een standaard van Photoshop (Inverted cone), de vorige contours moest je zelf maken, deze dus niet. Klik op het pijltje naast de contour en kies de geinverteerde kegel.

http://users.pandora.be/skralan/webnation/glass_pill/satin.jpg Fig. 8. Satin.

Hit OK, en bewonder je resultaat.

http://users.pandora.be/skralan/webnation/glass_pill/glass_pill.jpg Fig. 9. Glazen pil.

Zo, in feite ben je klaar. En zoals de titel van de tutorial verraadde, is de button transparant.

Mijn creatie:

http://users.pandora.be/skralan/webnation/glass_pill/pil_bg.jpg Fig. 10. Glazen pil met achtergrond.

Voeg eender welke achtergrond in de layer net onder die van je button, en om een realistisch resultaat te bekomen kan je het gebied onder de pill een Gaussian Blur effect geven.

http://users.pandora.be/skralan/webnation/glass_pill/pil_bg_blur.jpg Fig. 11. Glazen pil met geblurde achtergrond.


Zo, dat was het dan al weer. Hopelijk een informatieve tutorial waar je veel aan gehad hebt :wink:. Vragen kan je in het forum stellen. Je creaties mag je altijd tonen adh van een reactie op deze tutorial.

17 reacties
takje Geplaatst op 18-03-2008 om 21:41
 

Regular
Mooi, maar helaas kan ik de settings niet meer lezen (stonden op de afbeelding)
Misschien er even bij typen??
Mister S Geplaatst op 12-09-2007 om 15:45
 

Regular
hoe kan je die gloss contour aanpasse dat lukt me niet
terwijl ik wel de contour elements kreeg aangepast
??
joeyjo0 Geplaatst op 02-07-2007 om 15:11
 

Regular
Deze tut is erg goed:
Ik heb er een pattern overlay overheen gedaan en dit kwam eruit:
http://img521.imageshack.us/img521/1490/joeyjo0button2bd0.png
Leonard Geplaatst op 11-05-2007 om 11:01
 

Regular
Hoe zet ik tekst op de glazen button zonder dat de transparantie verdwijnt?
gloomy Geplaatst op 21-02-2007 om 09:34
 

Regular
hmmmzz screen.
sta op de eerste plek in het 3de vakje bij mode. :P
boven lighten. misschien heb je daar wat aan :P

Pagina 1 2 3 4 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder