Windows Bevel

Info 
Door: Onbekend lid Moeilijkheidsgraad: 1/3
Views:13.437Reacties: 6(Bekijken)
  Log in om zelf te reageren
 Waardering:9/10 (4 stemmen)



Iedereen ziet ze, maar niemand let er op, de Windows Bevel. Wat is het? Het standaard effectje dat ervoor zorgt dat je Windows knoppen 3D lijken... Heel eenvoudig, en toch mooi. Je kan het meteen namaken als je even inzoomt op zo'n knop, maar ik leg het toch even uit :wink:.

Het eerste wat je moet doen is een kleurenschema kiezen. Wat is een kleurenschema? Niet veel bijzonders, gewoon een aantal tinten van dezelfde kleur. Je hebt er 4 nodig. Van licht naar donker.

Ik kies:

http://users.pandora.be/skralan/webnation/windowsbevel/97FF92.jpg #97FF92
http://users.pandora.be/skralan/webnation/windowsbevel/6FBC6C.jpg #6FBC6C
http://users.pandora.be/skralan/webnation/windowsbevel/5E9E5A.jpg #5E9E5A
http://users.pandora.be/skralan/webnation/windowsbevel/487546.jpg #487546

We beginnen met een nieuw document. (File > New of Ctrl + N).

Ik neem mijn derde kleur (#5E9E5A) als achtergrond kleur van de omgeving van de knop.

http://users.pandora.be/skralan/webnation/windowsbevel/knop1.jpg Fig. 1. Achtergrondkleur.

We stellen dit onze knop wanneer er geen rollover is.

Nu gaan we het rollover effect maken.
Ik stel mijn eerste kleur (#97FF92) in als voorgrond kleur, en trek 2 lijnen als randen van mijn knop met het pencil (http://users.pandora.be/skralan/webnation/tools/pencil.png).

Tip: Als je Shift indrukt, en trekt een horizontale lijn, zal deze perfect horizontaal zijn, ook als je even afwijkt van het pad. Hetzelfde geldt voor verticale lijnen.

http://users.pandora.be/skralan/webnation/windowsbevel/knop2.jpg Fig. 2. Lichte Randen (ingezoomd).

We doen nu hetzelfde met het donkerste kleur (#487546), maar dan onderaan en rechts.

http://users.pandora.be/skralan/webnation/windowsbevel/knop3.jpg Fig. 3. Donkere Randen (ingezoomd).

Als we nu even het plaatje op 100% van de grootte bekijken zien we al onze knop.

http://users.pandora.be/skralan/webnation/windowsbevel/knop4.jpg Fig. 4. Windows Bevel Effect.

In feite ben je dus klaar, maar om het te perfectioneren gebruik ik mijn tweede lichtste kleur (#6FBC6C). Dit is de achtergrondkleur van de knop in rollover status.

http://users.pandora.be/skralan/webnation/windowsbevel/knop5.jpg Fig. 5. Einde.

Op deze pagina kan je het effectje in al zijn glorie en volmaaktheid bekijken :wink:.

Zo, dat was het dan al weer. Hopelijk heb je iets bijgeleerd, en als iets niet duidelijk is, of je hebt ergens vragen bij, gelieve ze in het forum te stellen.
Je mag je creaties altijd tonen adhv een reactie op deze tutorial.

6 reacties
.:ME:. Geplaatst op 20-08-2006 om 21:22
 

Regular
Nice!

Greetz,

ME
Onbekend lid Geplaatst op 23-04-2006 om 19:11
 

Spammer
kheb je site gezien skralan egt mooooi :O
Yjax Geplaatst op 24-12-2005 om 19:53
 

Regular
Dit is een heel makkelijke techniek. Dit kan zelfs met paint.
Michielvsb Geplaatst op 01-07-2005 om 18:35
 

Regular
Als je het omgekeeddoet, eerst donker en dan licht dan krijg je de knop naarbinnen
Onbekend lid Geplaatst op 01-02-2005 om 18:18
 

Spammer
:wink: ty

Pagina 1 2 

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