Tips & tricks: PhotoShop

PhotoShop: Tijdlijnanimaties maken

Bewegende (animated) GIF-afbeeldingen maken in Adobe Photoshop geeft een leuke beweging op je website.

De afbeeldingen die aan elkaar geplakt moeten worden.

Hier boven zien we alle 4 de afbeeldingen die aan elkaar geplakt moeten worden. Elke afbeelding is hier in jpg-formaat. Andere formaten werken soms niet om een animated GIF te maken.

afbeeldingen aan elkaar plakken.

Open elke afbeelding afzonderlijk.
Omdat Photoshop in lagen werkt, openen we best elke afbeelding in een aparte laag.

Nu zien we in het menu 'Layers' dat afbeelding 2 boven afbeelding 1 staat. Doe zo verder met afbeelding 3 en 4. Dus openen, selecteren, kopieren en plakken op afbeelding 1.

Voorbeeld van de GIF maken.

Klik bovenaan op het menu Window en selecteer Animation. De werkbalk animation komt tevoorschijn. We krijgen het volgende te zien. Als je de volledige smiley ziet, moet je in het menu 'Layers' op het oogje klikken. dit is om de betreffende afbeelding onzichtbaar te maken. (We zien hierboven in het menu 'Layers' dat het oogje enkel naast 'Background' staat. De rest is onzichtbaar.)

Om de tweede afbeelding toe te voegen, klikken we in 'Animation' op 'Duplicates Selected Frames'. Nu komt er bij 'Animation' een vakje bij. We klikken in 'Layers' om de 2de afbeelding terug zichtbaar te maken (Op het oogje). nu zien we dit in het tweede vakje.

Doe dit zo voor alle afbeeldingen. Hieronder zien we een voorbeeld dat ik gemaakt heb. We kunnen bij elke afbeelding de tijd instellen. Hoelang de afbeelding dus getoond zal worden. In dit geval 0.1 seconde per afbeelding.

Eens dit allemaal gebeurd is, klikken we op 'Play' (Driehoekje) in 'Animation'. We kunnen zien hoe onze GIF er zal uitzien.

Als dit in orde is, kunnen we overstappen naar de volgende stap.

Opslaan van de GIF.

Deze GIF slaan we niet op zoals we gewend zijn. Ga naar 'File' en klik op 'Save for Web and Devices'. Hier kunnen we nogmaals kijken of de GIF goed zal afgebeeld worden. Als alles in orde is, klikken we 'Save' en de afbeelding is gemaakt.

Meer PhotoShop-tips

Overzicht van alle PhotoShop-tips

ECT BVBA - Oosterveldlaan 211 (2610 Wilrijk) - Tel: +32 (0)3 239 54 67 - Fax: +32 (0)3 281 62 11 -

Erkenningsnummer KMO-Portefeuille: DV.O100387

BTW-nummer: BE 0456.352.435