Hilfe zu Tele2, Tarife, Fragen

Heutzutage erleichtern Programme wie Photoshop, Illustrator, Corel die Arbeit des Designers und Illustrators. Mit ihrer Hilfe können Sie voll und ganz arbeiten, ohne von der Anordnung der Pixel abgelenkt zu werden, wie es Ende des letzten Jahrhunderts der Fall war. Alle notwendigen Berechnungen begeht Software- Grafikeditoren. Aber es gibt Menschen, die in eine andere Richtung arbeiten, nicht nur anders, sondern sogar völlig entgegengesetzt. Sie beschäftigen sich nämlich mit der gleichen Pixelanordnung der alten Schule, um ein einzigartiges Ergebnis und eine einzigartige Atmosphäre in ihren Werken zu erzielen.

Ein Beispiel für Pixelkunst. Fragment.

In diesem Artikel möchten wir über Menschen sprechen, die Pixelkunst betreiben. Schauen Sie sich ihre besten Werke genauer an, die allein aufgrund der Komplexität ihrer Umsetzung ohne Übertreibung als Werke bezeichnet werden können zeitgenössische Kunst. Werke, die einem beim Betrachten den Atem rauben.

Pixelkunst. Beste Werke und Illustratoren

Stadt. Autor: Zoggles

Märchenschloss. Autor: Tinuleaf

Mittelalterliches Dorf. Autor: Docdoom

Hängende Gärten Semiramis. Autor: Mondfinsternis

Wohngebiet. Autor:

Das Zeichnen auf Pixelebene hat in der bildenden Kunst eine eigene Nische. Mithilfe einfacher Pixel entstehen wahre Meisterwerke. Natürlich können Sie solche Zeichnungen auf einem Blatt Papier erstellen, aber viel einfacher und korrekter ist es, Bilder mit Grafikeditoren zu erstellen. In diesem Artikel werden wir jeden Vertreter dieser Software im Detail analysieren.

Der weltweit beliebteste Grafikeditor, der auf Pixelebene arbeiten kann. Um solche Bilder in diesem Editor zu erstellen, müssen Sie lediglich einige vorbereitende Einrichtungsschritte durchführen. Hier finden Sie alles, was ein Künstler braucht, um Kunst zu schaffen.

Andererseits ist eine solche Fülle an Funktionalität zum Zeichnen von Pixelkunst nicht erforderlich, sodass es keinen Sinn macht, für das Programm zu viel zu bezahlen, wenn Sie es nur für eine bestimmte Funktion verwenden möchten. Wenn Sie einer dieser Benutzer sind, empfehlen wir Ihnen, auf andere Vertreter zu achten, die sich speziell auf Pixelgrafiken konzentrieren.

PyxelBearbeiten

Dieses Programm verfügt über alles, was Sie zum Erstellen solcher Gemälde benötigen, und ist nicht mit Funktionen übersättigt, die der Künstler niemals benötigen wird. Die Einrichtung ist ganz einfach; mit der Farbpalette können Sie jede Farbe in den gewünschten Farbton ändern und die freie Bewegung der Fenster hilft Ihnen, das Programm individuell anzupassen.

PyxelEdit verfügt über eine Funktion zum Festlegen von Kacheln auf der Leinwand, die beim Erstellen von Objekten mit ähnlichem Inhalt nützlich sein kann. Die Testversion steht auf der offiziellen Website zum Download bereit und unterliegt keinen Nutzungsbeschränkungen, sodass Sie das Produkt vor dem Kauf ausprobieren können.

Pixelformer

In Aussehen und Funktionalität ist dies der gewöhnlichste Grafikeditor, verfügt jedoch nur über einige zusätzliche Funktionen zum Erstellen von Pixelbildern. Dies ist eines der wenigen Programme, die absolut kostenlos verteilt werden.

Die Entwickler positionieren ihr Produkt nicht als geeignet für die Erstellung von Pixelkunst, sie nennen es eine hervorragende Möglichkeit, Logos und Symbole zu zeichnen.

GraphicsGale

In fast allen solchen Programmen wird versucht, ein Bildanimationssystem zu implementieren, das sich aufgrund eingeschränkter Funktionen und falscher Implementierung meist als einfach unbrauchbar erweist. GraphicsGale ist damit zwar auch nicht so gut, aber zumindest kann diese Funktion normal funktionieren.

Was das Zeichnen angeht, ist alles genau das Gleiche wie in den meisten Editoren: Grundfunktionen, eine große Farbpalette, die Möglichkeit, mehrere Ebenen zu erstellen und nichts, was die Arbeit stören könnte.

Charamaker

Character Maker 1999 ist eines der ältesten Programme dieser Art. Es wurde entwickelt, um einzelne Charaktere oder Elemente zu erstellen, die dann in anderen Animationsprogrammen verwendet oder in diese implementiert werden Computerspiele. Daher ist es für die Erstellung von Gemälden nicht sehr geeignet.

Die Schnittstelle ist nicht sehr gut. Fast keines der Fenster lässt sich verschieben oder in der Größe ändern, und das Standardlayout ist nicht sehr gut. Allerdings kann man sich daran gewöhnen.

Pro Motion NG

Dieses Programm ist in fast allem ideal, angefangen bei einer durchdachten Benutzeroberfläche, mit der es möglich ist, Fenster unabhängig vom Hauptfenster an eine beliebige Stelle zu verschieben und ihre Größe zu ändern, bis hin zu einem automatischen Wechsel von einer Pipette zu einem Bleistift , was einfach eine unglaublich praktische Funktion ist.

Ansonsten ist Pro Motion NG einfach eine gute Software zum Erstellen von Pixelgrafiken jeder Ebene. Die Testversion kann von der offiziellen Website heruntergeladen und getestet werden, um zu entscheiden, ob die Vollversion weiter erworben werden soll.

Aseprit

Es kann zu Recht als das bequemste und schönste Programm zum Erstellen von Pixelkunst angesehen werden. Allein das Interface-Design lohnt sich, aber das sind noch nicht alle Vorteile von Aseprite. Es besteht die Möglichkeit, ein Bild zu animieren, aber im Gegensatz zu früheren Vertretern ist sie kompetent umgesetzt und komfortabel zu bedienen. Es gibt alles, was Sie zum Erstellen wunderschöner GIF-Animationen benötigen.

Bereits im 20. Jahrhundert entwickelten sich Computerspiele, insbesondere in den 90er Jahren, zu einem breiten Einsatzgebiet für Pixelgrafiken. Mit der Entwicklung von 3D-Grafiken begann der Niedergang der Pixelkunst, doch dann erwachte sie dank der Entwicklung des Webdesigns, dem Aufkommen von Mobiltelefonen und mobilen Anwendungen wieder zum Leben.

Pixelkunst ist eine spezielle Technik zum Erstellen von Bildern in digitaler Form, die in Rastergrafikeditoren durchgeführt wird und bei der der Künstler mit der kleinsten Einheit eines digitalen Rasterbilds arbeitet – dem Pixel. Dieses Bild zeichnet sich durch eine niedrige Auflösung aus, bei der jedes Pixel deutlich sichtbar ist. Pixelkunst dauert lange und mühsam, je nach Komplexität der Zeichnung – Pixel für Pixel.

Grundregeln der Pixelkunst

Der wichtigste Bestandteil der Pixelkunst ist die sogenannte Line Art – also deren Konturen. Pixelkunst wird mit Linien erstellt – geraden und gebogenen.

Gerade Linien

Die Regel für die Konstruktion von Linien in der Pixelkunst lautet, dass sie aus Segmenten bestehen sollten, die sich im Verlauf des Zeichnens um ein Pixel zur Seite verschieben. Vermeiden Hauptfehler Für Pixel-Art-Anfänger: Die Pixel sollten sich nicht berühren und einen rechten Winkel bilden.

Bei Geraden können Sie sich die Aufgabe erleichtern, indem Sie eines der bekannten Beispiele für geneigte Geraden verwenden:

Wie aus der Abbildung hervorgeht, bestehen alle darauf dargestellten geraden Linien aus identischen Pixelsegmenten, die um einen Pixel zur Seite verschoben sind. Am beliebtesten sind Segmente mit einem, zwei und vier Pixeln. Solche einfachen geraden Linien in Pixelgrafiken werden als „ideal“ bezeichnet.

Gerade Linien können ein anderes Muster haben, Sie können beispielsweise Segmente aus zwei Pixeln mit einem Segment aus einem Pixel abwechseln, aber solche Linien sehen nicht so schön aus, insbesondere wenn das Bild vergrößert wird, obwohl sie nicht gegen die Regeln der Pixelkunst verstoßen .

Geschwungene Linien

Gerade Linien lassen sich einfacher erstellen, da sie Knicke vermeiden, was bei geschwungenen Linien nicht der Fall ist. Ihre Konstruktion ist schwieriger, allerdings müssen geschwungene Linien viel häufiger gezeichnet werden als gerade Linien.

Neben dem gleichen Verbot der Bildung rechter Winkel aus Pixeln muss beim Zeichnen gekrümmter Linien auch die Art ihrer Verschiebung beachtet werden. Die Länge der Pixelsegmente sollte sich gleichmäßig und allmählich ändern – gleichmäßig ansteigen und ebenso gleichmäßig abfallen. Pixelgrafiken erlauben keine Knicke.

Es ist unwahrscheinlich, dass Sie mit einer Handbewegung eine ideal gekrümmte Linie zeichnen können, ohne eine einzige Regel zu brechen. Sie können daher auf zwei Methoden zurückgreifen: Zeichnen Sie Linien, indem Sie ein Pixel nach dem anderen zeichnen, oder zeichnen Sie eine regelmäßige Kurve und korrigieren Sie sie dann durch Entfernen zusätzlicher Pixel aus dem fertigen „Frame“.

Dithering

In der Pixelkunst gibt es so etwas wie Dithering. Dabei handelt es sich um eine spezielle Methode zum Mischen von Pixeln unterschiedlicher Farbe, um einen Farbübergangseffekt zu erzeugen.

Die beliebteste Dithering-Methode besteht darin, Pixel in einem Schachbrettmuster anzuordnen:

Diese Methode verdankt ihr Erscheinungsbild technischen Einschränkungen bei den Farbpaletten, denn um beispielsweise lila, war es notwendig, rote und blaue Pixel in einem Schachbrettmuster zu zeichnen:

Und anschließend wurde Dithering häufig verwendet, um in Bildern Volumen durch Licht und Schatten zu vermitteln:

Damit geditherte Pixelgrafiken erfolgreich funktionieren, muss der Farbmischbereich mindestens zwei Pixel breit sein.

Programme für Pixelkunst

Um das Erstellen von Kunstwerken im Pixelstil zu meistern, können Sie jeden Grafikeditor verwenden, der diese Art von Zeichnung unterstützt. Alle Künstler arbeiten je nach ihren Vorlieben mit unterschiedlichen Programmen.

Viele Menschen zeichnen bis heute lieber mit Pixeln im bekannten Standardprogramm des Windows-Betriebssystems – Microsoft Paint. Dieses Programm ist wirklich einfach zu erlernen, aber das ist auch sein Nachteil – es ist ziemlich primitiv, es unterstützt beispielsweise nicht das Arbeiten mit Ebenen und deren Transparenz.

Ein weiteres benutzerfreundliches Pixel-Art-Programm, dessen Demoversion völlig kostenlos online verfügbar ist, ist GraphicsGale. Der Nachteil des Programms ist vielleicht, dass es das Speichern von Pixelgrafiken im GIF-Format nicht unterstützt.

Besitzer von Mac-Computern können die Arbeit darin ausprobieren kostenloses Programm Pixen. Und Nutzer des Linux-Betriebssystems sollten die Programme GrafX2 und JDraw selbst testen.

Und natürlich ist das Programm eine großartige Option zum Erstellen von Pixelkunst Adobe Photoshop, das über umfangreiche Funktionen verfügt, das Arbeiten mit Ebenen ermöglicht, Transparenz unterstützt und bietet einfache Arbeit mit einer Palette. Mit Hilfe dieses Programms werden wir uns das ansehen einfache Beispiele, wie man selbst Pixelkunst zeichnet.

So zeichnen Sie Pixelkunst in Photoshop

Wie bei den traditionellen Arten Schöne Künste, großer Wert In der Pixelkunst gibt es Form, Schatten und Licht. Bevor Sie also lernen, wie man Pixelkunst zeichnet, sollten Sie sich die Mühe machen, sich mit den Grundlagen des Zeichnens vertraut zu machen – üben Sie das Zeichnen mit einem Bleistift auf Papier.

Zeichnung „Ballon“

Beginnen wir mit der einfachsten Sache – zeichnen Sie ein Gewöhnliches Ballon. Erstellen Sie in Photoshop eine neue Datei mit einer Bildschirmauflösung von 72 dpi. Es macht keinen Sinn, die Bildgrößen groß einzustellen – das ist Pixelkunst. Wählen Sie einen harten und undurchsichtigen Pinsel aus und stellen Sie die Größe auf 1 Pixel ein.

Zeichnen Sie einen kleinen gebogenen Halbbogen von links nach rechts und führen Sie ihn von unten nach oben. Denken Sie an die Regeln der Pixelkunst: Behalten Sie die gleichen Proportionen der Segmente bei, verschieben Sie sie um ein Pixel zur Seite, ohne Knicke oder rechte Winkel zu hinterlassen. Dann spiegeln Sie diesen Bogen durch Zeichnen Oberteil Ball.

Zeichnen Sie nach dem gleichen Prinzip den unteren Teil der Kugel und den Faden. Füllen Sie den Ball mit dem Füllwerkzeug mit Rot. Jetzt müssen wir nur noch Volumen hinzufügen – unser Ball sieht zu flach aus. Malen Sie einen dunkelroten Streifen auf die untere rechte Seite des Balls und dimmen Sie dann den Bereich. Zeichnen Sie in der oberen linken Ecke des Balls eine Hervorhebung aus weißen Pixeln.

Sehen Sie, wie einfach es ist – der Ball ist fertig!

Zeichnung „Roboter“

Versuchen wir nun, ein Bild auf herkömmliche Weise zu zeichnen, und erst dann bereinigen wir die Pixel, die gegen die Regeln der Pixelkunst verstoßen.

Öffnen Sie ein neues Dokument und erstellen Sie eine grobe Skizze des zukünftigen Roboters:

Jetzt können Sie alles beseitigen, was Ihnen im Weg steht, und bei Bedarf Pixel hinzufügen:

Zeichnen Sie auf die gleiche Weise den unteren Teil des Roboterkörpers. Verpassen Sie nicht die Gelegenheit, an geeigneten Stellen „perfekte“ gerade Linien zu zeichnen.

Detaillieren Sie den Körper des Roboters. Viele erfahrene Künstler empfehlen, sich vor Beginn der Arbeit eine Palette vorzubereiten – eine Reihe von Farben, die Sie beim Erstellen von Arbeiten im Pixelstil verwenden. Dies ermöglicht höchste Bildintegrität. Erstellen Sie eine Palette auf einer freien Fläche der Photoshop-Arbeitsfläche – beispielsweise in Form von Quadraten oder Farbflecken. Anschließend auswählen gewünschte Farbe, klicken Sie mit der Pipette darauf.

Sie können mit dem Füllen der Konturen beginnen. „Malen“ Sie den Körper des Roboters mit der Hauptfarbe. Unsere Farbe ist Lavendelblau.

Ändern Sie die Farbe des Umrisses – füllen Sie ihn mit Dunkelblau. Entscheiden Sie, wo sich die Lichtquelle in Ihrer Zeichnung befindet. Bei uns befindet es sich irgendwo oberhalb und rechts vor dem Roboter. Zeichnen wir die Brust unseres Charakters und verleihen ihm Volumen:

MIT rechte Seite Markieren Sie den tiefsten Schatten in der Zeichnung, der entlang der Körperkontur verläuft. Zeichnen Sie aus diesem Schatten von den Rändern zur Mitte hin einen helleren Schatten, der in den vorgesehenen, von der Lichtquelle beleuchteten Bereichen verschwindet:

Fügen Sie dem Roboter in allen Bereichen, in denen Licht reflektiert werden soll, Highlights hinzu:

Verleihen Sie den Beinen des Roboters mithilfe von Schatten und Licht ein zylindrisches Aussehen. Machen Sie auf die gleiche Weise Löcher aus Kreisen auf der Brust des Roboters:

Jetzt verbessern wir das Bild, indem wir den Schattenbereichen des Körpers das zuvor besprochene Pixel-Art-Element – ​​Dithering – hinzufügen.

An den Glanzlichtern muss man nicht schwanken, auch nicht an den Beinen – die sind schon zu klein. Zeichnen Sie mit dunklen und hellen Pixeln eine Reihe Nieten anstelle von Zähnen auf den Kopf des Roboters und fügen Sie außerdem eine lustige Antenne hinzu. Es schien uns, dass die Hand des Roboters nicht sehr gut gezeichnet wurde. Wenn Sie auf dasselbe Problem stoßen, schneiden Sie das Objekt in Photoshop aus und verschieben Sie es nach unten.

Das ist alles – unser lustiger Pixelroboter ist fertig!

Und mit Hilfe dieses Videos erfahren Sie, wie Sie Pixel-Art-Animationen in Photoshop erstellen:

Überzeugen Sie sich selbst und erzählen Sie es Ihren Freunden!

Lesen Sie auch auf unserer Website:

Mehr anzeigen

In diesem Tutorial erfahren Sie, wie Sie ein Foto einer Person in Pixelkunst umwandeln fiktive Figur Arcade-Spiel seit den frühen 90ern.
James May – alias Smudgethis – entwickelte diesen Stil 2011 für Musikvideo für einen Dubstep-Rock-Act. Neros erster Hit, Me & You – für den er eine Animation erstellte altes Spiel mit Neros zwei Mitgliedern war ein 2D-Rhythmus-Plattformer mit 16-Bit-Grafik ähnlich wie Double Dragon, aber 8-Bit-Retro-Klassikern wie Super Mario Bros. weit überlegen.
Um diesen Stil zu schaffen, müssen die Charaktere immer noch blockig, aber komplexer sein als in den älteren Spielen. Und obwohl Sie dafür eine begrenzte Farbpalette verwenden müssen Aussehen Denken Sie daran, dass diese Spiele immer noch 65.536 Farben hatten.
Hier zeigt Ihnen James, wie Sie mit einer einfachen Farbpalette und dem Bleistift-Werkzeug eine Figur aus einem Foto erstellen.
Genau wie bei der Animationsanleitung benötigen Sie auch ein Foto der Person. James hat für dieses Tutorial ein Foto eines Punks verwendet, das in den Projektdateien enthalten ist.
Wenn Sie fertig sind, sehen Sie sich dieses 16-Bit-After Effects-Animations-Tutorial an, in dem James Ihnen zeigt, wie Sie diesen Charakter in AE aufnehmen, ihn animieren und Retro-Spieleffekte anwenden.

Schritt 1

Öffnen Sie den Animation Guide (16 Bit).psd und 18888111.jpg (oder ein Foto Ihrer Wahl), um sie als Basis für die Figur zu verwenden. Ein Profilfoto in voller Länge funktioniert am besten und hilft Ihnen dabei, Farbpaletten und Stile für Ihre 16-Bit-Figur zu finden.
Das Animations-Tutorial enthält mehrere Posen auf einzelnen Ebenen. Wählen Sie diejenige aus, die auf die bestmögliche Weise entspricht der Pose auf Ihrem Foto – da wir keine Beine im Rahmen haben, habe ich mich für die Standardpose auf Stufe 1 entschieden.

Schritt 2

Wählen Sie mit dem rechteckigen Auswahlwerkzeug (M) den Kopf aus Ihrem Foto aus, kopieren Sie ihn (Befehlstaste/Strg+C) und fügen Sie ihn (Befehlstaste/Strg+V) in die Animationsanleitung (16 Bit) ein.psd.
Skalieren Sie das Bild proportional, sodass es passt. Sie werden feststellen, dass das Bild aufgrund der sehr kleinen PSD-Abmessungen sofort beginnt, ein Pixel zu zeichnen.

Schritt 3

Erstellen Sie eine neue Ebene und zeichnen Sie den Umriss mit einem schwarzen Ein-Pixel-Stift (B). Verwenden Sie dabei die darin enthaltene Animationsanleitung und das Foto als Grundlage. \N
Die mitgelieferte Anleitung hilft dabei, eine Reihe von Charakteren zu entwickeln, von größeren Bossfiguren bis hin zu schlankeren weiblichen Figuren. Dies ist eine grobe Anleitung zum Komponieren und Animieren meiner Pixel-Art-Charaktere.

Schritt 4

Probieren Sie mit der Pipette (I) den dunkelsten Bereich des Hauttons auf dem Foto aus und erstellen Sie ein kleines Farbquadrat. Wiederholen Sie dies noch dreimal, um eine vierfarbige Hauttonpalette zu erstellen.
Erstellen Sie eine weitere Ebene unter der Umrissebene und schattieren Sie das Bild mit einem Ein-Pixel-Pinsel und einer Farbpalette mit vier Farben (verwenden Sie dabei wiederum das Foto als Orientierungshilfe). \N
Am besten speichern Sie alle Elemente Ihres Kunstwerks oder verschiedener Ebenen, da Sie diese dann problemlos für andere Formen wiederverwenden können. Dies ist besonders für Bösewichte nützlich, da die meisten 16-Bit-Spiele sehr ähnliche Zahlen verwenden. Beispielsweise könnte ein Kumpel ein rotes Hemd und ein Messer haben, während ein späterer Kumpel bis auf ein blaues Hemd und eine Waffe identisch ist.

Schritt 5

Wiederholen Sie diesen Vorgang für andere Teile der Figur und schattieren Sie den Stoff so, dass er zu anderen Elementen auf dem Originalfoto passt. Stellen Sie sicher, dass Sie mit dem Pipetten-Werkzeug weiter experimentieren, um zunächst Farbpaletten zu erstellen, da dies einen konsistenten Farbsatz bietet, der gut aussieht und in die relativ begrenzte Farbpalette von 16-Bit-Spielen passt.

Schritt 6

Fügen Sie Daten hinzu, um Ihren Charakter mit Farbtönen, Tätowierungen, Ohrringen usw. zu verbessern. Speisen Sie hier und überlegen Sie, wie Ihr Charakter in der Spielumgebung erscheinen soll. Vielleicht könnten sie eine Axt benutzen oder einen Roboterarm haben?

Schritt 7

Um Ihren Charakter zu animieren, wiederholen Sie die vorherigen Schritte mit den anderen fünf Ebenen der Animationsanleitung. Es kann einige Zeit dauern, diesen Prozess zu meistern und nahtlose Ergebnisse zu erzielen. Durch die Wiederverwendung von Elementen aus vorherigen Frames können jedoch Abkürzungen vorgenommen werden. In dieser Sequenz mit sechs Bildern bleibt beispielsweise der Kopf unverändert.

Schritt 8

Um zu überprüfen, ob die Animationssequenz in Ordnung ist, öffnen Sie das Animationsfenster in Photoshop und stellen Sie sicher, dass dies der Fall ist im Moment nur das erste Bild der Animation. Sie können neue Frames hinzufügen und Ebenen ein- und ausschalten, um Ihre Animation zu erstellen, aber das meiste davon auf schnelle Weise besteht darin, den Befehl „Rahmen aus Ebenen erstellen“ im Popup-Menü des Bedienfelds (oben rechts) zu verwenden.
Der erste Rahmen ist ein leerer Hintergrund. Wählen Sie ihn also aus und klicken Sie auf das Papierkorbsymbol des Bedienfelds (unten), um ihn zu löschen.

Pixelkunst(Pixelgrafiken) erfreuen sich auch heutzutage noch großer Beliebtheit beim Spielen und dafür gibt es mehrere Gründe!

Was also Pixel Art so faszinierend macht:

1. Wahrnehmung. Pixel Art sieht fantastisch aus! Über jedes einzelne Pixel in einem Sprite lässt sich viel sagen.
2. Nostalgie. Pixel Art bringt ein großartiges nostalgisches Gefühl für Spieler zurück, die mit Nintendo, Super Nintendo oder Genesis aufgewachsen sind (wie ich!)
3. Leicht zu erlernen. Pixel Art ist eine der am einfachsten zu erlernenden Arten digitale Kunst, besonders wenn du eher ein Programmierer als ein Künstler bist ;]

Möchten Sie sich an Pixel Art versuchen? Dann begleiten Sie mich, während ich Ihnen zeige, wie Sie einen einfachen, aber effektiven Spielcharakter erstellen, den Sie in Ihrem eigenen Spiel verwenden können! Als Bonus schauen wir uns außerdem an, wie man es in iPhone-Spiele integriert!

Um erfolgreich zu lernen, benötigen Sie Adobe Photoshop. Wenn Sie es nicht haben, können Sie eine kostenlose Testversion von der Adobe-Website oder per Torrent herunterladen.

Was ist Pixelkunst?

Bevor wir beginnen, klären wir zunächst, was Pixel Art ist, denn es ist nicht so offensichtlich, wie Sie vielleicht denken. Der einfachste Weg zu definieren, was Pixel Art ist, besteht darin, zu definieren, was es nicht ist, nämlich: alles, wo Pixel automatisch erstellt werden. Hier einige Beispiele:

Gradient: Wählen Sie zwei Farben aus und berechnen Sie die Farbe der Pixel dazwischen. Sieht cool aus, ist aber keine Pixel Art!

Unschärfe-Werkzeug: Pixel definieren und zur Erstellung replizieren/bearbeiten neue Version vorheriges Bild. Auch hier keine Pixelkunst.

Glattes Werkzeug(im Grunde neue Pixel in verschiedenen Farben erzeugen, um etwas „Glattes“ zu machen). Sie müssen sie meiden!

Einige werden sagen, dass selbst automatisch generierte Farben keine Pixelkunst sind, da sie eine Ebene zum Mischen von Effekten erfordern (Mischen von Pixeln zwischen zwei Ebenen gemäß einem bestimmten Algorithmus). Da die meisten Geräte heutzutage aber mit Millionen von Farben umgehen können, kann diese Aussage vernachlässigt werden. Die Nutzung erfolgt jedoch nicht große Menge Farben sind eine gute Übung in der Pixelkunst.

Andere Tools wie z (Linie) oder Farbeimer-Werkzeug(Paint Bucket) generiert ebenfalls automatisch Pixel, aber da Sie sie so einstellen können, dass die von Ihnen gefüllten Pixel nicht geglättet werden, gelten diese Werkzeuge als Pixel-Art-freundlich.

Daher haben wir festgestellt, dass Pixel Art beim Platzieren jedes Pixels in einem Sprite viel Aufmerksamkeit erfordert, meist manuell und mit einer begrenzten Farbpalette. Machen wir uns jetzt an die Arbeit!

Erste Schritte

Bevor Sie mit der Erstellung Ihres ersten Pixel Art-Assets beginnen, sollten Sie wissen, dass Pixel Art nicht skaliert werden kann. Wenn Sie versuchen, es zu reduzieren, wird alles verschwommen aussehen. Wenn Sie versuchen, es zu vergrößern, sieht alles in Ordnung aus, solange Sie ein Vielfaches von zwei Zoomen verwenden (aber natürlich wird es nicht scharf sein).

Um dieses Problem zu vermeiden, müssen Sie zunächst verstehen, wie groß Ihr Spielcharakter oder Spielelement sein soll, und dann mit der Arbeit beginnen. Meistens basiert dies auf der Bildschirmgröße des Zielgeräts und darauf, wie viele „Pixel“ Sie sehen möchten.

Wenn Sie beispielsweise möchten, dass das Spiel auf dem Bildschirm des iPhone 3GS („Ja, ich möchte meinem Spiel wirklich einen pixeligen Retro-Look geben!“), dessen Bildschirmauflösung 480 x 320 Pixel beträgt, doppelt so groß aussieht, dann müssen Sie das tun Arbeiten Sie mit der halben Auflösung, in diesem Fall sind es 240x160 Pixel.

Öffnen Sie ein neues Photoshop-Dokument ( Datei → Neu…) und stellen Sie die Größe auf die Größe Ihres Spielbildschirms ein. Wählen Sie dann die Größe für Ihren Charakter aus.

Jede Zelle ist 32x32 Pixel groß!

Ich habe mich für 32x32 Pixel entschieden, nicht nur, weil es perfekt zur gewählten Bildschirmgröße passt, sondern auch, weil 32x32 Pixel auch ein Vielfaches von 2 ist, was für Spielzeug-Engines praktisch ist (Kachelgrößen sind oft ein Vielfaches von 2, Texturen werden als Vielfaches von 2 ausgerichtet, usw.

Selbst wenn die von Ihnen verwendete Engine jede Bildgröße unterstützt, können Sie jederzeit versuchen, mit einer geraden Pixelzahl zu arbeiten. Wenn in diesem Fall das Bild skaliert werden muss, wird die Größe besser aufgeteilt, was letztendlich zu einer besseren Leistung führt.

Zeichnen einer Pixel-Art-Figur

Pixel Art ist dafür bekannt, klare und leicht lesbare Grafiken zu sein: Mit nur wenigen Punkten können Sie Gesichtszüge, Augen, Haare und Körperteile definieren. Allerdings macht es die Größe des Bildes schwierig: Je kleiner Ihre Figur, desto schwieriger ist es, sie zu zeichnen. Um praktischer zu sein, wählen Sie das kleinste Charaktermerkmal. Ich wähle immer Augen, weil sie eine der besten Möglichkeiten sind, einem Charakter Leben einzuhauchen.

Wählen Sie in Photoshop aus Bleistiftwerkzeug(Bleistiftwerkzeug). Wenn Sie es nicht finden können, halten Sie einfach das Werkzeug gedrückt Pinselwerkzeug(Pinselwerkzeug) und Sie werden es sofort sehen (es sollte an zweiter Stelle in der Liste stehen). Sie müssen die Größe lediglich auf 1 Pixel ändern (Sie können in der Werkzeugoptionsleiste darauf klicken und die Größe ändern oder einfach die Taste [ gedrückt halten).

Sie werden auch brauchen Löschwerkzeug(Radiergummi-Werkzeug), also klicken Sie darauf (oder drücken Sie E) und ändern Sie seine Einstellungen, indem Sie aus der Dropdown-Liste auswählen Modus:(Modus:) Bleistift(Bleistift) (da es in diesem Modus kein Anti-Aliasing gibt).

Jetzt fangen wir mit dem Pixeln an! Zeichnen Sie die Augenbrauen und Augen wie im Bild unten gezeigt:

ey! Ich bin pixelig!!

Sie könnten bereits mit Lineart beginnen, aber eine praktischere Möglichkeit besteht darin, eine Silhouette der Figur zu zeichnen. Gute Nachrichten Der Vorteil besteht darin, dass Sie zu diesem Zeitpunkt noch kein Profi sein müssen. Versuchen Sie sich einfach die Größe der Körperteile (Kopf, Rumpf, Arme, Beine) und die Ausgangshaltung der Figur vorzustellen. Versuchen Sie so etwas in Grau:

Zu diesem Zeitpunkt müssen Sie kein Profi sein

Bitte beachten Sie, dass ich auch welche hinterlassen habe leerer Raum. Sie müssen nicht wirklich die gesamte Leinwand ausfüllen, sondern Platz für zukünftige Rahmen lassen. In diesem Fall ist es sehr nützlich, für alle die gleiche Leinwandgröße beizubehalten.

Nachdem Sie die Silhouette fertiggestellt haben, ist es Zeit . Jetzt müssen Sie bei der Pixelplatzierung vorsichtiger sein, also machen Sie sich keine Sorgen um Kleidung, Rüstung usw. Um auf der sicheren Seite zu sein, können Sie eine neue Ebene hinzufügen, damit Sie nie Ihre ursprüngliche Silhouette verlieren.

Wenn Sie das Gefühl haben, dass das Bleistift-Werkzeug zum Zeichnen zu langsam ist, können Sie es jederzeit verwenden (Linienwerkzeug). Bedenken Sie jedoch, dass Sie die Pixel nicht so präzise positionieren können wie mit einem Bleistift. Sie müssen konfigurieren wie unten gezeigt:

Wählen , drücken und halten Rechteckwerkzeug(Rechteck-Werkzeug)

Gehen Sie in der Dropdown-Liste zum Bedienfeld „Werkzeugoptionen“. Wählen Sie den Werkzeugmodus(Pfadverfolgungsmodus) Pixel auswählen, ändern Gewicht(Dicke) auf 1 Pixel (falls noch nicht geschehen) und deaktivieren Sie das Kontrollkästchen Anti-Alias(Glättung). So sollten Sie es haben:

Beachten Sie, dass ich den unteren Umriss der Füße nicht gezeichnet habe. Dies ist optional, da die Füße kein so wichtiger Teil der Beine sind, den es hervorzuheben gilt, und dadurch eine Pixelzeile auf der Leinwand eingespart wird.

Anwenden von Farben und Schatten

Jetzt können Sie mit dem Ausmalen unseres Charakters beginnen. Machen Sie sich keine Gedanken über die Auswahl die richtigen Farben, sie lassen sich später sehr einfach ändern, achten Sie nur darauf, dass jedes seine eigene „Farbe“ hat. Verwenden Sie die Standardfarben auf der Registerkarte Farbfelder(Fenster → Farbfelder).

Färben Sie Ihren Charakter wie unten (aber Sie können Ihrer Kreativität freien Lauf lassen und Ihre eigene Figur verwenden). eigene Farben!)

Eine gute, kontrastierende Farbe verbessert die Lesbarkeit Ihres Assets!

Bitte beachten Sie, dass ich die Kleidung oder Haare noch nicht skizziert habe. Denken Sie immer daran: Sparen Sie so viele Pixel wie möglich von unnötigen Konturen!

Sie müssen keine Zeit damit verschwenden, jedes Pixel zu malen. Um Ihre Arbeit zu beschleunigen, verwenden Sie Linien derselben Farbe oder Farbeimer-Werkzeug(Farbeimer-Werkzeug), um die Lücken zu füllen. Sie müssen es übrigens auch konfigurieren. Wählen Farbeimer-Werkzeug in der Symbolleiste (oder drücken Sie einfach die G-Taste) und ändern Sie Toleranz(Toleranz) auf 0 und deaktivieren Sie es ebenfalls Anti-Alias(Glättung).

Wenn Sie es jemals verwenden müssen Zauberstab-Werkzeug(Zauberstab-Werkzeug) – ein sehr nützliches Werkzeug, das alle Pixel mit derselben Farbe auswählt und es dann auf die gleiche Weise wie das „Farbeimer“-Werkzeug einrichtet – keine Toleranz und Anti-Aliasing.

Der nächste Schritt, der einige Kenntnisse von Ihrer Seite erfordert, ist das Ausweichen und Schattieren. Wenn Sie nicht wissen, wie man hell und hell zeigt dunkle Seiten, dann werde ich Ihnen unten einige Anweisungen geben. Wenn Sie keine Zeit oder Lust haben, es zu studieren, können Sie diesen Schritt überspringen und mit dem Abschnitt „Peppen Sie Ihre Palette auf“ fortfahren, denn am Ende können Sie Ihre Schattierung einfach so gestalten wie in meinem Beispiel!

Verwenden Sie für das gesamte Asset dieselbe Lichtquelle

Versuchen Sie, ihm die Formen zu geben, die Sie möchten/können, denn danach sieht das Asset interessanter aus. Jetzt können Sie zum Beispiel die Nase, die Stirn runzelnden Augen, den Haarschopf, die Falten in der Hose usw. sehen. Sie können auch einige Lichtpunkte hinzufügen, damit es noch besser aussieht:

Verwenden Sie beim Schattieren die gleiche Lichtquelle

Und nun, wie versprochen, eine kleine Anleitung zu Licht und Schatten:

Peppen Sie Ihre Palette auf

Viele Leute verwenden Standardpalettenfarben, aber da viele Leute diese Farben verwenden, können wir sie in vielen Spielen sehen.

Photoshop hat große Auswahl Farben in der Standardpalette, sollten sich aber nicht zu sehr darauf verlassen. Der beste Weg, eigene Farben zu erstellen, besteht darin, auf die Hauptpalette unten in der Symbolleiste zu klicken.

Durchsuchen Sie dann im Fenster „Farbauswahl“ die rechte Seitenleiste, um eine Farbe auszuwählen, und den Hauptbereich, um die gewünschte Helligkeit (heller oder dunkler) und Sättigung (heller oder stumpfer) auszuwählen.

Wenn Sie das gewünschte gefunden haben, klicken Sie auf OK und Konfigurieren Sie das Farbeimer-Tool neu. Keine Sorge, Sie können dann einfach das Kontrollkästchen „Zusammenhängend“ deaktivieren und wenn Sie mit einer neuen Farbe malen, werden auch alle neuen Pixel mit derselben Hintergrundfarbe ausgefüllt.

Auch deshalb ist es wichtig, mit einer geringen Anzahl an Farben zu arbeiten und immer die gleiche Farbe für das gleiche Element (Hemden, Haare, Helm, Rüstung usw.) zu verwenden. Denken Sie jedoch daran, für andere Bereiche andere Farben zu verwenden, da unsere Zeichnung sonst zu überfärbt wird!

Deaktivieren Sie „Zusammenhängend“, um ausgewählte Pixel mit derselben Farbe zu füllen

Ändern Sie die Farben, wenn Sie möchten, und erhalten Sie eine glamourösere Charakterfärbung! Sie können die Umrisse sogar neu einfärben. Achten Sie jedoch darauf, dass sie gut mit dem Hintergrund harmonieren.

Führen Sie abschließend einen Hintergrundfarbtest durch: Erstellen Sie eine neue Ebene unter Ihrem Charakter und füllen Sie sie mit verschiedene Farben. Dadurch soll sichergestellt werden, dass Ihr Charakter vor hellen, dunklen, warmen und kühlen Hintergründen sichtbar ist.

Wie Sie bereits sehen können, habe ich das Anti-Aliasing in allen Tools, die ich bisher verwendet habe, deaktiviert. Vergessen Sie nicht, dies auch in anderen Tools zu tun, z. B. Elliptisches Festzelt(Ovales Festzelt) und Lasso(Lasso).

Mit diesen Werkzeugen können Sie die Größe ausgewählter Teile ganz einfach ändern oder sie sogar drehen. Verwenden Sie dazu ein beliebiges Auswahlwerkzeug (oder drücken Sie M), um einen Bereich auszuwählen, klicken Sie mit der rechten Maustaste und wählen Sie ihn aus Kostenlose Transformation(Freie Transformation) oder drücken Sie einfach Strg + T. Um die Größe des ausgewählten Bereichs zu ändern, ziehen Sie einen der Griffe am Umfang des Transformationsrahmens. Um die Größe der Auswahl unter Beibehaltung der Proportionen zu ändern, halten Sie die Umschalttaste gedrückt und ziehen Sie an einem der Eckgriffe.

Photoshop glättet jedoch automatisch alles, was mit bearbeitet wurde Kostenlose Transformation Gehen Sie also vor der Bearbeitung zu Bearbeiten → Einstellungen → Allgemein(Strg + K) und ändern Bildinterpolation(Bildinterpolation) ein Nächster Nachbar(Nächster Nachbar). Kurz gesagt, wann Nächster Nachbar Die neue Position und Größe werden sehr grob berechnet, ohne neue Farben oder Deckkraft anzuwenden und die von Ihnen gewählten Farben beizubehalten.

Integration von Pixel Art in iPhone-Spiele

In diesem Abschnitt erfahren Sie, wie Sie unsere Pixelkunst mithilfe des Cocos2d-Spielframeworks in ein iPhone-Spiel integrieren. Warum denke ich nur über das iPhone nach? Denn dank einer Reihe von Artikeln über Unity (zum Beispiel: , oder Spiel im Stil von Jetpack Joyride in Unity 2D) wissen Sie bereits, wie man damit in Unity arbeitet, und aus den Artikeln über Crafty (Browsergames: Snake) und Impact (Einführung in die Erstellung von Browsergames auf Impact) haben Sie gelernt, wie Sie diese in den Canvas einfügen und Browsergames erstellen.

Wenn Sie neu bei Cocos2D oder bei der iPhone-App-Entwicklung im Allgemeinen sind, empfehle ich Ihnen, mit einem der Cocos2d- und iPhone-Tutorials zu beginnen. Wenn Sie Xcode und Cocos2d installiert haben, lesen Sie weiter!

Erstellen neues Projekt iOS → cocos2d v2.x → cocos2d iOS-Vorlage, nennen Sie es PixelArt und wählen Sie iPhone als Gerät aus. Ziehen Sie die erstellte Pixelkunst, zum Beispiel: sprite_final.png, in Ihr Projekt und öffnen Sie es dann HelloWorldLayer.m und ersetzen Sie die Initialisierungsmethode durch Folgendes:

-(id) init ( if((self=)) ( CCSprite * hero = ; hero.position = ccp(96, 96); hero.flipX = YES; ; ) return self; )

Wir positionieren das Sprite auf der linken Seite des Bildschirms und drehen es so, dass es nach rechts zeigt. Kompilieren Sie es, führen Sie es aus und dann sehen Sie Ihr Sprite auf dem Bildschirm:

Denken Sie jedoch daran, dass wir, wie wir weiter oben in diesem Tutorial besprochen haben, die Pixelskalierung auf künstliche Weise vergrößern wollten, damit sich jedes Pixel deutlich von den anderen unterscheidet. Fügen Sie also diese neue Zeile innerhalb der Initialisierungsmethode hinzu:

Hero.scale = 2.0;

Nichts Kompliziertes, oder? Kompilieren, ausführen und ... warten Sie, unser Sprite ist verschwommen!

Dies liegt daran, dass Cocos2d die Zeichnung beim Skalieren standardmäßig glättet. Wir brauchen das nicht, also fügen Sie die folgende Zeile hinzu:

Diese Zeile konfiguriert Cocos2d so, dass Bilder ohne Anti-Aliasing skaliert werden, sodass unser Typ immer noch „pixelig“ aussieht. Kompilieren, ausführen und ... ja, es funktioniert!

Beachten Sie die Vorteile der Verwendung von Pixel-Art-Grafiken: Wir können ein kleineres Bild als das verwenden, was auf dem Bildschirm angezeigt wird, wodurch viel Texturspeicher gespart wird. Für Retina-Displays müssen wir nicht einmal separate Bilder erstellen!

Was kommt als nächstes?

Ich hoffe, Ihnen hat dieses Tutorial gefallen und Sie haben etwas mehr über Pixelkunst gelernt! Bevor ich mich verabschiede, möchte ich Ihnen noch einige Ratschläge geben:

• Versuchen Sie stets, Anti-Aliasing, Farbverläufe oder zu viele Farben für Ihre Assets zu vermeiden. Dies dient Ihrem eigenen Wohl, insbesondere wenn Sie noch Anfänger sind.
• Wenn Sie WIRKLICH einen Retro-Look nachahmen möchten, achten Sie auf die Grafik in 8-Bit- oder 16-Bit-Konsolenspielen.
• Einige Stile verwenden keine dunklen Konturen, andere berücksichtigen nicht die Wirkung von Licht oder Schatten. Es kommt auf den Stil an! In unserem Tutorial haben wir keine Schatten gezeichnet, aber das bedeutet nicht, dass Sie sie nicht verwenden sollten.

Für einen Anfänger scheint Pixel Art die am einfachsten zu erlernende Grafik zu sein, aber in Wirklichkeit ist es nicht so einfach, wie es scheint. Der beste Weg Um Ihre Fähigkeiten zu verbessern, heißt es üben, üben, üben. Ich empfehle dringend, Ihre Arbeit in den Pixel Art-Foren zu veröffentlichen, damit andere Künstler Ihnen Ratschläge geben können – es ist eine großartige Möglichkeit, Ihre Technik zu verbessern! Klein anfangen, viel üben, bekommen Rückmeldung und Sie können ein fantastisches Spiel erstellen, das Ihnen viel Geld und Freude bringen wird!