Eigene Grafiken Randlos bearbeiten für den RPG Maker 2000/2003 (Photoshop)

Oft hat man gerade bei den älteren Makern das Problem, dass man eigene Grafiken, wenn man sie importiert, hässliche Pixelränder entstehen, die keiner sehen möchte.

Beispiel:


Diese unter diesen Umständen jetzt so zu bearbeiten ist problematisch und dauert einfach zu lange.
Dieses Tutorial soll euch helfen, eben das Problem zu umgehen und den Arbeitsaufwand gering zu halten.


Schritt 1: Der Anfang

Software
Ihr braucht eine Software mit der Funktion Layers (deutsch: Ebenen). In diesem Tutorial werde ich das mit Adobe Photoshop machen.

Die Grafik
Diese sollte Idealerweise am PC entstanden sein und einen transparenten Hintergrund (nachfolgend HG genannt) haben! Wie dieser eingestellt werden kann, wird euch in >diesem< Tutorial erklärt.

Und schon kann es losgehen :)


Schritt 2: Bearbeitung

Ihr öffnet eure Software und eure Grafik. Es sollte ungefähr so aussehen:


Ich gehe kurz auf die einzelnen Layer ein:
Mittig rechts seht ihr die Layers-Leiste. An erster Stelle stehen die Konturen, unter dieser in einem Unterordner zusammengepackt die Colorations-Ebenen und zum Schluss der HG-Layer.

Jetzt denkt ihr euch:
„Sagtest du vorhin nicht, dass der HG transparent sein soll? Der HG ist doch grün!“

Langsam ;) Der HG ist auf dem Screen zwar momentan zu sehen, kann aber ganz leicht ausgeblendet werden, wenn man das Auge vor dem HG-Layer anklickt. Das geht nur, da ich den HG seperat auf eine Ebene gemacht habe.


So, jetzt ist er ausgeblendet.
Anmerkung: Ich färbe meine Hintergründe nur gerne ein, um bei der Coloration erkennen zu können, wo sich noch „Lücken“ befinden.

Eure Grafik soll nun so aussehen!

Der nächste Schritt wird sein, dass die Konturen und die Colorations-Ebenen als eine Ebene zusammengefügt werden. Das macht ihr so:

Klickt die Konturen-Ebene an, dann geht auf Layer -> Merge Layer…


Und nun habt ihr die Konturen und die Coloration als eine Ebene.

Euer nächster Schritt ist es, diese Grafik in das gewohnte 320 x 240 Format zu bekommen.

Klickt eure Ebene mit eurer Grafik an, drückt STRG + A (alles markieren) und STRG + C (Kopieren).
Öffnet nun eine neue Datei und gebt die Maße ein.

Wichtig dabei: HG soll transparent sein!

Dann sollte es nun bei euch auch so aussehen:

Eine neue Datei, im gewohnten Maker-Format.

Fügt nun mittels STRG + V (Einfügen) eure Grafik ein.
Danach könnt ihr unter Umständen diese nicht sehen, aber keine Sorge! Drückt STRG + T und …



… es erscheint ein Rahmen. Zoomt etwas weiter weg, um den Rahmen komplett zu sehen.

Nun klickt ihr einen der Eckpunkte an und haltet die SHIFT-Taste gedrückt, damit die Grafik proportional verkleinert wird. Das Ergebnis wird ungefähr so aussehen:


Ihr legt nun eine neue Ebene an (entweder über Layer -> New… -> Layer oder STRG + SHIFT + N) und richtet sie unter die aktuelle Ebene:


Jetzt wird es nämlich interessant. Dies sind die wichtigsten Punkte, um eine randlose Grafik zu bekommen.

Wir wissen, dass der Maker nur Grafiken im PNG oder BMP-Format annimmt und keine Transparenz anzeigt, sollte sie im PNG-Format vorhanden sein. Daher sind wir dazu gezwungen, eine Hintergrundfarbe festzulegen, die im Maker per Importieren ausgewählt werden soll.

Unsere Grafik hat ausnahmslos schwarze Konturen. Hier können wir den Trick verwenden, eine ähnliche Farbe auszuwählen, die Schwarz sehr nahe kommt, aber es nicht ist.

In unserem Beispiel ist es so:
Der Farbcode für die Konturen lautet 000000
Für den HG lege ich nun folgende Farbe fest: 1E1E1E
Dies ist ein sehr dunkles Grau, fast schon Schwarz.

Mit dieser Farbe färben wir nun Layer 2 komplett. Es sollte nun so aussehen:


Nun legen wir noch eine weitere Farbe fest, die nun die transparente Farbe im Maker sein wird: 00FF00
Dies ist ein grelles Grün.

Mit diesem Färbt ihr randlos eine beliebige Ecke ein, ohne zu nahe an die Grafik zu kommen!

Das sieht dann so aus:


Als nächstes wählt ihr das Werkzeug Fülleimer aus und stellt ihn so ein wie auf dem folgenden Screen:


Nun stellt ihr eure Grafik auf 256 Farben ein. Verwendet am besten diese Einstellungen:


Was haben wir hier nun getan?
Dadurch, dass wir die Grafik auf 256 Farben runterskaliert haben, können wir eben nur noch mit dieser geringen Anzahl an Farben arbeiten. Zudem befindet sich jetzt alles auf einer Ebene.

Jetzt sorgen wir dafür, dass der HG später transparent im Maker wird:

Nehmt noch mal den Fülleimer, wählt die grüne Farbe aus und klickt in den schwarzen HG. Dieser wird nun komplett grün:


Dadurch, dass wir zuerst das dunkle Grau als HG ausgewählt haben, das Grün als weitere Farbinformation ‚eingegeben’ haben, die richtige Fülleimer-Einstellungen genutzt und den HG nun grün eingefärbt haben, haben wir nun keinen Verlust der Konturen zu beklagen.

Wir haben hier nun ein „reines“ grün, welches keine unscharfen Ränder hat und diese hässlichen Ränder zurücklässt wie bei dem Beispielbild ganz oben.

Und so sieht es nun im Maker aus:


Wenn ihr das so geschafft habt, wisst ihr nun, wie ihr eure Grafiken ohne großen Aufwand in Zukunft so bearbeiten könnt :)


Schritt 3: Mögliche Fehler

Trotz dieser Methode kann es passieren, dass einige grüne Pixel übrig bleiben, diese man auf dem ersten Blick nicht sieht!


In diesem Fall öffnet ihr einfach die Grafik noch mal, nimmt eine x-beliebige Farbe (bei mir war es pink, was durch die Farbreduzierung ins Rote ging) und guckt, wo die grünen Pixel noch vorhanden sind und übermalt diese mit der beliebigen Farbe. Danach nehmt noch mal die grüne Farbe und färbt alles mittels Fülleimer in einem Zug ein. Dann sind diese weg.

Dann neu importieren und fertig!

Ich hoffe, dass euch dieses Tutorial geholfen hat :) Wenn Fragen und Anregungen sind, einfach Bescheid sagen. Ich versuche, euch dann so gut es geht zu helfen.

- Das Inno -