Plakat og animasjon

Sist oppdatert 30. mars 2020 – Jon Hoem

Vi kan jobbe med Google sine tegneverktøy, som du finner integrert i Google Tegninger og Google Presentasjoner (Slides). Disse verktøyene lar oss tegne med såkalt vektorgrafikk, samtidig som vi kan inkludere "vanlige" digitale bilder, satt sammen av en rekke punkter.

Litt om vektorgrafikk

Vi skal først og fremst tegne egne vektorbilder ved hjelp av Google Slides eller Google Tegninger, men aller først skal vi gjøre oss noen erfaringer med hva vektorbilder er for noe. Kort fortalt er vektorgrafikk bilder der alle elementene er beskrevet matematisk: punkter, lengder, vinkler, kurvatur.

Vektorgrafikk kan lagres som filformatet SVG (Scalable Vector Graphics). Navnet sier noe om egenskapen: grafikken er skalerbar, uten kvalitetstap. SVG brukes først og fremst for å beskrive vektorbasert grafikk for Internett og definerer selve bildet i XML – et spesielt tekstformat. SVG-bilder er altså beskrevet som kode, noe som betyr at kan de kan manipuleres i sanntid og lage alt fra svært enkle til ganske avanserte animasjoner.

SVG er der grafikk møter koding og programmering. Dere skal ikke lære å kode grafikk, men dersom du er interessert i hva dette går ut på kan du kikke på denne artikkelen samt en rekke konkrete eksempler.

Fordelen med vektorbilder at blant annet at filene ikke mister kvalitet når de zoomes eller endres. Samtidig kan hvert element i SVG-filen kan animeres, som vi skal se på senere.

  • Her ser vi tydelig noen av problemene ved skalering av punktgrafikk.

  • Åpne dette bildet i full størrelse som PNG (PNG er et format for punktgrafikk) eller se det som SVG (Scalable Vector Graphics)

  • Kikk gjerne på originalen i Google Tegninger – lag en kopi og se hvordan bildet er bygget opp

Til venstre ser vi hva som skjer når vi forstørrer opp et bilde med punktgrafikk. Dette skjer ikke når vi ser på det samme bildet som vektorgrafikk, rett og slett fordi vi ganger opp alle de aktuelle parameterene.

Tegne med Google Slides

Merk at jeg i videoen nedenfor setter presentasjonens størrelse til sideforholdene 4:3 (bredde høyde). Dette er ganske nært A-formatet, men ikke eksakt. Dere kan sette størrelsen til sideforholdet 210:297, som er A4-arkets mål i millimeter, eller 21.0 x 29.7 cm som er en av måleenhetene som brukes i Google Slides. Under menyen "Fil" og "Sideinnstillinger" kan du stille størrelsesforholdet akkurat slik du vil.

En av fordelene med å tegne i Slides er at det blir svært enkelt å lage kopier av en tegning. Det er bare å duplisere en ramme. Dermed kan dere kjapt eksperimentere med ulike løsninger. Det å lære seg til å prøve ut ideer raskt er ofte hemmeligheten for å komme videre i en kreativ prosess. Ikke vært redd for å lage mye rart – du må gjerne innom en del som rett og slett blir dårlig for å komme frem til noe som er bra.

Det er ikke så lett å se forskjellene på de ulike typene grafikk i videoen (som i seg selv er pikselbasert). Forskjellene kommer mer tydelig frem i eksemplene ovenfor.

Animasjon

Det er mange forskjellige teknikker for GIF-animasjon, men en av de enkleste metodene er ved hjelp av det nettbaserte verktøyet ezgif.com. Ezgif kan lage en GIF-animasjon med utgangspunkt i en rekke stillbilder, en kort video eller en PDF. Forsøk gjerne med PDF, siden dette bevarer vektorinformasjonen lengst mulig.

I Google Slides kan du eksporterer til PDF vil menyen "Fil" og "Last ned". Denne PDFen lan du deretter laste opp i EzGif.

GIF er et gammelt filformat som lagrer bildet som punktgrafikk og et begrenset antall farger. Kvalitetsmessig har det noen ulemper, men fordelen er at det også er et svært enkelt format for animasjon.

Dere kan se detaljene i den presentasjonen som er brukt.

  • Fra presentasjon til animasjon

– en gjennomgang av prosessen fra Google Slides til animasjon

er et alternativ dersom du lager en animasjon med mange bilder. Da kan det by på utfordringer å få laget en PDF. I så tilfelle kan det være en løsning å gå via en video, slik som vist nedenfor.

Kopi av Plakateksempel – vår 2020

En gjennomgang av prosessen med å lage animasjonen du ser ovenfor:

Moodboards for ideutvikling

Dere plasserer ulike grafiske elementer og stikkord inn i disse rammene. Bruk det til å fortelle noe mer om relasjonen mellom modellpersonen, den stilepoken dere jobber med og den/de gjenstandene dere skal presentere. Dette kan være en fin måte å la elever jobbe med ideutvikling, gjerne på store papirark som dere kan henge opp og diskutere.

Husk at dette er et verktøy i en kartleggings- og idefase, som i sin tur skal være med på å sette noen av premissene for den videre prosessen. Aksene på et moodboard gjenspeiler den oppgaven du ser for deg å løse. Du kan også lage flere ulike moodboards og slik sett danne deg et ganske koplekst bilde av rammene for den designoppgaven som dette skal være et verktøy for å løse.

https://docs.google.com/drawings/d/1HLERgsolz9d5kdk0anGO96pq_mHfEbObku2n9ri9iX8/edit?usp=sharing

Dere kan benytte malen linket til ovenfor, og jobbe med et moodboard dgitialt, eller f eks bruke nettbaserte verktøy som Padlet.com

Litteratur

Jorunn Veitebergs Den norske plakaten (Pax, 1998) https://www.nb.no/items/URN:NBN:no-nb_digibok_2008082700006