Animated GIF

Door een geanimeerde afbeelding te maken, kan extra aandacht worden gevestigd op een foto op bijvoorbeeld een website. Een dergelijke animatie kun je zelf eenvoudig maken van een foto. 

Wat is een animatie?

Een animatie is niets anders als een aantal afbeeldingen die snel na elkaar worden vertoond. Maak je afbeeldingen die steeds maar een klein beetje van elkaar afwijken en laat je die afbeeldingen heel snel na elkaar zien, dan lijkt het alsof er een filmpje wordt afgespeeld.

Ook foto’s kunnen op een dergelijke manier tot een animatie worden omgezet. We nemen hiervoor een foto, veranderen die steeds een klein beetje en slaan na iedere verandering de afbeelding steeds op in een nieuw bestand. Als we daar mee klaar zijn, plakken we al deze afzonderlijke afbeeldingen achter elkaar en slaan ze op als een gif bestand. Moeilijker als dit wordt het niet!

Wat is een GIF bestand?

Bestanden opgeslagen in het zogenaamde “Graphics Interchange Format” (GIF) zijn heel populair geworden omdat ze relatief klein zijn en, in tegenstelling tot JPG files, animaties kunnen laten zien. Daarnaast kent het GIF bestandsformaat ook de mogelijkheid tot transparantie, iets wat JPG ook niet kent.

Het GIF bestandformaat kent ook nadelen. Zo kunnen er bijvoorbeeld niet meer dan 256 kleuren in worden opgeslagen. Maar omdat deze wel willekeurig gekozen kunnen worden uit een palet van 262144 kleuren, zijn er wel goede mogelijkheden om zwart-wit foto’s of dual tone foto’s in te verwerken. Veel foto’s kun je prima in 256 kleuren verwerken, maar heb je een foto met heel veel kleuren en kleurnuances, dan is deze dus minder geschikt om tot het GIF bestandsformaat om te zetten.

Een GIF bestand dat als animatie werkt, wordt overigens officieel een “Animated GIF” genoemd. Het is daarmee een speciaal soort GIF formaat.

Zelf een GIF maken

Wanneer je in Photoshop een foto inleest (zie afb 1) en je kiest voor File, Save As… en kiest voor het GIF formaat, dan kun je de afbeelding exporteren in GIF formaat (zie afb 2). Als het verschil tussen de twee foto’s gering is, wil dat zeggen dat Photoshop in staat is gebleken om 256 kleuren zo te vinden dat daarmee het GIF bestand veel overeenkomsten vertoont met het oorspronkelijke bestand.

Kies je overigens voor File, Export, Save for Web of voor File, Export, Save As… dan kun je meer invloed uitoefenen op hoe het GIF bestand exact wordt gemaakt.

Een Animated GIF maken

Om een animated gif te maken, moet je beginnen om eerst de afzonderlijke plaatjes te maken. Voor dit voorbeeldje hebben we de foto van afb 1 gebruikt waar we een masker boven op hebben gelegd. Onder de foto hebben we een zwarte Solid Color Adjustment Layer gelegd. Het masker van de foto hebben we met de Gradient Tool voorzien van een witte cirkel op een zwart vlak zodat de afbeelding overwegend zwart wordt, waarin een stukje foto wordt vertoond (zie afb 3).

Door het masker los te koppelen van de foto (click hiervoor met de muis op het schakeltje tussen de foto en het masker) konden we de afzonderlijke afbeeldingen maken door het masker steeds een aantal stappen naar beneden en naar rechts te verschuiven. Iedere keer nadat we dit gedaan hadden, sloegen we het beeld op. We maakten hiermee 14 afzonderlijke afbeeldingen waarop het masker er voor zorgde dat steeds een ander deel van de foto zichtbaar werd gemaakt.

  • Kies nu voor File, Scripts, Load Files into Stack en lees alle afbeeldingen in die een onderdeel moeten worden van de animatie.
  • Kies nu voor de menuoptie Windows, Timeline.
  • In de dropdownbox kiezen we voor “Create Frame Animation”
  • Rechts in dit scherm bevindt zich een menu dat opgeklapt kan worden door op vier horizontale streepjes te drukken. Click hier op en kies voor “Make Frames From Layers”

Druk je nu op de Play toets onder de frames, dan zie je hoe de animatie er uit zal komen te zien. De animatie kan twee kanten op worden gespeeld (kies voor omgekeerde volgorde in het “vierstreepjesmenu” voor “Reverse Frames”).

Een andere optie onder de frames is de keuze voor Once, 3 Time, Forever of Other…. Met deze optie geef je aan of de animatie eeuwig door moet blijven gaan (Forever) of bijvoorbeeld na drie keer gestopt moet worden. Dit is voor testdoeleinden. Pas tijdens het exporteren bepaal je echt hoe de animatie zal gaan verlopen.

Is alles naar tevredenheid, dan kan het bestand worden opgeslagen. Dat doe je als volgt:

  • Kies File, Export, Save for Web
  • Kies voor “GIF 128 Dithered” uit het Preset menu
  • Kies 256 in het Colors menu
  • Kies voor “Forever” in het Looping Options menu als dit is wat je wil
  • Click Save

Zie voor het eindresultaat afb 04. Natuurlijk hadden we deze animatie veel 'smoother' kunnen laten verlopen. We zouden dan meer afbeeldingen hebben moeten maken die in verschil dichter bij elkaar hadden moeten liggen. Maar zoals bij veel afbeeldingen op deze website gaat het natuurlijk slechts om een voorbeeld. Door er meer tijd in te steken wordt het resultaat vanzelfsprekend beter!

Veel mogelijkheden

Natuurlijk kun je met deze techniek veel kanten op. In een afbeelding kan een knipperende zaklamp worden verwerkt, een kaarsvlam kan walmen en zelfs uitgaan, een doosje kan door de afbeelding heen rollen of een auto kan komen aanrijden. Het kan regenen of sneeuwen en de zon kan ondergaan. Kortom, alleen de eigen fantasie is de beperkende factor!

Afb 1: Een foto is JPG formaat
Afb 2: Dezelfde foto geexporteerd naar het GIF bestandsformaat
Afb 3: Een van de 14 afzonderlijke beelden, gemaakt met een verschuivend masker
Afb 4: Een "Animated GIF" gemaakt met behulp van Adobe Photoshop