tobisnotizblog.de

Pixelart - Ein Lineart erstellen

25-Apr-2019 22:28

Als Pixelart bezeichnet man Rastergrafiken, welche als Stilmittel bewusst kleine Auflösungen und eine reduzierte Farbpalette verwenden. Die Grafiken weisen so eine Optik auf wie sie in Computerspielen der 80'er und 90'er Jahre zu finden war.

Thats me ! Erste Versuche in Pixelart.

Grafiken in Pixelart...

...werden auf Pixelniveau bearbeitet. Das heißt der Grafiker oder Künstler setzt jedes Pixel bewusst einzeln von Hand. Erlaubt sind alle Grafikwerkzeuge, die keine automatischen Farbverläufe, Antialliasing- oder Blendingeffekte erzeugen, da diese dem manuellen Setzen der einzelnen Pixel und der Wahl der Farben durch den Künstler widersprechen.

Am Anfang eines Pixelarts steht für gewöhnlich eine Skizze welche eingescannt wird. Diese wird dann am Rechner mit Linien nachgezeichnet. Es entsteht das sogenannten Lineart, welches die groben Formen der Grafik festhält.

Die Grafik wird anschließend koloriert. Dafür legt sich der Künstler auf eine Farbpalette fest, welche nur sehr wenige Farben aufweist. Farbverläufe und Schattierungen werden mit einer Technik namens Dithering erzeugt. Dabei werden Pixel unterschiedlicher Farbe in gleichmäßigen Mustern platziert. Das Muster variiert dabei in Abhängigkeit des Blendings. Neben dem Dithering wird auch Antialliasing von Hand erstellt. Beides ist Teil des Charakters von Pixelart.

Wichtig ist diese Grafiken in einem verlustfreien Format zu speichern. Dafür bieten sich GIF und PNG an. JPEG ist Verlustbehaftet und bildet aufgrund der Kompression Artefakte. Diese können dem Eindruck des Pixelarts schaden.

Ein kleines Tutorial

Um das ganze nun auch noch etwas anschaulich zu machen habe ich mich mal hingesetzt und zeige euch nun Step by Step wie so ein Pixelart entsteht. Für die Umsetzung braucht ihr einen Stift, Papier und ein Grafikprogramm. In meinem Fall habe ich mit GIMP gearbeitet. Das Ergebnis hat eine Größe von 32 x 32 Pixel.

Schritt Nr. 1 - Vorbereitungen

Als erstes habe ich meine Skizze eingescannt und in GIMP geöffnet. Anschließend wurde das Bild entsättigt, um die Farben zu entfernen. Anschließend habe ich etwas mit dem Kontrast gespielt um die Linien stärker hervorzuheben.

TIP: Macht nicht den selben Fehler wie ich indem ihr die Skizze zu klein zeichnet. Lieber etwas größer. So könnt ihr etwas mehr Abstand mit der Kamera nehmen, das Bild verrauscht nicht so stark und die Linien sind schmaler, was später beim setzen der Konturen hilft.

Nun trefft ihr schon auf die erste knifflige Aufgabe. Wenn ihr eure Zeichnung eingescannt habt, so ist diese in der Regel wesentlich höher aufgelöst als euer Pixelart zum Schluss sein soll.
In meinem Fall hatte der Bildausschnitt eine Größe von 800 x 600 Pixel. Ziel ist jedoch 32x32 Pixel. Ich habe also mit der Auswahlbox mein Motiv vermessen. Die Größe lag bei ca 215x Pixeln. Also habe ich eine Ausschnittsgröße von 256 x 256 Pixeln gewählt, Motiv plus ein wenig Rand.

Da 256 das 8-fache von 32 ist hatte ich somit auch die Größe für meinen "großen Pixel". Statt mit 1 x 1 großen Pixeln zu zeichnen habe ich mir einen Block der Größe 8x8 Pixel angelegt und diesen als Stiftvorlage verwendet. So ergibt sich die grobe Pixeloptik und das Lineart kann später ohne Probleme auf 32x32 Pixel verkleinert werden.

Schritt Nr. 2 - Pixeln

Der Titel sagt schon fast alles, nun wird das Lineart gepixelt. Da ich meine Pixel dem Größenverhältnis der Skizze angepasst habe, musste ich darauf achten beim Pixeln das Raster einzuhalten, damit die großen Pixel nicht überlappen. Als Hilfe habe ich mir ein Raster eingeblendet, welches eine Rasterweite von genau 8 Pixeln hatte. Das Raster habe ich am ersten gesetzten Pixel ausgerichtet. Das Lineart selbst wurde auf einem neuen Layer gezeichnet. Generell habe ich für das gesamte Bild immer nur eine Farbe pro Layer verwendet. So kann ich einzelne Farben bei Bedarf schnell austauschen.

Schritt Nr. 3 - Zuschnitt

Um das Lineart fertigzustellen habe ich das Motiv auf die Größe von 256 x 256 zugeschnitten und anschließend skaliert. Wenn ihr das Skalieren - Werkzeug verwendet achtet darauf das ihr KEINE Interpolation einstellt. So bleiben eure Pixel im Ergebnis knackescharf. Außerdem solltet ihr bei der Größenangabe die Größen in Pixel angeben, in meinem Fall 32x32 Pixel. Prozentangaben sorgen für Ungenauigkeit können ebenfalls zu Weichen Kanten im Ergebnis führen.

Das Lineart hat nun seine finale Größe von 32 x 32 Pixeln. Links ist es deutlich vergrößert, rechts sieht man das Lineart in zweifacher Größe. Generell muss man bei Pixelart immer wieder mal schauen wie ein Pixel im Bild wirkt. Dafür empfiehlt es sich das Bild hin und wieder mal zu verkleinern. Im nächsten Artikel kommt dann Farbe ins Spiel.

Wer sich zu dem Thema mehr belesen möchte, dem empfehle ich die beiden sehr lesenswerten Links. Der erste zeigt die Erstellung eines Pixelarts an einem Beispiel. Der zweite geht näher auf die Techniken ein.

http://makegames.tumblr.com/post/42648699708/pixel-art-tutorial

http://pixeljoint.com/forum/forum_posts.asp?TID=11299

Krita - Das freie Malprogramm

24-Jun-2018 17:37

Seit meiner Kindheit male ich gerne. Früher viel mit Stift und Papier, nun mehr digital am Rechner, wenn es die Zeit zulässt. Bisher habe ich für das digitale Zeichnen GIMP in Kombination mit dem Grafiktablett Bamboo Pen & Touch verwendet. Das Einrichten eines Grafiktabletts ist unproblematisch und auch Druckintensität wird unterstützt. Für einfache Skizze und kleinere Arbeiten also ausreichend.
Jedoch ist es manchmal erforderlich, die Zeichnung häufig und schnell drehen und spiegeln zu können, um Bögen und Kurven besser aus dem Handgelenk malen zu können. Dies ist in GIMP nur möglich indem man das Rotationswerkzeug verwendet, welches dann ein extra Fenster öffnet, in welchem man die Rotation einstellen und bestätigen muss. Das stört leider den Arbeitsfluss. Man muss aber auch sagen, GIMP ist ein Grafikprogramm und nicht speziell fürs Malen ausgelegt.

Ein beliebtes Programm fürs digitale Zeichnen ist Procreate, welches freies Rotieren, Skalieren und Spiegeln unterstützt. Dieses gibt es als App für das iPad, jedoch nicht für Windows. Eine Alternative ist hier Krita. Bei meinem Tablett habe ich die Gestenerkennung beim Zeichnen deaktiviert. Für das Rotieren, Skalieren und Spiegeln habe ich mir jeweils eine Taste als Shortcut belegt. So brauche ich nur die Taste zum Rotieren drücken und kann das Bild dann mit dem Stift zügig in die gewünschte Lage bringen.
Die Software erschienen 2005 und wird von KDE bis heute weiterentwickelt. Krita ist frei verfügbar und nach ein paar Stunden damit kann ich sagen, dass es im Groben und Ganzen alles mitbringt was man zum Zeichnen braucht und sogar noch mehr. Für alle die gerne Zeichnen definitv ein Blick wert.

Uni - Spielprojekt

25-Dec-2017 16:09

Halbzeit der Weihnachtsfesttage. Ich hoffe ihr habt den ersten Tag gut überstanden und noch etwas Platz für die kommenden Mahlzeiten, vom Reserveloch im Gürtel ganz zu schweigen. ;)

Ich habe gerade etwas Zeit und möchte euch ein kleines Uni-Projekt vorstellen.
Ich studiere Medieninformatik und habe in diesem Semester einen Kurs mit dem Schwerpunkt Spieleentwicklung belegt.In dem Kurs werden zum einen technische Konzepte besprochen und zum anderen der Umgang mit Unity vertieft.

Als einen Bestandteil des Kurses sollen alle Studis ein Projekt anfertigen. Der Rahmen ist dabei relativ weit gefasst. Wichtig ist, dass es mit Spielen und Simulationen zu tun hat. Mein Projekt ist ein bereits bestehender Spieleprototyp. In dem Projekt will ich eine Komponente für Audioausgabe schaffen, welche auch für weitere Projekte genutz werden kann. Das ist eine Anforderung an das Projekt. Ansonsten geht es hauptsächlich darum den bestehenden Prototypen spielerisch weiter auszubauen. Viele technische Grundlagen sind dafür bereits geschaffen.

Das Projekt setzt auf Java auf und nutzt LWJGL. Damit lassen sich OpenGL und OpenAL für Grafik und Audio ansprechen. Der Rest stammt aus eigener Feder. Teile davon wurden aus einem alten C# Stand nach Java portiert.

Ich weiß noch nicht genau wohin sich das Spiel entwickelt. Die Ausgangsidee war mal eine Art 2D Jump & Run oder Plattformer zu entwickeln. Aber sowas ist bei mir nie fix.Je nachdem was mich gerade so inspiriert ändert sich das auch gerne. Die Deadline für dieses Projekt ist am 30. Januar. Spätestens dann gibt es ein Update was aus dem Projekt geworden ist. Evtl auch schon mal zwischendurch.

Bis dahin, frohe Restweihnachten.
Tobias

Mein neuer Blog

23-Dec-2017 23:00

Nachdem es in der letzten Zeit sehr ruhig auf meinem Blog geworden ist, mich das Thema Web und Blogging aber nie ganz los gelassen hat, habe ich mich für einen Neustart dieser Website entschieden.

Mal schauen ob es diesmal lebhafter wird.

Beste Grüße, Tobias