Du wolltest schon immer mal einen animierten Smiley machen, doch wusstest nicht wie? Hier bist Du genau richtig, hier wird Dir alles erklärt, auch mit Bildern.

 

Zurück zum Tutorialmenü

 

Photoshop CS2 (Lachen) nach oben

Vorweg, man kann auch eine andere Version von Photoshop benutzen, ab PS CS aufwärts sollte es keine Probleme geben.

Die Kunst der Animation, Ich werde hier an Hand eines Beispiels zeigen wie man sich leicht einen Smileyfake macht und der sich dann am Ende auch noch Bewegt. Das ganze werde ich mit dem Programm PhotoShop machen.

 

 

  1. Damit wir einen Smiley machen können der sich bewegt, müssen wir mehrere Bilder haben die unterschiedlich aussehen. Dazu habe ich für dieses Tutorial, 2 Smiley-Bilder vorbereitet. Natürlich kann man später auch mehr Bilder verwenden, aber wir Arbeiten hier erst einmal mit Zweien. (Beispielbilder Download 1,27kb.zip).

 

 

 

  1. Als erstes öffnen wir Smiley1. Damit wir alle Farben verwenden können und das andere Bild auch noch eingefügt werden kann, müssen wir die Farben des Bildes erhöhen. Dazu gehen wir auf Bild > Modus > RGB-Farben.

 

 

  1. Als nächstes machen wir eine neue Ebene wo der Smiley2 rein kommt. Dazu drücken wir zuerst einmal UMSCHALT+STRG+N (oder gehen einfach auf Ebene > Neu > Ebene… und bestätigen mit OK). Auf diese Ebene soll nun das Smiley2 Bild, dazu gehen wir auf Datei > Platzieren… und Öffnen das Smiley2 Bild. Den Platziert ihr nun genau über den anderen Smiley, so dass der Hintere Smiley1 nicht mehr zu sehen ist.

 

 

  1. Nun habt ihr 2 Ebenen mit jeweils einem anderen Smiley. Wenn ihr rechts mal auf das Auge bei der 2. Ebene drückt, sieht man die 1. Ebene und kann sehen das sich schon was bewegt wenn man mehrmals drückt. Dieses Ein und Ausblenden wird gleich auch benötigt um das Bild beweglich zu machen.

 

 

  1. Nun wollen wir die Animation-Leiste einblenden, dazu gehen wir auf Fenster > Animation. Unten ist nun die Leiste mit einem Bild zu sehen, wenn ihr wieder auf die Augen drückt, könnt ihr sehen dass sich das Bild in der Animation-Leiste auch ändert.

 

 

  1. Um nun ein Bewegtes Bild zu erhalten müssen wir also mehrere Bilder in der Animation-Leiste haben und das immer verschiedene. Da wir nur 2 Bilder haben, können wir auch nur 2 Bilder verwenden. Da unser Smiley den Mund immer auf und zu macht, soll dies darstellen das er lacht. Bei dem ersten Bild soll der Smiley den Mund zu haben, deswegen blenden wir Smiley2 aus. Dazu drücken wir wieder einfach auf das Auge von der Ebene Smiley2. Um nun ein zweites Bild hinzuzufügen drücken wir auf dieses Symbol in der Animation-Leiste und Duplizieren das Bild. Nun haben wir dort 2 Bilder die aber noch gleich aussehen.

 

 

 

  1. Um nun ein Bewegtes Bild zu erhalten, müssen wir bei dem Zweiten Frame der Animation-Leiste, das Auge der Ebene Smiley1 ausblenden und die Ebene Smiley2 einblenden. Wenn wir in der Animation-Leiste nun auf Abspielen drücken, kann man sehen dass sich der Smiley bewegt. Da der Smiley sich aber noch zu schnell bewegt, werden wir nun noch eine kleine Zeit für jedes Frame einfügen.

 

 

  1. Dazu drücken wir unter den 1. und 2. Bildframe in der Animation-Leiste auf die Zeit. Noch müsste dort „0 s“ stehen, wir ändern das bei beiden auf „0,2 s“ und Spielen nun die Animation ab. Wie man sieht bewegt sich der Smiley nicht mehr so schnell und es kommt wie herzhaftes Lachen rüber. Das ganze speichern wir auch wie sonst immer als Gif-Datei, dazu auf Datei > Für Web speichern… > Speichern und fertig ist euer Animierter Smiley.

 

 

 

Extra:
Sicher können auch mehr Bildframes eingefügt werden, dem sind keine Grenzen gesetzt. Damit sich ein Smiley bewegt, braucht man mehrere verschiedene Bilder eines Smileys, die müssen natürlich selber gemacht werden, was aber sicher nicht so schwer ist, wie man denkt.

 

 

 

Erstellt am 28.12.2006
Letzte Änderung am 3.3.2009
Kontakt-E-Mail für Verbesserungen und Ergänzungen: aaron_86@smileytausch.de