Tutorial — stylish Navigation-Buttons

Eine Kurzanleitung, wie man eine formschöne Navigationsleiste für Webseiten kreiert.

Anwendung: Adobe Illustrator
navlist_01.gif ein neues Dokument öffnen und ein Rechteck aufziehen – logisch.

button8.gif
Diesem Rechteck verpasse ich einen Verlauf. In diesem Fall von Schwarz nach Dunkelgrau, der Unterschied soll nicht besonders groß sein und nur marginal erkennbar sein.
button7.gif
In das Rechteck lege ich erneut ein Rechteck mit ähnlichem Farbverlauf. Dieser sollte um einen Hauch heller sein.
button6.gif
Diesem Rechteck verpasse ich einen Schlagschatten. Effekt–Stilisierungsfilter–Schlagschatten (eh schon wissen).
button5.gif
damit der Button oben deckend und unten transparent ist und diese Transparenz linear nach unten zunimmt, muss ich ihn mit einer Alphamaske versehen. Dazu legen ich über das bereits bestehende kleine Rechteck ein weiteres (kann ruhig ein wenig größer sein)
button4.gif
diesem Rechteck verpassen wir einen simplen linearen verlauf von schwarz nach weiß, welchen ich an den Enden etwas „hereinziehe“.
button3.gif
Damit ich jetzt die Alphamaske Deckkraftmaske) erstellen kann für das Rechteck, markiere ich beide kleine Rechtecke und erstelle eine Deckkraftmaske.
button2.gif
Eigentlich sollte der Button dann schon fertig sein.
Ein paar mal kopiert und in einer Reihe aufgefädelt und schon hat man seine Navigationsleiste.
button1.gif
Eigentlich hat es mir in Schwarz bzw. Dunkelgrau gar nicht so gut gefallen. Noch besser wirken die Buttons in etwas helleren Farben. Kein Problem umfärben und schon ist das neue Buttonset fertig.
button1_blau.gif

Speichern nicht vergessen, damit die nächste Webseite auch mit einer ähnlich schönen Leiste geschmückt werden kann.

Slicen, exportieren, css schreiben und in die Webseite einfügen – viel Spaß beim nachahmen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.