Tutorial Animationsguide

Diskussionen & Hilfe rund um Fanarts.

Animationsguide

#110360 von Shadowwolf
14.10.2007, 17:07
Gliederung:

1.Zur Vorbereitung
1. 1. Du benötigst
1. 2. Das Einfügen
2. Das Animieren
2. 1. Erste Schritte
2. 2. Einsatz von Paint
2. 3. Zurück zu The Gimp 2 - Letzte Kleinigkeiten
3. Abspeichern und Anschauen
4. Weiteres
4. 1. Transparenz
4. 2. Problembehebung

1. Zur Vorbereitung

1. 1. Du benötigst
  • Ein Programm zum animieren, zum Beispiel The Gimp 2: The Gimp 2 um Downloaden
  • Ein gutes Zeichenprogramm. Paint ist dafür bestens geeignet.

1. 2. Das Einfügen
Das erste was du machen solltest, wäre natürlich The Gimp 2 zu öffnen und das Bild/die Bilder, die du animieren möchtest bereits auf dem Computer gespeichert zu haben. Als Anfänger sollte man vorerst einfache Animationen ausprobieren und sich dann immer weiter steigern.
Da das hier eine Seite zu Pokémon ist, verwende ich den Pokéball als Beispiel:

http://img516.imageshack.us/img516/1301/animate1po8.png

Um das Bild einzufügen, drückst du oben in der Leiste auf Datei, anschließend auf Öffnen. Nun suchst du das Bild, was du animieren wolltest. So sollte es dann aussehen:

http://img503.imageshack.us/img503/291/animate2ym8.png

2. Das Animieren

2. 1. Erste Schritte
Zuerst öffnest du das Fenster Ebene, Kanäle und Pfade. Dazu klickst du auf Datei --> Dialoge --> Dock hinzufügen --> Ebene Kanäle und Pfade.

http://img520.imageshack.us/img520/904/animate3bj1.png

Im eben erschienenen Fenster klickst du mit rechts auf die Ebene und duplizierst sie ca. 6x

http://img503.imageshack.us/img503/2039/animate4gh8.png

Nun wechseln wir erstmal zu Paint, um die nächsten Schritte vorzubereiten.

2. 2. Einsatz von Paint
Öffne mit Paint das eben benutzte Bild und vergrößere es 8fach. (Zieh das Bild nicht groß, sondern vergrößere es per Ansicht, somit vermeidest du, das sich das Bild verzerrt.)
Anschließen färbst du den weißen Teil mitten im Bild rot ein.
http://img520.imageshack.us/img520/2306/animate5wb8.png

Kopiere das veränderte Bild und kehr zu The Gimp 2 zurück.
http://img503.imageshack.us/img503/1032/animate7vb1.png

2. 3. Zurück zu The Gimp 2 - Letzte Kleinigkeiten
Erstelle, bevor du das Bild einfügst, eine Transparente Ebene.
http://img100.imageshack.us/img100/2977/animate6xq8.png

Nun kannst du das kopierte Bild einfügen!
http://img503.imageshack.us/img503/9528/animate8mn3.png
http://img520.imageshack.us/img520/6392/animate9li2.png

Nun wählst du das Rechteck aus und klickst damit auf den grauen Hintergrund, nicht auf das Bild!
http://img140.imageshack.us/img140/1043/animate10ki9.png

Nun wechselst du wieder in das Fenster Ebene, Kanäle und Pfade und duplizierst diese neue Ebene 6x.
Ist dies erledigt, klickst du oben in der Leiste des Fensters, wo das Bild drauf ist auf Filter --> Animation --> Animation abspielen. Du siehst, wie die Animation später aussieht.
http://img140.imageshack.us/img140/4566/animate11ss0.png

3. Abspeichern und Anschauen
Nun musst du noch die Animation abspeichern. geh dazu auf Datei --> Speichern unter. Wähle als Endung unbedingt .gif, sonst wird aus der Animation nichts!
http://img140.imageshack.us/img140/1876/animate12hl0.png

Wähle die Auswahl als Animation Speichern aus.
http://img140.imageshack.us/img140/7379/animate13ey5.png

Zum Schluss nur noch OK wählen.
http://img529.imageshack.us/img529/49/animate14jz9.png

Jetzt suchst du dir nur noch deine erstellte Animation und schon kannst du sie bewundern.
http://img140.imageshack.us/img140/2411/pokeballws3bs1.gif

4. Weiteres
4. 1. Transparenz
Damit du nicht ständig den weißen rand um deine Animationen hast, kannst du die Animation noch transparent machen. Dazu ist aber zu emphelen, jede einzelne Ebene transparent zumachen, sonst erscheint der weiße Rand während der Animation erneut.
Unter diesem Link könnt ihr eine Auswahl von Verfahren mit einigen Bildbearbeitungsprogrammen kennen lernen. Ich beharre aber auf die Transparent mit The Gimp:

Vergrößere den Sprite erstmal zu 800%.
http://img207.imageshack.us/img207/6946/tranparenmitgimp1gw7.png

Anschließend fägst du den Alpha-Kanal hinzu, dass ist sowas wie die anschließende Leere für die Transparenz.
http://img518.imageshack.us/img518/7971/tranparenmitgimp2im7.png

Achte bevor du anfängst, die Tranparenz zu erzeugen, dass du den Radierer auswählst und eine entsprechende Größe dafür auswählt, sonst könnte es zu Problemen kommen. Ich persönlich nehme die Größe 3x3. Das geht ganz gut. Für die Feinarbeit nehm ich dann den 1x1 Radiergummi. Achja: Wenn du Harte Kanten auswählst, kann es nicht mehr passieren, das ab und zu der Radierer die Nachbarfelder des zu wegradierenden Feldes um eines Stufe abdenkt. (Ist mir vorher sehr oft passiert!)
http://img518.imageshack.us/img518/9417/tranparenmitgimp3lt3.png

Nun fängst du an die weiße Fläche um deinen Sprite wegzuradieren. Die nun erscheinende graukarierte Fläche ist nach dem Speichern die Transparenz.

Wenn du die Animation nun wie oben beschrieben abspeicherst, kann es noch zu dem Problem kommen, dass die einzelnen Bilder einfach nur Übereinandergelegt werden und man stets das Bild sieht, was man davor gesetzt hat.
Zum Beispiel so:
http://img516.imageshack.us/img516/5601/fehlerjr4.gif

4. 2. Problembehebung
Das Problem mit der Ebenenüberschneidung kann man aber ganz leicht beheben. Wenn du abspeicherst, achte darauf, dass du die Animation mit einem Frame pro Ebene speicherst. Dann ist das problem schnell behoben.
http://img398.imageshack.us/img398/5108/animate15tm5.png

Lizenz für den Guide hab ich von White_Swampert erhalten!

© liegt bei Shadowwolf, den Besitzer des Guides.
Dieser Guide darf nicht kopiert werden, es sei denn es wurde vorher
mit dem Eigentümer des Guides darüber gesprochen.
Zuletzt geändert von Shadowwolf am 14.10.2007, 17:13, insgesamt 1-mal geändert.
-0
+0

Werbung

Registriere dich kostenlos und beteilige dich aktiv in diesem Forum, um diese Werbung auszublenden.

Re: Animationsguide

#110373 von Sebi
14.10.2007, 17:10
Sehr schöner Guide, da hst du dir sicher viel Mühe gegeben.
Ein kleiner meinerseits wäre, das du vielleicht noch etwas Farbe für die Überschriften benutzen könntest. Außerdem noch das ä und ü und so wegmachen.

Aber trotzdem GJ! ;)
-0
+0

Re: Animationsguide

#110380 von Shadowwolf
14.10.2007, 17:15
Das mit den Umlauten hab ich schon bemerkt und ist auch schon behoben ^^
Nja die Überschriften ncoh zu färben wär eine Möglichkeit gewesen, find das abe rnicht wirklich schön!
-0
+0

Re: Animationsguide

#110390 von FreezeHax
14.10.2007, 17:20
Shadowwolf hat geschrieben:Das mit den Umlauten hab ich schon bemerkt und ist auch schon behoben ^^
Nja die Überschriften ncoh zu färben wär eine Möglichkeit gewesen, find das abe rnicht wirklich schön!


Wäre aber bei so nem Guide imo recht wichtig... ;)

Nja, sieht ordentlich aus, kompliement das du noch ein sinnvolles Thema für nen Fanartguide gefunden hast...XD
-0
+0

Re: Animationsguide

#110787 von arkani88
14.10.2007, 21:02
guter, sinnvoller guide :up:

edit: rechtschreibfehler beseitigt
-0
+0

Re: Animationsguide

#111890 von Deadly
15.10.2007, 23:49
schöner guide, aba wtf..wieso kriegt er 9karma für den guide und ich für meinen transparenz guide nur 2? <<
-0
+0

Re: Animationsguide

#112011 von Shadowwolf
16.10.2007, 11:31
@Deadly: Kann ich dir leider auch nicht sagen. oô
@all others: thx for Feedback =D
-0
+0

Re: Animationsguide

#113792 von Mr. Ping
17.10.2007, 21:03
Der Guide gefällt mir gut, ich hab mit Gimp auch schon kleine Anis gemacht, aber eher mit Strichmenschen, die eher schlecht als recht aussahen.
Aber gute Idee, damit kann man dann auch mit ein bisschen Übung Pokémon animieren.
Ich glaub das probier ich morgen oder übermorgen mal, ich stell das dann hier rein.
-0
+0

Re: Animationsguide

#122674 von spyeye
26.10.2007, 16:59
Keine Dopperlposts, und die Animationen kommen hier nicht rein .-.

Btw: find den Guide klasse! (konnte es aber schon vorher)

@unten: k, sieht aber trotzdem noch blöd aus, zwaimal hintereinander zu posten, ich meinte ja auch eigentlich, dass das wo anders reinsollte ^_^
Zuletzt geändert von spyeye am 26.10.2007, 18:08, insgesamt 1-mal geändert.
-0
+0

Re: Animationsguide

#122684 von Dragonir
26.10.2007, 17:02
Pikachu95 hat geschrieben:Keine Dopperlposts, und die Animationen kommen hier nicht rein .-.

Btw: find den Guide klasse! (konnte es aber schon vorher)


das ist kein Doppelpost Pikachu95 -.-
Es gibt keinen anderen Post in 24 Stunden und wenn er dann noch eins schreibt ist es kein Doppelpost
So wurde es mir erklärt ;)
-0
+0

Re: Animationsguide

#123568 von Pikadex
27.10.2007, 15:25
Sehr guter Guide muss ich schon sagen ;)
-0
+0

Re: Animationsguide

#124162 von Rumo
28.10.2007, 11:05
1:Ist das so in Ordnung, oder solls lieber noch etwas langsamer sein?
http://img180.imageshack.us/img180/7537/groudon1re9.gif

2: So den hab ich jetzt endlich auch schon geschafft:
http://img139.imageshack.us/img139/1935/groudon2zf2.gif
geänderte Version
Passt der auch so?
Zuletzt geändert von Rumo am 28.10.2007, 12:25, insgesamt 3-mal geändert.
-0
+0

Re: Animationsguide

#124196 von playboy
28.10.2007, 11:39
kann man das auch in Paint machen das sich das immer noch bewegt Den ich möchte eine maping machen und ich brauche die animationen!
-0
+0

Re: Animationsguide

#124201 von Gamefreak98
28.10.2007, 11:41
playboy hat geschrieben:kann man das auch in Paint machen das sich das immer noch bewegt Den ich möchte eine maping machen und ich brauche die animationen!

imo nicht. :(
-0
+0

Werbung

Registriere dich kostenlos und beteilige dich aktiv in diesem Forum, um diese Werbung auszublenden.

Re: Animationsguide

#124206 von playboy
28.10.2007, 11:42
shit ich brauche das geht das in einem anderen bilder programm wo man Maping <machen kann das man in den bild die animation sieht
-0
+0

Re: Animationsguide

#124209 von playboy
28.10.2007, 11:43
Rumo hat geschrieben:1:Ist das so in Ordnung, oder solls lieber noch etwas langsamer sein?
http://img180.imageshack.us/img180/7537/groudon1re9.gif

2: So den hab ich jetzt endlich auch schon geschafft:
http://img100.imageshack.us/img100/7263/groudon2wa0.gif
Passt der auch so?

ein bisschen langsamer wens geht
-0
+0

Re: Animationsguide

#124213 von spyeye
28.10.2007, 11:44
Mapping machst in Paint und die Animation dann eben z.B. in AniMake!

EDIT: UND BITTE KEINE DOPPELPOSTS!!!
-0
+0

Re: Animationsguide

#124236 von Rumo
28.10.2007, 12:00
playboy hat geschrieben:ein bisschen langsamer wens geht

Geht natürlich! Mach ich sobald ich mit dem "Auftrag" von AliSun fertig bin...
-0
+0

Re: Animationsguide

#124246 von playboy
28.10.2007, 12:07
Rumo hat geschrieben:
playboy hat geschrieben:ein bisschen langsamer wens geht

Geht natürlich! Mach ich sobald ich mit dem "Auftrag" von AliSun fertig bin...

Ok THX

@Pikachu95

Kann ich eine Animation Machen Ein normal bild einfügen in das Programm und eine Animation Drauf Machen

(Also Auf Einem Normalen Bild Noch 1ne Animation)
-0
+0

Re: Animationsguide

#124254 von Rumo
28.10.2007, 12:10
@AliSun:
Recht so?
http://img147.imageshack.us/img147/8839/plifaentwicklungcj1.gif
Oder soll ich die Geschwindigkeit noch ändern?

@playboy:
Jetzt mach ich deins...
http://img139.imageshack.us/img139/1935/groudon2zf2.gif
so in Ordnug? (Geschwindigkeit ändern ist keine große Arbeit, also sag's ruhig, wenn's nicht passt)
Zuletzt geändert von Rumo am 28.10.2007, 12:24, insgesamt 1-mal geändert.
-0
+0

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste