Er van uitgaande dat je de beschikking hebt over Photoshop. Heb je geen Photoshop, dan kun je online tools als Picasion (speciaal om animated GIF’s te maken van afbeeldingen op Picasa), Gifninja, Gickr of Flitpics gebruiken.
Dit is waar we naartoe gaan werken:
Iets eenvoudigs, om op te warmen. Alles bij elkaar kost dit je nog geen tien minuten!
Allereerst, een animated GIF bestaat uit meerdere afbeeldingen, in bovenstaand geval drie.
Zorg ervoor dat die afbeeldingen allemaal hetzelfde formaat hebben. Als je teksten of plaatjes wil invoegen, zorg er dan voor dat je binnen een maximum hoogte en breedte blijft.
Als je tevreden bent met je afbeeldingen, kun je gaan animeren. Ga naar: Window → Animation.
Zorg ervoor dat het venster is ingesteld op Animation (Frames). Photoshop heeft ook een Timeline instelling voor GIF animaties, die ga ik hier niet behandelen. Je kunt dit trouwens instellen met het fly-out menu aan de rechterkant van onderstaand venster.
In bovenstaand voorbeeld heb ik alledrie de afbeeldingen al klaargezet, je doet dit door het eerste frame (welke standaard wordt weergegeven) te dupliceren (met de knop naast de trashcan).
Als een frame geselecteerd is (in bovenstaand voorbeeld de laatste), kun je die manipuleren. Op die manier kun je aangeven wat er in elke frame moet komen te staan.
Als je onder de afbeelding klikt, opent zich een dropdownmenu waarmee je kunt aangeven hoelang iedere frame vertoond moet worden.
Nu is je animated GIF zo goed als klaar! Om hem op te slaan ga je naar File → Save for Web and Devices. Uit het dan volgende communicatiescherm kies je uiteraard ‘save as GIF’. Er zijn nog een aantal opties waar je mee kunt spelen, de belangrijkste is de ‘Loop’ instelling. Kies in dit geval voor ‘Forever’ zodat ‘ie niet na één keer stopt met de animatie.
Open met een willekeurige browser, en bewonder je werk!Voor de echte die-hards nog een tip: Als je met eigen afbeeldingen, effecten, en teksten werkt, kun je overwegen om de ’tweening’ functie te gebruiken.
Photoshop zorgt er dan voor dat er extra frames worden ingevoegd, zodat de animatie soepel en vloeiend in elkaar overloopt. De tweeningknop vind je links van de ‘copy frame’ knop.
Zodra je daarop kikt opent zich dit scherm:
Je kunt in plaats van drie frames ieder willekeurig aantal frames invoeren, hoe meer, hoe soepeler de afbeeldingen in elkaar overlopen. Bedenk alleen wel dat iedere frame die je toevoegt ook het bestand groter maakt. En hoe groter, hoe langer de laadtijd in een browser. Over het algemeen tween ik met twee extra frames (als ik dat überhaupt al doe), dat geeft al een aardig goed resultaat.
