Handleiding: animated GIF maken met oneindige inzoom!

Introductie

Op deze pagina wordt beschreven hoe je een animatie-GIF kunt maken waarbij er oneindig wordt ingezoomd op een persoon die een foto vasthoud van hemzelf met daarop de foto en dan inzoomen in de foto, in de foto, etc.
Waarschuwing: ontzettend leuk om te doen + kost ontzettend veel tijd!


Voorbeeld: Jongetje in een animatie...




Stap 1: Maak een foto met daarop een persoon die een frame vasthoud.
Het is handig om een blanco frame te nemen, dus niet eentje met een motiefje of zo.




Stap 2: Maak het frame rechthoekig.
Gebruik een tekenprogramma (bijv. Paint Shop Pro) en maak het frame rechthoekig. Je moet dus eigenlijk het perspectief er een beetje uithalen. Natuurlijk, je kunt het ook zo laten, maar dan worden de volgende stappen extra moeilijk! Bekijk deze plaatjes nauwkeurig om het verschil te zien:
   



Stap 3: Bepaal welke verkleiningsfactor nodig is.
Ik heb deze stap eigenlijk omgekeerd gedaan:
* Ik heb de afmetingen van de binnenkant van het frame in pixels gemeten
* Daarna heb ik de grote foto uitgesneden in een afmeting die precies de zijden 2x zo groot heeft als de binnenkant van het frame. Erg handig!!!

De afmetingen die in mijn geval gebruikt zijn, waren:

De plaats van het frame binnen de groto foto is niet belangrijk, maar de verhouding tussen de buitenkant van de grote foto en het frame moeten gelijk zijn (dat wil zeggen, dezelfde lengte/breedte verhouding)! Houd het eenvoudig en gebruik iets simpels zoals bij mij: het dubbele.



Stap 4: Verklein het origineel naar frame grootte.
Mijn verkleiningsfactor was nu eenvoudig: steeds 50%.
En dat een paar keer herhalen:
       



Stap 5: Combineer de plaatjes, herstel eventuele details.
Ik moest er voor zorgen dat de vingers niet afgekapt werden. Ik heb dus wat vrije hand selectie en knip en plak werk gedaan.




Stap 6: Herhaal het verkleinen + combineren totdat het niet meer zichtbaar is.
Ik heb zo'n 10x verkleind. Klik op het plaatje om de grote versie te zien.




Stap 7: Bereken de coordinaten voor de uitsnijdingen.
Nu moet je bepalen in hoeveel stappen het filmpje rond moet gaan. Daarmee moet je de coordinaten berekenen voor de uitsnijding. Gebruik een lineaire berekening voor de coordinaten. Eigenlijk zou het een logaritmische moeten zijn (vanwege oppervlakte kwadraat), maar dat verschil zie je nauwelijks. Ik heb zelfs even een klein excel bestandje gebruikt voor het uitrekenen van de coordinaten.
Hier zie je het schema voor de coordinaten en de excel file.
  




Stap 8: Maak de uitsnijdingen zoals berekend.
Ter illustratie een paar voorbeeldjes. Ik heb totaal 25 stappen gebruikt.
        



Stap 9: Vergroot de uitsnijdingen allemaal naar dezelfde gewenste afmeting.
Bepaal hoe groot de animatie moet/mag zijn en vergroot alle uitsnijdingen naar die maat.
        



Stap 10: Genereer de animatie.
Sla alle plaatjes op in een gangbaar formaat (bijv. GIF) en gebruik een tool voor het genereren van de animatie. Ik heb UNFREEZE gebruikt. Een gratis programma met voldoende functionaliteit (d'r zijn overigens betere zoals spullen van Ulead, maar die moet je dan wel kopen. Kijk in het plaatje voor de URL waar UNFREEZE is te downloaden.




Stap 11: Invoegen in je website (alsof het een normaal plaatje is) en geniet!!!.