Meervoudige gradient

Info 
Door: Onbekend lid Moeilijkheidsgraad: 1/3
Views:14.669Reacties: 2(Bekijken)
  Log in om zelf te reageren
 Waardering:8/10 (2 stemmen)



Het zijn de eenvoudige dingen die je site mooi maken. In deze tutorial leer je alles over meervoudige gradients. Wat is dat precies? Een meervoudige gradient verschilt niet veel van een gewone gradient, je gebruikt gewoon meer dan twee kleuren. (Gradient is een overgang tussen twee kleuren).

Hier zie je voorbeelden van gradients die standaard in photoshop staan, en je dus ook het meest ziet op het internet.

http://users.pandora.be/skralan/webnation/multiple_gradient/gra1.jpg

http://users.pandora.be/skralan/webnation/multiple_gradient/gra2.jpg

http://users.pandora.be/skralan/webnation/multiple_gradient/gra3.jpg

http://users.pandora.be/skralan/webnation/multiple_gradient/gra4.jpg

http://users.pandora.be/skralan/webnation/multiple_gradient/gra5.jpg

Deze gradients bekom je makkelijk door eerst twee kleuren te selecteren in je toolbar (voorgrond- en achtergrondkleur). Vervolgens selecteer je de gradient-tool (http://users.pandora.be/skralan/webnation/tools/gradient.png
). Daarna selecteer je een van de gradient-typen in de opties-balk.

http://users.pandora.be/skralan/webnation/multiple_gradient/opties.jpg Fig. 1. Opties balk.

Als je nu een lijn trekt over je workspace, heb je een van de standaard gradients. Natuurlijk is dat voor ons niet voldoende, we gaan er een extraatje aan toevoegen, namelijk meerdere kleuren.

Het leuke hieraan is, is dat je heel eenvoudig een soort 3D effectje kan geven. Je ziet het wel op het einde van deze tutorial.

Ok, nu beginnen we eraan. Open een nieuw document (Bestand > Nieuw of Ctrl + N). Afmetingen doen er niet toe, achtergrond ook niet. In dit voorbeeld maak ik een menubalk, dus mijn afmetingen zijn 400 px breed en 30 px hoog.

Als eerste ga ik dus mijn 2 basiskleuren selecteren, dan klik ik op de gradient tool (http://users.pandora.be/skralan/webnation/tools/gradient.png).
Dan klik ik op het voorbeeld gradient in de opties-balk om de gradient editor te openen.

http://users.pandora.be/skralan/webnation/multiple_gradient/opties2.jpg Fig. 2. Opties balk.

http://users.pandora.be/skralan/webnation/multiple_gradient/editor.jpg Fig. 3. Gradient Editor.

Hierin ga je dus je gradient aanpassen.
http://users.pandora.be/skralan/webnation/multiple_gradient/editor2.jpg Fig. 4. Gradient Editor 2.

Klik net onder de kleurenbalk om nieuwe kleuren toe te voegen. Hiermee moet je zelf wat experimenteren.

Bij Color kan je de kleur van het punt veranderen. Bij position kan je heel nauwkeurig tewerk gaan door zelf procenten in te vullen.

Opacity kan je veranderen wanneer je een punt indicator selecteert die boven de balk staat. De opacity dient om transparantie te verkrijgen.


http://users.pandora.be/skralan/webnation/multiple_gradient/editor3.jpg Fig. 5. Gradient Editor 3.

Als je wat geexperimenteerd hebt, klik je gewoon op 'OK', en kan je je gradient tekenen.

Dit is mijn resultaat.

http://users.pandora.be/skralan/webnation/multiple_gradient/multiple_gradient.jpg Fig. 6. Eindresultaat.

Om het wat te perfectioneren kan je de inset lines tutorial volgen om je menubalk nog dat extraatje te geven.

Zoals bij elke tutorial die ik geschreven heb kan je de technieken voor meer dingen gebruiken dan wat ik in de tutorial zet. Zelf een beetje creatief zijn is de boodschap. Kijk maar eens op http://www.shareyourstory.nl voor andere toepassingsvoorbeelden.

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

2 reacties
Daaneo Geplaatst op 24-02-2006 om 20:43
 

Regular
Ik Krijg Iets Heel Doms
Daaneo Geplaatst op 24-02-2006 om 17:21
 

Regular
MOEILIJk Als je het op et eerste gezicht ziet
En Ik Zie hET Op Het eerste Gezicht :-P

Pagina 1 

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