Einleitung

Hallo! Mein Name ist Hira Karmachela, auch bekannt als BABE ODED. In diesem Beitrag werde ich Tipps zum Erstellen von Pixel-Art-Bäumen und -Wäldern für Tilesets in Clip Studio Paint teilen. Ich bin sicher, dass alle, die diesen Artikel lesen, die Vorteile von Clip Studio Paint gegenüber anderer Grafiksoftware sehr gut kennen.

 

Basierend auf meiner professionellen Erfahrung mit Clip Studio Paint hat diese Software all meine grafischen Bedürfnisse sowohl beim Zeichnen als auch beim Gestalten vollständig erfüllt. Insbesondere möchte ich bei dieser Gelegenheit die Fähigkeiten von Clip Studio Paint bei der Erstellung von Assets für Spiele oder Illustrationen im Pixel-Art-Stil demonstrieren.

 

Ich hoffe, dieser Beitrag bietet interessante Tipps für diejenigen unter Ihnen, die nach Ratschlägen zum Erstellen von Pixel-Art in Clip Studio Paint suchen.

Über Pixel-Art-Tilesets

Pixel-Art ist digitale grafische Kunst, die der Vorläufer der modernen digitalen Grafik ist. Obwohl sie schon seit Jahrzehnten existiert, ist Pixel-Art zeitlos und existiert weiterhin Seite an Seite mit zeitgenössischen visuellen Künsten.

Abgesehen davon, dass sie reine Kunst ist, wird Pixel-Art normalerweise als Spiel-Assets verwendet, die speziell den Pixel- oder 8-Bit-Stil tragen. Bei der Erstellung von Pixel-Spiel-Assets werden Hintergründe normalerweise in Form von Konzeptkunst, Illustrationen und Tilesets erstellt.

 

In diesem Fall eignet sich Pixel-Art gut zur Erstellung von Tilesets, einer Sammlung von Grafiken, die pro Kachelelement erstellt und wiederholt verwendet werden können, um ein breiteres, einheitliches Bild zu erzeugen.

#1 Datei einrichten

Übrigens, bei dieser Arbeit verwende ich die mobile Version von Clip Studio Paint für Android.

Fangen wir an. Wählen Sie 'Neue Datei erstellen', dann erscheint ein Pop-up-Dialogfeld.

Beim Erstellen von Pixel-Art verwende ich normalerweise eine Leinwand mit einer Größe von 128x128 Pixeln und einer Auflösung von 72dpi. Diese Größe ist perfekt, um detaillierte Bilder zu erstellen, die nicht zu eng und nicht zu weit sind, um Pixel anzuordnen.

 

Der nächste wichtige Schritt beim Erstellen von Pixel-Art in Clip Studio Paint ist das Einrichten und Anzeigen des „Gitters“.

Gehen Sie zum Menü 'Ansicht' > 'Gitter'.

 

Sie werden Gitterlinien auf Ihrer Leinwand sehen. Das angezeigte Gitter entspricht jedoch nicht den Anforderungen der Pixel-Art. Deshalb müssen wir es zuerst anpassen.

Gehen Sie zurück zum Menü 'Ansicht' > 'Gitter-/Linealeinstellungen'...

 

Ein Dialogfenster erscheint. Stellen Sie den Startpunkt auf 'Mitte' und den Abstand (D) auf 1px ein. Sie werden Gitterlinien auf der Leinwand sehen, die kleine Quadrate auf der Leinwand bilden.

#2 Farbschema festlegen

Der nächste Schritt, bevor wir mit dem Zeichnen oder Malen von Pixeln beginnen, ist die Festlegung des zu verwendenden Farbschemas. Theoretisch bedeuten 8-Bit-Spiele, dass wir ein Farbschema mit einer Tiefe von 8 Bit verwenden, wobei 1 Bit aus zwei Farben besteht, sodass 8 Bit zwei hoch acht, also 256 Farben, bedeuten.

 

Ich empfehle jedoch, die Anzahl der Farben noch weiter einzuschränken, um das Farbschema an die gewünschten Nuancen anzupassen.

Dafür schlage ich vor, ein eigenes Farbset zu erstellen. Klicken Sie auf das Symbol „Farbset“ in der unteren Leiste und dann auf das Symbol „Farbsets bearbeiten“.

Ein Pop-up-Dialog wird angezeigt. Geben Sie einen Namen für Ihr Farbset ein und klicken Sie dann auf „Neues Set erstellen“.

Wählen Sie nun die Farben aus, die in Ihr Farbset aufgenommen werden sollen. Klicken Sie auf das Symbol „Farbkreis“ in der unteren Leiste. Wählen Sie eine Farbe.

Klicken Sie erneut auf das Symbol „Farbset“ und wählen Sie dann das von Ihnen erstellte Farbset aus. Darin befinden sich noch leere Farbfelder. Füllen wir die ausgewählten Farben einzeln ein. Klicken Sie auf eines der leeren Felder. Klicken Sie dann auf die von uns gewählte Farbe in der unteren linken Ecke. Klicken Sie dann auf das Symbol „Farbe hinzufügen“ unten im rechten Bedienfeld.

Führen Sie diesen Schritt ab der Farbauswahl im „Farbkreis“ aus, bis Sie ein Farbfeld mit den von Ihnen gewählten Farben gefüllt haben.

#3 Die Leinwand kacheln

Bei der Erstellung von Spiel-Assets kann jedes Element eine Größe von etwa 16x16 Pixeln oder 32x32 Pixeln haben. Je kleiner die Elementgröße, desto schwieriger wird es, einen Eindruck zu hinterlassen, da es schwierig ist, Details hinzuzufügen.

 

Dafür werden wir Elemente mit einer Mindestgröße von 32x32 Pixeln erstellen. Um den Pixeling-Prozess zu erleichtern, erstellen wir eine Kachel-Basisschicht.

Klicken Sie auf das Auswahlwerkzeug „Rechteck“ in der linken Werkzeugleiste. Aktivieren Sie dann „Seitenverhältnis-Typ“ und wählen Sie „Länge angeben“, damit wir eine Auswahl mit fester Größe treffen können. Vergessen Sie nicht, „Anti-Aliasing“ zu deaktivieren (ganz links), damit das Pixelbild kein Rauschen erzeugt.

Stellen Sie den Auswahlrahmen auf 32x32 Pixel ein. Tippen Sie dann auf die Leinwand, um eine Auswahl zu treffen.

Verwenden Sie nun das „Füllwerkzeug“, um das Auswahlfeld mit Farbe zu füllen. Wählen Sie eine dunkle Farbe in Ihrem Farbset.

Die erste Kachel wurde erstellt. Verwenden Sie das Auswahlwerkzeug „Rechteck“ erneut und ziehen Sie dann die Auswahl neben die erste Kachel.

Wählen Sie eine andere Farbe, um die zweite Kachel zu erstellen und das zweite Auswahlfeld zu füllen. Wiederholen Sie diesen Schritt, bis Sie die gesamte Leinwand mit Kacheln wie ein Schachbrett gefüllt haben. Sie können diese Ebene als „Basis“ benennen.

#4 Werkzeuge für Pixel-Art einrichten

Wie zuvor beim Auswahlwerkzeug „Rechteck“ eingestellt, müssen wir zum Erstellen von Pixel-Art die Anti-Aliasing-Funktion deaktivieren. Anti-Aliasing ist eine Funktion, die die Kanten digitaler Bildobjekte glatt erscheinen lässt, indem sie die Farbe der umliegenden Beispielpixel hinzufügt und manipuliert.

Sie können „Anti-Aliasing“ im Eigenschaftenpanel einiger Werkzeuge einstellen. Zum Beispiel im folgenden Werkzeug „Figur (Linie)“.

Als Hauptwerkzeug können wir das „Stift“-Werkzeug mit dem Unterwerkzeug „Marker und Punktstift“ verwenden. Dieser Stifttyp erzeugt eine Linienzeichnung mit einer Dicke von 1 Pixel, sodass wir organische Pixelobjekte leicht erstellen können.

Sicherlich benötigen wir das „Radiergummi“-Werkzeug, um unnötige Pixel auf der Arbeit zu löschen. Wählen Sie den Typ „Vektor“, um die Pixel spurlos zu löschen.

Stellen Sie im Eigenschaftenpanel die Pinselgröße auf 1px und „Anti-Aliasing“ auf „deaktiviert“ ein.

#5 Proportionen und Blickwinkel bestimmen

Die Vorbereitungen sind abgeschlossen, jetzt kann die Pixel-Party beginnen. Unser Ziel ist es, einen Hintergrund oder eine Umgebung für den Wald zu erstellen, dafür müssen wir die Objekte darin vergleichen.

Im Spiel gibt es viele verschiedene Blickwinkel. Bei dieser Gelegenheit werden wir eine 3/4-Top-Down-Ansicht verwenden. Dieser Winkel hat seinen Reiz und vermittelt einen 3D-Eindruck, da er es uns ermöglicht, Licht und Tiefe von Objekten zu erkunden.

Um die Ausrichtung des Blickwinkels zu erleichtern, können wir primitive 3D-Materialien verwenden.

Klicken Sie auf das Symbol „Materialien“ in der unteren Leiste. Wählen Sie dann „3D-Würfel“ und klicken Sie auf die Schaltfläche, wie das Bild zeigt, um den Würfel auf der Leinwand zu platzieren.

Nachdem der Würfel auf der Leinwand ist, passen Sie den Winkel des Würfels an, indem Sie auf das Kamerasymbol klicken, wie im Bild unten gezeigt.

Wählen Sie dann den 3/4-Top-Down-Winkel, wie im Bild unten gezeigt.

Öffnen Sie das Ebenen-Panel und wählen Sie die Ebene „Würfel“. Halten Sie die Taste gedrückt, bis das Optionsmenü erscheint. Scrollen Sie und wählen Sie „Rastern“.

Verwenden Sie anschließend „Frei transformieren“, indem Sie auf das entsprechende Symbol in der unteren Leiste klicken, um den Würfel auf eine Kachel oder ca. 32x32 Pixel zu verkleinern.

Jetzt beginnen wir mit dem Zeichnen einfacher Objekte im Wald. Wir beginnen mit dem Zeichnen des Grases. Wählen Sie eine der Kacheln aus und färben Sie sie dann mit der Grundfarbe des Grases in Ihrem Farbset.

Verwenden Sie das „Marker“-Werkzeug, um den Grasbereich mit Graslinien im gewünschten Stil zu füllen. Sie können mit einer dunkleren Farbe als der Grasgrundfarbe beginnen.

Fügen Sie eine weitere hellere Farbe hinzu und füllen Sie dann die Zwischenräume der dunklen Grasstreifen aus.

Jetzt können wir ein Objekt mit dem Verhältnis von Gras als Basis erstellen. Wir beginnen mit der Erstellung der Buschpflanzen.

Verwenden Sie das „Marker“-Werkzeug, um eine Buschform mit der Grundfarbe Ihrer Wahl zu zeichnen. Vergleichen Sie Größe und Winkel mit den Gras- und Würfelobjekten.

Fügen Sie anschließend eine hellere Farbe auf der Form hinzu, um ihr einen Eindruck von Dimension zu verleihen.

Danach können Sie Details mit anderen dunkleren Farben wie Lila und Braun als Schattierungen hinzufügen.

#6 Einen Baum zeichnen

Wenden wir nun die Technik der Büsche an, um einen Baum zu zeichnen.

 

Zuerst zeichnen Sie eine Baumform mit der Grundfarbe. In dieser Phase habe ich die Blätter grün und die Stämme braun gezeichnet.

Fügen Sie als Nächstes eine hellere Farbe hinzu, um Dimension zu erzeugen. Verwenden Sie den Würfel als Winkelhilfe.

Jetzt wirkt die Baumform dimensionaler. Fügen Sie dunkle Farben wie Lila und Braun als Schattierungen hinzu. Fügen Sie dann weitere Farben hinzu, um Details zu verleihen.

Unser Baum ist fast fertig. Für den letzten Schliff lassen Sie die Bäume besser mit dem Grashintergrund verschmelzen. Fügen Sie Grasstreifen am unteren Teil des Baumes hinzu.

#7 Tilesets erstellen

Sobald Sie die Objekte Gras, Büsche und Bäume haben, können wir bereits Tilesets erstellen.

Wir beginnen mit den Gras-Tilesets. Treffen Sie eine Auswahl auf den 9 Kacheln, wie im Bild unten gezeigt.

Füllen Sie es dann mit einer erdigen Grundfarbe.

Erstellen Sie als Nächstes auf der neuen Ebene einen Grasbereich in der Mitte, wie im Bild unten gezeigt.

Zeichnen Sie wie zuvor eine Grastextur über den gesamten Grasbereich.

Formen Sie die Ränder des Grasbereichs mit dem Radiergummi, damit er natürlicher aussieht.

Fügen Sie als Nächstes mit einer dunklen Farbe einen Schatten unter dem Grasbereich hinzu.

Beenden Sie mit einer helleren Farbe, um den Boden strukturierter zu gestalten.

Fügen Sie als Nächstes alle Ebenen zusammen, um diese Gras-Tilesets zu erstellen. Wählen Sie dann die erste Kachel oben links mit 32x32 Pixeln aus.

Klicken Sie auf das Symbol „Kopieren“ in der unteren Leiste. Erstellen Sie dann eine neue Ebene und klicken Sie auf das Symbol „Einfügen“ in der unteren Leiste. Jetzt haben wir eine separate Graskachel.

Wiederholen Sie diesen Schritt für die restlichen 8 Graskacheln.

Jetzt haben wir 9 separate Graskacheln, die dupliziert und weiter angeordnet werden können, um unsere gewünschte Umgebung zu bilden.

Als Nächstes werden die Tilesets für Büsche und Bäume erstellt. Die Schritte sind für beide gleich, daher zeige ich Ihnen stattdessen nur die Erstellung von Baum-Tilesets.

Wählen Sie die Baumebene aus und halten Sie sie gedrückt, bis das Optionsmenü erscheint. Wählen Sie „Ebene duplizieren“.

Verschieben Sie die Baumkopie auf die rechte Kachel. Duplizieren Sie dann die Baumebene erneut.

Passen Sie die Kopie des Baumes so an, dass sie auf jeder Kachel die gleiche Position hat (achten Sie auf jeden Bruchteil eines Pixels).

Jetzt haben wir gruppierte Bäume. Öffnen Sie das Ebenen-Panel. Führen Sie dann die kopierte Baumebene zusammen, indem Sie auf das unten gezeigte Symbol klicken.

Als Nächstes teilen wir diese Baumgruppe in drei separate Kacheln. Wählen Sie das Zentrum der Baumgruppe mit einer 32x32 Pixel großen Rechteckauswahl aus.

Klicken Sie auf die Schaltfläche „Kopieren“ in der unteren Leiste. Gehen Sie zum Ebenen-Panel und erstellen Sie eine neue Ebene. Klicken Sie auf die Schaltfläche „Einfügen“ in der unteren Leiste, und wir haben eine Baumkachel, die vom Cluster getrennt ist.

Machen Sie dasselbe für die restlichen zwei Kacheln, bis wir drei separate Baumkacheln haben.

#8 Tilesets anordnen

Versuchen wir nun, die von uns erstellten Tilesets so anzuordnen, dass eine Waldumgebung entsteht. Die Methode ist sehr einfach, wir müssen nur die benötigte Kachelebene duplizieren.

Platzieren Sie die Kacheln dann an bestimmten Stellen, damit sie sich miteinander verbinden und eine Umgebung bilden.

Lassen Sie alle Graskacheln auf der untersten Ebene.

Wiederholen Sie diesen Schritt für jedes benötigte Kachelelement. Halten Sie die Buschkachel und alle Baumkacheln über der Grasebene.

Schauen wir uns nun an, wie alle Ebenen entsperrt und alle Kacheln miteinander verbunden sind, um die Waldumgebung zu bilden.

#9 Bild exportieren und veröffentlichen

Unsere Arbeit ist abgeschlossen und jetzt sind wir bereit, sie zu exportieren und zu veröffentlichen. Aber wir müssen zuerst beachten, dass die Bildgröße derzeit nur 128x128 Pixel beträgt, was zu klein ist, um veröffentlicht zu werden.

Deshalb müssen wir das Bild zuerst in der Größe ändern, ohne die Qualität der Pixel zu zerstören.

Gehen Sie zum Menü 'Bearbeiten' > (scrollen) 'Bildauflösung ändern'...

Ein Pop-up-Dialog wird angezeigt. Ändern Sie die Bildgröße auf 1080x1080 Pixel oder die Größe, die Sie benötigen. Wählen Sie dann im Abschnitt „Interpolationsmethode“ „Harte Kanten“, um die Qualität der Pixel zu erhalten, damit sie kein Rauschen erzeugen.

Das Bild wird vergrößert und Sie erhalten mehr Pixel im Bild.

Exportieren wir das Bild nun als PNG, um es auf verschiedenen digitalen Plattformen oder Anwendungen einfach anzeigen zu können.

Gehen Sie zum Menü 'Datei' > 'Exportieren (Einzelne Ebene)'.

Wählen Sie dann PNG als Exportergebnis. Stimmen Sie allen bestehenden Einstellungen zu, wenn Sie keine weiteren Export-Einstellungen hinzufügen möchten.

Die Exportdatei wurde in Ihrem Telefonspeicher gespeichert.

Das Interessanteste an der mobilen Version von Clip Studio Paint ist, dass wir unsere Arbeit mit einfachen Schritten sofort in sozialen Medien veröffentlichen können.

Gehen Sie zum Menü 'Datei' > 'Schnell teilen'...

Ein Pop-up-Dialog wird angezeigt. Wählen Sie dann die sozialen Medien aus, in denen wir unsere Arbeit veröffentlichen werden. Für diesen Anlass habe ich Twitter gewählt.

Das System verbindet sich und öffnet die Twitter-Anwendung, um einen neuen Tweet mit unserer angehängten Arbeit zu erstellen.

OK! Das ist alles, was ich teilen kann. Ich hoffe, es ist nützlich und bitte unterstützen Sie mich, weitere Tipps zu geben.