Kipanimatie

Client: HvA
Klant: HvA
Opleveringsdatum: 5 april 2018
Categorieƫn: Illustration, Animation

Info

Een oefening in illustratie en animatie voor het web

Mijn doel bij deze opdracht was het maken van een sterk grafisch ontwerp in combinatie met een humoristische animatie. Deze wilde ik vervolgens laten zien in de browser.
De illustratie is opgebouwd uit geometrische vormen en hem een vrolijk, contrastrijk kleurenpalet te geven. De animatie heb ik gemaakt op een manier die goed bij de visuele stijl past. De gebruiker kan de kip drie acties laten uitvoeren: (proberen om te) vliegen, een ei leggen en.. er een kip zonder kop van maken.

Bekijk Website

Stijlen

Mijn keuze is uiteindelijk gevallen op de geometrische stijl omdat ik deze het meest origineel en het meest in balans vind.

Voordat ik bij mijn definitieve ontwerp kwam heb ik geƫxperimenteerd met verschillende visuele stijlen. In Adobe Illustrator heb ik drie verschillende ontwerpen gemaakt: een cartoon-achtige stijl, een origami-stijl en een geometrische stijl. Mijn keuze is uiteindelijk gevallen op de geometrische stijl omdat ik deze het meest origineel en het meest in balans vind.

De geometrische illustratie heb ik gemaakt door telkens te beginnen met een geometrische vorm; een cirkel, een vierkant of een driehoek en deze vervolgens zo min mogelijk te vervormen. Hierdoor krijgt de illustratie een hele strakke en moderne uitstraling. In de eerste versie heb de illustratie een geel/bruin kleurenpalet gebruikt. Deze vond ik wat ouderwets overkomen en heb ik gewijzigd naar een modern en vrolijk kleurenpalet.

Stijl1@2x-100
Stijl2@2x-100
Stijl3@2x-100

Techniek

Mijn favoriete programma om in te animeren is Adobe After Effects. Helaas is dat programma niet gemaakt om animaties voor in de browser te maken. Gelukkig kon ik voor dit project gebruik maken van Lottie, een libary gebouwd door Airbnb die het mogelijk maakt om After Effects animaties om te zetten naar Json data die kan worden afgespeeld in de browser.