So erstellen Sie Pixelkunst mit Photoshop

Im Gegensatz zu normaler Kunst besteht Pixelkunst aus einer Farbfüllung pro Pixel, was zu einem geringen Detaillierungsgrad führt. Aber trotzdem beeinträchtigt es nicht die Anzahl der Handlungsstränge, die es vermitteln kann.

In diesem Tutorial zeige ich, wie man mit Photoshop eine einfache Pixelkunst erstellt (ich verwende Photoshop Elements, aber die Schritte sollten für die Vollversion von Photoshop ziemlich ähnlich sein).

Sie können diese Technik auch für die Spieleentwicklung verwenden, wenn Sie Level-Sprites oder einen spiel-Charakter erstellen.

Also fangen wir an!

Schritt 1: Erstellen eines neuen Bildes

• Klicken Sie in Photoshop auf Datei -> Neu -> Leere Datei...

• Stellen Sie die Breite und Höhe auf einen kleinen Wert ein (in meinem Fall beginne ich mit der Erstellung einer Bodenkachel, sodass Breite und Höhe auf 16 eingestellt sind)
• Stellen Sie den Farbmodus auf RGB-Farbe ein und klicken Sie dann auf OK

• Das neue leere Bild wird angezeigt (Sie können hineinzoomen, indem Sie Strg und + drücken)

• Wählen Sie das Bleistift-Werkzeug und stellen Sie dessen Größe auf 1 px und die Deckkraft auf 100 % ein.

Schritt 2: Malen der Pixel

• Jetzt sind wir bereit zum Malen (ich beginne mit der Herstellung einer Bodenfliese mit dem Gras darauf)

Wie Sie sehen können, ist das resultierende Bild ziemlich klein (ich werde am Ende des Artikels darauf eingehen, wie man eine größere Kachel erstellt).

• In der Zwischenzeit habe ich den gleichen Vorgang für drei weitere Elemente meiner Kunst wiederholt (ein Haus, einen Zaun und einen Baum).

• Jetzt ist es an der Zeit, die Bilder zu kombinieren. Hier ist das Endergebnis:

Um das Bild zu skalieren, ohne dass es Pixel verliert, müssen Sie die nächsten Schritte ausführen:

• Gehen Sie zu Bild -> Größe ändern -> Bildgröße...

• Stellen Sie die Breite auf einen größeren Wert ein (in meinem Fall stelle ich sie auf 784 Pixel ein), die Höhe sollte proportional skaliert werden.

Wenn Sie nun auf „OK“ klicken, erscheint das Bild verschwommen, da wir den Skalierungsalgorithmus wie folgt auf "Nearest Neighbor" ändern müssen:

Und hier ist das skalierte Bild (Tipp: Klicken Sie auf das Bild, um es zu vergrößern):

Bonus: Füllen des Pixelbereichs

Nehmen wir an, Sie haben Ihr Pixelzeichen fertig gezeichnet und müssen das Innere mit einer Volltonfarbe füllen.

Normalerweise machen Sie das mit dem Farbeimer-Werkzeug, aber Sie werden feststellen, dass einige Pixel herausragen:

Um dies zu vermeiden, müssen wir das Anti-Aliasing im Paint Bucket Tool deaktivieren:

Viel besser!