Steps gif-animation Photoshop

8
TYPO-GIF ANIMATIE LEERJAAR 1 REALISATIE

Transcript of Steps gif-animation Photoshop

TYPO-GIF ANIMATIELEERJAAR 1 REALISATIE

MAAK EEN TYPOGIF-ANIMATIE MET PHOTOSHOP

animation, stopmotion, time

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

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

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

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

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

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