Tutorialbeschreibung

Web: Stylishes 3D Menü

Web: Stylishes 3D Menü

Schritt 1:
Nun gehts los. Erstellt ein neues Bild mit der Breite von 250 Pixel und einer Höhe von 500 Pixel. Wählt wie ich, einen dunkelgrauen Hintergrund.

Bilder

Schritt 2:

Nun ziehen wir uns ein paar Hilfslinien. Dazu klickt mit links auf das Lineal, haltet die Taste gedrückt und zieht den Cursor ins Bild. Falls ihr kein Lineal seht, geht in der Menüleiste auf Ansicht->Lineal.

Bilder


So sollte es nun ungefähr aussehen.

Schritt 3:

Wählt nun das Zeichenstift Werkzeug und klickt in jede Ecke des Rechtecks.  Achtet darauf, dass oben in der Symbolleiste Pfade Aktiviert sind. Jetzt haben wir einen sog. Pfad erstellt.

Bilder


Schritt 4:

Wählt nun das Punkt-Umwandeln-Werkzeug.  Es findet sich beim Zeichenstift Werkzeug. Klickt nun in eine Ecke eures Pfades, lasst die Maustaste gedrückt und zieht die Ecke ründlich. Dies wieder holt ihr an allen Eckpunkten. Es sollte nun so in etwa aussehen.

Bilder


Desweiteren erstellt ein Ebenenset mit einer Ebene darin. Das Set ist das Ordnersymbol links befindlich vom Ebene erstellen Symbol.

Schritt 5:

Klickt mit der rechten Maustaste auf den Pfad und macht Auswahl erstellen. Weiche Kante sollte einen Wert von 0  betragen. Füllt die Auswahl mit Schwarz. Nun kopiert ihr diese Ebene nochmal und kehrt die Farben mit Strg+i um. Nun haben wir 2 Ebenen. Die Weisse oben und die Schwarze darunter.

Schritt 6:

Selektiert die Weisse Ebene und geht in der Menüleiste auf Bearbeiten -> Frei transformieren. Ändert die Höhe auf 93%.

Bilder


Schritt 7:

Dupliziert die Weisse Ebene und geht im Menü Bild auf Einstellungen-> Helligkeit/Kontrast. Spielt mit den Reglern herum, bis die Ebene ungefähr die gleiche Farbe hat wie euer Hintergrund. Nun Transformieren wir diese Ebene noch einmal, diesmal aber in Breite und Höhe. Also stellt die Höhe auf 101% und die Breite auf 90%.

Bilder


Okay, das sieht doch nun schonmal ein wenig nach 3D aus. Mit Ebeneneffekten runden wir das ganze nun noch ab.

Schritt 8:

Klickt mit der rechten Maustaste auf die weiße Ebene und wählt Fülloptionen. Wählt Schatten nach Innen, setzt den Winkel auf 90° von oben, stellt die Distanz auf 1 und die Größe auf 7.

Bilder


Wiederholt diesen Schritt mit der grauen Ebene. Allerdings stellen wir nun bei der Distanz einen Wert von 20 ein und bei der Größe einen Wert von 27. Kann auch variieren, kommt halt drauf an wies nun ausschaut bei euch. So, wir sind fast am Ende.

Schritt 9:


Wählt nun eine futuristisch aussehende Schrift und erstellt den Text "Navigation".
Den ersten Buchstaben habe ich in Grün gefärbt, die restlichen in Weiss. Legt sie zentriert im oberen Rahmen ab.
So...
Bilder


All done :)

Wie ihr seht, habe ich meine Schrift gespiegelt und unten im Balken nochma eingefügt. Ihr könnt halt noch beliebige Details adden. Dies ist jedoch erstmal das Grundgerüst. Ich hoffe, euch hat das Tut gefallen und ihr konntet was lernen dabei.

MfG pitTti aka radianc3

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von phamo
  • 30.10.2008 - 01:32

nettes TuT, Navi sieht auch Recht gut aus, bei mir ist nur links und rechts der Bogen vom grauem etwas eckig an manchen Stellen, gibts da ne möglichkeit es abzurunden ?

Portrait von pitTti
  • 20.06.2009 - 14:44

Anstatt den Pfad in eine Auswahl umzuwandeln einfach den Pfad füllen.

Portrait von dim5252
  • 29.10.2008 - 08:20

Sehr nice, neue Idee für meine Navi xD

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 26.10.2008 - 13:37

Fehlt da in Schritt 7 nicht das Füllen mit Grau? Ohne kann ich an den Helligkeit/Kontrast Reglern drehen, wie ich will - das Weiß bleibt weiß.
Ansonsten schön gemacht.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 22.10.2008 - 17:45

Sehr verständlich geschrieben und nettes Ergebniss!

Portrait von topdesign
  • 21.10.2008 - 19:02

spitzen tut, Hut ab!!!

mfg kurt

Portrait von Operhalski
  • 03.10.2008 - 23:32

jo tolles tutorial! hat mir auf jeden fall weiter geholfen;)

Portrait von Flash123
  • 30.09.2008 - 01:52

is gut gelungen ! Auch wenn ichs mir schwieriger vorgestellt hab ^^

Portrait von Cyclon_
  • 25.09.2008 - 20:07

Danke, werd ich direkt mal nachbauen!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 17.09.2008 - 16:13

muss man erstmal drauf kommen... nettes tut ;) weiter so

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 07.09.2008 - 01:43

nicht schlecht... sieht gut aus

Portrait von Blackrike
  • 21.07.2008 - 23:59

nett :) sieht auch gut aus ;)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.06.2008 - 23:20

stellt man sich schwieriger vor als es ist
top tutorial

Portrait von ItsNeko
  • 23.05.2008 - 06:46

Schönes design, gefällt mir echt gut^^

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 22.05.2008 - 18:26

echt geil sieht super aus danke

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 04.05.2008 - 12:32

thx sehr schönes tut werd ich bestimm noch auf meine hp einbinden:)

Portrait von Salamijunge
  • 24.04.2008 - 14:28

voll cool...echt geil =) danke danke

Portrait von deereper
  • 23.04.2008 - 08:21

sehr cool, danke!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 21.03.2008 - 09:19

Super hat sofort geklappt

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 19.03.2008 - 15:51

Dank dir auf sowas kam ich noch nie. THX

Mehr anzeigen

x
×
×