Wo kann man Pixelkunst zeichnen? Was ist Pixelkunst? Beispiele und wie man es lernt

Pixel Kunst(Pixelgrafiken) erfreuen sich auch heutzutage noch großer Beliebtheit beim Spielen und dafür gibt es mehrere Gründe!

Was also Pixel Art so faszinierend macht:

Wahrnehmung. Pixel Art sieht fantastisch aus! Über jedes einzelne Pixel in einem Sprite lässt sich viel sagen.
Nostalgie. Pixel Art bringt ein großartiges nostalgisches Gefühl für Spieler zurück, die mit Nintendo, Super Nintendo oder Genesis aufgewachsen sind (wie ich!)
Leicht zu lernen. Pixel Art ist eine der am einfachsten zu erlernenden Arten digitale Kunst, vor allem, wenn man eher ein Programmierer als ein Künstler ist ;]

Möchten Sie sich an Pixel Art versuchen? Dann begleiten Sie mich, während ich Ihnen zeige, wie Sie einen einfachen, aber effektiven Spielcharakter erstellen, den Sie in Ihrem eigenen Spiel verwenden können! Als Bonus schauen wir uns außerdem an, wie man es in iPhone-Spiele integriert!

Für ein erfolgreiches Studium benötigen Sie Adobe Photoshop. Wenn Sie es nicht haben, können Sie eine kostenlose Testversion von der Adobe-Website oder per Torrent herunterladen.

Was ist Pixelkunst?

Bevor wir beginnen, klären wir zunächst, was Pixel Art ist, denn es ist nicht so offensichtlich, wie Sie vielleicht denken. Der einfachste Weg zu definieren, was Pixel Art ist, besteht darin, zu definieren, was es nicht ist, nämlich: alles, wo Pixel automatisch erstellt werden. Hier sind einige Beispiele:

Gradient: Wählen Sie zwei Farben aus und berechnen Sie die Farbe der Pixel dazwischen. Sieht cool aus, ist aber keine Pixel Art!

Unschärfe-Werkzeug: Pixel definieren und zur Erstellung replizieren/bearbeiten neue Version Vorheriges Bild. Auch hier keine Pixelkunst.

Glattes Werkzeug(im Grunde neue Pixel in verschiedenen Farben erzeugen, um etwas „Glattes“ zu machen). Sie müssen sie meiden!

Einige werden sagen, dass selbst automatisch generierte Farben keine Pixelkunst sind, da sie eine Ebene zum Mischen von Effekten erfordern (Mischen von Pixeln zwischen zwei Ebenen gemäß einem bestimmten Algorithmus). Da die meisten Geräte heutzutage aber mit Millionen von Farben umgehen können, kann diese Aussage vernachlässigt werden. Die Nutzung erfolgt jedoch nicht große Menge Farben sind eine gute Übung in der Pixelkunst.

Andere Tools wie z (Linie) oder Farbeimer Werkzeug(Paint Bucket) generiert ebenfalls automatisch Pixel, aber da Sie sie so einstellen können, dass die von Ihnen gefüllten Pixel nicht geglättet werden, gelten diese Werkzeuge als Pixel-Art-freundlich.

Daher haben wir festgestellt, dass Pixel Art beim Platzieren jedes Pixels in einem Sprite viel Aufmerksamkeit erfordert, meist manuell und mit einer begrenzten Farbpalette. Machen wir uns jetzt an die Arbeit!

Beginn der Arbeiten

Bevor Sie mit der Erstellung Ihres ersten Pixel Art-Assets beginnen, sollten Sie wissen, dass Pixel Art nicht skaliert werden kann. Wenn Sie versuchen, es zu reduzieren, wird alles verschwommen aussehen. Wenn Sie versuchen, es zu vergrößern, sieht alles in Ordnung aus, solange Sie ein Vielfaches von zwei Zoomen verwenden (aber natürlich wird es nicht scharf sein).

Um dieses Problem zu vermeiden, müssen Sie zunächst verstehen, wie groß Ihr Spielcharakter oder Spielelement sein sollte, und dann mit der Arbeit beginnen. Meistens basiert dies auf der Bildschirmgröße des Zielgeräts und darauf, wie viele „Pixel“ Sie sehen möchten.

Wenn Sie beispielsweise möchten, dass das Spiel auf dem Bildschirm des iPhone 3GS („Ja, ich möchte meinem Spiel wirklich einen pixeligen Retro-Look geben!“), dessen Bildschirmauflösung 480 x 320 Pixel beträgt, doppelt so groß aussieht, dann müssen Sie das tun Arbeiten Sie mit der halben Auflösung, in diesem Fall sind es 240x160 Pixel.

Öffnen Sie ein neues Photoshop-Dokument ( Datei → Neu…) und stellen Sie die Größe auf die Größe Ihres Spielbildschirms ein. Wählen Sie dann die Größe für Ihren Charakter aus.

Jede Zelle ist 32x32 Pixel groß!

Ich habe mich für 32x32 Pixel entschieden, nicht nur, weil es perfekt zur gewählten Bildschirmgröße passt, sondern auch, weil 32x32 Pixel auch ein Vielfaches von 2 ist, was für Spielzeug-Engines praktisch ist (Kachelgrößen sind oft ein Vielfaches von 2, Texturen werden als Vielfaches von 2 ausgerichtet, usw.

Auch wenn die von Ihnen verwendete Engine jede Bildgröße unterstützt, können Sie jederzeit versuchen, mit einer geraden Pixelzahl zu arbeiten. Wenn in diesem Fall das Bild skaliert werden muss, wird die Größe besser aufgeteilt, was letztendlich zu einer besseren Leistung führt.

Zeichnen einer Pixel-Art-Figur

Pixel Art ist dafür bekannt, klare und leicht lesbare Grafiken zu sein: Mit nur wenigen Punkten können Sie Gesichtszüge, Augen, Haare und Körperteile definieren. Allerdings erschwert die Größe des Bildes die Aufgabe: Je kleiner Ihr Charakter ist, desto schwieriger ist es, ihn zu zeichnen. Um praktischer zu sein, wählen Sie das kleinste Charaktermerkmal. Ich wähle immer Augen, weil sie eine der besten Möglichkeiten sind, einem Charakter Leben einzuhauchen.

Wählen Sie in Photoshop aus Bleistiftwerkzeug(Bleistiftwerkzeug). Wenn Sie es nicht finden können, halten Sie einfach das Werkzeug gedrückt Pinselwerkzeug(Pinselwerkzeug) und Sie werden es sofort sehen (es sollte an zweiter Stelle in der Liste stehen). Sie müssen die Größe lediglich auf 1 Pixel ändern (Sie können in der Werkzeugoptionsleiste darauf klicken und die Größe ändern oder einfach die Taste [ gedrückt halten).

Sie werden auch brauchen Löschwerkzeug(Radiergummi-Werkzeug), also klicken Sie darauf (oder drücken Sie E) und ändern Sie seine Einstellungen, indem Sie aus der Dropdown-Liste auswählen Modus:(Modus:) Bleistift(Bleistift) (da es in diesem Modus kein Anti-Aliasing gibt).

Jetzt fangen wir mit dem Pixeln an! Zeichnen Sie die Augenbrauen und Augen wie im Bild unten gezeigt:

ey! Ich bin pixelig!!

Sie könnten bereits mit Lineart beginnen, aber eine praktischere Möglichkeit besteht darin, eine Silhouette der Figur zu zeichnen. Gute Nachrichten Der Vorteil besteht darin, dass Sie zu diesem Zeitpunkt noch kein Profi sein müssen. Versuchen Sie sich einfach die Größe der Körperteile (Kopf, Rumpf, Arme, Beine) und die Ausgangshaltung der Figur vorzustellen. Versuchen Sie so etwas in Grau:

Zu diesem Zeitpunkt müssen Sie kein Profi sein

Bitte beachten Sie, dass ich auch welche hinterlassen habe Freiraum. Sie müssen nicht wirklich die gesamte Leinwand ausfüllen, sondern Platz für zukünftige Rahmen lassen. In diesem Fall ist es sehr nützlich, für alle die gleiche Leinwandgröße beizubehalten.

Nachdem Sie die Silhouette fertiggestellt haben, ist es Zeit . Jetzt müssen Sie bei der Pixelplatzierung vorsichtiger sein, also machen Sie sich keine Sorgen um Kleidung, Rüstung usw. Um auf der sicheren Seite zu sein, können Sie eine neue Ebene hinzufügen, damit Sie nie Ihre ursprüngliche Silhouette verlieren.

Wenn Sie das Gefühl haben, dass das Bleistift-Werkzeug zum Zeichnen zu langsam ist, können Sie es jederzeit verwenden (Linienwerkzeug). Bedenken Sie jedoch, dass Sie die Pixel nicht so präzise positionieren können wie mit einem Bleistift. Sie müssen konfigurieren Wie nachfolgend dargestellt:

Wählen , drücken und halten Rechteckwerkzeug(Rechteck-Werkzeug)

Gehen Sie in der Dropdown-Liste zum Bedienfeld „Werkzeugoptionen“. Wählen Sie den Werkzeugmodus(Pfadverfolgungsmodus) Pixel auswählen, ändern Gewicht(Dicke) auf 1 Pixel (falls noch nicht geschehen) und deaktivieren Sie das Kontrollkästchen Anti-Alias(Glättung). So sollten Sie es haben:

Beachten Sie, dass ich den unteren Umriss der Füße nicht gezeichnet habe. Dies ist optional, da die Füße kein so wichtiger Teil der Beine sind, den es hervorzuheben gilt, und dadurch eine Pixelzeile auf der Leinwand eingespart wird.

Anwenden von Farben und Schatten

Jetzt können Sie mit dem Ausmalen unseres Charakters beginnen. Machen Sie sich keine Gedanken über die Auswahl die richtigen Farben, sie lassen sich später sehr einfach ändern, achten Sie nur darauf, dass jedes seine eigene „Farbe“ hat. Verwenden Sie die Standardfarben auf der Registerkarte Farbfelder(Fenster → Farbfelder).

Färben Sie Ihren Charakter wie auf dem Bild unten (Sie können aber auch Ihrer Kreativität freien Lauf lassen und Ihre eigene Figur verwenden). eigene Farben!)

Eine gute, kontrastierende Farbe verbessert die Lesbarkeit Ihres Assets!

Bitte beachten Sie, dass ich die Kleidung oder Haare noch nicht skizziert habe. Denken Sie immer daran: Sparen Sie so viele Pixel wie möglich von unnötigen Umrissen!

Sie müssen keine Zeit damit verschwenden, jedes Pixel zu malen. Um Ihre Arbeit zu beschleunigen, verwenden Sie Linien derselben Farbe oder Farbeimer Werkzeug(Farbeimer-Werkzeug), um die Lücken zu füllen. Sie müssen es übrigens auch konfigurieren. Wählen Farbeimer Werkzeug in der Symbolleiste (oder drücken Sie einfach die G-Taste) und ändern Sie Toleranz(Toleranz) auf 0 und deaktivieren Sie es ebenfalls Anti-Alias(Glättung).

Wenn Sie es jemals verwenden müssen Zauberstab-Werkzeug(Zauberstab-Werkzeug) – ein sehr nützliches Werkzeug, das alle Pixel mit derselben Farbe auswählt und es dann auf die gleiche Weise wie das „Farbeimer“-Werkzeug einrichtet – keine Toleranz und Anti-Aliasing.

Der nächste Schritt, der einige Kenntnisse von Ihrer Seite erfordert, ist das Ausweichen und Schattieren. Wenn Sie nicht wissen, wie man hell und hell zeigt dunkle Seiten, dann werde ich Ihnen unten einige Anweisungen geben. Wenn Sie keine Zeit oder Lust haben, es zu studieren, können Sie diesen Schritt überspringen und mit dem Abschnitt „Peppen Sie Ihre Palette auf“ fortfahren, denn am Ende können Sie Ihre Schattierung einfach so gestalten wie in meinem Beispiel!

Verwenden Sie für das gesamte Asset dieselbe Lichtquelle

Versuchen Sie, ihm die Formen zu geben, die Sie möchten/können, denn danach sieht das Asset interessanter aus. Jetzt können Sie zum Beispiel die Nase, die Stirn runzelnden Augen, den Haarschopf, die Falten in der Hose usw. sehen. Sie können auch einige Lichtpunkte hinzufügen, damit es noch besser aussieht:

Verwenden Sie beim Schattieren die gleiche Lichtquelle

Und nun, wie versprochen, eine kleine Anleitung zu Licht und Schatten:

Peppen Sie Ihre Palette auf

Viele Leute verwenden Standardpalettenfarben, aber da viele Leute diese Farben verwenden, können wir sie in vielen Spielen sehen.

Photoshop hat große Auswahl Farben in der Standardpalette, sollten sich aber nicht zu sehr darauf verlassen. Der beste Weg, eigene Farben zu erstellen, besteht darin, auf die Hauptpalette unten in der Symbolleiste zu klicken.

Durchsuchen Sie dann im Fenster „Farbauswahl“ die rechte Seitenleiste, um eine Farbe auszuwählen, und den Hauptbereich, um die gewünschte Helligkeit (heller oder dunkler) und Sättigung (heller oder stumpfer) auszuwählen.

Wenn Sie das gewünschte gefunden haben, klicken Sie auf OK und Konfigurieren Sie das Farbeimer-Tool neu. Keine Sorge, Sie können dann einfach das Kontrollkästchen „Zusammenhängend“ deaktivieren und wenn Sie mit einer neuen Farbe malen, werden auch alle neuen Pixel mit derselben Hintergrundfarbe ausgefüllt.

Dies ist ein weiterer Grund, warum es wichtig ist, damit zu arbeiten Große anzahl Farben und verwenden Sie immer die gleiche Farbe für das gleiche Element (Hemden, Haare, Helm, Rüstung usw.). Denken Sie jedoch daran, für andere Bereiche andere Farben zu verwenden, da unsere Zeichnung sonst zu überfärbt wird!

Deaktivieren Sie „Zusammenhängend“, um ausgewählte Pixel mit derselben Farbe zu füllen

Ändern Sie die Farben, wenn Sie möchten, und erhalten Sie eine glamourösere Charakterfärbung! Sie können die Umrisse sogar neu einfärben. Achten Sie jedoch darauf, dass sie gut mit dem Hintergrund harmonieren.

Führen Sie abschließend einen Hintergrundfarbtest durch: Erstellen Sie eine neue Ebene unter Ihrem Charakter und füllen Sie sie mit verschiedene Farben. Dadurch soll sichergestellt werden, dass Ihr Charakter vor hellen, dunklen, warmen und kühlen Hintergründen sichtbar ist.

Wie Sie bereits sehen können, habe ich das Anti-Aliasing in allen Tools, die ich bisher verwendet habe, deaktiviert. Vergessen Sie nicht, dies auch in anderen Tools zu tun, z. B. Elliptisches Festzelt(Ovales Festzelt) und Lasso(Lasso).

Mit diesen Werkzeugen können Sie die Größe ausgewählter Teile ganz einfach ändern oder sie sogar drehen. Verwenden Sie dazu ein beliebiges Auswahlwerkzeug (oder drücken Sie M), um einen Bereich auszuwählen, klicken Sie mit der rechten Maustaste und wählen Sie ihn aus Kostenlose Transformation(Freie Transformation) oder drücken Sie einfach Strg + T. Um die Größe des ausgewählten Bereichs zu ändern, ziehen Sie einen der Griffe am Umfang des Transformationsrahmens. Um die Größe der Auswahl unter Beibehaltung der Proportionen zu ändern, halten Sie die Umschalttaste gedrückt und ziehen Sie einen der Eckgriffe.

Photoshop glättet jedoch automatisch alles, was mit bearbeitet wurde Kostenlose Transformation Gehen Sie also vor der Bearbeitung zu Bearbeiten → Einstellungen → Allgemein(Strg + K) und ändern Bildinterpolation(Bildinterpolation) ein Nächster Nachbar(Nächster Nachbar). Kurz gesagt, wann Nächster Nachbar Die neue Position und Größe werden sehr grob berechnet, es werden keine neuen Farben oder Deckkraft angewendet und die von Ihnen gewählten Farben bleiben erhalten.

Integration von Pixel Art in iPhone-Spiele

In diesem Abschnitt erfahren Sie, wie Sie unsere Pixelkunst mithilfe des Cocos2d-Spielframeworks in ein iPhone-Spiel integrieren. Warum denke ich nur über das iPhone nach? Denn dank einer Reihe von Artikeln über Unity (zum Beispiel: , oder Spiel im Stil von Jetpack Joyride in Unity 2D) wissen Sie bereits, wie man damit in Unity arbeitet, und aus den Artikeln über Crafty (Browsergames: Snake) und Impact (Einführung in die Erstellung von Browsergames auf Impact) haben Sie gelernt, wie Sie diese in den Canvas einfügen und Browsergames erstellen.

Wenn Sie neu bei Cocos2D oder bei der iPhone-App-Entwicklung im Allgemeinen sind, empfehle ich Ihnen, mit einem der Cocos2d- und iPhone-Tutorials zu beginnen. Wenn Sie Xcode und Cocos2d installiert haben, lesen Sie weiter!

Erstellen neues Projekt iOS → cocos2d v2.x → cocos2d iOS-Vorlage, nennen Sie es PixelArt und wählen Sie iPhone als Gerät aus. Ziehen Sie die erstellte Pixelkunst, zum Beispiel: sprite_final.png, in Ihr Projekt und öffnen Sie es dann HelloWorldLayer.m und ersetzen Sie die Initialisierungsmethode durch Folgendes:

-(id) init ( if((self=)) ( CCSprite * hero = ; hero.position = ccp(96, 96); hero.flipX = YES; ; ) return self; )

Wir positionieren das Sprite auf der linken Seite des Bildschirms und drehen es so, dass es nach rechts zeigt. Kompilieren Sie es, führen Sie es aus und dann sehen Sie Ihr Sprite auf dem Bildschirm:

Denken Sie jedoch daran, dass wir, wie wir weiter oben in diesem Tutorial besprochen haben, die Pixelskalierung auf künstliche Weise vergrößern wollten, damit sich jedes Pixel deutlich von den anderen unterscheidet. Fügen Sie also diese neue Zeile innerhalb der Initialisierungsmethode hinzu:

Hero.scale = 2.0;

Nichts Kompliziertes, oder? Kompilieren, ausführen und ... warten, unser Sprite ist verschwommen!

Dies liegt daran, dass Cocos2d die Zeichnung beim Skalieren standardmäßig glättet. Wir brauchen das nicht, also fügen Sie die folgende Zeile hinzu:

Diese Zeile konfiguriert Cocos2d so, dass Bilder ohne Anti-Aliasing skaliert werden, sodass unser Typ immer noch „pixelig“ aussieht. Kompilieren, ausführen und ... ja, es funktioniert!

Beachten Sie die Vorteile der Verwendung von Pixel-Art-Grafiken: Wir können ein kleineres Bild als das verwenden, was auf dem Bildschirm angezeigt wird, wodurch viel Texturspeicher gespart wird. Für Retina-Displays müssen wir nicht einmal separate Bilder erstellen!

Was kommt als nächstes?

Ich hoffe, Ihnen hat dieses Tutorial gefallen und Sie haben etwas mehr über Pixelkunst gelernt! Bevor ich mich verabschiede, möchte ich Ihnen noch einige Ratschläge geben:

Versuchen Sie stets, Anti-Aliasing, Farbverläufe oder zu viele Farben für Ihre Assets zu vermeiden. Dies dient Ihrem eigenen Wohl, insbesondere wenn Sie noch Anfänger sind.
Wenn Sie WIRKLICH einen Retro-Stil nachahmen möchten, achten Sie auf die Grafik in 8-Bit- oder 16-Bit-Konsolenspielen.
Einige Stile verwenden keine dunklen Konturen, andere berücksichtigen nicht die Wirkung von Licht oder Schatten. Es kommt auf den Stil an! In unserem Tutorial haben wir keine Schatten gezeichnet, aber das bedeutet nicht, dass Sie sie nicht verwenden sollten.

Für einen Anfänger scheint Pixel Art die am einfachsten zu erlernende Grafik zu sein, aber in Wirklichkeit ist es nicht so einfach, wie es scheint. Der beste Weg Um Ihre Fähigkeiten zu verbessern, heißt es üben, üben, üben. Ich empfehle dringend, Ihre Arbeit in den Pixel Art-Foren zu veröffentlichen, damit andere Künstler Ihnen Ratschläge geben können – es ist eine großartige Möglichkeit, Ihre Technik zu verbessern! Klein anfangen, viel üben, bekommen Rückmeldung und Sie können ein fantastisches Spiel erstellen, das Ihnen viel Geld und Freude bringen wird!

In diesem Tutorial erfahren Sie, wie Sie ein Foto einer Person in Pixelkunst umwandeln erfundener Charakter Arcade-Spiel seit den frühen 90ern.
James May – alias Smudgethis – entwickelte diesen Stil 2011 für Musik-Video für einen Dubstep-Rock-Act. Neros erster Hit, Me & You – für den er eine Animation erstellte altes Spiel mit Neros zwei Mitgliedern war ein 2D-Rhythmus-Plattformer mit 16-Bit-Grafik ähnlich wie Double Dragon, aber 8-Bit-Retro-Klassikern wie Super Mario Bros. weit überlegen.
Um diesen Stil zu schaffen, müssen die Charaktere immer noch blockig, aber komplexer sein als in den älteren Spielen. Und obwohl Sie dafür eine begrenzte Farbpalette verwenden müssen Aussehen Denken Sie daran, dass diese Spiele immer noch 65.536 Farben hatten.
Hier zeigt Ihnen James, wie Sie mit einer einfachen Farbpalette und dem Bleistift-Werkzeug eine Figur aus einem Foto erstellen.
Genau wie bei der Animationsanleitung benötigen Sie auch ein Foto der Person. James hat für dieses Tutorial ein Foto eines Punks verwendet, das in den Projektdateien enthalten ist.
Wenn Sie fertig sind, sehen Sie sich dieses 16-Bit-After Effects-Animations-Tutorial an, in dem James Ihnen zeigt, wie Sie diesen Charakter in AE aufnehmen, ihn animieren und Retro-Spieleffekte anwenden.

Schritt 1

Öffnen Sie den Animation Guide (16 Bit).psd und 18888111.jpg (oder ein Foto Ihrer Wahl), um sie als Basis für die Figur zu verwenden. Ein Profilfoto in voller Länge funktioniert am besten und hilft Ihnen dabei, Farbpaletten und Stile für Ihre 16-Bit-Figur zu finden.
Das Animations-Tutorial enthält mehrere Posen auf einzelnen Ebenen. Wählen Sie diejenige aus, die der beste Weg entspricht der Pose auf Ihrem Foto – da wir keine Beine im Rahmen haben, habe ich mich für die Standardpose auf Stufe 1 entschieden.

Schritt 2

Wählen Sie mit dem rechteckigen Auswahlwerkzeug (M) den Kopf aus Ihrem Foto aus, kopieren Sie ihn (Befehlstaste/Strg+C) und fügen Sie ihn (Befehlstaste/Strg+V) in die Animationsanleitung (16 Bit) ein.psd.
Skalieren Sie das Bild proportional, sodass es passt. Sie werden feststellen, dass das Bild aufgrund der sehr kleinen PSD-Abmessungen sofort mit dem Zeichnen eines Pixels beginnt.

Schritt 3

Erstellen Sie eine neue Ebene und zeichnen Sie den Umriss mit einem schwarzen Ein-Pixel-Stift (B). Verwenden Sie dabei die darin enthaltene Animationsanleitung und das Foto als Grundlage. \ P
Die mitgelieferte Anleitung hilft dabei, eine Reihe von Charakteren zu entwickeln, von größeren Bossfiguren bis hin zu schlankeren weiblichen Figuren. Dies ist eine grobe Anleitung zum Komponieren und Animieren meiner Pixel-Art-Charaktere.

Schritt 4

Probieren Sie mit der Pipette (I) den dunkelsten Bereich des Hauttons auf dem Foto aus und erstellen Sie ein kleines Farbquadrat. Wiederholen Sie dies noch dreimal, um eine vierfarbige Hauttonpalette zu erstellen.
Erstellen Sie eine weitere Ebene unter der Umrissebene und schattieren Sie das Bild mit einem Ein-Pixel-Pinsel und einer Farbpalette mit vier Farben (verwenden Sie dabei wiederum das Foto als Orientierungshilfe). \ P
Am besten speichern Sie alle Elemente Ihres Kunstwerks oder verschiedener Ebenen, da Sie diese dann problemlos für andere Formen wiederverwenden können. Dies ist besonders für Bösewichte nützlich, da die meisten 16-Bit-Spiele sehr ähnliche Zahlen verwenden. Beispielsweise könnte ein Kumpel ein rotes Hemd und ein Messer haben, während ein späterer Kumpel bis auf ein blaues Hemd und eine Waffe identisch ist.

Schritt 5

Wiederholen Sie diesen Vorgang für andere Teile der Figur und schattieren Sie den Stoff so, dass er zu anderen Elementen auf dem Originalfoto passt. Stellen Sie sicher, dass Sie mit dem Pipettenwerkzeug fortfahren, um zunächst Farbpaletten zu erstellen, da dies einen einheitlichen Farbsatz bietet, der großartig aussieht und in die relativ begrenzte Farbpalette von 16-Bit-Spielen passt.

Schritt 6

Fügen Sie Daten hinzu, um Ihren Charakter mit Farbtönen, Tätowierungen, Ohrringen usw. zu verbessern. Speisen Sie hier und überlegen Sie, wie Ihr Charakter in der Spielumgebung erscheinen soll. Vielleicht könnten sie eine Axt benutzen oder einen Roboterarm haben?

Schritt 7

Um Ihren Charakter zu animieren, wiederholen Sie die vorherigen Schritte mit den anderen fünf Ebenen der Animationsanleitung. Es kann einige Zeit dauern, diesen Prozess zu meistern und nahtlose Ergebnisse zu erzielen. Durch die Wiederverwendung von Elementen aus vorherigen Frames können jedoch Abkürzungen vorgenommen werden. In dieser Sequenz mit sechs Bildern bleibt beispielsweise der Kopf unverändert.

Schritt 8

Um zu überprüfen, ob die Animationssequenz in Ordnung ist, öffnen Sie das Animationsfenster in Photoshop und stellen Sie sicher, dass dies der Fall ist dieser Moment nur das erste Bild der Animation. Sie können neue Frames hinzufügen und Ebenen ein- und ausschalten, um Ihre Animation zu erstellen, aber das meiste davon auf schnelle Weise besteht darin, den Befehl „Rahmen aus Ebenen erstellen“ im Popup-Menü des Bedienfelds (oben rechts) zu verwenden.
Der erste Rahmen ist ein leerer Hintergrund. Wählen Sie ihn also aus und klicken Sie auf das Papierkorbsymbol des Bedienfelds (unten), um ihn zu löschen.

Heutzutage erleichtern Programme wie Photoshop, Illustrator, Corel die Arbeit des Designers und Illustrators. Mit ihrer Hilfe können Sie vollständig arbeiten, ohne von der Anordnung der Pixel abgelenkt zu werden, wie es am Ende des letzten Jahrhunderts der Fall war. Alle notwendigen Berechnungen begeht Software- Grafikeditor. Aber es gibt Menschen, die in eine andere Richtung arbeiten, nicht nur anders, sondern sogar völlig entgegengesetzt. Sie beschäftigen sich nämlich mit der gleichen Pixelanordnung der alten Schule, um ein einzigartiges Ergebnis und eine einzigartige Atmosphäre in ihren Werken zu erzielen.

Ein Beispiel für Pixelkunst. Fragment.

In diesem Artikel möchten wir über Menschen sprechen, die Pixelkunst betreiben. Schauen Sie sich ihre besten Werke genauer an, die allein aufgrund der Komplexität ihrer Umsetzung ohne Übertreibung als Werke bezeichnet werden können zeitgenössische Kunst. Werke, die einem beim Betrachten den Atem rauben.

Pixel Kunst. Beste Werke und Illustratoren

Die Stadt. Autor: Zoggles

Märchenschloss. Autor: Tinuleaf

Mittelalterliches Dorf. Autor: Docdoom

Hängende Gärten Semiramis. Autor: Mondfinsternis

Wohngebiet. Autor:

Pixelgrafiken (im Folgenden kurz Pixel-Art genannt) erfreuen sich heutzutage vor allem durch Indie-Spiele immer größerer Beliebtheit. Das ist verständlich, denn auf diese Weise können Künstler das Spiel mit einer großen Vielfalt an Charakteren füllen und müssen nicht Hunderte von Stunden damit verbringen, 3D-Objekte zu modellieren und komplexe Objekte manuell zu zeichnen. Wenn Sie Pixelkunst erlernen möchten, müssen Sie zunächst lernen, wie man sogenannte „Sprites“ zeichnet. Wenn Sie dann keine Angst mehr vor Sprites haben, können Sie mit der Animation fortfahren und sogar Ihre Arbeit verkaufen!

Schritte

Teil 1

Wir sammeln alles, was Sie brauchen

Laden Sie gute Grafikeditoren herunter. Natürlich können Sie in Paint Meisterwerke erstellen, aber das ist schwierig und nicht sehr praktisch. Es wäre viel besser, in etwas zu arbeiten wie:

Photoshop
Paint.net
Pixen

Kaufen Sie ein Grafiktablett. Wenn Sie nicht gerne mit der Maus zeichnen, dann sind ein Tablet und ein Stift genau das Richtige für Sie. Am beliebtesten sind übrigens Wacom-Tablets.

Aktivieren Sie „Raster“ in Ihrem Grafikeditor. Wenn Ihr Grafikeditor die Rasterdarstellung nicht unterstützt, sollten Sie sich tatsächlich nach einem anderen Programm umsehen. Anhand des Rasters können Sie deutlich erkennen, wo und wie sich jedes einzelne Pixel befindet. In der Regel wird der Rosenkranz über das Menü „Ansicht“ aktiviert.
- Möglicherweise müssen Sie die Anzeigeeinstellungen etwas anpassen, um sicherzustellen, dass jedes Rastersegment tatsächlich ein Pixel darstellt. Jedes Programm macht dies anders, achten Sie daher auf entsprechende Tipps.
Zeichnen Sie mit einem Bleistift und einem 1-Pixel-Pinsel. Jeder Grafikeditor sollte über ein „Bleistift“-Tool verfügen. Wählen Sie es aus und stellen Sie die Pinselgröße auf 1 Pixel ein. Jetzt können Sie zeichnen ... in Pixeln.

Teil 2
An den Grundlagen arbeiten
1. Erstellen Sie ein neues Bild. Da Sie lernen, im Pixel-Art-Stil zu zeichnen, sollten Sie keine epischen Leinwände anstreben. Wenn Sie sich erinnern, im Spiel Super Mario Bros. Der gesamte Bildschirm war 256 x 224 Pixel groß und Mario selbst passte in einen Raum von 12 x 16 Pixel!
  
  Hineinzoomen. Ja, sonst sieht man einzelne Pixel einfach nicht. Ja, Sie müssen es sehr stark erhöhen. Nehmen wir an, 800 % sind ganz normal.
  
  Lernen Sie, gerade Linien zu zeichnen. Es scheint einfach, aber wenn Sie mit zitternder Hand plötzlich irgendwo in der Mitte eine 2 Pixel dicke Linie zeichnen, wird Ihnen der Unterschied direkt ins Auge fallen. Zeichnen Sie gerade Linien, bis Sie das Geraden-Werkzeug aktivieren müssen. Sie müssen lernen, gerade Linien von Hand zu zeichnen!
  
  Lernen Sie, geschwungene Linien zu zeichnen. In einer gekrümmten Linie sollte es beispielsweise gleichmäßige „Zeilenumbrüche“ geben (was in der Abbildung oben deutlich zu erkennen ist). Nehmen wir an, Sie beginnen mit dem Zeichnen einer gekrümmten Linie und zeichnen eine gerade Linie mit 6 Pixeln, darunter eine gerade Linie mit drei Pixeln, darunter eine gerade Linie mit zwei Pixeln und darunter eine gerade Linie mit einem Pixel. Zeichnen Sie auf der anderen Seite dasselbe (natürlich gespiegelt). Dies ist der Verlauf, der als optimal angesehen wird. Im Muster „3-1-3-1-3-1-3“ gezeichnete Kurven entsprechen nicht den Pixel-Art-Standards.
  
  Vergessen Sie nicht, Fehler zu löschen. Das „Radiergummi“-Werkzeug sollte ähnlich wie ein Bleistift eingerichtet sein, sodass die Pinselgröße 1 Pixel beträgt. Je größer der Radiergummi, desto schwieriger ist es, nicht zu viel zu löschen, also ist alles logisch.
Teil 3
Das erste Sprite erstellen
1. Machen Sie eine Skizze. Eine Skizze auf Papier ist die Grundlage jedes Sprites. Glücklicherweise können Sie auf diese Weise verstehen, wie alles aussehen wird, und bei Bedarf etwas im Voraus korrigieren. Darüber hinaus können Sie dann anhand einer Papierskizze nachzeichnen (falls Sie noch ein Tablet haben).
  - Sparen Sie bei Ihrer Skizze nicht an Details! Zeichnen Sie alles, was Sie in der endgültigen Zeichnung sehen möchten.
2. Übertragen Sie die Skizze in einen Grafikeditor. Sie können eine Papierskizze auf einem Tablet nachzeichnen oder alles manuell neu zeichnen, Pixel für Pixel – egal, Sie haben die Wahl.
  - Verwenden Sie beim Nachzeichnen der Skizze 100 % Schwarz als Umrissfarbe. Wenn etwas passiert, können Sie es später manuell ändern, aber vorerst ist es für Sie einfacher, mit Schwarz zu arbeiten.
3. Verfeinern Sie den Umriss der Skizze. In diesem Zusammenhang kann man natürlich auch anders sagen: Löschen Sie alles Unnötige. Was soll das? Der Umriss sollte 1 Pixel dick sein. Erhöhen Sie dementsprechend den Maßstab und radieren Sie, radieren Sie den Überschuss ... oder ergänzen Sie mit einem Bleistift, was fehlt.
  - Lassen Sie sich bei der Arbeit an einer Skizze nicht von den Details ablenken – sie werden an der Reihe sein.
Teil 4
Färben des Sprites
1. Frischen Sie Ihre Farbtheorie auf. Schauen Sie sich die Palette an, um zu sehen, welche Farben Sie verwenden sollten. Da ist alles einfach: Je weiter die Farben voneinander entfernt sind, desto mehr unterscheiden sie sich voneinander; Je näher die Farben beieinander liegen, desto ähnlicher sind sie besser in der Nähe sie passen gut zueinander.
  - Wählen Sie Farben, die Ihren Sprite sowohl schön als auch optisch ansprechend machen. Und ja, Pastellfarben sollten vermieden werden (es sei denn, Ihr gesamtes Projekt ist in diesem Stil gestaltet).
2. Wählen Sie mehrere Farben. Je mehr Farben Sie verwenden, desto „ablenkender“ wird Ihr Sprite sozusagen. Schauen Sie sich einige Pixel-Art-Klassiker an und versuchen Sie zu zählen, wie viele Farben dort verwendet werden.
  - Mario – nur drei Farben (wenn es um die klassische Version geht), und selbst diese liegen auf der Palette fast nahe beieinander.
  - Sonic – Obwohl Sonic detaillierter gezeichnet ist als Mario, basiert es immer noch auf nur 4 Farben (und Schatten).
  - Ryu ist fast ein Klassiker unter den Sprites, wie sie in Kampfspielen verstanden werden, und besteht aus großen Flächen mit einfachen Farben und etwas Schatten zur Abgrenzung. Ryu ist jedoch etwas komplizierter als Sonic – es gibt bereits fünf Farben und Schatten.
3. Färbe das Sprite. Verwenden Sie das Farbfüllungswerkzeug, um Ihr Sprite einzufärben, und machen Sie sich keine Sorgen darüber, dass alles flach und leblos aussieht – in diesem Stadium ist nicht zu erwarten, dass dies anders geschieht. Das Prinzip des Füllwerkzeugs ist einfach: Es füllt alle Pixel der Farbe, auf die Sie geklickt haben, mit der von Ihnen ausgewählten Farbe, bis die Ränder erreicht sind.
Teil 5
Schatten hinzufügen
1. Beginnen Sie mit dem Auftragen von Schatten mit Farben, die etwas dunkler als die Basis sind. Wenn das Licht von oben kommt, wo wird dann der Schatten sein? Das ist richtig, wo direktes Licht nicht fällt. Um einen Schatten hinzuzufügen, fügen Sie dem Sprite dementsprechend einfach mehrere weitere Ebenen mit Pixeln der entsprechenden Farbe über oder unter dem Umriss hinzu.
  - Wenn Sie die Einstellung „Kontrast“ der Grundfarbe verringern und die Einstellung „Helligkeit“ leicht erhöhen, erhalten Sie eine gute Farbe zum Zeichnen von Schatten.
  - Verwenden Sie keine Farbverläufe. Farbverläufe sind böse. Farbverläufe sehen billig, schäbig und unprofessionell aus. Ein ähnlicher Effekt wie bei Farbverläufen wird durch die Technik des „Ausdünnens“ erzielt (siehe unten).
2. Vergessen Sie nicht den Halbschatten. Wählen Sie eine Farbe zwischen der Grundfarbe und der Schattenfarbe. Erstellen Sie damit eine weitere Ebene – dieses Mal jedoch zwischen den Schichten dieser beiden Farben. Das Ergebnis ist der Übergangseffekt von einem dunklen zu einem hellen Bereich.
  
  Highlights zeichnen. Das Highlight ist die Stelle auf dem Sprite, wo das meiste Licht einfällt. Sie können ein Highlight zeichnen, wenn Sie eine Farbe nehmen, die etwas heller als die Grundfarbe ist. Die Hauptsache ist, sich nicht von der Blendung mitreißen zu lassen, sie lenkt ab.
Teil 6
Wir verwenden fortgeschrittene Zeichentechniken
1. Vergessen Sie nicht das Anti-Aliasing (Beseitigung von Konturunregelmäßigkeiten). Ja, Visitenkarte Pixelkunst – die sichtbare „Pixelierung“ eines Bildes. Manchmal möchten Sie jedoch, dass die Linien etwas weniger auffällig und etwas glatter aussehen. Hier kommt Anti-Aliasing zur Rettung.
  - Fügen Sie den Kurven der Kurve Zwischenfarben hinzu. Tragen Sie eine Schicht Zwischenfarbe um den Umriss der Kurve auf, die Sie glätten möchten. Wenn es immer noch eckig aussieht, fügen Sie eine weitere Schicht hinzu, diesmal heller.
  - Wenn Sie möchten, dass das Sprite mit dem Hintergrund verschmilzt, verwenden Sie kein Anti-Aliasing am äußeren Rand des Sprites.
2. Erfahren Sie, wie Sie selektives Rendering verwenden. Worum es geht: Der Umriss wird mit einer Farbe gezeichnet, die der Farbe der Füllung ähnelt. Das Ergebnis ist ein weniger „karikaturhaftes“ Bild, und zwar aufgrund von mehr echtes Aussehen Kontur. Versuchen Sie beispielsweise, die Haut selektiv zu rendern und dabei einen klassischen schwarzen Umriss für Kleidung oder Objekte beizubehalten.

Pixel Art oder Pixelgrafiken sind digitale Zeichnung, das in Rastereditoren pixelweise erstellt wird. Pixel ist das kleinste grafische Element eines Bildes. Mit anderen Worten, das ist der Punkt. Und alle Pixelzeichnungen bestehen aus unzähligen Ansammlungen von Punkten, die leicht ungleichmäßig ausfallen, als wären sie schlecht gezeichnet. Aber das ist das Schöne an solchen Gemälden.

Ein bisschen Geschichte

Mit welchen Programmen kann man moderne Pixelkunst erstellen?

Es gibt viele kostenlose Raster-Editoren. Aber am häufigsten werden Microsoft Paint und Adobe Photoshop genannt. Zwar gilt Paint als weniger praktisches Werkzeug zum Erstellen von Pixelkunst als Adobe Photoshop. Warum? In diesem Programm:
es ist sehr schwierig, Gleichmäßigkeit und Symmetrie der Bilder zu erreichen;
Beim Speichern im JPG-Format kommt es zu starken Farbverzerrungen.
Es ist schwierig, Schatten und Lichter zu zeichnen.
Daher versuchen sie, Adobe Photoshop den Vorzug zu geben. Dieses Programm verfügt über viel mehr Arbeitsmöglichkeiten als Paint. Dadurch können Sie nicht einzelne Charaktere mit einfachen Designs zeichnen, sondern ganze Bilder. Darüber hinaus lässt sich die Pixelkunst selbst hier einfacher und schneller bearbeiten. Ja, und Sie können Farbübergänge in Adobe Photoshop reibungslos und natürlich übertragen.

So vermeiden Sie Knicke in der Pixelkunst

Pixelkunst ist eine Sammlung von Pixeln, die quadratische oder rechteckige „Punkte“ sind. Wenn ein Bild von solchen „Punkten“ gezeichnet wird, wird es kantig und die Glätte der Linien verschwindet. Einerseits ist dies die Visitenkarte von Pixel Art, andererseits möchte ich mehr Glätte, damit das Bild für den Benutzer ordentlich und attraktiv wird. Dieses Problem in der Sprache der Pixelkünstler werden sie Kinks oder „Zacken“ genannt.
Jaggies sind Stücke, die allen Linien ein gezacktes Aussehen verleihen. Sie werden normalerweise von einem von ihnen entsorgt folgende Methoden:
Erhöhen Sie die Länge des Streuliniensegments um 2, 3 oder mehr Pixel.
Reduzieren Sie die Länge der Pixel selbst im markanten Bereich.
Konstruieren Sie einen neuen Linienabschnitt aus mehreren einzelnen Pixeln.
Fügen Sie dem Bereich einzelne Pixel hinzu, mit einer Pause zwischen längeren „Punkten“ usw.
Um Knicke richtig zu beseitigen, müssen Sie sich an die Hauptregel erinnern: Die Länge der Elemente einer gekrümmten Linie sollte allmählich abnehmen oder zunehmen. Sie müssen auch bedenken, dass die Verschiebung eines Liniensegments um zwei oder mehr Pixel in der Höhe zur Zerstörung der Glätte führt.
Daher ist ständige Zeichenpraxis erforderlich. Und als einfachste und Sehhilfe Um Knicke zu vermeiden, können Sie eine Reihe geneigter gerader Linien verwenden.

So erhalten Sie Schatten in Pixel Art

Ein anderer wichtiger Punkt In der Pixelkunst ist dies ihr Volumen. Dies wird wie bei anderen Grafikoptionen durch Glanzlichter und Schatten erreicht. Um in der Pixelkunst einen Schatten zu erzeugen, benötigen Sie einen fließenden Übergang vom hellen zum dunklen Ton oder von einer Farbe zur anderen. Um diesen Effekt zu erzielen, wird häufig die Mischtechnik eingesetzt – das Dithering. Mit anderen Worten: An der Grenze zweier Farben werden diese schachbrettartig gemischt. Diese Methode entstand vor dem Hintergrund eines Blumenmangels. Durch das Mischen zweier Farben in einem Schachbrettmuster war es möglich, eine dritte zu erhalten, die nicht in der Palette enthalten war.
Nachdem sich die Palette jedoch erheblich erweitert hatte, blieb die Dithering-Technologie weiterhin gefragt. Sie müssen jedoch bedenken, dass ein ein Pixel breiter Übergang von einer Farbe zur anderen nicht gut aussieht. Es stellt sich heraus, dass es nur ein Kamm ist. Deshalb
Die minimale Mischzone muss mindestens zwei Pixel betragen. Und je breiter dieser Übergang ist, desto besser.
Außerdem beim Erstellen eines Schattens:
Es ist wichtig zu bestimmen, in welchem Winkel und von welcher Seite das Licht auf das Objekt fällt. Dadurch wird die Zeichnung „lebendig“ und Sie können besser verstehen, wo Sie den Schatten zeichnen müssen. Kommt das Licht beispielsweise von rechts, liegen die Schattenbereiche links usw.;
Sie müssen Farben verwenden, die viel dunkler sind als die Grundfarben. Diese. Der Schatten sollte mit Farben dargestellt werden, die dunkler sind als der schattierte Bereich selbst. Wenn das Objekt beispielsweise rot ist, ist sein Schatten burgunderrot oder dunkelbraun;
Vergessen Sie nicht den Halbschatten. Dazu wird ein Farbton ausgewählt, der zwischen der Grundfarbe und der Schattenfarbe in der Palette liegt. Dieser Farbton zwischen Schichten dieser beiden Farben platziert. Dadurch entsteht der Effekt eines sanften Übergangs von einem dunklen Bereich zu einem helleren Bereich.

So erzielen Sie Highlights in der Pixelkunst

Ein Glanzlicht verleiht den gezeichneten Objekten, ähnlich wie ein Schatten, Volumen. Es befindet sich immer auf der Seite, auf die das Licht fällt. Wenn das Objekt jedoch eine glänzende Oberfläche haben soll, beispielsweise eine Porzellantasse, ein Stahlschwert usw., ist auch ein Highlight in einem schattigen Bereich erforderlich.
Um den Bereich, in den das Licht fällt, hervorzuheben, müssen Sie eine Farbe verwenden, die viel heller ist als die Hauptfarbe. Achten Sie nur nicht auf die Helligkeit dieses Ortes – es kann sein, dass er nicht natürlich wirkt. Sehr oft wird ein Highlight in Weiß ohne Übergänge dargestellt. Dies kommt in der Natur nicht vor. Und das Objekt wird flach aussehen.
Um ein Highlight von der Seite des Schattens zu erzeugen, benötigen Sie eine Farbe, die heller ist als die, mit der der Schatten selbst aufgetragen wird. Und auch in diesem Fall ist ein sanfter Übergang notwendig, der durch die gleichzeitige Verwendung mehrerer Farbtöne erreicht werden kann.
Um das alles zu realisieren, braucht es natürlich Übung. Und am besten fängt man mit einfachen Objekten an.