20.072012

Realistischer Kippschalter mit Photoshop

Ich habe mir mal die Mühe gemacht und ein kleines Tutorial zusammen gebaut inklusive "Super-Speed-Video" ;). In diesem Tutorial geht es darum einen realistischen Kippschalter mit Photoshop zu erstellen.

Im Folgenden seht ihr erst ein mal das Video mit der kompletten Erstellung des Schalters. Danach folgen die einzelnen Schritte mit genauer Beschreibung.

Realistischer Kippschalter mit Photoshop from Nils on Vimeo.

Schritt 1 - Ein neues Dokument anlegen

Im ersten Schritt müsst ihr natürlich erst mal euer Photoshop starten und ein neues Dokument anlegen. Ich habe dazu eine Arbeitsfläche von 500x500 Pixeln gewählt und eine Auflösung von 72dpi (für Web).

Neues Dokument in Phtoshop anlegen

 

Schritt 2 - Der Hintergrund

Im zweiten Schritt fangen wir an den Hintergrund des Ganzen zu erstellen. Dazu müsst ihr als erstes eine neue Farbfläche mit dem Farbcode #1a1a1a erstellen.

Wie ihr eure Ebenen benennen wollt und sie ordnet, bleibt natürlich euch überlassen. Dennoch erwähne ich, dass ich diese Ebene "Background" genannt habe. Dazu habe ich noch einen Ordner erstellt, der ebenfalls Background heißt, worin sich unsere Farbfläche "Background" befindet.

Nun erstellen wir eine weitere Farbfläche im gleichen Ordner, die der Background-Ebene übergeordnet ist mit dem Farbcode #808080 und nennen diese "Rauschen".

Um ein Rauschen-Filter auf die Ebene anwenden zu können, muss diese gerastert sein (wenn dies nicht der Fall ist).

Dann geht ihr oben in der Menüleiste auf Filter > Rauschfilter > Rauschen hinzufügen. Ich habe dazu die folgenden Einstellungen gewählt:

Wenn ihr das Rauschen hinzugefügt habt, müsst ihr der Ebene "Rauschen" die Eigenschaft "Ineinanderkopieren" zuweisen, was ihr über die Ebenenoptionen machen könnt. Danach müsst ihr die Deckkraft auf 40% reduzieren.

Sobald das abgeschlossen ist, erstellt ihr eine weitere Ebene in dem Ordner, die über der Rauschen- und Background-Ebene liegt und nennt diese "Schein". Nun müsst ihr die komplette Ebene mit dem Auswahlwerkzeug markieren um einen Verlauf zu erstellen.

Erledigt? Dann wählt ihr aus eurer Werkzeugpalette das Verlaufswerkzeug mit der Option "Radialer Verlauf" und zieht mit gedrückter Shift Taste einen radialen Verlauf von der Mitte aus nach unten.

Ist das auch erledigt, können wir dieser Ebene auch die Eigenschaft "Ineinanderkopieren" geben und die Deckkraft auf 80% reduzieren. Im Anschluss daran habe ich den Verlauf größer skaliert und ihn leicht in die rechte obere Ecke platziert, um ein bisschen Dynamik in den Hintergrund zu bekommen.

Damit wäre der Hintergrund für unseren Kippschalter schon ein mal fertig ;).

 

Schritt 3 - Der Kippschalter

Nachdem wir recht einfach und schnell einen schönen und modernen Hintergrund geschaffen haben, folgt nun die eigentliche Arbeit.

Als erstes erstellen wir einen Kreis mit Hilfe des Auswahlellipse-Werkeug, welches ihr in der Werkzeugpalette finden könnt und nennt dieses "Ring_außen". Ich habe die Größe 225x225 Pixel für den Kreis gewählt. Den Kreis füllen wir zunächst mit schwarzer Farbe (#000000).

Danach erstellen wir einen neuen Ordner mit dem Namen "Button", wo wir den Kreis rein packen. Der Ordner muss oberhalb des Ordners "Background" liegen.

Ist der Kreis erstellt, geben wir diesem einen linearen Verlauf über die Fülloptionen der Ebene mit den folgenden Farbwerten:

  • Oben: #1a1a1a
  • Untern: #333333

Und statten die Ebene noch mit den folgenden Verlaufswerten aus:

Dem Kreis verleihen wir noch eine Kontur mit einem Verlauf:

  • Oben: #000000
  • Untern: #ffffff

Und mit den folgenden Einstellungen:

Danach das Ganze bestätigen mit einem Klick auf "OK". Nun reduzieren wir die Deckkraft des Kreises auf 40%.

Der nächste Schritt ist ein etwas kleinerer Kreis, der quasi den Rahmen des Kippschalters darstellt. Diesen habe ich in der Größe 205x205 Pixel erstellt und den Namen "Ring_mitte" gegeben. Dieser Kreis muss in dem Ordner "Button" liegen und oberhalb der Ebene "Ring_außen".

Nun können wir auch diesem Kreis ein paar Fülloptionen verpassen. Als erstes öffnen wir wieder die Fülloptionen und geben der Ebene einen linearen Verlauf:

  • Oben: #373b43
  • Unten:  #000000

Und die folgenden Einstellungen:

Danach folgt ein schwarzer Schlagschatten:

Zu guter Letzt bekommt der Kreis noch leichte abgeflachte Kanten mit den folgenden Werten:

Und schon ist der Rahmen für den Kippschalter fertig.

Der nächste Schritt ist auch wieder ein Kreis, der die Größe 170x170 Pixel und die Farbe Schwarz hat und den Hintergrund des Schalters bildet. Benannt wird diese Ebene mit "Rand_innen" oder "Background_Schalter" und muss auch wieder oberhalb der beiden anderen Ring-Ebenen liegen und innerhalb des Ordners "Button > Background". Nun verpassen wir dem Kreis noch eine feine Kontur mit den folgenden Werten:

Die Kontur besteht aus einem linearen Verlauf:

  • Oben: #2e3138
  • Unten: #1a1a1a

Nun erstellen wir einen weiteren Kreis, allerdings nicht mehr mit dem Auswahlwerkzeug sondern mit dem Ellipsen-Werkzeug. Dabei ist es wichtig, dass oben im Werkzeugmenü die Eigenschaft "Form" ausgewählt ist und ihr damit einen gefüllten Pfad erstellt.

Den Kreis, den wir nun erstellen muss wieder auf einer neuen Ebene erstellt werden. Am besten erstellt ihr einen weitere Ordner mit dem Namen "Schalter", in dem dann diese Ebene steckt und der oberhalb des "Schalter > Background" Ordners liegt. Bei mir nennt die Ebene sich "Background".

Zieht nun einen fast gleich großen Kreis wie bei der Ebene "Ring_innen", nur 3-5 Pixel kleiner auf jeder Seite. Drückt dann die STRG ( für Windows) oder cmd (für Mac) Taste und wählt den Pfad mit Klick auf die Ebene auf der Arbeitsfläche aus. Haltet weiterhin die Taste gedrückt und klickt auf das kleine Kästchen am unteren Rand der Ebene. Nun könnt ihr diesen Punkt verschieben, sodass sich der Pfad der Ebene anpasst. Sieht ihn ungefähr in die Form, wie sie in dem Folgenden Screenshot dargestellt ist und gebt der Form dann noch einen linearen Verlauf:

  • Oben: #0d0d0d
  • Unten: #333333

Wenn ihr dann das Ganze bestätigt habt, könnte ihr mit gedrückter STRG ( für Windows) oder cmd (für Mac) Taste auf die kleine Miniatur der Ebene in eurer Ebenenpalette eine Auswahl der Form erstellen.

Erstellt dann bitte wieder eine Ebene mit dem Namen "border". Wählt wieder aus der Werkzeugpalette das Auswahl-Werkzeug aus (egal welchen) und macht dann einen Rechtsklick auf die Auswahl und wählt die Option "Kontur füllen" aus. Gebt der Kontur folgende Eigenschaften:

Mit STRG ( für Windows) oder cmd (für Mac) Taste und D könnt ihr die Auswahl nach Bestätigung der Kontur wieder aufheben. Schnappt euch das Radiergummi aus der Werkzeugpalette, stellt einen Radius von ca. 150px und einer Härte von 0% ein und radiert den oberen Teil der Kontur weg.

Stellt danach wieder die Option "Ineinanderkopieren" ein und reduziert die Deckkraft auf 28%.

Markiert erneut die Ebene "Background" mit einer Auswahl und wählt einen runden Pinsel mit der Farbe Weiß (#ffffff), einem Radius von ca. 300px und färbt den oberen Teil des Background's ein.

Dabei ist zu beachten, das man die Pinselspitze nicht zu nah an der Auswahl hält, weil es sonst zu intensiv wird.

Damit hellt ihr den oberen Teil des Schalters ein wenig auf.

Danach könnt das Gleiche noch mal mit schwarzer Farbe machen, um den Schatten im oberen Teil des Schalters zu simulieren.

Damit hätten wir dann auch schon fast alles geschafft.

 

Schritt 4 - Die Aufschrift

Als letzten Schritt folgt nun die Aufschrift auf dem Kippschalter. Dabei ist es egal, welche Schriftart ihr verwendet. Ich habe die Helvetica Neue mit dem Schriftschnitt "Condensed Bold" in der Schriftgröße 50Pt verwendet.

Wählt eine Schriftart und platziert diese dann auf dem Schalter.

Nun folgenden die Effekte der Schrift.

Öffnet die Fülloptionen der Schrift und gebt ihr eine Farbüberlagerung mit dem Farbwert #90ff00. Bestätigt das zunächst ein mal mit "OK".

Erstellt über der Schrift eine neue Ebene und nennt diese "text_shine". Erstellt mit gedrückter STRG ( für Windows) oder cmd (für Mac) Taste eine Auswahl der Schrift, wählt das Auswahlellipse-Werkzeug aus, zieht mit gedrückter alt Taste einen halb Bogen und schneidet somit den unteren Teil der Schriftauswahl weg.

Wählt nun das Verlaufswerkzeug aus und stellt die Verlaufsmethode auf linear.

Macht einen Klick auf die Verlaufsfarbe auf der linken Seite und stellt euch einen Weiß > Transparenz Verlauf ein (siehe oben). Zieht nun von unten nach oben den Verlauf in der Schrift.

Dann könnt ihr die Auswahl aufheben und die Option "Ineinanderkopieren" bei der Ebene auswählen. Reduziert die Deckkraft auf 70%.

Sobald ihr den Verlauf erstellt habt, könnt ihr erneut die Fülloptionen der Textebene öffnen und die folgenden Einstellungen vornehmen:

Der Verlauf in der Kontur ist linearer Verlauf und hat folgende Werte:

  • Oben: #273e0a
  • Unten: #56762d

Die Farbe von "Schein nach innen" hat den Farbwert #33520b.

Die im "Schein nach außen" verwendete Farbe, ist dieselbe wie bei der Farbüberlagerung #90ff00.

 

 

Fertig

 

Ich hoffe ich konnte euch mit diesem kleinen Tutorial ein bisschen in der Praxis und dem Umgang mit Photoshop weiterhelfen. Ihr könnte euch die Projektdatei hier runterladen und selber noch ein bisschen damit rumspielen.

Gruß und bis zum nächsten Mal

Nils ;)