Tamara Ursem   •   24 mei, 2018

Wat heb ik gedaan?

Het is alweer een tijdje geleden dat ik een blog heb geplaatst, dus er is genoeg om over te vertellen. Ik ga over een aantal opdrachten schrijven, hoe ik dit van begin tot eind heb gedaan. Vorige blog ging over het maken van websites, visitekaartjes en flyers. Ik heb er daarom voor gekozen om over nieuwe dingen te schrijven. Ik heb opdrachten uitgekozen, die voor mijzelf nieuw waren of waar ik zelf erg trots op ben.

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. Het is namelijk ook een van mijn leerdoelen om een cinemagraph te maken.  Dit 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. Op de site van www.alkmaarkozijnen.nl komt de vernieuwde site met de cinemagraph erin.

Fouten en oplossingen

Doordat ik het filmpje een aantal keer opnieuw heb gemaak en de koffie dan weer moest overgieten is het kopje een beetje vies geworden. Dit zag er niet zo netjes uit en heb ik daarom in de laag die er als laatst voor kwam een beetje weggeshopt. Alleen de kring in de tafel was lastiger om op een mooie manier weg te krijgen en heb ik daarom laten zitten. Voor de volgende keer zal ik beter opletten of alles nog netjes is voor op de film, dit scheelt later weer werk.

Alkmaar kozijnen

Oriëntatie

De bus van Alkmaar kozijnen was oranje en paste dus niet meer bij de nieuwe huisstijl. Een nieuwe bus stond al op de planning, maar een mooie bestickering hoort hier natuurlijk ook bij. Omdat de klant erg tevreden was over de website, moesten wij het bus ontwerp ook gaan verzorgen. Hij wil graag dat we ook de bovenkant van de bus doen, zodat in Amsterdam mensen van boven op zijn bus kunnen kijken. Ik ben op internet naar andere bussen gaan kijken om inspiratie op te doen.

Verzamelen van materiaal

Het logo en de fonts had ik al vanwege de website. Het type bus is bekend en daardoor heb ik van het bedrijf dat gaat bestickeren de templates voor het ontwerp ontvangen. Toen kon het ontwerpen beginnen.

Ontwerpen

De huisjes uit het logo zijn in de website verwerkt en daarom ook mooi om op de bus te doen, maar hoe dit het beste kon, was nog even puzzelen. Ik heb verschillende ontwerpen gemaakt, zodat de klant kan zeggen wat het beste bij hem past.

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.

Fouten en oplossingen

Doordat de bus schuine lijnen had en het logo best recht was, vond ik het lastig om dit goed op de bus te krijgen. De vormen van de bus moeten namelijk goed meelopen met het ontwerp. Ik heb uiteindelijk een deel van het logo losgetrokken en toen was het probleem opgelost. Ook was het lastig omdat de huisjes van het logo op de achterkant kwamen, maar het logo ook aan een kant die huisjes heeft. De huisjes en het logo konden elkaar daardoor niet overlappen. We hebben het ontwerp toen aangepast door het logo kleiner te maken en toen klopte het ontwerp helemaal.

De Beste Wijn Bij

Oriëntatie

Voor vakantieveilingen wou de klant 6 wijnen met recepten erbij aanbieden. Een leuk boekje met informatie over wijn en de recepten moest ontworpen worden in de stijl van De Beste Wijn Bij. De bedoeling is dat mensen hierdoor nog meer wijnen gaan bestellen. Ik heb hier ook een afbeelding voor in elkaar geshopt, zodat de mensen die het bestellen een beeld hebben bij wat ze krijgen.

Verzamelen materiaal

Micky heeft de teksten, recepten en foto’s bij de gerechten geschreven en verzameld. Aan mij de taak om mijn creativiteit te gebruiken in dit boekje. Het logo en de juiste fonts heb ik van Bas gekregen. Voor opvulling heb ik zelf nog foto’s van wijn gezocht.

Ontwerpen

De website en visitekaartjes heb ik gebruikt als basis. Dit moet namelijk wel overeenkomen met elkaar. De kleuren van het logo komen in het hele boekje terug. Ik heb verschillende wijnkringen in het boekje verwerkt om de leegte op te vullen. En ook een aantal getekende afbeeldingen om te breken met grote stukken tekst. Ik ben de tekst gaan plaatsen in het boekje en het opmaken ging eigenlijk vanzelf. De eerste opzet hebben we naar de klant gestuurd. Deze had een aantal opmerkingen, maar dat was vooral inhoudelijk met tekst en afbeeldingen. Toen er nog een aantal wijzigingen in de wijnen en recepten kwamen heb ik nog een aantal keer het boekje aangepast. Totdat uiteindelijk alles erin stond.

Controle

Ik heb samen met Micky het boekje nog een keer doorgelopen of alle wijnen bij de recepten goed waren en ook of er geen spelfouten of andere rare dingen verstopt waren. Dit is handig om samen te doen, omdat je zelf niet alles meer ziet.

Fouten en oplossingen

In het begin had ik geen rekening gehouden met het aantal pagina’s. Dit moet namelijk een veelvoud van 4 zijn, maar doordat er nog een aantal wijzigingen kwamen in de gerechten, kwam het uiteindelijk precies goed uit.

Conclusie

Ik heb weer veel nieuwe dingen geleerd. Vooral het maken van een cinemagraph vond ik erg leuk. Het is een soort combinatie van foto en film. Als je door hebt hoe het werkt, kun je hele gave dingen maken.  Een bus bestickering ontwerpen, was ook nieuw voor mij. Toen de klant weer op bezoek was, hebben we ook even goed naar de bus gekeken. Het is altijd leuk om het uiteindelijke product in het echt te zien.

Werkprocessen

B1-K1-W1: Bespreekt de opdracht
B1-K1-W3: Oriënteert zich op opdrachtgever/doelgroep/onderwerp
B1-K1-W5: Maakt een ontwerp
B1-K2-W1: Bereidt de realisatie voor
B1-K2-W3: Maakt de media-uiting
B1-K2-W4: Levert de media-uiting op
B1-K2-W5: Houdt het (digitaal) archief bij