Hallo und Willkommen zu meinem ersten Photoshoptutorial.

Ich möchte euch hier kurz und bündig zeigen, wie ihr diese kleine Userbar erstellen könnt.


Natürlich gibt es unzählige Userbars im Internet. Aber vielleicht nicht genau die, die ihr gerne eurer Eigen nennen möchtet.
Also ab ans Werk!



Wenn ihr genau hinseht, bemerkt ihr, dass die Userbar einen leichten "Rastereffekt" aufweißt. Und genau dieses Raster ist nun unser erster Schritt.

Erstellt ein neues Dokument mit folgenden Eigenschaften. Die Höhe und Breite von 19px könnte mann getrost kleiner setzen, aber ich belasse es hier mal bei der Größe, da unsere spätere Userbar exakt die Höche von 19px hat.





Dokument erstellt? Ok. Nun packen wir uns das Pinselwerkzeug und stellen die folgenden Werte ein. Hier seht ihr nun, dass ihr mit dem Pinselwerkzeug eure Linien bzw. Punkte zeichnet, wie unten abgebildet.
Damit wären wir beim oben angesprochenen Punkt mit der Größe von 19px. Sicher denkt ihr, dass 1/4 dieses Rasters auch reichen würde. Richtig, aber wir lassen die Größe damit es übersichtlicher und verständlicher bleibt. Zoomt auf ca. 1200%, um besser arbeiten zu können.
Altnernativ zum Pinselwerkzeug mit einer Breite von 1px könnt ihr auch euren Linienzeichner ohne Glättung verwenden.





Nun, da alles fertig gezeichnet ist, speichern wir dieses Muster (Raster) als Mustervorlage ab, um es später einbauen zu können.
Dazu geht ihr oben auf den Reiter "bearbeiten -> Muster festlegen" und speichert es unter dem Namen "Raster" ab.





Nun geht an die Userbar selber.
Erstellt wieder ein neues Dokument mit folgenden Attributen:





Erstellt nun rechts im Manager eine neue Ebene.





Nun aktivieren wir das Rechteckswerkzeug und setzen die Farbe auf #094ba6.
Zieht nun ein Rechteck von der linken oberen Ecke in die rechte untere Ecke.
Wichtig hierbei ist, dass die eben neu erstellte Ebene aktiviert ist.





Ist dies geschehen, rastert ihr die neue Form. Dazu wählt ihr, wie auf dem Bild zu sehen, mit einem Rechtsklick den Punkt "Rastern" aus.





So sollte es nun bei euch ausehen:





Nun ist es soweit, wir weisen unserer Ebene das vorher erstellte Muster zu.
Dazu klicken wir doppelt auf die neue Ebene und setzen ein Häckchen bei "Musterüberlagerung". Hier wählen wir unser neues gespeichertes Muster aus und setzen zusätzlich die Deckkraft auf ca. 42%.





So sollte es nun ausehen:





Nun schreiben wir unseren Text. Dazu ist es von Vorteil, dass ihr die Schriftart Visitor in eurer Sammlung habt. Diese könnt ihr euch auf jeder guten Fontseite kostenlos herunterladen, beispielsweise auf http://dafont.com.
Die heruntergeladene Datei kopiert ihr in euren Windows Font Ordner. Standartmäßig befindet der sich bei C:\windows\fonts.
Getan? Jetzt braucht ihr eurer Photoshop nichtmal neustarten. Die Schrift müsste nun vorhanden sein.
Also schnell den Text geschrieben. Die Schriftgröße 12 eingestellt und ohne Abrunden oder Schärfen ausgewählt.





Nun geben wir unserem Text noch eine kleine Kontur um die Schrift optisch etwas abzuheben.
Dazu machen wir einen Doppelklick im Ebenenmanager auf unseren Text und haken "Kontur" an.
Stellt nun alle Attribute so ein, wie auf dem Bild zu sehen ist.





Wieder ein kleines Zwischenergebnis:





Nun fügen wir ein Bild hinzu. Am besten eignen sich hierfür png-Dateien, da sie sehr schöne weiche Kanten haben. Natürlich könnt ihr hier auch selbsterstelle und selbstausgeschnittene Bilder verwenden.
Ladet euch das Bild in Photoshop und zieht es per Drag and Drop in eurer Werk.





Ihr seht, das Bild wird automatisch in eine neue Ebene eingefügt. Jetzt setzen wir die Deckkraft für diese Ebene noch auf ca. 65% rechts im Manager.





Das sieht doch schon gar nicht schlecht aus:





Wir erstellen uns eine neue Ebene rechts im Manager und packen uns nun das Ellipsenwerkzeug. Vergesst nicht, eure Vordergrundfarbe auf weiß zu stellen.





Zieht nun eine Ellipse ungefähr so, wie auf dem Bild zu sehen ist.
Wenn diese erstellt ist "Rastern" wir diese ebenso, wie vorher das blaue Rechteck.





Die Deckkraft setzen wir auf ca. 35%.





So müsste das bei euch nun auch ausehen. Nicht schlecht oder?





Nun müssen wir noch einen kleinen schwarzen Rahmen um unsere Userbar erstellen, damit sie sich etwas vom Hintergrund abhebt, egal wo sie dargestellt wird.

Dazu erstellen wir eine neue Ebene im Manager rechts, aktivieren wie am Anfang das Pinselwerkzeug und ziehen uns mit gedrückter Shift Taste einen schwarzen Rahmen rund um unsere Bar.
Zum besseren Arbeiten könnt ihr wieder etwas hereinzoomen, um besser zeichnen zu können. Stellt die Pinselstärke wieder auf 1px.





Fertig! Sieht richtig gut aus.






Hier nochmal ein paar Beispiele.
Wenn mann bedenkt, dass mann hier zig Variationen verwenden kann, dann können damit richtig schöne Werke ans Licht kommen, die ihr dann in unserem Forum präsentieren könnt.



Ich hoffe ich konnte einigen von euch eine Freude machen.

Grüße
Patrick

Hier erklär ich euch wie man seine eigenen Userbars erstellen kann. Twittern

>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!