Animation

Dette indlæg henvender sig ikke blot til dig, som er designer og illustrator, men også til jer, som er skrivende kolleger og fotograferende professionelle. Eksisterende historier, billeder og tekster kan få et “nyt liv” som animerede film på nye platforme.

Jeg er uddannet som tegner på Designskolen Kolding og i Basel og arbejder med illustration og infografik til publikationer, interaktion, temahjemmesider, motion design og animeret information.

Flere gange har jeg oplevet, at en opgave tænkt som en enkelt infografisk illustration til en artikel, nemt kunne omsættes til storyboard og dermed en lille film med elementer fra illustrationen.

Hvad med at bruge dit kreative materiale til at skabe nye spændende opgaver, og animerede fortællinger hos eksisterende eller nærliggende kunder?

Ovenstående er et eksempel på brochureillustration om medarbejderudvikling, jeg tegnede til Novozymes og som efterfølgende blev en lille film på deres hjemmeside. Den er animeret og eksporteret fra programmet Moho.

https://youtu.be/ofyZusDR7C0

Animation er et omfattende område og mange gange designet til en specifik platform, hvor publikum er. Min artikel følger dette billede:

Jeg vil dele animation op i tre hovedkatagorier:

(1) simpel flytteanimation og indblænding af elementer,

(2) “cut out”-animation af fritlagte, tegnede eller fotograferede figurer (South Park, Anna Anaconda),

(3) klassisk karakteranimation (Family Guy, Simpsons)

Animationer bruges indenfor:

- Domænehjemmesider (firmaer og institutioner)

- Sociale medier (Youtube, Facebook, Instagram)

- Præsentationer for levende publikum (Powerpoints, Keynotes)

- Tv (landsdækkende)

- Film (biograf)

De to sidste er ikke interessante, hvis du tænker i kunder, der ellers kun publicerer fotos, illustrationer og tekst.

Jeg vil ikke foreslå ét universielt værktøj til at producere animationer i, men nævne software, jeg selv bruger i mit daglige arbejde.
 

Animation til web
Jeg bruger Tumult Hype [ https://tumult.com/  ] til interaktive animerede elementer; html5-objekter eksporteret til hjemmesider og bannere, f.eks. Google AdWords.

I Hype arbejder man med timelines, typografi, knapper og animationer, importeret grafik og videoer, som man hurtigt lærer at tilpasse.

Med en enkelt linjes kode placeres animationerne i html’en eller i WordPress på den ønskede hjemmeside. Man kan sammenligne Hype med Adobe Animate bortset fra, at førstnævnte ikke er et program, man tegner i.

Programmet er mac-agtigt og nemt at gå til - og desværre kun til MacOS.

Infografikken på denne side [ http://raaskot.dk/raalab/ase/landingpage-12 ] har jeg produceret i Hype. Jeg har brugt scroll-animationer, hvor objektet registrerer, at brugeren ruller siden op eller ned på pc eller mobiltelefon.

Sparkle [ https://sparkleapp.com/  ] er et program til produktion af hjemmesider, hvor man ligeledes kan “scrolle” og fremkalde effekter. Hype-objekter placeres også her uden problemer. Her er et eksempel med simple rulle-effekter på rubrikker og grafik i et projekt, jeg producerede til DIIS [ https://www.diis.dk/trolde-i-dit-feed ].

Selvom Sparkle til Mac ikke er et “rigtigt” animationsprogram, nævner jeg det, da mange af jer kunne bruge det uden at hyre en programmør. Brugen minder om Pages og Keynotes, og du kan layoute og publicere responsive html-sider uden kode. Du  koncentrerer dig om indhold og layout og slipper for WordPress og hele dets enorme, langsomme backend. Færdigt site hentes hurtigt ind på dit publikums mobil, pc og tavle.
 

Sociale medier
Alle animationsprogrammer, der eksporterer video og evt. gif, er relevante. Faktisk kan man også eksportere video i Hype!

Programmerne findes som nævnt til tre animationskatagorier:

- simpel flytte og indblænding

- “cut out”

- karakter

Jeg foretrækker programmet Moho [ https://my.smithmicro.com/moho-debut.html ], som dækker det meste. I Moho, som også har en tegnefunktion, arbejder man med vektorgrafik og f.eks. png’er og psd’er i lag. Her kan man lægge armaturer ovenpå sine tegninger og få arme og ben til at bevæge på en tidslinie: En nem og hurtig måde at levendegøre “stills” på en cool måde.

Dette eksempel tegnede og animerede jeg i Moho til et konsulentfirma: [ https://youtu.be/fhnIHNzn6U4 ]

Blender [ https://www.blender.org/download/ ] er et 3d program, som bør nævnes, da nyeste version har en opdateret 2d-del, hvor man kan fremstille rumlige animerede frihåndstegninger. Jeg arbejder og instruerer i Blenders 3d-sektion og glæder mig til at prøve det af.

Til klassisk karakteranimation bruges et tegneprogram med “onion skin”-funktion, så man ser lagene nedenunder under arbejdet.

- Clip Studio Paint [ https://www.clipstudio.net/en ] har en masse smarte tegnefunktioner, du ikke finder i Photoshop

- Krita [ https://krita.org/en  ] - open source og mange brugere

- DigiCel Flip Book [ https://digicel.net ]. Et vildt anakronistisk UI, men ikke gnidret som i Adobes programmer. Bruges af animatorer på prominente studier i USA

- TVPaint [ https://www.tvpaint.com/ ] - pebret og oftest brugt i tv- og filmproduktioner    

- ToonBoom [ https://www.toonboom.com/ ] - ditto

– FireAlpaca [ https://firealpaca.com ] er glimrende til at tegne “keyframes”, som anvendes i Moho. Appen har næsten nøjagtigt samme tastaturgenveje som Photoshop, men UI er anderledes. Det starter lynhurtigt op, er nemt at forstå og uden timeline, men med en tidskontrol, så man afspiller lagene i sekvens.

Det er derfor glimrende til gif’er og sekvenser af stills til import i videoeditor, men ubrugeligt til videoeksport.

Til slut:

Animationer i præsentationer for levende publikum
Her tænkes på programmerne Powerpoint og KeyNotes. Der findes legio andre (Google Slides, Prezi, Open Impress), men jeg har mest erfaring med førstnævnte. Kunderne  arbejder selv i disse programmer og ønsker ofte mere tjekkede animerede elementer, man som professionel kan bidrage med.

I Powerpoint findes ingen timelines, men i stedet “timede begivenheder” eller “events”, som kan udløse nye begivenheder/animationer. Man skal derfor holde tungen lige i munden, men kan lave særdeles instruktive og spændende animationer af flytte- og indblændingstypen med et hav af overgangsmuligheder.

Mikael Skotting

http://raaskot.dk