Reklame – plakat og animasjon

Sist oppdatert 25. mars 2020 – Jon Hoem

Dere skal jobbe med ulike verktøy knyttet til forskjellige former for digital bildeskaping og jobbe frem mot to ulike formater:

  • en plakat

  • liggende eller stående A-format (med tanke på mulig utskrift på A4 eller A3 – merk: dere leverer digitalt)

  • Plakaten skal ha en tilknytning til det "produktet" dere jobber med. Det kan for eksempel være en form for "reklame", en form for infografikk, en bruksanvisning eller lignende.

  • et animert banner for web

  • du kan benytte samme format som plakaten, altså sideforhold ca 4:3.

Vi skal jobbe med teknikker der du gjenbruker mange av de grafiske elementene. Dette er med andre ord to deloppgaver som er knyttet nært til hverandre. Disse medieproduktene skal vise frem og/eller promotere et spill, som dere lager i en oppgave som går parallelt.

Plakaten skal ta opp i seg grafiske elementer eller en stil som kan knyttet til det spillet du designer. Vi bygger videre på plakaten når vi skal lage animasjonen.

Verktøy og teknikker

  • Google Slides

    • presentasjonsverktøy for samskriving. Se nedenfor hvordan dette kan brukes til å tegne.

    • Google Draw / Slides

    • tegneverktøy med muligheter for å tegne sammen

    • Tegne med Google Draw

      • lignende teknikk, men med et annet eksempel

Vektortegning - Plakatkunst

  • Google sine tegneverktøy lar oss tegne med vektorgrafikk (der de visuelle formene er beskrevet matematisk) og punktgrafikk (der det visuelle bildet er satt sammen av en mengde enkeltpunkter). Bildebehandlingsprogrammet Pixlr gir oss punktgrafikk.Les mer om filformater og konvertering

    • Pixlr

    • nettbasert bilderedigering, tilgjengelig i nettleseren via pixlr.com

    • Jobbe med lag i Pixlr

      • merk at Pixlr har kommet i ny utgave. Skal forsøke å lage en ny veiledning

To forskjellige typer digitale bilder

Litt om punktgrafikk og vektorgrafikk

Vektorgrafikk kan lagres som filformatet SVG. SVG brukes først og fremst for å beskrive vektorbasert grafikk for Internett og definerer selve bildet i XML – et spesielt tekstformat. Det betyr at SVG-bilder kan manipuleres i sanntid og lage alt fra svært enkle til ganske avanserte animasjoner.

SVG er på mange måter der grafikk møter 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 vektorbidler 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.

Vi skal først og fremst tegne egne vektorbilder ved hjelp av Google Presentasjoner eller Google Tegninger, men aller først skal vi gjøre oss noen erfaringer med hva vektorbilder er for noe.

    • Her ser vi tydelig noen av problemene (se teksten til høyre) 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

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.

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 raskt 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 at du kan lage mye rart – du må gjerne innom en del dårlig for å komme frem til noe som er bra. Du skal uansett bare velge ett bilde til slutt.

Animasjon

  • Fra presentasjon til animasjon

  • en gjennomgang av prosessen fra Google Slides til animasjon

  • Skjermopptak

    • 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.

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

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.

Dere kan se detaljene i den presentasjonen som er brukt.

GIF er et gammelt filformat som lagerer 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.

Del av katalogen

I katalogen skal dere reflektere omkring prosess, ikke bare sluttproduktet. En god katalog inneholder refleksjoner omkring hvordan prosessen står i relasjon ulike former for faglig input (pensum, inspirasjonskilder, diskusjon, etc) og hvordan dette påvirket sluttresultatet. Bilder og annen dokumentasjon fra prosessen vil gjøre det enklere for dere å gjenkalle og fortelle om dette.

Bakgrunnsmateriale

Kreativ prosess

Se gjerne gjennom denne før dere begynner idéarbeidet. Denne videoen er ganske tettpakket av nyttige tips knyttet til ideutvikling formidling og tenkning omkring målgruppe.

Dersom dere er interessert i å lære mer om hvordan en kan jobbe systematisk med ideutvikling knyttet til design of redesign (forstått som planlegging av noe en senere skal skape eller omskape konkret), ta en titt på "The Glass Wall". Dokumentet går gjennom en redesignprosess for BBCs nettsider. fra Dette er helt tilbake i 2002, men innholdet står seg ganske godt. Her jobber de både med modellpersoner ("personas") og moodboards.

Moodboards (kun tips - ikke obligatoisk)

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 diksutere.

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