Sprite/Grafik Tutorial

    • Sprite/Grafik Tutorial

      Hallo,
      Da das erstellen von Sprites und Grafiken auch zur Game Entwicklung dazuzäht und es auch noch recht viele gibt die Probleme haben gute Sprites selbst zu erstellen, dachte ich mir, ich zeige euch heute mal ein Tutorial wie man ein Sprite komplett selbst aus dem Nichts erstellt. (falls dies das Falsche Unterforum ist, dann bitte verschieben)

      Es gibt natürlich noch viele andere Arten zum erstellen von Sprites, es
      kommt auch immer darauf an in welchem Style man sein Sprite jetzt
      überhaupt haben will, hier zeige ich euch halt nur eine von vielen
      Verschiedenen Arten ein Sprite zu erstellen.

      Ein Gorilla- Artiges Monster
      Spoiler anzeigen
      Naja aber bevor man jetzt einfach drauf loszeichnet sollte man sich erstmel überlegen in welchen Farben man sein Sprite haben will.
      Ich habe mich für Grau entschieden, da man Hauptsächlich nur 2 Farben fürs Grundgerüst benötigt, meistens eine Hellere und eine Dunklere.

      Womöglich das schwerste am Sprite erstellen:
      Das Grundgerüst vom Sprite Zeichnen

      Da die meisten Garnicht wissen wie ihr Sprite jetzt genau aussehen soll(oder vieleicht doch?) könnte man jetzt z.B. einfach Google benutzen und dort nach einem Gorilla suchen und dann einfach versuchen das Grundgerüst nachzumalen. Natürlich kann man es auch aus dem Kopf Zeichnen wenn man ungefähr weiß wie es aussehen soll.




      So das Grundgerüst steht schonmal, nun kommt die Dunklere Grau Farbe in Spiel:


      Dabei soll die Hellere einen Panzer darstellen und die Dunklere die "Normale Haut". Das Rote sind natürlich die Augen.
      (Auch hier gilt: Probieren über Studieren, nur sollte man hiermit nicht zuviel zeit vergeuden da dies ja nur das Grundgerüst ist und es später immernoch verbessert werden kann bzw. wird.)

      Um den Sprite jetzt etwas vorzuheben habe ich einen Schwarzen leichten Glow effekt ums Sprite gezogen(dadurch wirkt der Rand auch Automatisch nichtmehr so Pixelig):



      Nun fügen wir ein Par grundlinien Hinzu und heben ein Par Details wie, Schuppen auf dem Panzer hervor(dafür einfach ein sehr dunkles Grau nehmen):



      Als nächstes kommt das "Shaden" also Schattieren, hierbei muss man drauf achten, dass das Licht nur von einer Seite strahlt(hier: von Rechts Oben) und der Schatten dann natürlich nach Links unten fällt auch hier gilt: viel Probieren und logisches Denken.
      Der Schatten sollte sich auch nicht Zu Stark von der Grundfarbe unterschieden und nur etwas dunkler sein als die Grundfarbe, natürlich nimmt man für das Schattieren vom Panzer und der Normalen Haut unterschiedliche Grau Töne.




      Nun kommt das "Licht" , dazu einfach ein helleres Grau nehmen:



      So nun wollen wir den Panzer noch etwas zum Glänzen bringen, dazu nehmen wir einfach noch ein etwas Helleres Grau:




      Die Endverbesserung, zum Schluss sollte man nochmal drüber gucken ob einem alles gefällt und hier und dort ein par kleine dinge verbessern oder nach bedarf ein par mehr Details hinzufügen):


      So, und fertig ist das Gorilla Artige Monster.


      Holz Kasten
      Spoiler anzeigen
      Das Grundgerüst(bestehend aus einem dunkleren Braun ton):


      Eine helleres braun für die "Balken":


      Die Schattierung(Links Oben und nur im "Inneren" des Kastens)und Verbesserung der Balken:


      Eine Lichtquelle von rechts Oben:


      Einen Leichten Dreck Effekt+ Verzierung:


      Den Kasten einen 3Dimensionalen "Touch" geben:


      Und Fertig ist der Holz Kasten


      Hier mal ein Video Tutorial wie man einen Baum mit Photoshop Zeichnen könnte:
      Spoiler anzeigen
      [video]http://www.youtube.com/watch?v=jqe458AS3RA[/video]

      Das Grafik Programm das ich dafür benutze: Photoshop cs4

      Die hiergezeigten Sprites bitte nicht für irgentwelche Projekte benutzen.


      MFG~
      Imagine taking your usual two century long nap minding your own business when suddenly some cunt wakes you up.
      You tell him to f*ck off of course but just when you finally managed to fall asleep again the same asshole comes knocking again. I'd attack that dick too.

      Dieser Beitrag wurde bereits 7 mal editiert, zuletzt von DragonXZ ()

    • Prinzipiell ist das natürlich ein schönes Sprite und für stille Bilder eine gute Methode. Aber gerade solche Spiel-Sprites werden doch in 90% aller Fälle animiert. Da wird das ganze ein Heidenaufwand, wenn das nur mit den Pinseltools gemalt wurde. Für Sprites, die sicher animiert werden, wie Tiere, Menschen , generell Spielfiguren, verwende ich immer Vektorzeichnungen (die sich im Übrigen hervorragend mit Photoshop erstellen lassen). Der Vorteil ist, dass man sich einfach ein "Skelett" anlegen kann und dann bewegbare Teile wie Arme und Beine nur Verschieben, Rotieren, Stauchen usw. muss und das ohne Pixelchaos und demnach Qualitätsverlust.
      Retroware.de - Webdesign, Print und Apps aus Regensburg.

    • Ich bin mir nicht sicher ob ich dich jetzt richtig verstanden habe, du erstellst also einen Sprite und teilst die Arme,Beine,Kopf usw. in einzel teile auf und zerrst, rotierst oder was auch immer sie einfach nur und fügst sie dann ins Skelett ein? Also sowas ähnliches wie Pivot?
      Ich denke nicht dass dieses System bei Sprites mit etwas mehr Details funktioniert bzw. gut Aussieht. Wäre mir eigentlich auch mehr Arbeit als zuvor. Allerdings könnte dieses System bei ganz einfachen Simplen Sprites/Bewegungen gut funktionieren.

      Bei meinem System braucht man im Grunde nur den "Steh-Sprite" und bearbeitet bzw. Modifiziert ihn dann einfach, so muss man zum Beispiel nur das Linke vordere Bein meines Gorillas etwas nach Hinten schieben und ein par Details ändern und schon hat man sozusagen den ersten Geh Sprite fertig und dauert meistens auch nicht länger als 5-10min. Bei etwas Komplizierteren Bewegungen, hast du recht es wird etwas länger dauern bis es Gut aussieht aber da man schon den Steh-Sprite hat kann man ihn gut als Vorlage nehmen und auch einfach sich den neuen Sprite zurecht kopieren/formen etc. und muss dann auch nur ein par kleinigkeiten ändern damit es Vernünftig aussieht.
      Imagine taking your usual two century long nap minding your own business when suddenly some cunt wakes you up.
      You tell him to f*ck off of course but just when you finally managed to fall asleep again the same asshole comes knocking again. I'd attack that dick too.

    • DragonXZ schrieb:

      Ich denke nicht dass dieses System bei Sprites mit etwas mehr Details funktioniert bzw. gut Aussieht.


      Alles nur eine Frage der Umsetzung...
      Verktorgrafiken (bzw. auch die Programme dafür) haben sich mittlerweile recht gut weiter entwickelt und bieten ebenfalls weichgezeichnete Ränder, Farbverläufe, Struktur(sogesehen Vektorgrafiken in Vektorgrafiken) an.

      Ein kleines wip- beispiel:

      Je nach belieben könnte ich den Kopf nun Skalieren und ebenfalls die Gesichtszüge ändern - Und alles ohne Qualitätsverlust oder "Pixelfehler".

      Um Animationen zu machen, würde ich aber bei allgemein allen Methoden(3D ausgenommen) empfehlen,
      die Animation für eine Bewegung schon vorher zu machen und sie dann auszuarbeiten.
      Um die einzelnen Gliedmaßen besser zu kennzeichnen kann man die Grafik erst kunterbunt halten (für alle Gliedmaße verschiedene Farben)
      und später seinen "Sprite" draufzeichnen.

      zum Beispiel:





      Das wäre/war meine Methode etwas zu animieren ^^
      und ist für Anfänger sicherlich auch leichter.
      Der Hammer fällt manchmal vom Tisch.

    • Ich muss mich da EddyZ anschließen.

      Ein Sprite, den man mit Photoshop erstellt, sieht zwar sicher schön aus, aber das ganze zu animieren, macht dann ziemlich Arbeit, da bei solchen Bildern während der Bewegung jeder Pixel schön in den anderen greifen sollte.

      Einfacher wäre es, zuvor eine schnödes Pixelmännlein herzunehmen (wie EddyZ es gezeigt hat) und das versuchen zu animieren. Besser wäre es, wenn man vorher die Form des Männchens selbst animiert und natürlich erst dann, wenn sich die Form korrekt bei der Bewegung verhält, übrige Ergänzungen macht. Und noch viel simpler wäre es, einfach ein Strichmännchen zu zeichnen, da dies ja nur eine recht "einseitige" Form hat, und dann erst weitere Arbeitsschritte addiert. Irgendwo im Internet gabs da einmal so ein geiles Grafik Tutorial, ich finds aber net mehr :S

      Bewegungen in Form und Bild zu bringen ist schwer, klar. Mir hilfts dabei immer, wenn ich aufstehe und die Bewegung selbst ausführe, um dann zu erkennen: "Aha, so verhält sich also mein Bein, wenn der Torso das und das macht."

      Folgende Grafik finde ich recht hilfreich, da es das korrekte Verhalten einer Geh-Bewegung wiedergibt:



      Ansonsten kann man sich eh nur spielen und hoffen, dass das Endergebnis dann nicht aussieht wie ein Klumpen von Pixeln.

      VioVio

    • Hi,
      ich hab den ersten Post mal erweitert und auch ein Video Tutorial hinzugefügt.
      Bei Bedarf oder Anfrage kann ich auch gerne nochmehr hinzufügen.

      Außerdem geht es hier Hauptsächlich darum wie man die Grafiken erstellt und zeichnet.
      Wie man die Sprites nun letztendlich Animiert bleibt jedem selbst Überlassen gibt da ja auch mehr als genug verschiedene Wege.


      MFG DragonXZ
      Imagine taking your usual two century long nap minding your own business when suddenly some cunt wakes you up.
      You tell him to f*ck off of course but just when you finally managed to fall asleep again the same asshole comes knocking again. I'd attack that dick too.

    • Benutzer online 1

      1 Besucher