Eigene Userbar

[Monoman 0]

Hoi.

Willkommen zu meinem ersten Tutorial hier im Forum.

Der Hintergrund für dieses Tutorial ist: Ich sehe hier immer mehr Leute mit Userbars in ihrer Signatur. Da ich auch schon gefragt wurde, wie man sowas selber machen kann und ich denke, einige würden gerne eigene Userbars erstellen - wissen aber nicht wie man's macht - schreibe ich hier einfach mal ein kleines Tutorial.

-> Was braucht ihr?

- Photoshop; egal welche Version, es sollte jedoch schon eine neuere sein, ab 7.0+

- Eine Vorstellung von eurer persönlichen Userbar

- Ein paar Minuten Zeit

-> Der Anfang

In meinem Tutorial will ich eine schicke BF-Games.net Userbar erstellen, die dann eure Signatur schmücken könnte.

Am besten ihr startet schonmal Photoshop, dann können wir anfangen...

Erstmal solltet ihr ein neues Dokument mit weißem Hintergrund über "Strg + N" erstellen. Die Bildmaße betragen 350x19 Pixel.

Danach solltet ihr euch ein Logo zu eurem Userbar-Thema suchen. Für mich kam der Schriftzug aus dem BF-Games.net Header in Betracht.

Euer Logo öffnet ihr in Photoshop und drückt "Strg + A". Dadurch wird das komplette Logo markiert.

Dann drückt ihr "Strg + C", damit kopiert ihr das aktuelle Logo.

Jetzt geht ihr in Photoshop auf eure Userbar und drückt "Strg + V". Das Logo wird auf einer neuen Ebene eingefügt.

Indem ihr "Strg + T" drückt, könnt ihr das Logo skalieren, neigen, zerren etc. Wie ihr wollt.

Screenshot

-> Verlauf erzeugen

Jetzt habt ihr aber noch weißen, freien Raum seitlich von eurem Logo. Dies wollen wir mit einem Verlauf auffüllen. Erstmal solltet ihr eine neue Ebene auf eurer Userbar erzeugen -> "Shift + Strg + N".

Dann klickt ihr mit der rechten Maustaste auf das Füllwerkzeug und wählt dort das Verlaufswerkzeug aus:

Screenshot

In der oberen Menüleiste klickt ihr doppelt auf den aktuellen Verlauf.

Dort könnt ihr mit Schiebern einen Verlauf erstellen. Nehmt am besten Farben, die auch im Logo vorhanden sind. Mein Verlauf sieht wie folgt aus:

Screenshot

Habt ihr den Verlauf erstellt, könnt ihr zunächst das Verlaufsfenster schließen. Markiert nun mit dem Auswahlrechteck-Werkzeug "M" den Bereich indem ihr den Verlauf erzeugen wollt.

Nachdem ihr eine Auswahl erstellt habt, wählt wieder das Verlaufswerkzeug und zieht mit diesem einen Verlauf vom Anfang bis zum Ende der Auswahl. Haltet dabei die Shift-Taste gedrückt, dann wird der Verlauf gerade.

So sieht das im Beispiel bei mir aus:

Screenshot

Nachdem ihr den Verlauf erzeugt habt drückt "Strg + D". Dadurch wird die aktuelle Auswahl aufgehoben.

Grobe Verlaufskanten könnt ihr mit dem Radiergummi-Werkzeug "E" nachbessern.

-> 45° Scanlines

Das wäre schonmal geschafft.

Jetzt müssten noch die Scanlines rein. Dazu erstellt ihr wieder ein neues Dokument ("Strg + N") mit transparentem Hintergrund und den Ausmaßen von 8x8 Pixeln.

Dann könnt ihr das neue Bild durch Druck auf "Strg + '+'" vergrößern um die Scanlines genauer einzuzeichnen. Jetzt wählt ihr das Buntstift-Werkzeug "B" aus - falls ihr das Pinsel-Werkzeug habt, geht wieder mit der rechten Maustaste drauf und wählt dann das Bunstift-Werkzeug aus - und zeichnet Punkte von der linken unteren Ecke bis zu rechten oberen Ecke. Das sieht in meinem Fall so aus:

Screenshot

Diese Bild müsst ihr nur noch per "Bearbeiten -> Muster festlegen..." als Muster eintragen.

Geht jetzt wieder auf eure Userbar und wählt das Füllwerkzeug "G" aus.

In der oberen Menüleiste setzt ihr in der Drop-Down Liste den Eintrag von "Vord.farbe" auf "Füllen mit".

Klickt jetzt auf den Pfeil an dem kleinen Fensterchen daneben und wählt euren Verlauf aus:

Screenshot

Erstellt nun wieder eine neue Ebene auf eurer Userbar ("Shift + Strg + N") und füllt sie mit dem Muster im Füllwerkzeug.

Diese Ebene könnt ihr noch etwas transparent machen und die Ebenenmethode ändern. Ich hab' das so eingestellt:

Screenshot

Nachdem ihr das gemacht habt, sollte eure Userbar in etwa so mit Scanlines aussehen:

Screenshot

-> Glas-Effekt

Erstellt zunächst erstmal wieder eine neue Ebene auf eurer Userbar ("Shift + Strg + N").

Dann nehmt das Auswahlellipse-Werkzeug "M" und zieht eine schöne ovale Auswahl über eure Userbar.

Bei mir sieht das so aus:

Screenshot

Dann erstellt ihr wieder einen neuen Verlauf, wie oben bereits beschrieben. Der komplette Verlauf muss weiß sein.

Am Anfang des Verlaufs setzt ihr die Deckkraft auf 45%. Am Ende dann auf 10%.

Das sollte ungefähr so aussehen:

Screenshot

Jetzt zieht ihr den Verlauf von oben nach unten in die Auswahl hinunter. Drückt auch hier wieder "Shift" damit der Verlauf gerade wird. In meinem Fall sieht das so aus:

Screenshot

-> Beschriftung

Fast fertig!

Jetzt kommt nur noch die Schrift und ein Rahmen drauf.

Ich verwende folgende Schrift für die Beschriftung: 04b_03b.

In Photoshop nehmt ihr dann das Text-Werkzeug "T" und klickt dorthin, wo ihr den Text später stehen haben wollt.

Jetzt schreibt ihr erstmal euren Text rein. Wichtig ist, das ihr in der Menüleiste das Anti-Aliasing auf "Ohne" setzt. Außerdem sind die Schriften auf eine bestimmte Schriftgröße ausgelegt, achtet also darauf auch die richtige Schriftgröße eingestellt zu haben. Für die Schrift "04b_03b" ist die richtige Größe "8 px". Achtet darauf, dass ihr bei dieser Schriftart auch nur Großbuchstaben verwendet.

Nachdem ihr euren Text erstellt habt, klickt ihr mit der rechten Maustaste auf das Text-Logo in der Ebenenübersicht und wählt dort "Fülloptionen..." aus:

Screenshot

In dem neuen Dialog könnt ihr dann bei Kontur eine Kontur um die Schrift erzeugen. Übernehmt am Besten die Einstellungen auf dem folgendes Screenshot:

Screenshot

Nachtrag: Bei den meisten Userbars ist die Beschriftung unter dem Glaseffekt, da das besser aussieht. Wer will kann auch die Beschriftung über dem Glaseffekt lassen, ist halt Geschmackssache.

Danke an Oberscht für den Hinweis!

-> Rahmen

Zu guter Letzt müsst ihr nur noch eine Rahmen erzeugen.

Dazu erstellt ihr wieder eine neue Ebene ("Shift + Strg + N") und zieht mit dem Bunstift-Werkzeug "B" eine Kontur um die Userbar. Achtet darauf, das die Bunstift-Stärke auf 1 Pixel eingestellt ist.

-> Fertig

Das war's eigentlich auch schon. Eure eigene Userbar ist jetzt fertig. Die sollte dann ähnlich aussehen:

Bei Fragen, Anregungen und Kritik -> Posten

MfG

Monoman

Bearbeitet 4. Mai 2006 von Monoman

[Hohes Haus 0]

hey, danke, vielleicht mach ich mir ja eine mit "Blink 182 Listener"

[Rob.Dexter 0]

Cool danke Mono, wieder n paar dinge dazugelernt.

Hier meine vobei die DOOM Schrift n bissen FAT is

Bearbeitet 12. November 2005 von Rob.Dexter

[Gast Oberscht]

Hm, sind diese Maße gängig?

[der.enforcer 332]

Super, Mono

fettes Danke!

[Rob.Dexter 0]

Hm, sind diese Maße gängig?

Alle Maße nach DIN EN 08/15!

[Monoman 0]

Hm, sind diese Maße gängig?

Sollten eigentlich...

Ich hab' mir die Maße von ein paar Userbars angeschaut und rausgefunden das 350x19 px anscheinend die Standardgröße dieser Bars ist.

@Rob.Dexter

Dein Schriftzug "BF-GAMES.NET ROB.DEXTER" sieht nach der 04b_03b-Font aus.

Die Schriftgröße solltest du da auf 2 Pt oder 8 Px setzten. Ansonsten sieht die Font etwas "matschig" aus.

MfG

Monoman

[Pedder 864]

hey, danke, vielleicht mach ich mir ja eine mit "Blink 182 Listener"

jo, kannste mir die dann mal per pm senden?

[Hohes Haus 0]

hey, danke, vielleicht mach ich mir ja eine mit "Blink 182 Listener"  

jo, kannste mir die dann mal per pm senden?

ich krieg das irgendwie nicht zammen -.-

[Pedder 864]

hey, danke, vielleicht mach ich mir ja eine mit "Blink 182 Listener"  

jo, kannste mir die dann mal per pm senden?

ich krieg das irgendwie nicht zammen -.-

wie meinste das?

[Hohes Haus 0]

ich kenn mich da nix aus, ich hab nur elements

[Vestalis 1]

also ich hab mir auch n paar gemacht, aber noch ohne Glas effekt, siehe unten inner Sig

[realfoxboy 0]

nettes tut, thx

[Manef 0]

Hier, extra für euch.

[Pedder 864]

Hier, extra für euch.

wow, danke manef!