So erstellen Sie fantastische Pixel Art für Ihre Spiele und Apps

Wie fängst du mit pixel art an? Glücklicherweise ist pixel art eine der seltenen Gelegenheiten, bei denen es wirklich so einfach ist, wie es aussieht. Das ist Kunst aus Pixeln …

Pixel Art hat einen gewissen Retro-Appeal, der auf die Ära der 8-, 16- und 32-Bit-Konsolen zurückgeht. Heute ist es jedoch eher in einer Vielzahl von Indie- und Handyspielen zu finden und erlebt derzeit eine Art Wiederaufleben. Es ist eine fantastische Möglichkeit, die technologischen Einschränkungen zu umgehen, die sich daraus ergeben, ein unabhängiger Entwickler und mobile Hardware zu sein. Auf diese Weise können Sie sich weniger Arbeit machen und Ihre Dateigrößen verkleinern – aber anstatt billig auszusehen, wirkt es wie eine bewusste stilistische Entscheidung. Fügen Sie etwas Chiptune-Musik und eine einzigartige Farbpalette hinzu und Sie haben eine großartige Ästhetik, die die Aufmerksamkeit im Play Store auf sich ziehen wird.

Ein weiterer Reiz der pixel art besteht darin, wie sie Sie herausfordert, innerhalb ihrer Grenzen zu arbeiten. Da die Bilder so klein sind, erzwingt dies eine etwas impressionistische Herangehensweise. Wie können Sie ein oder zwei Pixel sofort als charismatisches Lächeln oder einen Dolch erkennen lassen, der aus einem Gegner herausragt? Hier liegt die wahre Kunst des Formats und deshalb sind einige der Errungenschaften in Spielen wie Superbrothers: Sword & Sworcery oder dem neueren Hyper Light Drifter  so beeindruckend.

Wie man anfängt

Vor diesem Hintergrund können Sie entscheiden, dass pixel art eine gute Richtung für Ihr eigenes Projekt wäre. Wie fangen Sie in diesem Fall an? Glücklicherweise ist pixel art eine der seltenen Gelegenheiten, bei denen es wirklich so einfach ist, wie es aussieht. Das ist Kunst aus Pixeln …

Zu Beginn müssen Sie lediglich ein Zeichenprogramm Ihrer Wahl auswählen. Ich verwende GIMP , da es kostenlos ist, aber Sie könnten genauso einfach Photoshop oder sogar MS Paint verwenden. Allerdings würde ich empfehlen, etwas Komplexeres als MS Paint zu verwenden, da es praktisch sein kann, Zugriff auf Funktionen wie Ebenen und Transparenzen zu haben (wie wir später sehen werden). Es gibt einige spezielle Pixel-Art-Programme, mit denen Sie auch arbeiten können, aber diese sind im Allgemeinen nicht erforderlich. Aseprite ist jedoch eine gute Option.

Unabhängig von Ihrer Wahl der Software wählen Sie dann das Stiftwerkzeug aus und stellen sicher, dass es so eingestellt ist, dass einzelne Pixel mit 100 % Deckkraft gezeichnet werden. Vergrößern Sie nun Ihr Bild bis zu dem Punkt, an dem Sie die quadratischen Pixel beim Zeichnen deutlich sehen können. Es ist wirklich so einfach!

Jetzt können Sie mit dem Freihandzeichnen beginnen oder jeden Pixel einzeln platzieren. Beachten Sie, dass es sich beim Zeichnen von Dingen wie Kreisen auszahlen kann, die Muster Ihrer Pixel (zwei oben, eins quer, drei oben eins quer, vier oben eins quer usw.) sorgfältig zu betrachten, da dies ein konsistenteres und kontrollierteres Aussehen erzeugt Bild. Die gute Nachricht ist, dass es sehr einfach ist, eventuelle Fehler rückgängig zu machen, also gibt es keinen Grund, nicht zu experimentieren.

Was Sie am Ende haben, ist ein grundlegender Umriss für alles, was Sie versuchen, in blockartigen Pixeln zu zeichnen. Machen Sie sich erst später Gedanken über das Hinzufügen vieler Details – experimentieren Sie zunächst einfach damit, die Form und die Proportionen richtig hinzubekommen. Dies ist insbesondere mit vielen Charakteren der schwierigste Teil.

Ich verwende gerne einen Umriss für meine Bilder, aber viele Leute kümmern sich nicht darum und zeichnen in Blockfarben. Tun Sie, was für Sie funktioniert, aber beachten Sie, dass jede Methode Vor- und Nachteile hat; Umrisse erleichtern die Unterscheidung von Details, können jedoch stören, wenn Ihre Bilder kleiner werden und die Pixel knapp werden!

Hinzufügen von Details und Schattierungen

Wenn Sie mit Ihrem Umriss oder Ihrer Silhouette zufrieden sind, können Sie die einzelnen Details hinzufügen, bis Sie ein vollständiges Bild haben. Je mehr Details Sie hinzufügen, desto beeindruckender werden Ihre Charaktere aussehen. Gleichzeitig müssen Sie jedoch vermeiden, dass Ihr Bild zu beengt wirkt. Wichtig ist, dass Sie mit einem Umriss beginnen, der die richtige Größe hat – und denken Sie daran, dass die anderen Objekte in Ihrer Spielwelt auch relativ sein müssen.

Jetzt haben Sie Ihre Details, fügen Sie einfach die gewünschten Farben mit dem Füllwerkzeug hinzu. Dies kann jedoch zunächst etwas flach aussehen, sodass Sie danach höchstwahrscheinlich eine Art Beleuchtung hinzufügen möchten.

Stellen Sie sich dazu einfach eine Lichtquelle für Ihren Charakter vor und wählen Sie dann zwei oder mehr zusätzliche Farbtöne aus, die Sie Ihrer Farbpalette hinzufügen möchten. Sie benötigen mindestens einen für Schatten und einen für Glanzlichter. Stellen Sie sicher, dass alle Schattierungen auf derselben Seite erscheinen, und denken Sie an die Konturen, die natürlich durch die von Ihnen gezeichneten Formen erzeugt würden, wenn sie dreidimensional wären. Ich verwende viel Schatten auf der einen Seite und dann nur einen dünnen Lichtstreifen auf der anderen, um Glanzlichter hervorzuheben, aber auch hier gilt: Der Schlüssel ist, zu experimentieren und zu sehen, was für Ihren eigenen persönlichen Stil funktioniert.

Denken Sie daran, dass Sie Charaktere und Objekte für Spiele zeichnen. Das bedeutet, dass Sie sorgfältig über Ihre Lichtquelle nachdenken müssen. Wenn Sie einen sehr offensichtlichen Schatteneffekt auf der rechten Hand Ihres Sprites erzeugen, kann dies in manchen Kontexten seltsam aussehen – besonders wenn Sie Ihr Sprite umdrehen, während es in die entgegengesetzte Richtung geht! Denken Sie daran, während Sie Ihr Bild erstellen, und ziehen Sie in Betracht, Ihre Beleuchtung subtiler zu gestalten oder sie stattdessen von oben zu werfen.

Exportieren Ihres Bildes

Sobald Sie fertig sind, können Sie Ihr Bild speichern und exportieren. Natürlich müssen wir an dieser Stelle vorsichtig sein, da das Bild tatsächlich winzig sein wird . Es gibt auch ein paar andere Dinge, an die Sie denken sollten, wenn Sie Ihre Kunst in Ihren Spielen verwenden.

Stellen Sie zunächst sicher, dass Sie Ihr Bild automatisch zuschneiden, sodass an den Rändern keine weißen Bereiche vorhanden sind. Dies ist nützlich für Ihre Kollisionserkennung und hilft Ihnen auch, Ihr Bild nicht unnötig groß zu machen. Allerdings möchten Sie vielleicht stattdessen ein “Sprite-Sheet” erstellen, was bedeutet, dass Sie jeden Frame der Animation zu einer einzigen Datei hinzufügen werden. Dadurch wird die Gesamtdateigröße kleiner und die Organisation bleibt einfacher. In diesem Fall ist das Zuschneiden weniger wichtig, da Sie es später in der von Ihnen gewählten IDE vornehmen.

Sie müssen auch sicherstellen, dass der Hintergrund transparent ist, damit sich Charaktere in Ihrer Spielwelt bewegen, anstatt große weiße Quadrate mit darauf gezeichneten Charakteren. In Gimp tun Sie dies, indem Sie im Menü „Ebene“, dann „Transparenz“ und „Alphakanal hinzufügen“ auswählen. Von dort aus können Sie Ihren weißen Hintergrund löschen und Ihr Bild über dem Nichts schweben lassen.

Wenn Sie Ihr Bild exportieren, können Sie dies in der tatsächlichen Dateigröße tun, wenn Sie es in einem Spiel verwenden möchten. In Unity können Sie die ‘Pixels Per Unit’ für jedes einzelne Sprite auswählen und so Ihr Bild einfach so groß aufblasen, wie Sie möchten, und gleichzeitig von der kleinen Dateigröße profitieren.

Umgekehrt möchten Sie jedoch, wenn Sie Ihre Bilder online teilen möchten, dass sie größer erscheinen. Gehen Sie also zu ‘Bild’, dann zu ‘Bildgröße’ und erhöhen Sie die Größe. Stellen Sie sicher, dass Sie „Interpolation“ ausgeschaltet oder „Harte Kanten beibehalten“ ausgewählt haben (abhängig von Ihrer Software). Andernfalls erscheint das Bild verschwommen.

7 Pixel-Art-Tipps

Zum Abschluss noch ein paar Tipps, die Ihnen auf Ihrem Weg zur Beherrschung der pixel art helfen sollen …

1. Behalten Sie das Gesamtbild im Auge

Während Sie hineinzoomen und jedes Pixel sorgfältig bearbeiten, kann es schwierig sein, sich vorzustellen, wie Ihr Bild aussehen wird, wenn es fertig ist. Aus diesem Grund ist es wichtig, von Zeit zu Zeit herauszuzoomen. Oder noch besser, versuchen Sie es mit dem Navigationswerkzeug (verfügbar mit den meisten Kunstprogrammen), mit dem Sie eine verkleinerte Perspektive auf Ihrer Leinwand anzeigen und auch zu bestimmten Punkten springen können.

2. Verwenden Sie das Zauberstab-Werkzeug

Mit dem Zauberstab oder den Farbauswahlwerkzeugen können Sie eine ganze Region oder Farbe auswählen. Auf diese Weise können Sie dann nur auf diesen Bereich zeichnen, was wiederum sicherstellt, dass Sie frei zeichnen können, ohne sich Sorgen machen zu müssen, dass Sie die Linien überschreiten. Alpha Lock ist ein weiteres Tool, mit dem Sie dies tun können.

3. Fügen Sie Antialiasing hinzu

Antialiasing ist ein in der Computergrafik verwendeter Begriff, der das Erscheinungsbild von Pixeln weicher machen soll, normalerweise durch Reduzieren des Kontrasts und Hinzufügen von mehr Übergangsfarben. PC-Spieler werden dies als eine grafische Option erkennen, die ein- und ausgeschaltet werden kann, um die Leistung zu verbessern.

In unserem Fall ist Antialiasing ein Effekt, den wir nachahmen können, um unsere Bilder etwas authentischer aussehen zu lassen. Um den Effekt zu erzeugen, suchen Sie einfach die Punkte, an denen Sie einen plötzlichen Kontrast haben, und führen Sie dann diese Übergangsfarben entlang der Kanten ein. Die Idee hier ist nicht, einen glatten Verlauf zu machen, sondern nur den Übergang etwas weniger stark erscheinen zu lassen. Ich habe Link hier etwas Antialiasing hinzugefügt, damit Sie den Unterschied sehen können:

Hier lernst du auch noch etwas über Pixel Art: Es erfordert viel Geduld!

4. Verwenden Sie Ebenen

Die meisten Kunstprogramme erlauben Ihnen, Ebenen zu verwenden, was wiederum bedeutet, dass Sie Bilder im Hintergrund erscheinen lassen und darauf zeichnen können, ohne diese Ebene zu beeinflussen. Sie können auch die Transparenz einzelner Ebenen usw. ändern.

Dadurch können wir ein Bild nehmen, mit dem wir arbeiten möchten, es ganz verkleinern (unter Beibehaltung des korrekten Seitenverhältnisses) und es dann mit dem Stiftwerkzeug nachzeichnen. So habe ich dieses Porträt von Gary gemacht …

5. Probieren Sie Filter aus

Während die beste pixel art zu 99 % von Hand bearbeitet wird, gibt es einige Filter, die Ihnen je nach Ihren Ambitionen das Leben ein wenig leichter machen können. Zum Beispiel hat Gimp einen Unschärfefilter namens “Pixelize”, der genau das tut, was er verspricht. Sie können dies verwenden, um Ihrem vorhandenen Bild zusätzliches Antialiasing hinzuzufügen, oder Sie können es verwenden, um zu „schummeln“ und ein normales Bild in etwas zu verwandeln, das ein wenig mehr wie pixel art aussieht. Das Schärfwerkzeug kann auch eine praktische Ressource sein.

6. Suchen Sie nach Inspiration

Der beste Weg, um bei pixel art besser zu werden, ist, wie bei den meisten Dingen, es weiter zu versuchen. Allerdings kann es auch sehr hilfreich sein, etwas zu recherchieren und online nach Inspiration zu suchen. Insbesondere der Blick auf vorhandene Beispiele von „Referenz-Sprites“ kann hilfreich sein, besonders wenn Sie schnell Elemente wie Truhen, Bäume und ähnliches erstellen möchten. ‘ The Spriter’s Resource ‘ ist eine großartige Seite, um Spritesheets von all Ihren alten Lieblingsspielen zu finden. Das Betrachten von Sprite Sheets kann auch sehr praktisch sein, wenn Sie versuchen, Ihre Charaktere zu animieren, da es Ihnen eine Referenz für die Biomechanik des Gehens, Laufens und Springens gibt (Biomechanik bezieht sich auf die Art und Weise, wie sich unsere Arme und Beine bewegen, während wir uns bewegen).

Und natürlich gibt es jede Menge Inspiration auf Deviant Art und Pinterest sowie in einer Menge toller Spiele direkt im Play Store. Einige hervorragende Beispiele sind: Superbrothers: Sword & Sworcery, Pewdiepie: Legend of the Brofist, VVVVVV (sozusagen), Sonic the Hedgehog 1, 2 & CD und Terraria.

7. Seien Sie originell

Während pixel art regelmäßig fantastisch aussieht und das Potenzial für Experimente endlos ist, ist es wichtig sicherzustellen, dass Sie daran arbeiten, dass Ihre nicht gekünstelt aussieht. Im Moment gibt es eine Menge pixel art, daher ist es allzu einfach, einfach einen generischen pixel art-Look zu erstellen und es einen Tag zu nennen. Wenn Sie Ihr Spiel einzigartig aussehen lassen möchten, müssen Sie ein wenig um die Ecke denken und versuchen, Ihren eigenen Stil zu entwickeln. Wie wäre es, pixel art mit einem anderen Stil zu kombinieren, wie zum Beispiel Cyberpunk? Experimentieren Sie, probieren Sie neue Dinge aus und erstellen Sie pixel art, die irgendwie einzigartig für Sie ist. Verwenden Sie pixel art als Medium, um sich auszudrücken und Ihre Fantasie zum Leben zu erwecken – darum geht es schließlich bei Kunst!

Teilen Sie uns Ihre Gedanken mit!