Wie zeichnet man Pixelkunst? Adobe Photoshop: Zeichnen und animieren Sie eine Figur mithilfe der Pixel-Art-Technik

Pixelkunst(ohne Bindestrich geschrieben) oder Pixelgrafiken– eine Richtung der digitalen Kunst, bei der Bilder auf Pixelebene erstellt werden (d. h. der kleinsten logischen Einheit, aus der ein Bild besteht). Nicht alle Rasterbilder sind Pixelkunst, obwohl sie alle aus Pixeln bestehen. Warum? Denn letztlich das Konzept Pixelkunst enthält weniger das Ergebnis als vielmehr den Prozess der Erstellung einer Illustration. Pixel für Pixel, und das war's. Wenn Sie ein digitales Foto aufnehmen, es stark verkleinern (so dass die Pixel sichtbar werden) und behaupten, Sie hätten es von Grund auf gezeichnet, handelt es sich um eine echte Fälschung. Obwohl es wahrscheinlich naive Einfaltspinsel gibt, die Sie für Ihre sorgfältige Arbeit loben.

Es ist derzeit nicht bekannt, wann genau diese Technik entstand; ihre Wurzeln liegen irgendwo in den frühen 1970er Jahren. Die Technik, Bilder aus kleinen Elementen zusammenzusetzen, geht jedoch auf viel ältere Kunstformen wie Mosaike, Kreuzstiche, Teppichweberei und Perlenstickerei zurück. Der Ausdruck „Pixelkunst“ als Definition von Pixelkunst wurde erstmals in einem Artikel von Adele Goldberg und Robert Flegal in der Zeitschrift Communications of the ACM (Dezember 1982) verwendet.

Die am weitesten verbreitete Anwendung von Pixelkunst ist Computerspiele, was nicht verwunderlich ist – es ermöglichte die Erstellung von Bildern, die hinsichtlich der Ressourcen anspruchslos waren und gleichzeitig wirklich schön aussahen (und gleichzeitig dem Künstler viel Zeit in Anspruch nahmen, bestimmte Fähigkeiten erforderten und daher Gutes implizierten Löhne). In Blüte, höchster Punkt In der Entwicklung befinden sich offiziell Videospiele auf Konsolen der 2. und 3. Generation (Anfang der 1990er Jahre). Weitere Fortschritte in der Technologie, das Aufkommen der ersten 8-Bit-Farbe und dann True Color, die Entwicklung dreidimensionaler Grafiken – all dies drängte die Pixelkunst im Laufe der Zeit in den Hintergrund und an den dritten Platz, und dann schien es so zu sein, dass Pixelkunst war zu Ende.

Seltsamerweise war es aber Mr. Wissenschaftlicher und technologischer Fortschritt, der Mitte der 90er Jahre die Pixelgrafik auf den letzten Platz brachte und sie später wieder ins Spiel brachte – indem er der Welt mobile Geräte in Form von Mobiltelefonen und PDAs vorstellte. Ganz gleich, wie nützlich ein neumodisches Gerät auch sein mag, Sie und ich wissen, dass es wertlos ist, wenn Sie nicht zumindest Solitaire darauf spielen können. Nun, wo ein Bildschirm mit niedriger Auflösung ist, gibt es Pixelkunst. Wie sie sagen: Willkommen zurück.

Natürlich spielten verschiedene retrograde Elemente eine Rolle bei der Rückkehr der Pixelgrafiken, die gerne nostalgisch an die guten alten Kinderspiele denken und sagen: „Eh, das machen sie nicht mehr“; Ästheten, die die Schönheit der Pixelkunst zu schätzen wissen, und Indie-Entwickler, die moderne grafische Schönheiten nicht wahrnehmen (und manchmal, wenn auch selten, einfach nicht wissen, wie sie sie in ihren eigenen Projekten umsetzen sollen), deshalb formen sie Pixelkunst . Aber wir dürfen rein kommerzielle Projekte – Anwendungen für mobile Geräte, Werbung und Webdesign – nicht außer Acht lassen. Mittlerweile ist Pixelkunst, wie man sagt, in engen Kreisen weit verbreitet und hat sich eine Art Kunststatus „nicht jedermanns Sache“ erworben. Und das trotz der Tatsache, dass es für den Normalbürger äußerst zugänglich ist, denn um mit dieser Technologie zu arbeiten, reicht es aus, einen Computer und das einfachste zu haben Grafikeditor! (Zeichnen kann übrigens auch nicht schaden) Genug der Worte, kommen wir zur Sache!

2. Werkzeuge.

Was benötigen Sie, um Pixelkunst zu erstellen? Wie oben bereits erwähnt, genügen ein Computer und ein beliebiger Grafikeditor, der auf Pixelebene arbeiten kann. Sie können überall zeichnen, sogar auf einem Game Boy, sogar auf einem Nintendo DS, sogar in Microsoft Paint (außerdem ist das Zeichnen in Letzterem äußerst umständlich). Es gibt eine große Auswahl an Raster-Editoren, viele davon sind kostenlos und recht funktionsfähig, also mit Software das kann jeder selbst entscheiden.

Ich zeichne ein Adobe Photoshop, weil es praktisch ist und weil es es schon lange gibt. Ich werde nicht lügen und Ihnen sagen, dass Photoshop noch sehr klein war, es war auf einem Macintosh und hatte die Nummer 1.0. Aber ich erinnere mich an Photoshop 4.0 (und auch an Mac). Daher war die Frage der Wahl für mich nie eine Frage. Und deshalb nein, nein, aber ich werde Empfehlungen zu Photoshop geben, insbesondere dort, wo seine Funktionen dazu beitragen, die Kreativität erheblich zu vereinfachen.

Sie benötigen also einen beliebigen Grafikeditor, der es Ihnen ermöglicht, mit einem Werkzeug aus einem quadratischen Pixel zu zeichnen (es gibt auch nicht quadratische Pixel, zum Beispiel runde, aber sie im Moment kein Interesse). Wenn Ihr Editor beliebige Farben unterstützt, ist das großartig. Wenn Sie damit auch Dateien speichern können, ist das großartig. Es wäre schön, mit Ebenen arbeiten zu können, da es genug Arbeit gibt komplexes Bild, ist es bequemer, seine Elemente in verschiedenen Schichten anzuordnen, aber im Großen und Ganzen ist dies eine Frage der Gewohnheit und Bequemlichkeit.

Sollen wir anfangen? Warten Sie wahrscheinlich auf eine Liste einiger geheimer Techniken und Empfehlungen, die Ihnen das Zeichnen von Pixelkunst beibringen? Aber die Wahrheit ist, dass es im Großen und Ganzen nichts Vergleichbares gibt. Der einzige Weg, das Zeichnen von Pixelkunst zu lernen, besteht darin, es selbst zu zeichnen, es auszuprobieren, es auszuprobieren, keine Angst zu haben und zu experimentieren. Fühlen Sie sich frei, die Arbeit anderer Leute zu wiederholen, haben Sie keine Angst, unoriginell zu wirken (geben Sie die Arbeit anderer Leute nur nicht als Ihre eigene aus, hehe). Analysieren Sie sorgfältig und nachdenklich die Werke von Meistern (nicht von mir) und zeichnen, zeichnen, zeichnen. Am Ende des Artikels erwarten Sie einige nützliche Links.

3. Allgemeine Grundsätze.

Dennoch gibt es einige allgemeine Grundsätze, deren Kenntnis nicht schaden kann. Davon gibt es wirklich wenige, ich nenne sie „Grundsätze“ und nicht Gesetze, weil sie eher empfehlenden Charakter haben. Wenn Sie es am Ende schaffen, eine brillante Pixelkunst zu zeichnen, die alle Regeln umgeht – wen interessieren sie dann?

Das grundlegendste Prinzip lässt sich wie folgt formulieren: Die Mindesteinheit eines Bildes ist ein Pixel, und wenn möglich sollten alle Elemente der Komposition dazu proportional sein. Lassen Sie es mich aufschlüsseln: Alles, was Sie zeichnen, besteht aus Pixeln, und die Pixel müssen in allem lesbar sein. Dies bedeutet nicht, dass das Bild überhaupt keine Elemente enthalten kann, beispielsweise 2x2 Pixel oder 3x3. Dennoch ist es immer noch vorzuziehen, ein Bild aus einzelnen Pixeln aufzubauen.

Der Strich und generell alle Linien der Zeichnung sollten (mit seltenen Ausnahmen) einen Pixel dick sein.

Ich sage überhaupt nicht, dass das falsch ist. Aber es ist immer noch nicht sehr schön. Und um es schön zu machen, erinnern wir uns an eine weitere Regel: knickfrei zeichnen, glatt runden. Es gibt so etwas wie Knicke – Bruchstücke, die herausbrechen allgemeine Ordnung Sie verleihen den Linien ein ungleichmäßiges, gezacktes Aussehen (im englischsprachigen Umfeld der Pixelkünstler werden sie Jaggies genannt):

Brüche nehmen der Zeichnung ihre natürliche Glätte und Schönheit. Und wenn die Fragmente 3, 4 und 5 offensichtlich sind und leicht korrigiert werden können, ist die Situation bei den anderen komplizierter – dort ist die Länge eines einzelnen Stücks in der Kette gebrochen, es scheint eine Kleinigkeit zu sein, aber die Kleinigkeit ist spürbar. Es braucht ein wenig Übung, um zu lernen, diese Orte zu sehen und sie zu meiden. Knick 1 wird aus der Linie entfernt, da es sich um ein einzelnes Pixel handelt – während die Linie in dem Bereich, in dem sie eingefügt wurde, aus Segmenten von 2 Pixeln besteht. Um es zu beseitigen, habe ich den Eintritt der Kurve in die Biegung weicher gemacht, das obere Segment auf 3 Pixel verlängert und die gesamte Linie in 2-Pixel-Segmenten neu gezeichnet. Die Pausen 2 und 6 sind untereinander identisch – es handelt sich hierbei bereits um Fragmente mit einer Länge von 2 Pixeln in Bereichen, die aus einzelnen Pixeln bestehen.

Ein elementarer Satz von Beispielen für geneigte gerade Linien, die in fast jedem Pixel-Art-Handbuch zu finden sind (meine ist keine Ausnahme), hilft Ihnen, solche Knicke beim Zeichnen zu vermeiden:

Wie Sie sehen, besteht eine gerade Linie aus gleich langen Segmenten, die beim Zeichnen um ein Pixel verschoben werden – nur so wird der Effekt der Linearität erreicht. Die gebräuchlichsten Konstruktionsmethoden sind Segmentlängen von 1, 2 und 4 Pixeln (es gibt noch andere, aber die vorgestellten Möglichkeiten sollten ausreichen, um nahezu jede künstlerische Idee umzusetzen). Von diesen dreien kann man getrost als die beliebteste Segmentlänge von 2 Pixeln bezeichnen: Zeichnen Sie ein Segment, bewegen Sie den Stift um 1 Pixel, zeichnen Sie ein weiteres Segment, bewegen Sie den Stift um 1 Pixel, zeichnen Sie ein weiteres Segment:

Nicht schwer, oder? Alles, was Sie brauchen, ist eine Gewohnheit. Die Möglichkeit, geneigte gerade Linien in 2-Pixel-Schritten zu zeichnen, hilft bei der Isometrie, daher werden wir uns das nächste Mal genauer damit befassen. Generell sind gerade Linien toll – aber nur so lange, bis sich die Aufgabe stellt, etwas Wunderbares zu zeichnen. Hier brauchen wir Kurven, und zwar viele verschiedene Kurven. Und wir berücksichtigen eine einfache Regel zum Runden gekrümmter Linien: Die Länge der Kurvenelemente sollte schrittweise abnehmen/zunehmen.

Der Übergang von der geraden Linie zur Rundung erfolgt reibungslos, ich habe die Länge jedes Segments angegeben: 5 Pixel, 3, 2, 2, 1, 1, wieder 2 (bereits vertikal), 3, 5 und so weiter. Ihr Fall wird nicht unbedingt dieselbe Reihenfolge verwenden, es hängt alles von der erforderlichen Glätte ab. Ein weiteres Beispiel für Rundungen:

Auch hier vermeiden wir Knicke, die das Bild so sehr beeinträchtigen. Wenn Sie das gelernte Material überprüfen möchten, habe ich hier einen Skin für Winamp, der von einem unbekannten Autor gezeichnet wurde, ein Leerzeichen:

Es gibt grobe Fehler in der Zeichnung und einfach erfolglose Rundungen und es gibt Knicke – versuchen Sie, das Bild auf der Grundlage dessen zu korrigieren, was Sie bereits wissen. Das ist alles, was ich mit den Linien habe. Ich schlage vor, dass Sie ein wenig zeichnen. Und lassen Sie sich nicht von der Einfachheit der Beispiele verwirren, das Zeichnen kann man nur durch Zeichnen lernen – selbst die einfachsten Dinge.

4.1. Zeichne eine Flasche lebendiges Wasser.

1. Die Form des Objekts, Sie müssen vorerst keine Farbe verwenden.

2. Rote Flüssigkeit.

3. Ändern Sie die Farbe des Glases in Blau, fügen Sie schattierte Bereiche innerhalb der Blase und einen hellen Bereich auf der vorgesehenen Oberfläche der Flüssigkeit hinzu.

4. Fügen Sie weiße Glanzlichter auf der Blase hinzu und einen 1 Pixel breiten Schatten dunkelroter Farbe auf den Bereichen der Flüssigkeit, die an die Wände der Blase grenzen. Sieht ziemlich gut aus, oder?

5. Ebenso zeichnen wir eine Flasche mit blauer Flüssigkeit – hier die gleiche Glasfarbe, plus drei Blautöne für die Flüssigkeit.

4.2. Eine Wassermelone zeichnen.

Zeichnen wir einen Kreis und einen Halbkreis – das wird eine Wassermelone und eine ausgeschnittene Scheibe sein.

2. Markieren wir den Ausschnitt auf der Wassermelone selbst und auf der Scheibe – die Grenze zwischen Schale und Fruchtfleisch.

3. Füllung. Farben aus der Palette, mittleres Grün ist die Farbe der Schale, mittleres Rot ist die Farbe des Fruchtfleisches.

4. Markieren wir den Übergangsbereich von der Kruste zum Fruchtfleisch.

5. Helle Streifen auf der Wassermelone (endlich sieht sie aus wie sie selbst). Und natürlich – Samen! Wenn Sie eine Wassermelone mit Kakerlaken kreuzen, kriechen diese von selbst davon.

6. Wir erinnern uns daran. Wir verwenden eine blassrosa Farbe, um die Glanzlichter über den Samen im Abschnitt anzuzeigen, und indem wir die Pixel in einem Schachbrettmuster anordnen, erreichen wir einen gewissen Anschein von Volumen aus dem ausgeschnittenen Segment (diese Methode wird Dithering genannt, mehr dazu später). ). Wir verwenden einen dunkelroten Farbton, um die schattierten Bereiche im Abschnitt der Wassermelone anzuzeigen, und einen dunkelgrünen Farbton (wiederum Schachbrettpixel), um der Wassermelone selbst Volumen zu verleihen.

5. Dithering.

Dithering oder Blending ist eine Technik zum Mischen von Pixeln in zwei benachbarten Bereichen in einer eindeutig geordneten (nicht immer) Weise. verschiedene Farben. Das einfachste, gebräuchlichste und effektiver Weg– Abwechselnde Pixel in einem Schachbrettmuster:

Die Technik entstand dank (oder besser gesagt trotz) technischer Einschränkungen – auf Plattformen mit begrenzten Paletten ermöglichte Dithering, durch Mischen von Pixeln zweier verschiedener Farben eine dritte Farbe zu erhalten, die nicht in der Palette enthalten war:

Heute, in einer Zeit der unbegrenzten technischen Möglichkeiten, sagen viele, dass die Notwendigkeit des Ditherns von selbst verschwunden sei. Die richtige Verwendung kann Ihrem Werk jedoch einen charakteristischen Retro-Stil verleihen, der für alle Fans alter Videospiele erkennbar ist. Persönlich verwende ich gerne Dithering. Ich bin nicht sehr gut darin, aber ich liebe es trotzdem.

Zwei weitere Dither-Optionen:

Was Sie über Dithering wissen müssen, um es nutzen zu können. Die Mindestbreite der Mischzone muss mindestens 2 Pixel betragen (gleiche karierte Linien). Mehr ist möglich. Es ist besser, nicht weniger zu tun.

Nachfolgend finden Sie ein Beispiel für ein erfolgloses Dithering. Trotz der Tatsache, dass eine ähnliche Technik häufig bei Sprites aus Videospielen zu finden ist, muss man sich darüber im Klaren sein, dass der Fernsehbildschirm das Bild deutlich geglättet hat und ein solcher Kamm, selbst in Bewegung, für das Auge nicht sichtbar war:

So, genug der Theorie. Ich empfehle Ihnen, etwas mehr zu üben.

Pixelkunst kann in jedem Programm zum Arbeiten mit Rastergrafiken gezeichnet werden; es ist eine Frage der persönlichen Vorlieben und Erfahrung (und natürlich auch der finanziellen Möglichkeiten). Manche Leute verwenden das einfachste Paint, ich mache es in Photoshop – weil ich erstens schon lange darin arbeite und zweitens, weil ich mich dort wohler fühle. Als ich mich entschied, das kostenlose Paint.NET auszuprobieren, gefiel es mir nicht – es ist wie bei einem Auto, wenn man ein ausländisches Auto mit Automatikgetriebe erkennt, ist es unwahrscheinlich, dass man in einen Zaporozhets einsteigt. Mein Arbeitgeber stellt mir lizenzierte Software zur Verfügung, daher ist mein Gewissen vor dem Adobe-Konzern rein. Obwohl sie für ihre Programme unvorstellbare Preise verlangen und dafür in der Hölle schmoren werden.

1. Vorbereitung auf die Arbeit.

Erstellen Sie ein neues Dokument mit beliebigen Einstellungen (Breite 60, Höhe 100 Pixel). Das Hauptwerkzeug eines Pixelkünstlers ist ein Bleistift ( Bleistiftwerkzeug, per Hotkey aufgerufen B). Wenn der Pinsel (und das Pinselsymbol) in der Symbolleiste aktiviert ist, bewegen Sie den Mauszeiger darüber, klicken Sie und halten Sie ihn gedrückt L.M.B.– Es erscheint ein kleines Dropdown-Menü, in dem Sie einen Stift auswählen sollten. Stellen Sie die Stiftgröße auf 1 Pixel ein (im oberen Bereich links befindet sich ein Dropdown-Menü Bürste):