Indie-Entwickler müssen oft mehrere Rollen gleichzeitig übernehmen: Game Designer, Programmierer, Komponist, Künstler. Und wenn es um das Visuelle geht, entscheiden sich viele für Pixel-Art – auf den ersten Blick scheint es einfach. Doch um es schön zu gestalten, benötigt man viel Erfahrung und spezielle Fähigkeiten. Ich habe ein Tutorial für die gefunden, die gerade dabei sind, die Grundlagen dieses Stils zu lernen: mit einer Beschreibung der speziellen Software und Zeichentechniken anhand von zwei Sprites.
Hintergrund
Pixel-Art ist eine Form der digitalen Kunst, bei der Änderungen auf Pixelebene vorgenommen werden. Sie wird hauptsächlich mit der Grafik von Videospielen der 80er und 90er Jahre assoziiert. Damals mussten Künstler die Einschränkungen von Speicherplatz und niedriger Auflösung berücksichtigen. Heute ist Pixel-Art in Spielen und als Kunststil insgesamt immer noch populär, trotz der Möglichkeit, realistische 3D-Grafik zu erstellen. Warum? Selbst abgesehen von der Nostalgie ist es eine angenehme und lohnenswerte Herausforderung, in solchen strengen Rahmenbedingungen ein großartiges Werk zu schaffen.
Die Einstiegshürde in die Pixel-Art ist im Vergleich zur traditionellen Kunst und 3D-Grafik relativ niedrig, was Indie-Entwickler anzieht. Doch das bedeutet keineswegs, dass es einfach sein wird, ein Spiel in diesem Stil zu beenden. Ich habe viele Indie-Entwickler mit Pixel-Art Metroidvanias auf Crowdfunding-Plattformen gesehen. Sie dachten, sie würden alles in einem Jahr abschließen, aber tatsächlich brauchten sie noch sechs Jahre. Metal Slug 3 (Arcade). SNK, 2000
Pixel-Art auf dem Niveau, auf dem die meisten sie erstellen möchten, erfordert viel Zeit, und es gibt nur sehr wenige kurze Tutorials. Wenn man mit 3D-Modellen arbeitet, kann man diese drehen, verformen, Teile davon bewegen, Animationen von einem Modell auf ein anderes kopieren und so weiter. Hochwertige Pixel-Art kostet fast immer viel Mühe, um die Pixel auf jedem Frame präzise zu platzieren.
Insgesamt habe ich gewarnt.
Insgesamt habe ich gewarnt.
Und jetzt ein wenig über meinen Stil: In erster Linie zeichne ich Pixel-Art für Videospiele und finde darin meine Inspiration. Insbesondere bin ich ein Fan von Famicom/NES, 16-Bit-Konsolen und Arcade-Spielen der 90er Jahre. Die Pixel-Art meiner Lieblingsspiele aus dieser Zeit kann man als lebhaft, selbstbewusst und klar (aber nicht zu stark) beschreiben; sie lässt sich nicht als hart und minimalistisch bezeichnen. In diesem Stil arbeite ich selbst, aber ihr könnt leicht Ideen und Techniken aus diesem Tutorial verwenden, um völlig andere Dinge zu kreieren. Studiert die Arbeiten verschiedener Künstler und erstellt Pixel-Art, die euch gefällt!
Software
Basis digitale Werkzeuge für Pixel-Art sind Zoom und Bleistift, um Pixel zu platzieren. Außerdem sind Linie, Form, Auswahl, Verschieben und Farbeimer nützlich. Es gibt viele kostenlose und kostenpflichtige Software mit solchem Werkzeugen. Ich werde über die beliebtesten und die, die ich selbst benutze, sprechen.
Paint (kostenlos)
Wenn ihr Windows habt, ist das integrierte Paint eine primitive Software, aber sie bietet alle Werkzeuge für Pixel-Art.
(kostenlos)
Ein unerwartet funktionaler Pixel-Art-Editor, der über den Browser läuft. Man kann die Arbeit als PNG oder animiertes GIF exportieren. Eine großartige Option für Anfänger.
(kostenlos)
GraphicsGale ist der einzige Editor, von dem ich gehört habe, der speziell für Pixel-Art entwickelt wurde und Animationswerkzeuge beinhaltet. Er wurde von der japanischen Firma HUMANBALANCE entwickelt. Seit 2017 ist er kostenlos erhältlich und erfreut sich weiterhin großer Beliebtheit, trotz des wachsenden Interesses an Aseprite. Leider läuft er nur unter Windows.
($)
Vermutlich der beliebteste Editor im Moment. , viele Möglichkeiten, aktive Unterstützung, Versionen für Windows, Mac und Linux. Wenn ihr ernsthaft Pixel-Art macht und noch nicht den richtigen Editor gefunden habt, könnte das genau das Richtige für euch sein.
($$+)
GameMaker Studio 2 ist ein ausgezeichneter 2D-Werkzeug mit einem guten Sprite-Editor. Wenn ihr Pixel-Art für eure eigenen Spiele erstellen wollt, ist es sehr praktisch, alles in einer Software zu erledigen. Momentan benutze ich diese Software bei der Arbeit an , einer Sammlung von 50 Retro-Spielen: Die Sprites und Animationen erstelle ich in GameMaker, die Tilesets in Photoshop.
($$$+)
Photoshop ist eine teure Software, die im Abonnement angeboten wird und nicht für Pixel-Art ausgelegt ist. Ich empfehle den Kauf nicht, wenn Sie keine hochauflösenden Illustrationen erstellen oder komplexe Manipulationen an Bildern vornehmen müssen, wie ich. Man kann damit statische Sprites und Pixelarbeiten erstellen, aber es ist im Vergleich zu spezialisierter Software (wie GraphicsGale oder Aseprite) ziemlich komplex.
Sonstiges
Mein Set für Pixel-Art. Alles schwarz, ist mir erst jetzt aufgefallen.
Grafiktablett ($$+)
Ich empfehle Grafiktabletts für jede Arbeit mit digitalen Illustrationen, um das Karpaltunnelsyndrom zu vermeiden. Es ist viel einfacher, es zu verhindern, als es zu behandeln. Sobald Sie Schmerzen verspüren, wird es nur schlimmer – kümmern Sie sich von Anfang an um sich selbst. Da ich früher mit der Maus gezeichnet habe, fällt es mir nun schwer, Spiele zu spielen, in denen man Tasten drücken muss. Momentan benutze ich das Wacom Intuos Pro S.
Handgelenksupport ($)
Wenn Sie sich kein Tablet leisten können, kaufen Sie sich zumindest einen Handgelenksupport. Mir gefällt der Mueller Green Fitted Wrist Brace am besten. Die anderen sind entweder zu eng oder bieten nicht genug Unterstützung. Unterstützungen lassen sich problemlos online bestellen.
96×96 Pixel
Final Fight. Capcom, 1989.
Lass uns anfangen! Wir beginnen mit dem Sprite eines Charakters von 96×96 Pixeln. Zum Beispiel habe ich einen Ork gezeichnet und ihn auf einen Screenshot aus Final Fight (Bild oben) gesetzt, damit Sie den Maßstab verstehen. Das ist ein großes Sprite für die meisten Retro-Spiele, Screenshot-Größe: 384×224 Pixel.
Bei einem so großen Sprite ist es einfacher, die Technik zu zeigen, über die ich sprechen möchte. Auch die pixelgenaue Zeichnung ähnelt mehr traditionellen Formen der Kunst (wie Zeichnen oder Malen), mit denen Sie möglicherweise besser vertraut sind. Nachdem wir die grundlegenden Techniken gelernt haben, werden wir zu kleineren Sprites übergehen.
1. Wählen Sie eine Palette
Pixel ist ein viel tieferes Konzept in der Pixel-Art als in anderen digitalen Bereichen. Pixel-Art wird durch ihre Einschränkungen definiert, wie zum Beispiel Farben. Es ist wichtig, die richtige Palette auszuwählen, da sie Ihren Stil bestimmen hilft. Aber zu Beginn rate ich, nicht über Paletten nachzudenken und eine der bestehenden auszuwählen (oder einfach ein paar zufällige Farben) – Sie können diese jederzeit ändern.
Für dieses Tutorial werde ich eine Palette aus 32 Farben verwenden, die wir für . Für Pixelart werden sie oft aus 32 oder 16 Farben zusammengestellt. Unsere ist für eine fiktive Konsole entwickelt, die irgendwo zwischen Famicom und PC Engine erscheinen könnte. Sie können sie verwenden oder eine andere — das Tutorial hängt überhaupt nicht von der gewählten Palette ab.
2. Grobe Konturen
Beginnen wir die Zeichnung mit dem Bleistift-Werkzeug. Zeichnen Sie eine Skizze, so wie Sie es mit einem normalen Stift und Papier tun würden. Natürlich überschneiden sich Pixelkunst und traditionelle Kunst, besonders wenn es um solche großen Sprites geht. Meine Beobachtungen zeigen, dass starke Pixelkünstler mindestens gut von Hand zeichnen können und umgekehrt. Daher ist es immer nützlich, die Zeichenskills zu entwickeln.
3. Ausarbeitung der Konturen
Verfeinern Sie die Konturen: Entfernen Sie überflüssige Pixel und reduzieren Sie die Dicke jeder Linie auf einen Pixel. Aber was genau ist überflüssig? Um diese Frage zu beantworten, müssen wir uns mit Pixel-Linien und Unregelmäßigkeiten auseinandersetzen.
Unregelmäßigkeiten
Sie müssen lernen, zwei grundlegende Linien in Pixelkunst zu zeichnen: gerade und kurvenförmig. Mit Stift und Papier kommt es auf die Muskelkontrolle an, aber wir arbeiten mit winzigen, bunten Blöcken.
Der Schlüssel zum Zeichnen korrekter Pixel-Linien sind die Unregelmäßigkeiten. Das sind einzelne Pixel oder kleine Segmente, die die Glätte der Linie stören. Wie ich bereits sagte, hat ein einzelner Pixel in der Pixelkunst eine enorme Bedeutung, daher können Unregelmäßigkeiten die gesamte Ästhetik ruinieren. Stellen Sie sich vor, Sie ziehen eine gerade Linie auf Papier, und plötzlich schlägt jemand auf den Tisch: Unregelmäßigkeiten in der Pixelkunst sehen genauso aus wie eine zufällige Kringelei.
Beispiele:
Gerade
Kurven
Unregelmäßigkeiten treten bei Kurven auf, wenn die Länge der Linienstücke nicht gleichmäßig zunimmt oder abnimmt.
Unregelmäßigkeiten vollständig zu vermeiden ist unmöglich — in all Ihren Lieblings-Retro-Spielen sind sie vorhanden (es sei denn, die Pixelkunst besteht ausschließlich aus einfachen Formen). Ziel: die Unregelmäßigkeiten auf ein Minimum zu beschränken und dabei alles Notwendige zu zeigen.
4. Erste Farben anwenden
Färben Sie Ihren Charakter mit Füllungen oder einem anderen geeigneten Werkzeug. Die Palette erleichtert diesen Teil der Arbeit. Wenn die Software keine Paletten unterstützt, kann sie direkt in das Bild eingefügt werden, wie im obigen Beispiel, und die Farben können mit dem Pipettenwerkzeug ausgewählt werden.
In der unteren linken Ecke habe ich unseren Freund gezeichnet, lernen Sie kennen, das ist — Šhar. Mit ihm wird es einfacher, zu verstehen, was in jedem Schritt passiert.
5. Schattierung
Es ist Zeit, die Schatten darzustellen – fügen Sie einfach dunklere Farben zum Sprite hinzu. So wird das Bild dreidimensional wirken. Angenommen, wir haben eine Lichtquelle, die über dem Orc links von ihm positioniert ist. Das bedeutet, dass alles, was sich oben und vor unserem Charakter befindet, beleuchtet wird. Fügen Sie Schatten von unten rechts hinzu.
Form und Volumen
Wenn Ihnen dieser Schritt Schwierigkeiten bereitet, stellen Sie sich Ihre Zeichnung als volumetrische Formen und nicht nur als Linien und Farben vor. Formen existieren im dreidimensionalen Raum und können Volumen haben, das wir durch Schatten aufbauen. Dies hilft, den Charakter ohne Details zu visualisieren und sich vorzustellen, dass er aus Ton und nicht aus Pixeln besteht. Schattierung ist nicht nur das Hinzufügen neuer Farben, es ist der Prozess des Aufbaus von Formen. Bei einem gut ausgearbeiteten Charakter verdecken die Details nicht die grundlegenden Formen: Wenn Sie die Augen zusammenkneifen, sehen Sie mehrere große Cluster von Licht und Schatten.
Anti-Aliasing
Jedes Mal, wenn ich eine neue Farbe verwende, wende ich Anti-Aliasing (AA) an. Es hilft, die Pixel zu glätten, indem es Übergangsfarben an den Ecken, an den Berührungspunkten zweier Segmentlinien hinzufügt:
Graue Pixel mildern die "Brüche" in der Linie ab. Je länger das Liniensegment, desto länger ist das AA-Segment.
So sieht AA auf der Schulter des Orcs aus. Es dient dazu, die Linien zu glätten, die die Konturen seiner Muskeln zeigen.
Das Anti-Aliasing sollte nicht über die Grenzen des Sprites hinausgehen, der im Spiel oder vor einem unbekannten Hintergrund verwendet wird. Wenn Sie zum Beispiel AA für einen hellen Hintergrund anwenden, wird es auf einem dunklen Hintergrund unansehnlich aussehen.
6. Selektive Kontur
Früher waren die Konturen vollständig schwarz, was das Sprite sehr cartoonhaft wirken ließ. Das Bild war wie in Segmente unterteilt. Zum Beispiel stellen die schwarzen Linien am Arm die Muskulatur zu kontrastreich dar, wodurch der Charakter weniger einheitlich aussieht.
Wenn der Sprite natürlicher aussieht und die Segmentierung weniger offensichtlich ist, werden die Grundformen des Charakters leichter lesbar. Dazu kann eine selektive Konturierung verwendet werden – teilweise den schwarzen Kontur durch einen helleren ersetzen. Für den beleuchteten Teil des Sprites können die hellsten Farben verwendet werden, oder dort, wo der Sprite mit dem negativen Raum in Berührung kommt, kann der Kontur vollständig entfernt werden. Anstelle von Schwarz sollte die Farbe verwendet werden, die für den Schatten ausgewählt wurde – so bleibt die Segmentierung (für die Abgrenzung von Muskeln, Fell usw.) erhalten.
Auch in diesem Schritt habe ich dunklere Schatten hinzugefügt. Es entstanden drei Abstufungen von Grün auf der Haut des Orks. Die dunkelste Grünton kann für die selektive Konturierung und AA verwendet werden.
7. Letzte Feinheiten
Am Ende sollten Glanzlichter (die hellsten Flecken auf dem Sprite), Details (Ohrringe, Nieten, Narben) und andere Verbesserungen hinzugefügt werden, bis der Charakter bereit ist oder bis es notwendig ist, zum Nächsten überzugehen.
Es gibt einige nützliche Techniken, die in diesem Schritt angewendet werden können. Drehen Sie das Bild horizontal, das hilft oft, Fehler in Proportionen und Schattierungen zu erkennen. Auch die Farben können entfernt werden – setzen Sie die Sättigung auf null, um zu verstehen, wo die Schatten geändert werden müssen.
Erstellung von Rauschen (Dithering, Dither)
Bisher haben wir hauptsächlich große, zusammenhängende Bereiche von Schatten verwendet. Es gibt jedoch auch eine andere Technik – Dithering, die es ermöglicht, von einer Farbe zur anderen zu wechseln, ohne eine dritte hinzuzufügen. Schauen Sie sich das Beispiel unten an.
Der obere Gradient von dunkel zu hell verwendet Hunderte verschiedener Blautöne.
Der mittlere Gradient verwendet nur neun Farben, hat aber immer noch zu viele Abstufungen von einer Farbe. Dies führt zu einem sogenannten Banding, bei dem das Auge durch dicke, homogene Streifen auf die Punkte der Farbkollision konzentriert, anstatt auf die Farben selbst.
Im unteren Gradient haben wir Dithering angewendet, das das Banding vermeidet und nur zwei Farben verwendet. Wir erzeugen Rauschen unterschiedlicher Intensität, um die Farbverläufe zu simulieren. Diese Technik ähnelt dem Halftone, das im Druck verwendet wird; sowie dem Stippling – in der Illustration und Comics.
Ich habe beim Orc das Dithering nur wenig genutzt, um die Textur zu übertragen. Einige Pixelkünstler verwenden es überhaupt nicht, andere hingegen zögern nicht und machen es sehr geschickt. Ich denke, dass Dithering am besten auf großen Flächen aussieht, die mit einer einzigen Farbe gefüllt sind (achten Sie auf den Himmel im Screenshot von Metal Slug, der weiter oben war) oder auf Bereichen, die rau und uneben aussehen sollen (zum Beispiel Schlamm). Entscheiden Sie selbst, wie Sie es verwenden möchten.
Wenn Sie ein Beispiel mit umfangreichem und qualitativ hochwertigem Dithering sehen möchten, studieren Sie die Spiele der Bitmap Brothers, einem britischen Studio aus den 80er Jahren, oder Spiele auf dem PC-98. Bedenken Sie nur, dass sie alle NSFW sind.
Kakyusei (PC-98). Elf, 1996
Auf diesem Bild sind nur 16 Farben!
8. Letzter Blick
Eine der Gefahren von Pixel-Art besteht darin, dass sie leicht und einfach erscheint (aufgrund ihrer Struktur und stilistischen Einschränkungen). Aber am Ende verbringen Sie eine enorme Menge Zeit mit der Verfeinerung Ihrer Sprites. Es ist wie ein Puzzle, das gelöst werden muss – deswegen zieht Pixel-Art Perfektionisten an. Denken Sie daran, dass ein Sprite nicht zu viel Zeit in Anspruch nehmen sollte – es ist nur ein winziges Stück eines äußerst komplexen Puzzles. Es ist wichtig, das Gesamtbild nicht aus den Augen zu verlieren.
Selbst wenn Ihre Pixel-Art nicht für Spiele gedacht ist, ist es manchmal gut, sich zu sagen: „Alles ist schon gut genug!“ und weiterzumachen. Der beste Weg, seine Fähigkeiten zu entwickeln, ist, den gesamten Prozess so oft wie möglich von Anfang bis Ende durchzugehen, wobei man so viele Themen wie möglich verwendet.
Und manchmal ist es hilfreich, den Sprite für eine Weile beiseite zu legen, um ihn später mit frischem Blick zu betrachten.
32×32 Pixel
Wir haben zuerst einen großen Sprite von 96×96 Pixeln erstellt, weil er in dieser Größe mehr wie Malerei oder Zeichnen aussieht, nur eben mit Pixeln. Je kleiner der Sprite, desto weniger sieht er aus wie das, was er darstellen soll, und desto wichtiger wird jeder Pixel.
In Super Mario Bros. sind Marios Augen nur zwei übereinanderliegende Pixel. Und auch sein Ohr. Der Schöpfer des Charakters, Shigeru Miyamoto, sagte, dass die Schnurrhaare nötig waren, um die Nase vom Rest des Gesichts zu trennen. So ist eines der Hauptmerkmale von Marios Gesicht nicht nur das designtechnische Element, sondern auch ein pragmatischer Trick. Das bestätigt die alte Weisheit: „Not macht erfinderisch.“
Die grundlegenden Schritte zur Erstellung eines 32×32 Pixel großen Sprites sind uns bereits bekannt: Skizze, Farbe, Schatten und weitere Ausarbeitung. Unter diesen Bedingungen wähle ich als Ausgangsskizze farbige Formen anstelle von Umrissen aufgrund der kleinen Größe. Farben spielen eine wichtigere Rolle bei der Charakterbestimmung als die Umrisse. Schaut euch Mario nochmal an, er hat überhaupt keine Umrisse. Interessant sind nicht nur die Schnurrhaare. Seine Backenbartform definiert die Form der Ohren, die Ärmel zeigen die Hände und die allgemeine Form spiegelt seinen Körper mehr oder weniger deutlich wider.
Die Erstellung kleiner Sprites ist ständige Kompromisse. Wenn Sie eine Kontur hinzufügen, verlieren Sie möglicherweise Platz für den Schatten. Wenn die Hände und Beine Ihres Charakters klar sichtbar sind, sollte der Kopf wahrscheinlich nicht zu groß sein. Wenn Sie Farbe, selektive Umrandung und Glättung effektiv nutzen, wird das gezeichnete Objekt größer wirken, als es tatsächlich ist.
Für kleine Sprites mag ich den Chibi-Stil: Die Charaktere sehen sehr niedlich aus, mit großen Köpfen und Augen. Eine großartige Möglichkeit, einen auffälligen Helden auf kleinem Raum zu schaffen, und insgesamt ein sehr angenehmer Stil. Wenn Sie jedoch die Beweglichkeit oder Stärke des Charakters zeigen möchten, können Sie weniger Platz für den Kopf verwenden, damit der Körper mächtiger aussieht. Es hängt alles von Ihren Vorlieben und Zielen ab.
Das gesamte Team ist versammelt!
Dateiformate
So ein Ergebnis kann jeden Pixelkünstler nervös machen.
Das Bild, das Sie sehen, ist das Ergebnis des Speicherns der Zeichnung im JPG-Format. Ein Teil der Daten ging aufgrund der Komprimierungsalgorithmen verloren. Hochwertiger Pixel-Art wird am Ende schlecht aussehen, und es ist nicht einfach, die ursprüngliche Palette zurückzubekommen.
Für die Speicherung eines statischen Bildes ohne Qualitätsverlust verwenden Sie das PNG-Format. Für Animationen – GIF.
Wie man Pixel-Art richtig teilt
Das Teilen von Pixel-Art in sozialen Medien ist eine großartige Möglichkeit, Feedback zu erhalten und andere Künstler zu treffen, die im gleichen Stil arbeiten. Vergessen Sie nicht, den Hashtag #pixelart zu verwenden. Leider konvertieren soziale Netzwerke PNG oft ohne Rückfrage in JPG, was Ihre Arbeit beeinträchtigt. Und es ist nicht immer klar, warum Ihr Bild konvertiert wurde.
Hier sind einige Tipps, wie Sie Pixel-Art in der erforderlichen Qualität für verschiedene soziale Medien speichern können.
Um sicherzustellen, dass die PNG-Datei in Twitter nicht verändert wird, verwenden Sie weniger als 256 Farben oder , dass Ihre Datei weniger als 900 Pixel auf der langen Seite hat. Ich würde die Dateigröße mindestens auf 512×512 Pixel erhöhen. Außerdem sollte das Scaling ein Vielfaches von 100 sein (200 %, nicht 250 %) und scharfe Kanten beibehalten werden (Nächster Nachbar in Photoshop).
Animierte GIF-Dateien für Posts in Twitter dürfen nicht mehr als 15 MB wiegen. Das Bild sollte mindestens 800×800 Pixel groß sein, die zyklische Animation sollte dreimal wiederholt werden, und der letzte Frame sollte zeitlich halb so lang sein wie alle anderen – die am meisten verbreitete Theorie. Es ist jedoch unklar, wie streng diese Anforderungen eingehalten werden müssen, da Twitter ständig seine Algorithmen zur Bilddarstellung ändert.
Soweit ich weiß, ist es unmöglich, ein Bild in Instagram ohne Qualitätsverlust zu veröffentlichen. Es wird jedoch definitiv besser aussehen, wenn Sie es mindestens auf 512x512 Pixel erhöhen.
Quelle: habr.com
