Bestand aanmaken

Tip: Een animated GIF maken voor het web. In deze tip ziet u hoe u met behulp van Adobe Photoshop een geanimeerde afbeelding (animated GIF) kunt maken voor het web.

Ik maak voor het voorbeeld in Photoshop een nieuw bestand aan van 90 x 90 pixels (72dpi) maar in principe kan dit met iedere afmeting afbeelding. Houd er wel rekening mee dat een grote geanimeerde GIF afbeelding erg groot kan worden qua bestandsformaat en dat dit dan een (te) lange laadtijd met zich mee zal brengen.

Blog post 002 - animated-gif- schermafbeelding 2Lagen

Als eerste moet u de achtergrondlaag omzetten naar een gewone laag want de achtergrondlaag kan niet omgezet worden naar een geanimeerde GIF. Om dit te doen klik je nadat je de achtergrondlaag hebt geselecteerd op het kleine hamburgermenu van het lagen palet en kies je voor ‘Laag uit achtergrond’. Je kan ook ‘control’ + ‘klikken’ op de laag als je efficienter wil.

Ik heb deze laag ‘Laag 1’ genoemd en vervolgens nog zeven andere lagen aangemaakt. Elke laag is straks een frame in de animatie.

Op elke laag heb ik een zwart kader van 30 x30 pixels gemaakt, steeds op een opvolgende positie binnen een 3 x 3 stramien.

Tijdlijn

Nu je alle lagen hebt kan je beginnen met de tijdlijn, deze open je via het menu ‘Venster’ > ‘Tijdlijn’.

Klik vervolgens op de tekst ‘Videotijdlijn maken’

De lagen komen nu op de tijdlijn te staan.

Omzetten

Versleep de paarse balken nu dusdanig dat ze elkaar niet meer overlappen. In mijn geval heb ik steeds een inspringing en een lengte van 3 seconden gedaan. De lengte maakt nu nog niet uit, deze stellen we op een later tijdstip in.

Kies vervolgens via het hamburgermenu van het tijdlijn venster voor ‘Frames omzetten’ > ‘Omzetten in frameanimatie’.

Frames

Nu zie je in de tijdlijn de frames van de animatie staan, je kunt hier per frame instellen wat de duur is waarin het frame getoond zal worden en je kan ook aangeven of de animatie altijd moet door blijven lopen (loopen), 3x de reeks afloopt of dat het maar een enkele reeks is. In dit voorbeeld heb ik de duur per frame ingesteld op 5 seconden en blijft de animatie zich altijd herhalen.

Exporteren

Nu kan je de GIF exporteren via het menu ‘Bestand’ > ‘Exporteren’ > ‘Opslaan voor web (verouderd)’.

Zorg er voor dat je GIF kiest en probeer zo min mogelijk kleuren mee te geven, hierdoor blijft de animatie zo klein mogelijk qua bestandsformaat.

Resultaat:

Een (animated GIF) maken voor het web - Animated GIF klein
In deze tip ‘Tip: Een animated GIF maken voor het web’ is gebruik gemaakt van de Nederlandse versie van Photoshop, het kan zijn dat de gebruikte termen niet goed zijn vertaald naar de Engelse taal. In toekomstige tips zullen we trachten steeds de qua taal overeenkomende versie van Photoshop te gebruiken.