Transparenz

Dich stören die weißen Hintergründe bei deinem Sprite? Dann bist du in diesem Artikel genau richtig, denn hier wird dir am Beispiel verschiedener Programme erklärt, wie du deinen Sprite oder auch andere Bilder transparent machen kannst.

Als transparent wird ein Sprite dann bezeichnet, wenn der Hintergrund beziehungsweise die Hintergrundfarbe nicht mehr vorhanden ist. Diese Eigenschaft wird dir vorallem sehr oft bei Sprite-Wettbewerben aber auch generell auf diversen Websites begegnen, da eine Figur oder ein Teilbild transparent auf einem Hintergrund ästhetischer und sauberer aussieht.

Siehe dir einmal folgende Sprites als Beispiel an:

       

Der Hintergrund wurde schwarz hinterlegt um die Unterschiede deutlich zu machen.

Was fällt dir an den Sprites auf? Nur einer hiervon genügt den Ansprüchen eines wirklich transparenten Sprites: Der ganz rechte.
Der linke Sprite wurde nicht im geringsten transparent gemacht, der mittlere Sprite nur halbherzig: weiße Ränder sind an den Kanten immer noch zu sehen. Völlig transparent ist nur der ganz rechte, der außerhalb der Outlines kein einziges weißes Pixel mehr besitzt.

Jene Transparenz soll mit diesem Tutorial erklärt werden. Da es hierzu viele verschiedene Programme gibt, werden hier nur die geläufigsten behandelt, welche es im Internet völlig kostenfrei zum Downloaden gibt:

Anmerkung: Dateiformate, die Transparenz unterstützen und sich vorallem für Pokémon Sprites eignen, sind *.png und *.gif. Um in jedem Programm auf der sicheren Seite zu stehen, ist vorallem das Format *.png zu empfehlen.


XnView

XnView ist ein Programm, mit welchem Dateien bei recht simpler Bedienung betrachtet und konvertiert werden können. Es ist kein Bildbearbeitungsprogramm im Sinne von Paint und eignet sich nicht zum Spriten, sondern nur zum transparent machen deiner Sprites.
Der Vorteil dieses Programms gegenüber anderen Alternativen liegt darin, dass es weniger Speicherplatz benötigt und für den Anfänger, der ansonsten nur mit Paint arbeitet, zu Beginn schneller zu bediehnen ist.

 Download: XnView

Hinweis: Paint oder ein anderes Grafikprogramm wird benötigt.

Öffne deinen Sprite in einem beliebigen Grafikprogramm und gebe dem Bereich, welchen du transparent machen möchtest, eine Farbe, welche nicht im restlichen Bild vorhanden ist. Das ist sehr wichtig für das spätere Vorgehen, daher achte darauf, eine zum Sprite möglichst gegenteilige Farbe zu wählen.

Starte nun XnView und öffne dort das gerade bearbeitete Bild. Gehe nun auf Bild --> Farben (8 Bit)... und ein Fenster sollte sich öffnen. In älteren Versionen von XnView kann die Leiste auch einfach ausklappen - das Prinzip ist aber das selbige!
Das Fenster, welches sich nun geöffnet haben sollte, heißt In Farben umwandeln. Klicke hier auf das Kästchen Auf Bild anwenden, sodass es so aussieht wie in folgendem Screenshot.

Nun gehe auf Ansicht --> Farbinformationen anzeigen und mache dort gegebenenfalls den entsprechenden Haken, damit du nun, während du mit mit dem Mauszeiger über das Bild fährst, die Farbinformationen siehst. Hierbei kannst du die Koordinaten, den Index, den Hex Code sowie den RGB Wert der Farben sehen - Der für das Transparent machen relevante Wert ist nun allerdings der Index.

Worauf es nun weiterhin ankommt, ist der Index der Farbe, welche du transparent haben möchtest - Fahre mit dem Mauszeiger also auf die entsprechende Farbe und merke dir dessen Index Wert. In diesem Beispiel ist der Index Wert 0.

Gehe nun auf Speichern unter... und wähle das gewünschte Format aus. Es spielt keine Rolle ob du nun *.gif oder *.png benutzt - beide Varianten funktionieren. Hast du das Format gewählt, dann gehe auf Optionen. Nun erscheint ein Fenster, in welchem du einige Optionen am Sprite vornehmen kannst. Der für das Transparent machen wichtige Punkt ist jedoch sofort zu sehen:

Sofern es noch nicht dort ist, mache ein Häkchen bei Transparenz auf Paletteneintrag setzen: und gebe daraufhin im Feld daneben den Index Wert der Farbe an, die du transparent haben möchtest. In diesem Beispiel also 0.

Hinweis: Das Fenster der Optionen verändert sich von *.gif zu *.png geringfügig, was jedoch nicht weiter schlimm ist. Worauf es ankommt ist das die Einstellung Transparenz auf Paletteneintrag setzen: verfügbar ist.

Nachdem du die gerade beschriebene Einstellung vorgenommen hast, drücke auf OK und daraufhin auf Speichern und schon ist der Sprite transparent.


IrfanView

Irfan View ist ähnlich wie XnView als Bildbetrachtungs- und nicht Bildbearbeitungsprogramm zu behandeln. Es unterstützt alle gängigen Formate und kann, wie XnView, einen speziellen Farbwert transparent machen.

 Download: IrfanView

Hinweis: Paint oder ein anderes Grafikprogramm wird benötigt.

Gehe zunächst vor wie bei XnView: Gebe der Farbe, die du transparent machen möchtest eine Farbe, welche sonst nirgends in deinem Sprite enthalten ist.

Starte nun das Programm IrfanView und gehe auf Datei --> Öffnen... und öffne den Sprite, bei welchem du eine spezielle Farbe transparent machen möchtest.

Verändere nun nichts mehr, sondern gehe auf Datei --> Speichern unter... und wähle das Dateiformat *.png aus. Ein Fenster wird sich öffnen - mache einen Haken bei Transparente Farbe speichern.

Tipp: In diesem Fenster findet sich noch eine weitere Einstellungsmöglichkeit, mit welcher du die Dateigröße optimieren kannst: Die Kompressionsstufe. Je nachdem welchen Wert du eingibst, ist die Dateigröße sehr groß (Wert 0) oder so klein wie möglich (Wert 9). Vorallem wenn du diese Dateien auf einem Webspace, wie deinem Speicherplatz bei Pokefans, hochlädst empfiehlt es sich, die Kompressionsstufe möglichst hoch zu setzen.

Gehe nun auf Speichern und ein zweites Fenster wird sich öffnen. Wähle hier die Farbe aus, welche du transparent haben möchtest und dein Sprite ist nun transparent.


Paint.NET

Paint.NET ist ein multifunktionales Bildbearbeitungsprogramm. Es ist nicht wie die zwei vorherigen Programme lediglich auf das Betrachten von Bildern, sondern auf das Bearbeiten ausgelegt und eignet sich daher nicht nur für das Transparent machen sondern auch für das Spriten an sich.

 Download: Paint.NET

Öffne Paint.NET und daraufhin mit Datei --> Öffnen... den gewünschten Sprite. Vergrößere den Sprite mit der Lupe (Kurzwahl: 1xZ) sodass du die transparent zu machenden Stellen gut erkennen kannst. Wähle nun mit dem Zauberstab (Kurzwahl: 4xS) die Stellen aus, welche du transparent haben möchtest und lösche diese. Je nachdem, wie ähnlich sich die Farben sind musst du die Toleranz weiter nach unten richten.

Hinweis: Beim Transparent machen von normal abgespeicherten Sprites empfiehlt es sich, die Toleranz auf 0 zu stellen um Problematiken mit zu ähnlichen Farben zu umgehen. Ist der Sprite allerdings beispielsweise falsch abgespeichert und im schlimmsten Fall verpixelt worden, so kannst du mit einer höheren Toleranz mehr Stellen markieren und den Sprite so schneller transparent machen.

Hast du nun an allen Stellen, die du transparent machen willst, grau-weiße Kästchen (ein Hinweis darauf, dass das Bild an diesen Stellen nun transparent ist) so bist du fertig und kannst den Sprite abspeichern. Gehe hier zu auf Datei --> Speichern unter... und wähle das gewünschte Dateiformat aus.

Achtung: Wählst du *.gif aus, so achte darauf, dass der Transparenz-Schwellenwert hoch genug ist. Um sicherzugehen, stelle ihn am besten auf die höchste Stufe.
Bei *.png musst du hingegen nichts beachten - Der Transparenz-Wert wird automatisch erkannt.

Hast du alles richtig gemacht, so ist dein Sprite nun transparent.


Gimp

Gimp ist wie Paint.NET ein Bildbearbeitungsprogramm und hat daher noch viele weitere Möglichkeiten neben dem Transparent machen von Sprites.

 Download: Gimp

Starte Gimp und öffne deinen Sprite im Programm - ein Fenster mit deinem Sprite wird aufgehen. Klicke nun auf Ebene --> Transparenz --> Alphakanal hinzufügen. Ist diese Option nicht verfügbar so hatte dein Sprite bereits die Grundlagen für einen transparenten Hintergrund.

Nun hast du zwei Möglichkeiten: Entweder du benutzt den Zauberstab um bestimmte Farbbereiche zu markieren oder du klickst auf Nach Farbe auswählen um eine bestimmte Farbe auszuwählen. Am besten stellst du auch an dieser Stelle die Toleranz, in diesem Fall als Schwelle bezeichnet, auf 0 um möglichst nur die Farben zu markieren, die du bei deinem Sprite auch transparent haben möchtest.

Lösche so die markierten Stellen bis an den gewünschten Punkten überall graue Kästchen sind - auch hier ein Zeichen für Transparenz.

Speichere den Sprite indem du auf Datei --> Speichern unter... klickst und wähle dort entweder *.png oder *.gif aus. Hast du an diesen Stellen alles richtig gemacht, so ist dein Sprite nun transparent.

An diesem Inhalt hat arkani88 mitgearbeitet.


Fehler gefunden? Einen Verbesserungsvorschlag? Bitte verwende unser Feedback-Formular!