Animationen

Ich hab mal ein zweisprachiges Tutorial vor längerer Zeit gemacht & da Lao ja so neugierig war, dachte ich mal, dass ich es hier poste.


Someone asked me, if I could make a tutorial how to make an animated Icon, and so I decided, that it would be a very good Idea to make one, and Iam totally excited to make it. xD If something is unclear, just ask me, and I will try to help you. I do it in 2 Languages. English and German.
All my Information, how to make animated Icons, are from and her Community , that helped me a lot.



How to make this Icon:


Programs: Photoshop CS2, VLC Mediaplayer, Image Ready



First, you need the VLC Media Player. You can download him for free, just use google. Install it. The second program I use is Photoshop CS2. I dont know, if Animations also go with Photoshop 7, but Photoshop CS3 and 4 are too difficult with Animations.
So, when the VLC Media Player is installed, you open it, maybe with a video. But before, you have to click: Extras -> Settings -> Video-> and then at the bottom: Video Screencaps. You browse for a directory Folder. Use one, you can always find and get to. Mine is called: Videos. There the vlc media player will save your screencaps. If you now watch the video, you can save screencaps with Shift + S
To save many pictures for Animations, you have to hold Shift + S a while.

Als Erstes brauchst du den VLC Media Player. Den kannst du bei Google kostenlos downloaden. Installiere ihn. Ich benutze für das Animationen machen ihn, und Photoshop CS2. Ich weiß nicht, ob es bei PS7 geht; mit 3 und 4 hab ichs nicht hingekriegt. Wenn du den VLC Mediaplayer installiert hast, öffnest du ihn. Ob ohne oder mit Video ist egal, denn zuerst musst du sowieso etwas einstellen. Gehe auf Extras -> Einstellungen -> Video -> und dann ganz unten Video Schnappschüsse. Dort stelle ein, in welchen Ordner deine Screencaps abgespeichert werden sollen. Wenn du das fertig eingestellt hast, öffnest du das Video und kannst loscappen mit Shift + S. Wenn du längere Sequenzen cappen willst - für ne Animation - halte die Tasten einfach länger gedrückt.


Now you have the Screencaps in this folder. Open Photoshop CS2 and Imageready. With Imageready you can load this Animation from this folder. WATCH OUT! In the folder should only be screencaps that fit into 1 animation - what means, not too much Caps!
You load the Folder with: Data/File (The first One, left side) -> Import -> Folder as Frames -> than search the folder with the caps and click okay. He loads the Screencaps into your photoshop with layers. Now you just change the width and the hight of this animation, just to get it into an Icon.

Look:


Jetzt hast du die Screencaps in dem Ordner. Öffne Photoshop und Imageready. Mit Imageready kannst du die Screencaps hereinladen. Vorsicht! In dem Ordner, aus dem du sie lädtst, sollte wirklich nur das sein, was auch in die Animation soll! Und pass auf, dass du nicht zu große Animationen machst - also nicht so viele Screencaps, sonst wird das Avatar riesig und du musst die Farbqualität heruntersetzen, um es nutzen zu können. Du klickst bei Imageready auf -> Datei -> Importieren -> Ordner in Frames -> dann suchst du den Ordner und klickst okay. Er lädt es als ein Bild mit vielen Ebenen, aus denen später dann eine Animation wird. Um das ganze jetzt in einen Icon zu kriegen, musst du die Größe des Bildes ändern.

Schau:




from this I change the hight and width into 90x50 (variablable)
Hier verändere ich jetzt von dieser Größe auf 90x50, was dann so aussieht:





Now I switch intp Photoshop and take this File with me -> to do this, click just at the feather on the left side at the bottom of this "table".
Nun wechsel ich nach Photoshop, und nehme die Animation mit, indem ich auf die Feder ganz unten links in dem Block da klicke.


Now we work with Photoshop. It isnt a real Icon yet, you see? So we have to change the working surface. Click -> Image/Picture -> Working Surface -> and change it into 100x100. Now it looks like this:
Nun arbeiten wir mit Photoshop. Es ist ja noch nicht wirklich ein Icon, also müssen wir die Arbeitsfläche umändern. Gehe auf -> Bild -> Arbeitsfläche und ändere es (in Pixeln) auf 100x100. Das ganze sieht dann so aus:





For getting the background white, we have to scroll down the block with the layers in it:
Damit der Hintergrund weiß wird, müssen wir das Kästchen rechts mit den Ebenen drin ganz runterscrollen:



Scroll it down, and click on the last layer at the bottom. Now make a new layer, with the second button in the bar from right.
Scroll runter und markiere die letzte Ebene. Erstelle eine neue Ebene mit dem ausgeschlagenen Papier. Dem Button in der Leiste ganz unten; der zweite von rechts.
Edge this layer to the bottom.
Schieb die Ebene nach ganz unten, dann ist die Animation über dem Weiß.
Fill this layer with the color of your choice. I took white.
Füll die Ebene mit der Farbe deiner Wahl. Ich nahm weiß.




Now you can colore your Icon a little bit, with selection layer and contrast and so on -> for tutorials watch other communitys. You can also make some borders. I did nothing like this, just some contrast and saturation and Brightness.
Jetzt kannst du die Farben noch ein wenig auffrischen, zbsp. mit Helligkeit/Kontrast, Farbton/Sättigung, slektive Farbkorrektur und so. Du kannst auch einen Rand einfügen. Ich hab das nicht gemacht, sondern nur ein wenig Helligkeit/Kontrast und Sättigung erhöht:



Now we're finished with Photoshop. Change to Imageready. Click again at the Feather in the left box, to get into Imageready.
Nun sind wir fertig in PS. Klick erneut auf die Feder links in der Box, um zurück zu Imageready zu kommen und die Datei mitzunehmen.


Here you can see, that everything is ready. But the Animation is just a little too fast. So you can change it. Click at the arrow under the red-exit button in the animation bar.
Jetzt kannst du sehen, dass alles schon so ziemlich bereit ist. Nur die Geschwindigkeit der Animation ist noch zu hoch. Um das zu ändern, klicke auf den pfeil unter dem Schließen-X des Animationskästchens.




Than click -> Pick all frames -> and than change the time. Under every Animation Screencap is this: 0 S. and an arrow. You marked every Screencap, so you can click at one of those arrows and change the time, that is written there. I always take 0.1 S
And when you did this, all of the frames have those 0.1 S decleration. Now you can save the Animation with -> Data/File -> optimated Version save as...
Nun klickst du -> Alle Frames auswählen -> und veränderst die Zeit. Unter jedem Screencap in der Animationsleiste steht: 0 S. und ein kleiner Pfeil daneben. Du hast ja alle Screencaps markiert, also klickst du auf einen der Pfeile und änderst dort die Zeit. Ich nehme meist 0.1 Sekunden. Jetzt kannst du die Animation speichern, indem du auf Datei -> Optimierte Version speichern unter... klickst.

And this is how it looks like
Und so siehts nun aus:

Wow, wie cool!
Ich wollte schon IMMER mal wissen, wie des geht!
Klasse!

Viiiiiieeelen Dank!

Freut mich, dass es dir gefällt =)

Also das Tutorial ist einfach Klasse. Insbesondere der Tipp mit dem VLC als Exportprogramm für die Snapshots war für mich Gold wert. Ich hatte dieses Programm schon immer auf dem Rechner, aber ich hatte gar nicht gewusst, dass man damit diese Snapshot-Sequenzen erstellen kann.

Als absoluter Fan von OpenSource-Programmen, wie zum Beispiel GIMP, hatte ich schon immer gewusst, wie man theoretisch mit The Gimp solche animierten GIF-Dateien erstellen kann. Mir fehlten nur eben die Snapshots in der Rohform. Doch dank deines Tutorials ist dieses Problem nun gelöst.
Wer sich dafür interessiert, wie man vorgehen muss, um mit GIMP solche Animationen erstellt:
1. Programm öffnen
2. Im Menü "Datei" den Punkt "als Ebenen öffnen" anklicken.
3. Im Dateidialog die erste der Snapshotdateien wählen und auf "Öffnen" klicken.
--> Punkte 2. und 3. für jede der Snapshotdateien wiederholen. Auf die Reihenfolge achten. Ist leider etwas umständlich.
4. Datei sicherheitshalber im XCF-Format speichern, wodurch die Ebenen erhalten bleiben.
5. Zusätzlich als GIF-Datei speichern. Im Dialog anklicken, dass es als Animation gespeichert werden soll. Danach noch die Interlace-Option aktivieren und speichern. Die Animation ist nun bereits fertig.

Sofern die Größe noch nicht stimmen sollte oder nur ein Ausschnitt des Bildes als Animation benötigt wird, einfach noch einmal die GIF-Datei in Gimp öffnen und entweder mit dem Schneidewerkzeug zurechtschneiden, oder aber im Menü "Bild" den Punkt "Bild skalieren" wählen und die erforderlichen Einstellungen dort vornehmen - abspeichern - fertig.

Gruß
Michael

Ah, danke Michael O.O
Cooool, das hatte mir jetzt noch gefehlt =)
Ich verlinke das vorn auch mal als Erklärung für Gimp =)


Danke, du bist der Beste!

Hey,

die Tutorials sind einfach toll und sicher hilfreich für einige.
@Baltimore: Ja man kann das auch mit PS7 machen. So lange ImageReady dabei ist, ist das ja alles kein Problem.

Lg, Alex

Danke, ihr zwei!

Ich grüble schon echt lange, wie man so etwas macht! xD

Wenn ich mal Zeit habe, werde ich mich mal an einem solchen animierten Ava versuchen. :]

Toll, dass ihr Tutoriale gemacht habt!

LG
Angie

Hier die Animation "Einbrennen" bei GIMP. Ich benutze GIMP 2.4.
Das lässt sich gerade bei Werbebannern gut verwenden oder auch bei Sigs oder Avas ^

Hier erstmal das Ergebnis:



Und hier der Weg zum Ziel ^^ :

1. Neue Datei erstellen
2. Text (ich habe es bisher immer mit Text gemacht, aber es geht bestimmt auch was anderes) einfügen



Dann rechts auf das Bild klicken und dann auf Filter > Animation > Einbrennen



Dann kommt dieses Fenster:



Ihr könnt hier gerne bisschen rumstellen, dann klickt ihr auf OK.
Dann wird ein neues Fenster geöffnet:



Nun rechts auf das Bild klicken und dann Filter > Animation > Animation abspielen



Dann kommt wieder ein Fenster:



Nun auf Wiedergabe klicken, stolz einer Weile seiner Animation zusehen und dann das Fenster wieder schließen.

Anschließend auf das 2. Fenster (wo ihr zuvor auf Filter und Animation abspielen geklickt habt) rechts klicken und auf Filter > Animation > Optimieren (Für Gif)

Dann öffnet es wieder ein Fenster:



Nun Rechtsklick, dann auf Datei > Speichern unter und dann alles eingeben. Bei Dateiendung GIF auswählen.
Dann folgendes auswählen:



und auf Exportieren.
Dann kommt wieder ein Fenster, mit dem ich nicht viel anfangen kann, und dort einfach auf Speichern klicken. Fertig ist die Animation. ^^

Glitzer

Zuerst vornweg: Ich benutze GIMP 2.4
Ob es bei anderen Versionen so geht, weiß ich nicht, aber im Grunde müsste das alles ähnlich sein. ^^
Hier das Ergebnis:



Neue Datei erstellen
Was soll glitzern? (bei Bsp.: „Test“)



2 neue transparente Eben erstellen
mit Pinsel Punkte auf die neuen Ebenen versetzt machen, wo es glitzern soll (am besten mit gleicher Farbe)


Ebene 1 (Die Ebene Test habe ich ausgeblendet, um das ganze zu verdeutlichen)


Ebene 2

Mit rechts ins Bild klicken. Dann auf Filter > Licht und Schatten > Glitzern



Dann kommt ihr zu folgendem Fenster:



Dort könnt ihr ein wenig rumprobieren. Sollte die Vorschau nicht funktionieren, dann stellt ihr irgendwas ein, geht auf OK und wenn ihr mit dem Ergebnis nicht zufrieden seid, einfach auf Bearbeiten > Rückgängig und dann Schritt 5 wiederholen. Dann müsst die Vorschau funktionieren. ^^

Dann dürfte das so aussehen (je nach Einstellung und so variiert das Aussehen)



Das macht ihr jetzt auch mit der anderen Ebene, die ihr „gepunktet“ habt.
Das sieht bei mir dann so aus (Ich habe alle Ebenen jetzt sichtbar)



Dann „wenn das noch nicht der Fall ist) die Hintergrundebenen vereinen (Bei mir wäre das der schwarze Hintergrund und die „Test“-Textebene)



Jetzt wieder das Bild rechts anklicken und dann auf Filter > Animationen > Überblenden.



Dann kommt dieses Fenster:



Dort könnt ihr auch ein wenig herumprobieren. Je mehr Zwischenbilder, umso „flüssiger“ und langsamer wirkt die Animation.
Dann auf OK.

Dann wird eine neues Fenster geöffnet, dass so aussieht:



Da klickt ihr wieder rechts auf das Bild und dann auf Filter > Animation > Animation Abspielen



Dann kommt, oh Überraschung!, noch ein Fenster.



Nun einfach auf Wiedergabe klicken und stolz sein Werk bestaunen. Am Besten noch Freunde und Familie herholen und mit seinem Können angeben.
Nachdem jeder seine Glückwünsche und Bewunderung ausgesprochen hat, das Fenster wieder schließen. ^^

Dann auf das Fenster, das nach der Erstellung der Animation erstanden ist (also das, wo ihr dann Animation abspielen geklickt habt) und drückt wieder recht auf das Bild und dann auf Filter > Animation > Optimieren (für Gif)



Dann kommt wieder einmal ein Fenster:



Und dann nur noch rechts klicken, dann auf Datei > Speichern unter und dann kommt ihr in das gewohnte Speicherfenster.
Dort gebt ihr Name und Speicherort ein. Außerdem klickt ihr auf GIF.



Dann öffnet es wieder ein Fenster (wie viel Fenster verträgt so ein PC eigentlich gleichzeitig?).
Dann gebt ihr folgendes ein:



Und schließlich auf exportieren.
Dann kommt noch ein Fenster.



Da ich davon keine Ahnung habe, einfach auf Speichern klicken. XD
Fertig ist die Animation. ^^

Cool!
Danke, für die Tutos! Das wollte ich schon immer mal wissen!
Das muss ich direkt mal ausprobieren, wenn ich Zeit hab O.O

Danke

Hey Leute, auch wenn das hier shcon recht alt ist, ich habe immer das gleiche Problem bei Animationen.
Wenn man sie abspeichert (als .gif), geht immer Farbe verloren, weil gif ja auf 256 Farben reduziert (meines Wissens?) Es gibt aber richtige Animationen, die nicht nur auf 256 Farben basieren, oder zumindest sehen sie nicht so aus. Wie funktioniert das, weiß das jemand?
Wäre echt super, wenn mir da jemand helfen könnte, denn meine Anis mit 256 Farben sehen fürchterlich aus >.<

Thora schrieb:Hey Leute, auch wenn das hier shcon recht alt ist, ich habe immer das gleiche Problem bei Animationen.
Wenn man sie abspeichert (als .gif), geht immer Farbe verloren, weil gif ja auf 256 Farben reduziert (meines Wissens?) Es gibt aber richtige Animationen, die nicht nur auf 256 Farben basieren, oder zumindest sehen sie nicht so aus. Wie funktioniert das, weiß das jemand?
Wäre echt super, wenn mir da jemand helfen könnte, denn meine Anis mit 256 Farben sehen fürchterlich aus >.<

Ohje, ich sehe das erst jetzt.
Also, bei Photoshop kannst du beim Speichern die Auflösung wählen, bzw. die Qualität. Da gibt es meiner Meinung nach beim Speicherfenster einer GIF die Möglichkeit, die Bildqualität hochzusetzen. Natürlich wird die GIF dann auch um einiges größer, aber zumindest sieht es dann auch ordentlich aus.