Erstellen Sie 8-Bit-Pixel-Kunst mit Photoshop (Tutorial mit Bildern) lernen Programm
Artikelnavigation
← Vorherige Nächste →
von Alexandria O'Brien
Verwendung dieser retro, 8-Bit-Pixel-Look In diesem Tutorial werde ich gehen durch, wie ein paar verschiedenes Spiel-Sprites in Photoshop CC / CS6 zu erstellen. Die Ingame-Gegenstände und Charaktere, die ich veranschaulichen auf meinem Lieblingsspielgenre basiert: Fantasy, Abenteuer.
Hinweis: Wenn Sie eine größere Version von einem der Bilder zu sehen, einfach mit der rechten Maustaste und das Bild in einem anderen Tab anzuzeigen.
Einrichten Photoshop To Make-Pixel-Kunst
- Breite: 50 Pixel
- Höhe: 50 Pixel
- Auflösung: 72 Pixel / Inch
- Farbmodus: RGB (8 Bit)
- Hintergrund Inhalt: Transparent
Abbildung 1: Neue 50 × 50 Pixel-Datei in Photoshop
Abbildung 2: Neue 50 × 50 leere Leinwand in Photoshop
2. Holen Sie Ihre Werkzeuge bereit: Wählen Sie das Stift-Werkzeug (unter dem Pinsel-Werkzeug Dropdown-Menü) und legen Sie die Größe des Pinsels zu 1 Pixel. Wählen Sie das Radiergummi-Werkzeug und Veränderung, die 1 Pixel groß zu sein, und der Modus als „Bleistift“.
Abbildung 3: Das Stift-Werkzeug ist unter dem Pinsel-Werkzeug Dropdown-Menü
Abbildung 4: Ändern der Stift-Werkzeug Größe eines Pixels
Abbildung 5: Das Löschwerkzeug 1 Pixel in „pencil“ -Modus eingestellt.
3. Show zu helfen, wo die Pixel auf der Leinwand sind, werden wir auf der Grid-Ansicht drehen. Stellen Sie die Rasteransicht Einstellung unter Bearbeiten> Einstellungen> Guides, Gitter - Scheiben. Ändern des Gitters jedes 1 Pixel zeigen (mit 1 Unterteilung). Klicken Sie auf OK und dann das Raster einschalten, damit Sie es sehen können. Wählen Sie View> Show> Raster.
Abbildung 6: Anpassen des grid Vorl
Abbildung 7: Ändern des Gitters jedes 1 Pixel zu zeigen,
Abbildung 8: Drehen auf dem Gitter
4. Ein weiterer Wechsel zurück unter Einstellungen> Allgemein und ändern „Bild Interpolation“ zu Nearest Neighbor (bewahren harte Kanten).
Abbildung 9: Bild ändern Interpolation zu Nearest Neighbor
Jetzt sind Sie alle gesetzt machen Pixel-Kunst zu starten!
Jedes gutes Fantasy-Abenteuer-Spiel hat einen Helden. Wir werden, indem ein einzelnes Zeichen Sprite zu starten.
1. Wir werden mit der 50 mal 50 Pixel-Datei starten wir einrichten. Da wir die Datei mit transparentem Hintergrund gemacht, werde ich eine Solid Color Hintergrundebene hinzufügen, damit wir das Gitter, ohne zu sehen Photoshop Transparenz Muster sehen.
Am unteren Rand der Ebenen-Fenster, klicken Sie auf das Symbol, das wie ein halb gefüllten Kreis aussieht. Wählen Sie die „Solid Color ...“ Option, und wählen Sie eine neutrale Farbe für die neue Farbe füllen Schicht.
Abbildung 10: Die Verknüpfung eine neue feste Farbschicht hinzuzufügen, ist an der Unterseite des Ebenenmenu
2. Fügen Sie eine neue, transparente Schicht overtop dieser Farbe füllen Schicht. Zum Ebene> Neu> Ebene oder verwenden Sie einfach auf das Symbol Verknüpfung am unteren Rand des Menüs Schichten geformt wie eine gefaltete Seite.
3. Lassen Sie sich den Körper unseres Charakters machen. Beginnen Sie mit einer Basishautfarbe auswählen. Ich werde # f2cb9f verwenden.
Abbildung 11: Auswahl einer Basishautfarbe
4. Verwenden Sie das Stift-Werkzeug, um den Körper zu ziehen. Ich werde meinen Körper so einfach wie möglich und dann zwicken am Ende machen wirklich den Charakter zu formen, wie ich ihn zu suchen. Wir werden mehr Details hinzufügen, sobald wir die Grundform nach unten haben.
Spitze. Fügen Sie eine weitere Schicht für jeden neuen Aspekt, falls Sie zurück zu gehen und etwas bearbeiten.
Spitze. Wenn Sie eine gerade Linie machen wollen, klicken Sie einmal, wo Sie die Linie beginnen soll und dann, während die Umschalttaste gedrückt halten, klicken Sie ein zweites Mal, wo Sie die Linie enden soll. Photoshop wird automatisch eine gerade Linie zwischen diesen beiden Punkten erstellen.
Sprechen Sie die Körperform, wie Sie wollen. Hier ist, wie ich meine Körperform gemacht:
1) Klicken Sie einmal auf der Leinwand mit einem 15px Bleistift für den Kopf Kreis. ●
2) Stellen Sie die Brust ein Dreieck (nach unten gerichtet) und verbinden Sie es mit dem Hals (Verwendung 3 Pixel dicker Bleistift). ▼
3) Stellen Sie den Oberkörper mit einem anderen Dreieck (spitz nach oben) an dem bodenseitigen Ende des Brustkastens Dreiecks. ▲
4) Die Beine kommen gerade nach unten vom Rumpfdreiecksbasis.
5) Machen Sie einen „Punkt“, wo das Ende des Arms wird. Ich habe einen Arm und einen Arm nach unten an seiner Seite. Halten Sie die Umschalttaste und klicken Sie auf die Schulter das Ende des Armes an den Körper zu verbinden.
6) Fügen Sie ein wenig mehr Volumen bis zum Ende der Arme für die Hände und mehr an den Enden der Beine für die Füße.
7) an dieser Stelle hinzuzufügen oder zu löschen, wie gewünscht die Körperform zu zwicken. Ich habe ein bisschen mehr Masse auf die Beine, ein paar Pixel hinzugefügt, um den Hals und Körper dicker zu machen und rundeten die Schultern ein wenig.
Abbildung 12: Der Körper auf der Leinwand sein zeichnen, wobei der Kopf Ausgangs
5. Jetzt werden wir die Kleidung, Haare und Gesicht hinzufügen. Verwenden Sie die Körpergrundform als Vorlage dafür, wie die Kleidung sein sollte, und werden Sie kreativ! Ich werde sechs neue Schichten für ein Hemd, Hosen, Schuhe, Haare, Gesicht und Details hinzuzufügen.
Abbildung 13: Die Charakterdetails werden auf den Körper gegeben, mit dem T-Shirt Start
Abbildung 14: Ich habe 1 Farbe Füllschicht, 1 Körperschicht und 6 Detailebene
6. Wenn Sie nicht bereits haben, stellen Sie sicher, dass Ihre Photoshop-Datei zu speichern, wie Sie Fortschritte.
7. An diesem Punkt könnte unser Pixel Kumpel fertig genannt werden, aber ich möchte ein bisschen mehr Tiefe mit Schatten und Lichter hinzuzufügen.
Extra Schritt fügen Schattierung:
Beginnen Sie mit dem zusammen eine fusionierte Kopie aller Schichten zu machen. Tun Sie dies, indem Sie die Sichtbarkeit der Farbe ausschalten Schicht Fill (klicken Sie auf das Augensymbol links von der Ebenenminiatur) und drücken Sie dann Befehl-Wahl-Umschalt-E (Mac) bzw. Strg-Alt-Shift-E (PC). Dadurch wird automatisch eine Kopie aller sichtbaren Ebenen in eine Schicht an der Spitze Ihrer Schichten Liste gesetzt werden.
Von hier aus schlage vor, ich Ihre einzelne Schichten in einem Ordner und die Sichtbarkeit alles organisiert zu halten ausgeschaltet. Um schnell die Schichten Gruppe, Select-Klicken Sie alle von ihnen dann Steuerung / Option -G drücken.
Abbildung 15: Drücken Sie Befehl-Wahl-Umschalt-E (Mac) bzw. Strg-Alt-Shift-E (PC) eine fusionierte Kopie zu machen
Abbildung 16: Die nicht verwendeten Schichten werden in einem Ordner gruppiert. Ich drehte mich um auch die Farbe Fill Schicht wieder auf
Abbildung 17: Die Soft Light-Mischmodus Drop-Down-Menü
8. eine neue Ebene hinzufügen und ändern Sie die Füllmethode. (Der Mischmodus kann durch die Drop-Down-Option am oberen Rand des Menüs der Ebene zugegriffen werden kann, auf der linken Seite der Undurchsichtigkeit Option. Standardmäßig heißt es „Normal“.)
Ich werde den Blending-Modus wählen: Weiches Licht, weil das gut zu funktionieren scheint, die Farben, die ich auf meinen Charakter verwendet abzudunkeln. Mit dieser neuen Ebene ausgewählt (Ich werde die Ebene „Shading“ nennen), Alt-Klicken Sie auf die darunter liegende Schicht (die Schicht mit den fusionierten Zeichen), um eine Maske zu machen. Auf diese Weise, was auch immer Sie auf der „Shading“ Schicht zeichnen wird in der Maske der „Character“ Schicht bleiben.
9. Farbe auf der „Shading“ Schicht mit einem schwarzen Stift. Mit dem Mischmodus geändert wird, wird die Farbe Schwarz die Farbe darunter verdunkeln. So wird die rot in seinem Hemd Dunkelrot, das Grün der sein Haar wird dunkelgrün, und so weiter.
Spitze. Wenn die Schattierung für Sie zu hart ist, ändern Sie einfach den Blending Mood oder Undurchsichtigkeit der Schicht. Wenn Sie möchten, um mehr Variationen nuancierten Farben hinzufügen, halten das Hinzufügen neuer „Shading“ Schichten mit unterschiedlichen Trübungen.
Ich landete das Hinzufügen von zwei Abschirmschichten-die erste mit 25% Opazität und die zweite mit 45% Opazität.
Abbildung 18: mehr Tiefe auf den Charakter mit zusätzlichen Schattierungsschichten Hinzufügen
10. Wenn Sie einige Highlights hinzufügen, fügen Sie eine neue „Hervorhebungen“ Schicht genau wie die „Shading“ Schicht, außer die Füllmethode Overlay machen und einen weißen Bleistift.
11. Wenn Sie mit Ihrer 8-Bit Zeichen Schöpfung zufrieden sind, ist es Zeit, die abschließende PNG Sprite-Datei zu speichern. Aber zuerst sollen wir die Leinwand trimmen, so dass es gegen das Bild, eng ist und es gibt keinen überschüssigen Raum. Dies wird letztlich auf Dateigröße speichern, so dass es für jedes Spiel optimal ist. Drehen Sie die Solid Color Layer-Sichtbarkeit aus und dann das Bild gehen> Trimmen und ändern Sie die „Based On“ -Einstellung auf transparentes Pixel. OK klicken.
Abbildung 19: Schneiden Sie die Leinwand um das Bild
12. Gehen Sie Datei> Speichern unter ...> Speichern unter Typ: PNG
Wenn Sie das Bild wollen einfach Bild> Bildgröße gehen, größer sein> und ändern Sie das „Resampling“ zu Nearest Neighbor (harten Kanten).
Abbildung 20: die Resampling-Option ändern, wenn Sie diesen Pixel halten die Größe an
Beginnen Sie mit ein paar Einstellungen in Photoshop zu ändern, so dass Sie leicht Pixel-Kunst zu schaffen. Tun Sie dies, indem Sie Voreinstellungen „Bild Interpolation“ zu Nearest Neighbor und die Führungen, Gitter - Scheiben jedes 1 Pixel zu zeigen. Statt die Standard Pinsel und Radiergummi-Tools verwenden, verwenden Sie den Bleistift und Radiergummi Set zum Bleistift-Modus.
Wählen Sie Ihre Grundfarbe mit dem Farbauswahl-Menü und dann eine Grundform zeichnen. Wie Sie weitere Details hinzufügen, weitere Schichten hinzufügen, sie organisiert und im Fall getrennt halten wollen Sie zurück gehen und etwas bearbeiten. Als zusätzlicher Schritt erstellen Sie eine fusionierte Kopie aller Schichten mit Befehl-Wahl-Umschalt-E (Mac) bzw. Strg-Alt-Shift-E (PC). Schattieren und Highlights auf zusätzliche Schichten mit alternativen Füllmethoden und / oder Trübungen. Schließlich, stellen Sie sicher, dass Sie die Sprite-Leinwand bis auf die kleinste Größe trimmen und als PNG speichern.
einen Feind: Im nächsten Teil dieses Tutorials, werde ich einige andere grafische Elemente eines guten Fantasy-Abenteuer-Spiel gehen zu schaffen. eine Waffe, und ein Gesundheits-Artikel.