Adobe Photoshop: Zeichnen und animieren Sie eine Figur mithilfe der Pixel-Art-Technik. Was ist Pixelkunst? Beispiele und wie man es lernt. Erstellen Sie Pixelkunst

"itemprop="image">

In diesem 10-stufigen Tutorial zum Zeichnen von Pixelkunst zeige ich Ihnen, wie Sie ein „Sprite“ (einen einzelnen 2D-Charakter oder ein einzelnes 2D-Objekt) erstellen. Der Begriff selbst stammt natürlich aus Videospielen.

Ich habe gelernt, Pixelkunst zu erstellen, weil ich sie für die Grafik in meinem Spiel brauchte. Nach jahrelangem Training gewöhnte ich mich daran und begann zu verstehen, dass Pixelkunst mehr eine Kunst als nur ein Werkzeug ist. Heutzutage ist Pixelkunst bei Spieleentwicklern und Illustratoren sehr beliebt.

Dieses Tutorial wurde vor vielen Jahren erstellt, um Menschen einfache Pixel-Art-Konzepte zu vermitteln, wurde jedoch mehrfach erweitert, sodass es sich erheblich von der Originalversion unterscheidet. Es gibt viele Tutorials im Internet zum gleichen Thema, aber sie erscheinen mir alle zu kompliziert oder zu langwierig. Pixelkunst ist keine Wissenschaft. Beim Erstellen von Pixelgrafiken müssen Sie keine Vektoren berechnen.

Werkzeug

Einer der Hauptvorteile der Erstellung von Pixelkunst besteht darin, dass Sie keine fortgeschrittenen Tools benötigen – der standardmäßig auf Ihrem Computer installierte Grafikeditor sollte ausreichen. Erwähnenswert ist, dass es Programme gibt, die speziell für die Erstellung von Pixelkunst entwickelt wurden, wie zum Beispiel Pro Motion oder Pixen (für Mac-Benutzer). Ich habe sie nicht selbst getestet, aber ich habe viel gehört positives Feedback. In diesem Tutorial verwende ich Photoshop, das zwar viel kostet, aber viele nützliche Werkzeuge zum Erstellen von Kunstwerken enthält, von denen einige sehr nützlich für die Pixelierung sind.

So zeichnen Sie Pixelkunst in Photoshop

Bei der Verwendung von Photoshop ist das Bleistift-Werkzeug (B-Taste) Ihre Hauptwaffe, eine Alternative zum Pinsel-Werkzeug. Mit dem Bleistift können Sie einzelne Pixel einfärben, ohne Farben zu überdrucken.

Zwei weitere Werkzeuge sind praktisch: die Auswahl (M-Taste) und der Zauberstab (W-Taste), um auszuwählen und zu ziehen oder zu kopieren und einzufügen. Denken Sie daran, dass Sie die ausgewählten Objekte hinzufügen oder aus der aktuellen Auswahlliste ausschließen können, indem Sie beim Treffen der Auswahl die Alt- oder Umschalttaste gedrückt halten. Dies ist übrigens notwendig, wenn Sie unebene Objekte auswählen müssen.

Sie können zum Übertragen von Farben auch eine Pipette verwenden. Es gibt tausend Gründe, warum es wichtig ist, die Farben in der Pixelkunst beizubehalten. Sie müssen also ein paar Farben nehmen und sie immer wieder verwenden.

Stellen Sie abschließend sicher, dass Sie sich alle Hotkeys merken, da Sie dadurch viel Zeit sparen können. Beachten Sie das „X“, das zwischen Primär- und Sekundärfarben umschaltet.

Linien

Pixel sind die gleichen kleinen farbigen Quadrate. Zuerst müssen Sie herausfinden, wie Sie diese Quadrate effektiv anordnen, um die gewünschte Linie zu erstellen. Wir werden uns die beiden häufigsten Arten von Linien ansehen: gerade und gebogene.

gerade Linien

Ich weiß, was Sie gedacht haben: Hier ist alles so einfach, dass es keinen Sinn macht, sich in etwas zu vertiefen. Aber wenn es um Pixel geht, können selbst gerade Linien ein Problem sein. Wir müssen gezackte Teile vermeiden – kleine Fragmente der Linie, die sie gezackt aussehen lassen. Sie erscheinen, wenn einer der Teile der Linie größer oder kleiner ist als die anderen, die ihn umgeben.

Geschwungene Linien

Beim Zeichnen geschwungener Linien müssen Sie darauf achten, dass der Abfall oder Anstieg über die gesamte Länge gleichmäßig ist. IN dieses Beispiel, die saubere Linie hat Intervalle 6 > 3 > 2 > 1, aber die Linie mit Intervallen 3 > 1< 3 выглядит зазубренной.

Die Fähigkeit, Linien zu zeichnen, ist ein Schlüsselelement der Pixelkunst. Etwas weiter erzähle ich Ihnen etwas über Anti-Aliasing.

Konzeptualisierung

Um zu beginnen, benötigen Sie gute Idee! Versuchen Sie, sich in Pixelkunst vorzustellen, was Sie tun werden – auf Papier oder einfach in Ihrem Kopf. Wenn Sie eine Vorstellung von der Zeichnung haben, können Sie sich auf die Pixelierung selbst konzentrieren.

Themen zum Nachdenken

• Wofür wird dieses Sprite verwendet? Ist es für die Website oder für das Spiel? Wird es notwendig sein, es später animiert zu machen? Wenn ja, muss es kleiner und weniger detailliert gestaltet werden. Umgekehrt können Sie, wenn Sie in Zukunft nicht mehr mit dem Sprite arbeiten, so viele Details anhängen, wie Sie benötigen. Entscheiden Sie daher im Voraus, wofür genau dieses Sprite benötigt wird, und wählen Sie die optimalen Parameter aus.
• Welche Einschränkungen gibt es? Ich habe bereits erwähnt, wie wichtig es ist, Farben zu erhalten. Hauptgrund ist die begrenzte Farbpalette aufgrund von Systemanforderungen (was in unserer Zeit äußerst unwahrscheinlich ist) oder aus Kompatibilitätsgründen. Oder aus Präzisionsgründen, wenn Sie einen bestimmten Stil von C64, NES usw. emulieren. Es lohnt sich auch, die Abmessungen Ihres Sprites zu berücksichtigen und zu prüfen, ob es sich zu sehr vom Hintergrund der erforderlichen Objekte abhebt.

Lass es uns versuchen!

In diesem Tutorial gibt es keine Einschränkungen, aber ich wollte sicherstellen, dass meine Pixelkunst groß genug ist, damit Sie im Detail sehen können, was in den einzelnen Schritten passiert. Zu diesem Zweck habe ich mich entschieden, Lucha Lawyer, eine Figur aus der Welt des Wrestlings, als Vorbild zu nehmen. Er würde perfekt in ein Kampfspiel oder einen dynamischen Actionfilm passen.

Schaltkreis

Der schwarze Umriss ist eine gute Basis für Ihr Sprite, also fangen wir hier an. Wir haben uns für Schwarz entschieden, weil es gut aussieht, aber auch etwas düster ist. Später im Tutorial zeige ich Ihnen, wie Sie die Farbe des Umrisses ändern, um den Realismus zu erhöhen.

Es gibt zwei Ansätze zum Erstellen einer Gliederung. Sie können den Pfad freihändig zeichnen und ihn dann ein wenig optimieren oder alles Pixel für Pixel zeichnen. Ja, Sie haben richtig verstanden, wir sprechen von tausend Klicks.

Die Wahl der Methode hängt von der Größe des Sprites und Ihren Pixelfähigkeiten ab. Wenn das Sprite wirklich riesig ist, wäre es logischer, es zum Erstellen von Hand zu zeichnen ungefähre Form und dann aufrichten. Glauben Sie mir, es geht viel schneller, als sofort zu versuchen, die perfekte Skizze zu zeichnen.

In meinem Tutorial erstelle ich ein ziemlich großes Sprite, daher wird hier die erste Methode gezeigt. Es wird einfacher, wenn ich alles visuell zeige und erkläre, was passiert ist.

Schritt eins: Grobe Gliederung

Zeichnen Sie mit Ihrer Maus oder Ihrem Tablet einen groben Umriss für Ihr Sprite. Stellen Sie sicher, dass es NICHT ZU roh ist, d. h. es sieht in etwa so aus, wie Sie Ihr Endprodukt sehen.

Meine Skizze stimmte fast vollständig mit dem überein, was ich geplant hatte.

Schritt zwei: Polieren Sie die Kontur

Beginnen Sie mit der 6- oder 8-fachen Vergrößerung des Bildes. Sie müssen jedes Pixel deutlich sehen. Und dann bereinigen Sie die Gliederung. Achten Sie insbesondere auf die „Streupixel“ (der gesamte Umriss sollte nicht dicker als ein Pixel sein), entfernen Sie die gezackten Kanten und fügen Sie die kleinen Details hinzu, die wir im ersten Schritt übersehen haben.

Selbst große Sprites überschreiten selten die Größe von 200 x 200 Pixeln. Der Ausdruck „mit weniger mehr erreichen“ ist eine gute Möglichkeit, den Pixelierungsprozess zu beschreiben. Sie werden schnell sehen, dass auch nur ein Pixel zählt.

Vereinfachen Sie Ihre Gliederung so weit wie möglich. Wir werden uns später mit den Details befassen, jetzt müssen Sie daran arbeiten, große Pixel zu finden, wie zum Beispiel die Muskelsegmentierung. Im Moment sieht es nicht besonders gut aus, aber haben Sie etwas Geduld.

Farbe

Wenn der Umriss fertig ist, erhalten wir eine Art Kolorierung, die mit Farben gefüllt werden muss. Mal-, Spachtel- und andere Werkzeuge helfen uns dabei. Die Abstimmung von Farben kann schwierig sein, aber die Farbtheorie ist eindeutig nicht das Thema dieses Artikels. Wie dem auch sei, es gibt ein paar grundlegende Konzepte, die Sie kennen müssen.

HSB-Farbmodell

Das Englische Abkürzung, zusammengesetzt aus den Worten „Farbton, Sättigung, Helligkeit“. Es ist nur eines von vielen Computer-Farbmodellen (oder numerischen Farbdarstellungen). Sie haben wahrscheinlich schon von anderen Beispielen wie RGB und CMYK gehört. Die meisten Bildbearbeitungsprogramme verwenden HSB für die Farbauswahl, daher konzentrieren wir uns darauf.

Farbton Farbton ist das, was wir früher Farbe nannten.

Sättigung– Sättigung – bestimmt die Intensität der Farbe. Wenn der Wert 100 % beträgt, ist dies die maximale Helligkeit. Wenn Sie es absenken, erscheint die Farbe matt und sie wird „grau“.

Helligkeit- Licht, das Farbe aussendet. Für Schwarz beträgt dieser Indikator beispielsweise 0 %.

Farben auswählen

Welche Farben Sie wählen, liegt ganz bei Ihnen, es gibt jedoch ein paar Dinge, die Sie beachten sollten:

• Sanfte und entsättigte Farben wirken realistischer als cartoonhaft.
• Denken Sie an den Farbkreis: Je weiter zwei Farben darin liegen, desto schlechter vermischen sie sich. Gleichzeitig sehen Rot und Orange, die nahe beieinander liegen, zusammen großartig aus.

• Je mehr Farben Sie verwenden, desto unschärfer wird Ihre Zeichnung aussehen. Wählen Sie daher ein paar Primärfarben und verwenden Sie diese. Denken Sie daran, dass Super Mario einst ausschließlich aus Kombinationen von Braun und Rot entstand.

Blumen auftragen

Das Auftragen der Farbe ist sehr einfach. Wenn Sie Photoshop verwenden, wählen Sie einfach das gewünschte Fragment aus und wählen Sie es aus Zauberstab(W-Taste) und füllen Sie es dann mit der Primärfarbe (Alt-F) oder der Sekundärfarbe (Strg-F).

Schattierung

Schattierung ist eine davon wesentliche Teile Suche nach dem Status eines verpixelten Halbgottes. In diesem Stadium sieht das Sprite entweder besser aus oder verwandelt sich in eine seltsame Substanz. Befolgen Sie meine Anweisungen und Sie werden auf jeden Fall Erfolg haben.

Schritt eins: Wählen Sie eine Lichtquelle

Zuerst wählen wir eine Lichtquelle. Wenn Ihr Sprite Teil eines größeren Fragments ist, das über eigene Lichter wie Lampen, Taschenlampen usw. verfügt. Und alle können das Aussehen des Sprites auf unterschiedliche Weise beeinflussen. Allerdings ist die Wahl einer entfernten Lichtquelle wie der Sonne für die meisten Pixelkunstwerke eine gute Idee. Für Spiele müssen Sie beispielsweise ein möglichst helles Sprite erstellen, das dann an die Umgebung angepasst werden kann.

Normalerweise entscheide ich mich für ein entferntes Licht irgendwo vor dem Sprite, sodass nur die Vorder- und Oberseite des Sprites beleuchtet wird und der Rest im Schatten liegt.

Schritt zwei: Direktes Schattieren

Sobald wir eine Lichtquelle ausgewählt haben, können wir damit beginnen, die am weitesten davon entfernten Bereiche abzudunkeln. Unser Beleuchtungsmodell schlägt vor, dass der untere Teil des Kopfes, der Arme, Beine usw. mit einem Schatten bedeckt werden sollte.

Denken Sie daran, dass flache Dinge keinen Schatten werfen können. Nehmen Sie ein Blatt Papier, zerknüllen Sie es und rollen Sie es über den Tisch. Woher wissen Sie, dass es nicht mehr flach ist? Du hast gerade die Schatten um ihn herum gesehen. Verwenden Sie Schattierungen, um Falten in Kleidung, Muskeln, Fell, Hautfarbe usw. hervorzuheben.

Schritt drei: weiche Schatten

Der zweite Farbton, der heller als der erste ist, sollte verwendet werden, um weiche Schatten zu erzeugen. Dies ist für Bereiche erforderlich, die nicht direkt beleuchtet werden. Sie können auch zum Übergang von hell nach dunkel und auf unebenen Oberflächen verwendet werden.

Schritt vier: beleuchtete Orte

Auch Orte, die direkte Lichteinstrahlung erhalten, müssen hervorgehoben werden. Es ist zu beachten, dass es weniger Glanzlichter als Schatten geben sollte, da sie sonst unnötige Aufmerksamkeit erregen, also hervorstechen.

Ersparen Sie sich Kopfschmerzen, indem Sie sich an eine einfache Regel erinnern: Zuerst die Schatten, dann die Lichter. Der Grund ist einfach: Wenn keine Schatten vorhanden sind, werden zu große Fragmente freigelegt, und wenn Sie die Schatten anwenden, müssen diese reduziert werden.

Einige nützliche Regeln

Für Anfänger ist das Schattieren immer schwierig, deshalb hier ein paar Regeln, die Sie beim Schattieren beachten müssen.

1. Verwenden Sie keine Farbverläufe. Der häufigste Anfängerfehler. Die Farbverläufe sehen schrecklich aus und geben nicht einmal annähernd das Lichtspiel auf Oberflächen wieder.
2. Verwenden Sie keine „weiche Schattierung“. Ich spreche von einer Situation, in der der Schatten zu weit von der Kontur entfernt ist, weil er dann sehr verschwommen aussieht und die Lichtquelle nicht sichtbar ist.
3. Verwenden Sie nicht zu viele Schatten. Man könnte leicht denken: „Je mehr Farben, desto realistischer das Bild.“ Wie dem auch sei, in wahres Leben Wir sind es gewohnt, Dinge in dunklen oder hellen Spektren zu sehen, und unser Gehirn filtert alles dazwischen heraus. Verwenden Sie nur zwei dunkle Farben (dunkel und sehr dunkel) und zwei helle Farben (hell und sehr hell) und schichten Sie diese auf die Grundfarbe, nicht übereinander.
4. Verwenden Sie keine zu ähnlichen Farben. Es besteht eigentlich keine Notwendigkeit, nahezu identische Farben zu verwenden, außer wenn Sie ein wirklich verschwommenes Sprite erstellen möchten.

Zittern

Der Erhalt der Farben ist das, worauf Pixel-Art-Ersteller wirklich achten müssen. Eine andere Möglichkeit, mehr Schatten zu erzeugen, ohne mehr Farben zu verwenden, ist das „Dithering“. Genau wie in traditionelle Malerei„Schraffur“ und „Kreuzschraffur“ werden verwendet, das heißt, Sie, in buchstäblich, erhalten Sie etwas zwischen den beiden Farben.

Einfaches Beispiel

Hier ist ein einfaches Beispiel dafür, wie zwei Farben gedithert werden können, um vier Schattierungsoptionen zu erstellen.

Erweitertes Beispiel

Vergleichen Sie das Bild oben (erstellt mit einem Farbverlauf in Photoshop) mit dem Bild, das mithilfe von Dithering mit nur drei Farben erstellt wurde. Bitte beachten Sie, dass durch unterschiedliche Muster „angrenzende Farben“ entstehen können. Es wird Ihnen leichter fallen, das Prinzip zu verstehen, wenn Sie selbst mehrere Muster erstellen.

Anwendung

Dithering kann Ihrem Sprite einen schönen Retro-Look verleihen, da viele der frühen Videospiele diese Technik aufgrund der geringen Anzahl verfügbarer Farbpaletten häufig nutzten (wenn Sie viele Beispiele für Dithering sehen möchten, schauen Sie sich die dafür entwickelten Spiele an die Sega Genesis). Ich verwende diese Methode selbst nicht sehr oft, aber zu Bildungszwecken zeige ich Ihnen, wie sie auf unser Sprite angewendet werden kann.

Sie können Dither nach Herzenslust verwenden, aber es ist erwähnenswert, dass nur wenige Leute es tatsächlich erfolgreich einsetzen.

Selektive Konturierung

Die selektive Konturierung, auch Selout (vom englischen selected outlining) genannt, ist eine Unterart der Konturschattierung. Anstatt eine schwarze Linie zu verwenden, wählen wir eine Farbe, die auf Ihrem Sprite harmonischer aussieht. Wir ändern auch die Helligkeit dieses Pfads zu den Rändern des Sprites hin, sodass die Farbquelle bestimmen kann, welche Farben wir verwenden sollen.

Bisher haben wir einen schwarzen Umriss verwendet. Daran ist nichts auszusetzen: Schwarz sieht großartig aus und ermöglicht es Ihnen außerdem, das Sprite qualitativ vom Hintergrund der umgebenden Objekte zu unterscheiden. Aber durch die Verwendung dieser Methode opfern wir einen Teil des Realismus, den wir in manchen Fällen benötigen könnten, da unser Sprite weiterhin cartoonhaft aussieht. Durch selektives Konturieren können Sie dies beseitigen.

Sie werden feststellen, dass ich ein Seult verwendet habe, um seine Muskeln zu lockern. Schließlich sieht unser Sprite wie ein Ganzes aus und nicht wie eine große Anzahl einzelner Fragmente.

Vergleichen Sie dies mit dem Original:

1. Glätten

Das Prinzip des Anti-Aliasing ist einfach: Den Knicken werden Zwischenfarben hinzugefügt, damit sie glatter aussehen. Wenn Sie beispielsweise eine schwarze Linie auf weißem Hintergrund haben, werden an den Knicken entlang der Kante kleine graue Pixel hinzugefügt.

Technik 1: Kurven glätten

Im Allgemeinen müssen Sie bei Unterbrechungen Zwischenfarben hinzufügen, da die Linie sonst gezackt aussieht. Wenn es immer noch uneben aussieht, fügen Sie eine weitere Schicht mit helleren Pixeln hinzu. Die Auftragsrichtung der Zwischenschicht muss mit der Kurvenrichtung übereinstimmen.

Ich glaube nicht, dass ich es besser erklären kann, ohne es zu komplizieren. Schauen Sie sich einfach das Bild an und Sie werden verstehen, was ich meine.

Technik 2: Unebenheiten abrunden

Technik 3: Zeilenenden überschreiben

Anwendung

Wenden wir nun Anti-Aliasing auf unseren Ausdruck an. Beachten Sie, dass Sie die Außenseite der Linie nicht glätten sollten, damit Ihr Sprite vor jeder Hintergrundfarbe gut aussieht. Andernfalls wird Ihr Sprite am Übergang zum Hintergrund von einem sehr unpassenden Heiligenschein umgeben und hebt sich daher zu deutlich von jedem Hintergrund ab.

Der Effekt ist sehr subtil, aber von großer Bedeutung.

Warum müssen Sie es manuell tun?

Sie fragen sich vielleicht: „Warum wenden Sie nicht einfach einen Grafikeditorfilter auf unser Sprite an, wenn es glatt aussehen soll?“ Die Antwort ist auch einfach: Kein Filter macht Ihr Sprite so scharf und sauber wie handgefertigt. Sie haben nicht nur die volle Kontrolle über die verwendeten Farben, sondern auch darüber, wo Sie sie verwenden. Darüber hinaus wissen Sie besser als jeder andere Filter, wo Anti-Aliasing angebracht ist und wo es Bereiche gibt, in denen Pixel einfach ihre Qualität verlieren.

Abschluss

Wow, wir stehen kurz davor, Ihren Computer herunterzufahren und ein kühles Bier aus dem Kühlschrank zu holen. Aber er ist noch nicht angekommen! Im letzten Teil geht es darum, was den energiegeladenen Amateur vom erfahrenen Profi unterscheidet.

Machen Sie einen Schritt zurück und schauen Sie sich Ihr Sprite genau an. Es besteht die Möglichkeit, dass er immer noch „roh“ aussieht. Nehmen Sie sich etwas Zeit, um sich zu verbessern und sicherzustellen, dass alles perfekt ist. Egal wie müde Sie sind, der größte Spaß liegt vor Ihnen. Fügen Sie Details hinzu, um Ihr Sprite interessanter aussehen zu lassen. Hier kommen Ihre Pixelfähigkeiten und Ihre Erfahrung ins Spiel.

Sie werden vielleicht überrascht sein, dass unser Lucha-Anwalt die ganze Zeit über keine Augen hatte oder dass das Paket, das er in der Hand hält, leer ist. Eigentlich liegt der Grund darin, dass ich mit kleinen Details warten wollte. Beachten Sie auch den Besatz, den ich an seinen Armbändern angebracht habe, den Hosenschlitz an seiner Hose ... nun, was wäre ein Mann ohne seine Brustwarzen? Außerdem habe ich den unteren Teil seines Oberkörpers etwas abgedunkelt, damit der Arm stärker vom Hintergrund des Körpers hervorsteht.

Endlich sind Sie fertig! Lucha Lawyer konkurriert in der Kategorie „Leichtgewicht“, da es nur 45 Farben hat (je nach Palettenbeschränkungen ist es möglicherweise ein Schwergewicht) und seine Auflösung etwa 150 x 115 Pixel beträgt. Jetzt können Sie das Bier öffnen!

Gesamter Fortschritt:

Es ist immer lustig. Hier ist ein GIF, das die Entwicklung unseres Sprites zeigt.

1. Erlernen Sie die Grundlagen der Kunst und Praxis traditionelle Techniken. Alle zum Zeichnen und Zeichnen notwendigen Kenntnisse und Fähigkeiten können beim Pixeln angewendet werden.
2. Beginnen Sie mit kleinen Sprites. Der schwierigste Teil besteht darin, zu lernen, wie man viele Details mit so wenigen Pixeln wie möglich platziert, ohne Sprites zu machen, die so groß sind wie meine.
3. Studieren Sie die Werke von Künstlern, die Sie bewundern, und haben Sie keine Angst davor, unoriginell zu sein. Der beste Weg Lernen – Wiederholung von Fragmenten der Arbeit anderer Leute. Für die Produktion eigener Stil Beansprucht viel Zeit.
4. Wenn Sie kein Tablet haben, kaufen Sie eines. Dauerhaft Nervenzusammenbrüche Und der Stress, ständig mit der linken Maustaste zu klicken, macht weder Spaß, noch wird er Angehörige des anderen Geschlechts beeindrucken. Ich verwende einen kleinen Wacom Graphire2 – ich mag seine Kompaktheit und Tragbarkeit. Vielleicht möchten Sie ein größeres Tablet. Machen Sie vor dem Kauf eine kleine Probefahrt.
5. Teilen Sie Ihre Arbeit mit anderen, um deren Meinung einzuholen. Dies könnte auch eine gute Möglichkeit sein, neue Geek-Freunde zu finden.

P.S.

Der Originalartikel befindet sich. Wenn Sie Links zu coolen Tutorials haben, die übersetzt werden müssen, senden Sie sie an unseren Partyraum. Oder schreiben Sie direkt an die Nachrichten der Gruppe

In diesem Tutorial erfahren Sie, wie Sie ein Foto einer Person in Pixelkunst umwandeln erfundener Charakter Arcade-Spiel aus den frühen 90ern.
James May – auch bekannt als Smudgethis – entwarf diesen Stil im Jahr 2011 für Musik-Video für einen Dubstep-Rock-Act. Neros erster Hit, Me & You – für den er die Animation erstellte altes Spiel mit Neros zwei Mitgliedern. Das Spiel war ein rhythmisches 2D-Plattformspiel 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 blockartig, aber komplexer als in älteren Spielen sein. Und dabei müssen Sie eine begrenzte Farbpalette verwenden, um dies zu erreichen 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.
Wie beim Animationsleitfaden benötigen Sie auch ein Foto der Person. James hat für dieses Tutorial das Foto eines Punks verwendet, das in den Projektdateien enthalten ist.
Wenn Sie fertig sind, schauen Sie sich dieses 16-Bit-Animations-Tutorial zu After Effects an, in dem James Ihnen zeigt, wie Sie diesen Charakter in AE aufnehmen, animieren und Retro-Spieleffekte anwenden.

Schritt 1

Öffnen Sie die Animationsanleitung (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, die Farbpaletten und Stile für Ihre 16-Bit-Form zu finden.
Die Animationsanleitung enthält mehrere Posen auf separaten 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 (16bit).psd ein.
Skalieren Sie das Bild proportional, sodass es passt. Sie werden feststellen, dass das Bild aufgrund der sehr kleinen PSD-Abmessungen sofort beginnt, ein Pixel zu zeichnen.

Schritt 3

Erstellen Sie eine neue Ebene und zeichnen Sie mit einem schwarzen 1-Pixel-Stift (B) einen Umriss. 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-Artwork-Charaktere.

Schritt 4

Probieren Sie mit der Pipette (I) den dunkelsten Hauttonbereich im Foto aus und erstellen Sie ein kleines Farbquadrat. Wiederholen Sie dies noch dreimal, um eine Hauttonpalette mit vier Hauttönen zu erstellen.
Erstellen Sie eine weitere Ebene unter der Umrissebene und schattieren Sie das Bild mit einem 1-Pixel-Pinsel und einer 4-Farben-Farbpalette (verwenden Sie wiederum das Foto als Richtlinie). \ P
Am besten behalten Sie alle Elemente Ihres Kunstwerks oder verschiedene Ebenen bei, da Sie sie so einfacher für andere Formen wiederverwenden können. Dies ist besonders für „Bösewichte“ nützlich, da die meisten 16-Bit-Spiele sehr viel verwenden ähnliche Figuren. Beispielsweise könnte ein Kumpel ein rotes Hemd und ein Messer haben, während ein späterer Kumpel bis auf das blaue Hemd und die 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. Denken Sie daran, mit dem Pipettenwerkzeug weiter zu sampeln, um zunächst die Farbpaletten zu erstellen, da dies einen konsistenten Farbsatz liefert, 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 Sonnenbrillen, Tätowierungen, einem Ohrring usw. zu verbessern. Essen Sie hier zu Abend und überlegen Sie, wie Ihr Charakter in der Spielumgebung erscheinen soll. Vielleicht können sie eine Axt benutzen oder einen Roboterarm haben?

Schritt 7

Um Ihren Charakter zum Leben zu erwecken, 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 die Reihenfolge stimmt 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 der schnelle Weg 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 aus und klicken Sie auf das Papierkorbsymbol im Panel (unten), um ihn zu löschen.


Teil 6: Glätten
Teil 7: Texturen und Unschärfe
Teil 8: Welt der Fliesen

Vorwort

Es gibt viele Definitionen von Pixelkunst, aber hier verwenden wir diese: ein Pixelkunstbild, wenn es vollständig handgefertigt ist und die Farbe und Position jedes gezeichneten Pixels kontrolliert werden kann. Zweifellos werden in der Pixelkunst die Einbeziehung oder Verwendung von Pinseln oder Unschärfewerkzeugen oder Degradationsmaschinen (degradierte Maschinen, nicht sicher) und andere Softwareoptionen, die „modern“ sind, von uns nicht verwendet (wird tatsächlich zur Verfügung gestellt bedeutet „zu unserer Verfügung“) Entsorgung“ , aber logischerweise scheint es so korrekter zu sein). Es ist auf Werkzeuge wie „Bleistift“ und „Füllen“ beschränkt.

Allerdings kann man nicht sagen, dass Pixel-Art- oder Nicht-Pixel-Art-Grafiken mehr oder weniger schön sind. Man kann mit Recht sagen, dass Pixelkunst anders ist und sich besser für Retro-Spiele (wie Super Nintendo oder Game Boy) eignet. Sie können die hier erlernten Techniken auch mit Nicht-Pixel-Art-Effekten kombinieren, um einen Hybridstil zu erstellen.

Hier lernen Sie den technischen Teil der Pixelkunst kennen. Allerdings werde ich dich niemals zum Künstler machen ... aus dem einfachen Grund, weil ich auch kein Künstler bin. Ich werde Ihnen nicht die menschliche Anatomie oder die Struktur der Künste beibringen, und ich werde nicht viel über die Perspektive sagen. In diesem Leitfaden finden Sie viele Informationen zu Pixel-Art-Techniken. Am Ende müssen Sie in der Lage sein, Charaktere und Kulissen für Ihre Spiele zu erstellen, solange Sie aufmerksam sind, regelmäßig üben und diese Tipps anwenden.

- Ich möchte auch darauf hinweisen, dass nur einige der in diesem Leitfaden verwendeten Bilder vergrößert sind. Bei Bildern, die nicht vergrößert sind, wäre es gut, wenn Sie sich die Zeit nehmen, diese Bilder zu kopieren, damit Sie sie im Detail studieren können. Pixelkunst ist die Essenz von Pixeln, es ist sinnlos, sie aus der Ferne zu studieren.

Abschließend muss ich mich bei allen Künstlern bedanken, die mich auf die eine oder andere Weise bei der Erstellung dieses Leitfadens unterstützt haben: Shin für seine schmutzigen Arbeiten und Strichzeichnungen, Xenohydrogen für sein Farbgenie, Lunn für sein Wissen über Perspektive und Panda, dem strengen Ahruon, Dayo und Kryon für ihre großzügigen Beiträge zur Illustration dieser Seiten.

Kommen wir also zurück zur Sache.

Teil 1: Die richtigen Werkzeuge

Schlechte Nachrichten: Sie werden in diesem Teil kein einziges Pixel zeichnen! (Und das ist kein Grund, es zu überspringen, oder?) Wenn es ein Sprichwort gibt, das ich nicht ertragen kann, dann ist es „Es gibt keine schlechten Werkzeuge, nur schlechte Arbeiter.“ Tatsächlich dachte ich, dass nichts weiter von der Wahrheit entfernt sein könnte (außer vielleicht „Was dich nicht umbringt, macht dich stärker“) und Pixelkunst, ein sehr guter Beweis. Dieser Leitfaden soll Sie mit den verschiedenen Softwareprogrammen vertraut machen, die zum Erstellen von Pixelkunst verwendet werden, und Ihnen bei der Auswahl der richtigen Software helfen.

1.Einige alte Sachen

Bei der Auswahl einer Software zum Erstellen von Pixelkunst denken die Leute oft: „Wahl der Software? Das ist Wahnsinn! Alles, was wir brauchen, um Pixelkunst zu schaffen, ist Farbe! (anscheinend ein Wortspiel, eine Zeichnung und ein Programm)“ tragischer Fehler A: Ich habe über schlechte Werkzeuge gesprochen, das ist das erste. Paint hat einen Vorteil (und nur einen): Sie haben es bereits, wenn Sie Windows verwenden. Andererseits hat er viele Mängel. Dies ist eine (unvollständige) Liste:

* Sie können nicht mehr als eine Datei gleichzeitig öffnen
* Keine Palettenverwaltung.
* Keine Ebenen oder Transparenz
* Keine nicht rechteckigen Auswahlmöglichkeiten
* Wenige Hotkeys
* Furchtbar unangenehm

Kurz gesagt, Sie können Paint vergessen. Jetzt werden wir die echte Software sehen.

2. Am Ende...

Die Leute denken dann: „Okay, Paint ist zu eingeschränkt für mich, also verwende ich meinen Freund Photoshop (oder Gimp oder PaintShopPro, das ist dasselbe), das tausende Möglichkeiten bietet.“ Das kann gut oder schlecht sein: Wenn Sie eines dieser Programme bereits kennen, können Sie Pixel-Art erstellen (alle Optionen für automatisches Anti-Aliasing deaktivieren und viele der erweiterten Funktionen deaktivieren). Wenn Sie diese Programme noch nicht kennen, werden Sie viel Zeit damit verbringen, sie zu erlernen, auch wenn Sie nicht alle Funktionen benötigen, was Zeitverschwendung wäre. Kurz gesagt, wenn Sie sie bereits verwenden lange Zeit, können Sie Pixelkunst erstellen (ich persönlich verwende Photoshop aus Gewohnheit), aber ansonsten ist es viel besser, Programme zu verwenden, die auf Pixelkunst spezialisiert sind. Ja, es gibt sie.

3. Sahne

Es gibt viel mehr Pixel-Art-Programme, als man denkt, aber hier betrachten wir nur die besten. Sie haben alle sehr ähnliche Eigenschaften (Palettensteuerung, Vorschau sich wiederholender Kacheln, Transparenz, Ebenen usw.). Unterschiede gibt es in der Bequemlichkeit ... und im Preis.

Charamaker 1999- gutes Programm, aber der Vertrieb scheint auf Eis zu liegen.

Graphics Gale macht viel mehr Spaß und ist benutzerfreundlicher, und der Preis liegt bei etwa 20 US-Dollar, was nicht schlecht ist. Ich füge hinzu, dass die Testversion nicht zeitlich begrenzt ist und genügend Sets enthält, um genug zu tun gute Grafik. Nur funktioniert es nicht mit .gif, was kein großes Problem darstellt, da .png sowieso besser ist.

Die von Pixelkünstlern am häufigsten verwendete Software ist ProMotion, die (deutlich) bequemer und schneller als Graphics Gale ist. Und ja, sie ist kostbar! Sie können kaufen Vollversion für einen bescheidenen Betrag … 50 Euro (78 $).
Vergessen wir nicht unsere Mac-Freunde! Pixen ist ein gutes Programm für den Macintosh und es ist kostenlos. Mehr kann ich dir leider nicht sagen, da ich keinen Mac habe. Anmerkung des Übersetzers (Französisch): Linux-Benutzer (und andere) sollten , und GrafX2 ausprobieren. Ich empfehle Ihnen dringend, sie alle in Demoversionen auszuprobieren und herauszufinden, welche für Sie am besten geeignet ist. Letztendlich ist es Geschmackssache. Bedenken Sie jedoch, dass es sehr schwierig sein kann, zu einem anderen Programm zu wechseln, sobald Sie mit der Verwendung eines Programms begonnen haben.

Fortsetzung folgt…

Anmerkungen des Übersetzers vom Französischen ins Englische

Dies ist ein großartiger Leitfaden für Pixelkunst, geschrieben von Phil Razorback von LesForges.org. Vielen Dank an Phil Razorback, der OpenGameArt.org erlaubt hat, diese Anleitungen zu übersetzen und hier zu veröffentlichen. (Von einem Übersetzer ins Russische: Ich habe nicht um Erlaubnis gefragt. Wenn jemand Lust hat, kann er helfen. Ich habe nicht genug Erfahrung in der Kommunikation auf Englisch, geschweige denn auf Französisch.)

Anmerkung des Übersetzers vom Englischen ins Russische

Ich bin Programmierer, kein Künstler oder Übersetzer, ich übersetze für die Künstler meiner Freunde, aber was Gutes verloren geht, lass es hier sein.
Original auf Französisch irgendwo hier www.lesforges.org
Übersetzung vom Französischen ins Englische hier: opengameart.org/content/les-forges-pixel-art-course
Ich habe aus dem Englischen übersetzt, weil ich kein Französisch kann.
Und ja, dies ist mein erster Beitrag, daher sind Designvorschläge willkommen. Außerdem stellt sich die Frage: Sollten die restlichen Teile als separate Artikel veröffentlicht werden oder ist es besser, diesen zu aktualisieren und zu ergänzen?

Wenn Sie als Kind gerne mit Lego gespielt haben (oder auch als Erwachsener weiterhin damit spielen), werden Sie sich sicherlich für isometrische Pixelkunst interessieren. Es hängt möglicherweise von der Technologie ab und ähnelt eher einer exakten Wissenschaft als einer Illustration. Aber in einer solchen Kunst gibt es keine 3D-Perspektive, man kann die Elemente verschieben Umfeld mit maximaler Einfachheit.

Wir erstellen die Figur als logischen Bezugspunkt für die Pixelkunst, da sie dabei hilft, die Proportionen für die meisten anderen Elemente zu bestimmen, die wir wahrscheinlich erstellen werden. Allerdings müssen Sie zunächst einige Grundlagen der isometrischen Pixelkunst erlernen und dann mit der Charaktererstellung fortfahren; Wenn Sie nicht die Grundlagen erlernen und einen Würfel zeichnen möchten, fahren Sie mit Schritt 3 fort. Jetzt können wir beginnen.

1. Pixellinien

Diese Linien bilden die Grundlage für den gebräuchlichsten (und interessantesten) Stil der isometrischen Pixelkunst, den Stil, den wir in diesem Tutorial verwenden werden:

Sie sind pro Pixel nach unten zwei Pixel lang. Solche Linien sehen relativ weich aus und werden für quadratische Flächen verwendet:

Die am häufigsten verwendeten Linienstrukturen (wie in der Abbildung unten) funktionieren gut, aber die Zeichnung wird mit jedem Schritt eckiger und rauer:

Als Kontrast hier einige ungleichmäßig strukturierte Linien:

Sehr kantig und sieht nicht aus

Schön. Vermeiden Sie es, sie zu verwenden.

2. Bände

Unser Charakter folgt nicht genau den isometrischen Regeln, also erstellen wir zunächst einen einfachen Würfel, um die Proportionen herauszufinden.

Erstellen Sie in Photoshop ein neues Dokument mit Auflösung 400x400px.

Ich möchte über das Menü ein zusätzliches Fenster für dieselbe Datei öffnen Fenster > Anordnen > Neues Fenster/Lektionen.(Fenster > Anordnen > Neues Fenster…). Dadurch ist es möglich, in einer Steigerung zu arbeiten 600% Verfolgen Sie das Ergebnis im Zoomfenster 100% . Die Verwendung des Rasters liegt bei Ihnen, aber manchmal finde ich es eher nervig als hilfreich.

Lassen Sie uns das Dokument vergrößern und eine der Zeilen erstellen 2:1

Ich benutze es lieber 5% Grau statt Schwarz, damit ich später Schatten hinzufügen kann (Schwarz und geringe Deckkraft) und jede Farbe einzeln mit dem Zauberstab auswählen kann.

Es gibt verschiedene Möglichkeiten, eine Linie zu zeichnen:

1. Verwendung Linienwerkzeug(Linienwerkzeug) mit Modus Pixel(Pixel) deaktiviert Glätten(Anti-Alias) und Dicke 1px. Während Sie zeichnen, sollte der Neigungswinkel-Tooltip angezeigt werden 26,6°. Tatsächlich kann das Linienwerkzeug nicht als praktisch bezeichnet werden, es erzeugt gezackte Linien, wenn der Winkel nicht genau ist.

2. Sie müssen eine Auswahl erstellen 20 x 40 Pixel, dann wähle K Bleistift(Bleistiftwerkzeug) 1px und zeichnen Sie anschließend einen Punkt in die untere linke Ecke der Auswahl, während Sie die Taste gedrückt halten Schicht klicken Sie rechts obere Ecke. Photoshop erstellt automatisch eine neue Linie zwischen den beiden Punkten. Mit etwas Übung können Sie auf diese Weise glatte Linien ohne Auswahl erstellen.

3. Sie müssen zwei Pixel mit einem Bleistift zeichnen, sie auswählen und klicken Strg+Alt und ziehen Sie dann die Auswahl an eine neue Position, sodass die Pixel an den Ecken zusammenlaufen. Sie können die Auswahl auch verschieben, indem Sie die Pfeiltasten auf Ihrer Tastatur gedrückt halten alt. Eine solche Methode heißt Alt-Offset(Alt Nudge).

Hier haben wir die erste Zeile erstellt. Wählen Sie es aus und verschieben Sie es wie in Schritt 3, oder kopieren Sie es einfach und fügen Sie es ein, wobei Sie die neue Ebene nach unten verschieben. Drehen Sie anschließend die zweite Zeile horizontal durch das Menü Bearbeiten > Transformieren > Horizontal spiegeln(Bearbeiten > Transformieren > Horizontal spiegeln). Ich nutze diese Funktion so oft, dass ich sogar eine Tastenkombination dafür erstellt habe!

Nun kombinieren wir unsere Zeilen:

Drehen Sie dann erneut Alt-Offset, spiegeln Sie die Kopie vertikal und fügen Sie die beiden Hälften zusammen, um unsere Oberfläche zu vervollständigen:

Es ist Zeit, eine „dritte Dimension“ hinzuzufügen. Drücken Sie die Alt-Taste, um die quadratische Fläche zu verschieben und dorthin zu verschieben 44px runter:

Tipp: Wenn Sie beim Verschieben die Pfeiltasten gedrückt halten Schicht, die Auswahl wechselt zu 10 Pixel statt einem.

Damit der Würfel übersichtlicher aussieht, lassen Sie uns die Ecken weicher machen, indem wir die Pixel ganz links und ganz rechts aus den Quadraten entfernen. Fügen Sie anschließend vertikale Linien hinzu:

Entfernen Sie nun die unnötigen Linien am unteren Rand des Würfels. Um mit dem Färben unserer Figur zu beginnen, wählen Sie eine beliebige Farbe (vorzugsweise einen hellen Farbton) und füllen Sie das obere Quadrat damit.

Erhöhen Sie nun die Helligkeit der ausgewählten Farbe um 10% (Ich empfehle die Verwendung der HSB-Schieberegler auf dem Bedienfeld), um hellere Ecken entlang der Vorderseite unseres Farbquadrats zu zeichnen. Da wir den Würfel etwas beschnitten haben, sehen diese helleren Linien über den schwarzen Kanten hübscher aus (anstatt sie zu ersetzen), wie im Bild unten:

Jetzt müssen wir die schwarzen Ränder entfernen. Verwenden Sie den Trick aus der zweiten Strichzeichnungsmethode für den Radiergummi (der auf „Normal“ eingestellt sein sollte). Radiergummi(Radiergummi-Werkzeug)-Modus Bleistift(Bleistiftmodus), Dicke 1px).

Wählen Sie mit die Farbe des oberen Quadrats aus Pipetten(Pipette). Um dieses Werkzeug beim Zeichnen mit einem Bleistift oder einer Füllung schnell auszuwählen, drücken Sie die Taste alt. Füllen Sie mit der resultierenden Pipettenfarbe die vertikale Linie in der Mitte des Würfels aus. Reduzieren Sie anschließend die Helligkeit der Farbe um 15% und fülle die linke Seite des Würfels mit der resultierenden Farbe. Verringern Sie die Helligkeit weiter 10% für die rechte Seite:

Unser Würfel ist fertig. Beim Vergrößern sollte es sauber und relativ glatt aussehen. 100% . Wir können fortfahren.

3. Fügen Sie einen Charakter hinzu

Der Stil des Charakters kann völlig unterschiedlich sein, es steht Ihnen frei, die Proportionen oder Elemente nach Ihren Wünschen zu ändern. In der Regel mache ich einen dünnen Körper und einen etwas großen Kopf. Der schlanke Körper der Figur trägt dazu bei, dass die Linien gerade und einfach bleiben.

Es wäre logisch, mit den Augen zu beginnen. Wenn wir bei isometrischen Winkeln streng wären, sollte im Gesicht ein Auge tiefer liegen, aber im kleinen Maßstab können wir dieses Merkmal vernachlässigen, um die Gesichter der Charaktere angenehmer zu gestalten. Dadurch wird die Zeichnung trotz der Größe ordentlich.

Wir machen die Figur klein, denn nach einer Weile möchten Sie vielleicht ein Auto, ein Haus, einen ganzen Platz oder sogar eine Stadt hinzufügen. Daher sollte das Zeichen eines der kleinsten Elemente in der Abbildung sein. Auch die grafische Effizienz sollte berücksichtigt werden; Versuchen Sie, die Figur mit möglichst wenigen Pixeln (groß genug, um Gesichtszüge darzustellen) so attraktiv wie möglich zu gestalten. Außerdem lassen sich kleine Objekte viel einfacher zeichnen. Die Ausnahme ist, wenn Sie nur die Figur, ihre Emotionen oder ihre Ähnlichkeit mit jemandem zeigen möchten.

Lassen Sie uns eine neue Ebene erstellen. Die Augen benötigen nur zwei Pixel – eines für jedes Auge, mit einem leeren Pixel dazwischen. Überspringen Sie ein Pixel links von den Augen und fügen Sie eine vertikale Linie hinzu:

Fügen Sie nun eine weitere Ebene hinzu und zeichnen Sie einen horizontalen Streifen von 2 Pixeln. Dies wird der Mund sein. Verwenden Sie zum Verschieben die Pfeile auf Ihrer Tastatur. Wenn Sie die perfekte Position gefunden haben, verschieben Sie die Ebene nach unten. Machen Sie dasselbe mit dem Kinn, es sollte nur eine längere Linie sein:

Behandeln Sie die Haare und den Oberkopf und glätten Sie dann die Ecken. Sie sollten so etwas erhalten:

Lassen Sie nun ein leeres Pixel neben dem zweiten Auge, fügen Sie Koteletten hinzu (die auch dabei helfen, die Ohren der Figur zu zeichnen) und ein paar weitere Pixel darüber bis zum Haaransatz. Lassen Sie dann ein weiteres leeres Pixel übrig. Hier beginnt das Ohr und die Linie, die das Ende des Kopfes markiert. Fahren Sie fort und machen Sie die Ecken der Linien weicher:

Fügen Sie ein Pixel für die Oberseite des Ohrs hinzu und formen Sie den Kopf um, wenn Sie möchten. Köpfe werden meist bereits im Nackenbereich gezeichnet:

Zeichnen Sie eine Linie vom Kinn – das wird die Brust sein. Der Hals beginnt am Ohr, ein paar Pixel nach unten und ein paar Pixel diagonal, sodass die Schultern unseres Charakters sichtbar sind:

Fügen Sie nun an der Stelle, an der die Schultern enden, eine vertikale Linie mit einer Länge von hinzu 12 Pixel, um die Außenseite des Arms zu erstellen, und die Innenseite wird zwei Pixel weiter links sein. Verbinden Sie die Linien unten mit ein paar Pixeln, um eine Hand/Faust zu bilden (in unserem Fall gibt es keine Details, achten Sie also nicht auf dieses Element) und fügen Sie direkt über der Stelle, an der die Hand endet, eine Linie hinzu 2:1 , das als Taille dient, zeichnen Sie dann die Linie der Brust und erhalten Sie einen fertigen Oberkörper. Der andere Arm der Figur ist nicht sichtbar, sieht aber gut aus, da er vom Oberkörper bedeckt ist.

Am Ende sollten Sie etwas Ähnliches erhalten:

Natürlich können Sie jedes beliebige Seitenverhältnis verwenden; Ich zeichne lieber verschiedene Varianten Seite an Seite, bevor Sie entscheiden, welches das Beste ist.

Jetzt werden wir für den unteren Rumpf noch ein paar weitere hinzufügen Vertikale Linien. Ich gehe gerne weg 12 Pixel zwischen Sohlen und Taille. Die Beine sind sehr einfach zu zeichnen, Sie müssen nur ein Bein etwas länger machen, damit die Figur voluminöser aussieht:

Jetzt werden wir Farbe hinzufügen. Es ist immer schwierig, eine gute Hautfarbe zu finden. Wenn Sie also die gleiche Hautfarbe wie in diesem Tutorial verwenden möchten, lautet der Code #FFCCA5. Die Farbanpassung der übrigen Elemente sollte kein Problem darstellen. Bestimmen Sie anschließend die Länge der Ärmel, die Position des Hemdschnitts und seinen Stil. Fügen Sie nun einen dunklen Streifen hinzu, um das Hemd vom Körper zu trennen. Ich ziehe es vor, alle dekorativen Elemente heller als schwarz zu machen (besonders wenn viele Elemente auf einer Ebene liegen, zum Beispiel von einem Hemd über Leder bis hin zu einer Hose). Dadurch erhalten Sie den nötigen Kontrast, ohne dass das Bild zu grob wird.

Sie können fast jeder Farbzone Lichteffekte hinzufügen. Vermeiden Sie zu viele Schatten und verwenden Sie keine Farbverläufe. Ein paar Pixel mehr ( 10% oder 25% ) reicht eine helle oder dunkle Farbe aus, um den Elementen ein dreidimensionales Aussehen zu verleihen und der Abbildung ihre Flächigkeit zu nehmen. Wenn Sie einem bereits vorhandenen Bereich eine lebendige Farbe hinzufügen möchten 100% Versuchen Sie, die Sättigung zu verringern, um die Helligkeit zu verringern. In manchen Fällen (z. B. beim Zeichnen von Haaren) kann dies eine gute Möglichkeit sein, die Farbtöne zu ändern.

Sie können viele Haaroptionen ausprobieren. Hier sind ein paar Ideen:

Wenn Sie weiterhin Charaktere erstellen, werden Kleinigkeiten wie Kleidungsstil, Ärmellänge, Hosenlänge, Accessoires, Kleidung und Hautfarbe für Abwechslung sehr nützlich sein.

Jetzt müssen Sie nur noch beide Elemente zusammenfügen und bewerten, wie sie in derselben Umgebung aussehen:

Wenn Sie Ihre Kreation exportieren möchten, ist PNG das ideale Format.

Das war's, die Arbeit ist erledigt!

Ich hoffe, diese Lektion ist nicht zu verwirrend. Ich glaube, ich habe die maximale Anzahl an Tipps und ästhetischen Tricks abgedeckt. Sie können Ihre isometrische Pixelwelt frei erweitern – Gebäude, Autos, Innenräume, Außenbereiche. All dies ist möglich und sogar interessant, wenn auch nicht so einfach.

Übersetzer: Shapoval Alexey

Das Zeichnen auf Pixelebene hat eine Nische Bildende Kunst. Mithilfe einfacher Pixel entstehen wahre Meisterwerke. Natürlich können Sie solche Zeichnungen auf einem Blatt Papier erstellen, aber es ist viel einfacher und korrekter, Bilder mit Grafikeditoren zu erstellen. In diesem Artikel werden wir jeden Vertreter dieser Software im Detail analysieren.

Der beliebteste Grafikeditor der Welt, der auf Pixelebene arbeiten kann. Um solche Bilder in diesem Editor zu erstellen, müssen Sie lediglich einige Vorkonfigurationsschritte durchführen. Alles, was ein Künstler braucht, um Kunst zu schaffen, ist hier.

Andererseits ist eine solche Fülle an Funktionalität zum Zeichnen von Pixelkunst nicht erforderlich, sodass es keinen Sinn macht, für ein Programm zu viel zu bezahlen, wenn Sie es nur für eine bestimmte Funktion verwenden möchten. Wenn Sie einer dieser Benutzer sind, empfehlen wir Ihnen, auf andere Vertreter zu achten, die sich speziell auf Pixelgrafiken konzentrieren.

PyxelBearbeiten

Dieses Programm verfügt über alles, was Sie zum Erstellen solcher Gemälde benötigen, und ist nicht mit Funktionen übersättigt, die ein Künstler niemals benötigen wird. Die Einrichtung ist recht einfach, in der Farbpalette ist es möglich, jede Farbe in den gewünschten Farbton zu ändern, und die freie Bewegung der Fenster hilft Ihnen, das Programm individuell anzupassen.

PyxelEdit verfügt über eine Kachel-zu-Leinwand-Funktion, die beim Erstellen von Objekten mit ähnlichem Inhalt nützlich sein kann. Die Testversion steht auf der offiziellen Website zum Download bereit und unterliegt keinen Nutzungsbeschränkungen, sodass Sie das Produkt vor dem Kauf testen können.

Pixelformer

In Aussehen und Funktionalität ist dies der gebräuchlichste Grafikeditor, verfügt jedoch über einige zusätzliche Funktionen zum Erstellen von Pixelbildern. Dies ist eines der wenigen Programme, die absolut kostenlos verteilt werden.

Entwickler positionieren ihr Produkt nicht als geeignet für die Erstellung von Pixelkunst, nennen sie es tolle Möglichkeit Zeichnen von Logos und Symbolen.

GraphicsGale

In fast allen solchen Softwareprogrammen wird versucht, ein Bildanimationssystem einzuführen, das sich aufgrund dessen meistens als einfach unbrauchbar herausstellt eingeschränkte Funktionen und fehlerhafte Umsetzung. Auch in GraphicsGale ist damit nicht alles so gut, aber zumindest kann diese Funktion normal genutzt werden.

Was das Zeichnen angeht, ist alles genau das gleiche wie in den meisten Editoren: Grundfunktionen, groß Farbpalette, die Möglichkeit, mehrere Ebenen zu erstellen, und nichts, was die Arbeit beeinträchtigen könnte.

Charamaker

Character Maker 1999 ist eines der ältesten Programme dieser Art. Es wurde entwickelt, um einzelne Charaktere oder Elemente zu erstellen, die dann in anderen Programmen zur Animation verwendet oder eingebettet werden Computerspiele. Daher ist es für die Erstellung von Gemälden nicht sehr geeignet.

Die Schnittstelle ist nicht sehr gut. Fast keine Fenster können verschoben oder in der Größe geändert werden, und das Standardlayout ist nicht das beste. Allerdings kann man sich daran gewöhnen.

Pro Motion NG

Dieses Programm ist in fast allem ideal, von einer gut durchdachten Benutzeroberfläche, mit der es möglich ist, Fenster unabhängig vom Hauptfenster an einen beliebigen Punkt zu verschieben und ihre Größe zu ändern, bis hin zu einem automatischen Wechsel von einer Pipette zu einem Bleistift, der ist einfach eine unglaublich praktische Funktion.

Ansonsten ist Pro Motion NG einfach eine gute Software zum Erstellen von Pixelkunst auf jedem Niveau. Die Testversion kann auf der offiziellen Website heruntergeladen und getestet werden, um über den weiteren Kauf der Vollversion zu entscheiden.

Aseprit

Es kann zu Recht als das bequemste und schönste Programm zum Erstellen von Pixelkunst angesehen werden. Allein das Interface-Design ist schon etwas wert, aber das sind noch nicht alle Vorteile von Aseprite. Es verfügt über die Fähigkeit, das Bild zu animieren, ist aber im Gegensatz zu den vorherigen Vertretern korrekt implementiert und komfortabel zu bedienen. Es gibt alles, um schöne GIF-Animationen zu erstellen.