gfx gfx
gfx gfx
Please login or register.

Login with username, password and session length
gfx gfx
gfx gfx

  • Welcome at our new home!!!

    This is the Snej Portal, home of several D2 Modifications and D2SE
  • On our Realmserver you can find this hosted Mods:

    Snej
    Reign of Shadows (RoS)
    Eastern Sun (ES)
  • You can also find the home of the

    Aftermath Mod here

    https://snej.org/forum/index.php?board=674.0
gfx gfx
gfx
April 04, 2020, 04:26:23 AM
*
gfx gfx
gfx* Home Help Search Login Registergfx

Author Topic: Konkrete Anleitung zum modifizieren von d2 Grafiken in Photoshop  (Read 4070 times)

0 Members and 1 Guest are viewing this topic.

Offline momo_deeTopic starter

  • Betatester
  • Bloodraven
  • **
  • Posts: 11
  • Gender: Male
  • pornöser Maler
So hier nun mal ein konkretes Beispiel zum ändern der Ingame-Grafiken.
Wir nehmen uns mal den Rahmen in der 800x600 Auflösung vor.

Was wir benötigen:
die dc6 Datei 800BorderFrame.dc6 zu finden in der d2exp.mpq unter DATA\GLOBAL\UI\PANEL\
WinMPQ oder MPQEditor
DC6Creator
Grafikprogramm (hier Photoshop CS3)
die UNITS.PAL Farb-Palette

So los gehts Schritt für Schritt.

Wir öffnen einen MPQ-Editor, ich nehme hier den MPQEditor64 und laden uns über File->MPQ-Archiv öffnen die d2exp.mpq aus der Diablo2 Version die wir modifizieren wollen. Es kommt noch ein Dialog wo wir den 1. und 3. Haken setzen.


Bild 1: Öffnen Dialog vom MPQEditor64

Jetzt wurschteln wir uns durch die Baumstruktur auf der linken Seite bis wir bei dem Ordner PANEL sind, auf der rechten Seite wird der Inhalt dargestellt.


Bild 2: Struktur im MPQEditor

800BorderFrame.dc6 markieren, rechte Maustaste drücken und im Kontextmenu Entpacken auswählen, dann das Verzeichnis auswählen wo wir daqs alles hinhaben wollen und entpacken.
Die Datei wird jetzt dorthin entpackt wo wir das Verzeichnis angegeben haben. Z.B.: C:\Mod\DATA\GLOBAL\UI\PANEL\800Borderframe.dc6.

Okay jetzut haben wir die Datei entpackt und können den MPQEditor schliessen.
Jetzt gehts ans konvertieren der dc6 Datei damit wir die Grafiken bearbeiten können.

Also öffnen wir jetzt den DC6Creator, klicken auf den Open... -Button und wählen unsere 800BorderFrame.dc6-Datei aus.


Bild 3: geladene Datei im DC6Creator

Nun konvertieren wir alle Frames durch Klick auf den Button Export All. Im darauffolgenden Dialog: Export All Frames Options markieren wir PCX oder BMP was jeder für besser hält und drücken OK.


Bild 4: ExportDialog

Wir nehmen mal PCX, das macht sich nacher besser. Jetzt müssen wir noch den Ordner aussuchen wo wir das ganze hin konvertiert haben wollen und OK drücken. In dem Ordner den wir ausgewählt haben, hat DC6Creator einen Ordner mit dem Namen 800BorderFrame_pcx erstellt. Dadrin befinden sich jetzt ein Ordner (00) und eine INI-Datei in der z.B. die Maße der einzelnen Grafiken(Frames) stehen.
Im Ordner(00) sind jetzt die einzelnen Frames gespeichert immer in 256x256 Pixel Größe. Diese Grafiken können wir nun bearbeiten.


Bild 5: Inhalt des Ordners "00"

Also los, wir öffnen nun unser Grafikprogramm und erstellen uns eine neue Datei mit den Maßen 800x556 Hintergrundfarbe hab ich weiß, aber das ist vollkommen egal. Jetzt nehmen wir uns mal die Übersicht aus dem anderen Tutorial zu hilfe, dort wo man sieht welches Frame wo hinkommt. Also dieses hier:


Bild 6: Anordnung der Frames

Jetzt erstellen wir uns unsere Hilfslinien. Okay das erste Frame ist 256x256 groß, also in Photoshop auf Ansicht->neue Hilflinie. Im Dialog bei Position 256 eingeben und Vertikal können wir so lassen. Das ganze machen wir jetzt nochmal mit der Einstellung Horizontal. Das machen wir jetzt weiter bis wir alle Hilflinien haben, also für die nächste Vertikale Hilfslinie schauen wir wie groß Frame 0001 ist(in der INI schauen) = 144x66 Pixel. Das heisst die nächste Hilfslinie muss Frame 0000 + Frame 0001 hin = 256+144 = 400 also neue Hilfslinie->Vertikal und Position 400. Zack super.
Im Endeffekt sollte das dann so aussehen:


Bild 7: Alle Hilflinien

So jetzt nehmen wir uns die Frames vor. Wir müssen ja nun noch die schwarzen Bereiche transparent machen. Also nehmen wir mal Frame 0000.
Als erstes doppelklicken wir auf die Ebene im Ebenenfenster und machen aus dem Hintergrund eine normale Ebene. Also Doppelklick und im Dialog dann OK.


Bild 8: Ebene vorher als Hintergrund               Bild 8a: in normale Ebene geändert

So hier unser Frame 0000 noch ohne Transparens


Bild 9: Frame 0000 ohne Transparenz

Jetzt nehmen wir das Auswahl Rechteck-Werkzeug (taste M) und markieren uns den schwarzen Bereich und drücken dann Entfernen. Jetzt haben wir den schwarzen eigentlich im Game transparenten Bereich entfernt.


Bild 10: Frame 0000 mit markiertem Bereich


Bild 11: frame 0000 mit Transparens

Das machen wir nach und nach mit allen 10 Frames und fügen sie dann in unsere Datei mit den Hilfslinien ein.


Bild 12: Eingefügte Frames

Wer das jetzt nicht akurat hinbekommt, braucht nicht verzweifeln, ich stelle eine psd-Datei bereit in der schon alles fix und fertig ist.
Anhand unserer Hilfslinien sehen wir jetzt, das der tatsächliche Rahmen nicht so groß ist wie dei Maße der einzelnen Frames. Das heisst das wir die sachen nacher noch mit der Transparensfarbe füllen müssen. Um uns das zu erleichtern färben wir jetzt mal gleich die Hintergrundebene ein. Also die unterste Ebene(Hintergrund) markieren, im Ebenen-Fenster, dann Bearbeiten->Fläche füllen, im Fläche füllen Dialog wählen wir in der oberen Auswahlbox den Punkt Farbe... aus. Es öffnet sich der Farbwahl Dialog. Hier tragen wir unten bei der Raute (#) den hexadezimalen Wert für unser Pink ein, also FF00FF und drücken OK. Jetzt ist der Hintergrund in der Transparensfarbe.


Bild 13: Pink einfärben,Dialoge


Bild 13a: eingefärbte Hintergrundebene

Nun blenden wir diese Ebene aus indem wir im Ebenenfenster auf das Auge klicken. Wir markieren jetzt die oberste Ebene (markiert ist sie wenn sie blau hinterlegt ist).
Jetzt im Menü Ebene->Sichtbare auf eine Ebene reduzieren klicken. Nun sind die Ebenen mit den Frames auf eine Reduziert.


Bild 14: Ebenen vor und nach dem reduzieren.

Jetzt können wir die Hintergrundebene wieder einblenden.

Nun können wir unsere Kreativität ausleben und uns einen neuen Rahmen basteln. Dazu legen wir uns eine neue Ebene über den anderen an. Dafür markieren wir die oberste Ebene und klicken auf das Symbol am unteren Rand des Ebenen Fensters, siehe Bild.


Bild 15: neue Ebene anlegen

So in dieser Ebene können wir jetzt malen oder sonstewas machen. Wir müssen nur beachten das wir nicht über den alten Rahmen hinausmalen.

Ich hab mal auf die Schnelle die Diablo3 Map genommen und eingefügt.


Bild 16: eingefügte Karte von Diablo3

Alles auf Hintergrundebene reduzieren.

Jetzt können wir die Frames wieder ausschneiden, immer schön an unseren Hilfslinien, und immer daran denken wie die Maße der einzelnen Frames waren.
Also z.B. Frame 0000, mit dem Rechteckauswahl Werkzeug (M) markieren wir diesen Frame, dran denken 256x256 Pixel ist der groß.


Bild 17: Frame markieren

Nun Strg und X drücken zum Ausschneiden oder übers Menü Bearbeiten->Ausschneiden, dann Datei->Neu und im folgenden Dialog sollte bei Vorgabe->Zwischenablage stehen und bei Höhe und Breite sollte 256 stehen, OK drücken.
Es öffnet sich eine neue Datei und wir gehen übers Menü, Bearbeiten->Einfügen oder alternativ Strg + V.

Jetzt binden die UNITS Farbpalette an.
Das geht so, wir gehen im Menü auf Bild->Modus->Indizierte Farbe. Als erstes werden wir drauf hingewiesen das alle Ebenen auf die Hintergrundebene reduziert werden wenn das nicht schon geschehen ist. OK drücken. Nun öffnet sich der Dialog Indizierte Farbe. Dort wählen wir im obrigen Auswahlfeld Benutzerdefiniert, worauf sich die derzeitige Farbpalette öffnet.


Bild 18: in Farbpalette umwandeln

Im Farbpalettendialog wählen wir auf der rechten Seite Laden und laden somit unsere UNITS Palette. Dann nur noch OK drücken und alle Ebenen sind zusammengefügt und im Ebenenfenster muss bei dieser Ebene Indiziert stehen.

Das machen wir jetzt mit allen anderen Frames auch. Es ist von Vorteil sich die Frames so auf der Arbeitsfläche anzuordnen wie sie auch im Rahemen sind. Also so:


Bild 19: Angeordnete Frames

Jetzt speichern wir alle Frames. Also Frame wählen und Datei->Speichern unter... PCX auswählen und einfach über das alte Frame drüberspeichern, also Frame 0000 auswählen und einfach ersetzen.

Wenn das erledigt ist öffnen wir wieder den DC6Creator und klicken auf New. Jetzt wurde im Hintergrund eine neue dc6 Datei angelegt, die einen Frame beinhaltet. Unter den Frames ist ein Button "Add". da unsere BorderFrame datei aus 10 Frames besteht müssen wir jetzt noch durch klicken auf Add neun Frames hinzufügen. Danach sollten da die Frames von 0000-0009 stehen.
Nun markieren wir Frame 0000 und klicken dann auf Import. Dort im Auswahlfenster suchen wir unseren Frame 0000.pcx und laden ihn rein. Jetzt wird der Frame auf der rechten Seite angezeigt. Der Bereich den wir als transparent gekennzeichnet haben(Pink) muss jetzt schwarz sein, oder wir haben etwas falsch gemacht.


Bild 20: geladener Frame 0000.pcx

Das machen wir jetzt mit allen anderen Frames auch. Zum Schluss drücken wir auf Speichern unter und nennen die Datei 800BorderFrame oder ersetzen einfach die alte.

Fertich

Jetzt öffnen wir unseren Diablo2 Ordner und erstellen einen Ordner mit dem Namen data. Dadrinn einen Ordner mit dem Namen global -> Ordner (ui)->Ordner(Panel) und in diesen Ordner schmeissen wir unsere 800BorderFrame.dc6.
Also die Strucktur muss so sein data\global\ui\panel\800BorderFrame.dc6

Jetzt starten wir Diablo2 mit dem Kürzel -direct und Tadaaaaaaa unser neuer Rahmen.


Bild 21: neuer Rahmen ingame


So das war es erstmal. Wenn es Fragen gibt, fragen. Das war nun die Version für Photoshop. Vieleicht erbarmt sich Barby vom Sacntus Mod ja und passt dieses Beispieltutorial mal an Gimp an, ich weis das er mit Gimp arbeitet.

Also viel Spass

momo_dee


Hier noch eine rar Datei mit der Anleitung als PDF, eine psd-Datei für Photoshop und die fertig geänderte 800BorderFrame.dc6.

http://rapidshare.com/files/412957834/D2GrafikenModdenAnleitung.rar.html
5 Minuten scheisst ein Hund, bei mir da dauerts ne ganze Stund'

Offline BARBY

  • PactofEvil
  • Witch Doctor Endugu
  • **
  • Posts: 379
  • Gender: Male
  • Ich seh Dich.
Re: Konkrete Anleitung zum modifizieren von d2 Grafiken in Photoshop
« Reply #1 on: August 16, 2010, 07:02:08 PM »
Hi momo  ;)


hier ist dann mal die Gimp Variante. So sehr unterscheidet sich Gimp nicht von Photoshop, daher musste ich nur die Farbe zu Tranzparent neu machen.


Grafik hochladen, mit dem Rechteckwerkzeug die schwarze Fläche auswählen.



Über Farbe ---> Farbe zu Tranzparenz auswählen



die gewünschte Farbe auswählen die Ihr Tranzparent haben wollt



den HTML Code auf 000000 stellen



Auf OK drücken



jetzt nur noch abspeichern und tada fertig




Hier sind noch ein paar wichtige Link zu Gimp Gimp-Handbuch,Gimp-Grundlagen, Gimpusers, Gimps,Gimpforum, Gimpwerkstatt

Edit: Ach ja, sehr schöner Guide momo

Gruß

Barby
« Last Edit: August 16, 2010, 07:08:14 PM by BARBY »
21.10.2011 (16:43:54)alpha: du bist der chef

Mathrigo : Du bist und bleibst unnormal...^^, aber wie gesagt ist ja deine Arbeit

Sanctus Mod PoE Database
Sanctus Mod PoE Changelogs
Modresources
Mod Download

Offline RIP-Raven

  • Bloodraven
  • **
  • Posts: 13
  • Gender: Male
Re: Konkrete Anleitung zum modifizieren von d2 Grafiken in Photoshop
« Reply #2 on: February 21, 2011, 09:11:02 PM »
hab das grad mal probiert und klappt, nur weis ich nicht wo die UNITS palette ist und somit stimmt das resultat nicht -> verpixelt, da ich einfach die angebotene palette benutzt hab beim indizieren...
D2M: RIP-Raven5 / RIP-Legends (inactive atm)
Netherworld: Sadillan

Offline ki4m

  • Netherworld
  • Icehawk Riftwing
  • ***
  • Posts: 395
  • Gender: Male
  • En Ebbelwoi geht immer nei
Re: Konkrete Anleitung zum modifizieren von d2 Grafiken in Photoshop
« Reply #3 on: February 24, 2011, 10:59:03 PM »
hab das tut auch getestet, kann aber die units.pal nirgends finden, hab im phrozenkeep eine d2-units.pal gefunden aber die funktioniert nicht(wohl nur für paint shop pro)...

Edit: danke jetzt funktioniert alles :)
« Last Edit: March 04, 2011, 02:32:11 PM by ki4m »

Offline momo_deeTopic starter

  • Betatester
  • Bloodraven
  • **
  • Posts: 11
  • Gender: Male
  • pornöser Maler
Re: Konkrete Anleitung zum modifizieren von d2 Grafiken in Photoshop
« Reply #4 on: March 04, 2011, 12:02:34 PM »
5 Minuten scheisst ein Hund, bei mir da dauerts ne ganze Stund'

Offline BARBY

  • PactofEvil
  • Witch Doctor Endugu
  • **
  • Posts: 379
  • Gender: Male
  • Ich seh Dich.
Re: Konkrete Anleitung zum modifizieren von d2 Grafiken in Photoshop
« Reply #5 on: March 04, 2011, 07:17:20 PM »
Bevor die Frage aufkommt, ja die Palette funktioniert auch mit Gimp

Gruß

Barby
21.10.2011 (16:43:54)alpha: du bist der chef

Mathrigo : Du bist und bleibst unnormal...^^, aber wie gesagt ist ja deine Arbeit

Sanctus Mod PoE Database
Sanctus Mod PoE Changelogs
Modresources
Mod Download

Offline Snejfan234

  • Little Pickpocket
  • *
  • Posts: 8
Re: Konkrete Anleitung zum modifizieren von d2 Grafiken in Photoshop
« Reply #6 on: March 17, 2011, 08:40:00 AM »
Hey momo hammer tutorial nett das du dir die mühe gemacht hast! kannste deine rar file nochmal bei filebeam uppen? Ich kann bei rapidshare den download nicht erreichen.

snejfan
« Last Edit: March 17, 2011, 10:51:12 AM by Snejfan234 »

Snejportal  |  D2SE  |  General Modding  |  General Discussion (Moderator: SirSamusAran)  |  Topic: Konkrete Anleitung zum modifizieren von d2 Grafiken in Photoshop
 

gfxgfx
gfx
SMF 2.0.10 | SMF © 2015, Simple Machines  Snejtheme V2 by Seltsamuel/Faust (based on Helios Multi by Bloc)
gfx