So erstellen Sie ein Pixel Sprite

Inhalt

• Erster Schritt: Planen Sie Ihr Bild
• Schritt zwei: Größenänderung
• Schritt drei: Anti-Aliasing
• Schritt vier: Schattierung
• Das fertige Sprite
• Tipps und Tricks

Vanadis liebt es Dinge zu machen und hat Erfahrung als Künstler und Animator in der Spiele- und Werbebranche.

Pixelkunst ist eine Kunstform, die auf dem Pixelstil basiert, der für frühe Videospiele entwickelt wurde. Die ersten Spielekonsolen hatten Ausgabebeschränkungen (z. B. niedrige Auflösung und Farbanzeige), und diese Einschränkungen führen zu einer neuen Technik zum Erstellen von Bildern. Heute ist dieser Retro-Look unglaublich beliebt und wird von vielen Künstlern nachgebildet. Trotz technologischer Fortschritte, die diese alten Techniken überflüssig machen, werden Spiele derzeit noch im Pixel-Art-Stil veröffentlicht.

Dieser Artikel beschreibt das Erstellen eines eigenen Pixel-Sprites mit einer Schritt-für-Schritt-Anleitung und einigen nützlichen Tipps und Tricks.

Erster Schritt: Planen Sie Ihr Bild

Der erste Schritt besteht darin, zu entscheiden, welche Art von Charakter Sie erstellen möchten und wie stilisiert oder realistisch Sie ihn haben möchten. Es kann ein sehr einfacher Cartoon oder eine komplexere realistische Figur sein. Zum Beispiel habe ich etwas in der Mitte gewählt.

Mach dir noch keine Sorgen um Pixel - sie kommen später. Zeichne einfach deinen Charakter wie gewohnt.

Ich begann mit einer einfachen Skizze und arbeitete sie dann von dort aus auf, indem ich Farbe hinzufügte und die Linien aufräumte Adobe Photoshop. Ich habe angefangen, in einer relativ großen Datei (ca. 1000 Pixel hoch) zu arbeiten, arbeite aber nur in dem Maßstab, den Sie am bequemsten finden - größer als die endgültige Größe Ihres Sprites ist am besten.

Sie müssen Photoshop nicht verwenden, um Ihr Pixel-Sprite zu erstellen. Es gibt eine Reihe von kostenlosen Programmen mit den erforderlichen Tools, wie z MS Paint und Grafik Sturm. Wenn Sie jedoch Ihr eigenes Bild von Grund auf neu erstellen, anstatt über ein vorhandenes zu arbeiten, ist Photoshop der richtige Weg.

Wenn ich ein Bild von Grund auf neu mache, finde ich es sehr hilfreich, auf verschiedenen Ebenen zu arbeiten: einer Ebene für die Linienführung, einer Ebene für die lokalen Farben, Ebenen für Licht und Schatten und zusätzlichen Ebenen für Details. Verwenden Sie so wenige oder so viele Ebenen, wie Sie möchten, aber gehen Sie nicht über Bord, da es schwierig sein kann, den Überblick zu behalten! Wenn es um die Pixelstufe geht, ist es am besten, alle Ebenen zusammenzuführen (mit Ausnahme des Hintergrunds).

Schritt zwei: Größenänderung

Sobald Ihr Charakterbild fertig ist und Sie mit dem Gesamtbild zufrieden sind, ist es Zeit, es zu pixelieren!

Erstens muss die Größe wahrscheinlich geändert werden. Pixelkunst ist im Allgemeinen sehr klein. Manchmal kann ein Sprite nur 20 x 20 Pixel groß sein, insbesondere solche, die für Handheld-Geräte entwickelt wurden.

Je kleiner es ist, desto einfacher und übertriebener muss der Stil sein. Da das von mir verwendete Bild relativ komplex ist, muss es ein großes Sprite sein, daher habe ich die Größe auf 275 Pixel (oder 300 Pixel einschließlich Hintergrund) geändert. Viel größer als dies und es beginnt das Pixel-Sprite-Gefühl zu verlieren.

Schritt drei: Anti-Aliasing

Eines der Probleme bei der Größenänderung ist das Anti-Aliasing. Es gibt einige Optionen, die Sie ändern können, um dies zu vermeiden, z 'nächster Nachbar (harte Kanten bewahren)' im Dropdown-Menü des Bildgrößenfensters, aber ich finde, dies zerstört die Details. Außerdem betrügt es! Die beste Pixelkunst wird von Hand gemacht - im Old-School-Stil.

Das Bild in der neuen Größe sieht also sehr weich aus und ähnelt noch gar nicht der Pixelkunst. Der erste Schritt zur Pixelisierung besteht darin, die Bildränder zu bereinigen und das Anti-Aliasing zu beseitigen. Dies bedeutet, dass Kantenpixel mit einer Deckkraft von weniger als 100% mit dem Bleistiftwerkzeug oder dem Radiergummi gelöscht oder mit 100% Deckkraft neu gezeichnet werden müssen.

Um diesen Prozess zu unterstützen, ändere ich normalerweise den Hintergrund in ein helles Blau oder eine Farbe, die nirgendwo auf dem Bild zu finden ist. Dadurch sind die Kanten leichter zu erkennen (weshalb es wichtig ist, den Hintergrund getrennt zu halten!).

Abhängig vom gewünschten Stil möchten Sie möglicherweise einen starken Umriss um das Sprite hinzufügen. Ich habe mich für dieses Bild entschieden, aber es gibt verschiedene Formeln zum Erstellen glatter Pixelkurven und -konturen. Eine andere häufig verwendete Technik besteht darin, das gesamte Bild mit einem weißen Umriss zu versehen. Ich glaube, dies war ursprünglich dazu gedacht, das Sprite aus dem Spielhintergrund herauszuholen, und es ist eine Frage der stilistischen Präferenz.

Sobald Sie die Kanten bereinigt haben, nimmt das Bild Gestalt an und sieht mit der Pixelkunst mit scharfen Kanten deutlicher aus. Aber es ist noch ein langer Weg, da die Beschattung im Inneren Arbeit braucht.

Schritt vier: Schattierung

Jetzt ist es Zeit für eine Pixelschattierung. Glatte Farbverläufe sind nicht erlaubt! Das Bild, das ich verwendet habe, hat viele davon und eine Million Farben zum Booten! Pixelkunst sieht in der Regel authentischer und retro aus, je weniger Farben Sie verwenden, aber es ist auch viel schwieriger, mit weniger Farben realistisch zu schattieren.

Es gibt zwei Hauptmethoden, um diese Einschränkung zu überwinden: Zellschattierung und Dithering.

Bei der Zellschattierung werden flache Farben und ein Mittelton zwischen zwei Schattierungen verwendet, um den Übergang zwischen ihnen zu glätten. Es ist großartig, um einen sauberen, stilisierten Look zu erhalten, aber es kann bald anfangen, viele Farben zu verbrauchen.

Für einen Retro-Stil gibt es Dithering. Dithering hilft, zwei Farben zu mischen, indem ein Muster verwendet wird, das das Auge aus der Ferne täuscht. Wenn Sie sich in einer stark eingeschränkten Farbpalette befinden, können Sie mithilfe der grundlegenden Farbtheorie neue Farben auf diese Weise „mischen“. Zum Beispiel durch Dithering von Blau und Gelb, um einen grünen Farbton zu erhalten. Dithering fügt auch Textur und einen unverwechselbaren Stil hinzu, der an die 8-Bit-Ära erinnert.

Für mein Bild habe ich hauptsächlich Dithering verwendet. Sie können damit wild werden. Es gibt einige Grundformeln, die mit einem Schachbrettmuster befolgt werden müssen, das an den Rändern dünner wird, aber so ziemlich alles geht, solange es gemustert ist. Wenn Sie versuchen, die Airbrush für zufällige Pixel zu verwenden, funktioniert dies nicht so gut. Das Folgen eines Musters ist die beste Methode, auch wenn es sich ändert, um der Form der Struktur zu folgen, die es darstellt.

Das fertige Sprite

Und du bist fertig!

Das Piraten-Sprite, das ich erstellt habe, verwendet viele Farben, wodurch sie realistischer aussieht als die wirklich frühen Sprites. Wenn Sie einen Retro-Look bevorzugen, beschränken Sie die Farben und verkleinern Sie sie wie beim Spartaner.

Viel Glück und viel Spaß beim Erstellen von Sprites!

Tipps und Tricks

• Versuchen Sie niemals, ein Pixel-Sprite von Grund auf neu zu erstellen. Es ist besser, von einem verkleinerten Bild als Ausgangspunkt zu arbeiten.
• Verwenden Sie einen bunten Hintergrund, der sich von Ihrem Sprite abhebt, um Kanten zu bereinigen und streunende Pixel zu entfernen.
• Beachten Sie, dass das Design umso einfacher sein muss, je kleiner das Sprite ist. Winzige Sprites sind am besten im Chibi-Stil (wie der Spartaner oben auf der Seite).
• Zellschattierung oder Dithering oder eine Kombination funktioniert. Keine Farbverläufe!
• Photoshop verfügt über eine Speicherfunktion. 'Speichern Sie für Web und GeräteHier können Sie die Anzahl und Art der in Ihrem Bild verwendeten Farben umschalten. Ein bisschen schummeln, aber eine praktische Abkürzung, um damit anzufangen.
• So erhalten Sie eine vergrößerte Version Ihrer Pixelgrafik: Vergrößern Sie die gewünschte Größe, drücken Sie auf den Druckbildschirm und fügen Sie diese in eine neue Datei ein. Voila, du hast ein vergrößertes Pixelbild für diesen authentischen Retro-Look!

Dieser Artikel ist genau und nach bestem Wissen des Autors. Der Inhalt dient nur zu Informations- oder Unterhaltungszwecken und ersetzt nicht die persönliche Beratung oder professionelle Beratung in geschäftlichen, finanziellen, rechtlichen oder technischen Angelegenheiten.