Artikelen

Met Photoshop kun je vrij eenvoudig en op een snelle manier animated gifs maken. Deze tutorial legt in enkele stappen uit hoe je een animated gif maakt.

Voor Photoshop CS2 kreeg je een extra programma bij je pakket dat heet ImageReady. Met Photoshop maakte je dan alle layers voor je animated gif en in ImageReady kon je dan de animated gif maken. De animation functionaliteit zit vanaf CS2 gewoon in Photoshop en ImageReady wordt niet meer ontwikkeld. De stappen zijn wel redelijk hetzelfde gebleven.

Stap 1: Creer de animatie layers
Een animated gif is een 'frame by frame' animatie. Dat wil zeggen dat de plaatjes die je maakt in Photoshop straks op een bepaalde snelheid per beeld (frame) worden afgespeeld. We starten met het maken van 6 layers, waarvan layer 1 een witte achtergrond is en de volgende 4 layers een zwart blokje is dat steeds een stukje wordt opgeschoven naar rechts. Eindig met een lege layer.



Stap 2: Start de animatie
Open de animation panel via Window > Animation. Je krijgt dan de animatie panel te zien. Selecteer frame 1 en klik op 'duplicate selected frames'. Herhaal dit 6 maal. Elk frame heeft nu de zelfde layer als afbeelding. Selecteer het eerste frame in de animatie toolbaar en zet alle layers uit (in de layer toolba) behalve de layer met het eerste blokje. Herhaal deze voor de volgende frames en ga steeds een blokje verder, tot je eindigt met de laatste,  lege frame.

Stap3: Timing
Elke frame volgt op de volgende frame met een beplaade snelheid. Deze snelheid kun je aanpassen in de animatie toolbar door op de tijd te klikken. Zet voor alle layers de snelheid op 0.1 seconden.



Stap 4: Overganseffecten
Je kun de overgang van frame naar frame ook mooi soepel laten verlopen. Zo kan je kiezen voor een tween of een fade (opacity). Wij gaan het laatste blokje (blokje 5) laten wegfaden naar blokje 6. Selecteer de twee frames en klik op de ‘tween’ knop.



Je krijgt nu een keuzescherm, waarin je aangeeft hoeveel frames de animatie moet hebben (5), dat het om een opacity tween gaat en dat deze op alle (geselecteerde) frames toepasbaar moet zijn. Als je op OK klikt zal Photoshop zelf 5 frames toevoegen waarin het blokje in elke frame steeds lichter wordt:

Stap 5: Publiceer de animated gif
Je kunt de animatie die je hebt gemaakt in Photoshop opslaan als animated gif. Doe dit door te kiezen voor ‘file > save for Web & Devices’. Selecteer als compressie bestand het type ‘gif’ en sla deze vervolgens op.

Open de gif door er op te dubbelklikken, en zie hier het resultaat: