Portfolio – Finish

Her vil jeg presentere nettsiden som er laget til portfolioen for 4.semester og vise dere endringene som er gjort i oppgavene.

Først vil jeg starte med oblig.05 – Illustrasjon og foto. I denne oppgaven skulle jeg lage en reklameplakat hvor jeg skulle koble et produkt produsert før 1970-tallet sammen med en illustrasjon som skulle være inspirert av en selvvalgt epoke. Som produkt valgte jeg Sunlight såpe, og som epoke valgte jeg Jugendstil (1896-1909), som hører innenfor Art Nouveau. Produktet Sunlight har blitt fotografert for å kunne brukes i plakaten, og deretter bearbeidet i Photoshop.

Til min tidligere versjon jobbet jeg med epoken Revival, og hadde laget en illustrasjon av en dame. Til porteføljen har jeg jobbet med et nytt konsept, og en bedre kommunikasjon mot målgruppen. Fokuset har vært på helheten og uttrykket i plakaten. Jeg startet forbedringen med å lage et nytt tankekart og nye skisser.
img003img004

Mitt nye konsept var å lage en illustrasjon av en hånd. Til dette ønsket jeg å bruke min egen hånd som utgangspunkt. Derfor startet jeg med å fotografere hånden min. Nedenfor er bildene samlet i et contact sheet. Du vil også se litt av prosessen med hånden, hvor jeg startet med å live trace den i Illustrator, og derfra jobbet med form og skygge.
Skjermbilde 2013-11-04 kl. 12.12.56Skjermbilde 2013-11-04 kl. 12.13.31Skjermbilde 2013-11-04 kl. 12.13.53Skjermbilde 2013-11-04 kl. 12.14.03

 

Det har også blitt laget et nytt moodboard for Jugendstil, hvor man tydelig ser fokus på kvinnelige figurer, femininitet, eleganse, farger og tydelige streker. Det kan være noe tegneseriepreg over stilen.
moodboard_jug

Font og farge er behold slik som de opprinnelig var, fordi de passer til Jugendstil. Siden jeg har jobbet med et nytt konsept har rapporten blitt forandret en del, også på utseende. Sunlight såpen er gjort noe større og midtstilt. Hånden er hvit, dette for å gjenta fargen fra teksten og Sunlight produktet, samt med inspirasjon fra Jugendstil. Nedenfor vises den tidligere plakaten som først ble levert til venstre, og den nye og forbedrede plakaten til høyre.
Ferdig_plakatFerdig_plakat_NY

Videre ønsker jeg å ta for med oblig.06 – Person, produkt og naturlig lys. I denne oppgaven skulle jeg produsere to utendørs fotografier for en fiktiv reklame kampanje for et utendørs sportstøy merke.I oppgaven skulle jeg fokusere på å fange bevegelse, dette ved bruk av motion blur og motion freeze. Jeg fikk kun lov til å bruke naturlig lys til oppgaven. Programmet Adobe Photoshop kunne benyttet til bilde korrigering.

Sportstøy merke som ble valgt var Craft, og modell var min sporty samboer. Location var Stovner friidrettsbane, og bildene ble tatt med et Canon 7D kamera og 50mm objektiv. Det ene bilde var i portrett format og det andre landskap. De samme bildene blir brukt til porteføljen, siden tilbakemeldingen var god. Jeg har jobbet med det tekniske og med dybdeskarpheten. Rapporten er noe forandret, og utseende er forandret.

I Freeze bildet har personen fått mer fokus og bakgrunnen er noe dempet. Dette er gjort i Adjustment med Saturation -20. I bakgrunnen har jeg lagt til en blur effekt, Gaussian Blur -2.0, for å få bakgrunnen mindre i fokus. Videre har jeg jobbet med å tone ned fargene, så de ikke får all oppmerksomhet. Nedenfor vises det tidligere bildet til venstre, og den forbedrede versjonen til høyre.
foto2freeze_0111

I Blur bildet har jeg også jobbet med dybdeskarpheten, hvitbalansen og highlight. Dette gjort med tanke på tilbakemeldingen. Personen er forandret ved bruk av Adjustment med Lightness -10, brightness -10 og contrast +10. Itillegg til dette har jeg jobbet med curves for å forbedre hvitbalansen. Noen steder, spesielt beina, var det litt for lyst. Bakgrunnen har fått samme blur effekt, og lik saturation innstilling. Nedenfor vil du se den tidligere versjonen til venstre, og den forbedrede versjonen til høyre.
Foto_011blur_011

Over til oppgaven oblig.07 – Åpningstittelsekvens. I denne oppgaven skulle jeg jobbe med et helt nytt program, et program som ikke engang var inkludert i Adobe-pakken jeg kjøpte ved studiestart. Programmet var Adobe After Effects. Jeg lastet ned en prøveversjon for oppgaven. Videre skulle jeg produsere en åpningstittelsekvens for Diamond Awards, som er Noroff sitt årlige event for prisutdeling av studentarbeider. I denne filmen skulle Noroff sine nettstudier presenteres, og Diamond Awards logoen inkluderes. Itillegg skulle jeg finne passende musikk.

Til jobbing med endringer til porteføljen måtte en ny prøveversjon lastes ned, men på en annen maskin. Dette gjorde arbeidet noe mer komplisert. Noroff nettstudier (i starten) hadde tidligere en rød farge, men denne ble for lik logoen uten at den var selve logoen. Derfor forandret jeg fargen til hvit, slik som resten av tekst-innholdet i filmen. Diamond Awards logoen var av dårlig oppløsning, men dette er fikset ved hjelp fra lærer og Google-søk. På slutten av filmen hadde jeg inkludert credit, siden dette var en betingelse for å bruke musikkfilen. Dette fikk jeg dårlig tilbakemelding på, så den er nå fjernet. Ellers er det gjort lite forandring i rapport, men utseende er noe forandret. Under vises det til den nye åpningstittelsekvensen.
http://www.youtube.com/watch?v=ORwOCnzg4F4
Noroff1Noroff2

Tilslutt vil jeg presentere den siste oppgaven oblig.08 – Interaktiv inforgrafisk nettside. I denne oppgaven skulle jeg lage og produsere en nettside med interaktiv infografikk. Jeg skulle videre velge et objekt eller produkt som skulle ha fire ulike design inspirert av fire bestemte stilepoker. Som objekt valgte jeg frimerke, og epokene jeg måtte jobbe med var Abstrakt ekspresjonisme, Swiss, Pop Art og Psykedelisk. Det ble jobbet med å finne et passende domene navn som passet til oppgaven, og deretter ble dette kjøpt.

Tilbakemeldingen på oppgaven fikk jeg en dag før porteføljen skulle leveres, så valget falt på å ikke bruke tid på å forbedre denne oppgaven. Utifra tilbakemeldingene følte jeg selv at det ikke var så mye jeg kunne forandret uten om å bytte ut fargen gul med noe annet, samt fargen på tekst i footer. Jeg ønsket å beholde primærfargene, siden dette var konseptet mitt, og siden det understreker at nettsiden handler om kunst. Webdesign er ikke min sterke side, så jeg var veldig fornøyd med det jeg klarte å oppnå. Det var ønskelig å fokusere på farger og enkelhet. Videre er det ikke gjort noen endring i rapport, men noe på utseende. Under finner du linken til Journey of Art – nettsiden.
http://journeyofart.no
Journeyofart

For å komme til porteføljen min gå til denne nettsiden: www.studioannette.com

– Annette B. D.

Oblig.06 – Prosess

Her vil jeg ta for meg den siste prosessen i oppgaven.

Etter å ha gått igjennom de 120 bildene som ble tatt i forbindelse med denne oppgaven, valgte jeg tilslutt ut 8 bilder å velge mellom. Disse er basert på fokus, komposisjon, og lys.

contactsheet2

Skjermbilde 2013-06-11 kl. 14.09.09

Videre i prosessen har jeg halvert bildene, hvor jeg tilslutt står igjen med de fire beste bildene til prosjektet. Utifra disse må jeg velge et med motion blur og et med motion freeze.

contactsheet3

Skjermbilde 2013-06-23 kl. 20.03.12

Nedenfor har jeg utarbeidet en kontrakt hvor modellen skulle signere og vite hva han gikk med på, samt hva prosjektet handlet om. Det er viktig å vite om sine rettigheter og publiseringstillatelse. Dette kontrakten har jeg selv laget, og det ble gjort i starten av prosjektet.
img004

Med etterarbeid er de to valgte bildene beskjært. De er beskjært slik at modellen er i det gyldne snitt, under vises eksempler på dette. Dette har blitt valgt for å skape en spennende komposisjon, og blikkfang.
Skjermbilde 2013-06-13 kl. 21.17.59

Skjermbilde 2013-06-13 kl. 21.15.46

Programmet Camera Raw 6.3 har blitt benyttet til korrigering av hvitbalanse, fargetemperatur, eksponering, beskjæring og justering på fargene. Når det gjelder fargene har HSL/Grayscale blitt forandret, disse forandringene er gjort (samme innstilling på begge bildene):
Saturation
Reds + 30, oranges + 15, yellows + 15, greens + 30, aquas 0, blues + 20, purples + 10, magenta – 10
Hue
Reds – 10, oranges 0, yellows + 10, greens + 5, aquas 0, blues 0, purples 0, magentas 0
Luminance
Reds 0, oranges + 10, yellows 0, greens 0, aquas 0, blues 0, purples 0, magentas 0.

Jeg har gjort disse forandringene i fargene for å skape en større kontrast. De gul/grønne fargene har påvirket naturen i bildet, mens de rød/oransje fargene har påvirket underlaget man kan finne i begge bildene.

Adobe Photoshop CS5.5. har også blitt benyttet mest ved bruk av heeling tool og clone stamp, for å fjerne støy og uønskede flekker i bildene. Videre har det ikke blitt gjort noen annen form for forandring i bildene, og ingen manupulasjon er gjort.

Foto_011

Innstillinger: EF 50 mm, ISO 1000, f/20, 1/8, cloudy

foto2

Innstillinger: EF 50mm (objektiv), ISO 1000, f/4, 1/4000, cloudy

– Annette B. D.

Learning activity – Product Photo 1

A. Create a simple presentation about Product Photography. Technique, media and method is optional.
B. In the presentation you need to reveal what goes under the concept of product photography and what categorizes a product photo.

Bilder som blir tatt gjennom produkt fotografering kan brukes til katalog, plakat, reklame, brosjyre, webside m.m. Det er en utfordrende og spennende oppgave, som krever et eget studio eller utstyr som kan fraktes til et bestemt location. Ofte vil produkt fotografering si at et produkt eller en etikett blir fotografert på en hvit bakgrunn med god og jevn lyssetting. Deretter blir fotografiet behandlet i Photoshop, hvor produktet klippes ut fra bakgrunnen. Ved å gjøre dette kan kunden selv bestemme hvor produktet skal plasseres, altså på hvilken som helst bakgrunn.

Produktets størrelse, type og bruksområde må komme frem i fotografiet.

Hvorfor velge produkt fotografering?
Et bra fotografi vil hjelpe produktet til å selge mer, og til potensielle kunder. Det vil gjøre folk oppmerksomme på produktet, vekke interesse og føre til at folk kjøper det og tester det ut. Produkt fotografering er en god investering.

Eksempler på god produkt fotografering av både norske og utenlandske merker +  annet:

Kilder:

http://www.packshot.no

http://en.wikipedia.org/wiki/Packshot

– Annette B. D.

WEBP – Nav Bar, page, page title, permalink,

En navigasjons meny må være enkel å bruke og lett å forstå for brukere som skal benytte seg av nettsiden. 1. Hvor er jeg? 2. Hvor har jeg vært? 3. Hvor kan jeg gå? Under viser jeg noen eksempler på hvordan en nav bar/meny kan se ut og hva en nav bar er:

http://www.w3schools.com/css/css_navbar.asp

W3schools er en side jeg alltid benytter når jeg trenger en oppdatering på hva noe er og hva jeg kan gjøre med det. På nettsiden finnes det mange eksempler, og man kan selv prøve de ut. Dette synes jeg er veldig lærerikt og gir mye kunnskap.

Først hadde jeg planer om å bytte ut farger i nav baren og gi de ulike effektene forskjellige farger; 1. den statiske grafikken som vises når pekeren ikke er over knappen, 2. grafikken som vises når pekeren er over knappen, 3. grafikken som vises når pekeren klikker på knapper, 4. et område som er mottakelig for perkerbevegelse, ikke synlig grafikk.
Jeg startet med å jobbe med hvilke farger som passet sammen, og som passet til kunden. Deretter begynte jeg å tenke å hvilke fonter som ville passe. Jeg benyttet moodboardene fra tidligere innlegg til dette.

Senere spurte jeg hva kunden syntes om denne idéen, og vi diskuterte nok engang hvilke sider som var nødvendige til nettstedet. Nå kom vi frem til at de ulike sidene skulle være: Front (istedenfor Home) – innholde et bilde samt noe innledende tekst om merket, About eller Story – hvordan Steel Feather ble til, hvordan det lages, Made in Japan, om denim etc, Collection (istedenfor Products) – bilder og beskrivelse om produktet/produktene, Lookbook (istedenfor Gallery) – bilder av maskiner, fabrikker, arbeidere, detaljer, inspirasjon etc. Alle bilder skal være merket med en Steel Feather logo, News – blogg innlegg, fungere som kommunikasjon, oppdatere ang. produkter, kontakter, legge ut bilder og tekst, Stockists – hvor man kan få kjøpt Steel Feather jeans, dette vil bli oppdatert senere og Contact – side med kontakt informasjon.

Etter en del research på konkurrentenes nav barer forklarer kunden at han ønsker en nav bar med fonten som blir benyttet i logoen, altså fonten LHF Indian Script 2. Dette mener jeg kun fører til problemer dersom dette er en kjøpt font, og ingen har denne installert på sine maskiner. Den eneste løsningen blir å lage små bilder med fonten og titler som linker til sidene. Dette er ikke noe jeg har vært borti før, og jeg trodde på dette tidspunktet at dette var umulig. Her er noen screenshot av konkurrentenes menyer:

Det siste eksempelet viser mer eller mindre hvordan kunden ønsker at nav baren skal være. Her har vedkommende brukt en font og laget bilder av dette, hvor man kan klikke seg videre til de ulike sidene.

Dette har vært et stort og krevende prosjekt for meg, og fra første tanke om at dette ikke er mulig til at jeg nå har fått det til har vært en lang prosess. Her er noen kilder jeg har benyttet og sammenlignet for denne delen av prosessen, samt hvordan jeg skal legge til og benytte knapper til sosiale medier:

http://diythemes.com/thesis/rtfm/replace-wp-menu-text-links-image-sprites/

http://www.wpbeginner.com/plugins/how-to-add-custom-menu-images-in-wordpress/

http://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/

http://www.wpbeginner.com/wp-themes/how-to-style-wordpress-navigation-menus/

http://letsbuildwebsites.com/social-media-buttons/

http://tutorialspot.wordpress.com/2011/05/22/how-to-add-social-media-buttons-to-your-wordpress-blog/

http://devilsworkshop.org/how-to-add-images-inside-wordpress-3-0-custom-menu/

Her er et bilde av hvordan nav baren først så ut etter en del testing av farger. Vi kom frem til at hvit tekst mot svart bakgrunn er det beste for lesbarheten, samtidlig som det i tillegg er stor kontrast.

Først testet jeg størrelse på font og kom frem til at 38 pt var det mest optimale for nav baren og lesbarheten på fonten. Dette gjorde jeg i Photoshop, passet på at alle titler var plassert på samme sted og lagret i hvit farge med transparency– lagret som .png

Deretter lastet jeg opp bildene i cPanel, i images mappen. Videre logget jeg inn på WordPress, under Dashboard, Appearance -> menus. På venstre side kan man velge noe som heter Custom links – fyll inn URL (permalink til siden) og deretter label (koden <img src=»…»>), samt title attribute. Det var en prøvelse å få til navigation label riktig hver gang. Her er et eksempel på hvordan home linken ser ut:

Dette gjorde jeg til alle sidene og knappene som nav baren består av, totalt 8 stk. Slik ser resultatet ut:

Denne linken har jeg benyttet angående permalinker, altså URL til hver individuelle side og innlegg. Dette er noe man finner under Dashboard i wordpress, under Settings -> Permalink.

http://codex.wordpress.org/Using_Permalinks : » %postname% A sanitized version of the title of the post (post slug field on Edit Post/Page panel). So “This Is A Great Post!” becomes this-is-a-great-post in the URI.»

Videre har jeg prøvd å funnet ut av hvordan man blir kvitt page title under hver side. Eksempel: en side heter About og under menyen i det hvite feltet står det About som overskrift. Dette ønsket jeg ikke, jeg ønsket å kunne skrive egne overskrifter, og velge font på disse.

http://www.creativeworld.com.au/blog/web-design/how-to-remove-the-page-title-from-your-wordpress-homepage/

http://wordpress.org/support/topic/twentyeleven-hideremove-page-title

http://voodoopress.com/playing-with-fonts-on-a-twentyeleven-child-theme/

Da var det mest krevende tekniske delen av prosessen over. Neste innlegg vil bli om fotografering, redigering og plugins.

– Annette B. D.

WEBP – Idéutvikling 1

Denne uken startet jeg arbeidet med moodboards. Med de to moodboardene nedenfor ønsker jeg å vise farger, tekstur og andre viktige elementer som kunden ønsker at jeg skal ta hensyn til underveis i prosessen. Fargene indigo og burgunder var hovedsaklig kundens ønsker, og om dette er noe som passer til det endelige resultatet får jeg teste ut. Jeg har også brukt noen av kundens egne bilder av prosess og produkt, for inspirasjon.

Videre har jeg jobbet en del med wireframes, og digitale skisser av design og layout av nettstedet. Disse har jeg laget i Photoshop, og fokusert på plassering av elementer, samt navngivelse av disse for en bedre oversikt. Wireframe er et storyboard, og et visuelt uttrykk som viser hovedelementene som skal være med.

 

De 4 wireframene over viser hovedsiden (Home) til nettstedet. Jeg ønsker å ta for meg hovedsiden først, deretter de andre sidene. Derfor kommer wireframes, elementer, tekst og annet til de andre sidene til nettstedet senere.

Ha en fin 17.mai alle sammen! Hipp Hipp HURRA!

– Annette B. D.

9.1 Layoutstiler – CURB – Skisser

Dette semesteret skal du utarbeide layout for CURB magasinet sin hovedside på nettet. Dere skal bruke de samme elementene som ble brukt til det trykte magasinet, se her. Følgende krav er satt til aktiviteten:
– Minimum 6 analoge eller digitale skisser. Test ut layoutstilene; symmetrisk, asymmetrisk og kombinasjon.
Velg en av skissene.
– Lage en wireframe av denne skissen, hvor en grid skal brukes som hjelpemiddel.
– Utarbeid det ferdige designet i Photoshop eller InDesign.
– Produser dette som en HTML fil, bruk CSS til layout.
– Legg opp nettsiden i en egen mappe med navn: aktiviteter, på deres ftp server og begrunn valg av layout og design på din reflekterte dagbok.

CURB magasinet er et fiktivt magasin som blir brukt i øvelser til utarbeidelse av layout. Se mitt ferdige eksempel til det trykte magasinet, her. Dette ble utført forrige semester, og dette semesteret skal jeg jobbe videre med CURB-magasinet, samt elementene jeg har valgt. Dette virker som en ganske krevende oppgave, spesielt tids – og design messig. Grid er et svært viktig hjelpemiddel i layout, både for trykk og web. Gjennom denne aktiviteten skal jeg erfare hvordan grid blir brukt i arbeid for web.

Hittil har jeg lest alle HTML-leksjoner om grid, og brukt gode, relevante linker for grid for videre lesing. Jeg har brukt tid på å gå gjennom HTML og CSS, ved å se tilbake på tidligere oppgaver og leksjoner. Nå er første punkt i oppgavens krav utført; skisser. Jeg valgte å starte med analoge skisser, og det ble totalt 12 stk. Det fungerer bedre for meg å ha mange forslag, for deretter å oppnå et bedre resultat. Her er skissene som er utarbeidet til denne oppgaven, hvor plassering og form har blitt vektlagt:

Videre kommer jeg til å lage noen digitale skisser, og se hvordan de ulike forslagene fra de analoge skissene fungerer. Det forslaget jeg synes fungerer best, er det jeg kommer til å jobbe videre med. Først må jeg lage en wireframe, og deretter begynne arbeidet med layout (og grid som hjelpemiddel) i Photoshop eller InDesign.

– Annette B. D.