Animated gifs, wat zijn het? En kan ik die zelf maken? Ja, dat kan! Hier leg ik uit hoe je dat (gratis) kan doen.

Smartphone stuntweekimpression?p=1&s=21261&t=url&f=BAN&name=

Een afbeelding zoals je die overal ziet op internet is meestal een jpg, bmp, png, tif of gif.
Dit is dan een plaatje, en dan is het.
Maar soms zie je ook een bewegend plaatje, bijvoorbeeld als profielfoto (ook wel 'avatar' genoemd), zo'n plaatje waarvan je denkt "Dat wil ik ook!"...


Een animated gif. Eigenlijk niets meer dan een verzameling gifs die achter elkaar afgespeeld worden (als de applicatie waarmee het plaatje getoond wordt dat tenminste toelaat, daar kom ik later op terug).
Een animated gif is een manier om wat verschillende fotootjes te laten zien in plaats van 1 foto, maar ook een manier om een klein filmpje te maken.
"ja, een bewegend plaatje, dat wil ik ook!"

Nou, dat kan!

Hier zal ik proberen uit te leggen hoe je dat (gratis) kan doen.

Stap 1)

Bedenk wat je wilt maken. Dit kan nog ingewikkeld zijn, maar in dit voorbeeld houden we het nog even makkelijk, we gaan een plaatje maken wat bestaat uit 4 verschillende fotootjes, de 4 letters van XEAD.

Stap 2)

Zorg dat je de benodigde fotootjes op je computer hebt staan.
Dit kan ook al een lastige (maar ook leuke) zijn, want hierbij komt de creativiteit om de hoek kijken als je je eigen fotootjes gaat maken. En wellicht ook wat handigheid met andere programma's die je daarbij kunnen helpen.
Daarover later meer, nu houden we het even makkelijk. Voor het eerste voorbeeld hebben we 4 letters nodig en die heb ik al gevonden en deze kan je dus hergebruiken:


Ga met de muis op de letters staan, klik rechts en kies 'afbeelding opslaan als' (kan zijn dat je pc Engelstalig is, maar voor het gemak ga ik even uit van de Nederlandse versie).

Stap 3)

Het eindresultaat heeft een bepaald formaat, hier is het even van belang om te bedenken wat je met het plaatje gaat doen. Als je hem gaat gebruiken als profielfoto (avatar), dan zijn er vaak eisen aan verbonden, bijvoorbeeld dat het plaatje niet groter mag zijn dat 80 puntjes (pixels) breed en hoog.
Als je daar niet mee te maken hebt, dan kan je elk formaat gebruiken wat je wilt.
Tip: hou het formaat van de verschillende plaatjes wel gelijk anders wordt het eindresultaat erg rommelig (tenzij dat juist hoort bij het creatieve idee)
Voor het gemak heb ik de 4 plaatjes even groot gemaakt, allemaal 256x256. Het programma wat ik ga gebruiken kan er later alsnog 80x80 van maken.

stap 4)

Start het programma waarmee je het bewegende beeldje gaat maken. Dit kan met meerdere programma's, maar zelf hoef ik niet zo nodig een programma te downloaden en te installeren als het ook gewoon online kan.
En daar is genoeg keuze voor. Ik maak in dit voorbeeld gebruik van een simpel maar doeltreffend programma, 'picasionmaker'. (er is genoeg keuze, probeer anders ook een ander programma, die biedt misschien weer meer mogelijkheden)

Ga naar www.picasion.com
Hier worden 3 foto's gevraagd,
selecteer foto-1,
selecteer foto-2,
selecteer foto-3,
We hebben echter nog een 4e foto, dus kies 'add one more picture'
selecteer foto-4,

Stap 5)

kies het formaat van het eindresultaat. Kies uit een van de voorgedefinieerde waardes, of kies 'advanced', in dat geval kan je zelf de exacte maat aangeven.
Kies nu voor 'advanced' en 80 (het voordeel bij picasionmaker is dat het niet uitmaakt hoe groot je afzonderlijke foto's zijn, hij maakt er 80x80 van. (een foto die 160x80 was wordt daardoor verkleind tot 80x40, je krijgt dan dus wel een zwarte balk)
(tip: gebruik dus foto's van hetzelfde formaat).

Stap 6)

Kies voor snelheid: 'normal'.

Je blijkt niet aan te hoeven geven of het filmpje weer opnieuw moet beginnen als hij klaar is, en dat is prima, als het filmpje klaar is, moet hij gewoon weer opnieuw beginnen.
(tip: als je even een 'pauze' wilt aan het eind van het filmpje, dan kan je dat doen door 2 keer dezelfde laatste foto te nemen. Die toont hij dan achter elkaar maar dat valt niet op, het lijkt een pauze.

Stap 7)

Kies 'create animation'.

Stap 8)

Bovenin zie je het eindresultaat,
eronder staan een aantal mogelijkheden om je resultaat meteen te posten op websites.
daaronder staan een paar linken. De tekst bij 'direct link' kan je knippen en plakken, (bijvoorbeeld in een mail zodat je iemand kan melden wat je gemaakt hebt. Als hij die link weer in de browser plakt, dan krijgt hij het plaatje te zien.

We slaan hem zelf op zodat we zelf kunnen bepalen wat we er wanneer mee doen.
Kies 'save this animation'.
De naam is wat cryptisch (iets met 'picasion.com_d-en dan een heel lang getal).gif.
Deze kan je zelf hernoemen naar bijvoorbeeld Xead.gif.

Stap 9)

Open het plaatje en bekijk je resultaat.
Of het plaatje juist getoond wordt, hangt overigens wel af van het programma waarin je het opent, sommige programma's (zoals Word of Paint) weten niet wat ze ermee moeten doen en tonen gewoon 1 plaatje (van de 4).
Open het plaatje in je browser, als het goed is, toont hij het bewegende plaatje.
Deze kan je dan bijvoorbeeld gebruiken als profielfoto.
(Tip: maak het niet te extreem met het plaatje want het gaat om je verhalen, niet om een epilepsie-oproepend plaatje wat alleen maar afleidt)


Gefeliciteerd, je eigen animated gif!


Nou ja, eentje die ik verzonnen had.
Maar nu je de basisbeginselen hebt gehad, kan je zelf na gaan denken over andere mogelijkheden.
4 foto's van verschillende letters leveren een woord op, maar 100 foto's achter elkaar waarbij er steeds minimale verschillen zijn, leveren weer een filmpje op!

TIP: als je een filmpje maakt, hou er dan rekening mee dat het filmpje aan het eind van het filmpje meteen weer aan het begin start, zorg dus voor een situatie waarbij het einde weer mooi aansluit bij het begin.

Een voorbeeld van een animated filmpje wat ik zelf heb gemaakt naar aanleiding van het logo van een stichting waar ik als vrijwilliger voor werk:


Ik heb hierbij het originele logo bestudeerd en uitgetekend op papier van 80x80 ruitjes. Daarna ben ik de verschillende plaatjes gaan maken waarbij de hond steeds een stapje verder staat.
Hiervoor heb ik het programma 'Paint' gebruikt wat bij iedereen meestal wel al op de computer staat.
Eerst maak je het plaatje wat niet wijzigt (het hondenhok), deze kan je elke keer weer hergebruiken. Het deel wat wel wijzigt moet je voor elk plaatje opnieuw op de juiste plek plaatsen.
Elk afzonderlijk 'fotootje' heb ik opgeslagen met de naam 'logo-001' tot en met 'logo-150' (ofzo) en daarna heb ik ze allemaal achter elkaar laten zetten.
Gevolg, een plaatje alsof de hond door het beeld schuift.
En natuurlijk kan je dan nog een stuk verder gaan waarbij hij echt loopt.
Of je maakt een poppetje dat door het scherm loopt,
of je neemt 2 foto's en haalt daar een stukje uit wat je gaat gebruiken.

Hier heb ik bijvoorbeeld 2 fotootjes gebruikt van onze hond en heb deze zo vaak achter elkaar geplaatst, dat het net lijkt alsof hij een knipoog geeft:

Eigenlijk is je fantasie je enige beperking.

Heb je wat moois gemaakt?
Laat het maar zien, leef je uit, overdonder de andere xead-schrijvers,
plak de link die getoond wordt bij 'direct link' in je reactie en laat de rest ook zien wat je gemaakt hebt.
Dan voeg ik hem weer toe in het artikel tot een mooie verzameling.

Dit is uitgebreidere versie van het Xead-voorbeeld dat ik gemaakt heb http://i.picasion.com/pic51/703754c17321dd5cb4eed0de6d330c9a.gif

 

Fred Steenbergen, 2013
Ik flikker hem nog liever in de sloot!!!
Waar dat op slaat? Dat leest u hier.

 

23/06/2013 14:36

Reacties (25) 

Voordat je kunt reagearen moet je aangemeld zijn. Login of maak een gratis account aan.
08/09/2012 20:20
Wist dit niet, ga het ook eens uitproberen, bedankt voor de tip, en dikke duim :-)
08/09/2012 20:45
leuk, dankjewel!
En wie weet, kan je er weer een artikel van maken als het gelukt is :-)
03/07/2012 10:49
Prima geschreven, ik gebruik meestal After Effects of Imageready, werkt ook uitstekend.
03/07/2012 10:45
Dit gaat bij de favorieten! Goed uitgelegd in je artikel!
03/07/2012 10:44
Wat leuk dit. Deze gaat naar mijn favorieten. Duim
03/07/2012 10:44
hé, wat leuk! Deze heb ik opgeslagen hoor!
je bezorgt er veel mensen plezier mee!
Heel dikke duim!
03/07/2012 10:44
die sla ik even op ! handig
03/07/2012 10:44
Bedankt voor deze tips! Bij de gfavo's