Chikatze, die zumeist progressive Bloggerin meines Vertrauens, hat mal wieder zu einem tollen Ding aufgerufen: einem interaktiven Hörspiel! Bewerbe sich, wer kann – ich habe es bereits getan. Und natürlich noch mehr, denn ich habe aus einer Laune heraus versprochen, ihr den zugehörigen Blogbutton zu basteln. Den man dann in sein Blog einbinden kann, um am Autorenwettbewerb teilzunehmen, denn den gibt es ja auch noch…
Also, wie basteln wir uns einen Blogbutton zurecht?
In diesem Fall musste es einer sein mit relativ viel Text. Denn man soll ja ungefähr wissen, worum es sich handelt. Also kam nur ein animiertes GIF infrage. Animiertes GIF?! HILFE!!! Diese zuckenden und zappeligen Dinger, die auf keiner Web 1.0-Seite fehlen durften? Ja, aber das kann man auch sehr hübsch animieren, am besten mit ein paar Fade-Effekten. Also los, Software suchen, die das kann, und auf geht’s…
THEMEN IN DIESEM BEITRAG
Die Software
Da gibt es viel, oftmals Freeware, bisweilen Demo-Versionen, manchmal Shareware (irgendwie ein Wort aus den frühen 90ern, finde ich). Nach einigem Ausprobieren der gängigen Sachen wie Animake (grauenhafte Shareware-Optik mit Werbung an allen Ecken und Enden, schon der Installer ist eine Zumutung), Ulead GIF Animator (den habe ich nicht verstanden, tut mir Leid – bin ich zu blöd dafür?!) und einem Editor, der sich tatsächlich erdreistet, einen Trojaner zu installieren (!!!) Also habe ich Gif-X benutzt, das zwar auf den ersten Blick ein wenig umständlich und „feature-arm“ wirkt, aber trotz einiger kleiner Fehler hervorragende Ergebnisse erzielt – auch dank der herausragenden Hilfefunktion, die wirklich sehr liebevoll und kompetent zusammengestellt wurde. Also habe ich das auch benutzt 🙂
So geht’s mit Gif-X
Lade das Programm (Freeware) hier herunter und installiere es.
Beim ersten Start wirst Du mit einem fast leeren Bildschirm begrüßt. Aber nach einem Klick auf „Datei → Neu“ ändert sich das gewaltig, denn eine Tabelle wird angezeigt und es kann direkt losgehen.
Das Symbol mit dem gelben Kasten, wo ein roter Pfeil dranhängt (4. von links) dient dem Hinzufügen der einzelnen Bilddateien, die später einmal die fertige Animation ergeben sollen. Es werden alle gängigen Bildformate gelesen, also JPG, GIF, PNG, etc. Mehrere Dateien einfach mit gedrückter ‚Strg‘-Taste auswählen.
Die Bilddateien, aus denen die Animation später bestehen soll, müssen schon vorher erstellt worden sein – hier ist die Grafiksoftware Deines Vertrauens das Werkzeug der Wahl). Gif-X ist keine Software, um Bilddateien zu erstellen, sondern dient nur dazu, GIF-Animationen aus bestehenden Bilddateien zu erzeugen.
So, die Einzelbilder sind jetzt in der Tabelle aufgeführt. Zusammen mit den wichtigsten Parametern wie Transparenz, Anzeigedauer und Filtereffekten (dazu gleich mehr). Beim Klick auf einen Tabelleneintrag siehst Du rechts im Vorschaufenster, wie das momentan markierte Bild aussieht.
Wie Du siehst, kann man ganz komfortabel Einstellungen für das jeweilige Bild vornehmen – Transparenz, Offset, Anzahl der Wiederholungen. Aber das interessiert uns jetzt nicht weiter, denn wir wollen ja einen schnellen Erfolg verbuchen und unsere erste GIF-Animation erstellen.
Bilder geladen – Effekte hinzufügen!
Ein animiertes GIF-Bild ist ja eigentlich eine Abfolge von Einzelbildern, mehr nicht. Und um die Animation zu erzielen, werden ganz einfach die verschiedenen Bilder ineinander übergeblendet, das ist die ganze Kunst. Um also einen Überblendeffekt hinzuzufügen, musst Du ein Startbild und ein Endbild per Klick in der Tabelle auswählen (Strg-Taste gedrückt). Dann definiert man den Übergang zwischen den Bildern ganz einfach unten rechts: Effekt-Kategorie aussuchen, auswählen, wie der Effekt aussehen soll, Anzahl der Zwischenbilder wählen (bewährt haben sich 5 neue Bilder) und per „Hinzufügen“ anwenden. Fast fertig!
Es rattert, und nun hast Du ein paar mehr Bilder in der Tabelle stehen. Das sind die Übergangs-Bilder (von einem Einzelbild zum anderen), die gerade erzeugt wurden. Erkennbar an einem blauen Rechteck. Man kann also sagen, dass jeder Bildübergang eine Reihe von neuen Bildern erzeugt. In unserem Fall solltest Du die Anzeigedauer (Übergangsbilder per Maus markieren, unten links 20 ms wählen) entsprechend anpassen, sodass ein flüssiger Übergang zwischen den Einzelbildern erzeugt wird. Das kann man auch alles im Nachhinein ändern, keine Angst.
Testen der Animation
In der Symbolleiste gibt es einen Button „Play“ – damit kannst Du ausprobieren, wie die Animation aussehen wird. Zufrieden? Prima! Nicht zufrieden? Kein Problem, einfach das Start- und End-Bild der Animation aus der Tabelle per Strg-Klick auswählen und unten rechts „ändern“. So lange, bis es gefällt.
Animiertes GIF erstellen
Nichts leichter als das – einfach „Datei → Bilder exportieren“ wählen und ab geht’s! Schon hast Du Dein erstes animiertes GIF erstellt!
Wie sieht denn nun mein fertiger Blogbutton aus?
He He 🙂 Das weiß alleine die Chikatze, die ihn dann einbinden wird, wenn sie den Autorenwettbewerb ausruft 😉 Aber dann werdet Ihr das Ergebnis sehen! Ihr gefällt er, das weiß ich schon per E-Mail – schaut doch ab und zu mal bei der lieben Chikatze vorbei, wenn Ihr noch keine RSS-Dauerkunden seid 😉 Lohnt sich, Herrschaften!
Anmerkungen
Die überaus kompetente Hilfe in Gif-X hilft Dir immer weiter! In diesem Kurz-Tutorial konnte ich Dir nur ein paar grundsätzliche Vorgehensweisen zeigen, den Rest erledigst Du durch Ausprobieren. Keine Bange, lies Dir einfach die Hilfe durch, da wird alles nochmal ganz genau erklärt.
Viel Spaß beim Erstellen Deiner GIF-Animationen!
Ja, Photoshop kann das auch (http://tinyurl.com/oh5qxs), aber das behebt nicht Dein Problem mit dem Safari, fürchte ich. Das sind die Eigenarten der entsprechenden Programme, die GIFs anzuzeigen.
ja. hab ich gemacht.
habe aber inzwischen festgestellt, daß das bild nur im safari und in irfan view nicht richtig angezeigt wird.
komisch.
firefox und internet explorer, sowie mein e-mail programm thunderbird können das bild animiert darstellen.
ach nee, warte, irfan view ging auch, hat mir aber einen grünen streifen am rechten rand angezeigt.
kann man diese animierten gifs nicht auch irgendwie im photoshop erzeugen? hat mir mal jemand gezeigt, ich konnte mir aber so schnell nicht merken, wie er das gemacht hat. muß wohl nochmal nachfragen…
@chikatze: Hast Du bei „Datei – Bild Speichern unter“ als Zieltyp „Animated GIF angegeben? Denn nur „Speichern“ oder „Speichern unter“ bewirkt, dass nicht das fertige Bild, sondern das Projekt als Datei mit der Endung „gifx“ abgespeichert wird. Und die ist nicht animiert.
habe es gerade mit einem (also zwei) foto ausprobiert.
in der programm-vorschau sehe ich dann ein lustiges wackel-gif. aber nach dem exportieren zeigt mir weder die windows vorschau noch der browser die animation an.
hast du ne idee, was ich falsch gemacht habe???
@ Martin: Genau so ist es muss ja nicht immer ein Tourturial sein;-)
Danke für die Begrüssung.
@Andy: Ja fein, dann heiße ich Dich erstmal mit allem Tadaaa bei mir willkommen 🙂
Freut mich, dass Dir die Anleitung gefällt – ist aber nur eine Kurzanleitung, damit man schnell loslegen kann. Aber gerade sowas wünscht man sich ja oft, wenn man mit ??? über dem Kopf vor einem neuen Programm sitzt und eigentlich nur wissen will, wie’s geht.
Echt eine Klasse Anleitung. Danke. Viele Grüsse jetzt auch von mir.
tausend dank, die buttons sind echt hübsch geworden! 😉
http://www.chitime.com/blog/?p=5321
nu mach ich das sowieso nicht mehr hier am mac.. vielleicht ein andermal.
werde es mir morgen mal auf dem pc ansehen… komme aber erst spät abends dazu… auch dazu, meinen schreibwettbewerb zu veröffentlichen… wenn ich nicht zu müde bin dann… *seufz*
@Aquii: ein Einzelbild siehst Du im 2. Screenshot – mehr aber noch nicht 😉
@Chikatze: ja, ist eine Windows-Software. Was es da für den Mac gibt – ich versuche mal, Dir ein paar Vorschläge zu machen: GIFted Motion, Graphic Converter (letzteres scheint wohl State-of-the-art zu sein).
@plerzelwupp: Bei der chikatze lese ich schon sehr lange mit. Eine wirklich sehr liebe Bloggerin mit einem tollen Blog, wo immer wieder was Interessantes zu finden ist und man sich einfach wohlfühlt. (@chikatze: das war kein Geschleime…)
@Hartmut: Danke für das Lob, Hartmut 🙂
Die Lernkurve ist ein wenig „buckelig“, d.h. wenn Du denkst, dass Du weißt, wie es geht, merkst Du ab und zu, dass es doch ein wenig anders zu lösen ist. Dann ein kurzer Blick in die Hilfe und Du weißt, wie man es richtig macht. Zu Anfang dachte ich, die Software ist blöd, aber wenn man mal das Konzept versteht, dann ist es eigentlich sehr gut gelöst und überhaupt nicht blöd. Viel Vergnügen!
Tolles Tutorial mit viel Liebe erstellt, das merkt man!
Ich habe mir die Software mal prophylaktisch heruntergeladen. Ich denke, der Spaß kommt beim Probieren.
Liebe Grüße
Einmal bin ich auch schon in Verlegenheit gekommen, ein animiertes Gif erstellen zu müssen. Das ist Jahre her und es ging lediglich um ein „um sich drehendes Logo“.
Im Moment habe ich keine Idee bzw. Bedarf eins zu erstellen – um den Software-Tipp bin ich dennoch dankbar. Man kann ja nie wissen. Wahrscheinlich brauch ich nächste Woche eins.
Für den link-Tipp zu Chikatze bin ich auch dankbar. Ich will hier nicht herumschleimen. Dennoch: die Seite gefällt mir wirklich gut.
hui, coole beschreibung.
das muß ich auch bald mal ausprobieren.
das programm ist aber nur für windows, oder? habe hier leider gerade „nur“ einen mac vor der nase…
Hätte ja jetzt ein erstes Beispiel von dir hier erwartet 😉