GIMP Animated GIFs maken

Hoe maak je bewegende afbeeldingen (om specifiek te zijn: een animated GIF) in de GIMP?

Dit deel van de GIMP tutorial is volledig optioneel, het hoort niet meer bij het deel "basiscursus" maar is enkel voor de geïnteresseerden. Als je dus niet direct van plan bent om animated gif's te maken, kan je dit deel gerust links laten liggen.

Deze tutorial gaat er van uit dat je kan werken met layers en weet wat Indexed is. Als je dit nog niet kan is het aan te raden de pagina's hierover te lezen.

Voor we beginnen wil ik nog even verduidelijken dat niet alle programma's Animated GIFs correct weergeven. Veel programma's tonen een stilstaand beeld in plaats van een animatie, zelfs als de GIF werkelijk een animatie bevat. De makkelijkste manier om je Animated GIF te bekijken is in je browser (een programma om te surfen, zoals Mozilla Firefox, Internet Explorer, ...).

Hoe zit een animated GIF in elkaar? Zo een filmpje is eigenlijk een opeenvolging van beelden, die achter elkaar weergegeven worden zodat het lijkt dat ze bewegen. Wat we gaan doen is dus eigenlijk die afzonderlijke beelden tekenen. Als ik dus "beeldje" zeg bedoel ik dus 1 beeld van een animatie.

Hoe tekenen we nu die afzonderlijke beelden? Elk afzonderlijk beeld van de animatie wordt getekend in een afzonderlijke layer. Dus we maken een nieuwe afbeelding, daarin tekenen we verschillende layers, en het resultaat is een filmpje waarin al die layers achter elkaar weergegeven worden. Niet begrepen? De praktijk is dan waarschijnlijk duidelijker.

Om te beginnen maken we dus een nieuwe afbeelding aan, en hier tekenen we iets willekeurigs in. In dit voorbeeld teken ik linksboven een "1".

Hoewel je dit al zou moeten weten door de vorige hoofdstukjes, toon ik toch nog even alles in verband met de layers. Sorry als het wat traag gaat voor sommigen, maar ik zeg liever alles omdat ik opgemerkt heb dat er anders mensen zijn die een stap niet kunnen volgen.

We openen het venster waarin we met layers kunnen werken.

We maken een tweede layer aan door op het knopje linksonderaan te klikken.

Hierin kiezen we dat we een doorzichtige (transparante) layer willen. Maak je geen zorgen over waarom het een transparante layer moet zijn, dat is voor mij handiger om iets uit te leggen verderop.

Zorg ervoor dat de layer die we zojuist hebben aangemaakt aan staat. Hij staat aan als hij blauw gekleurd is in de lijst van layers, en je kan hem aanzetten door er even op te klikken. Dit is belangrijk want het zorgt ervoor dat we in onze nieuwe layer tekenen en niet in een andere. Teken nu in onze pas aangemaakte layer het cijfer "2".

Maak nu terug een nieuwe layer aan (ook een doorzichtige), en teken hierin het cijfer "3".

En nu gaan we eens bekijken hoe ons filmpje er uit ziet: ga naar het menu Filters>Animation>Playback

Hier kunnen we op "Play/Stop" klikken om onze animatie te laten spelen of te pauzeren.

Voila! Je hebt je eerste animatie al gemaakt!

Natuurlijk willen we onze animatie als animated GIF opslaan: ga naar het menu File>Save in het venster van je afbeelding (niet de menu's van de toolbox!), kies een bestandsnaam, klik op save,

en dan wordt een heel belangrijke vraag gesteld: hij weet niet goed wat hij met onze layers moet doen: er zijn twee mogelijkheden: "flatten image", en "save as animation". Bij "flatten image" worden alle layers over elkaar geplakt zodat het resultaat alle layers boven elkaar is. Dan hebben we geen bewegende afbeelding. Met "save as animation" wordt er voor elk beeldje van de animatie 1 layer genomen. We kiezen uiteraard voor "save as animation".

Dan wordt er een hoop interessante dingen gevraagd, zet bijvoorbeeld "Delay between frames when unspecified" wat hoger om de tijd tussen de beeldjes van de animatie wat groter te maken, waardoor de animated gif wat minder snel gaat. Voorlopig willen we eerst zien of het werkt, dus trekken we ons niet te veel van de andere instellingen af en klikken we op OK.

Als je dat bestand nu opent in je browser (surf-programma), zie je de animatie die je gemaakt hebt.

Als we de GIF bekijken die we zojuist gemaakt hebben, zien we dat het eerste beeld braaf het cijfer "1" toont, maar het tweede beeld toont het cijfer "1" en tegijkertijd het cijfer "2". We weten dat elk beeldje van de animatie overeenkomt met de layer, dus het tweede beeldje van de GIF zou dus de tweede layer moeten zijn. Maar: de tweede layer bevat het cijfer "1" helemaal niet, en toch zien we die? Hiervoor is een beetje verklarende theorie nodig:

Er bestaan twee manieren om de layers om te zetten naar de animatie: replace en combine. Bij replace komt elk beeldje van de animatie exact overeen met 1 layer. Als we de GIF dus zouden opslaan door middel van de replace-manier, zouden we nooit het cijfer "1" en het cijfer "2" tegelijk te zien krijgen.

Als je de afbeelding nu opnieuw opslaat om de instellingen terug te zien (kies "opslaan als", met "opslaan" gebruikt hij gewoon je oude instellingen), zie je dat je onderaan "Frame disposal where unspecified" kan instellen, en kan kiezen uit "Cumulative layers (combine)" en "One frame per layer (replace)".

Hier links: dezelfde animatie, maar met "replace" opgeslaan. We zien dat in het tweede beeldje nu het cijfer "1" en "2" niet tegelijk zichtbaar zijn, maar enkel het cijfer "2".

Nu weten we al hoe "replace" werkt, maar hoe werkt "combine"? We weten van het hoofdstuk over layers dat een layer in een normale afbeelding (dus geen animatie) doorzichtigheid kan hebben, en dat op de plaatsen waar de layer doorzichtig is, we de layer(s) die er onder zitten zien. De uiteindelijke afbeelding is dan dus opgebouwd door de layers over elkaar te leggen.

Bij "replace" worden layers niet op elkaar gelegd, maar wordt elk layer dus gewoon als apart beeldje van de animated gif gebruikt
Bij "combine" daarentegen krijgt de layer zijn doorzichtigheid terug de functie die we gewend zijn van niet-animaties: we zien de onderliggende layer erdoor.

Wat er dus gebeurt als we de layers als "combine" opslaan, is dat we op de plaatsen dat layers onzichtbaar zijn, we in het beeldje dat bij die layer hoort, we de onderliggende layers er door zien.

In de prakijk:

  • Beeldje #1: hier zien we layer #1.
  • Beeldje #2: hier zien we layer #2; en op de plaatsen waar layer #2 onzichtbaar is, zien we layer #1
  • Beeldje #3: hier zien we layer #3; en op de plaaatsen waar layer #3 onzichtbaar is, zien we layer #2. Op de plaatsen waar layer #2 zichtbaar is, zien we layer #1.

Om het allemaal nog wat ingewikkelder te maken kunnen we ook per aparte layer instellen of hij "replace" of "combine" moet zijn. Dit doen we door in de naam van de layer "(combine)" of "(replace)" te typen, met ronde haakjes er rond. De naam van een layer kan je veranderen door er op te dubbelklikken in de lijst van layers, of door op een layer te klikken met de rechtermuisknop, en "Edit Layer Attributes" te kiezen.

als je van een layer niet instelt of hij combine of replace moet zijn, wordt er de instelling genomen die je kiest bij "Frame disposal where unspecified" bij het opslaan van je GIF.

Wat gebeurt er nu als er een reeks layers combined zijn, en daar een layer replace tussen zit?
Wel, de layer "replace" gaat nooit iets laten zien van alle layers die er voor zitten. Dus als layer 1 tot en met 10 "combine" is, en layer 11 is "replace", en layer 12 tot 20 is "combine", zal je bij beeldje #11 gewoon layer 11 zien; en bij beeldje #12 zien we layer 12, en op de plaats waar layer 12 onzichtbaar is, zien we layer 11. Vanaf layer 11 zien we nooit iets van de voorgaande layers (10, 9, 8, ...).

We kunnen ook van elke layer afzonderlijk instellen hoe lang het beeldje dat bij die layer hoort getoond moet worden in de animated gif. Dit kunnen we doen door de naam van de layer te veranderen, en er "(230 ms)" te typen, als je wilt dat die layer 230 miliseconden getoond wordt.

Als je van een layer niet instelt hoeveel ms hij moet duren, wordt er de tijd gebruikt die je instelt bij "Delay between frames when unspecified" bij het opslaan van de GIF.

Natuurlijk willen we onze animated GIF in een zo klein mogelijk bestand opslaan. GIMP heeft een optimaliseer-functie die er voor zorgt dat GIFs veel kleiner kunnen opgeslagen worden. Deze functie vinden we terug in het menu "Filters">"Animation">"Optimise (for Gif)". Als je dit aanklikt wordt er een tweede afbeelding gemaakt die dezelfde inhoud heeft, maar die wel een kleiner bestand geeft als je hem opslaat.

Voorts dient opgemerkt te worden dat als je je animatie als RGB maakt, het moment dat je je afbeelding omzet naar Indexed een groot effect heeft op de grootte van de GIF. Als je de afbeelding omzet naar Indexed voordat je de afbeelding optimaliseert, geeft dit een groter bestand dan wanneer je de afbeelding eerst optimaliseert en pas daarna omzet naar Indexed.

Een voorbeeldje van de praktijk: de "WillemPen.org Presents"-animatie die helemaal bovenaan deze pagina staat, gaf bij verschillende manieren van opslaan de volgende bestandsgroottes:

  • Niet optimaliseren, gewoon omzetten naar GIF: 1.2M
  • Eerst omzetten van RGB naar Indexed, en dan optimaliseren: 596K
  • Eerst optimaliseren, en dan omzetten van RGB naar Indexed: 262K

Quadreg gaf me de volgende fantastiche tip:
Als je verschillende bestanden op je computer heb staan, en je wilt daar een filmpje van maken zodat je dus het ene bestand na het andere ziet in dat filmpje, kan je die bestanden openen dmv het menu "File">"Open as layer". Dit is het menu in het venster van de afbeelding waarin je werkt, niet in de Toolbox. De bestanden worden dan allemaal als layers in 1 bestand geladen, zodat je er een filmpje van kan maken.

Deze tekst is geschreven door Willem Penninckx. Oorspronkelijke URL: http://www.willempen.org/gimp/animated-gif/
Copyright © 2005 Willem Penninckx. Alle rechten voorbehouden.

Overname van deze tekst is verboden.