Anzeige
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

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von M_Hilfe
  • 10.09.2010 - 12:20

Sehr gut gemacht !! danke

Portrait von racingfee
  • 07.07.2010 - 17:41

sehr gut danke,werd es ma versuchen

Portrait von xZ0RK
  • 26.04.2010 - 17:08

SEHR, GUT DANKE :)
werde ich mal testen

Portrait von Sqeezer79
  • 24.04.2010 - 13:29

Sieht super aus werd ich gleich mal Probieren

Portrait von ShadowVision
Portrait von Gugormilian
  • 07.04.2010 - 23:17

GEIL, schon nachgebaut, danke

Portrait von staxx78
  • 05.03.2010 - 18:22

Geiles Beispiel, muss ich zum üben gleich mal nachbauen ^^

Portrait von gabelstabler
  • 03.02.2010 - 07:44

Cooles tutorial,lecht zu verstehen und sieht sehr gut aus.

Portrait von Fact
  • 23.01.2010 - 17:37

Klasse erklärt! Weiter so! Das sieht sooo geil aus!! tHX

Portrait von Xenion88
  • 20.10.2009 - 14:58

sehr schickes Tutorial hat auf anhieb bei mir geklappt

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 20.07.2009 - 19:31

schick schick... ;-)

Portrait von dbcsound
  • 08.06.2009 - 11:39

Supergutes Tutorial - alles verstanden, alles auf Anhieb geklappt - weiter so!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 14.03.2009 - 13:03

Perfekt hat alles bei erstenmal geklapt DANKE

Portrait von mobi
  • 24.02.2009 - 11:58

Sehr nettes grundgerüst tut wo einem anfang viel hilft

Portrait von PrOOnOOb
  • 22.02.2009 - 17:21

Sehr gut genau das brauche ich nun thx

Portrait von Saint
  • 18.01.2009 - 02:41

net schlecht gut erklärt

Portrait von suizidmoehre
  • 01.12.2008 - 13:24

sehr schön... wollt ich unbedingt mal probiert haben...

Portrait von hellraiser543
  • 12.11.2008 - 00:26

Das ist ja mal geil. Eine art Nokia Handy als HP Design.

Portrait von Rabatz1
  • 09.11.2008 - 11:52

absolut coool, wollte schon immer wissen wie das geht!

Portrait von drache01
  • 06.11.2008 - 14:12

Sehr gut, gefällt mir!
Das mit den Pfaden ist mir nur nicht so gut gelungen...
4 Sterne

x
×
×