{"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\/novosti-interneta\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","title":{"rendered":"Pixel-Art f\u00fcr Anf\u00e4nger: Eine Anleitung zur Anwendung","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Pixel-Art
\n
\nUnabh\u00e4ngige Entwickler m\u00fcssen oft mehrere Rollen gleichzeitig \u00fcbernehmen: Game-Designer, Programmierer, Komponist, K\u00fcnstler. 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, sind viel Erfahrung und spezielle F\u00e4higkeiten erforderlich. Ich habe hier ein Tutorial gefunden, das f\u00fcr diejenigen n\u00fctzlich ist, die gerade die Grundlagen dieses Stils erlernen: Es beschreibt spezielle Software und Maltechniken anhand von zwei Sprites.<\/a><\/noindex><\/p>\n

den Hintergrund<\/h2>\n

\nPixel-Art ist eine Form der digitalen Kunst, bei der Ver\u00e4nderungen auf Pixelebene vorgenommen werden. Sie wird haupts\u00e4chlich mit der Grafik von Videospielen der 80er und 90er Jahre assoziiert. Damals mussten K\u00fcnstler die Speicherbeschr\u00e4nkungen und die niedrige Aufl\u00f6sung ber\u00fccksichtigen. Heute ist Pixel-Art in Spielen und als Kunststil immer noch beliebt, trotz der M\u00f6glichkeit, realistische 3D-Grafiken zu erstellen. Warum? Selbst ohne Nostalgie betrachtet, ist es eine angenehme und lohnende Herausforderung, gro\u00dfartige Werke in solch strengen Rahmenbedingungen zu schaffen.<\/p>\n

Die Einstiegsh\u00fcrde bei Pixel-Art ist im Vergleich zu traditioneller Kunst und 3D-Grafik relativ niedrig, was Indie-Entwickler anzieht. Das bedeutet jedoch nicht, dass es einfach sein wird, das zu beenden<\/b> ein Spiel in diesem Stil. Ich habe viele Indie-Entwickler mit Pixel-Art-Metroidvanias auf Crowdfunding-Plattformen gesehen. Sie dachten, sie w\u00fcrden alles in einem Jahr fertigstellen, aber tats\u00e4chlich ben\u00f6tigten sie noch sechs Jahre. <\/p>\n

\"Pixel-Art
\nMetal Slug 3 (Arcade). SNK, 2000<\/i><\/p>\n

Pixel-Art auf dem Niveau, auf dem die meisten sie erstellen m\u00f6chten, ben\u00f6tigt viel Zeit, und es gibt nur sehr wenige kurze Tutorials. Wenn Sie mit einem 3D-Modell arbeiten, k\u00f6nnen Sie es drehen, verformen, Teile davon bewegen, Animationen von einem Modell auf ein anderes kopieren usw. Hochwertige Pixel-Art erfordert fast immer eine Menge M\u00fche beim pr\u00e4zisen Platzieren der Pixel in jedem Frame.<\/p>\n

Ich habe euch gewarnt.<\/p>\n

Jetzt ein wenig zu meinem Stil: Haupts\u00e4chlich erstelle ich Pixel-Art f\u00fcr Videospiele und finde darin meine Inspiration. Besonders begeistert bin ich von Famicom\/NES, 16-Bit-Konsolen und 90er-Jahre-Arkade-Spielen. Die Pixel-Art meiner Lieblingsspiele aus dieser Zeit l\u00e4sst sich als lebendig, selbstbewusst und klar (aber nicht \u00fcbertrieben) beschreiben; sie ist nicht hart und minimalistisch. In diesem Stil arbeite ich selbst, aber Sie k\u00f6nnen problemlos Ideen und Techniken aus diesem Tutorial nutzen, um v\u00f6llig andere Werke zu schaffen. Studieren Sie die Arbeiten verschiedener K\u00fcnstler und kreieren Sie die Pixel-Art, die Ihnen gef\u00e4llt!<\/p>\n

Software<\/h2>\n

\n\"Pixel-Art
\n
\nDie grundlegenden digitalen Werkzeuge f\u00fcr Pixel-Art sind Zoom (Zoom) und Bleistift (Pencil), um die Pixel zu platzieren. Au\u00dferdem n\u00fctzlich sind Linie (Line), Figur (Shape), Ausw\u00e4hlen (Select), Verschieben (Move) und Farbtopf (Paint Bucket). Es gibt viele kostenlose und kostenpflichtige Programme mit diesem Werkzeugset. Ich werde die bekanntesten und die, die ich selbst benutze, vorstellen.<\/p>\n

Paint (kostenlos)<\/h3>\n

\nWenn Sie Windows verwenden, bietet das integrierte Paint eine primitive, aber alles erforderliche Toolset f\u00fcr Pixel-Art.<\/p>\n

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

\nEin \u00fcberraschend funktionaler Pixel-Art-Editor, der direkt im Browser l\u00e4uft. Sie k\u00f6nnen Ihre Arbeiten im PNG- oder animierten GIF-Format exportieren. Eine gro\u00dfartige L\u00f6sung f\u00fcr Einsteiger.<\/p>\n

GraphigsGale<\/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 bietet. Er wurde von dem japanischen Unternehmen HUMANBALANCE erstellt. Seit 2017 wird er kostenlos angeboten und erfreut sich weiterhin gro\u00dfer Beliebtheit, trotz des Aufstiegs von Aseprite. Leider l\u00e4uft er nur auf Windows.<\/p>\n

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

\nWahrscheinlich der derzeit beliebteste Editor. Open-Source<\/a><\/noindex>, viele Funktionen, aktive Unterst\u00fctzung, Versionen f\u00fcr Windows, Mac und Linux. Wenn Sie ernsthaft in die Pixel-Art einsteigen und noch keinen passenden Editor gefunden haben, k\u00f6nnte dies genau das Richtige sein.<\/p>\n

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

\nGameMaker Studio 2 ist ein hervorragendes 2D-Tool mit einem guten Sprite-Editor. Wenn Sie Pixel-Art f\u00fcr Ihre eigenen Spiele erstellen m\u00f6chten, ist es sehr praktisch, alles in einem Programm zu erledigen. Zurzeit benutze ich diese Software, um an UFO 50<\/a><\/noindex>, einer Sammlung von 50 Retro-Spielen zu arbeiten: Die Sprites und Animationen erstelle ich in GameMaker, die Tilesets in Photoshop.<\/p>\n

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

\nPhotoshop \u2013 eine teure Software, die im Abonnement angeboten wird und nicht f\u00fcr Pixel-Art optimiert ist. Ich empfehle es nicht zu kaufen, es sei denn, Sie sind daran interessiert, Illustrationen in hoher Aufl\u00f6sung zu erstellen oder m\u00fcssen komplexe Manipulationen an Bildern durchf\u00fchren, wie ich es tue. Es k\u00f6nnen statische Sprites und Pixelarbeiten erstellt werden, jedoch ist es im Vergleich zu spezialisierten L\u00f6sungen (zum Beispiel GraphicsGale oder Aseprite) recht kompliziert.<\/p>\n

Sonstiges<\/h2>\n

\n\"Pixel-Art
\nMein Set f\u00fcr Pixel-Art. Alles schwarz, habe ich gerade bemerkt.<\/i><\/p>\n

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

\nIch empfehle Grafiktabletts f\u00fcr alle Arbeiten mit digitalen Illustrationen, um das Risiko eines Karpaltunnelsyndroms zu vermeiden. Es ist viel einfacher, dies zu verhindern, als es zu heilen. Wenn Sie einmal Schmerzen versp\u00fcren, wird es nur schlimmer \u2013 k\u00fcmmern Sie sich am besten gleich darum. Da ich fr\u00fcher mit der Maus gezeichnet habe, habe ich jetzt Schwierigkeiten, Spiele zu spielen, in denen viel gedr\u00fcckt werden muss. Momentan verwende ich das Wacom Intuos Pro S.<\/p>\n

Handgelenksst\u00fctze ($)<\/h3>\n

\nWenn Sie kein Tablet kaufen k\u00f6nnen, besorgen Sie sich zumindest eine Handgelenksst\u00fctze. Mir gef\u00e4llt die Mueller Green Fitted Wrist Brace am besten. Die anderen sind entweder zu eng oder bieten nicht genug Unterst\u00fctzung. Die St\u00fctzen 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 Charakter-Sprite in 96\u00d796 Pixel. Als Beispiel habe ich einen Ork gezeichnet und ihn auf einen Screenshot aus Final Fight (Bild oben) platziert, damit du den Ma\u00dfstab verstehst. Das ist ein gro\u00dfes<\/b> Sprite f\u00fcr die meisten Retro-Spiele, Screenshot-Gr\u00f6\u00dfe: 384\u00d7224 Pixel.<\/p>\n

Mit einem so gro\u00dfen Sprite wird es einfacher, die Technik zu zeigen, \u00fcber die ich sprechen m\u00f6chte. Auch die pixelgenaue Zeichnung \u00e4hnelt traditionellen k\u00fcnstlerischen Formen (wie Zeichnungen oder Malerei), die Ihnen vielleicht vertrauter sind. Nachdem wir die grundlegenden Techniken gemeistert haben, werden wir zu kleineren Sprites \u00fcbergehen.<\/p>\n

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

\n\"Pixel-Art
\n
\nEin Pixel ist im Pixelart eine viel tiefere Angelegenheit als in anderen digitalen Bereichen. Die Beschr\u00e4nkungen von Pixelart, wie die Farben, bestimmen das Genre. Es ist wichtig, die Palette richtig auszuw\u00e4hlen, da sie Ihren Stil definiert. Zu Beginn empfehle ich jedoch, sich nicht zu viele Gedanken \u00fcber Paletten zu machen und eine der bestehenden (oder einfach einige zuf\u00e4llige Farben) zu w\u00e4hlen \u2013 Sie k\u00f6nnen sie jederzeit \u00e4ndern.<\/p>\n

F\u00fcr dieses Tutorial werde ich eine Palette aus 32 Farben verwenden, die wir f\u00fcr UFO 50<\/a><\/noindex>erstellt haben. Im Pixelart werden h\u00e4ufig Paletten aus 32 oder 16 Farben zusammengestellt. Unsere wurde f\u00fcr eine fiktive Konsole entwickelt, die irgendwo zwischen dem Famicom und dem PC Engine erscheinen k\u00f6nnte. Sie k\u00f6nnen sie verwenden oder eine andere w\u00e4hlen \u2013 das Tutorial ist ganz unabh\u00e4ngig von der gew\u00e4hlten Palette.<\/p>\n

2. Grobe Konturen<\/h2>\n

\n\"Pixel-Art
\n
\nWir beginnen mit dem Zeichnen mit dem Werkzeug \"Bleistift\". Wir erstellen eine Skizze, \u00e4hnlich wie wir dies mit einem herk\u00f6mmlichen Stift und Papier tun. Nat\u00fcrlich \u00fcberschneiden sich Pixel-Art und traditionelle Kunst, insbesondere bei gr\u00f6\u00dferen Sprites. Meine Beobachtungen zeigen, dass talentierte Pixel-K\u00fcnstler mindestens gut von Hand zeichnen k\u00f6nnen und umgekehrt. Daher ist es immer hilfreich, das Zeichnen zu \u00fcben.<\/p>\n

3. Konturen\u00fcberarbeitung<\/h2>\n

\n\"Pixel-Art
\n
\nWir verfeinern die Konturen: \u00dcberfl\u00fcssige Pixel entfernen und die Dicke jeder Linie auf einen Pixel reduzieren. Aber was genau z\u00e4hlt als \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

\nWir m\u00fcssen lernen, zwei grundlegende Linien in der Pixel-Art zu zeichnen: gerade und kurvige Linien. Mit Stift und Papier geht es um Muskelkontrolle, aber wir arbeiten mit winzigen, farbigen Bl\u00f6cken.<\/p>\n

Der Schl\u00fcssel zur Zeichnung pr\u00e4ziser Pixel-Linien liegt in Unregelm\u00e4\u00dfigkeiten. Es sind Einzelpixel oder kleine Segmente, die die Gl\u00e4tte der Linie st\u00f6ren. Wie ich bereits erw\u00e4hnt habe, ist jeder einzelne Pixel im Pixelart von enormer Bedeutung, weshalb Unregelm\u00e4\u00dfigkeiten die gesamte \u00c4sthetik zerst\u00f6ren k\u00f6nnen. Stellen Sie sich vor, Sie ziehen eine gerade Linie auf Papier und pl\u00f6tzlich st\u00f6\u00dft jemand den Tisch an: Unregelm\u00e4\u00dfigkeiten in der Pixelkunst wirken genauso wie ein zuf\u00e4lliger Kringel.<\/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 Liniensegmente nicht gleichm\u00e4\u00dfig zunimmt oder abnimmt.<\/p>\n

Unregelm\u00e4\u00dfigkeiten ganz zu vermeiden, ist unm\u00f6glich \u2013 in all Ihren Lieblings-Retro-Spielen sind sie vorhanden (es sei denn, die Pixelkunst besteht ausschlie\u00dflich aus einfachen Formen). Das Ziel: Unregelm\u00e4\u00dfigkeiten auf ein Minimum zu reduzieren, w\u00e4hrend alle notwendigen Details angezeigt werden.<\/p>\n

4. Die ersten Farben anwenden<\/h2>\n

\n\"Pixel-Art
\n
\nF\u00e4rben Sie Ihren Charakter mit einer F\u00fcllfarbe oder einem anderen geeigneten Werkzeug. DiePalette wird diesen Teil der Arbeit erleichtern. Wenn die Software keine Verwendung von Paletten zul\u00e4sst, k\u00f6nnen Sie sie direkt ins Bild einf\u00fcgen, wie im obigen Beispiel, und die Farben mit der Pipette ausw\u00e4hlen.<\/p>\n

In der unteren linken Ecke habe ich unseren Freund gezeichnet, lernt ihn kennen, das ist \u2014 Sharr. Mit ihm wird es einfacher sein zu verstehen, was in jeder Phase vor sich geht.<\/p>\n

5. Schattierung<\/h2>\n

\n\"Pixel-Art
\n
\nEs ist Zeit, die Schatten darzustellen \u2014 f\u00fcgen wir einfach dunklere Farben dem Sprite hinzu. So wirkt das Bild dreidimensional. Angenommen, wir haben eine Lichtquelle, die sich links oben \u00fcber dem Ork befindet. Alles, was sich oben und vor unserem Charakter befindet, wird erleuchtet. F\u00fcgen wir die Schatten unten rechts hinzu.<\/p>\n

Form und Volumen<\/h3>\n

\n\"Pixel-Art
\n
\nWenn 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 aufweisen, das wir durch Schatten gestalten. 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 ein Prozess des Formaufbaus. Bei einem gut gestalteten Charakter verdecken die Details nicht die grundlegenden Formen: Wenn Sie die Augen zusammenkneifen, sehen Sie mehrere gro\u00dfe Cluster aus Licht und Schatten. <\/p>\n

Kantengl\u00e4ttung (Anti-Alias, 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 an den Ecken, wo zwei Liniensegmente sich ber\u00fchren, Zwischent\u00f6ne hinzuf\u00fcgt.<\/p>\n

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

\"Pixel-Art
\nSo sieht AA auf der Schulter eines Orks aus. Es ist notwendig, um die Linien zu gl\u00e4tten, die die Konturen seiner Muskeln zeigen.<\/i><\/p>\n

Das Gl\u00e4tten sollte nicht \u00fcber die Grenzen des Sprites hinausgehen, der im Spiel oder auf einem Hintergrund verwendet wird, dessen Farbe unbekannt ist. Wenn Sie zum Beispiel AA auf einen hellen Hintergrund anwenden, wird es auf einem dunklen Hintergrund unsch\u00f6n aussehen.<\/p>\n

6. Selektive Kontur<\/h2>\n

\n\"Pixel-Art
\n
\nFr\u00fcher waren die Konturen vollst\u00e4ndig schwarz, was dazu f\u00fchrte, dass das Sprite sehr cartoonhaft aussah. Das Bild wirkte, als w\u00e4re es in Segmente unterteilt. Zum Beispiel sind die schwarzen Linien am Arm zu kontrastreich und verdeutlichen die Muskulatur, wodurch der Charakter weniger zusammenh\u00e4ngend wirkt.<\/p>\n

Wenn der Sprite nat\u00fcrlicher wird und die Segmentierung weniger auff\u00e4llig ist, werden die Grundformen des Charakters leichter lesbar sein. Dabei kann man eine selektive Kontur verwenden \u2013 teilweise den schwarzen Kontur durch einen helleren ersetzen. In den beleuchteten Bereichen des Sprites kann man die hellsten Farben nutzen oder dort, wo der Sprite mit dem negativen Raum in Kontakt kommt, die Kontur vollst\u00e4ndig entfernen. Anstatt Schwarz sollte die Farbe verwendet werden, die f\u00fcr den Schatten gew\u00e4hlt wurde \u2013 so bleibt die Segmentierung (zum Abgrenzen von Muskeln, Fell usw.) erhalten.<\/p>\n

Ebenfalls in diesem Schritt habe ich dunklere Schatten hinzugef\u00fcgt. Es entstanden drei Gr\u00fcnt\u00f6ne auf der Haut des Orks. Der dunkelgr\u00fcnste Farbton kann f\u00fcr die selektive Kontur und AA verwendet werden.<\/p>\n

7. Letzte Schliffe<\/h2>\n

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

Es gibt einige n\u00fctzliche Techniken, die Sie in diesem Stadium anwenden k\u00f6nnen. Drehen Sie die Zeichnung horizontal, das hilft oft, Fehler in Proportionen und Schattierungen zu erkennen. Sie k\u00f6nnen auch die Farbe entfernen \u2014 stellen Sie die S\u00e4ttigung auf null, um zu verstehen, wo Sie die Schatten anpassen m\u00fcssen.<\/p>\n

Erzeugung von Rauschen (Dithering)<\/h3>\n

\nBisher haben wir haupts\u00e4chlich gro\u00dfe, durchgehende Schattenbereiche verwendet. Es gibt jedoch auch eine andere Technik \u2014 Dithering, die es erm\u00f6glicht, von einer Farbe zur anderen \u00fcberzugehen, ohne eine dritte hinzuzuf\u00fcgen. Sehen Sie sich das Beispiel unten an.<\/p>\n

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

Der mittlere Gradient verwendet nur neun Farben, aber es gibt immer noch zu viele Abstufungen einer einzigen Farbe. Das f\u00fchrt zu dem sogenannten Banding, bei dem das Auge aufgrund der dicken, einheitlichen Streifen auf die Ber\u00fchrungspunkte der Farben fokussiert, anstatt auf die Farben selbst.<\/p>\n

Im unteren Gradient haben wir Dithering angewendet, um Banding zu vermeiden und nur zwei Farben zu verwenden. Wir erstellen Rauschen unterschiedlichen Intensit\u00e4ts, um einen Farbverlauf zu simulieren. Diese Technik \u00e4hnelt dem Halbtontest (Halftone), der im Druck verwendet wird, sowie dem Stippling (Stippeln) in Illustrationen und Comics.<\/p>\n

Beim Orc habe ich nur wenig Dithering verwendet, um die Textur zu \u00fcbertragen. Einige Pixelk\u00fcnstler nutzen es gar nicht, andere hingegen machen das sehr geschickt. Meiner Meinung nach sieht Dithering am besten auf gro\u00dfen Fl\u00e4chen aus, die mit einer Farbe gef\u00fcllt sind (schauen Sie sich den Himmel im Screenshot von Metal Slug an, der oben war) oder auf den Fl\u00e4chen, die rau und unregelm\u00e4\u00dfig aussehen sollen (zum Beispiel Erde). Entscheiden Sie selbst, wie Sie es verwenden m\u00f6chten.<\/p>\n

Wenn Sie ein Beispiel f\u00fcr umfangreiches und qualitativ hochwertiges Dithering sehen m\u00f6chten, schauen Sie sich die Spiele von The Bitmap Brothers, dem britischen Studio aus den 80er Jahren, oder die Spiele auf dem PC-98 an. Beachten Sie jedoch, dass alle NSFW sind.<\/p>\n

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

8. Letzter Blick<\/h2>\n

\n\"Pixel-Art
\n
\nEine der Gefahren des Pixelarts besteht darin, dass es leicht und einfach erscheint (wegen seiner Struktur und Stilbeschr\u00e4nkungen). Letztlich werden Sie jedoch viele Stunden mit der Bearbeitung Ihrer Sprites verbringen. Es ist wie ein Puzzle, das gel\u00f6st werden muss \u2014 deshalb zieht Pixelart Perfektionisten an. Denken Sie daran, dass ein Sprite nicht zu viel Zeit in Anspruch nehmen sollte \u2014 er ist nur ein winziger Teil eines \u00e4u\u00dferst komplexen Gesamtbildes. Es ist wichtig, die Gesamtvision nicht aus den Augen zu verlieren.<\/p>\n

Selbst wenn Ihr Pixelart nicht f\u00fcr Spiele gedacht ist, sollten Sie sich manchmal sagen: 'Es ist schon gut genug!' und weitermachen. Der beste Weg, um F\u00e4higkeiten zu entwickeln, besteht darin, den gesamten Prozess so oft wie m\u00f6glich von Anfang bis Ende durchzugehen und dabei so viele Themen wie m\u00f6glich zu verwenden. <\/p>\n

Manchmal ist es auch hilfreich, einen Sprite f\u00fcr eine Weile beiseitezulegen, um sp\u00e4ter mit frischem Blick darauf schauen zu k\u00f6nnen. <\/p>\n

32\u00d732 Pixel<\/h2>\n

\n\"Pixel-Art
\n
\nWir haben zuerst einen gro\u00dfen Sprite mit 96\u00d796 Pixeln erstellt, da das bei dieser Gr\u00f6\u00dfe mehr an Zeichnen oder Malen erinnert, jedoch mit Pixeln. Je kleiner der Sprite, desto weniger sieht er aus wie das, was er darstellen sollte, und desto wichtiger wird jeder Pixel.<\/p>\n

\"Pixel-Art
\n
\nIn Super Mario Bros. sind die Augen von Mario nur zwei Pixel, die \u00fcbereinander angeordnet sind. Und sein Ohr ebenfalls. Der Sch\u00f6pfer der Figur, Shigeru Miyamoto, sagte, dass die Schnurrhaare notwendig waren, um die Nase vom restlichen Gesicht zu trennen. Eine der auff\u00e4lligsten Eigenschaften von Marios Gesicht ist also nicht nur das Design der Figur, sondern auch ein pragmatischer Kniff. Dies best\u00e4tigt die alte Weisheit: \"Not macht erfinderisch.\"<\/p>\n

Die grundlegenden Schritte zur Erstellung eines 32\u00d732 Pixel-Sprites sind uns bereits vertraut: Skizze, Farben, Schatten, weitere Verfeinerungen. Doch unter diesen Bedingungen w\u00e4hle ich als Ausgangsskizze farbige Formen anstelle von Konturen, aufgrund der geringen Gr\u00f6\u00dfe. Farbe spielt eine wichtigere Rolle bei der Definition der Figur als die Konturen. Schauen Sie sich Mario noch einmal an, er hat \u00fcberhaupt keine Konturen. Interessant sind nicht nur die Schnurrhaare. Seine Koteletten bestimmen die Form der Ohren, die \u00c4rmel zeigen die Arme, und die Gesamtform vermittelt mehr oder weniger klar den ganzen K\u00f6rper.<\/p>\n

Das Erstellen von kleinen Sprites erfordert st\u00e4ndige Kompromisse. Wenn Sie eine Kontur hinzuf\u00fcgen, kann der Platz f\u00fcr den Schatten verloren gehen. Wenn Ihre Figur deutlich sichtbar Arme und Beine hat, sollte der Kopf wahrscheinlich nicht zu gro\u00df sein. Durch den effektiven Einsatz von Farben, selektiven Konturen und Gl\u00e4ttung kann das gezeichnete Objekt gr\u00f6\u00dfer erscheinen, als es tats\u00e4chlich ist.<\/p>\n

F\u00fcr kleine Sprites gef\u00e4llt mir der Tibi-Stil: Die Charaktere wirken sehr niedlich, mit gro\u00dfen K\u00f6pfen und Augen. Es ist ein hervorragender Weg, einen lebhaften Helden auf begrenztem Raum zu schaffen. Insgesamt ist es ein sehr ansprechender Stil. Wenn Sie jedoch die Beweglichkeit oder St\u00e4rke des Charakters zeigen m\u00f6chten, k\u00f6nnen Sie weniger Platz f\u00fcr den Kopf verwenden, sodass der K\u00f6rper kraftvoller wirkt. Es h\u00e4ngt alles von Ihren Vorlieben und Zielen ab.<\/p>\n

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

Dateiformate<\/h2>\n

\n\"Pixel-Art
\nEin solches Ergebnis kann selbst den nerv\u00f6sesten Pixel-K\u00fcnstler ins Schwitzen bringen.<\/i><\/p>\n

Das Bild, das Sie sehen, ist das Ergebnis des Speicherns eines Bildes im JPG-Format. Dabei sind einige Daten aufgrund der Komprimierungsalgorithmen verloren gegangen. Qualitativ hochwertiger Pixel-Art sieht am Ende schlecht aus, und es wird schwierig sein, die urspr\u00fcngliche Farbpalette wiederherzustellen.<\/p>\n

Um ein statisches Bild ohne Qualit\u00e4tsverlust zu speichern, verwenden Sie das PNG-Format. F\u00fcr Animationen eignet sich 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 kennenzulernen, die im selben Stil arbeiten. Vergessen Sie nicht, den Hashtag #pixelart zu verwenden. Leider konvertieren soziale Netzwerke oft PNGs ohne Vorwarnung in JPGs, wodurch Ihre Arbeit beeintr\u00e4chtigt wird. Es ist nicht immer klar, warum Ihr Bild konvertiert wurde.<\/p>\n

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

Twitter<\/h3>\n

\nDamit 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 zumindest auf 512\u00d7512 Pixel erh\u00f6hen, wobei die Skalierung ein Vielfaches von 100 (200 % und nicht 250 %) betr\u00e4gt und die scharfen Kanten beibehalten werden (Nearest Neighbor in Photoshop).<\/p>\n

Animierte GIFs f\u00fcr Twitter-Beitr\u00e4ge eine Antwort kennen sollten.<\/a><\/noindex> sollten nicht mehr als 15 MB wiegen. Das Bild sollte mindestens 800\u00d7800 Pixel gro\u00df sein, die Animation muss dreimal wiederholt werden, und der letzte Frame sollte in der Zeit halb so lang sein wie alle anderen \u2013 die weit verbreitete Theorie. Unklar bleibt jedoch, inwieweit diese Anforderungen erf\u00fcllt 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 auf Instagram ohne Qualit\u00e4tsverlust zu ver\u00f6ffentlichen. Aber es wird sicher besser aussehen, wenn Sie es zumindest 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-novosti-interneta"],"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: Anwendungshinweise | ProHoster","description":"Indie-Entwickler m\u00fcssen oft mehrere Rollen gleichzeitig \u00fcbernehmen: Game-Designer, Programmierer, Komponist, K\u00fcnstler. Wenn es um das visuelle Design geht, w\u00e4hlen viele Pixel-Art \u2013 auf den ersten Blick erscheint es einfach. Doch um es ansprechend zu gestalten, ben\u00f6tigt man viel Erfahrung und spezielle F\u00e4higkeiten. Ich habe ein Tutorial f\u00fcr diejenigen gefunden, die gerade beginnen, die Grundlagen dieses Stils zu erlernen: mit einer Beschreibung der speziellen Software und Zeichentechniken.","canonical_url":"https:\/\/prohoster.info\/de\/blog\/novosti-interneta\/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 \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","og:url":"https:\/\/prohoster.info\/de\/blog\/novosti-interneta\/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"},"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}]}}