Ihr kennt doch sicher noch diese unsäglichen GIFs aus den Anfängen des Webdesigns, oder?
Diese nervigen, oft auch knallbunten animierten Bildchen, die wie Klebetattoos wahllos auf hausgemachte Websites geklebt wurden, um diese “lustiger” zu machen. Irgendwann verschwanden diese Dinger dann endlich in die Versenkung, in die sie hingehören. (Ätsch, nein, es gibt sie noch…
)
Naja, genug von diesem Unsinn. Inzwischen gibt es eine modernere Variante der sich bewegenden Klebebildchen, nämlich das sogenannte “Cinemagramm” (oder auf neudeutsch: Cinemagraph); Fotos, in denen ein Detail noch in Bewegung ist. Sie sind gerade eine Modeerscheinung und eine, wie ich finde, ganz nette Spielerei. Ich musste das natürlich unbedingt mal ausprobieren und habe mich direkt mal an die Arbeit gemacht.
Es hat ein wenig gedauert, bis ich mein erstes Cinemagramm gemacht hatte, denn die nötige Software fehlte, bzw. war nicht komplett installiert. Mein Photoshop CS5 zum Beispiel hat keine Videos importiert. In der späteren Version ist das wohl kein Problem, aber in der CS5-Version. Nach ein bisschen Suchen im Netz konnte ich das Problem auch schnell festmachen: Man muss nämlich die 32-Bit-Version installieren. AHA! Was noch gedauert hat war, diese Version in meinem Wust von Dateien auch zu finden, sie versteckte sich nämlich in einem ganz anderen Verzeichnis. Bei mir war es “C://Programme (x86)/Adobe/Photoshop. Die normale Version, die ich auf dem Desktop verlinkt habe, steckt im anderen Programmordner. Aber noch immer ging es nicht, diesmal, weil ich Quicktime nicht installiert hatte. Das hat mich zwar etwas geärgert, aber nun gut, was tut man nicht alles, um einen Bildeffekt auszuprobieren, nicht wahr? Nach dem Neustart lief es dann endlich.
Also, dann hier das Tutorial:
Zunächst einmal braucht ihr ein Stativ und eine filmfähige Kamera. Nachdem ihr mittels Bedienungsanleitung herausgefunden habt, wie das mit der Kamera geht, montiert ihr diese auf das Stativ und nehmt irgendein beliebiges Motiv auf – möglichst eines, das sich nicht wild bewegt. Ich habe hier für das Beispiel eine Teetasse auf dem Fensterbrett mit herunterrinnenden Regentropfen auf der Scheibe aufgenommen.
Okay, die Hürde ist auch genommen, ich musste den Umweg über Flickr gehen, damit ich das Video hier zeigen kann, sonst hätte ich noch ein Programm herunterladen müssen, das das Video in ein WP-taugliches Format umwandelt… *augenroll*
Die Sequenz ist nur ein paar Sekunden lang, aus einem ganz einfachen Grund: je länger das Video ist, desto länger ist die Rechenzeit, also ist es besser, es kurz zu halten. Das Video ist an sich schon recht unbewegt, man sieht aber, wie der Dampf aus der heißen Tasse aufsteigt, während der Tropfen hinten an der Scheibe herunterrinnt. Und genau um diesen Tropfen geht es gleich.
Als erstes habe ich die Videosequenz in Photoshop (32 Bit!) importiert.
Ihr seht, dass das Video in jede Menge Ebenen aufgeteilt wurde:
Das sollte uns aber nicht weiter stören. Wichtig ist jetzt, dass wir die Ebenen alle – mit Ausnahme der untersten Ebene – in einer Gruppe zusammenfassen. Dafür klicken wir auf das kleine Ordnersymbol ganz unten im Ebenenfenster und ziehen anschließend per Drag-and-Drop die Ebenen in diesen Ordner.
Wenn ihr wollt, könnt ihr das Bild jetzt bearbeiten wie ihr möchtet. Achtet nur darauf, dass die Ebenen über dem Gruppenordner sind, damit die Veränderungen für alle Bilder wirksam werden.
Nachdem wir die Bildstimmung festgelegt haben, können wir dazu übergehen, das GIF zu erstellen. Hierfür legen wir eine Ebenenmaske für die Gruppe an:
Die Ebene füllen wir schwarz aus und stellen den Bereich wieder frei, der sich bewegen soll. Jetzt könnt ihr auch sehen, warum das Video nach Möglichkeit statisch sein sollte: Bewegt sich zu viel in der ausgewählten Sequenz, ist es eine Höllenarbeit, die einzelnen Bereiche freizustellen, die sich bewegen sollen. Hier reichte ein Pinselstrich.
Unter dem Button “Windows” klicken wir nun auf “Animation”.
Jetzt können wir die Animation zwar schon ablaufen lassen, nur sehen wir nicht sonderlich viel, da wir ja nur den Teil freigestellt haben, der sich bewegen soll. Um das zu ändern müssen wir im Ebenenfenster auf die unterste Ebene zurückgehen, diese anwählen und anschließend auf das Augensymbol oben im Ebenenfenster klicken und anschließend im Fenster, das sich öffnet, auf “Match” klicken. Bei mir heißt es “Unify Layer Visibility”. Wie dieses Fenster in der deutschen Version heißt, kann ich leider nicht sagen. Jedenfalls ist es das Augensymbol oben in der Mitte.
Wenn alles mit rechten Dingen zugegangen ist, müssten wie von Zauberhand sämtliche Ebenen in der Animationsleiste eingeblendet werden.
Wie ich jetzt sehen kann, war dieses Bildbeispiel nicht das beste, das ich wählen konnte, aber zu Demonstrationszwecken reicht es. Jetzt kann man das Filmchen für das Web abspeichern. Zur Sicherheit würde ich empfehlen, das Ganze erst als PSD-Datei zu speichern, weil mir mein Photoshop beim Versuch, das GIF für das Web abzuspeichern zwei oder drei Mal abgestürzt ist. Dann ist alles weg, was wir natürlich nicht wollen.
Die Einstellungen bleiben euch überlassen. Wenn es nur eine kleine Spielerei fürs Internet sein soll (und ja, es dauert nur fünf Minuten, wenn man das ein paar Mal gemacht hat 😎 ) kann man die Dateigröße verkleinern, indem man die Bildgröße verkleinert und die Farben reduziert. Sollte euer Programm trotzdem abstürzen, könnt ihr die Bildgröße schon vorher verkleinern, damit das System nicht so viel zu rödeln hat.
Und das war es im Prinzip auch schon. Keine Hexerei und kein zauberwerk, oder? 🙂
Der Vollständigkeit halber: Manchmal ist es nötig, eine Bewegung rückwärts ablaufen zu lassen. In meinem Beispiel brauchte ich das nicht machen, aber manchmal ist es ganz schön, einen Loop zu haben, der nicht offensichtlich ist. Hierzu markieren und kopieren wir die entsprechende Sequenz, die wir auch rückwärts ablaufen lassen wollen, in der Animationsleiste.
Anschließend klicken wir auf den kleinen Pfeil rechts oben im Animationsfenster und dann auf “Reverse Frames” (Hier wieder: Ich weiß nicht, wie es in der deutschen Version heißt.)
