Lernen Sie, wie man handgefertigte Pixelkunst in Photoshop zeichnet

Pixelillustrationen eignen sich hervorragend für die Erstellung von Computersymbolen, isometrischen Bildern und sogar ganzen Szenen. Sie können schnell und einfach mit Photoshop erstellt werden, wobei die Voreinstellungen ein paar Mal geändert werden.

Der einzige Nachteil ist jedoch, dass die Pixelgrafik am besten aussieht, wenn jedes Pixel von Hand platziert wurde, anstatt einen Photoshop-Filter zu verwenden. Richtig, von Hand platziert - ich weiß, das klingt ein bisschen verrückt, vor allem, wenn einige Pixelszenen Tausende von Pixeln enthalten. Aber ohne die Platzierung der Hand kann Ihre Pixel-Grafik wie ein schlechtes Lo Res-Bild aussehen!

Ich denke, eine gute Faustregel vor dem Start ist, dass Sie in der Lage sein sollten, Ihre Kreation klar als eine Gruppe von verschiedenfarbigen quadratischen Ziegeln zu sehen. Stellen Sie sich vor, Sie machen ein Fliesenmosaik, nur Sie brauchen keine Fugenmasse.

Im Folgenden finden Sie ein komplettes Stück Pixel-Artwork. Wir werden einige der grundlegenderen Elemente in dieser Arbeit erstellen.

Software

OK, lass uns zum Zeichnen einrichten. Für den Fall, dass Sie keine Kopie von Photoshop haben, stehen einige kostenlose Pixel-Zeichenprogramme zum kostenlosen Download zur Verfügung:

  • Pixen (Mac)
  • Grafiksturm (Win)
  • Weitere Apps finden Sie hier.

Ich hatte ein Spiel mit beiden Programmen, kam aber zu Photoshop zurück, weil ich die Tastaturbefehle gewohnt bin.

Okay, lass uns eine Seite einrichten

  1. Öffnen Sie zunächst die Voreinstellungen in Photoshop und setzen Sie die Bildinterpolation auf "Nächster Nachbar".
  2. Erstellen Sie eine neue Seite 300 x 300 Pixel bei 72 dpi.
  3. Wählen Sie das Stiftwerkzeug mit 1 Pixel. Die Werkzeuge für Bleistift und Radiergummi sind die einzigen, die Sie wirklich benötigen.
  4. Gelegentlich können Sie mit dem Zauberstab einen Bereich zum Ausfüllen auswählen. Stellen Sie einfach sicher, dass Anti Alias ​​deaktiviert ist.

Wenn Sie das Pinselwerkzeug mit satten 9 Pixeln anstelle von 1 verwendet haben, tritt Anti-Aliasing auf, und der harte Randpixeleffekt wird beeinträchtigt. Also bleib bei 1 Pixel. "Lass es mager, halte es gemein", sagte meine Mutter.

Wenn Ihre Pixelzeichnung mit 100% (tatsächliche Größe) angezeigt wird, ist das Stiftwerkzeug mit einer Breite von 1 Pixel sehr klein, sodass Sie es möglicherweise schwer finden, es zu sehen und zu bearbeiten. Eine Idee ist, die Ansicht auf 800% zu vergrößern, damit Sie sehen können, was Sie tun. Ich habe oft ein zweites Fenster in Photoshop mit der gleichen Bildschirmansicht bei 200% geöffnet, so dass ich schnell sehen kann, wie meine Zeichnung aus der Nähe und auch aus etwas weiter Entfernung aussieht.

Wir können unser Arbeitsdokument als PSD-Datei speichern und später für die Verwendung im Web als GIF-Datei exportieren. Wir können die Datei danach auch vergrößern und in ein TIF für den CMYK-Druck umwandeln.

Lean & Mean

Beginnen wir mit dem Zeichnen

OK, lass uns mal so etwas wie dieses offene Buch zeichnen. Zeichnen Sie mit dem Stiftwerkzeug um den Rand, um Ihre schwarze Kontur zu erstellen. Füllen Sie dann die flachen Farben der Seite und der Buchmarke aus.

Erstellen Sie die Idee des Textes auf der Seite mit einzelnen Pixelzeilen. Sehen Sie, wie wir einen leichten Knick in die Linie setzen, um den Eindruck einer leichten Kurve auf der Seite zu vermitteln.

Fügen Sie schließlich einige Highlights in der Mitte der Seiten und auf der Seite des Lesezeichens hinzu. Eine nette kleine Berührung ist ein einzelnes Pixel-Highlight an der unteren äußeren Ecke jeder Seite. Es gibt nur einen Hinweis auf einen Seitenkanten statt eines festen Blocks.

Wenn Sie die Grundlagen von Konturen, Farben, Hervorhebungen und Schattierungen kennen, können Sie andere einfache Formen erstellen.

Winklige Pixellinien

Pixelsymbole wie die oben genannten können als eine Reihe von Linien gestaltet werden, die nur 90 ° zueinander sind und sehr viele Quadrate und Rechtecke sind. Gelegentlich benötigen Sie jedoch eine Linie in einem Winkel.

Zu beachten ist, dass abgewinkelte Linien am besten aussehen, wenn sie regelmäßig sind. Wenn sie unregelmäßig sind (wie die unten gezeigten), können sie klein wirken, wenn sie klein sind. Das zweite Beispiel unten ist viel glattere isometrische Winkel, die mit Pixelzeichnungen gut aussehen, aber es ist nicht der 30º "iso" -Winkel, den Sie in der Technischen Zeichenklasse verwendet haben - er liegt tatsächlich etwas näher bei 26,5º. 30º ergibt leider eine klumpige Linie bei 100%. Wenn Sie eine Linie machen, die regelmäßig 2 Punkte über und 1 Punkt nach oben verläuft, erhalten Sie 26,5 °.

Sollen wir etwas anderes zeichnen, das etwas geometrischer ist, und mehr Linienmuster verwenden?

Die unregelmäßige Linie wird bei 100% klumpig aussehen.

Glatte Linienmuster in verschiedenen Winkeln.

Zeichnen wir ein Pixelprotokoll

Die Zeilen entlang der Länge sind einfach, wir wissen, wie man sie jetzt macht, aber wie ist es mit dieser Runde??

Diese beiden Muster sind reguläre Muster, wechseln jedoch von breiten horizontalen Linien hinunter zu Quadraten und dann zu vertikalen Linien. Es sieht ein wenig gezackt aus, aber wenn Sie Ihre Augen verwischen, sieht es richtig aus!

Die Kurve oben rechts am Stammende ist auch das umgekehrte Muster des linken unteren Abschnitts. Ich zähle oft die Pixel oder erinnere mich an bestimmte Kombinationen. Die Pixel-Combo auf dem Kreis ist…

  • 3 Quadrate (quer)
  • 2
  • 111
  • 222 (runter)
  • 6
  • 2
  • 1

Ein wenig knifflig, wenn man sich zunächst mit dem Einfügen von Bezier-Kurven in Illustrator vertraut macht, aber man bekommt bald ein "Gefühl" dafür. Die Länge des Protokolls ist einfach: Wir verwenden einfach das 2-in-1-System und machen das Protokoll so lang oder kurz, wie wir möchten.

Kleinere konzentrische Kreise am Ende ergeben ein schönes Ringmuster und einige Bereiche mit dunkleren Schattierungen unten im Stamm geben ihm Tiefe. Wir geben dem Protokoll zunächst eine flache Tannenfarbe. Um Tiefe zu erzeugen, können Sie Dithering erzeugen, indem Sie kontrastierende Pixel auf beiden Seiten unserer Linien für starkes Licht / schwaches Licht platzieren.

Sie können die Muster aufbauen und komplexer gestalten. Vorsicht, je realistischer und kniffliger Sie werden, desto unschärfer erscheint das Bild, wenn es für die Wiedergabe mit geringer Größe vorgesehen ist.

Ich habe noch ein paar zufällige Pixel in Log # 3 eingefügt, da ich wollte, dass es grob aussieht und etwas mit dem Eichhörnchen kontrastiert.

Für das letzte Protokoll habe ich in einem Bereich mit abgestreifter Rinde und einem kleinen Zweig gearbeitet. Ich fand es am besten, zuerst einen Bereich oder einen Stil zu vervollständigen und dann mehr Details darin einzuarbeiten. Ich glaube nicht, dass ich das abgestreifte Rindenprotokoll mit Dithering-Muster von Grund auf neu zeichnen konnte - stattdessen fügte ich einfach weitere Ebenen über den oberen Ebenen hinzu. Einfache Etappen funktionieren am besten!

Unregelmäßige Pixelzeichnung

Lassen Sie uns auf etwas unregelmäßigeres gehen, wie ein Eichhörnchen, das auf unserem Baumstamm sitzt. Für so komplizierte Dinge ist es am besten, mit Bleistift und Papier zu beginnen.

Zuerst habe ich auf meiner Seite ein isometrisches Quadrat gezeichnet, um die richtigen Abmessungen zu erhalten. Da wir dieses spezielle Beispiel für redaktionelle Zwecke verwenden, habe ich ein Foto als Referenz verwendet. Dann fange ich an zu skizzieren. Ich achte besonders auf den Winkel an beiden Ohren und Füßen, da sie den isometrischen Linien folgen sollen.

Wie Sie sehen können, ist das Detail sehr minimal - ich möchte nur die Grundform und die korrekten Winkel zuerst herausarbeiten. Wir erledigen den Rest der Arbeit in Photoshop.

Bringen Sie die Skizze ein, legen Sie eine neue Ebene auf und spiegeln Sie die Deckkraft, damit Sie die Pixel, die Sie erstellen möchten, deutlich sehen können. Es ist keine feste Regel, aber ich finde Pixelzeichnungen am besten, wenn sie schwarze Konturen haben.

Hier gehe ich mit dem Bleistiftwerkzeug um mein Eichhörnchen und erstelle den schwarzen Umriss. Eine Sache, die vermieden werden sollte, ist das Zusammenklumpen, wenn Umrisspixel sich auf mehr als einer Seite berühren. Wenn Sie ein zusätzliches Quadrat zeichnen, löschen Sie es einfach mit Ihrem Radiergummi-Werkzeug (auch auf 1 Pixel Breite gehalten, siehe roter Kreis). Es wird schöner aussehen und Ihr Publikum wird es Ihnen danken.

Es sieht immer noch etwas unordentlich aus, aber es wird sich formen! Keylinien in der Abbildung helfen auch dabei, ein mutiges Aussehen zu erzielen. Stellen Sie nur sicher, dass sie eine dunkle Farbe haben, die nicht schwarz ist, um etwas Kontrast zu erzeugen. Nennen Sie mich ein Radikaler, aber ich habe mich bei dieser Frage mit braun entschieden.

Wenn die Form vollständig ist, füllen Sie den inneren Bereich mit einer schönen Mitteltonfarbe (weiches Braun) und verwenden Sie möglicherweise eine helle Farbe, um einige Highlights hervorzuheben.

Die schwarze Umrissregel ist nicht hart und schnell, ich habe ein paar schwarze Schlitze hinter dem Vorderbacken und der Pfote gelassen, da es immer schwieriger wurde zu sehen, was los war.

Fazit

Beim Einsetzen, Entfernen und Ändern von Pixeln kommt die Fertigkeit zum Einsatz. Manchmal. Aber wenn Sie erst einmal den Dreh raus haben, können Sie fast alles zeichnen - Sie brauchen nur etwas Geduld. Ich hoffe, das hilft und inspiriert Sie dazu, großartige eigene Arbeit zu schaffen!

Zusätzliche Ressourcen

Hier finden Sie einige Ressourcen zum weiteren Lesen von Pixeln:

  • Marks Pixel Art Tutorial (zeigt detailliertere Pixelschattierungen und das Erstellen von Pixelzeichen, "Sprites" genannt).
  • Erstellen von Pixel Art Painting Pixel für Pixel - Tipps und Anleitungen. Eine gute Liste von zu besuchenden Pixelseiten.
  • Über 20 inspirierende Pixel-Künstler, Tutorials und Ressourcen - eine Sammlung von Pixel-Kunst-Ressourcen hier auf Psdtuts+.
  • Einige Pixeldateien habe ich als GIF-Dateien gezeichnet und animiert. Sehen Sie das Eichhörnchen in Aktion!

Abonnieren Sie den Psdtuts + RSS-Feed für die besten Photoshop-Artikel und Artikel im Internet.