Du bist hier::--Homepagebuttons oder wie man ein ansprechendes Menü mit Photoshop macht

Homepagebuttons oder wie man ein ansprechendes Menü mit Photoshop macht

Eines der schwierigsten Dinge beim Erstellen einer Homepage ist das Menü.

Hier soll an einem Beispiel gezeigt werden wie man so ein Menü für eine Homepage mit Photoshop erstellen kann. Zuerst erstellen wir ein neues Dokument. Ich habe hier die Maße 400 x 200 gewählt da ich die Button nachher noch duplizieren möchte.
Dann zeichnen wir ein Rechteck mit dem Radius 13 px (kann man oben einstellen wenn man das Werkzeug auswählt.)
Die Farbe ist dabei egal; weil wir eh jetzt einen Verlauf einfügen.

menu/HomeButt1.jpg

Dazu klickt man auf menu/HomeButt2.jpg

Danach kommen folgende Einstellungen…

Schlagschatten :

Deckkraft = 36 %
Winkel = 90 Grad
Distanz = 2 Pixel
Überfüllen = 0 Pixel
Größe = 5 Pixel

Verlaufsüberlagerung :

Deckkraft = 100 %
Winkel = 90 Grad
Skalierung = 100 %

Den Verlauf wählt ihr am besten so wie auf der Abbildung.
Auch die Abstände sollten ungefähr gleich sein.

menu/HomeButt3.jpg

So sollte es dann aussehen:

menu/HomeButt4.jpg

Dann wählen wir noch die Kontur:

Größe = 1 Pixel
Deckkraft = 0 %
Position = außen
Füllmethode = normal
Farbe = weiß (ffffff)

Der einzelne Button wäre damit fertig….
….aber ich dupliziere diese Ebene zweimal und schiebe die Button jeweils nebeneinander.

menu/HomeButt5.jpg

Nun wieder eine neue Ebene…
Dann wähle ich das Eigene- Form- Werkzeug (Klammern)…..

menu/HomeButt6.jpg

…wähle einen Stil (glasig) und ziehe es über die Buttons

menu/HomeButt7.jpg

Dann wieder eine neue Ebene….
…und ich fülle die Mitte mit dem Abgerundetes-Rechteck-Werkzeug in dem „Lime-Green-Glas-Stil“

menu/HomeButt8.jpg

Jetzt nur noch der Text….. und den natürlich wieder in einer neuen Ebene.
Ich habe hier die Pipette genommen und in die Mitte des „Glas-Stils“ geklickt.
Nun habe ich die selbe Farbe wie in dem „Glas- Stil“
Hat man die einzelnen Button beschriftet geht man nur noch auf Ebenenstil Schlagschatten und wählt diese Einstellung:

menu/HomeButt9.jpg

Und so sieht’s dann fertig aus:

menu/HomeButt10.jpg

Viel Spaß beim Nachbasteln !!
Gruß E_O

Autor: E_O

Von |2018-07-25T14:46:02+00:00Juli 19th, 2006|Kategorien: Bildbearbeitung|0 Kommentare

Über den Autor:

Hinterlassen Sie einen Kommentar