Indie-Entwickler müssen oft mehrere Rollen gleichzeitig vereinen: Spieledesigner, Programmierer, Komponist, Künstler. Und wenn es um die Optik geht, entscheiden sich viele Menschen für Pixelkunst – auf den ersten Blick scheint es einfach zu sein. Aber um es schön zu machen, braucht es viel Erfahrung und bestimmte Fähigkeiten. Für diejenigen, die gerade erst anfangen, die Grundlagen dieses Stils zu verstehen, habe ich ein Tutorial gefunden: mit einer Beschreibung spezieller Software und Zeichentechniken am Beispiel zweier Sprites.
Hintergrund
Pixelkunst ist eine Form der digitalen Kunst, bei der Änderungen auf Pixelebene vorgenommen werden. Es wird meist mit Videospielgrafiken aus den 80er und 90er Jahren in Verbindung gebracht. Dann mussten die Künstler die Einschränkungen des Speichers und die niedrige Auflösung berücksichtigen. Trotz der Möglichkeit, realistische 3D-Grafiken zu erstellen, ist Pixelkunst in Spielen und als Kunststil im Allgemeinen immer noch beliebt. Warum? Auch abseits der Nostalgie ist es eine schöne und lohnende Herausforderung, innerhalb eines solch starren Rahmens coole Arbeiten zu schaffen.
Die Eintrittsbarriere in die Pixelkunst ist im Vergleich zu traditioneller Kunst und 3D-Grafik relativ niedrig, was Indie-Entwickler anzieht. Das heißt aber nicht, dass es einfach sein wird Fertig Spiel in diesem Stil. Ich habe viele Indie-Entwickler mit Pixel-Art-Metroidvanias auf Crowdfunding-Plattformen gesehen. Sie dachten, sie würden alles in einem Jahr schaffen, aber tatsächlich brauchten sie weitere sechs Jahre.
Metal Slug 3 (Arcade). SNK, Jahr 2000
Pixelkunst auf dem Niveau, das die meisten Leute erstellen möchten, ist zeitaufwändig und kurze Tutorials sind rar gesät. Wenn Sie mit einem 3D-Modell arbeiten, können Sie es drehen, verformen, seine einzelnen Teile verschieben, Animationen von einem Modell auf ein anderes kopieren und so weiter. Hochwertige Pixelkunst erfordert fast immer viel Aufwand, um die Pixel in jedem Frame sorgfältig zu platzieren.
Im Allgemeinen habe ich gewarnt.
Und nun ein wenig zu meinem Stil: Ich zeichne hauptsächlich Pixelkunst für Videospiele und finde darin Inspiration. Insbesondere bin ich ein Fan von Famicom/NES, 16-Bit-Konsolen und Arcade-Spielen der 90er Jahre. Die Pixelkunst meiner Lieblingsspiele dieser Zeit kann als hell, selbstbewusst und sauber (aber nicht übermäßig) beschrieben werden, sie ist nicht hart und minimalistisch. Ich arbeite selbst in diesem Stil, aber Sie können die Ideen und Techniken aus diesem Tutorial problemlos anwenden, um völlig andere Dinge zu schaffen. Entdecken Sie die Arbeit verschiedener Künstler und erstellen Sie die Pixelkunst, die Sie lieben!
Weich
Grundlegende digitale Werkzeuge für Pixelkunst – Zoom (Zoom) und Bleistift (Bleistift) zum Platzieren von Pixeln. Sie benötigen außerdem Line (Linie), Figure (Shape), Select (Select), Move (Move) und Fill (Paint Bucket). Es gibt viele kostenlose und kostenpflichtige Software mit solchen Tools. Ich werde über die beliebtesten und diejenigen sprechen, die ich selbst verwende.
Malen (kostenlos)
Wenn Sie Windows haben, ist Paint darin integriert – ein primitives Programm, aber es verfügt über alle Werkzeuge für Pixelkunst.
(ist gratis)
Ein unerwartet funktionaler Pixel-Art-Editor, der über den Browser ausgeführt wird. Sie können Ihre Arbeit in PNG oder animiertes GIF exportieren. Tolle Option für Anfänger.
(ist gratis)
GraphicsGale ist der einzige Editor, von dem ich gehört habe, dass er speziell für Pixelkunst entwickelt wurde und Animationstools enthält. Es wurde von der japanischen Firma HUMANBALANCE entwickelt. Seit 2017 wird es kostenlos vertrieben und erfreut sich trotz der wachsenden Beliebtheit von Aseprite immer noch einer Nachfrage. Leider funktioniert es nur unter Windows.
($)
Vielleicht der derzeit beliebteste Editor. , jede Menge Funktionen, aktiver Support, Versionen für Windows, Mac und Linux. Wenn Sie sich ernsthaft mit Pixelkunst beschäftigen und noch nicht den richtigen Editor gefunden haben, könnte dies der richtige Editor für Sie sein.
($$+)
GameMaker Studio 2 ist ein hervorragendes 2D-Tool mit einem guten Sprite-Editor. Wenn Sie Pixelkunst für Ihre eigenen Spiele erstellen möchten, ist es sehr praktisch, alles in einem Programm zu erledigen. Jetzt verwende ich diese Software bei meiner Arbeit , eine Sammlung von 50 Retro-Spielen: Ich erstelle Sprites und Animationen in GameMaker und Tilesets in Photoshop.
($$$+)
Photoshop ist eine teure Software, die im Abonnement vertrieben wird und nicht für Pixelkunst konzipiert ist. Ich empfehle den Kauf nicht, es sei denn, Sie interessieren sich für hochauflösende Illustrationen oder Sie müssen keine komplexen Bildmanipulationen durchführen, wie ich es tue. Sie können darin statische Sprites und Pixelkunst erstellen, aber im Vergleich zu spezialisierter Software (wie GraphicsGale oder Aseprite) ist es recht komplex.
andere
Mein Pixel-Art-Kit. Alles ist schwarz, das ist mir gerade aufgefallen.
Grafiktablett ($$+)
Ich empfehle Grafiktabletts für alle digitalen Illustrationsarbeiten, um ein Karpaltunnelsyndrom zu vermeiden. Vorbeugen ist viel einfacher als heilen. Eines Tages werden Sie den Schmerz spüren und er wird nur noch schlimmer – passen Sie von Anfang an auf sich auf. Da ich früher mit der Maus gezeichnet habe, fällt es mir jetzt schwer, Spiele zu spielen, bei denen man Tasten drücken muss. Ich verwende derzeit Wacom Intuos Pro S.
Handgelenkstütze ($)
Wenn Sie kein Tablet bekommen, kaufen Sie zumindest einen Handgelenkmessschieber. Mein Favorit ist die Mueller Green Fitted Wrist Brace. Der Rest ist entweder zu eng oder bietet keinen ausreichenden Halt. Messschieber können problemlos online bestellt werden.
96 × 96 Pixel
Endkampf. Capcom, 1989
Lass uns anfangen! Beginnen wir mit einem 96 x 96 Pixel großen Zeichen-Sprite. Als Beispiel habe ich einen Ork gezeichnet und ihn auf den Screenshot von Final Fight (Bild oben) eingefügt, damit Sie den Maßstab verstehen. Das groß Sprite für die meisten Retro-Spiele, Screenshotgröße: 384×224 Pixel.
Auf einem so großen Sprite ist es einfacher, die Technik zu zeigen, über die ich sprechen möchte. Außerdem ähnelt das Pixel-für-Pixel-Rendering eher traditionellen Kunstformen (z. B. Zeichnen oder Malen), mit denen Sie vielleicht besser vertraut sind. Nachdem wir die grundlegenden Techniken beherrschen, werden wir zu kleineren Sprites übergehen.
1. Wählen Sie eine Palette
Das Pixel ist in der Pixelkunst ein viel tiefer gehendes Konzept als in jedem anderen digitalen Bereich. Pixelkunst zeichnet sich durch ihre Einschränkungen aus, beispielsweise durch die Farben. Es ist wichtig, die richtige Palette auszuwählen, sie hilft Ihnen, Ihren Stil zu definieren. Aber zu Beginn empfehle ich, nicht über Paletten nachzudenken und eine der vorhandenen (oder nur ein paar zufällige Farben) auszuwählen – Sie können sie jederzeit problemlos ändern.
Für dieses Tutorial verwende ich die 32-Farben-Palette, für die wir erstellt haben . Für Pixelkunst werden sie häufig aus 32 oder 16 Farben zusammengesetzt. Unsere ist für eine fiktive Konsole konzipiert, die irgendwo zwischen Famicom und PC Engine erscheinen könnte. Sie können es oder jedes andere nehmen – das Tutorial hängt überhaupt nicht von der gewählten Palette ab.
2. Grobe Konturen
Beginnen wir mit dem Zeichnen mit dem Bleistift-Werkzeug. Lassen Sie uns die Skizze auf die gleiche Weise zeichnen, wie wir es mit einem normalen Stift und Papier machen würden. Natürlich überschneiden sich Pixelkunst und traditionelle Kunst, insbesondere wenn es um so große Sprites geht. Meine Beobachtungen zeigen, dass starke Pixel-Art-Künstler zumindest gut im Freihandzeichnen sind und umgekehrt. Daher ist es immer nützlich, Zeichenfähigkeiten zu entwickeln.
3. Konturierung
Wir finalisieren die Konturen: Entfernen Sie zusätzliche Pixel und reduzieren Sie die Dicke jeder Linie auf ein Pixel. Aber was genau ist überflüssig? Um diese Frage zu beantworten, müssen Sie die Pixellinien und Unebenheiten verstehen.
Beulen
Sie müssen lernen, wie man in der Pixelkunst zwei grundlegende Linien zeichnet: gerade Linien und Kurven. Bei Stift und Papier geht es vor allem um die Muskelkontrolle, aber wir arbeiten mit winzigen Farbblöcken.
Der Schlüssel zum Zeichnen richtiger Pixellinien ist die Rauheit. Dabei handelt es sich um einzelne Pixel oder kleine Segmente, die die Glätte der Linie zerstören. Wie ich bereits sagte, ist ein einzelner Pixel in der Pixelkunst von großer Bedeutung, sodass Unebenheiten die gesamte Ästhetik ruinieren können. Stellen Sie sich vor, Sie zeichnen eine gerade Linie auf Papier und plötzlich schlägt jemand auf den Tisch: Unebenheiten in der Pixelkunst sehen aus wie ein zufälliges Kringel.
Beispiele:
Richten
Die Kurven
Auf Kurven treten Zacken auf, wenn die Länge der Liniensegmente nicht allmählich zunimmt oder abnimmt.
Es ist unmöglich, Unebenheiten vollständig zu vermeiden – alle Ihre Lieblings-Retro-Spiele haben sie (es sei denn natürlich, Pixelkunst besteht ausschließlich aus einfachen Formen). Zweck: Unregelmäßigkeiten minimieren und gleichzeitig alles zeigen, was Sie brauchen.
4. Auftragen der ersten Farben
Färben Sie Ihren Charakter mit einer Füllung oder einem anderen geeigneten Werkzeug. Die Palette vereinfacht diesen Teil der Arbeit. Wenn die Software die Verwendung von Paletten nicht vorsieht, können Sie diese wie im obigen Beispiel direkt in das Bild einfügen und die Farben mit einer Pipette auswählen.
In der unteren linken Ecke habe ich unseren Freund gezeichnet, lerne ihn kennen, das ist Shar. Dadurch wird es einfacher zu verstehen, was genau in jeder Phase passiert.
5. Schattierung
Es ist Zeit, die Schatten zu rendern – fügen Sie dem Sprite einfach dunklere Farben hinzu. Dadurch wirkt das Bild dreidimensional. Nehmen wir an, dass sich über dem Ork links davon eine Lichtquelle befindet. Das bedeutet, dass alles, was sich über und vor unserem Charakter befindet, beleuchtet wird. Fügen Sie unten rechts Schatten hinzu.
Form und Volumen
Wenn Ihnen dieser Schritt schwerfällt, stellen Sie sich Ihre Zeichnung als dreidimensionale Formen vor und nicht nur als Linien und Farben. Formen existieren im XNUMXD-Raum und können Volumen haben, das wir mit Schatten aufbauen. Dies hilft dabei, die Figur ohne Details zu visualisieren und es so aussehen zu lassen, als ob sie aus Ton statt aus Pixeln bestünde. Beim Schattieren geht es nicht nur darum, neue Farben hinzuzufügen, sondern auch darum, eine Form zu bilden. Bei einer gut detaillierten Figur verdecken die Details nicht die Grundformen: Wenn Sie die Augen zusammenkneifen, sehen Sie mehrere große Ansammlungen von Licht und Schatten.
Glättung (Anti-Aliasing, Anti-Aliasing)
Jedes Mal, wenn ich eine neue Farbe verwende, wende ich Anti-Aliasing (AA) an. Es hilft, Pixel zu glätten, indem an den Ecken, an denen sich zwei Liniensegmente treffen, Zwischenfarben hinzugefügt werden:
Graue Pixel mildern „Brüche“ in der Linie. Je länger das Liniensegment ist, desto länger ist das AA-Segment.
So sieht AA auf der Schulter des Orks aus. Es wird benötigt, um die Linien zu glätten, die die Krümmung seiner Muskeln darstellen.
Anti-Aliasing sollte nicht über das Sprite hinausgehen, das im Spiel verwendet wird, oder vor einem Hintergrund, dessen Farbe unbekannt ist. Wenn Sie AA beispielsweise auf einen hellen Hintergrund anwenden, sieht Anti-Aliasing auf einem dunklen Hintergrund hässlich aus.
6. Selektiver Schaltkreis
Zuvor waren die Umrisse komplett schwarz, wodurch das Sprite sehr cartoonhaft wirkte. Das Bild schien in Segmente unterteilt zu sein. Beispielsweise stellen die schwarzen Linien am Arm die Muskulatur zu kontrastreich dar und der Charakter wirkt weniger solide.
Wenn das Sprite natürlicher wird und die Segmentierung nicht so offensichtlich ist, sind die Grundformen des Charakters leichter zu lesen. Dazu können Sie einen selektiven Umriss verwenden – ersetzen Sie den schwarzen Umriss teilweise durch einen helleren. Für den beleuchteten Teil des Sprites können Sie die hellsten Farben verwenden oder, wo das Sprite Kontakt mit dem Negativraum hat, den Umriss vollständig entfernen. Anstelle von Schwarz müssen Sie die Farbe verwenden, die für den Schatten ausgewählt wurde. Auf diese Weise bleibt die Segmentierung erhalten (zur Unterscheidung zwischen Muskeln, Fell usw.).
Auch in dieser Phase habe ich dunklere Schatten hinzugefügt. Es stellte sich heraus, dass die Haut eines Orks drei Abstufungen von Grün aufweist. Die dunkelste grüne Farbe kann für selektive Konturen und AA verwendet werden.
7. Der letzte Schliff
Am Ende lohnt es sich, Highlights (die hellsten Stellen auf dem Sprite), Details (Ohrringe, Ohrstecker, Narben) und andere Verbesserungen hinzuzufügen, bis der Charakter fertig ist oder bis Sie mit dem nächsten fortfahren müssen.
In dieser Phase können mehrere nützliche Tricks angewendet werden. Drehen Sie die Zeichnung horizontal. Dies hilft oft dabei, Fehler in Proportionen und Schattierungen aufzudecken. Sie können die Farbe auch entfernen – setzen Sie die Sättigung auf Null, um zu verstehen, wo Sie die Schatten ändern müssen.
Rauschen erzeugen (Dithering, Dithering)
Bisher haben wir hauptsächlich große, gleichmäßige Schattenflächen verwendet. Aber es gibt noch eine andere Technik – das Dithering, das es Ihnen ermöglicht, von einer Farbe zur anderen zu wechseln, ohne eine dritte hinzuzufügen. Schauen Sie sich das Beispiel unten an.
Der obere Farbverlauf von dunkel nach hell verwendet Hunderte verschiedener Blautöne.
Der mittlere Farbverlauf verwendet nur neun Farben, enthält aber immer noch zu viele Schattierungen derselben Farbe. Es gibt ein sogenanntes Banding (vom englischen band – ein Streifen), bei dem sich das Auge aufgrund dicker, gleichmäßiger Streifen auf die Berührungspunkte der Farben und nicht auf die Farben selbst konzentriert.
Auf den unteren Farbverlauf haben wir einen Dither angewendet, der Streifenbildung vermeidet und nur zwei Farben verwendet. Wir erzeugen Rauschen unterschiedlicher Intensität, um Farbabstufungen zu simulieren. Diese Technik ist der beim Drucken verwendeten Halbtontechnik sehr ähnlich. sowie Stippling (Stippling – körniges Bild) – in Illustrationen und Comics.
Beim Ork habe ich ziemlich viel gezögert, um die Textur zu vermitteln. Manche Pixelkünstler nutzen es überhaupt nicht, andere sind nicht schüchtern und machen es sehr geschickt. Meiner Meinung nach sieht Dithering am besten auf großen Flächen aus, die mit einer einzelnen Farbe gefüllt sind (siehe den Himmel im Metal Slug-Screenshot oben) oder auf Flächen, die rau und uneben aussehen sollten (wie Schmutz). Entscheiden Sie selbst, wie Sie es verwenden.
Wenn Sie ein Beispiel für groß angelegtes und qualitativ hochwertiges Dithering sehen möchten, schauen Sie sich die Spiele von The Bitmap Brothers, einem britischen Studio aus den 80er Jahren, oder Spiele auf dem PC-98-Computer an. Denken Sie daran, dass sie alle NSFW sind.
Kakyusei (PC-98). Elf, 1996
Dieses Bild enthält nur 16 Farben!
8. Letzter Blick
Eine der Gefahren von Pixelkunst besteht darin, dass sie leicht und einfach wirkt (aufgrund ihrer Struktur- und Stilbeschränkungen). Aber am Ende werden Sie viel Zeit mit der Feinabstimmung Ihrer Sprites verbringen. Es ist wie ein Rätsel, das gelöst werden muss, weshalb Pixelkunst Perfektionisten anspricht. Denken Sie daran, dass ein Sprite nicht zu lange dauern sollte – es ist nur ein winziger Teil einer äußerst komplexen Sammlung von Teilen. Es ist wichtig, das große Ganze nicht aus den Augen zu verlieren.
Auch wenn Ihre Pixelkunst nicht für Spiele gedacht ist, lohnt es sich manchmal, sich selbst zu sagen: „Es ist schon gut genug!“ Und fahre fort. Der beste Weg, Fähigkeiten zu entwickeln, besteht darin, den gesamten Prozess von Anfang bis Ende so oft wie möglich zu durchlaufen und dabei so viele Themen wie möglich zu verwenden.
Und manchmal ist es sinnvoll, ein Sprite eine Weile stehen zu lassen, damit man es etwas später mit neuen Augen betrachten kann.
32×32 Pixel
Wir haben zuerst das große Sprite mit 96 x 96 Pixeln erstellt, da es in dieser Größe eher einem Zeichnen oder Malen ähnelt, nur mit Pixeln. Je kleiner das Sprite ist, desto weniger sieht es so aus, wie es angezeigt werden soll, und desto wichtiger ist jedes Pixel.
In Super Mario Bros. Marios Auge besteht nur aus zwei übereinander gestapelten Pixeln. Und sein Ohr auch. Charakterschöpfer Shigeru Miyamoto sagte, dass der Schnurrbart nötig sei, um die Nase vom Rest des Gesichts zu trennen. Eines der Hauptmerkmale von Marios Gesicht ist also nicht nur ein Charakterdesign, sondern auch ein pragmatischer Trick. Das bestätigt die alte Weisheit: „Not ist die Mutter des Einfallsreichtums.“
Wir sind bereits mit den Hauptschritten beim Erstellen eines 32×32-Pixel-Sprites vertraut: Skizze, Farbe, Schatten, weitere Verfeinerung. Aber unter solchen Bedingungen greife ich aufgrund der geringen Größe als erste Skizze zu farbigen Formen, anstatt Umrisse zu zeichnen. Farbe spielt bei der Zeichendefinition eine wichtigere Rolle als Umrisse. Schauen Sie sich Mario noch einmal an, er hat überhaupt keine Konturen. Nicht nur Schnurrbärte sind interessant. Seine Koteletten definieren die Form seiner Ohren, die Ärmel zeigen seine Arme und die Gesamtform spiegelt mehr oder weniger deutlich seinen gesamten Körper wider.
Das Erstellen kleiner Sprites ist ein ständiger Kompromiss. Wenn Sie einen Strich hinzufügen, verlieren Sie möglicherweise Platz für den Schatten. Wenn Ihre Figur klar definierte Arme und Beine hat, ist der Kopf wahrscheinlich nicht sehr groß. Durch den effektiven Einsatz von Farbe, selektiven Strichen und Anti-Aliasing erscheint das gerenderte Objekt größer, als es tatsächlich ist.
Für kleine Sprites mag ich den Chibi-Stil: Die Charaktere sehen sehr süß aus, sie haben große Köpfe und Augen. Eine großartige Möglichkeit, auf begrenztem Raum einen hellen Charakter und im Allgemeinen einen sehr angenehmen Stil zu schaffen. Aber vielleicht müssen Sie die Beweglichkeit oder Stärke des Charakters zeigen, dann können Sie dem Kopf weniger Platz geben, damit der Körper kraftvoller aussieht. Es hängt alles von Ihren Vorlieben und Zielen ab.
Das ganze Team ist da!
Dateiformate
Ein solches Ergebnis kann jeden Pixelkünstler nervös machen
Das angezeigte Bild ist das Ergebnis der Speicherung des Bildes als JPG. Ein Teil der Daten ging aufgrund von Dateikomprimierungsalgorithmen verloren. Hochwertige Pixelkunst wird am Ende schlecht aussehen und es wird nicht einfach sein, sie wieder in ihre ursprüngliche Farbpalette zu bringen.
Um ein statisches Bild ohne Qualitätsverlust zu speichern, verwenden Sie das PNG-Format. Für Animationen - GIF.
So teilen Sie Pixelkunst richtig
Das Teilen von Pixelkunst 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 ungefragt in JPG, was Ihre Arbeit verschlechtert. Und es ist nicht immer klar, warum Ihr Bild konvertiert wurde.
Es gibt einige Tipps, wie man Pixelkunst in der richtigen Qualität für verschiedene soziale Netzwerke speichert.
Um die PNG-Datei auf Twitter unverändert zu lassen, verwenden Sie weniger als 256 Farben oder dass Ihre Datei weniger als 900 Pixel lang ist. Ich würde die Dateigröße auf mindestens 512x512 Pixel erhöhen. Und zwar so, dass die Skalierung ein Vielfaches von 100 ist (200 %, nicht 250 %) und scharfe Kanten erhalten bleiben (Nearest Neighbor in Photoshop).
Animierte GIFs für Twitter-Beiträge wiegen nicht mehr als 15 MB. Das Bild muss mindestens 800 x 800 Pixel groß sein, die Schleifenanimation muss dreimal wiederholt werden und das letzte Bild muss halb so lang sein wie alle anderen – so die gängigste Theorie. Allerdings ist unklar, inwieweit diese Anforderungen erfüllt werden sollen, da Twitter seine Bilddarstellungsalgorithmen ständig ändert.
Soweit ich weiß, ist es nicht möglich, ein Bild ohne Qualitätsverlust auf Instagram zu posten. Aber es sieht auf jeden Fall besser aus, wenn man es auf mindestens 512x512 Pixel vergrößert.
Source: habr.com