{"id":54617,"date":"2019-12-30T00:00:00","date_gmt":"2019-12-29T21:00:00","guid":{"rendered":"https:\/\/prohoster.info\/blog\/blog_prohoster\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu"},"modified":"2020-02-18T14:02:39","modified_gmt":"2020-02-18T11:02:39","slug":"piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","status":"publish","type":"post","link":"https:\/\/prohoster.info\/de\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","title":{"rendered":"Pixel-Art f\u00fcr Anf\u00e4nger: eine Gebrauchsanweisung","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Pixel-Art
\n
\nIndie-Entwickler m\u00fcssen oft mehrere Rollen gleichzeitig \u00fcbernehmen: Game Designer, Programmierer, Komponist, K\u00fcnstler. Und wenn es um das Visuelle geht, entscheiden sich viele f\u00fcr Pixel-Art \u2013 auf den ersten Blick scheint es einfach. Doch um es sch\u00f6n zu gestalten, ben\u00f6tigt man viel Erfahrung und spezielle F\u00e4higkeiten. Ich habe ein Tutorial f\u00fcr die gefunden, die gerade dabei sind, die Grundlagen dieses Stils zu lernen: mit einer Beschreibung der speziellen Software und Zeichentechniken anhand von zwei Sprites.<\/a><\/noindex><\/p>\n

Hintergrund<\/h2>\n

\nPixel-Art ist eine Form der digitalen Kunst, bei der \u00c4nderungen auf Pixelebene vorgenommen werden. Sie wird haupts\u00e4chlich mit der Grafik von Videospielen der 80er und 90er Jahre assoziiert. Damals mussten K\u00fcnstler die Einschr\u00e4nkungen von Speicherplatz und niedriger Aufl\u00f6sung ber\u00fccksichtigen. Heute ist Pixel-Art in Spielen und als Kunststil insgesamt immer noch popul\u00e4r, trotz der M\u00f6glichkeit, realistische 3D-Grafik zu erstellen. Warum? Selbst abgesehen von der Nostalgie ist es eine angenehme und lohnenswerte Herausforderung, in solchen strengen Rahmenbedingungen ein gro\u00dfartiges Werk zu schaffen.<\/p>\n

Die Einstiegsh\u00fcrde in die Pixel-Art ist im Vergleich zur traditionellen Kunst und 3D-Grafik relativ niedrig, was Indie-Entwickler anzieht. Doch das bedeutet keineswegs, dass es einfach sein wird, ein Spiel in diesem Stil zu beenden. Ich habe viele Indie-Entwickler mit Pixel-Art Metroidvanias auf Crowdfunding-Plattformen gesehen. Sie dachten, sie w\u00fcrden alles in einem Jahr abschlie\u00dfen, aber tats\u00e4chlich brauchten sie noch sechs Jahre.<\/b> Metal Slug 3 (Arcade). SNK, 2000 <\/p>\n

\"Pixel-Art
\nPixel-Art auf dem Niveau, auf dem die meisten sie erstellen m\u00f6chten, erfordert viel Zeit, und es gibt nur sehr wenige kurze Tutorials. Wenn man mit 3D-Modellen arbeitet, kann man diese drehen, verformen, Teile davon bewegen, Animationen von einem Modell auf ein anderes kopieren und so weiter. Hochwertige Pixel-Art kostet fast immer viel M\u00fche, um die Pixel auf jedem Frame pr\u00e4zise zu platzieren.<\/i><\/p>\n

Insgesamt habe ich gewarnt.<\/p>\n

Insgesamt habe ich gewarnt.<\/p>\n

Und jetzt ein wenig \u00fcber meinen Stil: In erster Linie zeichne ich Pixel-Art f\u00fcr Videospiele und finde darin meine Inspiration. Insbesondere bin ich ein Fan von Famicom\/NES, 16-Bit-Konsolen und Arcade-Spielen der 90er Jahre. Die Pixel-Art meiner Lieblingsspiele aus dieser Zeit kann man als lebhaft, selbstbewusst und klar (aber nicht zu stark) beschreiben; sie l\u00e4sst sich nicht als hart und minimalistisch bezeichnen. In diesem Stil arbeite ich selbst, aber ihr k\u00f6nnt leicht Ideen und Techniken aus diesem Tutorial verwenden, um v\u00f6llig andere Dinge zu kreieren. Studiert die Arbeiten verschiedener K\u00fcnstler und erstellt Pixel-Art, die euch gef\u00e4llt!<\/p>\n

Software<\/h2>\n

\n\"Pixel-Art
\n
\nBasis digitale Werkzeuge f\u00fcr Pixel-Art sind Zoom und Bleistift, um Pixel zu platzieren. Au\u00dferdem sind Linie, Form, Auswahl, Verschieben und Farbeimer n\u00fctzlich. Es gibt viele kostenlose und kostenpflichtige Software mit solchem Werkzeugen. Ich werde \u00fcber die beliebtesten und die, die ich selbst benutze, sprechen.<\/p>\n

Paint (kostenlos)<\/h3>\n

\nWenn ihr Windows habt, ist das integrierte Paint eine primitive Software, aber sie bietet alle Werkzeuge f\u00fcr Pixel-Art.<\/p>\n

Piskel<\/a><\/noindex> (kostenlos)<\/h3>\n

\nEin unerwartet funktionaler Pixel-Art-Editor, der \u00fcber den Browser l\u00e4uft. Man kann die Arbeit als PNG oder animiertes GIF exportieren. Eine gro\u00dfartige Option f\u00fcr Anf\u00e4nger.<\/p>\n

GraphicsGale<\/a><\/noindex> (kostenlos)<\/h3>\n

\nGraphicsGale ist der einzige Editor, von dem ich geh\u00f6rt habe, der speziell f\u00fcr Pixel-Art entwickelt wurde und Animationswerkzeuge beinhaltet. Er wurde von der japanischen Firma HUMANBALANCE entwickelt. Seit 2017 ist er kostenlos erh\u00e4ltlich und erfreut sich weiterhin gro\u00dfer Beliebtheit, trotz des wachsenden Interesses an Aseprite. Leider l\u00e4uft er nur unter Windows.<\/p>\n

Aseprite<\/a><\/noindex> ($)<\/h3>\n

\nVermutlich der beliebteste Editor im Moment. Open Source<\/a><\/noindex>, viele M\u00f6glichkeiten, aktive Unterst\u00fctzung, Versionen f\u00fcr Windows, Mac und Linux. Wenn ihr ernsthaft Pixel-Art macht und noch nicht den richtigen Editor gefunden habt, k\u00f6nnte das genau das Richtige f\u00fcr euch sein.<\/p>\n

GameMaker Studio 2<\/a><\/noindex> ($$+)<\/h3>\n

\nGameMaker Studio 2 ist ein ausgezeichneter 2D-Werkzeug mit einem guten Sprite-Editor. Wenn ihr Pixel-Art f\u00fcr eure eigenen Spiele erstellen wollt, ist es sehr praktisch, alles in einer Software zu erledigen. Momentan benutze ich diese Software bei der Arbeit an UFO 50<\/a><\/noindex>, einer Sammlung von 50 Retro-Spielen: Die Sprites und Animationen erstelle ich in GameMaker, die Tilesets in Photoshop.<\/p>\n

Photoshop<\/a><\/noindex> ($$$+)<\/h3>\n

\nPhotoshop ist eine teure Software, die im Abonnement angeboten wird und nicht f\u00fcr Pixel-Art ausgelegt ist. Ich empfehle den Kauf nicht, wenn Sie keine hochaufl\u00f6senden Illustrationen erstellen oder komplexe Manipulationen an Bildern vornehmen m\u00fcssen, wie ich. Man kann damit statische Sprites und Pixelarbeiten erstellen, aber es ist im Vergleich zu spezialisierter Software (wie GraphicsGale oder Aseprite) ziemlich komplex.<\/p>\n

Sonstiges<\/h2>\n

\n\"Pixel-Art
\nMein Set f\u00fcr Pixel-Art. Alles schwarz, ist mir erst jetzt aufgefallen.<\/i><\/p>\n

Grafiktablett ($$+)<\/h3>\n

\nIch empfehle Grafiktabletts f\u00fcr jede Arbeit mit digitalen Illustrationen, um das Karpaltunnelsyndrom zu vermeiden. Es ist viel einfacher, es zu verhindern, als es zu behandeln. Sobald Sie Schmerzen versp\u00fcren, wird es nur schlimmer \u2013 k\u00fcmmern Sie sich von Anfang an um sich selbst. Da ich fr\u00fcher mit der Maus gezeichnet habe, f\u00e4llt es mir nun schwer, Spiele zu spielen, in denen man Tasten dr\u00fccken muss. Momentan benutze ich das Wacom Intuos Pro S.<\/p>\n

Handgelenksupport ($)<\/h3>\n

\nWenn Sie sich kein Tablet leisten k\u00f6nnen, kaufen Sie sich zumindest einen Handgelenksupport. Mir gef\u00e4llt der Mueller Green Fitted Wrist Brace am besten. Die anderen sind entweder zu eng oder bieten nicht genug Unterst\u00fctzung. Unterst\u00fctzungen lassen sich problemlos online bestellen.<\/p>\n

96\u00d796 Pixel<\/h2>\n

\n\"Pixel-Art
\nFinal Fight. Capcom, 1989.<\/i><\/p>\n

Lass uns anfangen! Wir beginnen mit dem Sprite eines Charakters von 96\u00d796 Pixeln. Zum Beispiel habe ich einen Ork gezeichnet und ihn auf einen Screenshot aus Final Fight (Bild oben) gesetzt, damit Sie den Ma\u00dfstab verstehen. Das ist ein gro\u00dfes<\/b> Sprite f\u00fcr die meisten Retro-Spiele, Screenshot-Gr\u00f6\u00dfe: 384\u00d7224 Pixel.<\/p>\n

Bei einem so gro\u00dfen Sprite ist es einfacher, die Technik zu zeigen, \u00fcber die ich sprechen m\u00f6chte. Auch die pixelgenaue Zeichnung \u00e4hnelt mehr traditionellen Formen der Kunst (wie Zeichnen oder Malen), mit denen Sie m\u00f6glicherweise besser vertraut sind. Nachdem wir die grundlegenden Techniken gelernt haben, werden wir zu kleineren Sprites \u00fcbergehen.<\/p>\n

1. W\u00e4hlen Sie eine Palette<\/h2>\n

\n\"Pixel-Art
\n
\nPixel ist ein viel tieferes Konzept in der Pixel-Art als in anderen digitalen Bereichen. Pixel-Art wird durch ihre Einschr\u00e4nkungen definiert, wie zum Beispiel Farben. Es ist wichtig, die richtige Palette auszuw\u00e4hlen, da sie Ihren Stil bestimmen hilft. Aber zu Beginn rate ich, nicht \u00fcber Paletten nachzudenken und eine der bestehenden auszuw\u00e4hlen (oder einfach ein paar zuf\u00e4llige Farben) \u2013 Sie k\u00f6nnen diese jederzeit \u00e4ndern.<\/p>\n

F\u00fcr dieses Tutorial werde ich eine Palette aus 32 Farben verwenden, die wir f\u00fcr UFO 50<\/a><\/noindex>. F\u00fcr Pixelart werden sie oft aus 32 oder 16 Farben zusammengestellt. Unsere ist f\u00fcr eine fiktive Konsole entwickelt, die irgendwo zwischen Famicom und PC Engine erscheinen k\u00f6nnte. Sie k\u00f6nnen sie verwenden oder eine andere \u2014 das Tutorial h\u00e4ngt \u00fcberhaupt nicht von der gew\u00e4hlten Palette ab.<\/p>\n

2. Grobe Konturen<\/h2>\n

\n\"Pixel-Art
\n
\nBeginnen wir die Zeichnung mit dem Bleistift-Werkzeug. Zeichnen Sie eine Skizze, so wie Sie es mit einem normalen Stift und Papier tun w\u00fcrden. Nat\u00fcrlich \u00fcberschneiden sich Pixelkunst und traditionelle Kunst, besonders wenn es um solche gro\u00dfen Sprites geht. Meine Beobachtungen zeigen, dass starke Pixelk\u00fcnstler mindestens gut von Hand zeichnen k\u00f6nnen und umgekehrt. Daher ist es immer n\u00fctzlich, die Zeichenskills zu entwickeln.<\/p>\n

3. Ausarbeitung der Konturen<\/h2>\n

\n\"Pixel-Art
\n
\nVerfeinern Sie die Konturen: Entfernen Sie \u00fcberfl\u00fcssige Pixel und reduzieren Sie die Dicke jeder Linie auf einen Pixel. Aber was genau ist \u00fcberfl\u00fcssig? Um diese Frage zu beantworten, m\u00fcssen wir uns mit Pixel-Linien und Unregelm\u00e4\u00dfigkeiten auseinandersetzen.<\/p>\n

Unregelm\u00e4\u00dfigkeiten<\/h3>\n

\nSie m\u00fcssen lernen, zwei grundlegende Linien in Pixelkunst zu zeichnen: gerade und kurvenf\u00f6rmig. Mit Stift und Papier kommt es auf die Muskelkontrolle an, aber wir arbeiten mit winzigen, bunten Bl\u00f6cken.<\/p>\n

Der Schl\u00fcssel zum Zeichnen korrekter Pixel-Linien sind die Unregelm\u00e4\u00dfigkeiten. Das sind einzelne Pixel oder kleine Segmente, die die Gl\u00e4tte der Linie st\u00f6ren. Wie ich bereits sagte, hat ein einzelner Pixel in der Pixelkunst eine enorme Bedeutung, daher k\u00f6nnen Unregelm\u00e4\u00dfigkeiten die gesamte \u00c4sthetik ruinieren. Stellen Sie sich vor, Sie ziehen eine gerade Linie auf Papier, und pl\u00f6tzlich schl\u00e4gt jemand auf den Tisch: Unregelm\u00e4\u00dfigkeiten in der Pixelkunst sehen genauso aus wie eine zuf\u00e4llige Kringelei.<\/p>\n

Beispiele:<\/p>\n

\"Pixel-Art
\nGerade<\/i><\/p>\n

\"Pixel-Art
\nKurven<\/i><\/p>\n

Unregelm\u00e4\u00dfigkeiten treten bei Kurven auf, wenn die L\u00e4nge der Linienst\u00fccke nicht gleichm\u00e4\u00dfig zunimmt oder abnimmt.<\/p>\n

Unregelm\u00e4\u00dfigkeiten vollst\u00e4ndig zu vermeiden ist unm\u00f6glich \u2014 in all Ihren Lieblings-Retro-Spielen sind sie vorhanden (es sei denn, die Pixelkunst besteht ausschlie\u00dflich aus einfachen Formen). Ziel: die Unregelm\u00e4\u00dfigkeiten auf ein Minimum zu beschr\u00e4nken und dabei alles Notwendige zu zeigen.<\/p>\n

4. Erste Farben anwenden<\/h2>\n

\n\"Pixel-Art
\n
\nF\u00e4rben Sie Ihren Charakter mit F\u00fcllungen oder einem anderen geeigneten Werkzeug. Die Palette erleichtert diesen Teil der Arbeit. Wenn die Software keine Paletten unterst\u00fctzt, kann sie direkt in das Bild eingef\u00fcgt werden, wie im obigen Beispiel, und die Farben k\u00f6nnen mit dem Pipettenwerkzeug ausgew\u00e4hlt werden.<\/p>\n

In der unteren linken Ecke habe ich unseren Freund gezeichnet, lernen Sie kennen, das ist \u2014 \u0160har. Mit ihm wird es einfacher, zu verstehen, was in jedem Schritt passiert.<\/p>\n

5. Schattierung<\/h2>\n

\n\"Pixel-Art
\n
\nEs ist Zeit, die Schatten darzustellen \u2013 f\u00fcgen Sie einfach dunklere Farben zum Sprite hinzu. So wird das Bild dreidimensional wirken. Angenommen, wir haben eine Lichtquelle, die \u00fcber dem Orc links von ihm positioniert ist. Das bedeutet, dass alles, was sich oben und vor unserem Charakter befindet, beleuchtet wird. F\u00fcgen Sie Schatten von unten rechts hinzu.<\/p>\n

Form und Volumen<\/h3>\n

\n\"Pixel-Art
\n
\nWenn Ihnen dieser Schritt Schwierigkeiten bereitet, stellen Sie sich Ihre Zeichnung als volumetrische Formen und nicht nur als Linien und Farben vor. Formen existieren im dreidimensionalen Raum und k\u00f6nnen Volumen haben, das wir durch Schatten aufbauen. Dies hilft, den Charakter ohne Details zu visualisieren und sich vorzustellen, dass er aus Ton und nicht aus Pixeln besteht. Schattierung ist nicht nur das Hinzuf\u00fcgen neuer Farben, es ist der Prozess des Aufbaus von Formen. Bei einem gut ausgearbeiteten Charakter verdecken die Details nicht die grundlegenden Formen: Wenn Sie die Augen zusammenkneifen, sehen Sie mehrere gro\u00dfe Cluster von Licht und Schatten. <\/p>\n

Anti-Aliasing<\/h3>\n

\nJedes Mal, wenn ich eine neue Farbe verwende, wende ich Anti-Aliasing (AA) an. Es hilft, die Pixel zu gl\u00e4tten, indem es \u00dcbergangsfarben an den Ecken, an den Ber\u00fchrungspunkten zweier Segmentlinien hinzuf\u00fcgt:<\/p>\n

\"Pixel-Art
\n
\nGraue Pixel mildern die \"Br\u00fcche\" in der Linie ab. Je l\u00e4nger das Liniensegment, desto l\u00e4nger ist das AA-Segment.<\/p>\n

\"Pixel-Art
\nSo sieht AA auf der Schulter des Orcs aus. Es dient dazu, die Linien zu gl\u00e4tten, die die Konturen seiner Muskeln zeigen.<\/i><\/p>\n

Das Anti-Aliasing sollte nicht \u00fcber die Grenzen des Sprites hinausgehen, der im Spiel oder vor einem unbekannten Hintergrund verwendet wird. Wenn Sie zum Beispiel AA f\u00fcr einen hellen Hintergrund anwenden, wird es auf einem dunklen Hintergrund unansehnlich aussehen.<\/p>\n

6. Selektive Kontur<\/h2>\n

\n\"Pixel-Art
\n
\nFr\u00fcher waren die Konturen vollst\u00e4ndig schwarz, was das Sprite sehr cartoonhaft wirken lie\u00df. Das Bild war wie in Segmente unterteilt. Zum Beispiel stellen die schwarzen Linien am Arm die Muskulatur zu kontrastreich dar, wodurch der Charakter weniger einheitlich aussieht.<\/p>\n

Wenn der Sprite nat\u00fcrlicher aussieht und die Segmentierung weniger offensichtlich ist, werden die Grundformen des Charakters leichter lesbar. Dazu kann eine selektive Konturierung verwendet werden \u2013 teilweise den schwarzen Kontur durch einen helleren ersetzen. F\u00fcr den beleuchteten Teil des Sprites k\u00f6nnen die hellsten Farben verwendet werden, oder dort, wo der Sprite mit dem negativen Raum in Ber\u00fchrung kommt, kann der Kontur vollst\u00e4ndig entfernt werden. Anstelle von Schwarz sollte die Farbe verwendet werden, die f\u00fcr den Schatten ausgew\u00e4hlt wurde \u2013 so bleibt die Segmentierung (f\u00fcr die Abgrenzung von Muskeln, Fell usw.) erhalten.<\/p>\n

Auch in diesem Schritt habe ich dunklere Schatten hinzugef\u00fcgt. Es entstanden drei Abstufungen von Gr\u00fcn auf der Haut des Orks. Die dunkelste Gr\u00fcnton kann f\u00fcr die selektive Konturierung und AA verwendet werden.<\/p>\n

7. Letzte Feinheiten<\/h2>\n

\n\"Pixel-Art
\n
\nAm Ende sollten Glanzlichter (die hellsten Flecken auf dem Sprite), Details (Ohrringe, Nieten, Narben) und andere Verbesserungen hinzugef\u00fcgt werden, bis der Charakter bereit ist oder bis es notwendig ist, zum N\u00e4chsten \u00fcberzugehen.<\/p>\n

Es gibt einige n\u00fctzliche Techniken, die in diesem Schritt angewendet werden k\u00f6nnen. Drehen Sie das Bild horizontal, das hilft oft, Fehler in Proportionen und Schattierungen zu erkennen. Auch die Farben k\u00f6nnen entfernt werden \u2013 setzen Sie die S\u00e4ttigung auf null, um zu verstehen, wo die Schatten ge\u00e4ndert werden m\u00fcssen.<\/p>\n

Erstellung von Rauschen (Dithering, Dither)<\/h3>\n

\nBisher haben wir haupts\u00e4chlich gro\u00dfe, zusammenh\u00e4ngende Bereiche von Schatten verwendet. Es gibt jedoch auch eine andere Technik \u2013 Dithering, die es erm\u00f6glicht, von einer Farbe zur anderen zu wechseln, ohne eine dritte hinzuzuf\u00fcgen. Schauen Sie sich das Beispiel unten an.<\/p>\n

\"Pixel-Art
\n
\nDer obere Gradient von dunkel zu hell verwendet Hunderte verschiedener Blaut\u00f6ne. <\/p>\n

Der mittlere Gradient verwendet nur neun Farben, hat aber immer noch zu viele Abstufungen von einer Farbe. Dies f\u00fchrt zu einem sogenannten Banding, bei dem das Auge durch dicke, homogene Streifen auf die Punkte der Farbkollision konzentriert, anstatt auf die Farben selbst.<\/p>\n

Im unteren Gradient haben wir Dithering angewendet, das das Banding vermeidet und nur zwei Farben verwendet. Wir erzeugen Rauschen unterschiedlicher Intensit\u00e4t, um die Farbverl\u00e4ufe zu simulieren. Diese Technik \u00e4hnelt dem Halftone, das im Druck verwendet wird; sowie dem Stippling \u2013 in der Illustration und Comics.<\/p>\n

Ich habe beim Orc das Dithering nur wenig genutzt, um die Textur zu \u00fcbertragen. Einige Pixelk\u00fcnstler verwenden es \u00fcberhaupt nicht, andere hingegen z\u00f6gern nicht und machen es sehr geschickt. Ich denke, dass Dithering am besten auf gro\u00dfen Fl\u00e4chen aussieht, die mit einer einzigen Farbe gef\u00fcllt sind (achten Sie auf den Himmel im Screenshot von Metal Slug, der weiter oben war) oder auf Bereichen, die rau und uneben aussehen sollen (zum Beispiel Schlamm). Entscheiden Sie selbst, wie Sie es verwenden m\u00f6chten.<\/p>\n

Wenn Sie ein Beispiel mit umfangreichem und qualitativ hochwertigem Dithering sehen m\u00f6chten, studieren Sie die Spiele der Bitmap Brothers, einem britischen Studio aus den 80er Jahren, oder Spiele auf dem PC-98. Bedenken Sie nur, dass sie alle NSFW sind.<\/p>\n

\"Pixel-Art
\nKakyusei (PC-98). Elf, 1996
\nAuf diesem Bild sind nur 16 Farben!<\/i><\/p>\n

8. Letzter Blick<\/h2>\n

\n\"Pixel-Art
\n
\nEine der Gefahren von Pixel-Art besteht darin, dass sie leicht und einfach erscheint (aufgrund ihrer Struktur und stilistischen Einschr\u00e4nkungen). Aber am Ende verbringen Sie eine enorme Menge Zeit mit der Verfeinerung Ihrer Sprites. Es ist wie ein Puzzle, das gel\u00f6st werden muss \u2013 deswegen zieht Pixel-Art Perfektionisten an. Denken Sie daran, dass ein Sprite nicht zu viel Zeit in Anspruch nehmen sollte \u2013 es ist nur ein winziges St\u00fcck eines \u00e4u\u00dferst komplexen Puzzles. Es ist wichtig, das Gesamtbild nicht aus den Augen zu verlieren.<\/p>\n

Selbst wenn Ihre Pixel-Art nicht f\u00fcr Spiele gedacht ist, ist es manchmal gut, sich zu sagen: \u201eAlles ist schon gut genug!\u201c und weiterzumachen. Der beste Weg, seine F\u00e4higkeiten zu entwickeln, ist, den gesamten Prozess so oft wie m\u00f6glich von Anfang bis Ende durchzugehen, wobei man so viele Themen wie m\u00f6glich verwendet. <\/p>\n

Und manchmal ist es hilfreich, den Sprite f\u00fcr eine Weile beiseite zu legen, um ihn sp\u00e4ter mit frischem Blick zu betrachten. <\/p>\n

32\u00d732 Pixel<\/h2>\n

\n\"Pixel-Art
\n
\nWir haben zuerst einen gro\u00dfen Sprite von 96\u00d796 Pixeln erstellt, weil er in dieser Gr\u00f6\u00dfe mehr wie Malerei oder Zeichnen aussieht, nur eben mit Pixeln. Je kleiner der Sprite, desto weniger sieht er aus wie das, was er darstellen soll, und desto wichtiger wird jeder Pixel.<\/p>\n

\"Pixel-Art
\n
\nIn Super Mario Bros. sind Marios Augen nur zwei \u00fcbereinanderliegende Pixel. Und auch sein Ohr. Der Sch\u00f6pfer des Charakters, Shigeru Miyamoto, sagte, dass die Schnurrhaare n\u00f6tig waren, um die Nase vom Rest des Gesichts zu trennen. So ist eines der Hauptmerkmale von Marios Gesicht nicht nur das designtechnische Element, sondern auch ein pragmatischer Trick. Das best\u00e4tigt die alte Weisheit: \u201eNot macht erfinderisch.\u201c<\/p>\n

Die grundlegenden Schritte zur Erstellung eines 32\u00d732 Pixel gro\u00dfen Sprites sind uns bereits bekannt: Skizze, Farbe, Schatten und weitere Ausarbeitung. Unter diesen Bedingungen w\u00e4hle ich als Ausgangsskizze farbige Formen anstelle von Umrissen aufgrund der kleinen Gr\u00f6\u00dfe. Farben spielen eine wichtigere Rolle bei der Charakterbestimmung als die Umrisse. Schaut euch Mario nochmal an, er hat \u00fcberhaupt keine Umrisse. Interessant sind nicht nur die Schnurrhaare. Seine Backenbartform definiert die Form der Ohren, die \u00c4rmel zeigen die H\u00e4nde und die allgemeine Form spiegelt seinen K\u00f6rper mehr oder weniger deutlich wider.<\/p>\n

Die Erstellung kleiner Sprites ist st\u00e4ndige Kompromisse. Wenn Sie eine Kontur hinzuf\u00fcgen, verlieren Sie m\u00f6glicherweise Platz f\u00fcr den Schatten. Wenn die H\u00e4nde und Beine Ihres Charakters klar sichtbar sind, sollte der Kopf wahrscheinlich nicht zu gro\u00df sein. Wenn Sie Farbe, selektive Umrandung und Gl\u00e4ttung effektiv nutzen, wird das gezeichnete Objekt gr\u00f6\u00dfer wirken, als es tats\u00e4chlich ist.<\/p>\n

F\u00fcr kleine Sprites mag ich den Chibi-Stil: Die Charaktere sehen sehr niedlich aus, mit gro\u00dfen K\u00f6pfen und Augen. Eine gro\u00dfartige M\u00f6glichkeit, einen auff\u00e4lligen Helden auf kleinem Raum zu schaffen, und insgesamt ein sehr angenehmer Stil. Wenn Sie jedoch die Beweglichkeit oder St\u00e4rke des Charakters zeigen m\u00f6chten, k\u00f6nnen Sie weniger Platz f\u00fcr den Kopf verwenden, damit der K\u00f6rper m\u00e4chtiger aussieht. Es h\u00e4ngt alles von Ihren Vorlieben und Zielen ab.<\/p>\n

\"Pixel-Art
\nDas gesamte Team ist versammelt!<\/i><\/p>\n

Dateiformate<\/h2>\n

\n\"Pixel-Art
\nSo ein Ergebnis kann jeden Pixelk\u00fcnstler nerv\u00f6s machen.<\/i><\/p>\n

Das Bild, das Sie sehen, ist das Ergebnis des Speicherns der Zeichnung im JPG-Format. Ein Teil der Daten ging aufgrund der Komprimierungsalgorithmen verloren. Hochwertiger Pixel-Art wird am Ende schlecht aussehen, und es ist nicht einfach, die urspr\u00fcngliche Palette zur\u00fcckzubekommen.<\/p>\n

F\u00fcr die Speicherung eines statischen Bildes ohne Qualit\u00e4tsverlust verwenden Sie das PNG-Format. F\u00fcr Animationen \u2013 GIF.<\/p>\n

Wie man Pixel-Art richtig teilt<\/h2>\n

\nDas Teilen von Pixel-Art in sozialen Medien ist eine gro\u00dfartige M\u00f6glichkeit, Feedback zu erhalten und andere K\u00fcnstler zu treffen, die im gleichen Stil arbeiten. Vergessen Sie nicht, den Hashtag #pixelart zu verwenden. Leider konvertieren soziale Netzwerke PNG oft ohne R\u00fcckfrage in JPG, was Ihre Arbeit beeintr\u00e4chtigt. Und es ist nicht immer klar, warum Ihr Bild konvertiert wurde.<\/p>\n

Hier sind einige Tipps, wie Sie Pixel-Art in der erforderlichen Qualit\u00e4t f\u00fcr verschiedene soziale Medien speichern k\u00f6nnen.<\/p>\n

Twitter<\/h3>\n

\nUm sicherzustellen, dass die PNG-Datei in Twitter nicht ver\u00e4ndert wird, verwenden Sie weniger als 256 Farben oder stellen Sie sicher<\/a><\/noindex>, dass Ihre Datei weniger als 900 Pixel auf der langen Seite hat. Ich w\u00fcrde die Dateigr\u00f6\u00dfe mindestens auf 512\u00d7512 Pixel erh\u00f6hen. Au\u00dferdem sollte das Scaling ein Vielfaches von 100 sein (200 %, nicht 250 %) und scharfe Kanten beibehalten werden (N\u00e4chster Nachbar in Photoshop).<\/p>\n

Animierte GIF-Dateien f\u00fcr Posts in Twitter wissen<\/a><\/noindex> d\u00fcrfen nicht mehr als 15 MB wiegen. Das Bild sollte mindestens 800\u00d7800 Pixel gro\u00df sein, die zyklische Animation sollte dreimal wiederholt werden, und der letzte Frame sollte zeitlich halb so lang sein wie alle anderen \u2013 die am meisten verbreitete Theorie. Es ist jedoch unklar, wie streng diese Anforderungen eingehalten werden m\u00fcssen, da Twitter st\u00e4ndig seine Algorithmen zur Bilddarstellung \u00e4ndert.<\/p>\n

Instagram<\/h3>\n

\nSoweit ich wei\u00df, ist es unm\u00f6glich, ein Bild in Instagram ohne Qualit\u00e4tsverlust zu ver\u00f6ffentlichen. Es wird jedoch definitiv besser aussehen, wenn Sie es mindestens auf 512x512 Pixel erh\u00f6hen.
\n
Quelle: habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"

\u0418\u043d\u0434\u0438-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043e\u0432\u043c\u0435\u0449\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u043e\u043b\u0435\u0439: \u0433\u0435\u0439\u043c\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430, \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0430, \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u0430. \u0418, \u043a\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u043e \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u0430, \u043c\u043d\u043e\u0433\u0438\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u044e\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u044c-\u0430\u0440\u0442 \u2014 \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043e\u043d \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c. \u041d\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u043d\u0443\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0432\u044b\u043a\u0438. \u041d\u0430\u0448\u0435\u043b \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b \u043f\u043e\u0441\u0442\u0438\u0433\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u044b \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f: \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0444\u0442\u0430 \u0438 \u0442\u0435\u0445\u043d\u0438\u043a \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f […]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[702],"tags":[],"class_list":["post-54617","post","type-post","status-publish","format-standard","hentry","category-news"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\n","aioseo_head_json":{"title":"\ud83e\udd47Pixel-Art f\u00fcr Anf\u00e4nger: eine Anleitung zur Anwendung | ProHoster","description":"Indie-Entwickler m\u00fcssen oft.","canonical_url":"https:\/\/prohoster.info\/de\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"de_DE","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47\u041f\u0438\u043a\u0441\u0435\u043b\u044c-\u0430\u0440\u0442 \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445: \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043f\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e | ProHoster","og:description":"\u0418\u043d\u0434\u0438-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f.","og:url":"https:\/\/prohoster.info\/de\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2019-12-29T21:00:00+00:00","article:modified_time":"2020-02-18T11:02:39+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"54617","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-01-24 12:06:19","breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-02-28 20:01:33","updated":"2026-01-24 12:06:19","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/posts\/54617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/comments?post=54617"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/posts\/54617\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/media?parent=54617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/categories?post=54617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/tags?post=54617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}