[Tutorial]Userbars

[KILLTHIS]

Also hier ein kleines Tutorial zum erstellen von userbars (Ich nutze Photoshop CS2):

1.)Wir erstellen eine neue Datei mit folgenden Referenzen:
Breite: 350 Pixel
Höhe: 19 Pixel
Auflösung: 72 Pixel/Zoll
RGB 8 Bit
Transparent

2.)Nun benutzen wir das Verlaufs-Werkzeug, um erst mal einen schönen Übergang zu machen. Dabei sollten die Vorder- und Hintergrundfarbe harmonieren, da es sonst zu ziemlich augenfeindlichen Kreationen kommen kann. ;)

3.)Nun brauchen wir das Streifenmuster. Dazu erstellen wir eine neue Datei mit folgenden Maßen (die alte Datei nicht schließen):
Breite: 3 Pixel
Höhe: 3 Pixel
Der Rest genau wie bei der ersten Datei.

4.)Nun vergrößern wir auf das Maximum von 1600%. Jetzt ziehen wir eine feine (schwarze) Linie von oben rechts nach unten links. (Größe des Pinsels: 1 Pixel)

5.)Nun gehen wir unter Bearbeiten->Muster festlegen und geben unserem eben erstellten Muster einen beliebigen Namen, wie z.B. UserbarMuster.

6.)Nun gehen wir wieder über zu unserer alten Datei. Nun gehen wir auf Bearbeiten->Muster füllen und wählen unser eben erstelltes Muster aus.
Nun sollten sich die Linien (sofern fein oder grob gezeichnet) sichtbar auf unserer userbar sehen lassen.

7.)Nun suchen wir uns ein Bild für unsere Userbar aus. Am besten nutzt man hierfür Google (www.google.de). Aber man sollte auf die Größe achten, nicht zu groß und nicht zu klein sollte das Bild sein. Aber ich denke hier sollte jeder nach eigenem Geschmack arbeiten. Wenn das Bild zu klein ist, kann man es ja immer noch beliebig verkleinern und umgekehrt. ;)

8.)Nun brauchen wir auch eine Beschreibung! Hierfür brauchen wir die Schriftart Visitor TT2(BRK) (http://www.webpagepublicity.com/free-fonts/v/Visitor%20TT2%20-BRK-.ttf). Die beste Schriftgröße hierfür sind 13 Pixel und KEINE Glättung! Die Schriftfarbe sollte weiß sein (oder Schwarz, jeh nach dem Hintergrund). Als Fülloptionen wählen wir "Schein nach aussen" mit folgenden Einstellungen:
Umgekehrt Multiplizieren
Deckkraft: 100%
Störung: 0%
Farbe: Schwarz
Technick: Weicher
Überfüllen: 100%
Größe: 1 Pixel
Alternativ kann man auch was anderes versuchen, aber es sollte schon ein schwarzer Rand ausserhalb der Schrift sein, um ihr etwas mehr Lesbarkeit zu geben. Sollte "Schein nach aussen nicht funktionieren, versucht es mit "Schlagschatten", und den gleichen Parametern wie oben.

9.)Nun wir sind fast fertig! Jetzt vergrößern wir unser Fenster etwas, sodass wir auch einen Bereich ausserhalb des Bildes sehen. Jetzt nehmen wir als Vordergrundfarbe weiß und nehmen unser Ellipsen-Werkzeug. Wir ziehen von oben bis zur Mitte der Userbar mit unserer Ellipse. Jetzt stellen wir noch die Deckkraft und Fläche auf 70% um etwas Durchlass zu gewähren. Das sollte einen schönen glanz hinterlassen.

Nun sind wir fertig! Wenn ihr lust habt, könnt ihr ja eure Arbeit hier Posten. ;)
MfG
KILLTHIS

[lori]

Feine Sache das Tutorial! Und in gewohnter KILLTHIS Qualität!;)

[KILLTHIS]

Feine Sache das Tutorial! Und in gewohnter KILLTHIS Qualität!;)
Hehe, danke! ;) Wenn etwas zu bemängeln wäre würde ich dies natürlich ändern. Aber Kritik ist immer willkommen.

[guckuck]

Ich habe mir mal erlaubt es "anzupinnen".

[lori]

Hehe, danke! ;) Wenn etwas zu bemängeln wäre würde ich dies natürlich ändern. Aber Kritik ist immer willkommen.
Ich bin so frei mein erstes Werk hochzuladen! Der Sinn lässt zu wünschen übrig aber es war ja nur zum ausprobieren wie man so etwas erstellt!:D

So sieht es aus: http://img157.imageshack.us/img157/8550/lorifirstusersign7pi.png (http://imageshack.us)

Habe zum Teil das Englische Tutorial benutzt!

[Locou]

Ich bin so frei mein erstes Werk hochzuladen! Der Sinn lässt zu wünschen übrig aber es war ja nur zum ausprobieren wie man so etwas erstellt!:D

So sieht es aus: http://img157.imageshack.us/img157/8550/lorifirstusersign7pi.png (http://imageshack.us)

Habe zum Teil das Englixche Tutorial benutzt!
Stell die Schriftgröße auf 3, dann sieht es am besten aus!

[lori]

Gut danke für den Tipp! Ich hab ein wenig mit der Schriftgröße experimentiert und als sie am besten aussah, hielt ich sie für viel zu klein! Naja aber sieh doch besser aus! Beim nächsten Versuch mach ich sie kleiner!

[Wakaru]

schön geschrieben :D
wie so viele andere userbars tutorials xD

http://www.m3xvv.co.uk/ubtut/
http://www.thedesignworld.com/forums/showthread.php?t=2902
http://amerikas-army.planet-multiplayer.de/forum/thread.php?postid=6772&sid=f77055b85eb3b9be74018d15ce6aa5d8#post6772
http://www.deviantart.com/view/27886574/
http://s14.invisionfree.com/Electric_Fusion/index.php?showtopic=142&st=0&#last
http://www.userbars.de/userbartutorials.php
http://www.nextgfx.com/forums/lofiversion/index.php/t1879.html
und noch vieeele vieele mehr die alle gleich sind xD

[Scarecrow]

Kann man denn RGB nicht auch 16 oder 32 nehmen? Oder geht dann der Pixeleffekt weg?

[KILLTHIS]

Kann man denn RGB nicht auch 16 oder 32 nehmen? Oder geht dann der Pixeleffekt weg?
Nun, du kannst es versuchen! Ich persönlich habe es bis jetzt nur auf 8 bit getestet, da es mir als gute Grundlage erschien. Aber wenn du's versuchen willst, dann mach ruhig ;) Ich geb dir ein Dankeschön als Belohnung, wenn du beides testest ;)

schön geschrieben :D
wie so viele andere userbars tutorials xD
Da hast du recht ;) Aber was solls, nicht jeder ist der englischen Sprache mächtig oder hat lust erst google zu fragen, auch wenn das eine Sache von vielleicht 5 Minuten ist ;)
Edit:
Hier, ich habe mal für den IRC eine kleine Userbar gebastelt ;)
http://img136.imageshack.us/img136/2018/irc7cw.jpg

[PublicDanger]

Schön...aber wie ich sehe hast du eines der Original Tutorials übersetzt...

http://www.userbars.com/userbartutorials.php

[Dark]

ich habe noch v6.0 muss man da was anderes machen

[guckuck]

Eigentlich müsste es genau so gehen.

[KILLTHIS]

Schön...aber wie ich sehe hast du eines der Original Tutorials übersetzt...

http://www.userbars.com/userbartutorials.php
Nun, das habe ich ja auch zuerst gelesen (ist schon etwas her) damit ich überhaupt wusste wie's geht oder? Kann ich mir ja schlecht aus den Fingern saugen :D aber ihr habt's und ist doch auch gut irgendwo oder?

[Locou]

Ich habe für alle meine selbstgebastelten Userbars eine Vorlage benutzt.
Ich musste immer nur eine Grafik einfügen, Farbe vom Hintergrung ändern und stat "Bauerpower" was anderes hinschreiben. :D

Download Vorlage (http://shaxxer.org/~wakaru/lolkk/Vorlage.psd)

[guckuck]

Cool danke!

[Locou]

Mit der Vorlage kann eigentlich jeder ein Userbar bauen sofern er Photoshop besitzt. :gmod:

[Dark]

2.)Nun benutzen wir das Verlaufs-Werkzeug, um erst mal einen schönen Übergang zu machen. Dabei sollten die Vorder- und Hintergrundfarbe harmonieren, da es sonst zu ziemlich augenfeindlichen Kreationen kommen kann.

das raff ich net das is doch tansparent da sind doch kene farben
ich bin photoshop noob ich wees

[*DEAD*Pr0no0b]

Meins sieht nicht so gut aus:
http://img149.imageshack.us/img149/4803/userbar7qc.jpg

[Locou]

Meins sieht nicht so gut aus:
http://img149.imageshack.us/img149/4803/userbar7qc.jpg

Wozu stellst du das den hier rein?
-Schrift kaum lesbar
-die Striche sind schwarz und machen eben die schrift unlesbar.
-Und die Schrift muss über der Strichen sein. Bleib doch beim modeln...kannst du nähmlich besser:)

lol ich ich däHmlich

[Scarecrow]

Hey KILLTHIS, ich mach das dann mal in 8, 16 und 32... mal sehen, was rauskommt :)

[Maurice]

Möchte jemand ein Tutorial für Gimp (http://www.gimp.org/)?
http://img424.imageshack.us/img424/5426/purchaser7bw.png

[KevOneill]

Natürlich. Wegen der schrift aber. Das Tut hier is cool. Trotz das ich Gimp habe hab ich es hinbekommen.^^
http://img527.imageshack.us/img527/4976/userbar1qs1.png

[Mederflaus]

KevOneill könntest du mir das bitte mal kurz erklären wie du den Punkt 3-6 in Gimp gemacht hast? Habe selber nur Gimp aber ich steige da nicht ganz durch :(
Wäre nett,
mfg Mederflaus

[Luzifer]

Also das werde ich nachher mal ausprobieren.
Jetzt schaff ich & checke das nicht mehr, weil ich zu müde bin. ;)
Also schlaft schön.

[KevOneill]

3.)Nun brauchen wir das Streifenmuster. Dazu erstellen wir eine neue Datei mit folgenden Maßen (die alte Datei nicht schließen):
Breite: 3 Pixel
Höhe: 3 Pixel
Der Rest genau wie bei der ersten Datei.

So wie da steht.

4.)
Normal hineinzoomen. Am besten 800%. Dann halt mit pinsel 1 pixel die linie zeichnen. Oben rechts nach unten links.

5.)
Jetzt "Speichern unter..." oder "Speichern". Im neuen Fenster "Dateityp: ". Da nach unten und Gimp Muster auswählen. Oben erscheint "Dateiname.pat" und Speichern. Dann die Datei in den Ordner Programme/Gimp2/share/gimp/2.0/patterns . Ich weis nicht ob das genau so ist bei dir aber auf jedenfall in den patterns ordner.

6.)
Jetzt Rechts das Farbfüllenwerkzeug wählen. Dann unten Muster auswählen. Geh im neuen Fenster von der Musterauswahl(Durch Doppelklick) und musst wahrscheinlich die Muster neuladen. Den Button mit den 2 Pfeilen. Dann einfach auswählen. Dann zurück zum ersten Bild> Bearbeiten>Mit Muster füllen.

Ich bin nicht gut im Erklären. Ich hoffe du verstehst es.^^

Und direkt ein neues:
http://img516.imageshack.us/img516/5702/gmoduserbarls3.jpg
Mist Scheiss jpg.^^


Edit:Hier (http://www.kcomputerzone.ca/pages/downloads/garrys-mod.php) könnt ihr icons runterladen. Siehe mein Avatar.

[Luzifer]

Ich weiß nicht wie ich ein Bild in ein anderes einfügen kann ._.'
Kann mir da jemand helfen, damit ich so eine Userbar fertigstellen kann? :|

€: Ach. Ich lass das lieber. xD Ich kann das einfach nicht.

[Mederflaus]

Also ich habs jetzt auch mal mit Gimp probiert und es sieht zwar nicht so gut wie eures aus aber es gefällt mir (mehr oder weniger).
Das mit dem Muster (Schrägstriche) hab ich absolut nicht hinbekommen also hab ichs gleich gelassen.
Und ich weiss das ich beim einbauen des F.E.A.R. Logos mist gebaut habe.
http://img512.imageshack.us/img512/6246/userbarlz2.jpg

[KevOneill]

Echt cool geworden. Passt sehr gut mit der Farbe. Nur der schwarze Strich links stört ein wenig.
Mir macht das erstellen von userbars richtig Spass.:D

[Dapper_Dan]

echt cool, ist sehr hilfreich, Vielen Dank. ;)

[Mederflaus]

Ja, den Strich hab ich schon entfernt^^
Hätte nicht gedacht das es gefällt :D
Danke :gmod:
Hast recht, es macht auch Spaß^^
Habe jetzt noch 3 andere erstellt nur hab ich nu keine Ideen mehr.
mfg Meder

[KevOneill]

Ich hab nochmal das andere mit "ich bin gmod süchtig" genommen.
http://img53.imageshack.us/img53/6162/gmod10ubjg9.png

Mir fällt ein ich könnte auch userbars machen wer kein Lust dazu hat oder es net kann. Also ruhig fragen.

[Grüne Gurken]

Ich hab nochmal das andere mit "ich bin gmod süchtig" genommen.
http://img53.imageshack.us/img53/6162/gmod10ubjg9.png




Größe Scanlines würden besser passen

http://img360.imageshack.us/img360/6889/12327110tp6.png

Edit: Wenn jemand die Psd haben will: http://ntxa.pytalhost.org/IMG/18Juli2007/gmod.de/Photoshop/idea_by_KevOneill.psd

[KevOneill]

Ja das sieht gut aus. Wie hasse diese scanlines gemacht? Auch als Muster? und wenn wie?

MfG KevOneill

[Grüne Gurken]

Ja das sieht gut aus. Wie hasse diese scanlines gemacht? Auch als Muster? und wenn wie?

MfG KevOneill

Ja als Muster, hab mich dabei an diesem Bild orientiert.

http://www.media-submarine.de/diascl.gif

und hier ist z.B. das Weiß Scanline Muster:
------
Als Png: http://ntxa.pytalhost.org/IMG/18Juli2007/gmod.de/Photoshop/scanline_muster.png
Als Psd: http://ntxa.pytalhost.org/IMG/18Juli2007/gmod.de/Photoshop/scanline_muster.psd
------

[KevOneill]

Meld mich zwar spät aber besser spät als nie.^^
Naja. Ich hab dein Scanline Muster mal überarbeitet. Man konnte mit dem muster nur in die Breite arbeiten. Jetzt hab ich das so geändert das mach auch sehr große Bilder damit füllen kann.

Hier (http://img71.imageshack.us/img71/1948/scanlinemustermm6.png)