Pooly's Kunst und Schreibforum

Würden Sie gerne auf diese Nachricht reagieren? Erstellen Sie einen Account in wenigen Klicks oder loggen Sie sich ein, um fortzufahren.

+3
moriazwo
Pooly
Baltimore
7 verfasser

    Animationen

    Baltimore
    Baltimore
    Von allen bewunderter Meister der Künste
    Von allen bewunderter Meister der Künste


    Beiträge : 14923
    Laune : Starwood Choker.
    Ich schreibe : Momentan an Sie Sagen Van Gogh Hat Gelbe Farbe Gefressen.
    Texte : Baltimore Kunst: Baltimore
    Sonstiges :
    Animationen Party_10

    Animationen Empty Animationen

    Beitrag von Baltimore Mi 23 Sep 2009, 08:45

    Animationen


    Animiertes Avatar [Photoshop & Imageready] von Baltimore
    Snapshots bearbeiten [GIMP] von moriazwo
    Textanimationen [GIMP] von Arawn
    Gitzer [GIMP] von Arawn
    ...
    ...
    ...

    Baltimore
    Baltimore
    Von allen bewunderter Meister der Künste
    Von allen bewunderter Meister der Künste


    Beiträge : 14923
    Laune : Starwood Choker.
    Ich schreibe : Momentan an Sie Sagen Van Gogh Hat Gelbe Farbe Gefressen.
    Texte : Baltimore Kunst: Baltimore
    Sonstiges :
    Animationen Party_10

    Animationen Empty Re: Animationen

    Beitrag von Baltimore Mi 23 Sep 2009, 08:59

    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:





    Pooly
    Pooly
    Koordinator


    Beiträge : 109754
    Laune : Welcome to Mindfuck Central.
    Ich schreibe : Um meine Seele am Ende des Tages vom Staub des Alltags zu befreien.
    Texte | Kunst
    Schreibtisch | ReadOn

    Animationen Empty Re: Animationen

    Beitrag von Pooly Mi 23 Sep 2009, 09:12

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

    Viiiiiieeelen Dank!
    Hach
    Baltimore
    Baltimore
    Von allen bewunderter Meister der Künste
    Von allen bewunderter Meister der Künste


    Beiträge : 14923
    Laune : Starwood Choker.
    Ich schreibe : Momentan an Sie Sagen Van Gogh Hat Gelbe Farbe Gefressen.
    Texte : Baltimore Kunst: Baltimore
    Sonstiges :
    Animationen Party_10

    Animationen Empty Re: Animationen

    Beitrag von Baltimore Mi 23 Sep 2009, 09:29

    Freut mich, dass es dir gefällt =)
    moriazwo
    moriazwo
    Schafft Werke für des Königs Privatbestand
    Schafft Werke für des Königs Privatbestand


    Beiträge : 3577
    Laune : ... allmählich steigend ...
    Ich schreibe : ... am liebsten SciFi (mit seltenen Ausflügen in die Fantasy)

    Texte : moriazwo
    Kunst : moriazwo
    Infos : moriazwo

    Animationen Empty Re: Animationen

    Beitrag von moriazwo Mi 23 Sep 2009, 16:17

    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
    Pooly
    Pooly
    Koordinator


    Beiträge : 109754
    Laune : Welcome to Mindfuck Central.
    Ich schreibe : Um meine Seele am Ende des Tages vom Staub des Alltags zu befreien.
    Texte | Kunst
    Schreibtisch | ReadOn

    Animationen Empty Re: Animationen

    Beitrag von Pooly Mi 23 Sep 2009, 17:27

    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!
    Dawn
    Dawn
    Oberhaupt der Gilde der schönen Künste
    Oberhaupt der Gilde der schönen Künste


    Beiträge : 28524
    Ich schreibe : nein ich versuche mit Worten zu zaubern
    Texte : Dawn
    Kunst : Dawn
    Infos : Dawn

    Animationen Empty Re: Animationen

    Beitrag von Dawn Mi 23 Sep 2009, 19:46

    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
    Alania
    Alania
    Administrator


    Beiträge : 51664
    Ich schreibe : Briefe.
    Sonstiges : Wir wissen, was wir wissen, durch das, was wir wissen.
    Set by Sina
    Animationen Herzessenzminil3u0q Animationen Romani10 Animationen Jade10 Animationen Dom11 Animationen Dymone10 Animationen Verfal10 Animationen Liarsr11
    Animationen Party_10

    Animationen Empty Re: Animationen

    Beitrag von Alania Fr 25 Sep 2009, 20:16

    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
    Arawn
    Arawn
    Darf Pergament glätten
    Darf Pergament glätten


    Beiträge : 286
    Laune : super :D
    Texte : Arawn
    Kunst : Arawn
    Sonstiges : Mit Fleiß und starken Willen kann man manchmal sogar unmögliches schaffen Wink
    Mein Motto: Nichts ist so schlimm, dass eine Freundschaft daran kaputt gehen kann. Einfach mal ein paar Stunden drüber nachdenken oder eine Nacht drüber schlafen und es sieht schon ganz anders aus :)

    Animationen Empty Re: Animationen

    Beitrag von Arawn Mi 07 Okt 2009, 13:11

    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:

    Animationen Test-e10

    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

    Animationen Eb110

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

    Animationen Eb210

    Dann kommt dieses Fenster:

    Animationen Eb310

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

    Animationen Eb410

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

    Animationen Eb510

    Dann kommt wieder ein Fenster:

    Animationen Eb610

    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:

    Animationen Eb710

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

    Animationen Eb810

    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. ^^
    Arawn
    Arawn
    Darf Pergament glätten
    Darf Pergament glätten


    Beiträge : 286
    Laune : super :D
    Texte : Arawn
    Kunst : Arawn
    Sonstiges : Mit Fleiß und starken Willen kann man manchmal sogar unmögliches schaffen Wink
    Mein Motto: Nichts ist so schlimm, dass eine Freundschaft daran kaputt gehen kann. Einfach mal ein paar Stunden drüber nachdenken oder eine Nacht drüber schlafen und es sieht schon ganz anders aus :)

    Animationen Empty Re: Animationen

    Beitrag von Arawn Mi 07 Okt 2009, 15:09

    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:

    Animationen Test11

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

    Animationen Gz110

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

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

    Animationen Gz310
    Ebene 2

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

    Animationen Gz410

    Dann kommt ihr zu folgendem Fenster:

    Animationen Gz510

    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)

    Animationen Gz610

    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)

    Animationen Gz710

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

    Animationen Gz810

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

    Animationen Gz910

    Dann kommt dieses Fenster:

    Animationen Gz1010

    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:

    Animationen Gz1110

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

    Animationen Gz1210

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

    Animationen Gz1310

    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)

    Animationen Gz1410

    Dann kommt wieder einmal ein Fenster:

    Animationen Gz1510

    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.

    Animationen Gz1610

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

    Animationen Gz1710

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

    Animationen Gz1810

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


    Beiträge : 109754
    Laune : Welcome to Mindfuck Central.
    Ich schreibe : Um meine Seele am Ende des Tages vom Staub des Alltags zu befreien.
    Texte | Kunst
    Schreibtisch | ReadOn

    Animationen Empty Re: Animationen

    Beitrag von Pooly Mi 07 Okt 2009, 20:10

    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 Very Happy
    Thora
    Thora
    Schafft Werke für des Königs Privatbestand
    Schafft Werke für des Königs Privatbestand


    Beiträge : 4751
    Laune : Leeloo Dallas, Multipass
    Ich schreibe : schwerlich
    Texte : Thora Kunst: Thora Infos: Thora ReadON: Thora SchreibTabelle: Thora

    Sonstiges :
    Kunst-Shop|Werkstatt

    Mein SuB | ReadOn

    Animationen Empty Re: Animationen

    Beitrag von Thora Fr 08 Jun 2012, 15:53

    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 >.<
    Baltimore
    Baltimore
    Von allen bewunderter Meister der Künste
    Von allen bewunderter Meister der Künste


    Beiträge : 14923
    Laune : Starwood Choker.
    Ich schreibe : Momentan an Sie Sagen Van Gogh Hat Gelbe Farbe Gefressen.
    Texte : Baltimore Kunst: Baltimore
    Sonstiges :
    Animationen Party_10

    Animationen Empty Re: Animationen

    Beitrag von Baltimore Mo 26 Mai 2014, 12:34

    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.

    Gesponserte Inhalte


    Animationen Empty Re: Animationen

    Beitrag von Gesponserte Inhalte


      Aktuelles Datum und Uhrzeit: Do 28 März 2024, 20:04