Erfahren Sie, wie Sie handgefertigte pixel art in Photoshop zeichnen

Pixelillustrationen eignen sich hervorragend zum Erstellen von Computersymbolen, isometrischen Bildern und sogar ganzen Szenen. Sie können schnell und einfach mit Photoshop mit ein paar schnellen Änderungen an den Voreinstellungen erstellt werden.

Der einzige Nachteil ist jedoch, dass die pixel art am besten aussieht, wenn jedes Pixel von Hand platziert wurde, im Gegensatz zur Verwendung eines Photoshop-Filters. Das ist richtig, von Hand platziert – ich weiß, das klingt ein wenig verrückt, besonders wenn einige Pixelszenen Tausende von Pixeln enthalten. Aber ohne die Handplatzierung kann Ihre pixel art wie ein schlechtes Lo-Res-Bild aussehen, also seien Sie vorsichtig!

Ich denke, eine gute Faustregel, bevor Sie beginnen, ist, dass Sie in der Lage sein sollten, Ihre Kreation klar als eine Gruppe von verschiedenfarbigen quadratischen Steinen zu sehen, aber wenn Sie dann die Augen zusammenkneifen und Ihre Augen verwischen, können Sie sie als Bild erkennen. Stellen Sie sich vor, Sie machen ein Fliesenmosaik, nur brauchen Sie keinen Fugenmörtel.

Unten ist ein vollständiges Pixel-Artwork, wir werden einige der grundlegenderen Teile in dieser Arbeit erstellen.

Software

OK, bereiten wir das Zeichnen vor. Für den Fall, dass Sie keine Kopie von Photoshop haben, gibt es einige kostenlose spezielle Pixel-Zeichenprogramme zum kostenlosen Download:

• Pixel (Mac)
• Grafik Gale (Sieg)
• Weitere Anwendungen finden Sie hier.

Ich habe mit beiden Programmen herumgespielt, bin aber zu Photoshop zurückgekehrt, weil ich an die Tastaturbefehle gewöhnt bin.

Okay, lass uns eine Seite einrichten

1. Öffnen Sie zunächst die Voreinstellungen in Photoshop und stellen Sie die Bildinterpolation auf „Nächster Nachbar“ ein.
2. Erstellen Sie eine neue Seite mit 300 px mal 300 px bei 72 dpi.
3. Wählen Sie das Buntstift-Werkzeug bei 1 Pixel aus. Die Bleistift- und Radiergummi-Werkzeuge sind die einzigen Werkzeuge, die Sie wirklich brauchen.
4. Gelegentlich können Sie den Zauberstab verwenden, um einen zu füllenden Bereich auszuwählen, stellen Sie jedoch sicher, dass Anti-Alias ​​deaktiviert ist.

Wenn Sie das Pinselwerkzeug mit satten 9 Pixeln anstelle von 1 verwendet haben, tritt Anti-Aliasing auf, das den Pixeleffekt mit harten Kanten beeinträchtigt. Bleiben Sie also bei 1 Pixel. „Bleib schlank, bleib gemein“, wie meine Mutter immer zu sagen pflegte.

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 sehen und bearbeiten können. 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, damit ich schnell sehen kann, wie meine Zeichnung aus der Nähe und gleichzeitig auch aus etwas größerer Entfernung aussieht.

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

Beginnen wir mit dem Zeichnen

OK, lasst uns versuchen, so etwas wie dieses offene Buch zu zeichnen. Zeichnen Sie mit dem Stiftwerkzeug um die Kante, um Ihre schwarze Kontur zu erstellen. Füllen Sie dann die flachen Farben der Seite und des Lesezeichens aus.

Erstellen Sie die Idee von Text auf der Seite mit einigen einzelnen Pixellinien. Sehen Sie, wie wir einen leichten Knick in die Linie einfügen, um den Eindruck einer leichten Kurve auf der Seite zu erwecken.

Fügen Sie schließlich einige Markierungen in der Mitte der Seiten und an der Seite des Lesezeichens hinzu. Eine nette kleine Note ist ein einzelnes Pixel-Highlight an der unteren äußeren Ecke jeder Seite, es gibt nur einen Hinweis auf einen Seitenrand, anstatt ein fester Block zu sein.

Sobald Sie die Grundlagen von Umrissen, Farben, Hervorhebungen und Schattierungen beherrschen, können Sie versuchen, andere einfache Formen zu erstellen.

Abgewinkelte Pixellinien

Pixelsymbole wie die oben genannten können als eine Reihe von Linien entworfen werden, die nur 90º zueinander stehen und sehr viel Quadrate und Rechtecke sind. Gelegentlich benötigen Sie jedoch möglicherweise eine Linie in einem Winkel.

Etwas zu beachten ist, dass abgewinkelte Linien am besten aussehen, wenn sie ein regelmäßiges Muster sind. Wenn sie unregelmäßig sind (wie die unten gezeigten), können sie klumpig und grob erscheinen, wenn sie klein betrachtet werden. Das zweite Beispiel unten sind viel glattere isometrische Winkel, die mit Pixelzeichnungen großartig aussehen, aber es ist nicht der 30º “Iso”-Winkel, den Sie im Technischen Zeichenunterricht verwendet haben – es ist tatsächlich etwas näher an 26,5º. 30º ergibt leider eine klumpige Linie bei 100%. Wenn Sie eine Linie ziehen, die regelmäßig 2 Punkte darüber und 1 Punkt nach oben verläuft, erhalten Sie 26,5º.

Sollen wir versuchen, etwas anderes zu zeichnen, das etwas geometrischer ist und mehr dieser Linienmuster verwendet?

Die unregelmäßige Linie sieht bei 100 % klumpig aus.

Glatte Linienmuster in verschiedenen Winkeln.

Lassen Sie uns ein Pixelprotokoll zeichnen

Die Linien entlang der Länge sind einfach, wir wissen jetzt, wie man sie macht, aber wie sieht es mit diesen runden Enden aus?

Diese beiden sind regelmäßige Muster, ändern sich aber von breiten horizontalen Linien zu Quadraten und dann zu vertikalen Linien. Es sieht zerlumpt aus, aber wenn man die Augen schwenkt, scheint es in Ordnung zu sein!

Die Kurve oben rechts am Stammende ist auch das umgekehrte Muster des Abschnitts unten links. Oft zähle ich die Pixel oder merke mir bestimmte Kombinationen. Die Pixelkombination auf dem Kreis ist…

• 3 Quadrate (quer)
• 2
• 111
• 222 (unten)
• 6
• 2
• Erste

Anfangs ist es etwas schwierig, den Dreh raus zu bekommen, wie bei der Verwendung von Bezierkurven in Illustrator, aber Sie bekommen bald ein “Gefühl” dafür. Die Länge des Baumstamms ist einfach: Wir verwenden einfach das 2 entlang 1 Up-System und machen den Baumstamm so lang oder kurz, wie wir wollen.

Kleinere konzentrische Kreise am Ende ergeben ein schönes Ringmuster und einige Bereiche mit dunkleren Schattierungen am unteren Rand des Baumstamms verleihen ihm etwas Tiefe. Wir geben dem Baumstamm zunächst eine flache Tannenfarbe, um dann Tiefe zu erzeugen, können wir Dithering erzeugen, indem wir Pixel mit kontrastierender Farbe auf beiden Seiten unserer Linien für hohes Licht/schwaches Licht platzieren.

Sie können die Muster aufbauen und sie komplexer machen. Seien Sie jedoch vorsichtig – je realistischer und kniffliger Sie versuchen, desto unschärfer kann das Bild erscheinen, wenn es dazu bestimmt ist, in kleiner Größe reproduziert zu werden.

Ich habe ein paar weitere zufällige Pixel in Log Nr. 3 eingefügt, da ich wollte, dass es ein grobes Aussehen hat und sich ein wenig vom Eichhörnchen abhebt.

Für das letzte Protokoll arbeitete ich in einem Bereich mit abgestreifter Rinde und einem kleinen Ast. Ich fand es am besten, zuerst einen Bereich oder Stil fertigzustellen und dann detaillierter daran zu arbeiten. Ich glaube nicht, dass ich den abgestreiften Rindenstamm mit Dithering-Muster von Grund auf neu hätte zeichnen können – stattdessen fügte ich einfach immer wieder Schichten über Schichten hinzu. Einfache Stufen funktionieren am besten!

Unregelmäßige Pixelzeichnung

Lassen Sie uns zu etwas Unregelmäßigerem übergehen, wie einem Eichhörnchen, das auf unserem Baumstamm sitzt. Für etwas Kompliziertes wie dieses ist es am besten, mit Bleistift und Papier zu beginnen.

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

Wie Sie sehen können, sind die Details sehr minimal – ich möchte nur die Grundform und die richtigen Winkel zuerst ausarbeiten. Den Rest erledigen wir in Photoshop.

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

Hier gehe ich mit dem Stiftwerkzeug um mein Eichhörnchen herum und erstelle die schwarze Kontur. Eine Sache, die vermieden werden sollte, ist das Verklumpen, wo sich Umrisspixel auf mehr als einer Seite berühren. Wenn Sie ein zusätzliches Quadrat zeichnen, löschen Sie es einfach mit Ihrem Radiergummi (ebenfalls auf 1 Pixel Breite gehalten, siehe roter Kreis ), es sieht ordentlicher aus und Ihr Publikum wird es Ihnen danken.

Es sieht immer noch ein wenig chaotisch aus, aber es wird sich formen! Keylines innerhalb der Illustration tragen ebenfalls dazu bei, ihr ein mutiges Aussehen zu verleihen. Stellen Sie nur sicher, dass sie eine dunkle Farbe haben, die nicht schwarz ist, um einen gewissen Kontrast zu erzeugen. Nennen Sie mich einen Radikalen, aber ich habe mich für Braun entschieden.

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

Die schwarze Umrissregel ist nicht hart und schnell, ich habe einige schwarze Schlüssellinien unter dem Vorderkiefer und der Pfote gelassen, da es schwierig wurde zu sehen, was los war.

Fazit

Beim manuellen Platzieren, Entfernen und Ändern von Pixeln kommt die Fähigkeit ins Spiel. Manchmal. Aber sobald Sie den Dreh raus haben, können Sie so ziemlich alles zeichnen – alles, was Sie brauchen, ist etwas Geduld. Ich hoffe, dies hilft und inspiriert Sie, selbst großartige Werke zu schaffen!