Over dit verslag

Onderwerp: Stage verslag Multimedia Vormgeving, Web Design
Stage bedrijf: Webstores
Naam praktijkbegeleider: Erik Otten
Naam BPV-docent: Bert ten Feld
Periode waarover het verslag geschreven is: Differentiatieperiode, Augustus 08 - Januari 09

Inleiding

Ik ben bij deze stage plek terecht gekomen doordat dit bedrijf mij is aangeraden door mijn praktijk begeleider van mijn voormalig stage plek (klik hier voor het stage verslag van toen), die liet mij weten dat volgens hem dit bedrijf mij meer zou bieden.

Niet alleen doordat er meer mensen aanwezig zouden zijn met kennis van de achterliggende techniek van websites maar ook omdat ik zo met een grote groep mensen kon leren werken.
De vorige stage plek ben ik expres naar een bedrijf gegaan die meer aan vormgeving deed dan de techniek omdat ik zelf een gevoel had dat ik kennis over vormgeving te kort kwam.
Gezien ik graag met de vormgeving zowel als de techniek bezig ben kwam dat alleen maar goed uit.

Wat is webstores ?

Webstores is een internet totaal bureau waar complete websites van niks tot een volledig dynamische website gemaakt worden.

Het werk bij webstores

Het ontwerp wordt vaak gemaakt door webstores zelf maar het kan ook voorkomen dat de opzet bijvoorbeeld verkregen wordt van de resellers zoals Visual-DS, Ten-design en Douglas Design waar het bedrijf mee samen werkt en dat van daaruit de site gemaakt wordt.

HTML en CSS

Na het opzet gedeelte komt het HTMLHyper Text Markup Language, de basis script taal voor website's/CSSCascading Style Sheets, de opmaak taal om pagina's nog verder te stijlen na het HTML proces gedeelte dit zijn talen die web browsers als Internet ExplorerHet internet browser van Microsoft, zit standaard bij de meeste Windows versies, Fire FoxHet internet browser van Mozilla die eerder dezelfde naam droeg als het ontwikkel team voordat het benoemd is tot Fire Fox. (klik voor meer informatie), OperaEen internet browser afkomstig van Opera Software. (klik voor meer informatie), SafariApple's standaard internet browser. (klik voor meer informatie), Google ChromeDit browser is ontwikkeld door Google zelf met de bedoeling om het internet te versnellen. (klik voor meer informatie) etc. begrijpen.
In het HTML proces wordt de site omgezet van platte plaatjes naar een vorm die interactief en dynamisch is.
Als het HTML werk gebeurt is moet de site er net zo uit zien in elk web browser als het concept.
Dit is een punt waar veel tijd in zit omdat elk web browser een site anders weergeeft en er excepties gemaakt moeten worden, waar sommige browsers goed zitten zit de ander fout waardoor er zogenaamd hacks of uitzonderingen moeten gedaan worden en komen daarnaast er zo nu en dan onverklaarbare fouten voor.
Internet explorer 6 loopt bijvoorbeeld altijd te kampen met het feit dat PNG plaatjes met een transparant kanaal tevoorschijn komen als plaatjes met een wit grijze achtergrond waar het normaal doorzichtbaar moet zijn.

Dynamisch en interactief

Na het HTML proces wordt in de meeste gevallen de site dynamisch gemaakt en komt er een CMSContent Management System achter.
Een CMSContent Management System is een vast systeem waarmee klanten zelf hun site kunnen onderhouden, dit bestaat vaak uit HTML, PHP en Javascript code met daarnaast een database zoals MySQL.
Webstores heeft hun eigen CMS gemaakt, wat meerdere bedrijven doen, er zijn ook ‘open source’Software waar iedereen de broncode van kan inzien en bewerken CMS projecten zoals Joomla, Drupal en Wordpress.

Content Management System

Standaard heeft een CMS een administrator gedeelte waar de klant en webstores zelf kan inloggen, daarnaast kunnen allerlei modules geïnstalleerd worden als pagina modules , nieuwsbrief, fotogalerij, etc.
Naast de standaard modules wordt er ook maatwerk geleverd zodat de uitkomst exact zo kan zijn als de klant het wil.

Naast websites doet het webstores ook nog aan drukwerk, google addwords campagnes, presentaties, narrowcasting en host het bedrijf zelf de websites voor de klanten op hun eigen servers mits de klant dit anders geregeld wil hebben.

De vorige vestiging's plek

Voorheen zat het bedrijf meer in het centrum van Hardenberg aan de Stationslaan 2d hier heb ik mijn stagegesprek nog gehad, wat toen al bekend was dat het bedrijf ging verhuizen.

Verhuizen en nu

Op 08-08-08  is het bedrijf verhuisd en zit het bedrijf nu op de 3e etage van het ICT pand aan de Kruiwiel 1 in het industrie gebied van Hardenberg.

Gunstige plek

Het pand staat op een gunstig punt om aandacht te trekken, als je bijvoorbeeld van de N343 over wil gaan op de N34 kom je langs het pand.
Buiten staat een verlicht bord die van de weg af goed te zien is waar ook de overige bedrijven nog bij opstaan die in hetzelfde pand gehuisvest zijn.
Er rijden de hele dag auto’s langs, de Mc Donalds zit er pal naast en de E-norm, Praxis, Gamma en enkele tuincentrums zitten er ook vlakbij.

Niet echt

Het bedrijf is niet echt verdeelt in afdelingen maar zoals al eerder vermeldt wordt er wel onderscheid gemaakt tussen designers en programmeurs .

Op moment van typen gebeurt al het werk in één grote ruimte behalve Erik Otten, Matthijs van den Berg en Tom Bouma zitten in aparte kantoren.

Het ontwerpen , HTML, CSS en drukwerk wordt gedaan door de vormgevers Erik Otten, Frank Snijders en mijzelf.

Het programmeren, scripten en instaleren van sites wordt gedaan door de programmeurs Jan Wessels, Gertjan Odink, Christiaan Scholte, Maurice Snip, Erik Gerrits, Allan Kerssies en Dave Nieuwenhuijzen.

Matthijs van den Berg heeft de de taken accountmanager, klantenonderhoud en houdt hij toezicht op het verloop van de projecten.
Tom Bouma heeft als taken accountmanager, personeelsmanager en daarnaast systeem en netwerk beheerder.

Webstores verricht werk voor bedrijven als:

Het bedrijf

Hulzebosch bouw is een bouwbedrijf gevestigd in Anerveen.

De opdracht

Ik kreeg als eerste om te oefenen de opdracht om geheel vrij een website te ontwerpen voor Hulzebosch bouw met home, nieuws, activiteiten en projecten pagina’s.

Het eerste ontwerp

Bij het eerste ontwerp heb ik eerst gekeken naar de oude website, daar merkte ik op dat rood meer de hoofd kleur was dus heb ik dat ook gebruikt in mijn ontwerp.

Na de zomervakantie weer opstarten duurt even, naarmate ik verder kwam met het ontwerpen hoe liever ik aan een iets anders wou beginnen omdat ik aan het eind van het concept steeds lelijker begon te vinden.
Waar ik wel heel tevreden mee was, is de plaatsing van de content zoals het nieuws en de nieuws snippets.

Het tweede ontwerp

Bij het tweede ontwerp was ik niet meer geheel vrij maar moest ik meer op de huisstijl letten die vernieuwd was naar donkergrijs groen.

Ik wilde dit keer site maken een jong en fris uiterlijk geven sinds dat ook kan met groen en donkergrijs, tegenwoordig maak je dan al snel een web 2.0Web 2.0 is ontstaan toen AJAX technologie in opkomst was, dit is een mix van XML(in het heel kort data zonder opmaak) en Javascript om op die manier data live op te vragen of acties uit te voeren zonder het vernieuwen van de pagina.
Met web 2.0 denken mensen vaak meteen aan alle glans effecten, kleur verlopen en iconen terwijl het eigenlijk om de achterliggende techniek gaat. site, dus heb ik aan de site een web 2.0 uiterlijk proberen te geven.

Ik ben eerst opzoek geweest naar een paar goede stock foto’s die heb ik gevonden en deze waren ook meteen gratis te gebruiken.
Om de website meer dynamisch te maken heb ik ook voor transparante vlakken gekozen, als je nu de achtergrond foto aanpast verandert de hele site mee.

Eigen mening

Met het eindresultaat van dit concept was ik zeer tevreden, als ik toen naar de typografie zou kijken zou ik niks kunnen verbeteren.
Nu zou ik zeggen dat de ruimte tussen de regels te klein is en er had meer met koppen gewerkt had moeten worden.
De kleuren heb ik gehaald uit het logo en met de content/vlak verdeling ben ik zeer tevreden.

De opdracht

Nog een oefen website waar ik veel van geleerd heb, ik moest een website maken voor Thomal.

Het bedrijf

Thomal is een bedrijf dat internationaal metaal zoals aluminium, zink, koper, lood en rvs recyclet.

Concept

Bij dit concept ben ik anders te werk gegaan ik heb eerst meer de tijd genomen om te kijken hoe ik de huisstijl kon gebruiken bij de vormgeving van de site in dit geval heb ik veel met het logo kunnen doen.

Er was een al een materialen map waar ik in rond gekeken heb naar alle afbeeldingen en dergelijke, ik heb even kort gekeken naar de site die al gemaakt was, het e-mail briefpapier en de splash pagina.

De uitwerking

Toen ben ik begonnen met simpel vlakjes te plaatsen waar het logo komt, waar de navigatie moet komen te staan en de verschillende content gebieden komen.
Eerst gekeken of het ook op andere manieren kon, daarna de plekken gevuld met nep content om te zien of vlakken kleiner of groter moesten.
Een kleurenpallet aanmaken zodat de kleuren meer in harmonie blijven en het makkelijker en sneller kiezen is.

Dit doe ik door de hoofdkleuren zoals in dit geval donkergrijs en rood als kleine vlakjes op een witte achtergrond die tien keer kopiëren en elke keer 10% meer doorzichtig maken.
Zo krijg je tien verschillende varianten van je kleur, en wanneer dit niet voldoende is kan je het bijvoorbeeld ook nog op een zwarte achtergrond zetten of natuurlijk op eigen aangemaakte kleur.

Daarna verschillende kleur stijlen proberen om meer contrast te creëren, grijs veel gebruiken omdat die kleur eerder hint naar ijzer.
Randen, verlopen en schaduwen toevoegen om het geheel duidelijker te maken en te verfraaien.

Een font uitkiezen uit de standaard geïnstalleerde fonts die het meest overeenkwam met het logo en de typografie verder aanpassen zodat het de leesbaarheid meer ten goede komt, meer ruimte tussen regels en zoals in dit geval een donkerdere kleur voor de tekst.

Als laatste nog zoals gezegd een schaduw over de hele site toevoegen en met de achtergrond ervoor zorgen dat de site nog verder los komt te staan.

Conclusie

Ik heb van deze oefening heel veel opgestoken qua kleurgebruik in verband met het kleurpallet, vlakverdeling, vormgeving waar ik meer de huisstijl gebruikt heb en de typografie via de tips die ik gekregen heb als in geef regels meer tussen ruimte en maak het font niet te groot.

Klik hier om een afbeelding galerij weer te geven die het vormgeving proces laat zien van begin tot eind van de homepage.

De opdracht

Ik heb voor BinCleaningSystems een bannier moeten maken die op een beurs kwam te staan.

Het bedrijf

BinCleaningSystems is een bedrijf dat gespecialiseerd is in waswagens voor afval containers.

Concept

Ik kreeg de opdracht om een bannier te maken van 800mm breed en 2500mm hoog met 15mm bleedingRuimte wat sowieso overgelaten moet worden over de grote van het document zelf voor het geval dat wanneer de uitsneden na een aantal drukken niet geheel precies meer zijn er geen wit vlak of iets dergelijks onstaat aan de randen met de aangeleverde informatie.
Tekst kreeg ik met e-mail aangeleverd in word bestanden en daarmee ook de foto’s als JPG bestanden die ze graag erin verwerkt zouden zien.

De uitwerking

De communicatie verliep via Frank die al eerder drukwerk voor BCS gemaakt had hij gaf me ook een brochure als voorbeeld waar ik hun huisstijl uit kon halen.

Als eerste heb ik natuurlijk de brochure bekeken en daar viel op hoe de foto’s in het ontwerp verwerkt worden, de twee kleuren die heel sterk terug komen, de manier hoe de foto’s verwerkt zijn, de achtergrond met de waterdruppels en de witte letters.

Ik heb als eerst alle tekst en foto’s geïmporteerd en gekeken hoe groot de foto’s geschaald konden worden gezien deze niet van hele hoge resolutie en grote waren.

Hierbij komt namelijk DPIDots Per Inch om de hoek kijken, je hebt namelijk bij afbeeldingen op de computer de breedte en de hoogte in pixels maar daarnaast ook nog de resolutie.
De resolutie die naar een computer monitor uitgestuurd word is standaard 72 DPIDots Per Inch net zoals de afbeeldingen voor op computer zijn.
Bij drukwerk wordt er 300 DPI gebruikt bij printwerk vaak 150 DPI en dus voor beeldwerk 72 DPI.
Sinds er nogal veel tekst was viel dit moeilijk te plaatsen en werd het heel snel onoverzichtelijk en gezien de foto’s niet echt groot geschaald konden worden moesten de teksten alsnog heel klein die normaal vergeleken met de foto’s groter konden.

Toen ben ik begonnen met de opmaak van het grote blauwe vlak.
Gezien het zo’n hoge afmeting is waar ik mee werk heb ik de waterdruppels alleen onderaan het blauw vlak gebruikt met een masker en een verloop zodat de afbeelding weg vaagt, daarna heb ik de foto’s hun roze rand en masker geven,  het logo bovenin geplaatst en hun website onderaan vermeldt.

Nadat ik het de eerste keer heb laten beoordelen was de conclusie dat er toch te veel tekst was, dat het logo groter moest, er met minder verschillende diktes in de typgrafie gewerkt moest worden en er ook geen textwrapTekst valt om objecten als figuren en foto's heen om de tweede foto heen moest zodat onduidelijkheid vermeid werd.

Na nog een evaluatie is nog een stuk tekst komen te vervallen, is de website vermelding onderaan ingekort door maar 1 regel te gebruiken en uiteindelijk van maar 3 verschillende diktes gebruik gemaakt.
De teksten konden nu groter en mooier verdeeld worden zoals nu bijvoorbeeld op de eerste foto geen tekst meer hoefde te staan.
De titel is naar onder geschoven en zo op de eerste foto terecht gekomen zodat het logo een stuk groter kon en is de kleur van de titel verandert van roze naar wit maar om de titel beter leesbaar te maken is er een roze schaduw toegevoegd.
De foto’s zijn ook bewerkt zodat ze iets lichter werden en de kleuren iets beter tot hun recht kwamen.

Ondertussen is het formaat ook meerdere malen aangepast sinds er van drukker verandert is en dergelijke hierdoor ben ik ondertussen dus ook nog met de tekst en de foto’s aan het schuiven geweest en heb ik de foto’s soms anders bijgesneden of iets kleiner gemaakt de tekst groter gemaakt en meer marge gegeven aan de zijkanten.

De klant

Deze klant is gevestigd in het zelfde pand als webstores en verkoopt producten van Konika Minolta.

De opdracht

De bedoeling was dat de concepten uiteindelijk naast elkaar gelegd zouden worden zodat de klant een keuze kon maken maar ook zodat ik er wat van op zou steken op gebied van vormgeving, web-useability en dergelijke.
Samen met Frank hebben we los van elkaar aan deze site gewerkt.

Er werd ons gevraagd een kleine website te maken met een homepage, een contact pagina en een content pagina.

Vooraf had ik al een splash paginaEen pagina wat normaal gesproken ergens vooraan komt moeten maken die als tijdelijke site fungeerde voordat de echte site online ging.

Als informatie had ik de feiten dat het een zakelijke site moest worden, er producten van Konika Minolta verkocht werden en het visite kaartje met het logo.
Voor de rest was ik vrij in wat ik wilde doen met de site.

Toen ik de opdracht kreeg was ik nog met BCS drukwerk bezig en is het andere persoon die ook een concept moest maken alvast begonnen.
Toen ik met het drukwerk klaar was heb ik eerst even gekeken bij de collega die toen al een beginnetje had staan.

De eerste splash pagina die ik gemaakt had was te simpel.
De vraag was eigenlijk het visitekaartje een in perspectief te zetten zodat het een beetje naar buiten leek te komen, kortom niet al te standaard.
Als eerste had ik een effen donkergrijze achtergrond met daarin het kaartje iets geheld.
Dit heb ik laten zien en was toch niet helemaal de bedoeling, toen ben ik dus op het idee gekomen om in Photoshop iets te maken als wat je lichtstralen zou kunnen noemen die buigen zodat het al op een 3D ruimte lijkt dit in de felle kleuren vanuit het logo en daar dan nog het visitekaartje in perspectief erbij gezet met een dikke schaduw.

Voor de uiteindelijke website ben ik uitgegaan van wat ik al gemaakt had voor de splash pagina, daar heb ik dingen aan toegevoegd die nodig waren.
Zelf wilde ik de lichtstralen mooi in beeld houden en gezien alles er al zo clean uitzag ben ik gebruik van transparante vlakken gaan maken wat ook een clean uitziende uitkomst geeft.
Voor het kleurgebruik heb ik zoveel mogelijk net als bij de lichtstralen de kleuren uit het logo gebruikt.
Het font heb ik zelf gekozen, dit omdat deze erg leek op het lettertype wat gebruikt was in het logo en omdat iedereen dit font geïnstalleerd heeft staan.
Dingen zoals een navigatie, breadcrumb, service links, content vlakken en dergelijke toegevoegd.
Tijdelijke opvul foto’s en dergelijke die gebruikt zijn heb ik het meeste zelf opgezocht, deze zouden ook meteen gebruikt kunnen worden in verband met copyrights en dergelijke zou er dan geen problemen zijn.

Ik heb tussendoor één keer naar wat ik had laten kijken, toen werd ik op kleine dingentjes gewezen zoals bij bijvoorbeeld bij de homepage het welkomsttekst vlak even hoog te maken als het foto vlak ernaast dit staat een stuk netter en wordt de site meteen een stuk strakker, bij de content pagina moest er nog wat aan de typografie gedaan worden.

Nadat ik die aanpassingen gemaakt had is de klant langs gekomen, en heeft hij zonder dat de concept bedenkers erbij waren met de baas een besluit gemaakt.
Uiteindelijk is het concept van het andere persoon gekozen.
De klant is nog langs gekomen heeft me nog complimenten gegeven en vertelde dat de site er goed uitzag en dat hij met de keuze wel moeite had  gezien mijn concept alleen iets drukker was daardoor iets minder zakelijk als de ander, vandaar dat mijn concept niet gekozen is.

De opdracht

Ik werd gevraagd of ik even tijd had om te komen en zo kwam ik een vergadering (meteen de briefing) binnen en kreeg ik dit keer de opdracht om voor webstores zelf met After Effects een showreel animatie te maken die op de website moet komen te staan van opnames waarbij er door de site heen word gelopen waarmee de belangrijkste dingen worden bezichtigd en afbeeldingen van de door hun gemaakte websites.

Concept

After FX is een video bewerking programma wat niet bedoeld is voor video montage het kan wel maar de nadruk ligt toch echt veel meer op (special) effect, 3d, filters en dergelijke.

De bedoeling was om de sites in 3D perspectief te zetten zodat het niet altijd even recht staat als het standaard al gebeurt, verder als er op een stuk maar een bepaald gedeelte was waar de focus op moest liggen zo ver mogelijk inzoomen.
Dan tussen shots spectaculaire overgangen en dit alles zo vlot en vloeiend mogelijk.

De afbeeldingen waren er al wel alleen alle filmpjes moesten eerst gemaakt worden.
Ik heb eerst van de website van Deen Makelaars een 3D tour gemaakt deze gerendertHet exporteren van het project vanuit het programma naar een in dit geval een algemeen afspeelbaar video bestand waardoor het in realtime afgespeeld kan worden en laten zien, dit was precies wat ze wilden zien in het eindresultaat dus kon ik dit mooi doorzetten met de rest van de filmpjes.

De uitwerking

Ik had inmiddels een lijst met daarop de websites en hun belangrijkste punten verkregen toen heb ik eerst per website de website een keer goed doorlopen om een indruk te krijgen, daarna heb ik de beste route opgezocht.
Waar contact informatie of iets dergelijks ingevuld moest worden heb ik eerst een paar keer voor de hand geprobeerd sinds alles wel zo soepel mogelijk moet verlopen.
Nadat allemaal gedaan te hebben ben ik gaan opnemen en wanneer een take dan goed gelukt was op naar het volgende filmpje.

Voordat ik dat kon doen heb ik wel eerst research gedaan naar een programma die aan screen/desktop recordingEen programma dat het bureaublad opneemt zoals je het ziet of een specifiek vlak.
Deze programma's nemen vaak ook het geluid op wat via de speakers te horen valt. deed,
Daar zaten wel wat eisen bij: het programma moet fatsoenlijk te gebruiken zijn, hoge kwaliteit leveren, opties ondersteunen dat bijvoorbeeld alleen een selectie gefilmd word en in mijn geval werken op een Mac Pro G4 met OSX LeopardHet recentst besturingssysteem voor Apple Computers op moment van schrijven in mijn geval.
Snaps Pro X is uiteindelijk het screen recording programma geworden.

Toen de filmpjes allemaal klaar waren heb ik ze in After Effects geïmporteerd en heb ik als eerst maar 2 filmpjes bewerkt met 3D en zoom effecten daarna heb ik een overgang tussen gemaakt waarbij ik ook met 3D heb gewerkt. 
Deze compilatie heb ik daarna gerendert en laten zien hoe zo’n overgang eruit zou zien, dit was ook goed en kon ook doorgezet worden.

Toen ik klaar was met alle filmpjes exact goed te knippen, in perspectief te zetten en volledig bewerkt te hebben met zoomen heb ik alle filmpjes achter elkaar gezet zonder overgang (omdat daar nogal vele tijd inzit) en gerendert.
Dit hebben we toen een etage lager in een presentatie kamer bekeken, daar heb ik dan nog uitleg gegeven en ben ik nog achter foutjes gekomen en waren er nog een paar tips.

After Effects is namelijk geen ligt programma en ik werkte niet op de nieuwste Mac, normaal zou je namelijk gewend zijn dat wanneer je 2 clipjes film achter elkaar plakt dat je op play drukt en het speelt.
After Effects vanwege alle effects, 3d, motion blur, etc. is een zwaar log programma, zou je op play drukken krijg je ongeveer 0,3fpsBeelden per seconde (frames per second) van wat 25fpsBeelden per seconde (frames per second) hoort te zijn dat is in vakterm niet ‘realtime’ en krijg je daarbij geen geluid.
Er is wel een oplossing bij After Effects dat heet RAM Preview, je geeft aan welk stukje je wilt zien en het wordt gerendert zodat je het wel realtime ziet en hoort.
Dit duurt echter even en daar kan je nogal moe van worden, omdat je dit voor elk stukje wel moet doen en daarom schieten er snel foutjes bij door.

Toen ik het liet zien kwam ook naar voren dat er ook videobeelden vanaf een camera bij in kwamen van het bedrijf zelf.
Beelden als het logo aan de muur, zien hoe er gewerkt word en dergelijk.
Dit werd opgenomen door iemand anders en nu werd de eind compilatie ook door die persoon gedaan dus heb ik alle filmpjes afgemaakt en elk apart gerendert zonder overgangen.

Hieronder valt een kort compilatie filmpje te zien van enkele korte stukjes.
Op de ware grote maar niet de volle kwaliteit (geen geluid).

De opdracht

Toen ik nog bezig was met de showreel van webstores zelf kwam de vraag met spoed of het mogelijk was een heleboel filmpjes van het internet af gehaald met allerlei verschillende resoluties, aspect ratio’s, framerates, en codecs allemaal achter elkaar op een DVD van 1 uur maximaal die looped en die compatible is met de gewone DVD spelers.

De DVD kwam uiteindelijk op een beurs te draaien waar dus om het uur automatisch dezelfde filmpjes van Audi, Kemperink en Volkswagen te draaien.

Het verloop van de opdracht... Problemen en research

De problemen komen kijken bij het aspect ratio verhaal dat wanneer je hoofdproject waar alles in komt en uiteindelijk als eindproductie gerendert wordt de 4:3 ratio heeft dat video’s met 4:3 ratio wel goed in beeld komen en 16:9 ratio video’s boven en onder extra zwarte balken.
Wanneer het hoofdproject 16:9 is krijgt 4:3 rechts en links extra zwarte balken krijgen.
Er zijn nog meer varianten waar dus de zelfde problemen mee komen kijken of je snijd beeld weg of krijgt zwarte balken.

Ik heb in het hoofdproject gekozen voor 4:3 hiervoor zijn twee redenen boven en onder balken komt sowieso al vaker voor dus het staat netter plus het feit dat wanneer 4:3 in 16:9 video wordt geplaatst het gek genoeg verticaal uitrekt.

Internet filmpjes zijn heel vaak kleinere resoluties als 480x360 pixels wanneer DVD bij ons (omdat wij in Nederland via de PALPhase Alternating Line (klik voor meer informatie) standaard werken) altijd 720x576 pixels is met 25fps en een 4:3 (normaal) of 16:9 (wide screen) ratio is.
Nu moeten dus bijna alle filmpjes uitgerekt worden waardoor de kwaliteit omlaag gaat.

Wanneer de framerate onder de 25fps ligt ga je merkbaar verschil zien.
Op een PAL DVD zitten er altijd 25 beelden in een seconde wanneer dit er zoals in dit geval 10 worden de beelden zelfs meer als twee keer herhaald.
Dit zorgt voor slowmotion of stoterig beeld ligt er maar net aan hoe jouw programma’s hier mee om springen.

Als laatste technisch probleem dan nog de codecs.
Een CODEC is een hardware of softwarematige COder of DECoder.
Een coder schrijft het weg in het codec een decoder leest dat weer uit.
Nu zijn er alleen software matig voor op de pc al heel veel en komt het wel eens voor dat zelfs professionele programma’s zoals After Effects deze weigert uit te lezen.

Enkele bekende video codecs zijn MPEG, MP4, DivX, Quicktime, WMV, H.264, enzovoort waarbij er ook containers zijn als AVI, MOV, FLV en MKV dit zijn weer bestanden waar audio en video codecs in gaan.
Omdat op te lossen moest ik in dit geval alle volkswagen filmpjes transcodenHet decoden en encoden kortom het omzetten van een video bestand van het ene formaat naar het andere dat is het omzetten van een video van het ene naar het andere codec.
Dat duurt ook weer tijd en het ligt er aan hoe lang het filmpje je duurt, welk programma je gebruikt, welke kwaliteit je gebruikt en vooral welk codec.
Als je transcode naar een MPEG4 codec als H.264 dan gaat het heel lang duren, deze wordt ook gebruikt voor HD films doet erg lang over omzetten maar wordt een stuk kleiner als een ander codec die er zo klaar mee is maar misschien wel 50 keer zo groot is in bestandsgrote aan het eind of er niet uit ziet.

Wanneer je transcode is de kans groot dat de kwaliteit naar achteren gaat omdat je waarschijnlijk compressie doet op iets wat al compressie had of erger dat er artefacten ontstaan dit zijn vaak kleine groene en paarse vlakjes die er niet horen.
Met de Volkswagen filmpjes heb ik 7 andere codecs geprobeerd waar steeds iets mis mee was, of video werd niet uitgelezen of audio viel weg of beide.

Ik wist al wel dat het allemaal wel kon, een DVD loopen is niet moeilijk dit is een functie bij DVD, video omzetten hoeft ook geen groot probleem te zijn.
Maar er moet eerst wel gekeken worden naar welke programma’s er gebruikt worden er moet immers een videomontage programma zijn, wanneer nodig een programma dat kan transcoden en een programma die het eindresultaat omzet naar DVD vorm en het dan ook op DVD kan branden.

Er was geen PremiereVideo editing software van Adobe of Final CutVideo editing software van Apple voor videomontage dus moest ik After Effects wel gebruiken wat achter af gezien mee viel qua extra moeite die er gedaan moest worden om de filmpjes aan elkaar te monteren.
Om het eindresultaat naar DVD vorm te krijgen en te branden hebben we gebruik gemaakt van iDVD van Apple.
Op het punt dat ik erachter kwam dat video’s niet goed uitgelezen werden moest ik wel opzoek.
Één van mijn eigen favoriete media spelers, een veelzijdig ‘open source’Software waar iedereen de broncode van kan inzien en bewerken programmaatje dat audio en video afspeelt, kan streamen, streams uitleest én kan transcoden namelijk VLC LAN media player.
Na 6 verschillende codecs te hebben geprobeerd als WMV, MPEG, DivX en MP4 H.264 is Quicktime die ook filmpjes kan omzetten gebruikt om de filmpjes om te zetten naar MOV en werkte het uiteindelijk.

Alles op orde

In het hoofdproject heb ik de filmpjes achter elkaar gezet, het overige zwarte beeld weg geknipt en gezorgd dat de overgangen steeds even lang duurde.
Tegelijk heb ik de filmpjes allemaal opgeschaald tot dat ze het beeld vulden, bij de wide screen beelden heb ik alleen zo ver geschaald totdat het beeld in de breedte gevuld was.
Verder heb ik bij de zwarte balken die daardoor ontstonden voor opvulling gezorgd door de video laag te dupliceren en aan deze laag een effect mee te geven die naar onder en boven directioneel vaagt zodat er een subtiel spiegel effect in de zwarte balken ontstond.
De filmpjes van Volkswagen waren heel ruw en eigenlijk helemaal niet gemonteerd, dus heb ik deze filmpjes ook nog apart bewerkt totdat er soepele handelingen ontstonden, de shot volgorde klopte daarna en er was geen reden was meer om in slaap te vallen gezien sommige shots van het orgineel nogal lang waren.

Daar kwam nog bij dat het beeldmerk van Huiskes-Kokkeler steeds onderin rechts van het beeld moest komen te staan en er een bumper tussen de Audi, Kemperink en Volkswagen gedeelten moest komen.
Uiteindelijk heb ik in het begin de bumper geplaatst tussen Audi en Kemperink tussen Kemperink en Volkswagen en nog een keer aan het einde.
Op deze manier simuleer je een vicieus effect sinds de overgang en het begin van de DVD nu moeilijk te spotten valt.
Het beeldmerk is uiteindelijk constant in beeld alleen niet wanneer de bumper actief is.

Toen alles goed geplaatst en bewerkt was heb ik de hele video lossless proberen te renderen, dat wil zeggen dat ik de video zonder compressie weg schrijft.
Dit neemt erg weinig tijd in vergeleken met wanneer je wel compressie uitvoert zoals met MP4, DivX en dergelijke.

De tijd die nodig is om een filmpje te renderen kan aan veel factoren liggen.
Natuurlijk hangt het van de lengte af van de film die gerendert moet worden, daarnaast ligt nog aan het codec zelf hoe efficiënt deze is en hoeveel compressie die uitvoert, dan ligt het ook nog aan hoe efficiënt het programma is, hoe snel de computer is en de kwaliteit waarmee gerendeerd wordt.

Sinds lossless heel snel gaat wordt het bestand dus extreem groot zoals al eerder verteld wel 50 keer.
Dit werd jammer genoeg te groot voor de opslag waarover de computer beschikte dus moest dit wel anders.
Toen heb ik gekozen voor de MOV container met het H.264 codec op de beste kwaliteit dit duurt dan weer extreem lang, sinds ik net de afgelopen donderdag begonnen was het vrijdagmiddag was en het maandag middag al af moest zijn hebben we de Mac in het weekend aanlaten staan renderen.

Maandag was de computer klaar met renderen en eiste het 55 minuten durende H.264 MOV bestand 3 giga byte schijfruimte op.

Vandaar uit is het naar een andere Mac gekopieerd waar het met iDVD omgezet naar video DVD en gebrand.

Een video DVD bevat een bepaalde folder structuur en 3 verschillende types bestanden.
Onder de DVD komen 2 mappen AUDIO_TS en VIDEO_TS waar TS staat voor Transport System.
AUDIO_TS hier hoort de audio data komen te staan maar deze folder blijft vrijwel altijd leeg, onder VIDEO_TS komen de 3 verschillende types bestanden zoals VOB, IFO en BUP.
In een VOB bestand wordt de video, audio, ondertitel en menu data opgeslagen.
In een IFO bestand komt de belangrijke navigatie informatie zoals waar beginnen hoofdstukken waar begint de ondertiteling en dergelijke.
BUP bestanden zijn niks meer als backup bestanden van IFO bestanden.
De VOB bestanden zijn altijd weggeschreven met het MPEG2 video codec en MP2, AC3 of PCM audio codec.
Als een video DVD op deze manier weg geschreven wordt weet elke hardware of software hoe deze met de DVD om moet gaan en behoort het dus overal het zelfde te werken.

Hieronder is een kort compilatie filmpje te zien van korte fragmenten uit het eind product.
Volledige grote maar niet de volledige kwaliteit (geen geluid).

Hoewel ik dit typ wanneer de stage nog loopt kan ik al zeggen dat deze stage mij uitermate goed bevallen is en ik veel geleerd heb.
Van mezelf ben ik een persoon die moeilijk relaties maakt, hoewel het mij bij deze groep heel goed af ging heeft mij dat ook geholpen in het dagelijks leven.
De sfeer die er continu hangt (tijdens de pauzes, samen eten en het werken dus) is gewoonweg goed.
Van de meeste dingen die er gedaan worden heb ik wel wat mogen doen en sinds ik al die dingen interessant vindt heb ik er plezier aan gehad.
Alleen al door het werk te doen zoals: drukwerk, websites ontwerpen/bouwen/updaten, animatie of video maken of bewerken heb ik veel ervaring opgedaan en daar komen de nieuwe technieken, ervaring opgedaan met vormgeven en zulks nog bij.

Ook tijdens het maken van dit portfolio en verslag heb ik enorm veel ervaring opgedaan sinds er bij elke stap wel meerdere problemen op kwamen dagen, sommige die niet op te lossen vielen en de dingen weer anders gedaan moesten worden.

Drukwerk

• Poster
• Poster
• Poster
• CD Hoes
• CD Hoes

Website's

• Site update

Sketches

• Site
• Logo
• Site

Verslag bijlage

Verslag Checklijsten