" 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 jahrelanger Ausbildung hatte ich den Dreh raus 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 die einfachen Konzepte zum Erstellen von Pixelkunst zu vermitteln. Es wurde jedoch mehrfach aktualisiert, 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 Pixelkunst sollten Sie keine Vektoren berechnen.

Werkzeuge

Einer der Hauptvorteile der Erstellung von Pixelkunst besteht darin, dass Sie keine fortgeschrittenen Tools benötigen – der auf Ihrem Computer installierte Standard-Grafikeditor sollte ausreichen. Erwähnenswert ist, dass es Programme gibt, die speziell für die Erstellung von Pixelkunst entwickelt wurden, wie Pro Motion oder Pixen (für Mac-Benutzer). Ich habe sie nicht selbst getestet, aber ich habe viele positive Rückmeldungen gehört. In diesem Tutorial verwende ich Photoshop, das zwar teuer ist, 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

Wenn Sie Photoshop verwenden, ist das Bleistift-Werkzeug (B-Taste) Ihre Hauptwaffe, eine Alternative zum Pinsel-Werkzeug. Mit dem Stift können Sie einzelne Pixel einfärben, ohne dass sich Farben überlappen.

Wir benötigen zwei weitere Werkzeuge: „Auswahl“ (M-Taste) und „Zauberstab“ (W-Taste), um auszuwählen und zu ziehen oder zu kopieren und einzufügen. Denken Sie daran, dass Sie ausgewählte 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 nützlich, 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, Farben in der Pixelkunst beizubehalten. Sie sollten sich also ein paar Farben schnappen und sie immer wieder verwenden.

Denken Sie abschließend daran, sich alle Hotkeys zu merken, da Sie dadurch viel Zeit sparen können. Beachten Sie das „X“, das zwischen Primär- und Sekundärfarbe wechselt.

Linien

Pixel sind die gleichen kleinen farbigen Quadrate. Zuerst müssen Sie verstehen, 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 denken: Hier ist alles so einfach, dass es keinen Sinn macht, darauf näher einzugehen. Aber wenn es um Pixel geht, können auch gerade Linien zum Problem werden. Wir müssen gezackte Teile vermeiden – kleine Linienstücke, die es uneben aussehen lassen. Sie erscheinen, wenn ein Teil der Linie größer oder kleiner ist als die anderen um ihn herum.

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 diesem Beispiel hat eine saubere Linie die Intervalle 6 > 3 > 2 > 1, aber eine Linie mit den 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. Sobald 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 eine Website oder für ein 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 Teile daran 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, Blumen zu konservieren. Der Hauptgrund ist die begrenzte Farbpalette aufgrund von Systemanforderungen (was in unserer Zeit äußerst unwahrscheinlich ist) oder aus Kompatibilitätsgründen. Oder aus Gründen der Genauigkeit, 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 von den benötigten Hintergrundobjekten 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. Es würde perfekt in ein Kampfspiel oder ein rasantes Actionspiel passen.

Schaltung

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 dunkel ist. Später im Tutorial werde ich Ihnen erklären, wie Sie die Farbe des Umrisses ändern können, um den Realismus zu erhöhen.

Es gibt zwei Ansätze zum Erstellen einer Kontur. Sie können den Umriss von Hand zeichnen und ihn dann ein wenig anpassen, oder Sie können alles Pixel für Pixel zeichnen. Ja, Sie haben alles richtig verstanden, wir reden hier von tausend Klicks.

Welche Methode Sie wählen, hängt von der Größe des Sprites und Ihren Pixelfähigkeiten ab. Wenn das Sprite wirklich riesig ist, wäre es logischer, es von Hand zu zeichnen, um eine grobe Form zu erstellen, und es dann zuzuschneiden. 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 klar zeige und erkläre, was passiert ist.

Schritt eins: Grober Überblick

Zeichnen Sie mit Ihrer Maus oder Ihrem Tablet einen groben Umriss für Ihr Sprite. Stellen Sie sicher, dass es NICHT ZU roh ist, das heißt, es sieht ungefähr 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 damit, das Bild um das 6- bis 8-fache zu vergrößern. Sie sollten jedes Pixel deutlich sehen. Und dann bereinigen Sie die Gliederung. Insbesondere lohnt es sich, auf die „Streupixel“ zu achten (der gesamte Umriss sollte nicht dicker als ein Pixel sein), die gezackten Kanten zu entfernen und die kleinen Details hinzuzufügen, 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 merken, dass auch nur ein Pixel zählt.

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

Farbe

Wenn die Gliederung fertig ist, erhalten wir eine Art Malblatt, das mit Farben ausgefüllt werden muss. Dabei helfen uns Farbe, Gieß- und andere Werkzeuge. Die Auswahl 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

Dies ist eine englische Abkürzung, die sich aus den Wörtern Hue, Saturation und Brightness zusammensetzt. 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 ihn senken, wird die Farbe matt und „grau“.

Helligkeit– Licht, das Farbe ausstrahlt. Für eine schwarze Person 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:

• Stumpfe und entsättigte Farben wirken realistischer als cartoonhaft.
• Stellen Sie sich einen Farbkreis vor: Je weiter zwei Farben auf dem Kreis voneinander entfernt sind, desto schlechter passen sie zusammen. 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.

Auftragen von Farben

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

Schattierung

Das Schattieren ist einer der wichtigsten Teile auf dem Weg zum Pixel-Halbgott. 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 Lichtquellen wie Lampen, Taschenlampen usw. verfügt. Und sie können alle unterschiedliche Auswirkungen auf das Aussehen des Sprites haben. 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 oben vor dem Sprite, sodass nur die Vorder- und Oberseite des Sprites beleuchtet wird und der Rest im Schatten liegt.

Schritt zwei: Direktbeschattung

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

Denken wir 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. Wie haben Sie gemerkt, dass es nicht mehr flach war? Du hast nur 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 hellen zu dunklen Bereichen und auf unebenen Oberflächen verwendet werden.

Schritt vier: beleuchtete Bereiche

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, das heißt, sie fallen auf.

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 ausgeblasen, und wenn Sie Schatten anwenden, müssen diese reduziert werden.

Ein paar nützliche Regeln

Schatten sind für Anfänger immer eine Herausforderung, daher sind hier ein paar Regeln, die Sie beim Schattieren beachten müssen.

1. Verwenden Sie keine Farbverläufe. Der häufigste Fehler, den Anfänger machen. 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 unscharf aussieht und die Lichtquelle nicht erkannt werden kann.
3. Verwenden Sie nicht zu viele Schatten. Man könnte leicht denken: „Je mehr Farben, desto realistischer das Bild.“ Wie dem auch sei, in echtes 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 (dunkel und sehr dunkel) und zwei helle (hell und sehr hell) und schichten Sie diese über die Grundfarbe, nicht übereinander.
4. Verwenden Sie keine zu ähnlichen Farben. Es besteht keine wirkliche Notwendigkeit, nahezu identische Farben zu verwenden, es sei denn, Sie möchten ein wirklich verschwommenes Sprite erstellen.

Dithering

Der Erhalt der Farben ist etwas, 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 Es werden „Schraffur“ und „Kreuzschraffur“ verwendet, das heißt, man erhält buchstäblich etwas zwischen zwei Farben.

Einfaches Beispiel

Hier ist ein einfaches Beispiel dafür, wie Sie durch Dithering vier Schattierungsoptionen aus zwei Farben erstellen können.

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 diesen wunderbaren Retro-Look verleihen, da viele frühe Videospiele diese Technik aufgrund der geringen Anzahl verfügbarer Farbpaletten intensiv nutzten (wenn Sie zahlreiche Beispiele für Dithering sehen möchten, schauen Sie sich die für den Sega entwickelten Spiele an Genesis). Ich selbst verwende diese Methode nicht sehr oft, aber zu Bildungszwecken werde ich zeigen, wie sie auf unserem Sprite angewendet werden kann.

Sie können Dither nach Herzenslust verwenden, aber es ist erwähnenswert, dass nur wenige Leute es wirklich gut nutzen.

Selektive Konturierung

Selektive Konturierung, auch Selected Outlining genannt, ist eine Unterart der Konturschattierung. Anstelle einer schwarzen Linie wählen wir eine Farbe, die auf Ihrem Sprite harmonischer aussieht. Darüber hinaus ändern wir die Helligkeit dieses Umrisses näher an den Rändern des Sprites, sodass die Farbquelle bestimmen kann, welche Farben wir verwenden sollen.

Bisher haben wir einen schwarzen Umriss verwendet. Daran ist nichts auszusetzen: Schwarz sieht toll aus und ermöglicht es dem Sprite außerdem, sich von den umgebenden Objekten abzuheben. Durch die Verwendung dieser Methode verzichten wir jedoch auf Realismus, was in manchen Fällen für uns nützlich sein könnte, da unser Sprite weiterhin cartoonhaft aussieht. Durch selektives Konturieren wird dies beseitigt.

Sie werden feststellen, dass ich Selaute verwendet habe, um die Definition seiner Muskeln zu mildern. Schließlich sieht unser Sprite wie ein einziges Ganzes aus und nicht wie eine große Anzahl einzelner Fragmente.

Vergleichen Sie dies mit dem Original:

1. Glätten

Die Funktionsweise des Glättens ist einfach: Fügen Sie den Kanten Zwischenfarben hinzu, damit sie glatter aussehen. Wenn Sie beispielsweise eine schwarze Linie auf einem weißen Hintergrund haben, werden zu den Unterbrechungen entlang der Kante kleine graue Pixel hinzugefügt.

Technik 1: Knicke glätten

Im Allgemeinen müssen Sie bei Knicken 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 komplizierter zu machen. Schauen Sie sich einfach das Bild an und Sie werden verstehen, was ich meine.

Technik 2: Unebenheiten abrunden

Technik 3: Zeilenenden löschen

Anwendung

Wenden wir nun Anti-Aliasing auf unseren Ausdruck an. Beachten Sie, dass Sie die Außenseite der Linie nicht glätten sollten, wenn Sie möchten, dass Ihr Sprite vor jeder Hintergrundfarbe gut aussieht. Andernfalls hat Ihr Sprite an der Stelle, an der es auf den Hintergrund trifft, einen sehr unpassenden Lichthof und hebt sich daher zu sehr von jedem Hintergrund ab.

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

Warum müssen Sie dies 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 klar und sauber wie handgefertigt. Sie haben nicht nur die vollständige Kontrolle darüber, welche Farben Sie verwenden, sondern auch, 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 die Pixel einfach ihre Qualität verlieren.

Abschluss

Wow, wir nähern uns schon fast dem Punkt, an dem Sie Ihren Computer ausschalten und eine kühle Flasche Bier aus dem Kühlschrank holen können. Aber es ist noch nicht gekommen! Im letzten Teil geht es darum, was den begeisterten 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 es noch „feucht“ aussieht. Nehmen Sie sich etwas Zeit für die Perfektionierung und stellen Sie sicher, dass alles perfekt ist. Egal wie müde Sie bereits sind, der spaßige Teil 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 hielt, leer war. Eigentlich liegt der Grund darin, dass ich noch eine Weile warten wollte kleine Details. Beachten Sie auch den Besatz, den ich an seinen Stirnbändern angebracht habe, den Hosenschlitz an seiner Hose ... und wer wäre ein Mensch ohne seine Brustwarzen? Außerdem habe ich den unteren Teil seines Oberkörpers etwas abgedunkelt, damit sich sein Arm besser vom Körper abhebt.

Endlich sind Sie fertig! Lucha Lawyer ist leicht, da es nur 45 Farben hat (oder es kann superschwer sein – alles hängt von den Einschränkungen Ihrer Palette ab) und seine Auflösung beträgt etwa 150 x 115 Pixel. Jetzt können Sie Ihr Bier öffnen!

Vollständiger 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 Pixelieren angewendet werden.
2. Beginnen Sie mit kleinen Sprites. Der schwierigste Teil besteht darin, zu lernen, wie man viele Details mit einer minimalen Anzahl von Pixeln platziert, um Sprites nicht so groß zu machen 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 – Fragmente der Arbeit anderer Leute wiederholen. Es braucht viel Zeit, um einen eigenen Stil zu entwickeln.
4. Wenn Sie kein Tablet haben, kaufen Sie eines. Ständige Nervenzusammenbrüche und Stress durch ständiges Klicken mit der linken Maustaste machen keinen Spaß und werden das andere Geschlecht kaum beeindrucken. Ich verwende einen kleinen Wacom Graphire2 – mir gefällt, wie kompakt und tragbar er ist. Möglicherweise bevorzugen Sie ein größeres Tablet. Machen Sie vor dem Kauf eine kurze 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 unsere Gruppe. Oder schreiben Sie direkt in die Gruppennachrichten

Teil 6: Antialiasing
Teil 7: Texturen und Unschärfe
Teil 8: Tile World

Vorwort

Es gibt viele Definitionen von Pixelkunst, aber hier verwenden wir diese: Ein Bild ist Pixelkunst, wenn es vollständig von Hand erstellt wird und die Farbe und Position jedes gezeichneten Pixels kontrolliert werden kann. Natürlich werden in der Pixelkunst die Einbeziehung oder Verwendung von Pinseln oder Unschärfewerkzeugen oder heruntergekommenen Maschinen (nicht sicher) und anderen Softwareoptionen, die „modern“ sind, von uns nicht verwendet (tatsächlich zur Verfügung gestellt bedeutet „zu unserer Verfügung“ , aber logischerweise scheint es auf diese Weise korrekter zu sein). Es ist auf die Bleistift- und Füllwerkzeuge 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 Spiele im Retro-Stil (wie Super Nintendo oder Game Boy) eignet. Sie können die hier erlernten Techniken auch mit Effekten aus der Nicht-Pixel-Kunst 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 weder die menschliche Anatomie noch die Struktur der Künste beibringen, und ich werde wenig über die Perspektive sagen. In diesem Tutorial finden Sie viele Informationen zu Pixel-Art-Techniken. Am Ende sollten Sie in der Lage sein, Charaktere und Kulissen für Ihre Spiele zu erstellen, sofern Sie aufmerksam sind, regelmäßig üben und die gegebenen Tipps anwenden.

- Ich möchte auch darauf hinweisen, dass nur einige der in diesem Tutorial verwendeten Bilder vergrößert sind. Bei Bildern, die nicht vergrößert sind, wäre es gut, wenn Sie sich die Zeit nehmen würden, 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 betrachten.

Am Ende muss ich allen Künstlern danken, die auf die eine oder andere Weise mit mir an der Erstellung dieses Leitfadens mitgewirkt haben: Shin für seine schmutzigen Arbeiten und Strichzeichnungen, Xenohydrogen für sein Genie im Umgang mit Farben, Lunn für sein Wissen über Perspektive, und Panda, der strenge Ahruon, Dayo und Kryon für ihre großzügigen Beiträge zur Illustration dieser Seiten.

Lassen Sie mich also auf den Punkt zurückkommen.

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 hasse, dann ist es „Es gibt keine schlechten Werkzeuge, nur schlechte Arbeiter.“ Eigentlich dachte ich, dass nichts weiter von der Wahrheit entfernt sein könnte (außer vielleicht „Was dich nicht umbringt, macht dich stärker“), und die Pixelkunst ist eine sehr gute Bestätigung. Dieser Leitfaden soll Ihnen verschiedene vorstellen Software, wird zum Erstellen von Pixelkunst verwendet und hilft Ihnen bei der Auswahl des richtigen Programms.

1.Einige alte Dinge

Bei der Auswahl einer Software zum Erstellen von Pixelkunst denken die Leute oft: „Wahl der Software? Das ist verrückt! Alles, was wir brauchen, um Pixelkunst zu schaffen, ist Farbe (anscheinend ein Wortspiel, Zeichnung und ein Programm)“ Tragischer Fehler: 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 weist es viele Mängel auf. Dies ist eine (unvollständige) Liste:

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

Kurz gesagt, Sie können Paint vergessen. Jetzt schauen wir uns die echte Software an.

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), die Tausende von Funktionen haben.“ Das kann gut oder schlecht sein: Wenn Sie eines dieser Programme bereits kennen, können Sie Pixelkunst erstellen (wobei alle Optionen für automatisches Anti-Aliasing deaktiviert sind und viele der erweiterten Funktionen deaktiviert sind). 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 für eine 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 Programme, die für Pixelkunst entwickelt wurden, als man denkt, aber hier betrachten wir nur die besten. Sie haben alle sehr ähnliche Eigenschaften (Palettensteuerung, sich wiederholende Kachelvorschauen, Transparenz, Ebenen usw.). Ihre Unterschiede liegen im Komfort ... und im Preis.

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

Graphics Gale macht viel mehr Spaß und ist benutzerfreundlicher, und es kostet etwa 20 US-Dollar, was nicht schlecht ist. Lassen Sie mich hinzufügen, dass die Testversion nicht zeitlich begrenzt ist und mit genügend Kit ausgestattet ist, um genug davon herzustellen gute Grafik. Es funktioniert einfach 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 (offensichtlich) bequemer und schneller als Graphics Gale ist. Oh ja, sie ist lieb! 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 (aus dem Französischen): 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.

Fortgesetzt werden…

Anmerkungen des Übersetzers vom Französischen ins Englische

Dies ist ein großartiges Tutorial zum Thema Pixelkunst, geschrieben von Phil Razorbak von LesForges.org. Vielen Dank Phil Razorbak dafür, dass er OpenGameArt.org erlaubt hat, diese Anleitungen zu übersetzen und hier zu veröffentlichen. (Vom Übersetzer ins Russische: Ich habe nicht um Erlaubnis gefragt. Wenn jemand möchte, können Sie mir 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 meine Künstlerfreunde, aber was auch immer an Gutem verschwendet wird, soll hier sein.
Das Original auf Französisch ist 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 meine erste Veröffentlichung, daher sind Gestaltungsvorschläge willkommen. Außerdem interessiert mich die Frage: Sollen die restlichen Teile als separate Artikel veröffentlicht werden oder ist es besser, diesen zu aktualisieren und zu ergänzen?

Adobe Photoshop: Wir zeichnen und animieren eine Figur mithilfe von Technologie Pixelkunst

In dieser Lektion lernen Sie, wie Sie Charaktere mithilfe der Pixel-Art-Technik zeichnen und animieren. Dazu benötigen Sie lediglich Adobe Photoshop. Das Ergebnis wird ein GIF mit einem laufenden Astronauten sein.

Programm: Adobe Photoshop Schwierigkeitsgrad: Anfänger, Mittelstufe Benötigte Zeit: 30 Min. – Stunde

I. Einrichten des Dokuments und der Tools

Schritt 1

Wählen Sie in der Symbolleiste „Bleistift“ aus – dies wird das Hauptwerkzeug für unsere Lektion sein. Wählen Sie in den Einstellungen den Pinseltyp Hartrund aus und stellen Sie die restlichen Werte wie im Bild ein. Unser Ziel ist es, die Bleistiftspitze so scharf wie möglich zu machen.

Schritt 2

Wählen Sie in den Einstellungen des Radiergummi-Werkzeugs (Radiergummi) den Bleistiftmodus aus und stellen Sie die restlichen Werte wie im Bild gezeigt ein.

Schritt 3

Aktivieren Sie das Pixelraster (Ansicht > Anzeigen > Pixelraster). Wenn es im Menü kein solches Element gibt, gehen Sie zu den Einstellungen und aktivieren Sie die Grafikbeschleunigung. Einstellungen > Leistung > Grafikbeschleunigung.

Bitte beachten Sie: Das Raster ist auf der neu erstellten Leinwand nur sichtbar, wenn es um 600 % oder mehr vergrößert wird.

Schritt 4

Ändern Sie unter „Einstellungen“ > „Allgemein“ (Strg-K) den Bildinterpolationsmodus in den „Nächster Nachbar“-Modus. Dadurch bleiben die Grenzen der Objekte so klar wie möglich.

Stellen Sie in den Einstellungen für Einheiten und Lineale die Linealeinheiten auf Pixel ein. Einstellungen > Einheiten und Lineale > Pixel.

II. Charaktererstellung

Schritt 1

Und da nun alles eingerichtet ist, können wir direkt mit dem Zeichnen der Figur fortfahren.

Skizzieren Sie Ihren Charakter mit klaren Umrissen und achten Sie darauf, ihn nicht mit kleinen Details zu überladen. Zu diesem Zeitpunkt spielt die Farbe überhaupt keine Rolle. Hauptsache, die Umrisse sind klar gezeichnet und Sie verstehen, wie die Figur aussehen wird. Diese Skizze wurde speziell für diese Lektion erstellt.

Schritt 2

Reduzieren Sie den Maßstab der Skizze mit der Tastenkombination Strg+T oder „Bearbeiten“ > „Frei transformieren“ auf eine Höhe von 60 Pixeln.

Die Größe des Objekts wird im Informationsfeld angezeigt. Bitte beachten Sie, dass die Interpolationseinstellungen dieselben sind wie in Schritt 4.

Schritt 3

Vergrößern Sie die Skizze um 300–400 %, um die Arbeit damit zu erleichtern und die Deckkraft der Ebene zu verringern. Erstellen Sie dann eine neue Ebene und zeichnen Sie die Umrisse der Skizze mit dem Bleistift-Werkzeug. Wenn das Zeichen symmetrisch ist, wie in unserem Fall, können Sie nur die Hälfte umreißen, es dann duplizieren und spiegeln (Bearbeiten > Transformieren > Horizontal spiegeln).

Rhythmus: Zeichnen komplexe Elemente breche sie in Stücke. Wenn die Pixel (Punkte) in einer Linie einen „Rhythmus“ wie 1-2-3 oder 1-1-2-2-3-3 bilden, erscheint die Skizze für das menschliche Auge glatter. Aber wenn es die Form erfordert, kann dieser Rhythmus gestört werden.

Schritt 4

Wenn der Umriss fertig ist, können Sie die Hauptfarben auswählen und die großen Formen malen. Tun Sie dies auf einer separaten Ebene unterhalb der Kontur.

Schritt 5

Glätten Sie den Umriss, indem Sie einen Schatten entlang der Innenkante zeichnen.

Fügen Sie weitere Schatten hinzu. Wie Sie vielleicht beim Zeichnen bemerkt haben, können einige Formen korrigiert werden.

Schritt 6

Erstellen Sie eine neue Ebene für die Highlights.

Wählen Sie den Mischmodus „Überlagerung“ aus der Dropdown-Liste im Ebenenbedienfeld aus. Ziehen helle Farbeüber die Bereiche, die Sie hervorheben möchten. Glätten Sie dann die Glanzlichter mit Filter > Weichzeichnen > Weichzeichnen.

Vervollständigen Sie das Bild, kopieren und spiegeln Sie dann die fertige Bildhälfte und kombinieren Sie dann die Ebenen mit den Hälften, um ein Gesamtbild zu erstellen.

Schritt 7

Jetzt muss der Astronaut für Kontrast sorgen. Verwenden Sie die Ebeneneinstellungen (Bild > Anpassungen > Ebenen), um es heller zu machen, und passen Sie dann den Farbton mit der Option „Farbbalance“ an (Bild > Anpassungen > Farbbalance).

Der Charakter ist jetzt für die Animation bereit.

III. Charakteranimation

Schritt 1

Erstellen Sie eine Kopie der Ebene (Ebene > Neu > Ebene über Kopie) und verschieben Sie sie 1 Pixel nach oben und 2 Pixel nach rechts. Dies ist ein wichtiger Punkt in der Charakteranimation.

Reduzieren Sie die Deckkraft der Originalebene um 50 %, damit Sie den vorherigen Frame sehen können. Dies wird als „Onion Skinning“ (Pluralmodus) bezeichnet.

Schritt 2

Beugen Sie nun die Arme und Beine Ihres Charakters, als würde er rennen.

● Hervorheben linke Hand Lasso-Werkzeug

● Verschieben Sie mit dem FreeTransformTool (Bearbeiten > FreeTransform) und gedrückter Strg-Taste die Ränder des Containers, sodass sich die Hand zurückbewegt.

● Wählen Sie zunächst ein Bein aus und strecken Sie es ein wenig. Drücken Sie dann das andere Bein gegeneinander, sodass es sich anfühlt, als würde die Figur gehen.

● Passen Sie mit Bleistift und Radiergummi den Teil Ihres rechten Arms unterhalb des Ellenbogens an.

Schritt 3

Jetzt müssen Sie die neue Position der Arme und Beine komplett neu zeichnen, wie im zweiten Abschnitt dieser Lektion gezeigt. Dies ist notwendig, um sicherzustellen, dass das Bild klar aussieht, da die Transformation die Pixellinien stark verzerrt.

Schritt 4

Erstellen Sie eine Kopie der zweiten Ebene und drehen Sie sie horizontal. Jetzt hast du 1 Grundhaltung und 2 in Bewegung. Stellen Sie die Deckkraft aller Ebenen auf 100 % wieder her.

Schritt 5

Gehen Sie zu „Fenster“ > „Zeitleiste“, um das Zeitleistenfenster anzuzeigen, und klicken Sie auf „Frame-Animation erstellen“.

Wenn Sie als Kind gerne mit Lego gespielt haben (oder auch als Erwachsener weiterhin damit spielen), werden Sie sich wahrscheinlich für isometrische Pixelkunst interessieren. Es kann technisch sein und eher einer Wissenschaft als einer Illustration ähneln. Aber in einer solchen Kunst gibt es keine 3D-Perspektive; man kann Elemente verschieben Umfeld mit maximaler Einfachheit.

Wir erstellen die Figur als logischen Ausgangspunkt für die Pixelkunst, da sie dabei hilft, die Proportionen für die meisten anderen Elemente zu bestimmen, die wir erstellen könnten. Allerdings müssen Sie zunächst einige Grundlagen der isometrischen Pixelkunst erlernen und dann mit der Erstellung eines Charakters 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 repräsentieren zwei Pixel entlang für jedes Pixel nach unten. Diese Linien sehen relativ weich aus und werden für quadratische Flächen verwendet:

Die am häufigsten verwendeten Linienstrukturen (wie die folgende) funktionieren gut, aber die Zeichnung wird mit jedem Schritt, den Sie erhöhen, kantiger 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 Gesetzen der Isometrie, also erstellen wir zunächst einen einfachen Würfel, um die Proportionen festzulegen.

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

Ich möchte über das Menü ein zusätzliches Fenster für dieselbe Datei öffnen Fenster > Anordnen > Neues Fenster/Lektionen.(Fenster > Anordnen > Neues Fenster…). Dies ermöglicht das Arbeiten mit Vergrößerung 600% Beobachten Sie die Ergebnisse im Zoomfenster 100% . Die Verwendung des Rasters liegt bei Ihnen, aber manchmal finde ich es eher aufdringlich 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 dann 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. Beim Zeichnen sollte der Winkel-Tooltip angezeigt werden 26,6°. Tatsächlich kann das Linienwerkzeug nicht als praktisch bezeichnet werden; es erzeugt ungleichmäßige Linien, wenn der Winkel nicht präzise ist.

2. Sie müssen eine Auswahl erstellen 20 x 40 Pixel, und wählen Sie dann K Bleistift(Bleistiftwerkzeug) Dicke 1px und zeichnen Sie einen Punkt in die untere linke Ecke der Auswahl, und halten Sie dann die Taste gedrückt Schicht Klicken Sie in die obere rechte Ecke. Photoshop erstellt automatisch eine neue Linie zwischen den beiden Punkten. Wenn Sie etwas Übung haben, können Sie auf diese Weise gerade Linien ohne Hervorhebungen 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 sich die Pixel an den Ecken treffen. Sie können die Auswahl auch verschieben, indem Sie die Pfeiltasten auf Ihrer Tastatur gedrückt halten Alt. Diese Methode heißt Alt-Offset(Alt-Nudge).

Also 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, die „dritte Dimension“ hinzuzufügen. Verschieben Sie die quadratische Fläche bei gedrückter Alt-Taste und verschieben Sie sie nach 44px runter:

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

Um einen übersichtlicheren Würfel zu erstellen, lassen Sie uns die Ecken weicher machen, indem wir die Pixel ganz links und ganz rechts aus den Quadraten entfernen. Danach fügen Sie 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 farbigen Quadrats zu malen. Da wir den Würfel etwas beschnitten haben, sehen diese hellen Linien besser aus, wenn sie über den schwarzen Kanten liegen (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-Werkzeug(Radiergummi-Werkzeug), Modus Bleistift(Bleistiftmodus), Dicke 1px).

Wählen Sie mit die Farbe des oberen Quadrats aus Pipetten(Pipettenwerkzeug). Um dieses Werkzeug schnell auszuwählen, drücken Sie die Taste Alt. Verwenden Sie die resultierende Pipettenfarbe, um die vertikale Linie in der Mitte des Würfels zu füllen. Reduzieren Sie anschließend die Farbhelligkeit um 15% und fülle die linke Seite des Würfels mit der resultierenden Farbe. Reduzieren 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 weitermachen.

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. Normalerweise bevorzuge ich einen dünnen Körper und einen etwas größeren Kopf. Der dünne 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 den 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 den Charakter klein, denn nach einer Weile möchten Sie ihm vielleicht ein Auto, ein Haus, einen ganzen Platz oder sogar eine Stadt hinzufügen. Daher muss der Charakter einer der meisten sein kleine Elemente in der Abbildung. Es lohnt sich auch, die grafische Effizienz zu berücksichtigen. Versuchen Sie, den Charakter mit einer minimalen Anzahl an 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 eine 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 mit zwei Pixeln. Dies wird der Mund sein. Verwenden Sie die Pfeiltasten auf Ihrer Tastatur, um sich zu bewegen, und 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:

Zeichnen Sie die Haare und den Oberkopf ein und machen Sie dann die Ecken weicher. Sie sollten etwas Ähnliches 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 eine Linie markiert das Ende des Kopfes. Fahren Sie fort und mildern Sie die Winkel, in denen sich die Linien treffen:

Fügen Sie ein Pixel für die Oberseite des Ohrs hinzu und ändern Sie die Form des Kopfes, 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 im Ohrbereich, 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 Längenlinie hinzu 12 Pixel, um die Außenseite der Hand zu erstellen, und Innenseite wird zwei Pixel nach links sein. Verbinden Sie die Linien unten mit ein paar Pixeln, um eine Hand/Faust zu bilden (in diesem Fall gibt es keine Details, also ignorieren Sie 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 Brustlinie und erhalten Sie eine vollständige Oberteil Körper. Der andere Arm der Figur ist nicht sichtbar, sieht aber normal aus, da er vom Oberkörper bedeckt ist.

Am Ende sollten Sie so etwas erhalten:

Natürlich können Sie beliebige Proportionen verwenden; Ich ziehe es vor, verschiedene Optionen nebeneinander zu zeichnen, bevor ich mich für die beste entscheide.

Jetzt werden wir für den unteren Rumpf noch einige weitere vertikale Linien hinzufügen. Ich gehe gern 12 Pixel zwischen den Sohlen und der 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 fügen wir Farbe hinzu. Es ist immer schwierig, eine gute Hautfarbe zu finden. Wenn Sie also die gleiche Hautfarbe wie in diesem Tutorial verwenden möchten, verwenden Sie deren Code #FFCCA5. Die Auswahl der Farben für die übrigen Elemente sollte kein Problem sein. 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 bevorzuge es, alle dekorativen Elemente heller als Schwarz zu halten (besonders wenn viele Elemente auf einer Ebene liegen, etwa von einem Hemd bis hin zu Leder oder Hosen). Dadurch erhalten Sie den nötigen Kontrast, ohne dass das Bild zu grob wirkt.

Sie können fast jeder Farbzone Lichteffekte hinzufügen. Vermeiden Sie es auch große Menge Schatten oder Verwendung von Farbverläufen. Mehrere Pixel mehr ( 10% oder 25% ) Eine helle oder dunkle Farbe reicht aus, um den Elementen ein dreidimensionales Aussehen zu verleihen und die Flächigkeit der Abbildung zu beseitigen. Wenn Sie einem bereits vorhandenen Bereich einen Farbtupfer hinzufügen möchten 100% Helligkeit, versuchen Sie, die Sättigung zu reduzieren. In einigen Fällen (z. B. beim Zeichnen von Haaren) kann dies der Fall sein auf eine gute Art und Weise Farbtöne ändern.

Es gibt viele Haaroptionen, die Sie ausprobieren können. Hier sind einige Ideen:

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

Jetzt müssen nur noch beide Elemente zusammengefügt und beurteilt werden, wie sie in einer 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 war nicht zu verwirrend. Ich denke, ich habe so viele Tipps und ästhetische Tricks wie möglich besprochen. 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

4,7 (93,8 %) 158 Stimmen

Zeichnungen nach Zellen oder Pixelkunst sind eine sehr beliebte Kunstform bei Schülern und Studenten. Bei langweiligen Vorlesungen erspart Ihnen das Zeichnen nach Quadraten Langeweile. Der Prototyp des Zeichnens nach Quadraten war der Kreuzstich, bei dem ein Kreuzmuster auf eine Leinwand, einen mit Quadraten markierten Stoff, gezeichnet wurde. Wir waren alle einmal Studenten und Schulkinder und zeichneten aus Langeweile verschiedene Bilder Stellen Sie sich meine Überraschung in den Zellen vor, als ich herausfand, dass es sich hier praktisch um Kunst mit ihren Meisterwerken und Genies handelt. Ich fing an, mich eingehender mit dem Thema zu befassen, und dabei kam folgendes heraus ...

So zeichnen Sie Bilder nach Zellen

Diese Kunst ist für jedermann zugänglich, die Hauptsache ist, den Zellen klar zu folgen. Schulhefte sind ideal zum Zeichnen von Bildern; die Größe ihrer Quadrate beträgt 5 x 5 mm, und das Notizbuch selbst ist 205 mm x 165 mm groß. An im Moment Frühlingsnotizbücher mit einem A4-Blatt erfreuen sich bei Boxkünstlern immer größerer Beliebtheit; die Größe dieses Notizbuchs beträgt 280 mm x 205 mm.

Professionelle Künstler schaffen ihre Meisterwerke auf Millimeterpapier (Zeichenpapier), da gibt es Raum zum Entfalten. Der einzige Nachteil von Millimeterpapier ist, dass es blass ist Grün, was beim Skizzieren mit Farbstiften nicht auffällt.
Achten Sie bei der Auswahl eines Notizbuchs zum Zeichnen auf die Dicke des Papiers. Die Qualität Ihrer Zeichnung in den Zellen hängt von der Dichte ab und davon, ob sie auf der falschen Seite des Blattes erscheint. Die ideale Blattdichte beträgt mindestens 50 g/m².

So zeichnen Sie Bilder nach Zellen

Um Bilder nach Zellen auszumalen, benötigen Sie keine speziellen Werkzeuge; Bleistifte und Kugelschreiber reichen aus. Monochrome Gemälde sind sehr cool, aber ich möchte meinem Leben unbedingt etwas Farbe verleihen. Damit die Farben abwechslungsreicher werden, gehen Sie in ein Schreibwarengeschäft und wählen Sie aus, was Ihr Herz begehrt. Gelstifte, Öl, Kugel.

Kugelschreiber für Pixelkunst

Filzstifte für Zeichnungen nach Zellen

Wenn Sie gerne mit Filzstiften zeichnen, haben Sie Recht, die Farben der Filzstifte sind sehr satt. Es sei daran erinnert, dass Filzstifte in zwei Gruppen eingeteilt werden: Stifte auf Alkohol- und Wasserbasis sind sicherer, können aber das Papier durchnässen. Auch Alkohol kann Papier durchnässen und auch der Geruch ist nicht jedermanns Sache.

Bleistifte für Zeichnungen nach Zellen

Bleistifte sind eine weitere Art von Skizziergeräten. Bleistifte sind in der Artenvielfalt keine Ausnahme; es gibt sie in den Ausführungen Kunststoff, Wachs, Holz und Aquarell. Wir malen mit Holz frühe Kindheit, und wir wissen, dass der Stift oft kaputt geht. Plastik- und Wachsmodelle brechen seltener, sind aber dicker, was das Zeichnen weniger praktisch macht. Um Aquarellstifte kommt nicht in Frage, da man nach dem Malen mit einem Bleistift die Zeichnung mit einem angefeuchteten Pinsel abdecken muss, was bei Notizbuchblättern nicht akzeptabel ist.

Sehen Sie sich ein Video an, wie einfach es ist, Bilder in Zellen zu zeichnen und wie schön das Ergebnis sein kann:

Noch ein paar Zeichenschemata, die mir gefallen haben:

Punktgrafiken – Pixel-Art-Technologie

Wir haben herausgefunden, welches Zubehör benötigt wird. Machen wir uns nun mit der Technologie vertraut. Die Pixel-Art-Technologie ist sehr einfach, es handelt sich um Punktgrafiken.

Bevor wir uns mit Pixel-Art-Methoden befassen, gehen wir zurück in unsere Kindheit in den 80er und 90er Jahren. Natürlich erinnern sich diejenigen, die in postsowjetischen Zeiten aufgewachsen sind, an 8-Bit-Videospiele, Spielgrafiken, die auf Pixelgrafiken basierten.

Der beste Weg, alles zu meistern, ist Übung. Versuchen wir, die Pixelkunst zu meistern:

Nehmen wir einen schwarz-roten Ölstift und ein kariertes Notizbuchblatt.

Lassen Sie uns zunächst eine einfache Zeichnung erstellen. Zählen wir die Zellen, bestimmen den Umriss und färben ihn entsprechend den Farben.

Zeichnen wir zum Beispiel ein Herz:

1. Nehmen Sie ein kariertes Blatt und einen Stift mit schwarzer Tinte, setzen Sie 3 Punkte, wie im Bild, die Punkte markieren, welche Zellen schwarz gestrichen werden.
   
   
2. Zeichnen Sie Linien, die die Konturen des Bildes markieren.
   
   
3. Markieren Sie auf jeder Seite drei Punkte, siehe Abbildung.
   
   
4. Wir markieren den Bereich der Zeichnung mit zwei Linien.
   
   
5. Lassen Sie uns auf jeder Seite einen weiteren Punkt setzen und unter den oberen Punkten Grenzen ziehen.
   
   
6. Zeichnen wir 8 Punkte vertikal und 4 Punkte auf beiden Seiten, wie in der Abbildung unten gezeigt.
   
7. Durch das Zeichnen vertikaler Linien, wie in der Abbildung gezeigt, geben wir die Grenzen der Zeichnung vollständig an.
   
8. Markieren Sie auf die gleiche Weise links und rechts den unteren Teil des Herzens.
   
   
9. Wir umreißen die Zellen wie in unserem Bild.
   
   
10. Als nächstes müssen wir die Innenseite des Herzens mit einem roten Stift übermalen und den Glanzpunkt des Lichts unbemalt lassen.
    
    
11. Zum Schluss schattieren Sie mit einem schwarzen Stift die mit Punkten markierten Zellen. Jetzt haben Sie gelernt, wie man 8-Bit-Bilder zeichnet.
    
    

Wenn Sie der Meinung sind, dass große und voluminöse Bilder nichts für Sie sind, sollten Sie versuchen, ein Foto aus dem Internet zu zeichnen. Hast Du Angst? Es lohnt sich nicht.

Nehmen

• schwarzer Stift,
• Bleistifte,
• kariertes Notizbuch,
• Computer,
• Foto oder Bild aus dem Internet
• Photoshop-Programm.

Zur Bewerbung volumetrische Zeichnungen Wir müssen die Anzahl der Zellen zählen, die bemalt werden. Es ist ziemlich schwer, keinen Fehler zu machen große Mengen. Achten Sie außerdem darauf, Farbtöne zu wählen, die denen des Originalbilds ähneln.
Also, lasst uns handeln:

Ich gebe Ihnen einen Rat, der mir sehr hilft: Wenn Sie einen Farbdrucker haben, drucken Sie die Zeichnung aus, wenn nicht, ist das kein Problem. Zeichnen Sie ein Raster aus 10 Zellen mit einem dickeren Umriss. Wenn auf einem gedruckten Blatt kein Platz zum Drucken vorhanden ist, können Sie das Bild mit einem Lineal und einem Kontraststift in Paint öffnen.
Ich wünsche Ihnen kreativen Erfolg.