Vanessa Choe (500844416)
Blade Runner 2029 is een science fiction film dat over een LAPD-functionaris gaat die een samenzwering ontdekt van de android-werknemers die als personeel van de mensheid dienen. Zijn doel is om een voormalige agent te vinden die hem moet helpen in deze oorlog.
Ik ben als eerst begonnen met het onderzoeken naar de structuur van het css bestand en ben daarna gaan kijken wat er al aan 'animatie' was bij de sounds. Het eerste wat me gelijk opviel was de box-shadow bij sound 1 en 2. De box-shadow van sound 2 heb ik in de eerste instantie verandert naar de kleur rood, dit heb ik later toch weer aangepast naar de kleur wit, omdat rood slecht te zien is op zwart als achtergrondkleur en de kleur geen waarde toevoegt aan de scene.
Het font wat ik ga gebruiken voor de ondertiteling is 'Brenner Sans'. Brenner Sans heeft veel mogelijkheden in gewichten, waardoor je veel keuze hebt om ermee te experimenteren. Daarnaast is een Sans-Serif font beter leesbaar voor tijdens het film kijken, omdat het geen streepjes aan de uiteindes van de letters heeft.
Voor de ondertiteling ben ik eerst gaan experimenteren met de plaatsing van de tekst. Wil ik de ondertiteling buiten video plaatsen of in de video? Na wat onderzoek gedaan te hebben naar de ondertiteling van bijvoorbeeld YouTube video's en Netflix series/films, heb ik toch besloten om de ondertiteling te centreren en in de video te plaatsen net zoals de meeste video's/films/series.
Ignore conventions
Achteraf heb ik verder niet zoveel aan de de font-weight gedaan van de ondertiteling. Verschillende gewichten in de ondertiteling maken het voor de kijker juist moeilijker om de tekst te lezen en voegt dus geen toegevoegde waarde toe. Wat ik uiteindelijk heb gebruikt zijn deze regels voor css: font-style: Normal; font-family: "Brenner Sans"; font-weight:400;
- Hoe kan ik de ondertiteling het beste vormgeven?
- Hoe maak ik duidelijk in de ondertiteling dat er vanuit twee perspectieven wordt gesproken?
Study situation
Het eerste wat mij gelijk opviel was dat de achtergrond van de ondertiteling verschilde van licht naar donker. Wat zou betekenen dat een wit ondertiteling slecht zichtbaar zou zijn op een licht achtergrond en andersom op een donker achtergrond. Dit probleem heb ik opgelost door een een zwarte transparante vlak als achtegrond neer te zetten
Add nonesense
Dit probleem heb ik proberen te verhelpen door gebruik te maken van emoji's. In de video wordt er vanuit een speaker gesproken en vanuit de hoofdpersoon zelf. Wanneer er vanuit de speaker werd gesroken, heb ik voor elke zin een speaker emoji neergezet en wanneer er vanuit de hoofpdersoon werd gesproken heb ik een mannetje neergezet.
- Geel: het aangeven voor een plotpunt of nieuwe wending.
- Oranje: creeërt een gevoel van waarschuwing en voorzichtigheid. Oranje wordt vaak geassocieerd met transformatie.
- Groen: groen staat voor leven en levedigheid, wordt in de film ook vaak gebruikt wanneer Joi, K's robotachtige metgezel op het scherm te zien is.
- Paars & roze: worden gebruikt voor romatische interesses. worden vaak geassocieerd met extravagantie, dubbelzinnigheid, onschuld, romantiek en algeheel onschadelijkheid.
- Wit: vertegenwoordigt waarheid en informatie, verschijnt in elke scêne wanneer K in de buurt komt van het uitzoeken naar zijn identiteit.
- Het mag extremer, gedurfder.
- Je hoeft sommige worden niet per se vorm te geven.
- Piepgeluid is naar om te horen, het beeld mag daarom ook naar om te kijken zijn.
- Het beeld moet het geluid echt duidelijk vormgeven.
- Herinnering: readme maken
Prioritise Identity
Door kleur te gebruiken kan de kijker een bepaald gevoel geven van hoe een persoon in de film zich voelt of wat voor sfeer er hangt, zonder geluid er bij te hoeven te houden.
Gedurende het piepgeluid heb ik de achtergrondkleur aangepast naar zwart en wit. Bij de zin 'What's it like to hold the hand of someone you love', heb ik de achtegrondkleur aangepast naar een gradient van paars tot roze. Paars tot roze stond namelijk voor romantische interesses. Daarnaast heb ik de box-shadow bij sound 1 aan het begin van de video, aangepast van wit naar oranje. De scene wat tijdens die box-sahdow afspeelde, bleef nog een beetje mysterieus, oranje paste daarom wel goed bij de scene.
- De grijstint bij de pieptoon mag een verloopje hebben van zwart naar wit of van wit naar zwart, zodat het lijkt alsof de pieptoon steeds irritanter wordt. -> ik heb uiteindelijk de snelheid en ritme van de pieptoon aangepast en niet de kleur
- Het mag nog iets irritanter.
- Box-shadows mogen meer.
- Sound 0 (0 seconden) Hier zweeft er een voertuig door de lucht. Ik heb hier dan ook op de achtergrond een lineair-gradient animation toegevoegt van zwart en een lichtgrijze achtegrond, waardoor de kijker ook een soort van zweverig lucht gevoel krijgt.
- Sound 1 (9 seconden) Bij sound 1 hoor je een geluid alsof er op een knop wordt gedrukt. Hier heb ik dan ook een box-shadow van wit toegvoegd, zodat het lijkt alsof er iets wordt geactiveerd. Wit staat voor het uitzoeken van zijn identiteit, daarom heb ik de kleur wit gekozen, omdat je dan nog niet weet wat er gaat gebeuren en er opzoek naar bent.
- Sound 2 (12 seconden) Je hoort hier op de achtergrond een soort alarmgeluid. Deze is wat minder heftig dan die van sound 3. Bij sound 2 shaket de video masker een beetje alsof er een alarm ringt..
- Sound 3 (15 seconden) Je hoort hier op de achtergrond een soort alarmgeluid. Deze is minder extreem dan die van sound 4. Daarom heb ik gekozen om de video in te laten zoomen, maar nog eerst wat rustiger.
- Sound 4 (16.5 seconden) Je hoort hier op de achtergrond ook een soort alarmgeluid. Deze is heftiger dan die van sound 3. Bij sound 3 zoomt de video dan ook gelijk heftiger in. De kijker krijgt hierdoor het gevoel alsof er iets belangrijks is omdat er ineens iets in het gezicht wordt geduwd.
- Sound 5 (23.5 seconden) Sound 5 is een man die 'FUCK OFF' naar de hoofdpersoon roept. Deze woorden heb ik dan ook in capslock gezet en tijdens het roepen van 'FUCK OFF" lijkt het alsof die man een beetje boos/geirriteerd is waardoor ik de box-shadow tijdelijk aangepast hebt naar rood. Rood vertegenwoordigt boosheid. En ook hier trilt het video masker om het razende/geirriteerde gevoel naar voren te brengen.
- Sound 6 (25.8 seconden) Je hoort hier op de achtergrond een soort alarmgeluid. Deze is minder extreem. Daarom heb ik gekozen om de video in te laten zoomen, maar nog eerst wat rustiger.
- Sound 7 (27 seconden) Hier op de achtegrond hoor je een soort glitch geluid achtig iets. Ik heb geprobeerd dit gevoel naar voren te brengen door het beeld heel licht en naar te laten bewegen.
- Sound 8 (31.1 seconden) Je hoort hier op de achtergrond ook een soort alarmgeluid. Deze is heftiger dan die van sound 6. Bij sound 8 zoomt de video dan ook gelijk heftiger in. De kijker krijgt hierdoor het gevoel alsof er iets belangrijks is omdat er ineens iets in het gezicht wordt geduwd.
- Sound 10 (31.5 seconden) Hier begint een nare piepgeluid. Deze piepgeluid heb ik proberen terug laten komen door een een soort knipperend effect te laten zien van zwart en wit, wat eerst langzaam knippert en naarmate de video wat langer duurt steeds vaker gaat knipperen. De pieptoon wordt dan ook steeds irritanter en scherper.
Ik vind coderen wel leuk, maar ik doe het niet vaak. Daarom vond ik het wel leuk dat je bij dit vak mocht coderen alhoewel ik het vormgeven van geluid via code toch wat minder vind😅. Ondanks dat vond ik het toch wel een leuke opdracht, omdat ik eigenlijk nooit had bedacht dat je zo'n opdracht met css kon waarmaken en daarnaast toch nog wat nieuwe dingen heb kunnen leren van css, zoals de mogelijkheden in het maken van animatie.
Helaas heb ik wel fragment 2 moeten laten vallen, omdat ik me goed wilde focussen op fragment 1 en dat wel prima vond. Ik heb hierdoor ook nog wat meer kunnen verdiepen in css-code.
- https://exclusive-design.vasilis.nl/principles/ignore-conventions/
- https://www.w3schools.com/howto/howto_css_shake_image.asp
- https://unused-css.com/blog/css-shake-animation/
- https://codepen.io/P1N2O/pen/pyBNzX
- https://css-tricks.com/almanac/properties/b/box-shadow/
- https://www.premiumbeat.com/blog/symmetry-color-cinematography-blade-runner/
- https://viaplay.com/nl-nl/movies/blade-runner-2049-2017?&msclkid=f4f3962c19d71fa07f64f579805e292a&utm_source=bing&utm_medium=cpc&utm_campaign=nl_web_gs_ua_all_x_x_search-dsa-movies~VPL000_VPL000_ref1_204045826&utm_term=nl%2Fmovies&utm_content=nl_web_gs_key_all_x_xx_dsa-movies&gclid=COeYyL-O9_oCFRKAhQodk3IN6w&gclsrc=ds" !
- https://www.premiumbeat.com/blog/symmetry-color-cinematography-blade-runner/