Let's talk Gimp 2.8 für Fortgeschrittene

Transkript

1 Animationen sind Bilder, auf denen sich Bereiche bewegen. Wie ein Minifilm oder ein Daumenkino... Bestimmt hast du auch schon ein Daumenkino gebastelt - z.b. aus deinem Mathebuch. Während mein Lehrer die wichtigen Zusammenhänge von Algebra erklärte, habe ich Punkte am Rand meines Buches gemalt und und sie per Daumen abgespielt. So ähnlich funktioniert auch die Animation eines digitales Bildes mit Gimp. So wie ein Mathebuch aus mehreren Seiten besteht, besteht eine Animation aus mehreren Ebenen, die nacheinander angezeigt werden. Probieren wir es gleich einmal aus. Öffne ein neues Bild 100px mal 200px. Male mit einem runden Pinsel einen Punkt in den unteren Bereich deines Bildes. Füge eine neue transparente Ebene ein. Male auf ihr einen weiteren Punkt im oberen Bereich der neuen Ebene. Fertig ist deine erste Animation. 1

2 Exportiere sie als springender-punkt.gif Beim Exportieren wirst du nach den Exporteinstellungen für GIF gefragt. Hier aktivierst du die Option "Als Animation", "Schleife endlos wiederholen" und stellst die Pause auf 200 Millisekunden. Die Einzelbildübergänge müssen auf "Ersetzen" eingestellt werden, da sonst nur der obere Punkt blinkt. Um dir die Animation anzuschauen, kannst du sie z.b. mit deinem Browser öffnen. Einige Thumbnail-Betrachter können aber auch schon Animationen anzeigen. Probiere aus, welche Programme dir zur Verfügung stehen. Um einen Ball in eine Richtung zu werfen, braucht man mehrere Punkte, also mehrere Animationsebenen. Möchtest du, dass ein Punkt durch ein Bild hüpft, überlegst du erst einmal, wie die Fluglinie sein soll. Als Orientierungshilfe kannst du einen Pfad zeichnen, wie der Punkt durch das Bild fliegen soll. Um zum Beispiel diese Animation zu erstellen, setzt du Punkte an den Stellen, wo der Punkt die Richtung ändert. Der erste Punkt muss in der Mitte der Linie liegen, damit der Punkt in das Bild hinein fliegt und am Ende auch wieder hinaus fliegen kann. Für jeden Punkt legst du eine neue Ebene an. Anschließend speicherst du deine Animation wieder als GIF. Achte darauf, dass du die Zeitabstände und den Wiederholungsmodus (Ersetzen) korrekt in den Assistenten einträgst. Ist alles richtig? Dann sollte die Animation so aussehen: 2

3 Öffnest du deine Animation mit Gimp, fällt auf, dass Gimp die Ebenen umbenannt hat. In den Ebenennamen stehen nun die Animations-Einstellungen jeder Ebene. Einzelbild 1 bis 4 ist der individuelle Name jeder Ebene. (200ms) ist die Zeit, die die Ebene in der Animation angezeigt wird. (replace) ist der Anzeigemodus. Möchtest du die Animation bearbeiten, wie z.b. die Anzeigedauer verändern, nimmst du die Änderungen in diesen Einstellungen vor. Gimp kann die Animationseinstellungen nicht überschreiben! Einmal als Animation exportiert, musst du alle Animationsänderungen im Ebenendialog vornehmen! Anzeigezeit verkürzt 3

4 Möchtest du der Animation einen Hintergrund hinzufügen oder weitere Farben hinzufügen, musst du zuerst sie zunächst wieder in den RGB-Modus umwandeln. Menü Bild - Modus - RGB, da beim Speichern in das GIF-Format die Animation indiziert wird. Jetzt kannst du deiner Animation einen farbigen Hintergrund hinzufügen. Den Hintergrund musst du jeder Ebene hinzufügen. Gestalte deine Hintergrundgrundebene und dupliziere sie für jede Animationsebene. Verschiebe jeweils eine Hintergrundebene unter eine Animationsebene. Vereine nun jede Animationsebene mit der darunterliegenden Hintergrundebene. Hierbei verschwinden die Animationseinstellungen. Du musst also beim Speichern wieder angeben, wie lang die Anzeigezeit ist und in welchem Modus die Ebenen angezeigt werden sollen. Animationen mit farbigem Hintergrund werden in der Dateigröße sehr schnell sehr groß. Um die Animation in der Dateigröße zu verkleinern, kannst du die Animation mit Gimp optimieren. Rufe Filter - Animation - Optimieren für GIF auf. Gimp vergleicht nun die Ebeneninhalte und löscht alle Flächen, die auf allen Ebenen gleich sind. Nur die 1. Ebene bleibt voll gefüllt. Gimp generiert ein neues Bild, in dem es die Animationseigenschaften bereits festlegt: Ebenennamen, Anzeigezeit und Wechselmodus. Als Anzeigezeit legt Gimp automatisch immer 100ms fest. Möchtest du die Animation verlangsamen, musst du diese 4

5 Zeiteinstellung ändern. (combine) Bedeutet, dass Gimp die Ebenen miteinander kombiniert. Die Ebenen werden also nicht ausgetauscht, sondern nacheinander alle Ebenen angezeigt. Über Filter - Animation - Animation abspielen kannst du dir in der Vorschau die Animation anschauen. Die Funktion zeigt nur den Ebenenwechsel, sie kann nicht die Zeiteinstellung simulieren. Exportiere deine Animation als animiertes GIF und verändere die Einstellungen nicht, da die Veränderungen keine Auswirkungen auf die Einstellungen haben werden. Vergleiche die Dateigröße von vor dem Optimieren und nach dem Optimieren. In den meisten Fällen ist die Datei wesentlich kleiner. Warum nur in den meisten Fällen? Wenn du eine Animation erstellst, die viele verschiedene Hintergründe besitzt, kann es passieren, dass die Dateigröße gleich bleibt. Alternativ kannst du auch deine Animation über Filter - Animation - Optimieren (Differenz) ausführen. Diese Funktion optimiert die Animation auf ähnliche Weise. Möchtest du eine bereits optimierte Animation verändern, musst du sie zuerst wieder deoptimieren: Filter - Animation - Deoptimieren. Hierbei werden die Ebenen wieder mit dem Hintergrund aufgefüllt. Gimp generiert dabei ein neues Bild. Anschließend musst du die neue Animation wieder in den RGB-Modus umwandeln. Erst jetzt kannst du die Animation ohne Qualitätsverlust skalieren (Bild - Bild skalieren) oder farblich verändern. Nach der Änderung optimierst du deine Animation wieder und exportierst sie als animiertes GIF. 5

6 Einen Wechselbanner mit Fotos kannst du genauso einfach erstellen wie mit einem gemalten Punkt. Öffne einfach alle Fotos in einem Bild und bringe sie auf die gleiche Größe. Dann speichere das ganze als animiertes GIF und fertig ist dein Wechselbanner. Häufig sieht das dann aber nicht ganz so toll aus, weil beim Speichern in GIF die Farben zu Flecken umgewandelt werden. Wie zum Beispiel bei diesem Wechselbild. Woran liegt das? Nun Fotos haben viele Farben. Beim Umwandeln in GIF indiziert Gimp die Farben, wobei sie auf 256 Farben reduziert werden. Gimp verwendet dafür einen einfachen Algorithmus. Du kannst jedoch Einfluss darauf nehmen, auf welche Art die Farben umgerechnet werden. Um dieses "Bluten" zu unterbinden, indizierst du dein Bild vor dem Speichern ins GIF-Format. Bild - Modus - Indiziert. Wähle als Rasterung Floyd-Steinberg (reduziertes Farbbluten) 6

7 Übungen Übung 1 Gestalte eine Animation: 300px mal 300px, transparenter Hintergrund. Lasse auf deiner Animation die Zahlen 9 bis 0 rückwärts zählen. Exportiere sie als GIF mit einer Ebenenanzeige-Zeit von 300ms. Wie groß ist die Dateigröße deiner Animation? Optimiere deine Animation für GIF Die Ebenen sollen wieder 300ms angezeigt werden. Exportiere deine Animation als animiertes GIF. Wie groß ist jetzt die Dateigröße deiner Animation? Füge jeder deiner Ebenen eine Sternfigur hinzu, diesen kannst du mit Filter - Render - Gfig erstellen. Die Zahlen sollen mitten auf dem Stern angezeigt werden. Exportiere deine Animation wieder als GIF. Achte auf die Dateigröße! Öffne deine Animation erneut. Skaliere sie auf 100px mal 100px und exportiere sie erneut als GIF. Achte auf die Qualität der Animation und die Dateigröße! Übung 2 Erstelle einen Wechselbanner. Verwende zwei beliebige Fotos dazu. 7

8 Achte darauf, dass die Farben nicht bluten, auf die Dateigröße und die Qualität. Übung 3 Als letzte Übung in dieser Lektion basteln wir einen Smilie. Was ist ein Smilie? Da ist so ein Kichergesicht: Die kann man sehr einfach gestalten und auch richtige kleine "Kurzfilmchen" mit ihnen zeigen: Okay, beginne mit einem neuen Bild, 25px mal 25px (Standardgröße für Webseiten und Foren) transparent. Da das Bild doch sehr klein ist, erstellst du eine neue Ansicht und zoomst auf 800% oder 1600% hinein. Aktiviere das Ellipsenwerkzeug. Stelle die Vordergrundfarbe auf ein Gelb und die Hintergrundfarbe auf dunkles Gelb oder Orange. Markiere einen Kreis auf deinem Bild. Achte darauf, dass du um die Ellipse einen kleinen Abstand zum Rand lässt. Aktiviere das Verlauf-Werkzeug und fülle die Auswahl mit einem kreisförmigen Verlauf Hellgelb zu Dunkelgelb. Damit haben wir schon mal das Gesicht. Hebe die Auswahl auf. Füge eine neue transparente Ebene ein: Augen. Deaktiviere die Kantenglättung des Ellipsen- Tools und markiere zwei Augen. Fülle sie mit Schwarz. Markiere auf jedem schwarzen Auge eine weitere Ellipse und fülle sie mit Weiß. 8

9 Aktiviere deinen Stift mit der Pinselspitze 2. Hardness 100 (51x51) auf 1px skaliert. Male nun die Augen zur Hälfte aus und ziehe eine Linie für den Mund auf die Augen-Ebene. Das sieht ja schon mal ganz gut aus für ein Smilie. Jetzt soll es sich aber noch bewegen. Dupliziere deine Augen-Ebene. Verändere sie ein wenig. Gestalte zum Beispiel ein Zwinker- Gesicht. Dazu radierst du das obere Auge mit dem Weiß weg und malst es einen Pixel breiter. Vom Mund nimmst du auf der linken Seite einige Pixel oben weg und verlängerst ihn nach rechts. Dupliziere die Hintergrundebene und schiebe sie im Ebenendialog unter die zweiten-augen-ebene. Vereine jeweils eine Auge-Ebene mit einer Hintergrundebene, so dass du zwei Kichergesichter-Ebenen hast. Exportiere deinen Smilie als animiertes GIF. Der Kleine zwinkert jetzt etwas stark oder? Das müssen wir noch beheben. Öffne das Smilie.gif mit Gimp, dupliziere beide Ebenen. Lasse die Zwinker-Ebenen auf 100ms. Ändere die Anzeige der anderen beiden Ebenen auf unterschiedliche Anzeigezeiten, um die Regelmäßigkeit aus dem Zwinkern zu bekommen. Nimm großzügige Werte, z.b. 1000ms oder 3000ms. Speichere deinen Smilie erneut als GIF. Fertig! Viel Spaß beim Basteln 9