Oppgave 7 - Webdesign

1. Innleding

Koding kan være veldig frustrerende når man ikke får det til. Jeg har endelig begynt å få litt kontroll på html og css koding, og muligens noe overambisiøs bestemte jeg meg derfor å prøve meg på en løsning som involverer koding med Java-Script i denne oppgaven. Dette viste seg å være lettere sagt enn gjort…

Her er link til websiden

2. Idé

Jeg bestemte meg for å lage en litt tullete designsidé. I mangel på noen designartikler jeg virkelig brenner for, bestemte jeg meg for å lage en side for noe så traust som en ”stolbutikk”. Jeg ønsket å ha et litt tøysete og livlig preg på siden så jeg fant på navnet ”Stol På Oss”. Det imaginære konseptet bak denne butikken er å selge stoler i ”knæshe”, friske farger.

Det første jeg gjorde var å designe en enkel logo for butikken i Illustrator.

.

3  Skissestadiet

Etter å ha laget en grovskisse med penn og papir begynte jeg å utforme en mer detaljert skisse i Photoshop. Jeg ville at Photoshopfilen skulle være utgangspunktet for designet av siden og at jeg skulle ”slice” opp siden slik at jeg kunne bruke elementer derfra.

Jeg ønsket å ha en såkalt ”slider” på forsiden av siden. Dette er med andre ord bilder som roterer i en loop. Grunnen til at jeg ønsket dette er fordi det gir litt liv til designet, samt at det er en fin måte for en butikk å presentere ulike nyheter på.

Jeg var nøye med å bruke korrekte proporsjoner i Photoshop. Dette gjennomførte jeg ved å bruke linjalverktøyet slik at alt kom på akkurat riktig plass.

4. Programmering i Dreamweaver

Etter å ha designet layouten i Photoshop opprettet jeg en site i Dreamweaver. Jeg satte inn ulike diver og lagde css-styler til divene slik at oppsettet ble som i PSD-filen. Etter å ha laget alle de ulike stilene og divene la jeg alle css-stilene som en ekstern fil. Da det var gjort lagret  jeg oppsettet mitt som et template. Det eneste som skulle være forskjellig mellom de ulike sidene var nemlig ”main-content”-området. Jeg gjorde derfor dette området til ”editable region”.

Da det var gjort opprettet jeg et html dokument basert på ”template”-filen

4.1 Forside slider

Det som viste seg å bli en stor utfordring var derimot  å lage en slider til forsiden. En mulighet er å gjøre det ved hjelp av flash. Siden flash ikke støttes av Apple-produkter som Ipad og Iphone er dette imidlertid en temmelig ”forhistorisk” løsning. Dagens standard for slike interaktive bilder og gjenstander på nettet er derimot Java-script og nærmere bestemt noe som heter ”Jquery”. Dette viste seg fort å være svært avanserte saker for en fersking innenfor programmering. Jeg så på mange ulike instruksjonsfilmer på nettet for å prøve å finne en løsning på dette, men jeg ble bare mer og mer frustrert. Jeg prøvde meg på å kode slike java-script fra bunnen av, men dette var komplett umulig å få til. Etter å ha knotet med dette i halvannen dag fikk jeg tilslutt et gjennombrudd i saken. Jeg fant ut at det finnes tilleggsprogrammer i Dreamweaver som kan hjelpe deg med slike vanskelige oppgaver. Det var riktignok ikke enkelt å installere dette programmet og man måtte bruke ett annet tilleggsprogram for å installere programmet. Etter at jeg tilslutt klarte å innstalere dette programmet ble det imidlertid lettere å lage en slik slider.

Resultatet med slideren ble jeg veldig fornøyd med. Jeg har gjort det slik at slideren på forsiden rullerer med bilder hvert 3 sekund. Om man holder musepekeren over bildet stopper imidlertid bildene å rotere automatisk.

Innholdet i slideren lagde jeg i Photoshop. Det er en grunn til at en slik løsning ikke er optimalt og det er fordi at det gjør siden mindre søkbar i søkemotorene. Ideelt sett skulle man derfor har skrevet inn teksten og ikke bare hatt teksten i form av et bilde slik som jeg har gjort her.

4.2 Produktsider

Jeg ble så fornøyd med hvordan slideren fungerte at jeg bestemte meg for å benytte denne for å presentere butikkens produkter. Stolene jeg har vist på siden er bilder jeg har funnet på nett. Produktinormasjonen er oppdiktet. Siden hensikten med denne oppgaven er å få trening i webdesign og Dreamweaver ønsket jeg å minimere tidsbuken med å finne bilder etc. Av den benyttet jeg bildet jeg fant på nettet istedenfor å ta bildene selv.

Jeg lagde tre ulike produktpresentasjoner for hver produkttype. Jeg lagde deretter en slider for hvert produkt på samme måte som jeg gjorde på forsiden.

Spisestolside

Klappstolside

Lenestolside

4.3 Informasjonssiden

Denne siden kunne jeg definitivt laget langt finere. Pga. litt mangel på tid lagde jeg derimot en svært enkel løsning her. Jeg skrev ned noen oppdiktede ord og stylet dette ved å endre header og paragraphstyles ved hjelp av css-regler.

5. Refleksjoner rundt prosessen

Denne oppgaven viste seg å bli temmelig tidkrevende. Det som altså tok mest tid var å lage en slider med java-script. Jeg brukte mindre tid på å finpusse på produkt-presentasjonsbildene fra Photoshop. Om dette var et reelt oppdrag ville jeg nok brukt mye mer tid på detaljene her. I tillegg er også footeren ganske primitiv, så jeg ville nok lagt ned mer tid også her for å style denne.

Det var imidlertid gøy å få teken på å bruke java-script slider. Dette er noe jeg tror jeg kommer til å bruke mye videre, også i prosjektoppgaven. 

Dokumentarfilm om Mathallen

Prosess - fra idé til ferdig produkt

Dokumentarfilmen min brukte jeg veldig mye tid på å lage, og av den grunn har jeg valgt ut å utdype prosessen rundt arbeidet med denne oppgaven.

1. Idé

Jeg brukte mye tid på å komme opp med denne idéen.  Jeg begynte faktisk å lage en annen dokumentarfilm først. Denne dokumentaren tok for seg en lokalavisnyhetssak om en man som skulle gå hele veien til Marokko. I denne dokumentarfilmen hadde jeg derimot blitt nødt til å benytte skuespillere for å avgi replikker og de faktiske personene. Av den grunn synes jeg det ble litt ”flåsete”, og jeg valgte å endre oppgave for å kunne lage noe seriøst og reelt.

Denne vinteren har i Osloområdet har omtrent utelukkende bydd på grått og trist vær. Jeg ønsket å ha litt friske og spennende bilder i dokumentarfilmen min. Med konstant gråvær og trist lys er dette derimot vanskelig å få til uten ekstern lyssetting. Av den grunn begynte jeg å tenke gjennom om det var noen lokasjoner innendørs som kunne egne seg til filming av dokumentaren. Det tok ikke lang tid før jeg kom på at Mathallen i Oslo ville være perfekt til dette.

Jeg viste at det hadde vært mye omtale i media om Mathallen og jeg begynte å undersøke dette nærmere. Jeg fant flere avisoppslag men valgte å ta utgangspunkt i denne artikkelen:

http://www.osloby.no/nyheter/Rema-1000-skal-redde-Mathallen-7363375.html

I artikkelen fokuseres det på at folk ikke legger igjen nok penger i Mathallen og at den sliter økonomisk. Det var dette jeg skulle se nærmere på i dokumentaren. Hvorfor er det slik?

2. Gjennomføring

2.1 Del 1

Jeg begynte å undersøke hvilke interessante personer jeg kunne ta med i dokumentaren. Jeg tenkte at daglig leder for mathallen måtte være et perfekt sted å begynne. Jeg sendte noen mailer og avtalte et møte med daglig leder Frode Rønne Malmo.

Dette var den første gangen jeg var ansvarlig for en intervjusituasjon med en en profesjonell aktør. Jeg hadde kun om lag 10 minutter så jeg var avhengig av å være godt forbredt før intervjuet.

Jeg møtte derfor opp i god tid for å besiktige området og finne en egnet intervjulokasjon. Intervjulokasjonen jeg fant var perfekt. Den var på en slags balkong i 2 etasje i mathallen. Jeg ønsket å filme Malmo slik at man så mathallen ”blury” i bakgrunnen.  Jeg brukte derfor stor blenderåpning. Lukkeren var selvfølgelig satt til 1/50 sekund siden jeg filmet i 25 fps. Det ideelle med denne lokasjonen var at jeg rett bak meg hadde et gigantisk vindu. Ute var det gråvær slik at jeg unngikk problematikken som sol og skygger kan by på. Det noe kalde utelyset opplyste derfor intervjuobjektet mens lyset i bakgrunnen var noe varmere. Å ha litt forskjell i lystemperaturen mellom intervjuobjektet og bakgrunnen er ideelt siden det bidrar til å skape dybde i bildet. Hvitbalansen stilte jeg inn manuelt for å få best mulig kontroll med lystemperaturen i bildet. Jeg ble veldig fornøyd med det bildemessige i dette intevjuet:

I intervjuet med Malmo ble jeg derimot fortalt at Mathallen går mye bedre nå enn da artikkelen jeg tok utgangspunkt i ble skrevet. Han mente at de så en endring i folks matvaner. Dokumentaren min skulle altså se på hvorfor mathallen går dårlig økonomisk. Nå ble jeg nødt til å endre vinkling. Jeg valgte derfor å undersøke om det har vært noen endring i Oslo folkets matvaner. Jeg undersøkte flere aktører i mathallen. Og de var samstemmige med Malmo om at det har skjedd en endring i Norske matvaner.

Jeg filmet også en rekke innklippsbilder av ulike matvarer som jeg kunne klippe inn i intervjuene.

Alt lydopptak i disse intervjuene ble tatt med en røde ekstern mikrofon.

2.2 Del 2

Etter min mening ville det ikke vært noen god dokumentarfilm om jeg kunne hadde sett situasjonen fra aktørene i Mathallen sitt synspunkt. Jeg ønsket derfor å snakke med en ekspert på området. Jeg undersøkte litt og fant kontaktinformasjon til en professor innen forbrukeratferd ved handelshøgskolen BI. Jeg avtalte et møte med han. Jeg håpet at han kunne kommentere det aktøren i mathallen hadde fortalt meg.

Nok en gang var jeg nødt til å være godt forbredt da jeg også her bare hadde kort tid til rådighet. Denne gangen bommet jeg dessverre litt på hvitbalanseinnstillingene. Dette klarte jeg heldigvis greit å rette opp i etterkant i Premiere Pro ved å bruke adjustmentlayer og ”3 way color corrector”.

(Bildet etter at fargene ble justert. I utgangspunktet var bildet altfor gult)

Etter dette intevjuet dro jeg rundt og filmet passende lokasjoner som jeg kunne benytte som innklippsbilder: Dagligvarebutikker, tilbudskilt osv..

3. Etterarbeid

Jeg hadde mye materiale så etterarbeidet var ganske omfattende. Det var nytt for meg å klippe i intervjuer. For å dekke til klippene brukte jeg aktuelle innklipsbilder. Jeg vurderte frem og tilbake om jeg skulle legge på en fortellerstemme. Jeg valgte imidlertid å benytte replikkene til intervjuobjektene til å fortelle historien.

Jeg fikk virkelig erfare at lydredigering er mye jobb. Jeg brukte mye tid på å tilpasse lydovergangene slik at de skulle bli så lite fremtredende som mulig.

4. Kommentarer til oppgaven og prosessen

Denne oppgaven var veldig lærerik og interessant å jobbe med. Det jeg definitivt lærte mest av var å filme eksterne profesjonelle aktører. De hadde gjerne dårlig tid så det var ingen mulighet for å gjøre opptakene flere ganger om noen ting skar seg. Jeg var derfor nødt til å være veldig godt forbredt, og superskjerpet under opptakene.

Videre lærte jeg også mye av redigeringsarbeidet. Spesielt lydarbeidet var i denne oppgaven veldig omfattende!

Magasindesign

Denne oppgaven tok meg mye tid å lage. Det skyldes at jeg valgte en ganske omstendelig løsning med mye detaljer som viste seg å bli veldig tidkrevende.. For å løse oppgaven brukte jeg selvsagt Indesign, men også Photoshop. Min forside er i CMYK farger. Vi har fått prentet inn at CMYK er for trykk så jeg var trodde at vi måtte bruke CMYK-farger i denne oppgaven. Jeg så derimot at Morteza hadde skrevet i fronter at vi skulle bruke RGB-farger. Dette ble lagt ut etter jeg var ferdig med oppgaven min.. Jeg har derfor valgt å holde på CMYK-fargene.

Jeg ønsket å lage en enkel og stilren forside. Videre ønsket jeg å få frem elementer fra hverdagen som student på digital mediedesign. Jeg bestemte meg for å gjøre dette gjennom overskriften. Jeg fant frem ulike gjenstander som jeg bruker mye i forbindelse med studiene. Jeg tok deretter bilde av disse gjenstandene med hvit bakrunn. Så justerte jeg alle bildene i Adobe camera RAW og la de inn i Photshop. Deretter klippet jeg ut en og en gjenstand og la til ny farge på bakgrunnen. Fargene jeg valgte var ulike farger jeg hentet fra bildet som skulle være på forsiden. Jeg hentet ut disse fargene med eyedropper tool. Etter det var gjort, la jeg inn alle bildene i et photoshopdokument og skalerte disse. Så laget jeg et mønster. Dette mønsteret brukte jeg deretter til å fylle bokstavene i mediedesign.

Etter det var gjort begynte jeg med bildet. Ideen om å lage ”fotomosaikk” i dette bildet kom ganske ut av det blå. Jeg skjønte fort at dette kom til å bli mye arbeid men jeg valgte likevel å å prøve det. Jeg ville at alle studentene ved studiet skulle være en del av bildet. Derfor lastet jeg ned alle profilbildene av elevene fra fronter og la de inn i photoshop. Jeg skalerte og tilpasset alle bildene og satte de inn i et photoshopdokument. Dette tok lang tid da det var veldig mange bilder. Deretter lagde jeg et mønster med bildene. Dette mønsteret brukte jeg til å fylle et lag som lå over hovedbilde. Deretter behandlet jeg dette laget for å få det underliggende bildet til å skinne gjennom.

Tilslutt satte jeg sammen tekst og bilde i indesign og eksporterte det til pdf. og png-format.

Interiørmagasin La Casa

Jeg bestemte meg for å ta bildet for oppgaven i en av de mange interiørbutikkene i Oslo. Etter å ha sjekket litt rundt fant jeg etter hvert et motiv jeg likte. Jeg tok bildet med mitt 18-135mm objektiv fordi jeg  var avhengig av å ha litt vidvinkel for å få med mest mulig fra relativt kort avstand. Jeg tok bildet i stående format fordi magasinforsiden er i dette formatet. Siden bildet ble tatt innendørs var jeg avhengig av å åpne blender så mye som mulig som er 3,5 på dette objektivet. Dette var imidlertid ikke noe problem med tanke på dybdeskarpheten fordi det jeg tok bildet av ligger i relativt likt plan. Derfor fikk jeg alt i fokus selv med f3,5. Lukkertid satte jeg til så lang jeg kan klare håndholdt. Dvs. rundt 1/30 sekund. Isoen ble satt så lavt som mulig, 125. Ideelt sett burde jeg hatt et stativ for å ta dette bildet da det hadde gitt meg større frihet med tanke på eksponeringsinnstillingene. Jeg tok bildet i RAW format for å få mer justeringsmuligheter i ettertid.

Etter å ha justert bildet i camera Raw la jeg det inn i photoshop. Det første jeg gjorde var å retusjere vekk noen forstyrrende elementer. Det var noen klokker på veggene så jeg fjernet disse. Jeg fjernet også en lampe. For å gjøre dette brukte jeg markering med autofyllfunksjonen og klonestempelet. Etter dette var unnagjort begynte jeg å sette inn tekst. Jeg fant en litt spenstig font fra dafont.com som jeg lastet ned. Som tittelen for magasinet valgte jeg det spanske ”La Casa”. Siden det er en sofa som er hovedmotivet i bildet mitt valgte jeg å ha sofa som hovedtema i bladet. Jeg ønsket å finne en farge på teksten som gjorde at teksten kom klart frem. Jeg ønsket også at fargen på teksten skulle være livlig og ”frisk”. Etter å ha prøvd litt forskjellige farger fant jeg en farge jeg synes passet. Etter jeg var ferdig med tekstarbeidet fant jeg en strekkode og plasserte den inn i bildet. Dette var for å få en mest mulig realistisk fremtoning. Til slutt skalerte jeg bildet og skjerpet det. 

Det manipulerte bildet

Siden jeg selv er veldig reiseglad har jeg valgt å ta utgangspunkt i dette for manipuleringsoppgven. Jeg tok fire bilder; Et av et atlas og tre bilder av meg selv. Bildene av meg viser ulike settinger hvor reiseplaner blir lagt. Det ene bilde viser meg som leser om ulike reisemål. Det andre bildet viser meg som tenker. Det tredje bildet viser meg som hviler og prosesserer ny informasjon og nye tanker. Bildene er tatt i et opplyst rom med en hvit vegg som bagrunn og et hvitt laken som underlag. Dette var bevisst for å gjøre det lettere å klippe ut i Photoshop. Bildene er tatt med stativ for å få samme vinkel for alle objektene i bildet. Jeg valgte også å ta bildene i RAW-format for å få større etterjusteringsmuligheter for farger lyssetting etc..  Når det gjelder lyssetting har jeg omtrent hatt samme lyssetting for alle bildene. Unntaket er bildet der jeg står. Her var jeg nødt til å endre lysettingen noe for å få opplyst hele meg. Etter jeg hadde tatt bildene justerte jeg alle i Adobe Raw for å få så likt lys som mulig. Deretter klippet jeg ut motivene, justerte størrelsen, vridde de for å få de til å passe med atlaset. Videre la jeg til skygger endret bakgrunnen og gjorde litt småjusteringer.

Gavepapiroppgave

Iscenesatt bilde, Sorgen av Kittelsen

Å finne ut hvilket kunstverk jeg skulle iscenesette var en tidkrevende prosess. Siden jeg for tiden befinner meg i lofoten tenkte jeg at et maleri med naturen i fokus måtte være det mest passende å iscenesette. Siden naturen her i lofoten er storslått og typisk norsk tenkte jeg at å gjenskape et bilde av Theodor Kittelsen kunne la seg gjøre. Jeg så gjennom verkene til Kittelsen og festet meg ved maleriet sorgen.

http://www.wikipaintings.org/en/theodor-severin-kittelsen/sorgen

I utgangspunktet er bildet av en gammel kone som går over et snødekt landskap. Selv om det enda ikke er snø tenkte jeg at det kunne være mulig å gjenskape dette bildet på en av lofotens hvite strender. Jeg var avhengig av å ha noen mørke fjell eller liknende i bakgrunnen som kunne skape den mørke kontrasten man ser i maleriet. Jeg måtte også bildet på en solskinnsdag slik at sanden ble mest mulig hvit. Videre måtte bildet tas midt på dagen for å unngå å få skygger fra fjellene rundt i sanden. Da jeg hadde funnet en passende lokasjon for å iscenesette bildet måtte jeg finne et kostyme. Jeg hadde en svart "håndkle-poncho" som tenkte kunne funke. Damen i maleriet har en lang kåpe/kjole. Siden jeg ikke hadde tilgang til hverken kåpe eller kjole tenkte jeg at en svart søppelsekk kunne gjøre nytten. Dette skyldes at objektet i bildet er såpass langt unna og man vil derfor ikke se så mye detaljer.

Å gjennomføre iscenesettingen viste seg fort å bli litt mer utfordrende enn jeg hadde forventet. Dette skyldes at jeg gjorde det helt alene og benyttet kamerastativ og selvutløser. Etter å ha prøvd litt fant jeg ut at motivet måtte være noe lenger unna kameraet enn jeg i utgangspunktet hadde trodd. På kameraet mitt er maksimal selvutløsertid 10 sekunder. Dette medførte at jeg hver gang hadde kun 10 sekunder fra jeg trykket på utløseren til jeg måtte være i posisjon. Der jeg måtte stå var omlag 30 meter fra kameraet. Jeg valgte å benytte en middels rask lukker på 1/250 sek for å være sikker på at jeg fikk fryst motivet. Jeg var også avhengig av å ha en relativt liten blenderåpning for å få god dybdeskarphet. Da bildet ble tatt på høylys dag benyttet jeg lavest mulig ISO (100). 

Det må ha vært et komisk syn, for hver gang jeg trykket på utløseren ble jeg nødt til å spurte over sanden for å komme tidsnok i posisjon. Det faktum at jeg var ikledd en "søppelsekkkjole" vanskeliggjorde dette betraktelig. Etter en rekke forsøk fikk jeg tilslutt et bilde jeg var fornøyd med.

Jeg tok bildet i kamera RAW og det første jeg gjorde var å etterjustere bildet i Adobe camera raw. Jeg gjorde noen endringer for å få sanden lysere og fjellene i bakgrunnen litt mørkere. Deretter behandlet jeg bildet i photoshop. Når man skal gjenskape et maleri og har bildet foran seg i photoshop er det lett å bli fristet til å gjøre en rekke endringer for å få det til å likne mest mulig på orginalen. Jeg prøvde imidlertid å begrense meg når det kom til etterbehandling. Det eneste jeg gjorde var å beskjære bildet,  fjerne noen steiner på stranden, legge inn økt støy filter, samt å legge inn et lag med et hvitt slør for å få bildet til å få samme utrykk som orginalmaleriet.