CASE 12018-06-27T13:52:55+00:00

CASE 1

Maken van een cinemagraph en ontwerp bus bestickering

Alkmaar kozijnen

Oriëntatie

Dit is een klant die het vet vindt om nieuwe dingen in zijn website te hebben. Dit wilde we doen door te openen met een coole slider die beweegt, maar ook een cinemagraph leek ons een goed idee. Dit is een combinatie van foto en video. Je ziet namelijk een foto waarin een klein deel blijft bewegenen. Het maakt de website even wat anders dan alleen een foto op de achtergrond. Ik heb op youtube een filmpje gevonden met een duidelijke uitleg. Deze is van Peter McKinnon. Hij legt hierin stap voor stap uit hoe je een cinemagraph kunt maken in photoshop. Ik heb eerst een aantal voorbeelden van gemaakte cinemagraphs opgezocht, om te kijken wat mogelijk is. Bekijk het filmpje hieronder.

Na de keuze van de klant, waren nog een aantal aanpassingen nodig. Beide kanten wou hij symmetrisch en dat gaat lastig als de bus dit niet is. In overleg met de klant aan de telefoon zijn we er uiteindelijk uitgekomen. Het ontwerp is naar het bedrijf gestuurd voor het bestickeren.

Alkmaar kozijnen

Oriëntatie

Dit is een klant die het vet vindt om nieuwe dingen in zijn website te hebben. Dit wilde we doen door te openen met een coole slider die beweegt, maar ook een cinemagraph leek ons een goed idee. Dit is een combinatie van foto en video. Je ziet namelijk een foto waarin een klein deel blijft bewegenen. Het maakt de website even wat anders dan alleen een foto op de achtergrond. Ik heb op youtube een filmpje gevonden met een duidelijke uitleg. Deze is van Peter McKinnon. Hij legt hierin stap voor stap uit hoe je een cinemagraph kunt maken in photoshop. Ik heb eerst een aantal voorbeelden van gemaakte cinemagraphs opgezocht, om te kijken wat mogelijk is. Bekijk het filmpje hieronder.

Verzamelen van beeldmateriaal

De eerste stap is het maken van een filmpje. Om een statisch beeld te filmen heb je een statief nodig. De bedoeling is dat je een stukje filmt, waarin een klein onderdeel beweegt en de rest stil staat. Ik ga dit doen met het inschenken van een kopje koffie. Op de tafel zijn een aantal flyers en visitekaartjes te zien om het persoonlijk te maken. Zodra de koffie was gezet en de opstelling klaar stond, kon het filmen beginnen. Het lastige is dat je bij het inschenken zo min mogelijk moet bewegen, maar na een paar pogingen had ik uiteindelijk een filmpje waarmee ik aan de slag kon.

Maken van de cinemagraph

Met het filmpje van Peter McKinnon op mijn ene beeldscherm en mijn eigen filmpje geopend in Photoshop ben ik stap voor stap alles uit het voorbeeld aan het nadoen. Dit begint bij het zoeken in het videofragment naar een stukje waar de omgeving zo statisch mogelijk blijft en alleen de koffie uit de pot beweegt. Je knipt het filmpje zo dat je ongeveer 1 of 2 seconden hebt. Dan kopieer je dit fragment en plaats deze zo in de tijdlijn dat ze elkaar overlappen. Doordat het begin van het filmpje niet precies overeenkomt met het einde, moeten deze in elkaar overlopen. Dit kun je doen door de opacity in het begin laag te zetten en dan steeds hoger. Bij de instellingen zet je het fragment als loop, waardoor deze aan een stuk door blijft afspelen. Dan is de laatste stap om een laagmasker te maken en alleen het stukje waar de koffie stroomt laat je doorschijnen. Hierdoor is de omgeving nog statischer en beweegt alleen de koffie. Exporteer het filmpje als gif en je deze is klaar om op de website te gebruiken. Let er wel op dat het een niet te groot bestand wordt.

Plaatsen in de website

Omdat de cinemagraph als achtergrond wordt gebruikt, moet deze op de juiste formaten zijn. Er staat ook tekst overheen en om deze duidelijk leesbaar te maken, heb ik een donkere overlay over de cinemagraph geplaatst.  De achtergrond moet ook op alle schermen zichtbaar zijn en heb ik daarom zo ingesteld dat je het bewegende deel overal kunt zien.

Bekijk de website