Oblig.06 – Photoshoot

I dette innlegget vil jeg presentere bildene som er tatt i forbindelse med oppgaven, presentert i en contact sheet. Videre vil du se printscreens av disse, og bilder jeg har valgt ut som jeg ønsker å bruke.

Torsdag 06.06.2013 fra kl. 16.00 til 18.00 utførte jeg en fotoshoot på Stovnerbanen, og tok totalt over 120 bilder. Dette friidrettsanlegget ble etablert i 1974, og er en av de få fullstørrelse friidrettsarenaene i Oslo. Med meg hadde jeg mitt kamera, Canon 7D, objektiv Canon 50mm, og stativ, samt modell i ført CRAFT trenings- og sportstøy.

En utendørs fridrettsbane er en 400m lang rundbane med to langsider og to svinger. Banen er delt i 6 individuelle baner. Norsk friidrett er organisert av Norges Friidrettsforbund. Når det kommer til løpeovelser skilles det mellom sprint, mellomdistanse og langdistanse, alt fra 60 meter til 10 000 meter.

contactsheet

Skjermbilde 2013-06-11 kl. 13.14.44Skjermbilde 2013-06-11 kl. 13.15.06Skjermbilde 2013-06-11 kl. 13.15.18

 

Skjermbilde 2013-06-11 kl. 13.15.33Skjermbilde 2013-06-11 kl. 13.15.43Skjermbilde 2013-06-11 kl. 13.15.53

 

Under shooten testet jeg lysforholdene, og vinkelen på motivet. Mange ulike innstillinger, vinkel og komposisjon er testet ut. Jeg har også testet ut hvordan det fungerer å ha modellen lengre unna og nærme. Hva slags forskjell utgjør dette, og hva slags uttrykk får jeg? Noen bilder er tatt i landskap, og andre i portrett. Det var ønskelig å prøve å få frem logoen i klærne, men dette skulle vise seg å være svært vanskelig. Videre var det ønskelig å få med friidrettsbanen slik at man lett skulle oppfatte hva dette var og hvor.

Utifra shooten på over 120 bilder har jeg plukket ut 8 bilder, 4 med motion freeze og 4 med motion blur, som mitt så langt resultat. Videre skal jeg velge 2 bilder av disse 8 som jeg kommer til å ende opp med å levere til denne oppgaven. Jeg ser ikke noe behov for å ha en fotoshoot til, siden jeg er fornøyd med det jeg fikk til i første shooten. Under er de 8 bildene samlet i en PDF, samt printscreen.

contactsheet2

Skjermbilde 2013-06-11 kl. 14.09.09

Kilder

https://no.wikipedia.org/wiki/Stovner_stadion

http://snl.no/friidrett

http://no.wikipedia.org/wiki/Friidrett

Oblig.05 – Prosess

Her vil jeg vise prosessen med arbeidet som jeg har gjort med illustrasjonen som jeg skal bruke sammen med Sunlight produktet i den ferdige plakaten. Bilde til venstre har jeg selv tegnet analogt, først med blyant på hvitt ark, og dereter med en svart pen (for at det skal bli tydligere etter scanning). Jeg har utifra moodboardsene tegnet denne damen. Siden jeg må tenke på hvor produktet skal plasseres, er den ene hånden utstrakt siden det er tenkt at såpen skal være/ligge i hånden.

Jeg scannet tegningen og åpnet det i Illustrator. Videre brukte jeg pen tool og tegnet rundt. Resultatet ser dere i bildet nr.2. Dette resultatet ble jeg ikke så fornøyd med, og selv etter mye arbeid visst jeg at det ville kreve mye mer arbeid for å få til et resultat jeg ønsket. Derfor endte jeg opp med å live trace den originale tegningen min.
damedame_test01

Deretter fortsatte jeg å jobbe i programmet, og begynte å fargelegge illustrasjonen. Det tok mye tid å velge farge, samt å planlegge hvor fargene skulle være. Dette arbeidet krevde tålmodighet og nøyaktighet. Under er noen printscreens av arbeidet mitt underveis.
Skjermbilde 2013-05-27 kl. 19.12.39Skjermbilde 2013-05-27 kl. 19.48.14

Da alle fargene var fylt ut zoomet jeg inn og oppdaget mange hvite prikker = detaljer hvor det ikke var kommer noe farge. Dermed måtte jeg gå over hele tegningen og se til at alle hvite prikker og områder ble fylt med riktig farge.Skjermbilde 2013-05-27 kl. 20.17.23

Til bakgrunn i plakaten ønsker jeg å bruke et gammelt papir i gultone. Siden dette er det jeg anser som en typisk vintage farge, og noe som går igjen i mange av bildene i moodboardene, var det er naturlig valg.
Skjermbilde 2013-05-28 kl. 11.18.34

I bildet under har jeg laget et nytt lag over bakgrunnen, og brukt rounded rectangle tool for å lage en form. Videre har jeg valgt en annen gul-farge. Deretter valgte jeg Layer -> Layer mask -> reveal all. På grunn av dette kunne jeg nå bruke brush tool, velge svart farge og lage noe mønster i overgangen i formen (spesielt rundt kanten) slik at dette ikke skulle bli så tydelig. Resultatet synes jeg ble svært interessant og spennende, med et gammelt uttrykk.
Skjermbilde 2013-05-28 kl. 11.27.54

Videre i testing av design har jeg lagt til illustrasjonen av damen hvor jeg tegnet over med pen tool. Denne illustrasjonen er gjennomsiktig, og denne effekten er ikke ønskelig til den ferdige resultatet. Videre har jeg prøvd meg med noe svart bakgrunn, med hvit tekst over. Inspirasjonen til dette kan dere se i bildet til høyre. Et bilde jeg fant tidlig i moodboards-fasen, og som jeg synes var svært interessant. Særlig bruken av både serif og sans-serif, samt versaler og minuskler var en interessant vinkling/løsning. Noe jeg ønsker å prøve.Skjermbilde 2013-05-28 kl. 11.38.10$(KGrHqIOKosE3FKKKyswBNz4rGopt!~~0_35

– Annette B. D.

Oblig.05 – Lynda.com

I dette innlegget ønsker jeg å vise til noen videoer jeg har benyttet på Lynda.com for inspirasjon, teknikk og øvelse. Under linkene er det noen printscreens av hvordan videoene så ut, og litt om hva de tok for seg.

http://www.lynda.com/tutorial/741?org=noroff.no
Skjermbilde 2013-05-23 kl. 13.04.09Skjermbilde 2013-05-23 kl. 13.14.55Skjermbilde 2013-05-23 kl. 13.20.26Skjermbilde 2013-05-23 kl. 14.06.58Skjermbilde 2013-05-23 kl. 15.11.18Skjermbilde 2013-05-23 kl. 20.58.29Skjermbilde 2013-05-23 kl. 15.18.14Skjermbilde 2013-05-23 kl. 16.32.05

http://www.lynda.com/Photoshop-tutorials/margo-chases-hand-lettered-poster-start-to-finish/686-2.html?srchtrk=index%3a1linktypeid%3a2q%3aposterpage%3a1s%3arelevancesa%3atrueproducttypeid%3a2
Skjermbilde 2013-05-23 kl. 21.01.25Skjermbilde 2013-05-23 kl. 21.02.06Skjermbilde 2013-05-23 kl. 21.02.27Skjermbilde 2013-05-23 kl. 21.03.17

http://www.lynda.com/tutorial/109450?org=noroff.no

Skjermbilde 2013-05-28 kl. 13.49.00Skjermbilde 2013-05-28 kl. 13.51.30

 

Skjermbilde 2013-05-28 kl. 13.51.46Skjermbilde 2013-05-28 kl. 13.52.03

 

Skjermbilde 2013-05-28 kl. 13.52.35Skjermbilde 2013-05-28 kl. 13.55.51

 

Skjermbilde 2013-05-28 kl. 13.56.04Skjermbilde 2013-05-30 kl. 12.34.32

Om jeg benytter meg av flere videoer vil dette innlegget bli oppdatert.

– Annette B. D.

Oblig.08 – Ferdig

Idag er innleveringsdagen for obligatorisk oppgave 08 – Flash. Igår klarte jeg heldigvis og ordne opp i problemene som oppsto ved integrering av fotogalleri og banner til mitt enkle nettsted. Jeg fryktet det kom til å bli vanskelig, og det var akkurat det som skjedde.

Først gikk jeg igjennom fotogalleriet; sjekket at alt var på plass og slik jeg ønsket. Deretter eksporterte jeg FLA filen til en SWF fil, altså en komprimert fil. Lagret denne filen i samme mappe som banneret. Jeg åpnet banneret i Flash, sjekket at animasjonen fortsatt fungerte og at alt var på plass. Deretter åpnet jeg Action Script vinduet og kodet riktig URL i parentesene, slik som vist under.

Jeg eksporterte denne til en SWF fil, og lagret i samme mappe som galleriet. Videre åpnet jeg Adobe Dreamweaver, index siden. Her importerte jeg banneret og la den inn nederst på siden. Jeg hadde allerede lagt til fotogalleriet i en egen Flash mappe, så denne var det bare å laste opp. Etter en del forsøk på å teste ut resultatet på mitt enkle nettsted, kom denne meldingen opp ved å klikke på banneret:

Noe var altså feil i kodingen til banneret eller plasseringen i mappene. Jeg prøvde meg frem; forandret kodingen, forandret mappeplassering, forandret filnavn etc. Den samme meldingen kom fortsatt opp. Etter mange timer begynte jeg å bli veldig frustrert, og da jeg spurte om hjelp på forumet til Noroff følte jeg meg både dum og fortvilet når jeg ikke skjønte forslagene de kom med. Uansett, etter mye fortvilelse greide jeg det tilslutt. Jeg lagret banneret som SWF på nytt, med et annet filnavn, la det til i Dreamweaver med en annen tittel, og lastet opp på nytt. Problemet var mest sannsynlig at filnavn og tittel var det samme, når jeg forandret dette var problemet løst.

Nå håper jeg virkelig at alt fungerer slik jeg ønsker, og at det fungerer likt på alle maskiner. For å komme til hovedsiden på mitt enkle nettsted hvor banneret er plassert, klikk her.

Banneret ser slik ut, og er allerede halvveis i animasjonen i denne printscreenen. Jeg har lagt til en svart ramme på banneret og sidene i fotogalleriet, for å skille de fra nettstedet og for å skape en bedre helhet i designet.

For å komme direkte til Flash fotogalleri, bruk denne linken, her.

Først kommer du til hovedside 1, som viser forsiden til fotoessayet og galleriet med fotografi, tittel og rammer. Deretter kommer du til hovedside 2, som viser titler til hvert bilde, samt tittel med tekst til fotogalleriet. Jeg håper teksten er med på å veilede brukeren til å forstå hva de ulike knappenes funksjon er. Dette er noe jeg har brukt mye tid på å få til, og for å forstå hvordan det fungerer anbefaler jeg å sjekke det ut. Fra denne siden kommer brukeren til selve galleriet, hvor knapper blir brukt for å ta brukeren tilbake eller videre i fremvisningen, eller tilbake til hovedside 2.

En annen viktig ting til denne oppgaven er rapporten, som teller 20%. Jeg legger mye arbeid i rapporten, det er veldig viktig for meg at denne fremstår profesjonelt og at den reflekterer min prosess og arbeidsmetode, samt idé og utvikling. Her kan jeg bruke litteratur og leksjoner fra Noroff som kilder, og begrunne mine valg. Hva har jeg lært? Hvordan har jeg lært det? Hvorfor? Hva har jeg gjort og hvordan?

Dette er noe jeg prøver å svare på i rapporten. I rapporten følger jeg et oppsett gitt av Noroff, hvor det starter med en innledningsdel, deretter en del om research og arbeidsprosess, videre en del om designvalg, så en del med egenevaluering og konklusjon, og tilslutt kildehenvisning og referanser. For de som ønsker å lese rapporten, totalt 10 sider, bruk linken under.

Rapport Oblig.8

– Annette B. D.

Oblig.08 – Banner prosess

Nå begynner banneren, som skal reklamere for fotogalleriet, å bli ferdig. To dager før innlevering gjenstår det å gå igjennom Flash arbeidene mine, ferdigstille rapporten og få integrert banneren på mitt enkle nettsted, samt laste opp fotogalleriet. Jeg er veldig spent på om jeg klarer å få til dette på første eller andre forsøk, og gleder meg til å få alt på plass, samt vise dere hva jeg har jobbet med i 5 uker.

Banneren skal inneholde en enkel animasjon. Jeg har valgt å lage en animasjon av en bukse/jeans som blir brettet, og har jobbet med fire hovedstadier i animasjonen. Disse tegningene har jeg tatt prinscreens av, så dere kan se hvordan buksen ser ut i de ulike stegene. Først en tegning av en jeans i full lengde og bredde, bakfra. Deretter en tegning av en jeans som er brettet til den ene siden, hvor det andre «beinet» ligger bak. Videre en tegning i prosessen som viser hvordan buksen ser ut idet den blir foldet en gang. Den siste tegningen viser hvordan en jeans ser ut når den er ferdig brettet, kompakt og plassbesparende.

 

Jeg har brukt veldig lang tid på å utvikle disse fire stadiene i animasjonen, og det har vært svært krevende å bruke Adobe Flash sine tegneverktøy. Jeg har allerde gjort noen forandringer til tegningene for å forenkle de enda mer. Etter mye jobbing med å tegne og finpusse på buksene har jeg laget et movie clip. Jeg har brukt en blå farge i stroke for å illustrere hvilken farge jeansen har. Jeg startet med å velge Create Shape Tween mellom de fire tegningene, og laget en animasjon på tilsammen 10 sek. Videre jobbet jeg med plassering av shape hints, altså hint man kan legge til for å få mer kontroll over animasjonen. Problemet mitt var at mellomposisjonene fra det ene stadiet til det andre ble helt feil, og absolutt ikke slik jeg hadde tenkt det. Jeg prøvde videre, og jobbet svært lenge med å få tweeningen slik jeg ønsket. Resultatet ble greit nok for å være nybegynner, men jeg følte meg veldig usikker på om dette kom til å bli godkjent.

Min eneste mulighet for å rette opp i animasjonen var rett og slett å starte på nytt, men jeg hadde fortsatt mine fire stadier å arbeide etter. Jeg opprettet et movie clip, startet med det første stadiet, og forandret tegningen i hver enkelt ramme. Deretter fortsatte jeg med å legge inn 2 sek pause, for deretter å jobbe videre med det andre stadiet, samt gradvis forandre tegningen. Arbeidet fortsatte med pause, steg 3, lage forandringer i 24 frames, pause, steg 4, pause. Animasjonen min ble 10 sek denne gangen også, men selve animasjonene kun 1 sek hver, med 2 sek pause/hold. Jeg har jobbet utrolig presist og vært nøyaktig med plassering, samt hvordan jeg har laget animasjonen. Mye tid er blitt brukt til å gå gjennom og rette opp animasjonen, og jeg føler selv jeg er mer tilfredsstillt ved dette resultatet.

På scenen skrev jeg inn tekst som skal brukes på banneren, og la til jeans animasjonen min. Måtte jobbe nøyaktig med plassering her også, og hvordan de ulike elementene skulle stå i forhold til hverandre. Tilslutt la jeg til en effekt på fotoessayets tittel for å få banneren mer interessant, en Clockwise rotasjon, som skal gjenta seg 2 ganger i sekundet. Utfordringen var å få dette til å stoppe akkurat i det animasjonen starter.

Jeg har valgt å benytte de samme fargene på animasjon og tekst som i fotogalleriet, for å skape en helhet og følelse av at alt henger sammen. For å få banneren til å fungere som en knapp/peker har jeg opprettet et button symbol og laget en knapp som er like stor som banneren, altså 640 px x 320 px. Knappen er usynlig og har kun innhold på Hit- stadiet. Fra banneren skal brukeren kunne trykke og komme direkte til fotogalleriet. Se printscreen under for hvordan banneren ser ut i scenen, det lyse blå laget illustrerer knappen.

– Annette B. D.

2.5 Dreamweaver – Wireframe

Åpne den eksisterende index.html filen du laget i forrige uke, del så innholdet med id attributter. Du skal lage en wireframe som viser hvordan nettstedets struktur skal presenteres visuelt.

I denne oppgaven har jeg fått testet ut programmet Adobe Dreamweaver, og praktisk erfart hvordan man strukturerer elementene på en nettside. Wireframe er selve rammeverket til et nettsted, og hvilke byggeklosser siden har. Jeg fjernet linken til CSS dokumentet, siden jeg ville fokusere på byggeklossene i denne oppgaven. Har brukt Insert Div tag i Dreamweaver, valgt og markert byggeklossene #header, #mainContent, #ingress og #footer (#sideBar er ikke benyttet i mitt tilfelle). Selve byggeklossene får jeg ikke opp i en egen «illustrasjon», og vet ikke om dette er mulig å få til. Her er iallefall printscreen av HTML-dokumentet (code-view) og HTML-dokumentet (design-view).

– Annette B. D.