Anzeige
Tutorialbeschreibung

Web: Userbar

Web: Userbar

In diesem Tutorial werde ich euch zeigen wie man eine Userbar mit Photoshop erstellt.

In manchen Foren sind sie Kult aber in manchen kennt man sie garnicht.Deshalb will ich hier estmal erklären was eine Userbar überhaupt ist . Eine Userbar gehört in die Signatur in einem Forum und soll etwas über den Besitzer der Userbar aussagen .


Vorwort:

In diesem Tutorial werde ich euch zeigen wie man in wenigen Schritten eine Userbar erstell.

Dazu benutze ich : - Photoshop 7.0.1(deutsch) 
                               - Image Ready 7.0.1(deutsch)

Da wir am Ende die Userbar animieren wollen benötigen wir verschiedene Bilder die ihr parallel zu meinem Beispiel erstellen müsst.

Meine Userbar enthält : - Windows Home User
                                         - Nvidia Graphics
                                         - ICQ User
                                         - Internet Explorer User

Schritt 1:

Als erstes öffnen wir ein neues Dokument.
Klickt dazu auf Datei>Neu... .
Oder drückt (Strg+N).

Nun füllt alles so aus wie auf dem Bild.

Bilder


und wiederholt den Schritt noch 3mal mit Nvidia, ICQ und IE.
Ihr könnt sicherlich auch andere nehmen . Die Bar soll ja euch wiederspiegeln.
So nun minimiert ihr alle außer das was ihr bearbeiten wollt.

Schritt 2:

Nun sucht ihr euch zwei Farben aus die zu eurem Bild passen.
(z.B: Nvidia Grün -Weiß oder  ICQ Grün-Gelb).
Ich habe Blau - Weiß für mein Internet Explorer Bild genommen.

Bilder
 

Schritt 3 :

Als nächstes werden wir unser Bild mit einem Farbverlauf füllen Dazu klicken wir in unserer Werkzeugpalette auf 

Bilder
oder klicken rechts auf  
Bilder
um dann vom Farbtopf zum  Farbverlauf zu wechseln.
Der Standard Farbverlauf heißt Vordergrund-Hintergrund.

Nun ziehen wir mit dem Curser einen Farbverlauf über unser Bild es sollte anschließend etwa so aussehen.

Bilder

Schritt 4:

Nun googelt ihr nach einem passendem Logo und öfnnet es!

Datei>Öffnen...
und schiebt es mit dem Verschieben Werkzeug 
Bilder
  in eure Userbar.

Ich habe das hier benutzt :
 
Bilder


Skaliert es nun auf die gewünschte Größe.
Bearbeiten>Transformieren>Skalieren
haltet dabei die Shift-Taste gedrückt damit ihr die Proportionen beibehaltet.

Jetzt sollte es ungefähr so aussehen.

Bilder


Schritt 5:

Was wäre eure Userbar ohne Text?
Nichts! Genau!
Klickt also auf
Bilder

und dann auf euer Bild wo ihr den text haben wollt
Stellt oben Schriftgröße und Art ein und tippt drauf los.
Ich benutze WST_Germ.

Zieht nun den Text an die Stelle wo ihr ihn haben wollt

Bilder


Um dem Text noch das gewisse Etwas zu verleihen klicken wir auf :
Ebenen>Ebenenstil>Fülloptionen
Macht dort einen Haken vor Abgeflachte Kante und Relief und vor Kontur wo ihr bei Größe 1pixel und als Farbe schwarz einstellt.

Ihr könnt ruhig bei den anderen Optionen  noch mehr verändern ich belasse es aber hierbei.

Bilder

Schritt 6:

Nun fügen wir noch Scanlines ein dazu öffnen wir ein neues Dokument namens Scanlines mit der Größe 5x5px der Rest bleibt so wie in Schritt 1.
Malt es nun mit dem Buntstift (Taste B) wie im Bild aus aus solltet ihr nun aber den Pinsel erwischt haben ändert es wie oben beim Farbtopf und dem Farbverlauf um.

Bilder


Nun klickt auf Bearbeiten>Muster festlegen... und nennt das Muster Scanlines.
Wechselt nun wieder zu unserer Userbar erstellt eine neue Ebene.

Klickt dazu auf folgendes Symbol.

Bilder


Jetzt fügen wir die eben erstellten Scanlines ein klickt dazu auf Bearbeiten>Fläche füllen .
Und wählt eure Scanlines aus.
Bilder

Da nun die Scanlines viel zu dunkel sind setzen wir die Deckkraft der Ebene herab (5%).

Bilder


So das Ergebnis:

Bilder


Nachdem ihr eure anderen Bilder erstellt habt öffnet ihr alle gleichzeitig und  zieht sie mit dem Verschieben-Werkzeug übereinander,so dass sie übereinanderliegen.
Ich habe die Ebenen für euch jetzt umbenannt damit es klarer wird.

Bilder


Alle erstellten Bilder liegen übereinander .
Nun setzen wir die Deckkraft der oberen 3 Ebenen wie bei den Scanlines herab, diesmal auf 0%.
Nun sind wir fast fertig .
Durch drücken der Tasten (Strg+Shift+M) wechseln wir zu  Image Ready.

Schritt 7:

Dort sehen wir unten dieses Fenster.

Bilder

Wo wir den aktuellne Frame 17mal verdoppeln dann setzten wir die Deckkraft der.Ebene Explorer auf 100 %und verdoppeln diesen Frame wieder 17mal ,dann setzten wir die Deckkraft der Ebene Xp auf 100% und schließlich das selbe mit der Ebene ICQ.

Anschließend könnt ihr schon mal Play drücken (links neben dem Frameverdoppelding:) )
und siehe da die Animation ist ferig!

Nun müsst ihr nur noch in dem Fenster Optimieren (Rechts oben)
alles anpassen wie hier.
Bilder


und unter Datei >Optimiert-Version speichern als gif speichern FERTIG


Ich hoffe ihr Versteht mein Durcheinander 

Feedback ist erwünscht 

ICQ 216283365


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von GFX_Profi
  • 09.12.2012 - 14:54

Sieht super aus und einfach erklärt

Portrait von shizo1511
  • 16.01.2011 - 02:20

danke für das tutorial... jetz weiß ich wie scanlines gehen! Danke! ;)

Portrait von gameface
  • 16.10.2010 - 22:35

sauber! sehr einfach und sieht trozdem gut aus danach habe ich gesucht danke ;)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 29.08.2009 - 17:20

Sieht gut aus und einfach erklährt

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.08.2009 - 18:11

Nettes Tut, ein bisschen mehr Design bei der Userbar hätte ich mir gewünscht aber sonst ok.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 17.05.2009 - 13:34

nettes tutorial,eigentlich sehr einfach in der handhabung ;-)

danke für die mühe und veröffentlichung

Portrait von Yannick137
  • 18.02.2009 - 14:31

nettes tut, is eig ne easy sache :D

Portrait von Saint
  • 18.01.2009 - 02:41

net schlecht gut erklärt

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.12.2008 - 00:17

Ist ganz okay, eig. hätte man das alles wissen sollen^^ Aber find ihc gut, dass sich jemand mühe gibt das aufzuschreiben

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2008 - 01:24

total simpel ... total einfach ... voll cool ;)

Portrait von febLey
  • 04.06.2008 - 16:21

Spitze ... den größten Teil habe ich schon gewusst ... aber das mit den Scanlines war mir ein Rätsel. Super erklärt =)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.04.2008 - 04:08

Nettes TuT von dir, hab aber par Verbesserungsvorschläge.
Die Scanline: Etwas kleiner, eine Fläche von 3x3 Px, dann auf 1600% zoomen
und Drei schwarze Kästchen zeichnen (wie bei dir auch Diagonal) > speichern als Muster. Der Userbar optisch mehr geben mit 'Gloss-Effekt' und was die Schrift angeht. Man verwendet für Userbars Pixel-Schriften z.B. "Visitor TTZ BRK" oder "Zrnic". Ich erstelle meine Userbars in einer größe von 350 x 19 px und füge anschließend noch einen Rahmen hinzu, so bekommt das alles Optisch etwas mehr - Dem 'Gloss' geb ich die Deckkraft von ca. 35% und der 'Scanline' zwischen 20/30%. Aber sonst alles Super erklärt.

Lg ArtLantic

@GSARacer: Das animieren geht auch mit diversen Freeshare-Programmen oder einem einfachem Gif-Animator. Einfach mal googlen ;)

@beNNiBB: Sind das deine vermissten Specials *rofl*

Portrait von Destruction929
  • 19.03.2008 - 20:41

Superleicht erklärt ^^ habe auch schon angefangen und es sind auch schon gute sachen rausgekommen !

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 27.02.2008 - 23:12

Ganz nett, aber ein paar Specials mehr wären net schlecht.
ABer: DANKE

Portrait von Hofpi
  • 22.02.2008 - 16:48

Sehr gutes tut.

Empfehlung ;)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 03.02.2008 - 21:44

Hab kein Image ready :(
Naja...

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 02.02.2008 - 12:50

Ein schönes und nützliches Tutorial, Danke

Portrait von sonje
  • 14.11.2007 - 13:16

Gut erklärt, vielen Dank dafür

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 14.10.2007 - 15:11

es geht einfacher aber so ist es auch verständlich

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 10.10.2007 - 23:12

danke, hat geholfen!

x
×
×