Adobe Photoshop Tutorial: Kunstoff Navigation

+4   4   |   Bewertung: Keine Berechtigung!  

Moin Leute,

ich wollte heute eine Navigation aus Kunststoff bzw. Plastik präsentieren. Ihr könnt auch, je nach Farbwahl andere Materialien erzeugen, mehr dazu später.
#Die Rauten führen euch durch die Navigation


knav1

#Schritt 1 / Datei erstellen
Datei erstellen, 140x400 Pixel, Hintergrundfarbe: #585858.
Hilfslinien erstellen, Vertikal: 1) 20px 2) 120px (gem. Grafik)
(Ansicht# Neue Hilfslinie# Hilfslinie erstellen)


knav2

#Schritt 2 / Grundform erzeugen
Neue Ebene erstellen / Ebene in „Grundform“ umbenennen.
Auswahldreieck (M) nehmen, Bereich der Hilfslinien ein Rechteck ziehen und beliebig füllen.


knav3

#Schritt 3 / Oberfläche erzeugen
Fülloptionen der Grundform aufrufen.
Farbüberlagerung mit: F7F7F7 füllen.
Schlagschatten und Schatten nach Innen gem. Grafik einstellen.


knav4

#Schritt 4 / Schatten erstellen
Neue Ebene erstellen / Ebene in „Schatten“ umbenennen.
Neue Hilfslinie erstellen, Vertikal 30px
Auswahldreieck nehmen (M), Fülleimer in „Weiß“ wählen. (D+X)
Zieht ein Rechteck von der 1. Hilfslinie bis zur Zweiten und füllt diesen Bereich Weiß.


knav5

#Schritt 5 / Schatten einstellen
Ebene „Schatten“ als Füllmethode „Multiplizieren“ auswählen.
Schatten nach Innen gem. Grafik einstellen.


knav6

#Schritt 6 / Trennlinien erzeugen
Neue Ebene erstellen / Ebene in „Trennlinien“ umbenennen
Nun nehmt euch den Bleistift (B), kein Pinsel! Wählt „Quadratische Spitzen“ aus.
Indem ihr die Pinseleigenschaften öffnet, klickt dann auf den rechten runden Pfeil.
Wählt dann den ersten Quadratischen Pinsel mit 1px aus


knav7

#Schritt 7 / Trennlinien ziehen
Wählt als erstes ein Graues Quadrat aus: #CCCCCC
Macht einen Punkt an der rechten äußeren Seite.
Wählt dann ein Weißes Quadrat aus: #FFFFFF
Setzt einen Punkt genau unter dem vorherigen Grauen.
Transformiert die Linie (Strg+T) und zieht diese von Rechts nach Links gem. Grafik.



knav8

#Schritt 8 / Bewegung
Nimmt euch den Filter Bewegungsunschärfe, Distanz: 10 Pixel und 0° Winkel.
(#Filter #Weichzeichnungsfilter #Bewegungsunschärfe)
Schneidet die Übergänge mit dem Auswahldreieck weg (M) auswählen und Entf!



knav9

Schritt 9 / Übergang
Geht in die Fülloptionen der Trennlinie und richtet den Schatten nach Innen gem. Grafik ein.
Farbe des Schattens ist #CDCDCD.



knav10

Schritt 10 / Duplizieren
Nun Duplizieren wir die Ebene, je nach Geschmack und Buttongröße.
Ich habe die Ebene alle 30px Dupliziert, als Hilfe für die Abstände kann man gut das Slice-Werkzeug verwenden. Die Ebene dupliziert ihr schnell, indem ihr die Ebene auf das „Neue Ebene“ Symbol zieht, Siehe Grafik.



knav11

Schritt 11 / Fertig
Nun sollte eine Grundfläche eigentlich so erscheinen, wie auf meiner dargestellten Grafik. Nun liegt es an euch, in welcher Form ihr diese verändert, Beispiele in Schritt 12.



knav12

Schritt 12 / Beispiele
Hier habe ich einmal 2 Beispiele gezeigt, wie man es evtl. machen könnte!
Ihr müsst mit unterschiedlichen Verläufen, oder Schatten spielen und schauen ob es auch realistisch erscheint. Umso feiner ihr arbeitet umso besser wird euer Gesamtergebnis.
Hiermit wollte ich kein Kunstwerk präsentieren sondern lediglich eine neue Möglichkeit vorweisen, wie man eine solche Idee evtl. umsetzen könnte.

Vielen Dank!