Digitalt produkt

Novonesis webshop video

Introduktion

I forbindelse med udrulning af det nye Novonesis brand er der lavet en række merchandise som sælges på den nye webshop, som Novonesis medarbejdere får mulighed for at købe. For at gøre opmærksom på den nye webshop, laves der en video som viser nogle eksempler på merchandise samt en Call To Action som skal henvise til den nye webshop.

Bemærk:
De grafiske elementer som logo, font, farver og former er udarbejdet af et eksternt designbureau. Derfor er designprocessen for disse ikke relevant.
Se Bilag 2 for uddrag af brand guideline. Opgaven er fiktivt.

Brief

Der laves en video i to versioner: En med og en uden lyd/musik. Videoen vises på intranettet og infoskærme. Da infoskærmene ikke kan afspille lyd skal videoen kunne fungere uden. Videoen skal indeholde eksempler på merchandise som folk kan købe. Videoen skal være i formatet 16:9.

Grafisk design

Målgruppe

Målgruppen er medarbejdere i Novonesis, i alderen fra slut 20’erne og op til 50’erne. Minerva-modellen er ikke relevant, da medarbejdere skifter segment, alt efter hvilken afdeling de kommer fra. F.eks. har personer som arbejder i produktion overvægt af det traditionelle (rosa og violet segment), mens personer som arbejder i ledergrupper, har en overvægt af det moderne (blåt og grønt segment). (1)

Farvevalg

Novonesis bruger to primære farver: grøn og blå og to sekundære farver: gul og rød. For at vise bredden i det nye design, er der valgt at vise produkterne i alle fire farvevarianter. De enkelte farver er tilgængelige i tre nuancer, en lys, en mellem og en mørk. Inden for et grafisk element, må der ikke bruges flere forskellige farver, men gerne flere nuancer af den samme farve. (2)

Flux og shapes

Flux:
Et billede bestående af forskellige farvegradienter. Når udsnit af flux billeder benyttes, er det vigtigt at overgangen fra lys farve til mørke farve er tydelig, men den mørke del må fylde max. 10%. (3)

Shapes:
Et vektorelement som skal forestille at være mikroorganismer zoomet ind. Formerne på de enkelte shapes er ikke ens. Dette er for at afspejle mikroorganismerne, som aldrig har den samme form eller størrelse. (4)

Gestaltlove

Loven om enshed/lighed:
Farverne på shapes skal matche det produkt,som følger bagefter. (5)

Loven om kontinuitet/forbundethed:
Man ser kun et udsnit af shapesene, men bevægelsen antyder for seeren, at de fortsætter uden for skærmen. (6)

Loven om figur og grund:
Denne lov er gennemgående i al shapes animation, men ses ekstra tydeligt i den blå shapesanimation, hvor den mørke baggrund skifter til mockup-billedet, mens shapesene stadig bevæger sig i forgrunden. (7)

Animationsstil

Animationerne skal reflektere de bløde og organiske bevælgelser på en mikroorganisme. For at opnå denne, bruges Simple Choker (After Effects effekt) på shapesanimationen og runde Line Cap til tekstanimationen. (8)

Da der bliver brugt statiske billeder til videoen, er det vigtigt at billedet også er i konstant bevægelse. Til dette er der brugt en blanding af position og scale animation. (9)

Se Bilag 4 for mockup der er lavet til videoen.

Billedbehandling

Opsætning af mockup

Mockup-billedet blev åbnet i Photoshop, og det sted som skulle maskes, blev markeret med Object selection tool. (1)

Der blev lavet Pixel mask på en ny mappe, så man kan tilføje det endelige design, skygger m.m. Masken fik feather på 0,7px for at undgå for skarpe kanter. (2)

Jeg lagde det endelige design i mappen som blev justeret for størrelse efter design guidelines. Designlaget blev behandlet med Blending mode: Multiply. Da billedet også skulle fritlægges og samles med andre mockups, blev selve originalbilledet lagt ind i mappen. (3)

Billederne fik skygger og highlights for at give følelsen af at alle varerne ligger ved siden af hinanden. Dette er gjort ved at lave et separat lag, hvor der tegnes skygger ved hjælp af brush tool med hardness på 0%. Herefter er laget givet Blending mode: Multiply mellem 20-30%. (4)

Elastikken på notesblokken skal fortsat være i hvid og ikke i flux farver. Derfor har den fået en maske for sig. Til dette er brugt Vector mask og indstillingen af masken til Exclude Overlapping Shapes. (5)

Sammenlægning

Bemærk: Opsætning af baggrundsbillede samt justering af lys og skygge på notesbog kan læses under kapitlet: grafisk produktionsforståelse.

For at baggrundsbilledet ville blive blendet naturligt ind med de andre mockups, blev farven på dette skiftet til grøn ved brug af justeringslaget Hue/Saturation, hvor colorize er sat til. (6)

Se endelig baggrund samt mockups enkeltvis under Bilag 3.

Herefter indsættes notesbogen samt de andre mockup-elementer.
For at gøre billedet mere virkelighedstro, blev der tilføjet skygger
mellem elementerne i et separat lag med Blending mode: Multiply. (7)

Herefter indsættes notesbogen samt de andre mockup-elementer. For at gøre billedet mere virkelighedstro, blev der tilføjet skygger mellem elementerne i et separat lag med Blending mode: Multiply. (7)

Grafisk produktionsforståelse

Planlægning og klargøring af filer

Storyboard:
Til denne opgave er der lavet flere storyboards, da jeg undervejs fandt ud af, at nogle animationer ikke fungerede i sammenhængen. Derfor blev storyboard rettet til undervejs. (1)

Her ses det endelig storyboard. Tidligere version ses under Bilag 1.

Klargøring af filer:
Illustrator filerne blev oprettet. Til shapes animationen lavede jeg et filformat på 1920×1080 (16:9) i skærmopløsning som er 72dpi. De fire shapes blev opsat i hvert sit lag for at kunne animere dem enkeltvis. (2)

Bogstaverne blev behandlet med Create outline, for at de kunne blive lavet om til Illustrator shapes og derved ligge i hver deres lag. Bogstaver som går
igen genbruges. (3)

Bogstaverne blev behandlet med Create outline, for at de kunne blive lavet om til Illustrator shapes og derved ligge i hver deres lag. Bogstaver som går igen genbruges. (3)

Mockup opsætning i Photoshop:
Til baggrund brugte jeg et stockbillede fra Adobe Stock som blev åbnet i Photoshop. Derudover oprettede jeg en separat fil med størrelsen 1920x1080px (72dpi), og kopierede stockbilledet over i det nye photoshop fil. Derefter justeredes baggrundsbilledet for lys og skygge. Da billedet ikke er i raw format og for at filen ikke bliver for tung bruges justeringslaget Brightness & Contrast fremfor f.eks. Camera raw filter. (4)

Pixelmasken på mockuppen skal give overskuelighed og kontrol over lagene, da de bliversamlet et sted. Desuden bliver det nemmere at bevæge og skalere mock up elementerne når de sammenlægges, da de er i en fritlagt tilstand. (5)

Animation

Mappestruktur:
Animationerne blev lagt i to forskellige mapper – Text animation og Shapes animation. Ved animation af tekster blev hvert enkelt bogstav animeret hver for sig i hver deres Pre-composition, som herefter blev samlet i mappen Letters. Hver gang et ord blev opbygget, blev dette også Pre-composed og lagt under mappen Words. Den endelige animation blev samlet i en separat Pre-composition. (6)

Composition settings:
Da videoen skulle kunne fungere på infoskærme(16:9) blev opløsningen sat til 1920 x 1080 med Frame Rate på 29,97. Lagene holdes som Illustrator layer, bortset fra i tilfælde hvor elementet skal bruges som en maske. (7)

Tekstanimation:
De enkelte bogstaver blev konverteret til Vector shape> Pre-compose. Vector shape for at man kan bruge dem til at maske og Pre-compose for at man ikke ender med uoverskuelige mængder af lag. Til animationen af selve bogstavet er der brugt Pen Tool og derefter Trim path, for at lave animationen så effektiv som muligt. Bogstavet bruges som maske til den path, man har lavet. (8)

Shapes animation:
Der er brugt Gaussian blur(Legacy) med blurriness på 30 og herefter Simple choker effekt på 50 for at skabe en væskeeffekt på shapesene, når de rammer hinanden. (9)

Eksportindstillinger

Videoen til infoskærmene er eksporteret ud i formatet H.264 Adaptive High bitrate uden lyd. Dette er for at få bedst mulig kvalitet, da videoen afspilles på store skærme. Videoen er eksporteret til intranettet i formatet H.264 Youtube 1080p Full HD med lyd. Men da filstørrelsen på videoen var for stor til webvisning, blev dette komprimeret ved hjælp af programmet Handbrake
(Bilag 5). (10)