Articles

Ein grundlegendes Sprite-Tutorial

Hier finden Sie eine grundlegende Anleitung, wie Sie Ihre Zeichnung mit einigen Photoshop- oder GIMP-Tricks in Pixelkunst verwandeln können.

Schritt 1: Die Zeichnung

Beachten Sie, dass es keine Maskendetails gibt und die Hände schön und einfach sind

Ein Tablet ist schön, um direkt in ein Kunstprogramm wie Photoshop zu zeichnen. Andernfalls scannen Sie eine Zeichnung mit schweren Stiften oder eingefärbten Linien. Wenn Sie einen bestimmten Spielstil imitieren möchten, verwenden Sie ein vergrößertes Sprite als Referenz für Körperproportionen und -breite (was ich leider nicht mit dieser Skizze gemacht habe). Halten Sie die Details auf ein Minimum, damit Sie die Dinge beim Verkleinern nicht überladen.

Zeit: variiert

Schritt 2: Größenänderung

Ändern Sie die Größe nicht mit eingeschränkten Proportionen – dehnen und quetschen Sie, um sie an die Proportionen Ihres Ziels anzupassen

Suchen Sie ein Sprite, das der Größe (oder Pose) ähnelt, die Sie kopieren möchten. Verkleinern Sie die Zeichnung und machen Sie sie gleichzeitig so breit, wie sie übereinstimmen muss, wenn Sie sie in Schritt 1 nicht ausgearbeitet haben. Beachten Sie, dass ich in dieser Skizze ungefähr die gleiche Höhe haben möchte, aber ein bisschen breiter.

Zeit: 30 Sekunden

Schritt 3: Schärfen

Verwenden Sie Photoshop oder GIMP’s Schwellenwertwerkzeug, um sich eine Tonne Reinigungszeit zu sparen

Verschmelzen Sie die Ebene mit dem in der Größe geänderten Linienwerk auf einer Ebene mit einem festen weißen Hintergrund. Gehen Sie zu BILD > ANPASSUNGEN > SCHWELLE in Photoshop oder das Äquivalent in GIMP, um das Linienwerk auf reine Schwarzweißpixel zu reduzieren. Stellen Sie sicher, dass Sie aus der Nähe gezoomt sind, um die Pixel am besten zu sehen. Halten Sie alle Ihre Originaldetails so verständlich wie möglich, damit Sie nicht zu oft auf Ihre Originalzeichnung verweisen müssen.
Dieser Schritt erleichtert das Reinigen der Linien und das Ausfüllen der Farbe und spart Ihnen eine Menge Zeit beim Reinigen von Hand.

ZEIT: 10 Sekunden

Schritt 4: Reinigung

Schärfen Sie die Konturen, bis sie 1 Pixel breit sind. Haben Sie keine Angst, einige Umrisse zu brechen, und machen Sie sich noch keine Sorgen um feinere Details

Erstellen Sie eine Ebene nur für die Linien (löschen Sie alles weiß). Vergrößern und bereinigen Sie die Umrisse. Wenn Sie Linien brechen möchten, ist dies der richtige Ort dafür. Es ist noch nicht an der Zeit, an den feinen Details zu arbeiten (wieder Maske und Hände) – geben Sie sich einfach Anker für die Färbung. Wenn Sie fertig sind, sperren Sie die Ebene.

ZEIT: 10-20 Minuten

Schritt 5: Füllwerkzeug Die Ebenen

Flache Farben werden ausgefüllt – in diesem Fall füllen die Schattenfarben

flache Farben auf einer Ebene unter den Linien aus. Erarbeiten Sie Details des Outfits usw., aber schattieren Sie nicht. Licht wird nach hinzugefügt. Dieser Schritt gibt wirklich Spriting die ‚Comic-Produktion‘ fühlen. Besonderer Hinweis: Einige Leute bevorzugen es, die Farben des Lichtbereichs für ihre Wohnungen zu verwenden und danach die Schatten hinzuzufügen. Dies wird einen anderen Endeffekt erzeugen, also experimentieren Sie.

ZEIT: 2 oder 3 Minuten

Schritt 6: Die Schattierung

Sparen Sie Zeit und erhalten Sie gute Farben, indem Sie Weiß auf Ebenen verwenden, die überlagert sind, um Schattenebenen aufzuhellen

Im Moment haben Sie eine Ebene für Linien und eine Ebene für Ebenen. Hier ist, wo Photoshop spart Ihnen einige große Zeit. Fügen Sie zwei Ebenen zwischen die Linien und Ebenen ein. Ändern Sie sie in Overlay-Stil und machen Sie die obere 50% Deckkraft. Wählen Sie einen 1- oder 2-Pixel-Stift und legen Sie einige Weiße ab. Sofortige Beleuchtung durch Ihre Farben.
Hinweis: Arbeiten Sie zuerst mit der Ebene 100% Deckkraft. Wenn Sie die Schattierung so festgelegt haben, wie es Ihnen gefällt, verwenden Sie das Magic Want-Werkzeug, um die nicht weißen Bereiche auszuwählen. Fahren Sie dann mit der 50% -Ebene für die mittlere Schattierung fort (nachdem Sie die marschierenden Ameisen des Zauberstabs versteckt haben). Sie möchten nicht, dass die beiden Ebenen ihre Weißtöne überlappen, da Sie sonst zusätzliche Glanzlichter erhalten.

ZEIT: 30-90 Minuten

Schritt 7: Schattierungsprüfung

Überprüfen Sie die Details Ihrer Schattierung, indem Sie in Graustufen rendern und Farbablenkungen beseitigen

Manchmal brauchen Sie frische Augen, um zu überprüfen, ob Sie die richtige Schattierung erhalten haben.
So sollten Ihre Ebenen aussehen – die mit Schwarz gefüllten Ebenen fügen wir gerade hinzu. Kopieren Sie die gesamte Ebene, sperren Sie sie und füllen Sie sie mit Schwarz (Bearbeiten Sie > Fill). Ändern Sie dann Ihre beiden weißen Ebenen von Overlay in Normal. Sie sollten Folgendes bekommen:

Ich kann mir wirklich keinen besseren Weg vorstellen, die Schattierung zu testen, als die störende Kostümfarbe zu entfernen und sie auf maximalen Kontrast hochzufahren. Es ist der einfachste Weg, kleine Dinge zu finden, die nicht richtig aussehen, oder sogar große Dinge, auf die Sie zu fokussiert waren, um sie zu bemerken. Was ist besser, Korrektur ist nur eine Frage der Fixierung der Weißen – nicht jede Farbe zu ändern. Versuchen Sie es auch mit einem schwarzen Hintergrund.
Hmm. Ich denke, ich werde noch einen Blick auf ihre linke Hand werfen, bevor ich komplett fertig bin.

ZEIT: 90 Sekunden zu überprüfen; variiert für korrekturen

Schritt 8: Farblinien

Passen Sie die Umrissdunkelheit an den Rest der Schattierung an

Nachdem sie nun ihren b&w-Job für Schritt 7 überlappt haben, ist es an der Zeit, dass die Umrisse in den hellen Bereichen eingefärbt und antialiased werden. Mit ihren Ebenen auf ‚lock‘ sollte es ein Kinderspiel sein. DENKEN SIE IMMER DARAN: Arbeiten Sie auf dunkel gefärbten (aber nicht rein schwarzen) Hintergründen, wenn Sie Umrissarbeiten ausführen. Es hilft das Antialiasing.

ZEIT: 30-60 Minuten

Schritt 9: Details & Bereinigungen

Beenden Sie die feineren Details

Dies ist die Stufe der „Subtilität“. * Holen Sie sich die Farben genau richtig (Overlay macht eigentlich einige ziemlich gute Arbeit mit Färbung) * Fügen Sie schwer zu Pixel Details (Dreieck auf Maske, blaue Linien um Handschuhkanten, etc.) * Beenden Sie die subtilen Details, die Sie für jetzt gespeichert (Hände) * Letzte gehen um für Fehler. Beachten Sie, dass ich ihre gelben Stiefel ‚vergessen‘ habe – aber bei diesem Vorgang geht es nur darum, das Gelb der flachen Schicht hinzuzufügen. Es ist vorbeschattet!