[Video+TuT] Ladebild verändern

10/21/2010 13:29 Angelυѕ#1
Das Vorwort


Hallo liebe Community-Mitglieder der Warrock-Section,

heute möchte ich mal ein Tutorial reinstellen, wie man das Ladebild,
welches ihr bei Warrock seht, einfach und schnell verändern kann.
Bevor aber voll viele direkt schreiben dass diese Threads bereits bestehen,
ja tun sie auch nur ziemlich doof und zwar sieht das wie folgt aus:


  • Veraltet, nichtmals die Dateien, die man verändern muss sind richtig :)
  • Soo falsch das selbst meine Oma es besser hinkriegen würde *Ironie* :mofo:
  • Soo unübersichtlich dass es kein Mensch versteht :rtfm:


[Only registered and activated users can see links. Click Here To Register...]

Das Tutorial (schriftlich)


So, dann fangen wir mal mit den Programmen an die wir dafür nach meinem Geschmack
her benötigen, welche die so ziemlich einfachsten sind, die man dafür verwenden kann.


Schritt 1: Die Programm-Downloads


[Only registered and activated users can see links. Click Here To Register...]

GIMP ist ein gutes Bildbearbeitungsprogramm, was wir später für die Linien und die Zerhackstückelung
der Bilder benötigen, was mit DXTBmp nicht so einfach zu machen ist, wenns überhaupt möglich ist.


[Only registered and activated users can see links. Click Here To Register...]

Dieses Programm werden wir nach der Bearbeitung des Bildes, eurer Wahl, benötigen
um das ganze in DDS-Textures umzuwandeln, damit euer Warrock die Bilder
auch sozusagen versteht und sich nicht fragt: "Was ist eine JPG-Datei? :o



[Only registered and activated users can see links. Click Here To Register...]



Schritt 2: Die passende Bildersuche



Soo, genug geplaudert. Ich hoffe mal ihr habt nun die beiden Programme,
als Nächstes holt ihr euch ein Bild mit den Maßen 1024*768 bitte nicht kleiner und nicht größer.
Klar man könnte es Zerren, aber das zerstört die Grafik.


Ich nehme für dieses Tutorial, jetzt mal dieses hier:



[Only registered and activated users can see links. Click Here To Register...]



Schritt 3: Die Hilfslinien einbauen


Soo, dann braucht ihr das Bild ja nur noch per Gimp öffnen und wir sind dem
Ganzen schon einen Schritt näher gekommen, so dass wir nun Hilfslinien einbauen können, welche
wir benötigen damit wir im Endergebnis nichts falsch haben..


Benötigten Hilfslinien:

Horizontal:

0
512
768


Vertikal:

0
512
1024


Keine Angst, natürlich lasse ich euch jetzt nicht einfach mit den Daten alleine,
sondern erzähle euch auch wie es funktioniert.
Dafür geht ihr oben bei Gimp auf Bild ~> Hilfslinien ~> Neue Hilfslinie.

Dort könnt ihr nun angeben ob Horizontal, oder Vertikal und auf welcher Position.
Die Angaben die ihr reinpacken müsst, habe ich euch ja oben gegeben.


So sollte dass dann bisher aussehen:



[Only registered and activated users can see links. Click Here To Register...]



Schritt 4: Die Ausschneidung der Teile



So, nachdem ihr nun sozusagen 4 optische Rechtecke auf eurem Bild habt müsst ihr diese 4 herausnehmen,
dafür nehmt ihr einfach das Zeichen in eurem Tool, für die Rechteckige Auswahl, findet man meistens oben Links.

Nun nehmt ihr erstmal das obere Linke Stück heraus, dafür zieht ihr mit eurer Maus einfach von oben links,
bis zu den Hilfslinien ein Rechteck, dann drückt ihr noch schnell STRG + C und dann oben auf
Bearbeiten ~> Einfügen als Neues Bild, mehr dazu in dem unteren Videotutorial..



Das macht ihr dann bitte mit allen 4 Teilen :)
Oben Links, Oben Rechts, Unten Links und Unten Rechts



Oben Links
Oben Rechts
Unten Links
Unten Rechts


[Only registered and activated users can see links. Click Here To Register...]



Schritt 5: Die richtige Speicherung der Bilder


So, als nächstes müsst ihr auf den Namen achten, wie ihr die Dateien nennt,
dass ist wichtig weil nur so funktionieren sie auch bei Warrock und bitte
speichert sie erstmal als Jpg in einem leeren Ordner, oder da wo ihr sie wieder findet.



So müssen die Teile benannt sein:

Oben Links = MainLoadingBG01.jpg
Oben Rechts = MainLoadingBG02.jpg
Unten Links = MainLoadingBG03.jpg
Unten Rechts = MainLoadingBG04.jpg

Nochmal als Bild gesehen:



[Only registered and activated users can see links. Click Here To Register...]



Schritt 6: Die Verwandlung JPG ~> DDS


Ja, zuvor wurde ja alles mit GIMP gemacht, doch nun bitte ich euch DXTBmp zu öffnen,
denn damit verwandeln wir nun die Bilddateien in DDS-Textures.

Nochmal für Anfänger: Wir machen aus den gerade erstellten
Bilder einfach etwas womit Warrock was anfangen kann :)


So, wenn ihr nun DXTBmp offen habt zieht ihr nun das 1. Teil einfach
hinein, und drückt dann oben auf File ~> Save as ~> DDS Texture,
achtet beim speichern drauf dass unten "DDS DXT1 (NoAlpha)" angegeben ist.

Dann einfach speichern, und das macht ihr dann mit allen 4 Teilen,
so dass ihr danach die gleichen Teile habt, und bitte auch dabei
bleiben was das MainLoadingBG01 / 02 / 03 und 04 angeht :)

[Only registered and activated users can see links. Click Here To Register...]

Wenn ihr das alles gemacht habt, habt ihr nun 4 Dateien, als DDS und die müsst ihr nur noch unter folgendem Pfad abspeichern:

C ~> Programme ~> Gamersfirst ~> Warrock ~> Texture ~> UI ~> MainLoading

Achtung: Falls ihr den Standart zurückwollt, sichert euch vorher die Dateien.




[Only registered and activated users can see links. Click Here To Register...]


Das Tutorial (Video)



So, für alle denen das zu schwer war, habe ich auch
nochmal das ganze gefilmt, es könnte zwar sein dass
meine Stimme nicht passend zum Bild ist,
aber deswegen habt ihr ja auch noch den Text hier :)




Mit freundlichen Grüßen
xX-Caligo-Xx
10/21/2010 14:20 akaPrototyp#2
Wow sehr ubersichtlich! Des Weiteren ist auch alles sehr genau beschrieben.
Sehr gute Arbeit.

& ich denke es funktioniert auch :D

Mfg Lasko
10/21/2010 14:25 Angelυѕ#3
Quote:
Originally Posted by Lasko™ View Post
Wow sehr ubersichtlich! Des Weiteren ist auch alles sehr genau beschrieben.
Sehr gute Arbeit.

& ich denke es funktioniert auch :D

Mfg Lasko
Freut mich dass es dir gefällt und darum gings mir auch, ich saß
ungefähr eine Stunde an diesem Beitrag drann, immer wieder
Vorschau gedrückt ob es so gut aussieht ;) Denke mal dass merkt man auch :)

Und ja funktioniert zu 100%, und falls jemand darauf trotzdem nicht
klar kommt, kann ich sogar mal bei Teamviewer reinschauen :)
10/21/2010 14:47 f3tzen#4
Schöner übersichtlicher Aufbau...
Werde nachher mal versuchen mir nen Ladebild zumachen :) hoffe ich schaff es :D

hast nen THX verdient
10/21/2010 16:34 Real~Life#5
Sehr schön gestaltet, übersichtilich und leicht verständlich.

Resultat: Super!

Ich werde im Fall von Spam hier sehr hart durch greifen,
also bitte achtet auf den Sinn eures Beitrags.
10/21/2010 16:53 Burnm0re#6
ich adde das mal zu meinem wichtige links thread:
[Only registered and activated users can see links. Click Here To Register...]

-wirklich sehr schön gemacht
10/21/2010 17:16 Staminastick#7
Quote:
Originally Posted by xX-Caligo-Xx View Post
Das Vorwort


Hallo liebe Community-Mitglieder der Warrock-Section,

heute möchte ich mal ein Tutorial reinstellen, wie man das Ladebild,
welches ihr bei Warrock seht, einfach und schnell verändern kann.
Bevor aber voll viele direkt schreiben dass diese Threads bereits bestehen,
ja tun sie auch nur ziemlich doof und zwar sieht das wie folgt aus:


  • Veraltet, nichtmals die Dateien, die man verändern muss sind richtig :)
  • Soo falsch das selbst meine Oma es besser hinkriegen würde *Ironie* :mofo:
  • Soo unübersichtlich dass es kein Mensch versteht :rtfm:


[Only registered and activated users can see links. Click Here To Register...]

Das Tutorial (schriftlich)


So, dann fangen wir mal mit den Programmen an die wir dafür nach meinem Geschmack
her benötigen, welche die so ziemlich einfachsten sind, die man dafür verwenden kann.


Schritt 1: Die Programm-Downloads


[Only registered and activated users can see links. Click Here To Register...]

GIMP ist ein gutes Bildbearbeitungsprogramm, was wir später für die Linien und die Zerhackstückelung
der Bilder benötigen, was mit DXTBmp nicht so einfach zu machen ist, wenns überhaupt möglich ist.


[Only registered and activated users can see links. Click Here To Register...]

Dieses Programm werden wir nach der Bearbeitung des Bildes, eurer Wahl, benötigen
um das ganze in DDS-Textures umzuwandeln, damit euer Warrock die Bilder
auch sozusagen versteht und sich nicht fragt: "Was ist eine JPG-Datei? :o



[Only registered and activated users can see links. Click Here To Register...]



Schritt 2: Die passende Bildersuche



Soo, genug geplaudert. Ich hoffe mal ihr habt nun die beiden Programme,
als Nächstes holt ihr euch ein Bild mit den Maßen 1024*768 bitte nicht kleiner und nicht größer.
Klar man könnte es Zerren, aber das zerstört die Grafik.


Ich nehme für dieses Tutorial, jetzt mal dieses hier:



[Only registered and activated users can see links. Click Here To Register...]



Schritt 3: Die Hilfslinien einbauen


Soo, dann braucht ihr das Bild ja nur noch per Gimp öffnen und wir sind dem
Ganzen schon einen Schritt näher gekommen, so dass wir nun Hilfslinien einbauen können, welche
wir benötigen damit wir im Endergebnis nichts falsch haben..


Benötigten Hilfslinien:

Horizontal:

0
512
768


Vertikal:

0
512
1024


Keine Angst, natürlich lasse ich euch jetzt nicht einfach mit den Daten alleine,
sondern erzähle euch auch wie es funktioniert.
Dafür geht ihr oben bei Gimp auf Bild ~> Hilfslinien ~> Neue Hilfslinie.

Dort könnt ihr nun angeben ob Horizontal, oder Vertikal und auf welcher Position.
Die Angaben die ihr reinpacken müsst, habe ich euch ja oben gegeben.


So sollte dass dann bisher aussehen:



[Only registered and activated users can see links. Click Here To Register...]



Schritt 4: Die Ausschneidung der Teile



So, nachdem ihr nun sozusagen 4 optische Rechtecke auf eurem Bild habt müsst ihr diese 4 herausnehmen,
dafür nehmt ihr einfach das Zeichen in eurem Tool, für die Rechteckige Auswahl, findet man meistens oben Links.

Nun nehmt ihr erstmal das obere Linke Stück heraus, dafür zieht ihr mit eurer Maus einfach von oben links,
bis zu den Hilfslinien ein Rechteck, dann drückt ihr noch schnell STRG + C und dann oben auf
Bearbeiten ~> Einfügen als Neues Bild, mehr dazu in dem unteren Videotutorial..



Das macht ihr dann bitte mit allen 4 Teilen :)
Oben Links, Oben Rechts, Unten Links und Unten Rechts



Oben Links
Oben Rechts
Unten Links
Unten Rechts


[Only registered and activated users can see links. Click Here To Register...]



Schritt 5: Die richtige Speicherung der Bilder


So, als nächstes müsst ihr auf den Namen achten, wie ihr die Dateien nennt,
dass ist wichtig weil nur so funktionieren sie auch bei Warrock und bitte
speichert sie erstmal als Jpg in einem leeren Ordner, oder da wo ihr sie wieder findet.



So müssen die Teile benannt sein:

Oben Links = MainLoadingBG01.jpg
Oben Rechts = MainLoadingBG02.jpg
Unten Links = MainLoadingBG03.jpg
Unten Rechts = MainLoadingBG04.jpg

Nochmal als Bild gesehen:



[Only registered and activated users can see links. Click Here To Register...]



Schritt 6: Die Verwandlung JPG ~> DDS


Ja, zuvor wurde ja alles mit GIMP gemacht, doch nun bitte ich euch DXTBmp zu öffnen,
denn damit verwandeln wir nun die Bilddateien in DDS-Textures.

Nochmal für Anfänger: Wir machen aus den gerade erstellten
Bilder einfach etwas womit Warrock was anfangen kann :)


So, wenn ihr nun DXTBmp offen habt zieht ihr nun das 1. Teil einfach
hinein, und drückt dann oben auf File ~> Save as ~> DDS Texture,
achtet beim speichern drauf dass unten "DDS DXT1 (NoAlpha)" angegeben ist.

Dann einfach speichern, und das macht ihr dann mit allen 4 Teilen,
so dass ihr danach die gleichen Teile habt, und bitte auch dabei
bleiben was das MainLoadingBG01 / 02 / 03 und 04 angeht :)

[Only registered and activated users can see links. Click Here To Register...]

Wenn ihr das alles gemacht habt, habt ihr nun 4 Dateien, als DDS und die müsst ihr nur noch unter folgendem Pfad abspeichern:

C ~> Programme ~> Gamersfirst ~> Warrock ~> Texture ~> UI ~> MainLoading

Achtung: Falls ihr den Standart zurückwollt, sichert euch vorher die Dateien.




[Only registered and activated users can see links. Click Here To Register...]


Das Tutorial (Video)



So, für alle denen das zu schwer war, habe ich auch
nochmal das ganze gefilmt, es könnte zwar sein dass
meine Stimme nicht passend zum Bild ist,
aber deswegen habt ihr ja auch noch den Text hier :)


[Only registered and activated users can see links. Click Here To Register...]


Mit freundlichen Grüßen
xX-Caligo-Xx
super tut
10/21/2010 17:26 ²SexyBabe²#8
Dieses Tut sieht sehr gut aus und jeder wird es verstehen.
10/21/2010 20:41 Angelυѕ#9
Freut mich dass es so gut ankommt, auch wenn anderen
so die Wolfsbilder nicht so gut gefallen, nunja...

Jedenfalls werde ich, sobald ich wieder was schönes und brauchbares kann gerne
noch ein Tutorial erstellen und euch auch mit dessen Struktur und Design beglücken :)
10/21/2010 20:54 .IlluSion#10
Sehr schoenes Tut, du hast dir wie man auch sieht sehr viel Arbeit gemacht, aber es hat sich gelohnt;)
10/21/2010 21:01 roman13524#11
Von mir gibst ma ein thanks für die mühe ;)
10/23/2010 10:44 {[@•Sk!LLB0mB•@]}#12
jo gutes tut =D ist auf jeden fall ein thx wert
10/27/2010 15:45 ʍǝʎɹo#13
Bei mir funktionniert es nicht :(
Der Ladeschirm bleit einfach schwarz :(
10/27/2010 16:30 OriginalFenistilGel#14
nice TuT

hast mein thx
10/27/2010 16:41 Angelυѕ#15
Quote:
Originally Posted by ʍǝʎɹo View Post
Bei mir funktionniert es nicht :(
Der Ladeschirm bleit einfach schwarz :(
Meld dich mal per ICQ oder Skype bei mir,
vielleicht kann ich dir ja helfen den Fehler zu finden :)