3D-knop

Omdat de meesten Photoshop gebruiken en Fireworks amper kennen, zal ik in deze tutorial proberen alles zo duidelijk mogelijk uit te leggen.
Als er nog dingen niet duidelijk zijn mag je ze altijd vragen ;-)

Dus wat gaan we maken? Een soort van 3d-knop in Fireworks.
Dit dus ongeveer:

» Stap 1
Start eerst Fireworks op, anders kunnen we niet veel tekenen he.
Maak dan een nieuw blad via "File > New" of de sneltoets Ctrl-N.
Stel als grootte in dat hij 150px breed moet zijn, en 40px hoog.

» Stap 2
Maak dan een "Rounded Rectangle" aan.
Dit doe je door aan je linkerkant (of waar die balk bij jou ook staat) op het vierkantje te "schuiven" met je muis om het sub-menu te zien.
Daar kan je de "Rounded Rectangle" selecteren.

» Stap 3
Nu kan je je afgeronde rechthoek gaan tekenen op je blad.

Als je hierop klikt komen er gele ruitjes tevoorschijn.

Met het ruitje helemaal buitenaan (op de figuur staat deze in het grijze gedeelte) kan je de afgeronde rechthoek groter of kleiner maken.
Als je op de 4 andere klikt kan je de afronding aanpassen naar hoeken van 45° of een omgekeerde afronding.
Door deze te slepen kan je de afronding groter of kleiner maken.
Deze zaken hebben altijd effect op alle hoeken, tenzij je ALT ingedrukt houd tijdens het klikken, dan geldt dit alleen voor die bepaalde hoek.

» Stap 4
Nu gaan we de kleur ervan aanpassen.
Klik op je rechthoek om hem te selecteren.
Klik dan onderaan op het vierkantje naast het potje verf (niet naast de pen, die is voor de randen) om de kleur te kunnen aanpassen.
In dit voorbeeld heb ik een flashy-groen gekozen (#00FF00).
Als je meer kleuren wil als deze, klik dan op het circeltje met allemaal kleuren in rechtsbovenaan.
Het witte kadertje dat met rood doorstreept is ernaast, is voor als je je rechthoek transparant wil.

» Stap 5
Voila, de rechthoek staat er, en hij is in onze gekozen kleur.
Alleen ziet hij er nog niet echt 3d uit, dus daar gaan we nu aan beginnen!
Selecteer eerst je rechthoek.
Klik dan in je properties-balk (die vanonder staat normaal) op de "+" naast "Filters".
Ga hier via "Shadow and Glow" naar "Inner Shadow".

» Stap 6
Je zal zien dat er in het witte vak onder de "Filters" en de "+" nu een vinkje, een i staat en "Inner Shadow".
Klik nu op die i in het blauwe circeltje.
Daar krijg je een klein venstertje waar je je schaduw kan instellen.
Eerst gaan we de kleur van de schaduw veranderen.
Dit doe je terug door op dat vierkantje te klikken (zie onderstaande figuur als het niet duidelijk is).
Ik heb hier voor een wat donkerder groen gekozen, namelijk #009900.

» Stap 7
Verander nu de 7 naast de 4 pijltjes in een 3.
Dit is de grootte van de schaduw.
Deze schaduw is nu af, je kan uit het menu gaan door op enter te drukken of met je muis op je blad te klikken.

» Stap 8
Maak nu een tweede "Inner Shadow" aan, en verander opnieuw zijn eigenschappen.
Als kleur heb ik zwart (#000000) gekozen, de grootte 5 en de hoek komt op 135 te staan.

» Klaar!
Voila, nu zou je knop er ongeveer zo moeten uitzien.

Als afwerking kan je er ook nog tekst opzetten als je wil, door de "Text tool" (snelkoppeling T) te gebruiken.