Oppgave 2 - Fagformidling

I dette blogginnlegget vil jeg si litt om hvordan jeg løste oppgave 6 i faget Film og digital video ved studiet Digital mediedesign ved Høgskolen i Telemark , der temaet var «lydbilde i film»

Oppgaven besto i at vi skulle filme en scene på maks 60 sekunder der kameraet var plassert enten i eller utenfor et rom og viste bilde av en dør, et vindu eller lignende. Vi skulle så ta opp og registrere lyder innenfra eller utenfra og fortelle hendelsen gjennom lydbilder. Filmen skulle ha minst tre lydspor.

Jeg valgte i denne oppgaven å filme ut av et vindu fra en hytte på fjellet i vinterferien. Jeg ønsket å formidle den følelsen jeg fikk i vinterferien og den kontakten jeg hadde med naturen i fjellet. Bildet i filmen er statisk, det er lydbildet som uttrykker handlingen i filmen.

Jeg filmet flere ulike klipp der det ene var et statisk bilde av det snødekte landskapet vi så fra vinduet. Deretter filmet jeg ulike klipp utenfor hytten der fokuset var å få fanget passende lydbilder. Filmen redigerte jeg i Adobe Premier Pro. 

Det visuelle bildet var utsikten fra vinduet uten tilhørende lydspor. Lyden i filmen ble satt sammen av ulike lydsekvenser i tre lydspor. Alle lydsporene er tatt med videokamera, med ulik avstand til lydkilden. jeg har kun beholdt lydsporene i hvert klipp. Filmen inneholder totalt tre lydspor.  Det første lydsporet forteller en handling der man hører:

- en dør som blir åpnet og lukket

- en som går ned en liten trapp og så videre på snøen

- en som går på snøen og så stopper.

- en som går på ski - to ulike klipp det ene repeteres og fades ut .

- fuglesang samme klipp repeteres to ganger.

 Det andre lydsporet er tre repeterende sekvenser av fuglene rundt hytten

Det tredje lydsporet er repeterende sekvenser av vanndråper som drypper fra takrennen.

Jeg har brukt samme klipp av en fugl som synger i lydspor 1 og 2, men i lydspor 1 har jeg gitt økt volumet på lydklippet. 

I Audio Track Mixer justerte jeg lydstyrken til de ulike lydsekvensene, ved å bruke "volumknappen" som vist i illustrasjonen nedenfor.

Deretter la jeg på effekten exponential fade på enkelte av klippene. Flere av lydklippene brukte jeg for øvrig gjentatte ganger for å få en lengere sekvens.

Det var en veldig artig oppgave, og jeg er ganske så fornøyd med resultatet :-)

Her er en link til filmen

Oppgave 6 - Appdesign

I denne oppgaven i emnet Webdesign i Digital mediedesign ved Høgskolen i Telemark skulle vi lage en app for en kulturbedrift. Jeg valgte da å lage en app for Sjømannskirken i Paris. Jeg tok utgangspunkt i deres nettside og brukte tekst og bilder fra denne. I forkant av at jeg startet arbeidet, spurte jeg de ansvarlige ved Sjømannskirken om tillatelse til dette.


Appen ble laget i programmet appshed. Dette er et svært brukervennlig program, men jeg finner det litt irriterende at gratisversjonen har forstyrrende reklame.

En viktig ting å tenke på når nan jobber i dette programnet, er at man må passe på at bildene man vil bruke har passe størrelse. Det vil si at de ikke bør overstige 300kb. Utover dette er det ikke nødvendig med mye annen forkunnskap i programmering, da det er lett å forstå hvordan man skal gå frem.. Siden har også linker til korte opplæringsvideoer, som gir en god bruksanvisning i de ulike programelementene..


Jeg syntes det var veldig artig å jobbe i dette programmet, og det er nok ikke den siste appen jeg kommer til å lage.



Her er link og QR koden til appen min:

http://apps.appshed.com/492727/

Oppgave 4 - Bloggdesign

I denne oppgaven i faget Web- og informasjonsdesign i Digital Mediedesign ved Høgskolen i Telemark, skulle vi lage et nytt design til bloggen vår.

Jeg startet med å lage en ny header i Adobe Illustrator. Jeg brukt to av yndlingsmotivene og forsøkte å lage en bakgrunnsfarge som harmonerte med disse. Bredden på headeren er 950 px og høyden er 224 px. Jeg har brukt fontene Monotype Corsiva og Verdana.



Jeg satte inn et bilde av Torneroseslottet i DIsneyland og et av Eiffeltårnet. Jeg syntes at disse bildene harmonerte fint med hverandre, og begge motivene representerer meg og mitt liv,

Jeg la et lag med en graderende blåfarge bak bildene, og brukte "Pen tool" for å lage en "path", deretter brukte jeg "type on a path tool" for å få litt liv i teksten.


Slik ble det ferdige resultatet:

Som bakgrunn valgte jeg det samme bildet av Eiffeltårnet som i headeren, men fokuserte på å få frem vannstrålene fra fontenene fremfor andre deler av bildet. Jeg "låste" bildet slik at bildet er statisk selv om man skroller nedover.

Jeg endret fargene på teksten og bakgrunnen på fanene slik at de samsvarer med resten av designet. Jeg endret også faneteksten, sideteksten og innleggsteksten til Verdana slik at jeg ikke fikk så mange ulike fonttyper.

På studiet Web- og informsjonsdeign har vi også laget våre egne nettsider. Her er link til Min nettside

Oppgave 2 - fagformidling i Web- og informasjonsdesign

Til denne oppgaven i faget Web- og informasjonsdesign i studiet  Digital Mediedesign ved Høgskolen i Telemark har jeg valgt å ta utgangspunkt i Oppgave 3 i dette faget. I denne oppgaven skulle vi lage et nettside som besto av minst fire sider. Jeg valgte da å lage en nettside om mine hjemsted.

Som verktøy har jeg brukt Adobe Dreamweaver. I dette programmet foretrekker jeg å bruke en visning der man ser bilde av nettsiden og kodene samtidig slik vist under.

Når man skal lage opp en nettside i Dreamweaver er det viktig å ha et oversiktlig mappesystem. Jeg startet derfor med å lage en mappe for oppgaven der alt innhold til denne sidenblir lagret, og lagde så 3 undermapper til Bilder, CSS-regler og Sites.

Jeg lagde først en indexside ved å høyreklikke på oppgavemappen og velge «new file» Denne kalte jeg «indexoppgave3.html». Denne siden er inngangsporten til denne nettsiden. De andre sidene lager jeg på tilsvarende måte, men da inne i undermappen "Sites"

Det er lurt ikke å bruke mellomrom mellom ordene når du gir nettsiden navn, dvs. ikke bruke «index oppgave 3.html», slik at man ikke får andre tegn med i nettadressen. 

Når en skal bygge opp en nettside er det viktig å plassere innholdet i "divers". Dette for at de ulike elementene skal holde seg på plass.

En wrapper er en "diver" som holder innholdet på plass på siden. Jeg starter derfor med å sette inn denne diveren ved å bruke funksjonen Insert -> div i panelet på høyre side. Man kan også bruke hovedmenyen. Da får jeg opp et vindu som ser slik ut.

Som dere ser velger jeg i dette vinduet under Insert: «After start of tag», deretter skriver jeg «body» i neste felt, og under feltet ID skriver jeg «wrapper».

 

Videre trykker jeg på boksen «New CSS Rule», og velger bare «ok» i vinduet som åpner seg.

Da får jeg opp et tredje vindu. Siden vi nå lager en wrapper, heter det "CSS Rule definition for #Wrapper". I dette velger jeg «box» i listen på venstre side, og setter inn de verdiene jeg ønsker for denne diveren. For wrapperen valgte jeg verdier som vist under. Til slutt trykker man ok i alle de tre vinduene.

I starten glemte jeg å sette verdiene i paddingen til auto for høyre og venstre, noe som førte til at innholdet på siden ikke ble midtstilt. Dette justerte jeg i etterkant i CSS designeren.

Deretter satte jeg med tilsvarende metode inn divere for "header", "MainContent" og "footer" som vist i bildene under. Til alle disse tre diverne valgte jeg auto i bredde og i høyde satte jeg "headeren" til 100 px, "footeren" til 60px, og "MainContent" varierende høyde på de ulike sidene alt etter innhold.

Det er også lurt å lage divere inne i de ulike elementene slik at innholdet kommer der du vil. Inne i diveren MainContent lagde jeg tre bokser. Når man setter inn bokser eller bilder i en diver, er det viktig at man på forhånd har regnet ut hvilke størrelser man må ha på de ulike elementene for at siden skal få det utseendet man ønsker. For eksempel om bredden på wrapperen er 960 px, kan ikke totalbredden på de andre diverne overstige dette tallet. 

I min oppgave satte jeg også inn fire linkebokser i headeren. I starten brukte jeg samme fremgangsmåte som beskrevet tidligere. Men i vinduet for Insert Div, skrev jeg "linker" inn i feltet Class. Dette fordi jeg ønsker å bruke CSS reglen flere ganger. Dersom man bruker feltet "ID", kan koden brukes kun en gang. Det finnes derfor på en side kun en "wrapper", "header" etc. . 

I CSS designer kan man for øvrig i etterkant endre de ulike diverne slik man ønsker. 

Etter at jeg har fått laget alle diverne i ønskede størrelser og plasseringer, endret jeg bakgrunnsbilder og farger slik at jeg fikk det utseendet på nettsiden jeg ville ha. Jeg valgte å bruke tre ulike farger som går igjen i tekst og bakgrunner. Jeg valgte jordnære farger slik at de ikke skulle ta for mye oppmerksomhet fra bildene.

Headeren til de ulike sidene lagde jeg i Adobe Illustrator. Dette fordi jeg har større muligheter til å variere type skrift og plassering av denne i Illustrator enn i Dreamweaver.

Når man setter inn bilder er det viktig at filene ikke er for store. Det er mulig å justere størrelsen på bildene under "properties", men det anbefales å tilpasse bildene på forhånd,

Det er også mulig å endre utseendet på linker under page properties, som man  finner rett under linkefeltet i properties.

På en av mine sider hoppet linkene, og selv om jeg endret kodene slik at de var nøyaktig lik de andre sidene, fortsatte de å hoppe, Jeg fjernet også linkene en gang og satte inn nye, for å se om det hjalp, men fikk det ikke til. Forhåpentligvis finner jeg ut av det underveis i læringsprosessen, Jeg har jo så vidt startet...

Her er en link til det (så langt) ferdige resultatet, Mitt hjemsted

Oppgave 1 - Film og Digital video - Overraskelsen

I denne oppgaven skulle vi lage en film på maks 2 minutter der en person ble overrasket. Jeg valgte å bruke familiens yngste medlem, og "overrasket" henne med å "vinne" billetter til en konsert med hennes store idol, Violetta. Jeg brukte vårt Samsung NX 1000 kamera, da jeg vil vente til etter samlingen med å kjøpe et filmkamera, for å være sikker på at jeg kjøper et kamera som tilfredsstiller kravene. Det var ganske krevende, men morsomt, å utforske Adobe Premiere. Jeg ser at jeg har mye å lære, og gjorde enkelte nybegynnerfeil. Etter å ha satt sammen og redigert klippene, lagret jeg videoen som en MP4 fil. Etter å ha satt inn videoen i bloggen, ønsket jeg å forbedre kvaliteten.  Jeg oppdaget da at selv om jeg hadde lagret prosjektet underveis, og eksportert MP4- filene, var det ikke mulig å åpne prosjektet på nytt. Det er godt at jeg er i starten av læringsprosessen og at dette var mitt første prosjekt. Jeg har mye å lærer og gleder meg til å utforske dette programmet videre.

Her er videoen:

Oppgave 2 - Digital grafisk design - Fagformidling

I oppgave 3 i faget Digital Grafisk Design ved studiet Digitalmediedesign ved Høgskolen i Telemark, skulle vi designe et gavepapir og en merkelapp i Adobe Illustrator. Jeg valgte å lage et design til min snart 10 år gamle datter Isabelle.

Jeg åpnet et artboard i iAdobe llustrator. Jeg startet med å bruke pen tool verktøyet for å lage et hjerte. Pen tool verktøyet fungerer slik at om du holder venstre musetast inne mens du tegner blir det en kurvet linje, men hvis du ikke holder musen inne blir det en rett strek. Om man ønsker å konvertere en rett strek til en kurvet linje kan man velge direct selection tool, markere på linjens anchor point og så trykke på knappen convert selection anchor points to smooth.

  

For å tegne et hjerte valgte jeg pen tool holdt musen nede og lagde den første kurven ved å dra musen i mellom 45˚ og 60˚ vinkel mot høyre.

Deretter lagde jeg en ny svakt kurvet linje med utgangspunkt i sluttpunktet til den første ved å føre musen vertikalt nedover, litt mot venstre.

Da jeg hadde laget den andre kurven, holdt jeg shift inne og førte musen vertikalt oppover og samtidig litt til venstre og lagde en ny svak kurve som var omtrent like lang som kurve nummer 2.

 Til slutt lagde jeg den siste kurven i hjertet ved samme fremgangsmåte som den første kurven.

 

For å justere de ulike kurvene , slik at "hjertet# ser ut som et hjerte, brukte jeg direct selection tool og flyttet på anchor points, paths, og/ eller justerte linjenes kurving med handles til jeg fikk ønsket resultat.

 Det ferdige hjertet dupliserte jeg flere ganger og endret størrelse, farge og «retning», slik at jeg fikk mange ulike hjerter ut i fra den originale malen.

Deretter lagde jeg ballonger ved å bruke shape tools, elipse.

 For å få til ballongtråden brukte jeg pen tool og lagde kurver ved å holde musetasten inne som beskrevet ovenfor. Ballongene og hjertene valgte jeg å gi effekten blur. Etter at grunndesignet var ferdig brukte jeg funksjonen pattern, slik at jeg fikk et mønster som gjentok seg.

 Kaken lagde jeg ved å bruke shape tools, rounded ectangle.  Jeg satte tre rektangler i tre ulike størrelser over hverandre og valgte så pathfinder, slik at de tre rektanglene ble til en figur. For å dekorere kaken brukte jeg pen tool for å få de buede linjene og shape tools, star tool for å pynte disse buene litt.

 Jeg brukte type tool for å skrive inn teksten på kaken og deler av kakelysene, som var satt sammen av tallet 10 og to lys fra funksjonen symbols.  Til merkelappen valgte jeg kun å bruke hjertene i ulike former.

Til slutt skrev jeg ut gavepapiret og da jeg ikke hadde A3 fargeprinter tilgjengelig måtte jeg lime sammen to A4 ark før jeg pakket inn pakken. Deretter tok jeg bilde av pakken og lagde et dokument i Adobe InDesign som viste mønsteret og merkelappen, den avbildede pakken samt en liten beskrivende tekst om oppgaven.

Oppgave 2- Digital foto- og bildebehandling - fagformidling

Det manipulerte bilde

I oppgave 2 i faget digital foto- og billedbehandling i Digital mediedesign, skulle vi lage en brukerveiledning i maskeringsverktøy i Photoshop, og som verktøy i denne fagformidlingen skulle vi lage et blogginnlegg. Formålet med oppgaven var å sette fokus på læringsprosessen i faglig formidling på blogg. Jeg har valgt å løse denne oppgaven ved å forklare steg for steg hvordan jeg gikk frem i Oppgave 6, hvor vi skulle lage «det manipulerte bildet».

 En fotomanipulering innebærer å endre et originalfoto slik at det får nytt innhold og betydning. I denne oppgaven skulle vi sette sammen minimum tre ulike motiver til en ny komposisjon. I mitt manipulerte bilde «Jardin Public» valgte jeg å sette sammen totalt 5 ulike motiver til ett bilde.  Jeg vil i dette blogginnlegget forklare min fremgangsmåte fra ide frem til ferdig produkt.

 

Ide

Jeg fikk ideen på en tur til byen Honfleur i Normandie. Der hadde de en park med mange flotte blomsterdekorasjoner. Bakgrunnen og skiltet med teksten «Jardin Public» er tatt i parken i denne parken. Disney har i mange år vært min store lidenskap, og jeg har derfor mange ulike figurer i min samling. Jeg valgte ut to figurer som jeg føler passer naturlig inn i en hage. Figuren av Trampe er opprinnelig dobbelt så stor som figuren av Snehvit og dyrene.

Utgangspunktet

 Jeg valgte følgende fem motiver :

 Hvordan bruke maskeringsverktøy i Photoshop?

Jeg åpnet de bildene jeg ønsket å klippe ut motiver fra i Photoshop. Deretter høyreklikket jeg på bakgrunnen i lagpanelet og valgte «dupliser bakgrunnen». Denne la seg så i et nytt lag og jeg konverterte så dette laget til et smartobjekt. For å klippe ut deler av et bilde må man bruke ett av maskeringsverktøyene i Photoshop. Jeg valgte å bruke funksjonen «hurtigvalgsverktøy». Denne funksjonen fungerer slik at når man klikker med musepekeren på motivet velger man ut de delene at et bilde man ønsker å maskere.

Det er viktig å zoome godt inn på bildet når man bruker denne funksjonen. Hvis man får med for mye i utvalget sitt velger man den hurtigvalgstasten som har et minustegn i ikonet:

 Denne funksjonen fjerner markeringer.

Mer om bruk av hurtigvalgsvertøyet i Photoshop finner man her: http://helpx.adobe.com/no/photoshop/using/making-quick-selections.html

Når man har fått med alt det man ønsker å klippe ut fra bildet klikker man så på funksjonen finjuster kant. Der forstørret jeg først bildet til 100 %, klikket så av for smart radius og justerte jeg kantene ved å male over med en myk pensel til jeg fikk ønsket resultat. Deretter valgte jeg å lagre markeringen som nytt dokument med lagmaske.

Jeg fikk da den valgte markeringen som et utklipp med transparent bakgrunn

Jeg brukte denne fremgangsmåten for bildene av kaninen, Snehvit og dyrene og skiltet «Jardin Public». Bildene av kaninen og Snehvit med dyr er tatt inne i stuen i et «bluesceenstudio». Jeg brukte et bluescreenlerret som både underlag og bakgrunn slik at det skulle være enkelt å klippe ut figurene i etterkant. Som lys har jeg kun brukt det naturlige lyset i stuen fra vinduer og taklamper. Jeg brukte tilsvarende fremgangsmåte som for skiltet, men i bildet av Snehvit var det litt gjenskinn i deler av håret som jeg derfor valgte å gjøre litt mørkere ved å bruke et maskeringslag. Kaninen tok jeg mange bilder av i ulike posisjoner, og valgte til slutt ut to bilder som jeg valgte å bruke i ulike størrelser og posisjoner. Skiltet med «Jardin Public» sto ved inngangen til parken. 

Sette sammen ulike objekter til et felles bilde.

 Deretter plasserte jeg utklippene ved å bruke kommandoen "plasser innebygde" der jeg syntes de passet inn i et lag over bakgrunnen. Jeg la så til lagmasker med funksjonen "legg til lagmaske"  og brukte så penselverktøyet med sort og hvit pensel for å henholdsvis få frem bakgrunnen eller få med mer av figurene i utklippene.

Underveis i prosessen så det slik ut:

Tilslutt var alle elementene plassert inn i bakgrunnen:

Lagmasker og justeringslag

Deretter la jeg på en ny lagmaske ved å velge funksjonen legg til lagmaske  .  Deretter valgte jeg  modus «overlapp» og malte over med lys grå for å fjerne noen skygger i nederste venstre hjørne.  Til slutt la jeg på et justeringslag der jeg justerte kurvene noe. Mer om lagmasker finner du ved å følge denne lenken: http://helpx.adobe.com/no/photoshop/using/masking-layers.html#add_layer_masks 

 

Det ferdige produkt:  

"Jardin Public"