Unabhängige Entwickler müssen oft mehrere Rollen gleichzeitig übernehmen: Game-Designer, Programmierer, Komponist, Künstler. 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, sind viel Erfahrung und spezielle Fähigkeiten erforderlich. Ich habe hier ein Tutorial gefunden, das für diejenigen nützlich ist, die gerade die Grundlagen dieses Stils erlernen: Es beschreibt spezielle Software und Maltechniken anhand von zwei Sprites.
den Hintergrund
Pixel-Art ist eine Form der digitalen Kunst, bei der Verä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 Speicherbeschränkungen und die niedrige Auflösung berücksichtigen. Heute ist Pixel-Art in Spielen und als Kunststil immer noch beliebt, trotz der Möglichkeit, realistische 3D-Grafiken zu erstellen. Warum? Selbst ohne Nostalgie betrachtet, ist es eine angenehme und lohnende Herausforderung, großartige Werke in solch strengen Rahmenbedingungen zu schaffen.
Die Einstiegshürde bei Pixel-Art ist im Vergleich zu traditioneller Kunst und 3D-Grafik relativ niedrig, was Indie-Entwickler anzieht. Das bedeutet jedoch nicht, dass es einfach sein wird, das zu beenden ein 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 fertigstellen, aber tatsächlich benötigten sie noch sechs Jahre.
Metal Slug 3 (Arcade). SNK, 2000
Pixel-Art auf dem Niveau, auf dem die meisten sie erstellen möchten, benötigt viel Zeit, und es gibt nur sehr wenige kurze Tutorials. Wenn Sie mit einem 3D-Modell arbeiten, können Sie es drehen, verformen, Teile davon bewegen, Animationen von einem Modell auf ein anderes kopieren usw. Hochwertige Pixel-Art erfordert fast immer eine Menge Mühe beim präzisen Platzieren der Pixel in jedem Frame.
Ich habe euch gewarnt.
Jetzt ein wenig zu meinem Stil: Hauptsächlich erstelle ich Pixel-Art für Videospiele und finde darin meine Inspiration. Besonders begeistert bin ich von Famicom/NES, 16-Bit-Konsolen und 90er-Jahre-Arkade-Spielen. Die Pixel-Art meiner Lieblingsspiele aus dieser Zeit lässt sich als lebendig, selbstbewusst und klar (aber nicht übertrieben) beschreiben; sie ist nicht hart und minimalistisch. In diesem Stil arbeite ich selbst, aber Sie können problemlos Ideen und Techniken aus diesem Tutorial nutzen, um völlig andere Werke zu schaffen. Studieren Sie die Arbeiten verschiedener Künstler und kreieren Sie die Pixel-Art, die Ihnen gefällt!
Software
Die grundlegenden digitalen Werkzeuge für Pixel-Art sind Zoom (Zoom) und Bleistift (Pencil), um die Pixel zu platzieren. Außerdem nützlich sind Linie (Line), Figur (Shape), Auswählen (Select), Verschieben (Move) und Farbtopf (Paint Bucket). Es gibt viele kostenlose und kostenpflichtige Programme mit diesem Werkzeugset. Ich werde die bekanntesten und die, die ich selbst benutze, vorstellen.
Paint (kostenlos)
Wenn Sie Windows verwenden, bietet das integrierte Paint eine primitive, aber alles erforderliche Toolset für Pixel-Art.
(kostenlos)
Ein überraschend funktionaler Pixel-Art-Editor, der direkt im Browser läuft. Sie können Ihre Arbeiten im PNG- oder animierten GIF-Format exportieren. Eine großartige Lösung für Einsteiger.
(kostenlos)
GraphicsGale ist der einzige Editor, von dem ich gehört habe, der speziell für Pixel-Art entwickelt wurde und Animationswerkzeuge bietet. Er wurde von dem japanischen Unternehmen HUMANBALANCE erstellt. Seit 2017 wird er kostenlos angeboten und erfreut sich weiterhin großer Beliebtheit, trotz des Aufstiegs von Aseprite. Leider läuft er nur auf Windows.
($)
Wahrscheinlich der derzeit beliebteste Editor. , viele Funktionen, aktive Unterstützung, Versionen für Windows, Mac und Linux. Wenn Sie ernsthaft in die Pixel-Art einsteigen und noch keinen passenden Editor gefunden haben, könnte dies genau das Richtige sein.
($$+)
GameMaker Studio 2 ist ein hervorragendes 2D-Tool mit einem guten Sprite-Editor. Wenn Sie Pixel-Art für Ihre eigenen Spiele erstellen möchten, ist es sehr praktisch, alles in einem Programm zu erledigen. Zurzeit benutze ich diese Software, um an , einer Sammlung von 50 Retro-Spielen zu arbeiten: Die Sprites und Animationen erstelle ich in GameMaker, die Tilesets in Photoshop.
($$$+)
Photoshop – eine teure Software, die im Abonnement angeboten wird und nicht für Pixel-Art optimiert ist. Ich empfehle es nicht zu kaufen, es sei denn, Sie sind daran interessiert, Illustrationen in hoher Auflösung zu erstellen oder müssen komplexe Manipulationen an Bildern durchführen, wie ich es tue. Es können statische Sprites und Pixelarbeiten erstellt werden, jedoch ist es im Vergleich zu spezialisierten Lösungen (zum Beispiel GraphicsGale oder Aseprite) recht kompliziert.
Sonstiges
Mein Set für Pixel-Art. Alles schwarz, habe ich gerade bemerkt.
Grafiktablett ($$+)
Ich empfehle Grafiktabletts für alle Arbeiten mit digitalen Illustrationen, um das Risiko eines Karpaltunnelsyndroms zu vermeiden. Es ist viel einfacher, dies zu verhindern, als es zu heilen. Wenn Sie einmal Schmerzen verspüren, wird es nur schlimmer – kümmern Sie sich am besten gleich darum. Da ich früher mit der Maus gezeichnet habe, habe ich jetzt Schwierigkeiten, Spiele zu spielen, in denen viel gedrückt werden muss. Momentan verwende ich das Wacom Intuos Pro S.
Handgelenksstütze ($)
Wenn Sie kein Tablet kaufen können, besorgen Sie sich zumindest eine Handgelenksstütze. Mir gefällt die Mueller Green Fitted Wrist Brace am besten. Die anderen sind entweder zu eng oder bieten nicht genug Unterstützung. Die Stützen lassen sich problemlos online bestellen.
96×96 Pixel
Final Fight. Capcom, 1989
Lass uns anfangen! Wir beginnen mit dem Charakter-Sprite in 96×96 Pixel. Als Beispiel habe ich einen Ork gezeichnet und ihn auf einen Screenshot aus Final Fight (Bild oben) platziert, damit du den Maßstab verstehst. Das ist ein großes Sprite für die meisten Retro-Spiele, Screenshot-Größe: 384×224 Pixel.
Mit einem so großen Sprite wird es einfacher, die Technik zu zeigen, über die ich sprechen möchte. Auch die pixelgenaue Zeichnung ähnelt traditionellen künstlerischen Formen (wie Zeichnungen oder Malerei), die Ihnen vielleicht vertrauter sind. Nachdem wir die grundlegenden Techniken gemeistert haben, werden wir zu kleineren Sprites übergehen.
1. Wählen Sie eine Farbpalette
Ein Pixel ist im Pixelart eine viel tiefere Angelegenheit als in anderen digitalen Bereichen. Die Beschränkungen von Pixelart, wie die Farben, bestimmen das Genre. Es ist wichtig, die Palette richtig auszuwählen, da sie Ihren Stil definiert. Zu Beginn empfehle ich jedoch, sich nicht zu viele Gedanken über Paletten zu machen und eine der bestehenden (oder einfach einige zufällige Farben) zu wählen – Sie können sie jederzeit ändern.
Für dieses Tutorial werde ich eine Palette aus 32 Farben verwenden, die wir für erstellt haben. Im Pixelart werden häufig Paletten aus 32 oder 16 Farben zusammengestellt. Unsere wurde für eine fiktive Konsole entwickelt, die irgendwo zwischen dem Famicom und dem PC Engine erscheinen könnte. Sie können sie verwenden oder eine andere wählen – das Tutorial ist ganz unabhängig von der gewählten Palette.
2. Grobe Konturen
Wir beginnen mit dem Zeichnen mit dem Werkzeug "Bleistift". Wir erstellen eine Skizze, ähnlich wie wir dies mit einem herkömmlichen Stift und Papier tun. Natürlich überschneiden sich Pixel-Art und traditionelle Kunst, insbesondere bei größeren Sprites. Meine Beobachtungen zeigen, dass talentierte Pixel-Künstler mindestens gut von Hand zeichnen können und umgekehrt. Daher ist es immer hilfreich, das Zeichnen zu üben.
3. Konturenüberarbeitung
Wir verfeinern die Konturen: Überflüssige Pixel entfernen und die Dicke jeder Linie auf einen Pixel reduzieren. Aber was genau zählt als überflüssig? Um diese Frage zu beantworten, müssen wir uns mit Pixel-Linien und Unregelmäßigkeiten auseinandersetzen.
Unregelmäßigkeiten
Wir müssen lernen, zwei grundlegende Linien in der Pixel-Art zu zeichnen: gerade und kurvige Linien. Mit Stift und Papier geht es um Muskelkontrolle, aber wir arbeiten mit winzigen, farbigen Blöcken.
Der Schlüssel zur Zeichnung präziser Pixel-Linien liegt in Unregelmäßigkeiten. Es sind Einzelpixel oder kleine Segmente, die die Glätte der Linie stören. Wie ich bereits erwähnt habe, ist jeder einzelne Pixel im Pixelart von enormer Bedeutung, weshalb Unregelmäßigkeiten die gesamte Ästhetik zerstören können. Stellen Sie sich vor, Sie ziehen eine gerade Linie auf Papier und plötzlich stößt jemand den Tisch an: Unregelmäßigkeiten in der Pixelkunst wirken genauso wie ein zufälliger Kringel.
Beispiele:
Gerade
Kurven
Unregelmäßigkeiten treten bei Kurven auf, wenn die Länge der Liniensegmente nicht gleichmäßig zunimmt oder abnimmt.
Unregelmäßigkeiten ganz 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). Das Ziel: Unregelmäßigkeiten auf ein Minimum zu reduzieren, während alle notwendigen Details angezeigt werden.
4. Die ersten Farben anwenden
Färben Sie Ihren Charakter mit einer Füllfarbe oder einem anderen geeigneten Werkzeug. DiePalette wird diesen Teil der Arbeit erleichtern. Wenn die Software keine Verwendung von Paletten zulässt, können Sie sie direkt ins Bild einfügen, wie im obigen Beispiel, und die Farben mit der Pipette auswählen.
In der unteren linken Ecke habe ich unseren Freund gezeichnet, lernt ihn kennen, das ist — Sharr. Mit ihm wird es einfacher sein zu verstehen, was in jeder Phase vor sich geht.
5. Schattierung
Es ist Zeit, die Schatten darzustellen — fügen wir einfach dunklere Farben dem Sprite hinzu. So wirkt das Bild dreidimensional. Angenommen, wir haben eine Lichtquelle, die sich links oben über dem Ork befindet. Alles, was sich oben und vor unserem Charakter befindet, wird erleuchtet. Fügen wir die Schatten unten rechts hinzu.
Form und Volumen
Wenn 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 aufweisen, das wir durch Schatten gestalten. 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 ein Prozess des Formaufbaus. Bei einem gut gestalteten Charakter verdecken die Details nicht die grundlegenden Formen: Wenn Sie die Augen zusammenkneifen, sehen Sie mehrere große Cluster aus Licht und Schatten.
Kantenglättung (Anti-Alias, 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 an den Ecken, wo zwei Liniensegmente sich berühren, Zwischentöne hinzufügt.
Graue Pixel mildern die "Brüche" in der Linie. Je länger das Liniensegment ist, desto länger ist das AA-Segment.
So sieht AA auf der Schulter eines Orks aus. Es ist notwendig, um die Linien zu glätten, die die Konturen seiner Muskeln zeigen.
Das Glätten sollte nicht über die Grenzen des Sprites hinausgehen, der im Spiel oder auf einem Hintergrund verwendet wird, dessen Farbe unbekannt ist. Wenn Sie zum Beispiel AA auf einen hellen Hintergrund anwenden, wird es auf einem dunklen Hintergrund unschön aussehen.
6. Selektive Kontur
Früher waren die Konturen vollständig schwarz, was dazu führte, dass das Sprite sehr cartoonhaft aussah. Das Bild wirkte, als wäre es in Segmente unterteilt. Zum Beispiel sind die schwarzen Linien am Arm zu kontrastreich und verdeutlichen die Muskulatur, wodurch der Charakter weniger zusammenhängend wirkt.
Wenn der Sprite natürlicher wird und die Segmentierung weniger auffällig ist, werden die Grundformen des Charakters leichter lesbar sein. Dabei kann man eine selektive Kontur verwenden – teilweise den schwarzen Kontur durch einen helleren ersetzen. In den beleuchteten Bereichen des Sprites kann man die hellsten Farben nutzen oder dort, wo der Sprite mit dem negativen Raum in Kontakt kommt, die Kontur vollständig entfernen. Anstatt Schwarz sollte die Farbe verwendet werden, die für den Schatten gewählt wurde – so bleibt die Segmentierung (zum Abgrenzen von Muskeln, Fell usw.) erhalten.
Ebenfalls in diesem Schritt habe ich dunklere Schatten hinzugefügt. Es entstanden drei Grüntöne auf der Haut des Orks. Der dunkelgrünste Farbton kann für die selektive Kontur und AA verwendet werden.
7. Letzte Schliffe
Am Ende sollten Glanzlichter (die hellsten Flecken auf dem Sprite), Details (Ohrringe, Nieten, Narben) und weitere Verbesserungen hinzugefügt werden, bis der Charakter bereit ist oder bis es Zeit wird, zum nächsten überzugehen.
Es gibt einige nützliche Techniken, die Sie in diesem Stadium anwenden können. Drehen Sie die Zeichnung horizontal, das hilft oft, Fehler in Proportionen und Schattierungen zu erkennen. Sie können auch die Farbe entfernen — stellen Sie die Sättigung auf null, um zu verstehen, wo Sie die Schatten anpassen müssen.
Erzeugung von Rauschen (Dithering)
Bisher haben wir hauptsächlich große, durchgehende Schattenbereiche verwendet. Es gibt jedoch auch eine andere Technik — Dithering, die es ermöglicht, von einer Farbe zur anderen überzugehen, ohne eine dritte hinzuzufügen. Sehen Sie sich das Beispiel unten an.
Der obere Gradient von dunkel nach hell verwendet Hunderte verschiedener Blautöne.
Der mittlere Gradient verwendet nur neun Farben, aber es gibt immer noch zu viele Abstufungen einer einzigen Farbe. Das führt zu dem sogenannten Banding, bei dem das Auge aufgrund der dicken, einheitlichen Streifen auf die Berührungspunkte der Farben fokussiert, anstatt auf die Farben selbst.
Im unteren Gradient haben wir Dithering angewendet, um Banding zu vermeiden und nur zwei Farben zu verwenden. Wir erstellen Rauschen unterschiedlichen Intensitäts, um einen Farbverlauf zu simulieren. Diese Technik ähnelt dem Halbtontest (Halftone), der im Druck verwendet wird, sowie dem Stippling (Stippeln) in Illustrationen und Comics.
Beim Orc habe ich nur wenig Dithering verwendet, um die Textur zu übertragen. Einige Pixelkünstler nutzen es gar nicht, andere hingegen machen das sehr geschickt. Meiner Meinung nach sieht Dithering am besten auf großen Flächen aus, die mit einer Farbe gefüllt sind (schauen Sie sich den Himmel im Screenshot von Metal Slug an, der oben war) oder auf den Flächen, die rau und unregelmäßig aussehen sollen (zum Beispiel Erde). Entscheiden Sie selbst, wie Sie es verwenden möchten.
Wenn Sie ein Beispiel für umfangreiches und qualitativ hochwertiges Dithering sehen möchten, schauen Sie sich die Spiele von The Bitmap Brothers, dem britischen Studio aus den 80er Jahren, oder die Spiele auf dem PC-98 an. Beachten Sie jedoch, dass alle NSFW sind.
Kakyusei (PC-98). Elf, 1996.
Auf diesem Bild sind insgesamt 16 Farben vorhanden!
8. Letzter Blick
Eine der Gefahren des Pixelarts besteht darin, dass es leicht und einfach erscheint (wegen seiner Struktur und Stilbeschränkungen). Letztlich werden Sie jedoch viele Stunden mit der Bearbeitung Ihrer Sprites verbringen. Es ist wie ein Puzzle, das gelöst werden muss — deshalb zieht Pixelart Perfektionisten an. Denken Sie daran, dass ein Sprite nicht zu viel Zeit in Anspruch nehmen sollte — er ist nur ein winziger Teil eines äußerst komplexen Gesamtbildes. Es ist wichtig, die Gesamtvision nicht aus den Augen zu verlieren.
Selbst wenn Ihr Pixelart nicht für Spiele gedacht ist, sollten Sie sich manchmal sagen: 'Es ist schon gut genug!' und weitermachen. Der beste Weg, um Fähigkeiten zu entwickeln, besteht darin, den gesamten Prozess so oft wie möglich von Anfang bis Ende durchzugehen und dabei so viele Themen wie möglich zu verwenden.
Manchmal ist es auch hilfreich, einen Sprite für eine Weile beiseitezulegen, um später mit frischem Blick darauf schauen zu können.
32×32 Pixel
Wir haben zuerst einen großen Sprite mit 96×96 Pixeln erstellt, da das bei dieser Größe mehr an Zeichnen oder Malen erinnert, jedoch mit Pixeln. Je kleiner der Sprite, desto weniger sieht er aus wie das, was er darstellen sollte, und desto wichtiger wird jeder Pixel.
In Super Mario Bros. sind die Augen von Mario nur zwei Pixel, die übereinander angeordnet sind. Und sein Ohr ebenfalls. Der Schöpfer der Figur, Shigeru Miyamoto, sagte, dass die Schnurrhaare notwendig waren, um die Nase vom restlichen Gesicht zu trennen. Eine der auffälligsten Eigenschaften von Marios Gesicht ist also nicht nur das Design der Figur, sondern auch ein pragmatischer Kniff. Dies bestätigt die alte Weisheit: "Not macht erfinderisch."
Die grundlegenden Schritte zur Erstellung eines 32×32 Pixel-Sprites sind uns bereits vertraut: Skizze, Farben, Schatten, weitere Verfeinerungen. Doch unter diesen Bedingungen wähle ich als Ausgangsskizze farbige Formen anstelle von Konturen, aufgrund der geringen Größe. Farbe spielt eine wichtigere Rolle bei der Definition der Figur als die Konturen. Schauen Sie sich Mario noch einmal an, er hat überhaupt keine Konturen. Interessant sind nicht nur die Schnurrhaare. Seine Koteletten bestimmen die Form der Ohren, die Ärmel zeigen die Arme, und die Gesamtform vermittelt mehr oder weniger klar den ganzen Körper.
Das Erstellen von kleinen Sprites erfordert ständige Kompromisse. Wenn Sie eine Kontur hinzufügen, kann der Platz für den Schatten verloren gehen. Wenn Ihre Figur deutlich sichtbar Arme und Beine hat, sollte der Kopf wahrscheinlich nicht zu groß sein. Durch den effektiven Einsatz von Farben, selektiven Konturen und Glättung kann das gezeichnete Objekt größer erscheinen, als es tatsächlich ist.
Für kleine Sprites gefällt mir der Tibi-Stil: Die Charaktere wirken sehr niedlich, mit großen Köpfen und Augen. Es ist ein hervorragender Weg, einen lebhaften Helden auf begrenztem Raum zu schaffen. Insgesamt ist es ein sehr ansprechender Stil. Wenn Sie jedoch die Beweglichkeit oder Stärke des Charakters zeigen möchten, können Sie weniger Platz für den Kopf verwenden, sodass der Körper kraftvoller wirkt. Es hängt alles von Ihren Vorlieben und Zielen ab.
Das ganze Team ist versammelt!
Dateiformate
Ein solches Ergebnis kann selbst den nervösesten Pixel-Künstler ins Schwitzen bringen.
Das Bild, das Sie sehen, ist das Ergebnis des Speicherns eines Bildes im JPG-Format. Dabei sind einige Daten aufgrund der Komprimierungsalgorithmen verloren gegangen. Qualitativ hochwertiger Pixel-Art sieht am Ende schlecht aus, und es wird schwierig sein, die ursprüngliche Farbpalette wiederherzustellen.
Um ein statisches Bild ohne Qualitätsverlust zu speichern, verwenden Sie das PNG-Format. Für Animationen eignet sich 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 kennenzulernen, die im selben Stil arbeiten. Vergessen Sie nicht, den Hashtag #pixelart zu verwenden. Leider konvertieren soziale Netzwerke oft PNGs ohne Vorwarnung in JPGs, wodurch Ihre Arbeit beeinträchtigt wird. Es ist nicht immer klar, warum Ihr Bild konvertiert wurde.
Hier sind einige Tipps, wie Sie Pixel-Art in der richtigen Qualität für verschiedene soziale Netzwerke speichern können.
Damit 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 zumindest auf 512×512 Pixel erhöhen, wobei die Skalierung ein Vielfaches von 100 (200 % und nicht 250 %) beträgt und die scharfen Kanten beibehalten werden (Nearest Neighbor in Photoshop).
Animierte GIFs für Twitter-Beiträge sollten nicht mehr als 15 MB wiegen. Das Bild sollte mindestens 800×800 Pixel groß sein, die Animation muss dreimal wiederholt werden, und der letzte Frame sollte in der Zeit halb so lang sein wie alle anderen – die weit verbreitete Theorie. Unklar bleibt jedoch, inwieweit diese Anforderungen erfüllt werden müssen, da Twitter ständig seine Algorithmen zur Bilddarstellung ändert.
Soweit ich weiß, ist es unmöglich, ein Bild auf Instagram ohne Qualitätsverlust zu veröffentlichen. Aber es wird sicher besser aussehen, wenn Sie es zumindest auf 512x512 Pixel erhöhen.
Quelle: habr.com
