Eine Kurzanleitung, wie man eine formschöne Navigationsleiste für Webseiten kreiert.
Anwendung: Adobe Illustrator
ein neues Dokument öffnen und ein Rechteck aufziehen – logisch.
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.
In das Rechteck lege ich erneut ein Rechteck mit ähnlichem Farbverlauf. Dieser sollte um einen Hauch heller sein.
Diesem Rechteck verpasse ich einen Schlagschatten. Effekt–Stilisierungsfilter–Schlagschatten (eh schon wissen).
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)
diesem Rechteck verpassen wir einen simplen linearen verlauf von schwarz nach weiß, welchen ich an den Enden etwas “hereinziehe”.
Damit ich jetzt die Alphamaske Deckkraftmaske) erstellen kann für das Rechteck, markiere ich beide kleine Rechtecke und erstelle eine Deckkraftmaske.
Eigentlich sollte der Button dann schon fertig sein.
Ein paar mal kopiert und in einer Reihe aufgefädelt und schon hat man seine Navigationsleiste.
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.
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.
Design by Graph Paper Press
Beiträge abonnieren
Kommentare abonnieren
Kompletter Inhalt © 2010 von PROVID Videoproduktion - Imagefilm - Hochzeitsfilm - Hochzeitsvideo - Weddingcinematographie - Hochzeitsfoto
Facebook Fanpage PRovid Wedding Cinematography
Hochzeitsvideo.at
PROVID VIDEO & DESIGN
xing
MEDIAMOVEMENT