Mappeinnlevering web 2.semester
Mappeinnlevering 2. semester var en obligatorisk innlevering der vi skulle samle alle de obligatoriske oppgavene fra dette semesteret (web/digital) på en nettside som skulle inneholde linker til alle oppgavene. Det var valgfritt om vi laget nettsiden i HMTL eller Flash. I tillegg til obligatoriske oppgaver kunne vi valgfritt også legge til læringsaktiviteter / andre arbeider. Mappen skulle designes på en måte som representerer meg som designer.
Her er min digitale mappeinnlevering for 2. semester multimediedesign:
Jeg har kalt den ”Digital portefolio” og den inneholder link til følgende obligatoriske oppgaver fra 2.semester:
- Obligatorisk oppgave 06 – Enkelt nettsted
- Obligatorisk oppgave 07 – Fotoessay (PDF-format)
- Obligatorisk oppgave 08 – Fotoessay (Flash webside basert på fotoessayet i oppgave 07)
- Obligatorisk oppgave 08 – Flash interaktivt banner
- Læringsaktivitet: WordPress nettside www.brunmark.no (jeg gjorde denne i 2.semester i stedet for læringsaktiviteten ”Regnskapsfirma”.
- Læringsaktivitet: Lysbruk i portretter de siste 1000 år (Research + PDF)
- Diverse foto tatt i løpet av studiet som ligger på min Flickr-konto.
Valg av teknisk løsning for mappeinnlevering:
Presentasjonen kunne være i HTML eller Flash og jeg valgte HTML fordi jeg nettopp har jobbet med to Flash-prosjekter i obligatorisk oppgave 08, og trenger mer øvelse i HTML. En annen grunn er at Flash ikke støttes av alle typer devices (f.eks iPad) så det er sannsynligvis viktigere å lære seg HTML enn Flash.
Jeg har for første gang laget en nettside 100% i Photoshop og klippet den opp ved å bruke funksjonen ”slices” og ”save for web and devices”. Det var mye enklere enn jeg trodde, ikke noe stress med alle boksene div’ene som legger seg feil og hopper rundt, slik det gjerne blir når man skal lage en nettside ved å begynne å kode HTML og CSS på et blankt dokument. (Obligatorisk oppgave 06 Enkelt nettsted er bygget på den måten)
Designvalg for mappe:
Jeg er en person som liker sans seriff skrifter best, gjerne geometriske, og gjerne tynne. Jeg liker ren, enkel design, men den må ikke være for kjedelig, kontraster og skarpe farger må få bryte opp, der må være dynamikk. Jeg liker også røffe, scruffy finisher, som for eksempel på fotoessayet/fotogalleriet.
Denne mappepresentasjonen har mange av disse elementene i seg, så jeg vil si at den representerer meg ganske godt som designer. Bakgrunnsbildet er et makrobilde jeg tok av boblene i colaglasset mitt, men jeg synes det ligner på aliens. Jeg liker jordfarger og skarpe farger i kontrast mot svart. Jeg er glad i å fotografere og synes svart er fint som ramme for foto men også ellers i design. Sjakkbrettruter har jeg alltid likt, når jeg var liten ønsket jeg meg svart-hvitt sjakkrutete kjøkkengulv når jeg ble stor. 🙂
Skisser mappepresentasjon:
Arbeid med digital mappe i Photoshop (screenshot):
Arbeid i Dreamweaver (screenshot):
Deilig å ha levert inn mappa mi, da er det bare prosjekteksamen igjen! 😀
Obligatorisk oppgave 08 – Fotogalleri Flash – forbedret versjon
I denne obligatoriske oppgaven (08) skulle vi lage et Flash fotogalleri fra bildene vi tok i obligatorisk oppgave 07 Fotoessay. I tillegg skulle vi lage et Flash banner som skulle plasseres på Enkelt nettsted (obligatorisk oppgave 06) og ved å klikke på dette banneret skulle man komme til Fotoessayet. I forbindelse med mappeinnlevering for 2.semester, har jeg jobbet med å forbedre oppgave 08.
Interaktivt banner i flash
Her er et bilde av det gamle banneret:
Og her et bilde av det nye:
Jeg har tegnet om igjen de tre grafiske elementene, koppen, saksen og kammen med en mer nøyaktig strek og med tynnere stroke. Jeg har valgt å gjøre bakgrunnen lys grå fordi jeg synes det gamle versjonen var veldig skrikende i kontrast mot den svarte nettsiden. Den nye lysegrå ser faktisk hvit ut mot det svarte, men er ikke like skarp å se på.
Se den nye versjonen av banneret nederst på Enkelt nettsted (ny versjon): http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/index.html
Den gamle versjonen av banneret kan du se nederst på gammel versjon av enkelt nettsted: http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/oldsite/index.html
Fotogalleri
Kritikken jeg fikk for det første fotogalleriet mitt var at det var forskjellig stil på banner og galleri. På banneret hadde jeg f.eks tegnede elementer, disse var ikke å finne i fotogalleriet.
Noen skisseidéer til ny utforming av fotogalleriet
I den nye versjonen av fotogalleriet har jeg integrert koppen, saksen og kammen i nederste del av galleriet (footer). De fungerer samtidig som ”hjem” knapp; ved å klikke på dem kommer man tilbake til forsiden.
Jeg har lagt en rad med thumbnails (små kvadratiske versjoner av alle de seks bildene) i footer, ved å klikke på disse kommer man til den store versjonen av bildet. Det ligger også usynlige fremover og bakover-knapper helt til høyre og helt til venstre nederst i de store bildene (rett over den svarte footeren). Disse blir synlige ved mouseover, og man kan klikke fremover eller bakover eller hele veien rundt.
Link til obligatorisk oppgave 08 Fotogalleri (ny versjon):
http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/flash/Fotogalleri_ny_2012.swf
(Til sammenligning, her er den gamle versjonen: http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/oldsite/Flash/Fotogalleri_03_oldversion.swf )
Obligatorisk oppgave 07 Fotoessay (PDF) – forbedret versjon
Som en av de digitale oppgavene fra 2.semester i multimediedesign skulle oppgave 07 Fotoessay også forbedres før mappeinnlevering. Her er litt informasjon om forbedringsarbeidet mitt med denne oppgaven.
Bildene
Ved bytte av pc og overgang til Mac har jeg dessverre klart å miste en masse originalfiler som jeg trodde jeg hadde kopi av på en ekstern disk. De originale RAW-filene til bildene i Fotoessay /Fotogalleri er dessverre borte. Om du som leser dette er glad og fornøyd og har viktige filer og bilder lagret på ett sted – skaff deg en ekstra kopi, lagre alltid to steder! Noen ganger krasjer disker eller man sletter foldere uten å vite det…
Jeg fikk en del tips fra lærer ved første innlevering av obligatorisk oppgave 07 Fotoessay om hvordan bildene kunne redigeres bedre. Men fordi jeg kun har gjenfunnet jpeg-versjoner som allerede var redigert ganske kraftig til en grunge-aktig look med mye konstrast og et grønnlig fargestikk, så var det ganske lite jeg kunne gjøre for å forbedre bildene. Men jeg har gjort et forsøk.
Forside før og etter:
Bildet skulle være helt i svart-hvitt men jeg hadde valgt en desaturert versjon der jeg fjernet alle farger bortsett fra lilla. Den nye versjonen av forsiden er laget i helt svart-hvitt. Jeg har rettet opp bildet som var noe skjevt i forhold til horisonten (bordkanten).
Bilde 1 før og etter:
Kommentar var lærer på at det rosa neonlyset bak henne var forstyrrende. Jeg har duset det ned så godt det var mulig på en jpeg.
Bilde 2 før og etter:
Jeg har redusert det skarpe lyset på hånda hennes.
Bilde 3 før og etter:
Jeg har duset (uskarpet) og mørknet bakgrunnen og skarpet/lysnet henne for å få henne mer fram. Har også croppet bildet tettere for å fremheve at hun er objektet, ikke miljøet rundt henne.
Bilde 4 før og etter:
Jeg har gjort bakgrunnen mer diffus på dette bildet slik at frisøren og kunden kommer bedre fram.
Bilde 5 før og etter:
Jeg har gjort bakgrunnen (speilbildet) ennå mer diffus enn på originalen og en anelse mørkere.
Bilde 6 før og etter:
Lærer kommenterte at dette bildet var for likt bilde to, men jeg har valgt å beholde det da jeg ikke hadde et som var bedre å erstatte det med. Jeg har en tett crop på dette bildet med vilje for å komme nært innpå situasjonen.
Layout på PDF
Komposisjonen på den første PDF-presentasjonen av Fotoessayet trengte mer bearbeidelse spesielt med tanke på luften i mellom bildene. Jeg har jobbet mye med forskjellige muligheter her. En liten utfordring med to bilder i liggende format og fire i stående.
Noen skisser for layout PDF
Jeg er enig med læreren i vurderingen av første versjon og jobbet med å lage en ny komposisjon som hadde fokus på luften i mellom bildene, samtidig som den var mer spennende.
Arbeid i InDesign med ny PDF-layout
En ny variant:
En annen utgave:
Ny versjon som jeg hadde tenkt å levere:
Sammenligning av gammel og (foreløpig) ny versjon av PDF:
Ny versjon som harmonerer bedre med Fotogalleri
Mye senere, etter at jeg egentlig var ferdig med en ny versjon av PDF’en, og hadde laget ny versjon av Fotogalleriet i Flash, så syntes jeg PDF’en og Flash-versjonen ikke harmoniserte nok. Så jeg ville lage enda en ny PDF som stod mer i stil med Fotogalleriet slik det var blitt. Her er skisser til PDF-layout som er laget etter at Fotogalleriet var ferdig:
Jeg har endret fonten fra Karat til Arial som er fonten jeg bruker i flash Fotogalleriet, og gjort mye bruk av svart på samme måte som Fotogalleriet har. Jeg bruker for eksempel samme svarte felt nede på forsiden og samme tekstlayout, men har valgt å beholde sirklene fra forrige versjon, bare at de er svarte og større. Fotonettsider og layout der et foto fyller hele siden synes jeg er veldig flott, og har valgt å gjøre dette her.
Endelig versjon av Fotoessay (hver enkelt side):
Som PDF spread:
Link til ny versjon av obligatorisk oppgave 07 Fotoessay:
http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/pdf/Fotoessay_new_10.pdf
Til sammenligning, her er den gamle versjonen:
https://grymonica.wordpress.com/wp-content/uploads/2012/03/fotoessay_02.pdf
Obligatorisk oppgave 06 Enkelt nettsted – forbedret versjon
I forbindelse med mappeinnlevering hvor alle de obligatoriske oppgavene fra 2. semester leveres på nytt for karaktersetting, ble vi bedt om å prøve å forbedre oppgavene.
I denne bloggposten skal jeg vise hva jeg har gjort med min Obligatoriske oppgave 06 Enkelt nettsted.
Farger og lesbarhet
Jeg er veldig glad i dyp lilla og skarp irrgrønn, men innser at fargene ikke hadde god kontrast eller lesbarhet i forhold til en svart bakgrunn. Jeg testet fargene med Colour contrast analyser (et gratis program man kan laste ned her: http://www.paciellogroup.com/resources/contrast-analyser.html ) og fikk dårlige resultat på begge fargene, både på kontrast og lysstyrke.
Lilla #A00051 fikk ”fail” både på kontrast (lesbarhet) og er håpløs for fargeblinde:
Grønn #00D498 fikk ”fail” på kontrast (lesbarhet), men ”pass” på lysstyrke:
Jeg valgte derfor to helt nye, mye lysere farger som gav bra score både på lesbarhet, lysstyrke og fargeblindhet.
Den nye grønne er #82D3AC:
Den lilla fargen er byttet ut med en rosa farge #
Meny
Jeg har endret navigasjonsmenyen som før var lilla til grønn. Jeg synes det gir en fin helhet og bedre lesbarhet. Har økt skriftstørrelsen på menyen ørlite (fra 1.2 em til 1.1 em).
Layout og tekst
Index-siden: Jeg syntes det var for mye luft på den gamle versjonen og ønsket meg en tettere layout. Jeg har fjernet padding mange steder på index-siden slik at den fremstår balansert, men ikke uten unødvendig store avstander mellom elementene.
Jeg har også redusert tekststørrelsen på brødteksten ved siden av bildet på index-siden, samt teksten i footer.
Før var menyen midtstilt i forhold til hovedinnholdet, jeg har nå valgt å venstrestille menyen mer slik at den er mer på linje med resten av innholdet.
De tre undersidene har fått samme størrelse på bilde og tekstbokser, mens index-siden fortsatt er litt annerledes. Men også denne har jeg gjort noe mer lik de andre; bildet er blitt mindre og tekstboksen og bildet har bedre balanse i forhold til hverandre.
Jeg jobbet en del med å lage templates (første gang jeg prøver dette) og jeg ser at det er smart for å få påfølgende sider like, uten å slite seg i hjel. Men siden Enkelt nettsted ikke var tenkt slik fra begynnelsen av, ble det lettere for meg å kopiere HTML og CSS over på de andre sidene. Heldigvis var det ikke så mange sider. Men en annen gang skal jeg definitivt prøve meg på templates.
Bilder
Jeg har laget nye versjoner av bildene, og blant annet fjerne ”feather” i kantene på bildet på siden ”om meg” slik at nå har alle bildene firkantede hjørner.
Rollover
Jeg har latt teksten på linker i menyen skifte fra grønn til rosa ed understreking ved mouseover og klikk, slik at det er lett å se at dette er linker. Jeg har også gjort det slik at linken i menyen til den siden man står på, alltid er rosa og med understreking.
Lenke til toppen
På de lange sidene har jeg laget et ”named anchor”, lenke til toppen av siden.
Gammel versjon av obligatorisk oppgave 06 Enkelt nettsted:
http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/oldsite/index.html
Ny versjon av obligatorisk oppgave 06 Enkelt nettsted:
http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/index.html
Screenshots:
Gammelt nettsted:
Nytt nettsted:
Ny versjon av hjemmesiden i WordPress
Fordi en hun kjente hadde en webside med samme template, ville hun gjerne bytte. Derfor byttet jeg til et annet WordPress theme på siden hennes www.brunmark.no.
Jeg har tatt noen screenshots av det nye utseendet av websiden (på noen av dem er bildet øverst «klippet i biter», dette skyldes at bildene rulerer). Websiden ser nå slik ut:
Har laget hjemmeside i WordPress
Som en øvelse til prosjekteksamen og for å hjelpe en venninne, har jeg laget en hjemmeside i WordPress. Hun har nettopp sluttet i jobben og begynt som frilansjournalist, og hun trengte en hjemmeside for å presentere seg selv og hva hun kan tilby.
Her er noen screenshots fra hjemmesiden – banneret i topp rulerer i tre versjoner:
Og her er en link til siden: www.brunmark.no
Pendelanimasjon – flash
I denne oppgaven skulle vi designe en klokke med pendel. Pendelen skulle deretter animeres ved hjelp av Classic tween i Adobe Flash.
Her er et bilde av min pendelanimasjon:
Jeg har lagt ut Flash-filmen på Deviantart.com, klikk her for å se animasjonen.
Obligatorisk oppgave 08 – Flash fotogalleri og flash interaktivt banner
I denne obligatoriske innleveringsoppgaven skulle vi både lage et Flash fotogalleri med bildene vi tok i forrige obligatoriske oppgave, obligatorisk oppgave 07 «Fotoessay» , og vi skulle lage et interaktivt banner i Flash som skulle integreres i «enkelt nettsted» (obligatorisk oppgave 06). Det interaktive banneret skulle linkes til Flash fotogalleriet ved bruk av actionscript 3.0.
Det har vært vanskelig å holde progresjonen i studiet i det siste av forskjellig årsaker, så jeg hang litt etter på Flash og måtte jobbe meg intensivt gjennom mange videoleksjoner før jeg kunne begynne å jobbe med oppgaven. Jeg hadde begynt å leke med Flash tidligere i høst, men det er så lenge siden at jeg måtte begynne helt på nytt. Har heller ikke fått gjort alle læringsoppgavene før den obligatoriske denne gangen, og håper jeg ikke har gått glipp av mye ved å mangle noen av disse. Føler uansett «at det har løsnet», og Flash og animasjon er gøy! Og jeg kommer definitivt til å gjøre øvelsene i etterkant og leke meg mer med Flash, for det er virkelig morsomt å se når man får ting til å virke, at det beveger seg og gjør slik man vil at det skal!
Skisser
Jeg begynte med noen skisser til hvordan jeg ville ha fotogalleriet og banneret, disse kan du se her. Jeg forandret noe retning både under skissearbeidet og etterpå, fordi jeg fant løsninger jeg syntes fungerte bedre.
Del 1: Flash fotogalleri
Jeg fulgte videoleksjonen om fotogalleri og satte inn bildene med samme layout som i PDF-dokumentet jeg lagde i obligatorisk oppgave 07 fotoessay (se dokumentet på issuu.com her). Jeg begynte å lage usynlige movieclip-knapper. Her er et par screenshots fra dette arbeidet:
Men jeg likte ikke layouten særlig godt, og fant ut at det er en god grunn til at alle app’er, bildesites og previews (thumbnails) av fotografier ofte er kvadratiske. Det er rett og slett penere og mer ryddig. Dermed redigerte jeg alle bildene om til kvadrater, og begynte på nytt.
Først en test, ser det bedre ut?
Javisst. Dermed fortsatte jeg med denne layouten.
Actionscript 3.0 koding
Selv om jeg fulgte oppskriften til punkt og prikke, fikk jeg erfare at det skal veldig lite til før det blir feil og ting ikke virker. En bitteliten feil i actionscript-koden eller en forskjell i en bokstav eller uteglemt endelse i instance-navnet, kan få hele flash-dokumentet til å snurre rundt i loop, eller at ingenting skjer. Jeg passet på å teste «publish preview» skritt for skritt, så da gikk det lettere å finne feilen. Likte godt at Adobe Flash sin egen feilkode sender deg til den linjen som er feil hvis du klikker på den. Jeg var veldig stolt da alle feil var funnet, alt var kodet, og det virket!
Ferdig fotogalleri
Del 2: Interaktivt banner
Det interaktive banneret skulle reklamere for fotogalleriet og ved bruk av actionscript 3.0 skulle det sende deg til fotogalleriet når man klikket på det. Banneret skulle inneholde en enkel animasjon.
Jeg har nettopp vært gjennom leksjonene for Shape Tween, Classic Tween og Motion Tween og har testet dem litt for moro skyld. Jeg fikk veldig sansen for motion tween og begynte først å lage banner på denne måten. Men jeg fant ganske fort ut at det var vanskelig å få til den type animasjon jeg ønsket med motion tween, fordi man ikke kan forandre på instance’en på scenen underveis. Kanskje jeg bare er uvitende, men jeg valgte i hvertfall å begynne på nytt, og denne gangen ved bruk av Classic Tween.
Jeg er fortsatt ikke helt sikker på når jeg burde bruke graphic symbol og når jeg burde bruke movie clip i den typen animasjon som jeg nettopp har laget, jeg prøvde ut begge deler. Men det viktigste er at jeg fikk det til å virke til slutt! Tror jeg må lære litt mer om bruken av de forskjellige symbolene, alt etter hva slags type animasjon man skal lage.
Jeg jobbet ganske mye med å legge inn hold, insert frames, teste ut blanke keyframes, slette frames og så videre. Teksten ville ikke oppføre seg slik jeg ville at den skulle før jeg brukte break apart og konverterte den til symboler. Jeg brukte easing både på teksten og på objektene (saks, kam, kaffe), men easingen på objektene gjorde bevegelsene hakkete, så her fjernet jeg den. Jeg beholdt easingen på teksten. Jeg vet ikke om jeg burde vært bevisst på det totale antallet rammer, om dette bør være delelig med 24, siden jeg har en framerate på 24 fps, men jeg har ikke tatt et slikt hensyn. Jeg har kun lagt til og fjernet rammer helt til jeg var fornøyd med bevegelser, hold og flyten i animasjonen.
Her er et par screenshots fra arbeidet med banneret:
Ferdig resultat:
Jeg lastet opp begge Flash-filene (fotogalleriet og banneret) på serveren, og la inn flashbanneret via «insert media, swf» nederst på mitt enkle nettsted. Til å begynne med fikk jeg ikke filmen til å virke på web uten at jeg høyreklikket og valgte «play». Derfor lastet jeg banneret opp på Deviantart.com for å teste det der. Der virket det perfekt.
Etter dette prøvde jeg å laste inn en oppdatert versjon av Flash på min pc, og restartet Internet Explorer, og merkelig nok så virket banneret fint på mitt enkle nettsted etter dette! (Rart, for det var jo samme pc og samme IE nettleser jeg brukte når jeg kikket på filmen hos Deviantart.com!). Men da var alt i boks! 🙂
Slik ser det ut på nett (screenshot):
Lenke til enkelt nettsted med interaktivt banner:
Klikk for å se banneret integrert nederst på mitt enkle nettsted (scroll nedover).
Gry Monica's hjørne 
Kommentarene