This roadmap is part of the cross-media training, developed by media-designer and lecturer Raoul Postel. Powered by Grafisch Lyceum Utrecht and DesignTrainingen.nl.

1. TYPO-GIF ANIMATIE
LEERJAAR 1
REALISATIE

2. MAAK EEN TYPO
GIF-ANIMATIE
MET PHOTOSHOP
animation, stopmotion, time

3. auteur: Raoul Postel
BRIEFING EN OPDRACHT
▸ Schrijf kort op wat de opdracht
inhoudt
▸ Maak een lijst van de producteisen
en specificaties, zoals: duur, formaat,
medium, kleurmodus
▸ Omschrijf het doel/thema
van de opdracht
▸ Omschrijf de doelgroep
▸ Krijg antwoord op vragen die je
nog hebt bij de opdrachtgever
▸ Stel de deadline vast
V
TYPO GIF ANIMATIE

4. auteur: Raoul Postel
IDEE & SCHETSEN
▸ Lees de aangeleverde tekst
▸ Google eigen gif-animaties ter
inspiratie met het doel/thema
als zoekterm
▸ Maak een lijstje van onderdelen
die er zeker in moeten komen,
zoals: titel, typografie, tekst
▸ Maak met potlood of pen kleine
schetsen van de layout (min. 10)
V
TYPO GIF ANIMATIE

5. auteur: Raoul Postel
LAGEN ADOBE PHOTOSHOP
▸ Maak een nieuw document aan en stel
het formaat, kleurmodus en resolutie in
volgens de specificaties
▸ Ontgrendel de achtergrond-laag en geef
een kleurvulling met het vul-gereedschap
▸ Elke laag wordt een frame in de animatie.
Dus maak voor elke gebeurtenis een laag
aan. Bouw nu per frame/laag de animatie
▸ Plaats met het het basis-tekegereed-
schap (rechthoek, cirkel) enkele
kleurvlakken en lijnen die een relatie
hebben met het thema: diapositief, lijnen,
vlakken, uitsparen
V
TYPO GIF ANIMATIE

6. auteur: Raoul Postel
ANIMATIE ADOBE PHOTOSHOP
▸ Werk per frame/laag de animatie uit
in vlakken, lijnen en teksten.
▸ Orden nu de lagen in de volgorde waarin
de animatie gaat afspelen
▸ Open het Animatie-venster
▸ Toon via het oogje in het lagen-venster
alleen de lagen voor frame 1 en maak een
nieuw keyframe in het animatie-venster
▸ Zet nu alle lagen voor frame 2 aan en maak
weer een nieuw keyframe. Herhaal deze
stappen totdat de gehele animatie staat
▸ Test tussendoor de animatie met
de playhead
V
TYPO GIF ANIMATIE

7. auteur: Raoul Postel
TYPOGRAFIE ADOBE PHOTOSHOP
▸ Plaats de tekst die is gevonden/aangeleverd.
▸ Kies een lettertype voor een paar grote
typografische woorden of zinnen. Door 1 x
met het T-gereedschap te klikken kun je een
paar woorden typen. Door te slepen ontstaat
er een tekstkader voor grotere stukken tekst
▸ Bepaal de grootte (corps) en regelafstand
(interlinie)
▸ Verplaats en transformeer de teksten grof
over het vlak. Zorg voor verschillende
groottes, zet enkele scheef en laat er een
paar overlappen
▸ Leg kleur-accenten in de tekst, zoals kleur via
de pipet, transparantie, tekst in wit uitsparen
V
TYPO GIF ANIMATIE

8. auteur: Raoul Postel
CORRECTIES & EXPORTEREN
▸ Controleer de animatie op:
Ritme in de animatie, Snelheid (niet te
snel, niet te langzaam)
▸ Selecteer alle frames en exporteer de
animatie in Animated Gif
▸ Test de animatie door het gif-bestand in
de browser te slepen.
▸ Bespreek dit met de opdrachtgever
▸ Na goedkeuring plaats je
de animatie online, bijvoorbeeld
op www.giphy.com
V
TYPO GIF ANIMATIE