Hilfe zu Tele2, Tarife, Fragen

Pixelgrafiken (im Folgenden kurz Pixel-Art genannt) erfreuen sich heutzutage vor allem durch Indie-Spiele immer größerer Beliebtheit. Das ist verständlich, denn auf diese Weise können Künstler das Spiel mit einer großen Vielfalt an Charakteren füllen und müssen nicht Hunderte von Stunden damit verbringen, 3D-Objekte zu modellieren und komplexe Objekte manuell zu zeichnen. Wenn Sie Pixelkunst erlernen möchten, müssen Sie zunächst lernen, wie man sogenannte „Sprites“ zeichnet. Wenn Sie dann keine Angst mehr vor Sprites haben, können Sie mit der Animation fortfahren und sogar Ihre Arbeit verkaufen!

Schritte

Teil 1

Wir sammeln alles, was Sie brauchen

Laden Sie gute Grafikeditoren herunter. Natürlich können Sie in Paint Meisterwerke erstellen, aber das ist schwierig und nicht sehr praktisch. Es wäre viel besser, in etwas zu arbeiten wie:

• Photoshop
• Paint.net
• Pixen

1. Kaufen Sie ein Grafiktablett. Wenn Sie nicht gerne mit der Maus zeichnen, dann sind ein Tablet und ein Stift genau das Richtige für Sie. Am beliebtesten sind übrigens Wacom-Tablets.

   Aktivieren Sie „Raster“ in Ihrem Grafikeditor. Wenn Ihr Grafikeditor die Rasterdarstellung nicht unterstützt, sollten Sie sich tatsächlich nach einem anderen Programm umsehen. Anhand des Rasters können Sie deutlich erkennen, wo und wie sich jedes einzelne Pixel befindet. In der Regel wird der Rosenkranz über das Menü „Ansicht“ aktiviert.

   • Möglicherweise müssen Sie die Anzeigeeinstellungen etwas anpassen, um sicherzustellen, dass jedes Rastersegment tatsächlich ein Pixel darstellt. Jedes Programm macht dies anders, achten Sie daher auf entsprechende Tipps.

2. Zeichnen Sie mit einem Bleistift und einem 1-Pixel-Pinsel. Jeder Grafikeditor sollte über ein „Bleistift“-Tool verfügen. Wählen Sie es aus und stellen Sie die Pinselgröße auf 1 Pixel ein. Jetzt können Sie zeichnen ... in Pixeln.

   Teil 2

   An den Grundlagen arbeiten

   1. Erstellen Sie ein neues Bild. Da Sie lernen, im Pixel-Art-Stil zu zeichnen, sollten Sie keine epischen Leinwände anstreben. Wenn Sie sich erinnern, im Spiel Super Mario Bros. Der gesamte Bildschirm war 256 x 224 Pixel groß und Mario selbst passte in einen Raum von 12 x 16 Pixel!

      Hineinzoomen. Ja, sonst sieht man einzelne Pixel einfach nicht. Ja, Sie müssen es sehr stark erhöhen. Nehmen wir an, 800 % sind ganz normal.

      Lernen Sie, gerade Linien zu zeichnen. Es scheint einfach, aber wenn Sie mit zitternder Hand plötzlich irgendwo in der Mitte eine 2 Pixel dicke Linie zeichnen, wird Ihnen der Unterschied direkt ins Auge fallen. Zeichnen Sie gerade Linien, bis Sie das Geraden-Werkzeug aktivieren müssen. Sie müssen lernen, gerade Linien von Hand zu zeichnen!

      Lernen Sie, geschwungene Linien zu zeichnen. In einer geschwungenen Linie sollte es sozusagen gleichmäßige „Linienumbrüche“ geben (was in der Abbildung oben deutlich zu erkennen ist). Nehmen wir an, Sie beginnen mit dem Zeichnen einer gekrümmten Linie und zeichnen eine gerade Linie mit 6 Pixeln, darunter eine gerade Linie mit drei Pixeln, darunter eine gerade Linie mit zwei Pixeln und darunter eine gerade Linie mit einem Pixel. Zeichnen Sie auf der anderen Seite dasselbe (natürlich gespiegelt). Dies ist der Verlauf, der als optimal angesehen wird. Im Muster „3-1-3-1-3-1-3“ gezeichnete Kurven entsprechen nicht den Pixel-Art-Standards.

      Vergessen Sie nicht, Fehler zu löschen. Das „Radiergummi“-Werkzeug sollte ähnlich wie ein Bleistift eingerichtet sein, sodass die Pinselgröße 1 Pixel beträgt. Je größer der Radiergummi, desto schwieriger ist es, nicht zu viel zu löschen, also ist alles logisch.

   Teil 3

   Das erste Sprite erstellen

   Überlegen Sie, welchen Zwecken das Sprite dienen soll. Wird es statisch sein? Animiert? Ein statisches Sprite kann vollständig mit Details gefüllt werden, aber ein animiertes Sprite ist besser, um es einfacher zu machen, damit Sie nicht stundenlang alle Details in allen Animationsbildern neu zeichnen müssen. Wenn Ihr Sprite übrigens mit anderen verwendet werden soll, sollten diese alle im gleichen Stil gezeichnet sein.

   Finden Sie heraus, ob besondere Anforderungen an das Sprite gestellt werden. Wenn Sie beispielsweise für ein Projekt zeichnen, ist es sinnvoll, mit Farb- oder Dateigrößenanforderungen zu rechnen. Dies wird jedoch etwas später wichtiger, wenn Sie mit der Arbeit beginnen große Projekte mit vielen verschiedenen Sprites.

   • Objektiv gesehen werden heutzutage kaum noch Anforderungen an die Größe oder Palette von Sprites gestellt. Wenn Sie jedoch Grafiken für ein Spiel zeichnen, das auf älteren Spielesystemen gespielt werden soll, müssen Sie alle Einschränkungen berücksichtigen.

   1. Machen Sie eine Skizze. Eine Skizze auf Papier ist die Grundlage jedes Sprites. Glücklicherweise können Sie auf diese Weise verstehen, wie alles aussehen wird, und bei Bedarf etwas im Voraus korrigieren. Darüber hinaus können Sie dann anhand einer Papierskizze nachzeichnen (falls Sie noch ein Tablet haben).

      • Sparen Sie bei Ihrer Skizze nicht an Details! Zeichnen Sie alles, was Sie in der endgültigen Zeichnung sehen möchten.

   2. Übertragen Sie die Skizze in einen Grafikeditor. Sie können eine Papierskizze auf einem Tablet nachzeichnen oder alles manuell neu zeichnen, Pixel für Pixel – egal, Sie haben die Wahl.

      • Verwenden Sie beim Nachzeichnen der Skizze 100 % Schwarz als Umrissfarbe. Wenn etwas passiert, können Sie es später manuell ändern, aber vorerst ist es für Sie einfacher, mit Schwarz zu arbeiten.

   3. Verfeinern Sie den Umriss der Skizze. In diesem Zusammenhang kann man natürlich auch anders sagen: Löschen Sie alles Unnötige. Was soll das? Der Umriss sollte 1 Pixel dick sein. Erhöhen Sie dementsprechend den Maßstab und radieren Sie, radieren Sie den Überschuss ... oder ergänzen Sie mit einem Bleistift, was fehlt.

      • Lassen Sie sich bei der Arbeit an einer Skizze nicht von den Details ablenken – sie werden an der Reihe sein.

   Teil 4

   Färben des Sprites

   1. Frischen Sie Ihre Farbtheorie auf. Schauen Sie sich die Palette an, um zu sehen, welche Farben Sie verwenden sollten. Da ist alles einfach: Je weiter die Farben voneinander entfernt sind, desto mehr unterscheiden sie sich voneinander; Je näher die Farben beieinander liegen, desto ähnlicher sind sie besser in der Nähe sie passen gut zueinander.

      • Wählen Sie Farben, die Ihren Sprite sowohl schön als auch optisch ansprechend machen. Und ja, Pastellfarben sollten vermieden werden (es sei denn, Ihr gesamtes Projekt ist in diesem Stil gestaltet).

   2. Wählen Sie mehrere Farben. Je mehr Farben Sie verwenden, desto „ablenkender“ wird Ihr Sprite sozusagen. Schauen Sie sich einige Pixel-Art-Klassiker an und versuchen Sie zu zählen, wie viele Farben dort verwendet werden.

      • Mario – nur drei Farben (wenn es um die klassische Version geht), und selbst diese liegen auf der Palette fast nahe beieinander.
      • Sonic – Obwohl Sonic detaillierter gezeichnet ist als Mario, basiert es immer noch auf nur 4 Farben (und Schatten).
      • Ryu ist fast ein Klassiker unter den Sprites, wie sie in Kampfspielen verstanden werden, und besteht aus großen Flächen mit einfachen Farben und etwas Schatten zur Abgrenzung. Ryu ist jedoch etwas komplizierter als Sonic – es gibt bereits fünf Farben und Schatten.

   3. Färbe das Sprite. Verwenden Sie das Farbfüllungswerkzeug, um Ihr Sprite einzufärben, und machen Sie sich keine Sorgen, dass alles flach und leblos aussieht – zu diesem Zeitpunkt ist nicht zu erwarten, dass es anders funktioniert. Das Prinzip des Füllwerkzeugs ist einfach: Es füllt alle Pixel der Farbe, auf die Sie geklickt haben, mit der von Ihnen ausgewählten Farbe, bis die Ränder erreicht sind.

   Teil 5

   Schatten hinzufügen

   Entscheiden Sie sich für eine Lichtquelle. Hier ist das Wesentliche: Sie müssen entscheiden, in welchem ​​Winkel das Licht auf das Sprite trifft. Sobald Sie sich dafür entschieden haben, können Sie glaubwürdig aussehende Schatten erzeugen. Ja, es wird kein „Licht“ im wörtlichen Sinne geben, es geht darum, sich vorzustellen, wie es auf die Zeichnung fallen wird.

   • Die einfachste Lösung besteht darin, anzunehmen, dass sich die Lichtquelle sehr hoch über dem Sprite befindet, leicht links oder rechts davon.

   1. Beginnen Sie mit dem Auftragen von Schatten mit Farben, die etwas dunkler als die Basis sind. Wenn das Licht von oben kommt, wo wird dann der Schatten sein? Das ist richtig, wo direktes Licht nicht fällt. Um einen Schatten hinzuzufügen, fügen Sie dem Sprite dementsprechend einfach mehrere weitere Ebenen mit Pixeln der entsprechenden Farbe über oder unter dem Umriss hinzu.

      • Wenn Sie die Einstellung „Kontrast“ der Grundfarbe verringern und die Einstellung „Helligkeit“ leicht erhöhen, erhalten Sie eine gute Farbe zum Zeichnen von Schatten.
      • Verwenden Sie keine Farbverläufe. Farbverläufe sind böse. Farbverläufe sehen billig, schäbig und unprofessionell aus. Ein ähnlicher Effekt wie bei Farbverläufen wird durch die Technik des „Ausdünnens“ erzielt (siehe unten).

   2. Vergessen Sie nicht den Halbschatten. Wählen Sie eine Farbe zwischen der Grundfarbe und der Schattenfarbe. Erstellen Sie damit eine weitere Ebene – dieses Mal jedoch zwischen den Schichten dieser beiden Farben. Das Ergebnis ist der Übergangseffekt von einem dunklen zu einem hellen Bereich.

      Highlights zeichnen. Das Highlight ist die Stelle auf dem Sprite, wo das meiste Licht einfällt. Sie können ein Highlight zeichnen, wenn Sie eine Farbe nehmen, die etwas heller als die Grundfarbe ist. Die Hauptsache ist, sich nicht von der Blendung mitreißen zu lassen, sie lenkt ab.

   Teil 6

   Wir verwenden fortgeschrittene Zeichentechniken

   Verdünnung verwenden. Diese Technik kann die Veränderung des Schattens vermitteln. Mit der Ausdünnung können Sie mit nur wenigen Farben einen Verlaufseffekt erzeugen, indem Sie die Position der Pixel ändern, wodurch der Übergangseffekt entsteht. Die Anzahl und Position der Pixel zweier unterschiedlicher Farben verleitet das Auge dazu, unterschiedliche Schatten zu sehen.

   • Anfänger missbrauchen das Ausdünnen oft, seien Sie nicht wie sie.

   1. Vergessen Sie nicht das Anti-Aliasing (Beseitigung von Konturunregelmäßigkeiten). Ja, Visitenkarte Pixelkunst – die sichtbare „Pixelierung“ eines Bildes. Manchmal möchten Sie jedoch, dass die Linien etwas weniger auffällig und etwas glatter aussehen. Hier kommt Anti-Aliasing zur Rettung.

      • Fügen Sie den Kurven der Kurve Zwischenfarben hinzu. Tragen Sie eine Schicht Zwischenfarbe um den Umriss der Kurve auf, die Sie glätten möchten. Wenn es immer noch eckig aussieht, fügen Sie eine weitere Schicht hinzu, diesmal heller.
      • Wenn Sie möchten, dass das Sprite mit dem Hintergrund verschmilzt, verwenden Sie kein Anti-Aliasing am äußeren Rand des Sprites.

   2. Erfahren Sie, wie Sie selektives Rendering verwenden. Worum es geht: Der Umriss wird mit einer Farbe gezeichnet, die der Farbe der Füllung ähnelt. Das Ergebnis ist ein weniger „karikaturhaftes“ Bild, und zwar aufgrund von mehr echtes Aussehen Kontur. Versuchen Sie beispielsweise, die Haut selektiv zu rendern und dabei einen klassischen schwarzen Umriss für Kleidung oder Objekte beizubehalten.

Bereits im 20. Jahrhundert entwickelten sich Pixelgrafiken zu einem breiten Anwendungsgebiet. Computerspiele, besonders in den 90ern. 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. Daher können Sie 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 gut 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 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 bildende Kunst, sehr wichtig In der Pixelkunst gibt es Form, Schatten und Licht. Bevor Sie also lernen, wie man Pixelkunst zeichnet, machen Sie sich mit den Grundlagen des Zeichnens vertraut – üben Sie das Zeichnen mit einem Bleistift auf Papier.

Zeichnung „Ballon“

Beginnen wir mit der einfachsten Sache – zeichnen Sie ein Gewöhnliches Luftballon. 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 Oberer Teil Ball.

Zeichnen Sie nach dem gleichen Prinzip die Unterseite der Kugel und den Faden. Füllen Sie den Ball mit dem Füllwerkzeug mit Rot. Jetzt muss nur noch Volumen hinzugefügt werden – 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. Lassen Sie uns die Brust unseres Charakters zeichnen und Volumen hinzufügen:

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:

Zeig mehr

4,7 (93,8 %) 158 Stimmen

Zeichnungen nach Zellen oder Pixelkunst sind eine sehr beliebte Kunstform bei Schülern und Studenten. Bei langwierigen Vorlesungen erspart Ihnen das Zeichnen nach Quadraten Langeweile. Der Prototyp des Zeichnens nach Quadraten war der Kreuzstich, bei dem ein Kreuzmuster auf eine Leinwand, einen mit Quadraten markierten Stoff, gezeichnet wurde. Wir waren alle einmal Studenten und Schulkinder und zeichneten aus Langeweile verschiedene Bilder Stellen Sie sich meine Überraschung in den Zellen vor, als ich herausfand, dass es sich hier praktisch um Kunst mit ihren Meisterwerken und Genies handelt. Ich fing an, mich eingehender mit dem Thema zu befassen, und dabei kam folgendes heraus ...

So zeichnen Sie Bilder nach Zellen

Diese Kunst ist für jeden zugänglich, die Hauptsache ist, den Zellen klar zu folgen. Schulhefte sind ideal zum Zeichnen von Bildern; die Größe ihrer Quadrate beträgt 5 x 5 mm, und das Notizbuch selbst ist 205 mm x 165 mm groß. An dieser Moment Frühlingsnotizbücher mit einem A4-Blatt erfreuen sich bei Boxkünstlern immer größerer Beliebtheit; die Größe dieses Notizbuchs beträgt 280 mm x 205 mm.

Professionelle Künstler schaffen ihre Meisterwerke auf Millimeterpapier (Zeichenpapier), da gibt es Raum zum Entfalten. Der einzige Nachteil von Millimeterpapier ist, dass es blass ist grüne Farbe, was beim Skizzieren mit Farbstiften nicht auffällt.
Achten Sie bei der Auswahl eines Notizbuchs zum Zeichnen auf die Dicke des Papiers. Die Qualität Ihrer Zeichnung in den Zellen hängt von der Dichte ab und davon, ob sie auf der falschen Seite des Blattes erscheint. Die ideale Blattdichte beträgt mindestens 50 g/m².

So zeichnen Sie Bilder nach Zellen

Um Bilder nach Zellen auszumalen, benötigen Sie keine speziellen Werkzeuge; Bleistifte und Kugelschreiber reichen aus. Monochrome Gemälde sind sehr cool, aber ich möchte meinem Leben unbedingt etwas Farbe verleihen. Damit die Farben abwechslungsreicher werden, gehen Sie in ein Schreibwarengeschäft und wählen Sie aus, was Ihr Herz begehrt. Gelstifte, Öl, Kugel.

Kugelschreiber für Pixelkunst

Filzstifte für Zeichnungen in Zellen

Wenn Sie gerne mit Filzstiften zeichnen, haben Sie Recht, die Farben der Filzstifte sind sehr satt. Es sei daran erinnert, dass Filzstifte in zwei Gruppen eingeteilt werden: Stifte auf Alkohol- und Wasserbasis sind sicherer, können aber das Papier durchnässen. Auch Alkohol kann Papier durchnässen und auch der Geruch ist nicht jedermanns Sache.

Bleistifte für Zeichnungen nach Zellen

Bleistifte sind eine weitere Art von Skizziergeräten. Bleistifte sind in der Artenvielfalt keine Ausnahme; es gibt sie in den Ausführungen Kunststoff, Wachs, Holz und Aquarell. Wir malen mit Holz frühe Kindheit, und wir wissen, dass der Stift oft kaputt geht. Plastik- und Wachsmodelle brechen seltener, sind aber dicker, was das Zeichnen weniger praktisch macht. Um Aquarellstifte kommt nicht in Frage, da man nach dem Malen mit einem Bleistift die Zeichnung mit einem angefeuchteten Pinsel abdecken muss, was bei Notizbuchblättern nicht akzeptabel ist.

Sehen Sie sich ein Video an, wie einfach es ist, Bilder in Zellen zu zeichnen und wie schön das Ergebnis sein kann:

Noch ein paar Zeichenschemata, die mir gefallen haben:

Punktgrafiken – Pixel-Art-Technologie

Wir haben herausgefunden, welches Zubehör benötigt wird. Machen wir uns nun mit der Technologie vertraut. Die Pixel-Art-Technologie ist sehr einfach, es handelt sich um Punktgrafiken.

Bevor wir anfangen, uns mit Pixel-Art-Methoden zu befassen, gehen wir zurück in unsere Kindheit in den 80er und 90er Jahren. Natürlich diejenigen, die dort aufgewachsen sind Postsowjetische Zeiten, erinnert an 8-Bit-Videospiele, Spielgrafiken, die auf Pixelgrafiken basieren.

Der beste Weg Alles zu meistern ist Übung. Versuchen wir, die Pixelkunst zu meistern:

Nehmen wir einen schwarz-roten Ölstift und ein kariertes Notizbuchblatt.

Lassen Sie uns zunächst eine einfache Zeichnung erstellen. Zählen wir die Zellen, bestimmen den Umriss und färben ihn entsprechend den Farben.

Zeichnen wir zum Beispiel ein Herz:

1. Nehmen Sie ein kariertes Blatt und einen Stift mit schwarzer Tinte, setzen Sie 3 Punkte, wie im Bild, die Punkte markieren, welche Zellen schwarz gestrichen werden.
   
   
2. Zeichnen Sie Linien, die die Konturen des Bildes markieren.
   
   
3. Markieren Sie auf jeder Seite drei Punkte, siehe Abbildung.
   
   
4. Wir markieren den Bereich der Zeichnung mit zwei Linien.
   
   
5. Lassen Sie uns auf jeder Seite einen weiteren Punkt setzen und unter den oberen Punkten Grenzen ziehen.
   
   
6. Zeichnen wir 8 Punkte vertikal und 4 Punkte auf beiden Seiten, wie in der Abbildung unten gezeigt.
   
7. Nach dem Ausgeben Vertikale Linien Wie in der Abbildung gezeigt, geben wir die Grenzen der Abbildung vollständig an.
   
8. Markieren Sie auf die gleiche Weise links und rechts den unteren Teil des Herzens.
   
   
9. Wir umreißen die Zellen wie in unserem Bild.
   
   
10. Als nächstes müssen wir die Innenseite des Herzens mit einem roten Stift übermalen und den Glanzpunkt des Lichts unbemalt lassen.
    
    
11. Und zum Schluss schattieren Sie die mit Punkten markierten Zellen mit einem schwarzen Stift. Jetzt haben Sie gelernt, wie man 8-Bit-Bilder zeichnet.
    
    

Wenn Sie der Meinung sind, dass große und voluminöse Bilder nichts für Sie sind, sollten Sie versuchen, ein Foto aus dem Internet zu zeichnen. Hast Du Angst? Ist es nicht wert.

Nehmen

• Schwarzer Stift,
• Bleistifte,
• kariertes Notizbuch,
• Computer,
• Foto oder Bild aus dem Internet
• Photoshop-Programm.

Für die Anwendung volumetrische Zeichnungen Wir müssen die Anzahl der Zellen zählen, die bemalt werden. Es ist ziemlich schwer, keinen Fehler zu machen große Mengen. Achten Sie außerdem darauf, Farbtöne zu wählen, die denen des Originalbilds ähneln.
Also, lasst uns handeln:

Ich gebe Ihnen einen Rat, der mir sehr hilft: Wenn Sie einen Farbdrucker haben, drucken Sie die Zeichnung aus, wenn nicht, ist das kein Problem. Zeichnen Sie ein Raster aus 10 Zellen mit einem dickeren Umriss. Wenn auf einem gedruckten Blatt kein Platz zum Drucken vorhanden ist, können Sie das Bild mit einem Lineal und einem Kontraststift in Paint öffnen.
Ich wünsche Ihnen kreativen Erfolg.

Pixel Art (Pixelgrafiken) ist bei Spielen auch heutzutage noch sehr beliebt und dafür gibt es mehrere Gründe!

Was also Pixel Art fasziniert:

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 lernen. 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 sind 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!

Beginn der Arbeiten

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 sollte, 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 erschwert die Größe des Bildes die Aufgabe: Je kleiner Ihr Charakter ist, desto schwieriger ist es, ihn 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 ist, 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 Freiraum. 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 nachfolgend dargestellt:

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 auf dem Bild unten (Sie können aber auch 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. Am besten erstellen Sie Ihre eigenen Farben, indem Sie unten in der Symbolleiste auf die Hauptpalette 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, es werden keine neuen Farben oder Deckkraft angewendet und die von Ihnen gewählten Farben bleiben erhalten.

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 Artikeln über Crafty (Browsergames: Snake) und Impact (Einführung in die Erstellung von Browsergames auf Impact) haben Sie gelernt, wie Sie diese in die Leinwand 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 bereits weiter oben in diesem Tutorial besprochen, 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 Antialiasing 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, Ihre Fähigkeiten zu verbessern, ist Ü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!

Teil 7: Texturen und Unschärfe
Teil 8: Tile World

Vorwort

Es gibt viele Definitionen von Pixelkunst, aber hier verwenden wir diese: Ein Bild ist Pixelkunst, wenn es vollständig von Hand erstellt wird und die Farbe und Position jedes gezeichneten Pixels kontrolliert werden kann. Natürlich werden in der Pixelkunst die Einbeziehung oder Verwendung von Pinseln oder Unschärfewerkzeugen oder heruntergekommenen Maschinen (nicht sicher) und anderen Softwareoptionen, die „modern“ sind, von uns nicht verwendet (tatsächlich zur Verfügung gestellt bedeutet „zu unserer Verfügung“ , aber logischerweise scheint es auf diese Weise korrekter zu sein). Es ist auf die Bleistift- und Füllwerkzeuge beschränkt.

Allerdings kann man nicht sagen, dass Pixel-Art- oder Nicht-Pixel-Art-Grafiken mehr oder weniger schön sind. Man kann mit Recht sagen, dass Pixelkunst anders ist und sich besser für Spiele im Retro-Stil (wie Super Nintendo oder Game Boy) eignet. Sie können die hier erlernten Techniken auch mit Effekten aus der Nicht-Pixel-Kunst kombinieren, um einen Hybridstil zu erstellen.

Hier lernen Sie den technischen Teil der Pixelkunst kennen. Allerdings werde ich dich niemals zum Künstler machen ... aus dem einfachen Grund, weil ich auch kein Künstler bin. Ich werde Ihnen weder die menschliche Anatomie noch die Struktur der Künste beibringen, und ich werde wenig über die Perspektive sagen. In diesem Tutorial finden Sie viele Informationen zu Pixel-Art-Techniken. Am Ende sollten Sie in der Lage sein, Charaktere und Kulissen für Ihre Spiele zu erstellen, sofern Sie aufmerksam sind, regelmäßig üben und die gegebenen Tipps anwenden.

- Ich möchte auch darauf hinweisen, dass nur einige der in diesem Tutorial verwendeten Bilder vergrößert sind. Bei Bildern, die nicht vergrößert sind, ist es gut, wenn Sie sich die Zeit nehmen, diese Bilder zu kopieren, damit Sie sie im Detail studieren können. Pixelkunst ist die Essenz von Pixeln; es ist sinnlos, sie aus der Ferne zu betrachten.

Am Ende muss ich allen Künstlern danken, die auf die eine oder andere Weise mit mir an der Erstellung dieses Leitfadens mitgewirkt haben: Shin für seine schmutzigen Arbeiten und Strichzeichnungen, Xenohydrogen für sein Genie im Umgang mit Farben, Lunn für sein Wissen über Perspektive, und Panda, der strenge Ahruon, Dayo und Kryon für ihre großzügigen Beiträge zur Illustration dieser Seiten.

Lassen Sie mich also auf den Punkt zurückkommen.

Teil 1: Die richtigen Werkzeuge

Schlechte Nachrichten: Sie werden in diesem Teil kein einziges Pixel zeichnen! (Und das ist kein Grund, es zu überspringen, oder?) Wenn es ein Sprichwort gibt, das ich hasse, dann ist es „Es gibt keine schlechten Werkzeuge, nur schlechte Arbeiter.“ Eigentlich dachte ich, dass nichts weiter von der Wahrheit entfernt sein könnte (außer vielleicht „Was dich nicht umbringt, macht dich stärker“), und die Pixelkunst ist eine sehr gute Bestätigung. Dieser Leitfaden soll Ihnen die verschiedenen Softwareprogramme vorstellen, die zum Erstellen von Pixelkunst verwendet werden, und Ihnen bei der Auswahl des richtigen Programms helfen.

1.Einige alte Dinge

Bei der Auswahl einer Software zum Erstellen von Pixelkunst denken die Leute oft: „Wahl der Software? Das ist Wahnsinn! Alles, was wir brauchen, um Pixelkunst zu schaffen, ist Farbe (anscheinend ein Wortspiel, Zeichnung und ein Programm)“ Tragischer Fehler: Ich habe über schlechte Werkzeuge gesprochen, das ist das erste. Paint hat einen Vorteil (und nur einen): Sie haben es bereits, wenn Sie Windows verwenden. Andererseits weist es viele Mängel auf. Dies ist eine (unvollständige) Liste:

*Sie können nicht mehr als eine Datei gleichzeitig öffnen
* Keine Palettensteuerung.
*Keine Ebenen oder Transparenz
* Keine nicht rechteckigen Auswahlmöglichkeiten
* Wenige Hotkeys
* Furchtbar unpraktisch

Kurz gesagt, Sie können Paint vergessen. Jetzt schauen wir uns die echte Software an.

2. Am Ende...

Die Leute denken dann: „Okay, Paint ist zu eingeschränkt für mich, also verwende ich meinen Freund Photoshop (oder Gimp oder PaintShopPro, das ist dasselbe), die Tausende von Funktionen haben.“ Das kann gut oder schlecht sein: Wenn Sie eines dieser Programme bereits kennen, können Sie Pixelkunst erstellen (wobei alle Optionen für automatisches Anti-Aliasing deaktiviert sind und viele der erweiterten Funktionen deaktiviert sind). Wenn Sie diese Programme noch nicht kennen, werden Sie viel Zeit damit verbringen, sie zu erlernen, auch wenn Sie nicht alle Funktionen benötigen, was Zeitverschwendung wäre. Kurz gesagt, wenn Sie sie bereits verwenden lange Zeit, können Sie Pixelkunst erstellen (ich persönlich verwende Photoshop aus Gewohnheit), aber ansonsten ist es viel besser, Programme zu verwenden, die auf Pixelkunst spezialisiert sind. Ja, es gibt sie.

3. Sahne

Es gibt viel mehr Programme, die für Pixelkunst entwickelt wurden, als man denkt, aber hier betrachten wir nur die besten. Sie haben alle sehr ähnliche Eigenschaften (Palettensteuerung, sich wiederholende Kachelvorschauen, Transparenz, Ebenen usw.). Ihre Unterschiede liegen im Komfort ... und im Preis.

Charamaker 1999 - gutes Programm, aber die Verteilung scheint ins Stocken geraten zu sein.

Graphics Gale macht viel mehr Spaß und ist benutzerfreundlicher, und es kostet etwa 20 US-Dollar, was nicht schlecht ist. Lassen Sie mich hinzufügen, dass die Testversion nicht zeitlich begrenzt ist und mit genügend Kit ausgestattet ist, um genug davon herzustellen gute Grafik. Es funktioniert einfach nicht mit .gif, was kein großes Problem darstellt, da .png sowieso besser ist.

Die von Pixelkünstlern am häufigsten verwendete Software ist ProMotion, die (offensichtlich) bequemer und schneller als Graphics Gale ist. Oh ja, sie ist lieb! Sie können kaufen Vollversion für einen bescheidenen Betrag ... 50 Euro (78 $).
Vergessen wir nicht unsere Mac-Freunde! Pixen ist ein gutes Programm für den Macintosh, und es ist kostenlos. Mehr kann ich Dir leider nicht sagen, da ich keinen Mac habe. Anmerkung des Übersetzers (aus dem Französischen): Linux-Benutzer (und andere) sollten , und GrafX2 ausprobieren. Ich empfehle Ihnen dringend, sie alle in Demoversionen auszuprobieren und herauszufinden, welche für Sie am besten geeignet ist. Letztendlich ist es Geschmackssache. Bedenken Sie jedoch, dass es sehr schwierig sein kann, zu einem anderen Programm zu wechseln, sobald Sie mit der Verwendung eines Programms begonnen haben.

Fortsetzung folgt…

Anmerkungen des Übersetzers vom Französischen ins Englische

Dies ist ein großartiges Tutorial zum Thema Pixelkunst, geschrieben von Phil Razorbak von LesForges.org. Herzlichen Dank Phil Razorbak dafür, dass er OpenGameArt.org erlaubt hat, diese Anleitungen zu übersetzen und hier zu veröffentlichen. (Vom Übersetzer ins Russische: Ich habe nicht um Erlaubnis gefragt. Wenn jemand möchte, können Sie mir helfen. Ich habe nicht genug Erfahrung in der Kommunikation auf Englisch, geschweige denn auf Französisch.)

Anmerkung des Übersetzers vom Englischen ins Russische

Ich bin Programmierer, kein Künstler oder Übersetzer, ich übersetze für meine Künstlerfreunde, aber was auch immer an Gutem verschwendet wird, soll hier sein.
Das Original auf Französisch ist irgendwo hier: www.lesforges.org
Übersetzung vom Französischen ins Englische hier: opengameart.org/content/les-forges-pixel-art-course
Ich habe aus dem Englischen übersetzt, weil ich kein Französisch kann.
Und ja, dies ist meine erste Veröffentlichung, daher sind Gestaltungsvorschläge willkommen. Außerdem interessiert mich die Frage: Sollen die restlichen Teile als separate Artikel veröffentlicht werden oder ist es besser, diesen zu aktualisieren und zu ergänzen?