1

2

Inhoud sopgave Woord vooraf .....................................................................................................................................3

De 2.5d-animatie: Dynamiek vs. Stilstand............................................................................................4

De 2.5d-animatie: Natuurlijke beweging vs. Digitale mimiek ...............................................................6

Criteria: Aan welke punten moet jouw afbeelding voldoen? ...............................................................7

Adobe Photoshop: Het opdelen van de afbeelding ..............................................................................8

Adobe After Effects: Het animeren van de afbeelding ....................................................................... 14

Bronnen ............................................................................................................................................ 17

file:///C:/Users/naam/Documents/School/PNM/Storial.docx%23_Toc377754728file:///C:/Users/naam/Documents/School/PNM/Storial.docx%23_Toc377754729file:///C:/Users/naam/Documents/School/PNM/Storial.docx%23_Toc377754731

3

Woord vooraf

Een foto zorgt ervoor dat een moment voor altijd vastgelegd wordt en op een bepaalde manier altijd

herbeleefd kan worden. H blijkt dan

ook vaak van toepassing wanneer herinneringen opgehaald worden aan de hand van zelf geschoten

plaatjes. Toch hebben deze afbeeldingen n ding gemeen: ze bestaan uit een statisch, vlak beeld en

zijn een representatie van n uniek moment in de tijd. Hoe scherp de foto ook mag zijn, soms doet

de statische eigenschap af aan de dynamiek en levendigheid in de foto. Met behulp van digitale

gereedschappen wordt het echter mogelijk om deze stilstaande fotos te transformeren tot een 2.5d-

animatie om ze zo van een natuurlijke diepte en beweging te voorzien. In deze storial wordt

Allereerst wordt er echter aandacht besteed aan de functie van 2.5d-animaties: wat zijn dit voor

afbeeldingen en wat voor rol kunnen zij vervullen binnen het hedendaagse media- en

marketinglandschap? Daarnaast is er ruimte voor filosofisch gedachtegoed omtrent de paradox die

de digitale constructie van een natuurlijk ogend beeld betreft. Het tweede, praktische gedeelte van

dit document beslaat het stappenplan dat je in staat stelt om zelf een vlakke afbeelding tot een 2.5d-

animatie te transformeren met behulp van p CS5 en

Adobe After Effects CS4. Een aantal , ook wel

screencasts genoemd. W

tutorial goed te volgen. Voor aanvullende videotutorials kun je hoe dan ook gebruik maken van de

bronnenlijst die dit document afsluit. Hier zijn ook

zien hoe mooi het 2.5d-animatie-effect kan zijn. Het proces achter het ontstaan van deze storial is te

vinden op mijn Tumblr-pagina, waar je mij tevens kan contacteren wanneer je vragen heb tijdens het

volgen van dit document. Ik wens je veel plezier met het maken van jouw 2.5d-animatie!

- Marileen Driesprong

http://marileenmaakteenstorial.tumblr.com/

4

De 2.5d-animatie: Dynamiek vs. Stilstand

De 2.5d-animatie kan gezien worden als een optische illusie die binnen de film- en fotografiewereld

tot stand komt. Wie regelmatig het internet gebruikt is hoogstwaarschijnlijk bekend met .gif-plaatjes;

naar hun extensie vernoemde, bewegende afbeeldingen die op herhalende wijze een stukje clip van

een langere video laten zien. Een andere vorm van de geanimeerde afbeelding vertaalt zich in de

zogenaamde cinemagraph: een stilstaande afbeelding waarbinnen slechts n element subtiel

bewegend is gemaakt (Vescia, 2014, p. 82). Wat de 2.5d-animatie van deze twee afbeeldingsoorten

onderscheidt, is het feit dat gifs en cinemagraphs vanuit filmbeeld worden vervaardigd. Een 2.5d-

animatie wordt echter vervaardigd uit tweedimensionaal fotobeeld. De uitdaging die het maken van

met zich meebrengt, vloeit dan ook voornamelijk voort uit dit gegeven. Vanuit vlak

beeld wordt middels digitale bewerkings- en animatietechnieken de optische illusie gewekt dat het

beeld een derde dieptedimensie bevat (Oh, 2009a). Alhoewel 2.5d geen bekende term is, beslaat het

een techniek die ontzettend veel wordt toegepast in platformgames zoals de bekende Mario- en

Sonicspellen. Ook Google past deze techniek toe in de Streetview-functie, waarin vlakke

panoramabeelden tot 3d-ogende beelden worden getransformeerd (Oh, 2009b) (zie afbeelding 1).

Daarbij wordt het effect toegepast in de film The kid stays in the picture (2002). Een ander voorbeeld

wordt gevonden in het werk van professioneel filmmaker en digitaal kunstenaar Joe Fellows. Hij mixt

deze techniek met een zogenaamd Parralax-effect in diverse werken, waaronder zijn

indrukwekkende project in opdracht voor het Wereld Natuurfonds. In deze clip legt hij uit hoe hij dit

soort animaties maakt. Naar mijn inzien legt hij dit echter veel te snel en niet gedetailleerd uit.

De 2.5d-animatie is niet alleen om haar esthetische verwondering het hoofdonderwerp binnen deze

storial. Wanneer er nagedacht wordt over de betekenis van het effect kan namelijk gesteld worden

dat het metafoor staat voor beweging of het gebrek daaraan binnen onze maatschappij. Kijk eens

om je heen. Als het goed is, zijn er tientallen mediakanalen in je directe omgeving zichtbaar, zoals

een smartphone, een televisie, tijdschriften en niet te vergeten: deze storial. Dit zijn allemaal dragers

van bepaalde beelden, welke steeds scherper, vloeiender en spectaculairder worden gemaakt. Denk

hierbij bijvoorbeeld aan populaire films die heel vaak in 3d- of Imaxversie te zien zijn. Voor deze film

hoef je overigens niet eens meer het rode pluche van de bioscoop te bezoeken: dankzij draagbare

Afbeelding 1: Bekende toepassingen van de 2.5d-animatietechniek

http://www.youtube.com/watch?v=HxVwAKxg1MQ#t=31http://www.youtube.com/watch?v=VQfgtUw4Vtchttp://www.youtube.com/watch?v=ZVrYyX3bHI8

5

devices als de iPad en Google Glass, zijn de beelden overal te bekijken. Uit deze korte schets blijkt dat

mediabeelden elkaar in rap tempo opvolgen en in steeds snellere, kortere impulsen bij ons

binnenkomen via technologien die dit anywhere, any place, any time mogelijk maken. Het blog

Youngworks heeftde afgelopen jaren aandacht besteed aan dit fenomeen waarbinnen voorname

jongeren de dupe worden van (sociale) media als energie slurpende verplichtingen, ook wel

aan de constante stroom aan impulsen, vertaalt zich in lichamelijke en psychische klachten zoals

hoofdpijn door controleverlies en eenzaamheid door verlies van offline sociale contacten (Van den

Berg, 2013). Wanneer de digitale activiteit met de fysieke activiteit vergeleken wordt, wordt opnieuw

pijnlijk duidelijk dat intensief mediagebruik de gezondheid niet ten goede komt. Voornamelijk

jongeren, ouderen en mensen met overgewicht blijken steeds meer een sedentaire levensstijl aan te

nemen waarbij zij veel tijd achter de (spel)computer of televisie doorbrengen (Hildebrand, Bernaards

en Stubbe, 2013). In 2012 stelde het CBS dan ook vast dat 6,5 miljoen Nederlanders te zwaar zijn.

(Groot en Brennink, 2012).

Op dit punt vraag ik mij af: zouden digitale technologien die dit maatschappelijke probleem mede

veroorzaken, ook ingezet kunnen worden om dit probleem aan te pakken? Wanneer er gekeken

wordt naar bedrijven binnen de sport- en fitnessindustrie, is te zien dat velen van hen hun producten

promoten door op hun website gebruik maken van stilistische, scherpe, sportieve afbeeldingen (Zie

afbeelding 2).

Afbeelding 2: Recente internetcampagne van Nike waarbij een dynamische beweging gevangen wordt in statisch beeld

Wat echter opvalt is dat deze afbeeldingen, hoe dynamisch dan ook, geen daadwerkelijke beweging

vertonen. Een 2.5d-animatie zou uitkomst bieden om deze afbeeldingen op een natuurlijke manier te

laten bewegen. Het bewegingselement zou op deze manier een visualisatie kunnen vormen met een

motiverende voorbeeldfunctie deze

document te begeleiden aan de hand van een foto die naast dynamiek ook sportiviteit en gezondheid

uitstraalt.

Samengevat kan de 2.5d-animatie gezien worden als een representatie van een natuurlijke beweging

zoals wij die kennen. Deze representatie bestaat echter uit een op zichzelf staande, door mensen

gecreerde digitale wereld. Wanneer digitaal beeld vanuit deze ooghoek bekeken wordt, zien we dat

de film en fotografiewereld onze perceptie van waarheid op de proef stelt. David Rodowick houdt

zich bezig met dit fenomeen. Voordat het tutorialgedeelte binnen deze storial van start gaat, besteed

ik in het volgende hoofdstuk kort wat aandacht aan het interessante gedachtegoed van deze filosoof.

6

De 2.5d-animatie: Natuurlijke beweging vs. Digitale mimiek

In zijn boek The virtual life of film (2007) visualiseert Rodowick het digitale beeld als een new

landscape without an image 96). Omdat er zoveel digitale bewerkingen op een beeld

worden losgelaten alvorens het aan het publiek wordt vertoond, is het onduidelijk of de beelden die

wij zien zich daadwerkelijk in het verleden hebben voltrokken. In ander woorden: computers en de

nieuwe mediaproducten die ermee vervaardigd worden, laten ons nadenken over de oorsprong of

waarheid van beelden (p. 131). Zo ook de 2.5d-animatie, een product dat vol zit met paradoxen en

misleidingen. Dit begint al bij de afbeelding op zich: dankzij haar digitale identiteit staat ze open voor

iedereen met een bewerkingsprogramma om aanpassingen door te voeren en er zo een nieuwe

betekenis aan toe te kennen (p. 134). In dit geval wordt een natuurlijke beweging digitaal

omgevormd tot een statisch beeld, om dit beeld vervolgens te onderwerpen aan technieken die het

weer van een natuurlijke beweging voorzien. De definitie van tijd en ruimte worden eveneens

volledig opnieuw ingedeeld. Tijdens het volgen van de tutorial zul je merken dat je allereerst een

moment in de tijd laat bevriezen, waarna je de ruimte binnen dit moment digitaal opdeelt, om deze

delen vervolgens van een nieuwe soort tijdsspan te voorzien. Het eindproduct wat jij aan de hand

van deze storial zal vervaardigen, bestaat volgens Rodowick dan ook uit niets meer dan simulaties en

informatie

gebruik maken van traditionele mediavormen zoals video om zichzelf zichtbaar en begrijpelijk te

maken (p. 97). Via manipulatie van digitale geometrie en lineair perspectief streeft men naar een

soort digitale mimiek, waarbij ze ernaar streeft de natuur zo goed mogelijk na te bootsen of zelfs te

overtreffen (p. 101). In het animatiegedeelte van de tutorial zal je zien dat dit gegeven opgaat voor

de 2.5d-animatie: je creert namelijk beweging doormiddel van het aanpassen van de x-as, y-as en z-

as (de derde dimensie).

Zoals uit deze sectie duidelijk wordt, schuilt er veel meer achter het vervaardigen van een 2.5d-

animatie dan het transformeren van een stilstaand tot een bewegend object. Probeer tijdens het

volgen van de tutorial dan ook te bedenken dat je niet alleen een afbeelding, maar ook een stukje

realiteit of waarheid omvormt ! Voordat je dit gaat doen, raad ik aan om een mooie foto te maken of

uit te zoeken die voldoet aan een aantal criteria. Deze zijn te vinden op de volgende bladzijde.

7

Criteria: Aan welke punten moet jouw afbeelding voldoen?

1. Voldoende depth of field

Bijna iedere afbeelding is opgebouwd uit een voorgrond, een middengrond en een achtergrond

(afbeelding 1). De afstand tussen deze lagen wordt binnen de fotografie- en filmwereld ook wel

scherptediepte of depth of field genoemd. Wanneer het menselijk oog zich focust, kan het zich

scherpstellen op een object dat voorbij f dat juist ver weg is. Om dit natuurlijke effect digitaal na te

bootsen is het van belang dat er zich voldoende afstand tussen de lagen bevindt, zodat er voldoende

ruimte is om een 3d-diepte-element te creren. Dit gebeurt door tijdens het fotograferen een

zogenaamde selectieve focus toe te passen (Bordwell en Thompson, 2010, pp. 177 178). Dit

resulteert in een scherpere midden- en voorgrond en een wazige achtergrond. Waarom

laatstgenoemde in je voordeel is tijdens het bewerken, wordt duidelijk bij het volgende punt.

2. Voldoende rust in de achtergrond

immers diverse objecten uit, waardoor er gaten in de achtergrond vallen. Wanneer je je animatie

natuurlijk over wilt laten komen, moeten deze gaten weer worden opgevuld met de behouden

elementen uit de achtergrond. Het is hierbij van belang dat deze elementen niet te complex zijn,

omdat het opvullen anders resulteert in een onnatuurlijke, zichzelf herhalende achtergrond. Dit

herhalende valt veel minder op wanneer de achtergrond uit simpele vlakken bestaat. Vermijd

bijvoorbeeld een drukke winkelstraat, maar kies voor een rustig geheel zoals een grasveld of een

blauwe lucht.

3. Voldoende contrasterende elementen

Dit criterium hangt samen met punt twee: waar de achtergrond simpel en wazig moet zijn, moeten

de midden-en voorgrond heldere objecten bevatten die zich duidelijk onderscheiden van de

achtergrond. Met een opvallende kleur onderscheiden ze zich nog meer van de achtergrond. In de

voorbeeldafbeelding heb ik dan ook gekozen voor een felroze shirt en feloranje mandarijnen.

4. (Optioneel) Voldoende beweging of actie

Omdat het eindproduct resulteert in een animatie, komt dit het mooiste tot zijn recht wanneer de

afbeelding daadwerkelijk een bepaalde beweging representeert. Binnen de voorbeeldafbeelding heb

ik gekozen voor de beweging van het gooien van mandarijnen richting de camera.

Beschik je op het moment niet over een foto die aan deze criteria voldoet, maar wil je toch direct aan

de slag met de tutorial? Dan kun je de afbeelding die ik als voorbeeld gebruik, hier downloaden.

http://postimg.org/image/o3bxhzx9v/

8

Tip vooraf: Wanneer je een afbeelding met zeer grote afmetingen bewerkt (bijvoorbeeld 5000 bij

3000 pixels), kan dit erg veel van het werkgeheugen van je computer vragen, wat je werkproces

verlangzaamt. In dit geval kun je je afbeelding allereerst een slagje (ongeveer 20 procent)

verkleinen in Photoshop om vervolgens met deze verkleinde versie aan de slag te gaan. Dit proces

wordt uitgelegd in deze video.

Adobe Photoshop : Het opdelen van de afbeelding

Stap 1 Het inladen van het bestand

Wanneer je een foto hebt gemaakt (of hebt gekozen via het internet) die voldoet aan de

eerdergenoemde criteria, is het tijd om aan de slag te gaan met Adobe Photoshop. Start het

programma op en importeer je afbeelding vanuit de locatie waar jij hem hebt opgeslagen door in de

linkerbovenhoek op Bestand en vervolgens Openen te klikken. Zoek je foto via het menu dat nu

weergegeven wordt en klik op Openen. Je afbeelding is nu klaar om bewerkt te worden!

Stap 1.1 Het opslaan van het bestand

Deze stap is wellicht de belangrijkste binnen deze storial: sla je bestand nu alvast op! Zo weet je

zeker dat er altijd een recente versie van jouw project terug te vinden is; Photoshop doet namelijk

niet aan automatische back-ups. Opslaan werkt eenvoudig: Gebruik de toetsencombinatie

Ctrl+Shift+S, geef je bestand een naam en sla het op als Photoshopfile (.psd). Vergeet tijdens je

werkproces niet regelmatig de toetsencombinatie Ctrl+S in te drukken om er zo zeker van te zijn dat

je proces wordt opgeslagen.

Stap 2 Het maken van een basis

Je afbeelding bevat een voor- midden- en achtergrond(object). In het geval

van de voorbeeldafbeelding vormen de mandarijnen de voorgrond, ikzelf

de middengrond en het park de achtergrond. Het is de bedoeling dat deze

lagen van elkaar gescheiden worden door ze uit te knippen. Alvorens je dit

doet, dupliceer (kopieer) je je afbeelding zodat het origineel behouden

wordt. Hierdoor kun je altijd terugvallen op de onaangetaste afbeelding

wanneer je een fout maakt tijdens het knippen! Het dupliceren werkt

middels het venster in de onderste rechterhoek (zie afbeelding 3).Klik met

de rechtermuisknop op de laag, selecteer Laag dupliceren en klik op Ok.

Selecteer hierna de originele laag en klik daarna op het slotjes-icoontje:

dat zich bovenin het venstertje begeeft; deze functie voorkomt dat je

per ongeluk in je originele afbeelding knipt. Geef deze en alle andere lagen die je gaat creren een

herkenbare naam zodat je overzicht over deze lagen houdt. Dit doe je door dubbel te klikken op de

naam van de laag en deze een naam naar keuze te geven, zoals Origineel en Achtergrond.

Afbeelding 3: Het lagenvenster

http://www.youtube.com/watch?v=Ugf348jQtVg

9

Stap 3.1 Het scheiden van de lagen

Hier begint het echte werk: het uitknippen van de voor-

en middengrond vanuit de achtergrond. Hiervoor biedt

Photoshop kniptools aan, die zich in de verticale

toolbar aan de linkerkant van het scherm bevinden: het

selectiekader, waarbij hoekige of ovale stukken

uitgeknipt kunnen worden, de lassotool waarbij er een

vrije selectie naar keuze gemaakt kan worden, en de snelle

selectietool, waardoor bepaalde vlakken die overeenkomen in

kleurtoon in n keer geselecteerd kunnen worden. Er zijn diverse

manieren om met behulp van deze tools een selectie te maken en de maskeringstechniek die ik hier

uitleg is er n van. Deze techniek laat je bepaalde delen van een afbeelding selecteren en zorgt

ervoor dat ongewenste delen uit de selectie blijven. Ze is uitermate geschikt wanneer de achtergrond

en het object dat je wilt uitknippen geen sterk contrast met elkaar hebben (Spooner, z.d.). Wees er

allereerst zeker van dat je de gedupliceerde laag geselecteerd hebt door erop te klikken. Vervolgens

maak je een selectie van datgene wat je uit wil knippen. Deze selectie hoeft niet heel precies te zijn;

dit wordt later opgelost. In dit geval heb ik dat gedaan met de lassotool door simpelweg deze tool

aan te klikken en vervolgens om mijzelf heen te klikken en op het einde dubbel te klikken zodat de

selectie n geheel wordt. Vervolgens druk je de Q-toets op het toetsenbord in, waarna het stuk dat

niet tot je selectie behoort rood wordt (zie afbeelding 4). Op deze manier kun je precies zien wat er

wel en wat er niet bij de selectie zit.

Afbeelding 4: Het ruw uitknippen en de selectie daarvan

Stap 3.2 Het nauwkeuriger selecteren van de lagen

Een tekentablet komt goed van pas bij deze stap. Dit

apparaat stelt je in staat om heel precies diverse delen te

selecteren. Beschik je niet over een tekentablet, dan is

het aan te raden om zo ver mogelijk in te zoomen tijdens

het selecteren. Dit doe je doormiddel van de

toetsencombinatie Ctrl + (plusteken). Met de

toetsencombinatie Ctrl (minteken) zoom je weer uit.

Schroom niet om in te zoomen tot 400%, het is hierbij

http://www.youtube.com/watch?v=ZqcsBKdlZRQ

10

daadwerkelijk van belang dat er nauwkeurig gewerkt wordt (zie afbeelding 5).

Afbeelding 5: Nauwkeurig werken op gedetailleerd niveau

Je kunt nu het rode gedeelte verder uitbreiden met de penseeltool of juist laten verdwijnen met de

gumtool: . Linksboven in het scherm kun je de vorm en de grootte van deze tools aanpassen

door op het drop down menu-pijltje te klikken: . Ik raad aan om een tool met een zachte rand

te gebruiken, omdat dit een natuurlijker effect geeft dan wanneer je met een hardere tool het rode

vlak te lijf gaat: in de realiteit bestaan objecten immers ook niet uit cartooneske harde lijnen. Voor

het mooiste resultaat ga je te werk met een kleine tool, afwisselend van 20 tot soms zelfs maar 1

pixel.

Stap 3.3 (Optioneel) Het haar uitknippen

Wanneer jouw afbeelding een persoon in actie omvat, is er een grote kans dat zijn of haar haar alle

kanten opvliegt. Haar is een erg dynamisch object: het heeft geen duidelijke lijnen en bestaat uit een

tal van segmenten die het uitknippen tot een lastig priegelwerk kunnen maken. Toch is het hier de

bedoeling dat je het haar niet af-, maar uitknipt. Wanneer de achtergrondkleur genoeg verschilt van

het haar (helaas is dat in de voorbeeldafbeelding nauwelijks het geval) kan dit monnikenwerk aan

Photoshop overgelaten worden doormiddel van het inzetten van de randverfijningstool.

Stap 3.4 Het maken van een masker

Wanneer je er zeker van bent dat je je object nauwkeurig hebt geselecteerd, is het tijd om hier een

masker van te maken. Selecteer je object doormiddel van de snelle selectietool. Hier merk je direct

of je voldoende hebt uitgeknipt: deze tool selecteert precies datgene wat volgens jou behouden

moet blijven (het niet-rode gedeelte). Wanneer je je object geselecteerd hebt, klik je op het

http://www.youtube.com/watch?v=zasQMevzIGg

11

maskericoontje dat zich bevindt in het onderste gedeelte van het venstertje waar zich ook de

lagen bevinden. Als het goed is, kun je nu met je muis het zojuist gemaskeerde objectlaag over je

beeldscherm slepen (zie afbeelding 6). Geef ook deze laag een naam door er dubbel op te klikken.

Afbeelding 6: Het opdelen van de lagen resulteert in bijzondere effecten

Bovengenoemde stappen 3.1 t/m 3.4 kun je vanaf nu herhalen om ook de voorgrondobjecten los te

knippen. Wees er hierbij zeker van dat je dit doet vanaf de achtergrondlaag door deze aan te klikken

in het lagenvenster aan de rechter onderkant van het scherm.

Stap 4 Het terug-tekenen van de achtergrond

Nu je de voor- en middengrondobjecten van de achtergrond hebt

losgeknipt, resteert er een probleem: ze zijn ook nog op de

achtergrond te zien! Het is nu de bedoeling dat deze objecten

worden weggewerkt met behulp van de kloonstempel die zich

in de toolbar bevindt. Allereerst maak je de voor- en

middengrondlagen onzichtbaar door in het lagenvenster op de

oogjes te klikken naast de lagen die hierbij horen. Dit zorgt

ervoor dat je enkel zicht hebt op je achtergrond. Vervolgens

selecteer je de kloonstempel, waarvan je net als bij de penseel en gum, links bovenin de pixelgrootte

aan kan passen. Bepaal nu hoe de afbeelding eruit zou zien wanneer de voor- en

middengrondobjecten er niet geweest zouden zijn. In dit geval zou dit resulteren in een park met een

grasveld en bomen. In de voorbeeldafbeelding zorg je ervoor dat je cursor op het gras staat.

Vervolgens klik je hierop terwijl je Alt op het toetsenbord indrukt. Daarna beweeg je de muis heen en

weer over het object dat je weg wilt hebben en zie daar: het object verdwijnt! (zie afbeelding 7).