" 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 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.

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 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 die Gliederung bereinigen. 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, die großen 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 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 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 (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 Dithering 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 den Realismus, der 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 einer 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 deutlich 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 Handarbeit. 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. Verbringen Sie ein wenig Zeit mit der Perfektionierung und stellen Sie sicher, dass alles perfekt ist. Ganz gleich, 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. Dauerhaft Nervenzusammenbrüche Und der Stress, der durch das ständige Klicken mit der linken Maustaste entsteht, macht keinen Spaß und dürfte auch Angehörige des anderen Geschlechts nicht 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

Adobe Photoshop: Wir zeichnen und animieren einen Charakter Pixel-Technologie Kunst

In dieser Lektion lernen Sie, wie Sie mit dieser Technik Charaktere zeichnen und animieren Pixel Kunst. 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 Hälfte des Bildes 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 %, sodass Sie den vorherigen Rahmen 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 haben Sie 1 Grundpose 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“.

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

Ein bisschen Geschichte

Mit welchen Programmen kann man moderne Pixelkunst erstellen?

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

So vermeiden Sie Knicke in der Pixelkunst

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

So erhalten Sie Schatten in Pixel Art

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

So erzielen Sie Highlights in der Pixelkunst

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

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; Sie können Elemente der Umgebung mit maximaler Einfachheit verschieben.

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 rechts obere 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 die Alt-Offset-Taste, 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 ein wenig 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(Radiergummi-Werkzeug), Modus Bleistift(Bleistiftmodus), Dicke 1px).

Wählen Sie mit die Farbe des oberen Quadrats aus Pipetten(Pipette). Um dieses Werkzeug schnell auszuwählen, während Sie mit einem Bleistift zeichnen oder füllen, drücken Sie 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 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 tue ich das dünner Körper und ein etwas größerer 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, 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 Oberer Teil 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.

Nun fügen wir für den unteren Rumpf noch ein paar weitere hinzu Vertikale Linien. Ich gehe gerne weg 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 manchen Fällen (z. B. beim Zeichnen von Haaren) kann dies eine gute Möglichkeit sein, die Farbtöne zu variieren.

Es gibt viele Haaroptionen, die Sie ausprobieren können. Hier sind ein paar 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

Bereits im 20. Jahrhundert entwickelten sich Computerspiele, insbesondere in den 90er Jahren, zu einem breiten Einsatzgebiet für Pixelgrafiken. Mit der Entwicklung von 3D-Grafiken begann der Niedergang der Pixelkunst, doch dann erwachte sie dank der Entwicklung des Webdesigns, dem Aufkommen von Mobiltelefonen und mobilen Anwendungen wieder zum Leben.

Pixelkunst ist eine spezielle Technik zum Erstellen von Bildern in digitaler Form, die in Rastergrafikeditoren durchgeführt wird und bei der der Künstler mit der kleinsten Einheit eines digitalen Rasterbilds arbeitet – dem Pixel. Dieses Bild zeichnet sich durch eine niedrige Auflösung aus, bei der jedes Pixel deutlich sichtbar ist. Pixelkunst dauert lange und mühsam, je nach Komplexität der Zeichnung – Pixel für Pixel.

Grundregeln der Pixelkunst

Der wichtigste Bestandteil der Pixelkunst ist die sogenannte Line Art – also deren Konturen. Pixelkunst wird mit Linien erstellt – geraden und gebogenen.

Gerade Linien

Die Regel für die Konstruktion von Linien in der Pixelkunst lautet, dass sie aus Segmenten bestehen sollten, die sich im Verlauf des Zeichnens um ein Pixel zur Seite verschieben. Vermeiden Sie den Hauptfehler von Pixel-Art-Anfängern: Die Pixel sollten sich nicht berühren und einen rechten Winkel bilden.

Bei Geraden können Sie sich die Aufgabe erleichtern, indem Sie eines der bekannten Beispiele für geneigte Geraden verwenden:

Wie aus der Abbildung hervorgeht, bestehen alle darauf dargestellten geraden Linien aus identischen Pixelsegmenten, die um einen Pixel zur Seite verschoben sind. Am beliebtesten sind Segmente mit einem, zwei und vier Pixeln. Solche einfachen geraden Linien in Pixelgrafiken werden als „ideal“ bezeichnet.

Gerade Linien können ein anderes Muster haben, Sie können beispielsweise Segmente aus zwei Pixeln mit einem Segment aus einem Pixel abwechseln, aber solche Linien sehen nicht so schön aus, insbesondere wenn das Bild vergrößert wird, obwohl sie nicht gegen die Regeln der Pixelkunst verstoßen .

Geschwungene Linien

Gerade Linien lassen sich einfacher erstellen, da sie Knicke vermeiden, was bei geschwungenen Linien nicht der Fall ist. Ihre Konstruktion ist schwieriger, allerdings müssen geschwungene Linien viel häufiger gezeichnet werden als gerade Linien.

Neben dem gleichen Verbot der Bildung rechter Winkel aus Pixeln muss beim Zeichnen gekrümmter Linien auch die Art ihrer Verschiebung beachtet werden. Die Länge der Pixelsegmente sollte sich gleichmäßig und allmählich ändern – gleichmäßig ansteigen und ebenso gleichmäßig abfallen. Pixelgrafiken erlauben keine Knicke.

Es ist unwahrscheinlich, dass Sie mit einer Handbewegung eine ideal gekrümmte Linie zeichnen können, ohne eine einzige Regel zu brechen. Daher können Sie auf zwei Methoden zurückgreifen: Zeichnen Sie Linien, indem Sie ein Pixel nach dem anderen zeichnen, oder zeichnen Sie eine regelmäßige Kurve und korrigieren Sie sie dann durch Entfernen zusätzlicher Pixel aus dem fertigen „Frame“.

Dithering

In der Pixelkunst gibt es so etwas wie Dithering. Dabei handelt es sich um eine spezielle Methode zum Mischen von Pixeln unterschiedlicher Farbe, um einen Farbübergangseffekt zu erzeugen.

Die beliebteste Dithering-Methode besteht darin, Pixel in einem Schachbrettmuster anzuordnen:

Diese Methode verdankt ihr Erscheinungsbild technischen Einschränkungen bei den Farbpaletten, denn um beispielsweise lila, war es notwendig, rote und blaue Pixel in einem Schachbrettmuster zu zeichnen:

Und anschließend wurde Dithering häufig verwendet, um in Bildern Volumen durch Licht und Schatten zu vermitteln:

Damit geditherte Pixelgrafiken gut funktionieren, muss der Farbmischbereich mindestens zwei Pixel breit sein.

Programme für Pixelkunst

Um das Erstellen von Kunstwerken im Pixelstil zu meistern, können Sie jeden Grafikeditor verwenden, der diese Art von Zeichnung unterstützt. Alle Künstler arbeiten je nach ihren Vorlieben mit unterschiedlichen Programmen.

Viele Menschen zeichnen bis heute lieber mit Pixeln im bekannten Standardprogramm des Windows-Betriebssystems – Microsoft Paint. Dieses Programm ist wirklich einfach zu erlernen, aber das ist auch sein Nachteil – es ist ziemlich primitiv, es unterstützt beispielsweise nicht das Arbeiten mit Ebenen und deren Transparenz.

Ein weiteres benutzerfreundliches Pixel-Art-Programm, dessen Demoversion völlig kostenlos online verfügbar ist, ist GraphicsGale. Der Nachteil des Programms ist vielleicht, dass es das Speichern von Pixelgrafiken im GIF-Format nicht unterstützt.

Besitzer von Mac-Computern können die Arbeit darin ausprobieren kostenloses Programm Pixen. Und Nutzer des Linux-Betriebssystems sollten die Programme GrafX2 und JDraw selbst testen.

Und natürlich ist das Programm Adobe Photoshop eine hervorragende Option zum Erstellen von Pixelkunst. Es verfügt über umfangreiche Funktionen, ermöglicht das Arbeiten mit Ebenen, unterstützt Transparenz und ermöglicht ein einfaches Arbeiten mit der Palette. Mit Hilfe dieses Programms werden wir uns das ansehen einfache Beispiele, wie man selbst Pixelkunst zeichnet.

So zeichnen Sie Pixelkunst in Photoshop

Wie bei den traditionellen Arten bildende Kunst, sehr wichtig In der Pixelkunst gibt es Form, Schatten und Licht. Bevor Sie also lernen, wie man Pixelkunst zeichnet, machen Sie sich mit den Grundlagen des Zeichnens vertraut – üben Sie das Zeichnen mit einem Bleistift auf Papier.

Zeichnung „Ballon“

Beginnen wir mit der einfachsten Sache – zeichnen Sie ein Gewöhnliches Luftballon. Erstellen Sie in Photoshop eine neue Datei mit einer Bildschirmauflösung von 72 dpi. Es macht keinen Sinn, die Bildgrößen groß einzustellen – das ist Pixelkunst. Wählen Sie einen harten und undurchsichtigen Pinsel aus und stellen Sie die Größe auf 1 Pixel ein.

Zeichnen Sie einen kleinen gebogenen Halbbogen von links nach rechts und führen Sie ihn von unten nach oben. Denken Sie an die Regeln der Pixelkunst: Behalten Sie die gleichen Proportionen der Segmente bei, verschieben Sie sie um ein Pixel zur Seite, ohne Knicke oder rechte Winkel zu hinterlassen. Spiegeln Sie dann diesen Bogen, indem Sie die Oberseite der Kugel zeichnen.

Zeichnen Sie nach dem gleichen Prinzip die Unterseite der Kugel und den Faden. Füllen Sie den Ball mit dem Füllwerkzeug mit Rot. Jetzt müssen wir nur noch Volumen hinzufügen – unser Ball sieht zu flach aus. Malen Sie einen dunkelroten Streifen auf die untere rechte Seite des Balls und dimmen Sie dann den Bereich. Zeichnen Sie in der oberen linken Ecke des Balls eine Hervorhebung aus weißen Pixeln.

Sehen Sie, wie einfach es ist – der Ball ist fertig!

Zeichnung „Roboter“

Versuchen wir nun, ein Bild auf herkömmliche Weise zu zeichnen, und bereinigen erst dann die Pixel, die gegen die Regeln der Pixelkunst verstoßen.

Öffnen Sie ein neues Dokument und erstellen Sie eine grobe Skizze des zukünftigen Roboters:

Jetzt können Sie alles beseitigen, was Ihnen im Weg steht, und bei Bedarf Pixel hinzufügen:

Zeichnen Sie auf die gleiche Weise den unteren Teil des Roboterkörpers. Verpassen Sie nicht die Gelegenheit, an geeigneten Stellen „perfekte“ gerade Linien zu zeichnen.

Detaillieren Sie den Körper des Roboters. Viele erfahrene Künstler empfehlen, sich vor Beginn der Arbeit eine Palette vorzubereiten – eine Reihe von Farben, die Sie beim Erstellen von Arbeiten im Pixelstil verwenden. Dies ermöglicht höchste Bildintegrität. Erstellen Sie eine Palette auf einer freien Fläche der Photoshop-Arbeitsfläche – beispielsweise in Form von Quadraten oder Farbflecken. Um anschließend die gewünschte Farbe auszuwählen, klicken Sie mit der Pipette darauf.

Sie können mit dem Füllen der Konturen beginnen. „Malen“ Sie den Körper des Roboters mit der Hauptfarbe. Unsere Farbe ist Lavendelblau.

Ändern Sie die Farbe des Umrisses – füllen Sie ihn mit Dunkelblau. Entscheiden Sie, wo sich die Lichtquelle in Ihrer Zeichnung befindet. Bei uns befindet es sich irgendwo oberhalb und rechts vor dem Roboter. Zeichnen wir die Brust unseres Charakters und verleihen ihm Volumen:

Markieren Sie auf der rechten Seite den tiefsten Schatten in der Zeichnung, der entlang der Körperkontur verläuft. Zeichnen Sie aus diesem Schatten von den Rändern zur Mitte hin einen helleren Schatten, der in den vorgesehenen, von der Lichtquelle beleuchteten Bereichen verschwindet:

Fügen Sie dem Roboter in allen Bereichen, in denen Licht reflektiert werden soll, Highlights hinzu:

Verleihen Sie den Beinen des Roboters mithilfe von Schatten und Licht ein zylindrisches Aussehen. Machen Sie auf die gleiche Weise Löcher aus Kreisen auf der Brust des Roboters:

Jetzt verbessern wir das Bild, indem wir den Schattenbereichen des Körpers das zuvor besprochene Pixel-Art-Element – ​​Dithering – hinzufügen.

An den Glanzlichtern muss man nicht schwanken, auch nicht an den Beinen – die sind schon zu klein. Zeichnen Sie mit dunklen und hellen Pixeln eine Reihe Nieten anstelle von Zähnen auf den Kopf des Roboters und fügen Sie außerdem eine lustige Antenne hinzu. Es schien uns, dass die Hand des Roboters nicht sehr gut gezeichnet wurde. Wenn Sie auf dasselbe Problem stoßen, schneiden Sie das Objekt in Photoshop aus und verschieben Sie es nach unten.

Das ist alles – unser lustiger Pixelroboter ist fertig!

Und mit Hilfe dieses Videos erfahren Sie, wie Sie Pixel-Art-Animationen in Photoshop erstellen:

Überzeugen Sie sich selbst und erzählen Sie es Ihren Freunden!

Lesen Sie auch auf unserer Website:

Zeig mehr