CSS Øvingsoppgave: 2D og 3D transformations

Oppgave: Skriv eit blogginnlegg på din studieblogg, der du forklarar kva gruppa di presenterte og viser til eksempel. Dine fungerande eksempel skal vere på din nettstad (ikkje din medstudent sin).

Jeg og Anya fikk i oppgave å presentere 2D og 3D transformations.

I CSS3 bruker man noe som heter transform til å flytte, skalere, snu, rotere og strekke elementer. En transformasjon er en effekt som lar et element (f.eks. et bilde eller en tekst) skifte størrelse, form og posisjon, slik at man kan gjøre en nettside litt mer spennende, eller bare gjøre enkle endringer for å skape litt mer liv i siden.

2D transforms:
translate() Med denne funksjonen kan man flytte et element fra der det opprinnelig står.
rotate() Rotere et element.
scale() Gjøre et element større eller mindre, man kan også f.eks. gjøre bredden dobbelt så stor som det opprinnelig bildet, mens høyden kan forbli den samme.
skew() Med denne metoden kan du endre vinkel ved å putte inn verdier i x og y aksen.
matrix() Dette er en blanding av alle de som er nevnt over^. Da putter man inn alle verdiene sånn som det her f.eks; (0.866,0.5,-0.5,0.866,0,0)

3D transforms:
rotateX() Snur horisontalt
rotateY() Snur vertikalt

Her er noen eksempler på det jeg lagde i etterkant ved bruk av transformations; https://minerva.hivolda.no/~joakimgr/css_oppgave3/

Foto: Arbeidskrav #3

arbeidskrav3-0015

f: 2,8 Lukker: 1/ 1600 ISO: 200 Brennvidde: 50mm

Dette er et portrettbilde av Andreas, som er en jovial fyr. Her kunne jeg brukt en større brennvidde, for å gjøre det mer komisk, men jeg syntes det ble mye finere sånn som jeg gjorde det her. Brukt lav blenderåpning for å skape mer ro i bakgrunnen.

 

arbeidskrav3-9327

f: 2,8 Lukker: 1/250 ISO: 200 Brennvidde: 70mm

Dette er min skjeggete romkamerat, Fredrik. Fredrik ser ut som en skurk, men han er egentlig en veldig snill fyr. Her står han i en mørk trapp i ført streetwear, men pga. fugleperspektivet og den fantastiske blikkontakten med kameraet, fremstår han som søt og uskyldig, noe jeg ville få frem, da han aldeles ikke er en skurk (hele tiden).

 

f: 2,8 Lukker: 1/200 ISO: 160 Brennvidde: 60mm

f: 2,8 Lukker: 1/200 ISO: 160 Brennvidde: 60mm

Dette er Anya, hun har også nydelige øyne (desverre får du ikke sett det i dette bilde) og er kjent som den mest brukte modellen i foto- og designtimene. Anya er en sprudlende søt og morsom jente, noe jeg føler at jeg fikk frem i dette bildet.

 

arbeidskrav3-0071

arbeidskrav3-0072

Her ser vi stor forskjell på brennvidden. Det første bildet har en brennvidde på 50 mm, mens det andre har en brennvidde på 18 mm. Stor brennvidde lønner seg om man skal ha fokus på en ting, mens lav brennvidde lønner seg om man vil ha mye dybdeskarphet.

Teori: Bildeanalyse

Bildet vi har valgt for denne analysen er en reklamekampanje for solkremmerket Hawaiian Tropic fra 2010. Vi fant bildet på http://adsoftheworld.com/media/print/hawaiian_tropic_pool.

 

Den første beskrivelsen 

Det første vi ser er en dame som står i midten av to vegger av vann. Etter det retter blikket vårt mot de forskjellige objektene i vannet, en hai, en person og et par dykkebriller. Når vi ser nærmere på bildet ser vi at damen står midt i et basseng, det er fnt vær og vi kan se palmetrær og parasoller. Til slutt rettes blikket mot Hawaiian Tropic sin logo oppe i høyre hjørne med slagordet “Extreme waterproof” under. Vi ser bildet primært som en reklame kampanje og uten å tenke nærmere over bildet skjønner vi det er damen som deler vannet.

De lyse fargene skaper en slags sommerlig stemning og vi får følelsen at vi er på ferie. Linjene på bassengkanten fører oss mot midten som gjør at vi får fokuset på damen i bassenget. Siden nesten alt er lyst og blått i bildet gjør det at damen skiller seg veldig lett ut, vi får en slags kontrast.

 

Den sekundære betydning 

Etter å ha søkt opp Hawaiian Tropic på Google fant vi ut at det var et solkremmerke og med en gang gir bildet oss mer betydning. Man kan nå forstå hvorfor damen deler vannet, og det er fordi hun har på seg en ekstrem vannfast solkrem.

Enn kan raskt se at hun som er på bildet, er på en tropisk plass, på grunn av palmen vi  ser til høyre på bildet. Himmelen, vannet og selve produktet gjør det slik at vi tror at det er en plass med mye sol og varmt vær, der enn kan bade når enn vil, og må broke solkrem ofte. Kanskje det til og med er på Hawaii, siden merket heter hawaiian tropic. Vi ser at hun står nedi et basseng fordi vi kan se kantene på bassenget, stigen som går ned i bassenget, og vi kan se badeleker og svømmebriller der, noe vi ikke hadde sett dersom bildet ble tatt i et hav.

På bildet kan vi ikke se noe slags produkt, men på den lille teksten nederst på skjellet som ligger oppe til høyre i bildet, står der “island sport sun tan”. Etter at vi søkte dette opp på nettet, så fant vi ut at produktet de prøver å selge er en spesiell type solkrem.

 

Assosiasjoner

Ved første øyekast kan dette bildet gi deg assosiasjoner med historien om Moses og hvordan han delte et hav slik at isralittene kunne gå over. Nå tror vi ikke at Hawaiian Tropic prøvde å assosiere med Moses, men at de heller ville vise hvor sterkt vannfast solkrem kan virke. Det at det kan assosiere med Moses kan for eksempel skape støy og blitt sett på som støtende hos enkelte

I bildet ser vi masse ting som gjør at vi kan få assosiasjoner til sommer, ferie, tropiske land, badestrender osv… Ved å gi oss assosiasjoner til dette treffer Hawaiian Tropic i blinken. Når er det vi som oftest trenger solkrem? Når vi er på ferie eller ved stranden. Bruken av disse assosiasjonene er et sterkt virkemiddel, om vi ikke hadde fått slike assosiasjoner ved å se bildet eller om de hadde brukt et helt annet location og tema i bildet hadde budskapet forsvunnet helt.

 

Målgruppen 

Da dette er en reklame for solkrem tolker vi at målgruppen generelt er for folk som oppholder seg mye ute i solen. Alderen på målgruppen vil vi tro at er ungdom (16-35 år). Årsaken til dette er damen i reklamen. Hun fremstår som ungdommelig, har en fin kropp og går kun iført bikini, noe som ikke vil appellere til barn. Reklamen treffer begge kjønn, fordi vi får assosiasjoner til ferie og bading, noe de fleste syntes er bra.

 

Hvorfor har de gjort det slik ? Kine

Hawaiian Tropic har valgt å sette opp bildet opp slik for å vise hvor bra produktet deres fungerer. Solkrem i seg selv kan være vanskelig å selge fordi med en gang produktet er på, ser man det ikke. Avsender har valgt å vise en kreativ måte hvordan vannfast solkrem kan fungere.

Komposisjonen føler vi er den tradisjonelle bildekonvensjonen for reklame, der produktet er i fokus. Selvom om produktet ikke vises får avsenderen likvel fram produktet.

 

Konklusjon Kristine

Vi syntes reklamekampanjen har et kult konsept, men at det kan virke støtende for enkelte fordi man kan få assosiasjoner til historien om Moses.

 

CSS: Arbeidskrav #1 Skisse

Forside

 

 

En enkel forside. Da dette er en side som omhandler tekst og dets like, vil jeg at siden skal virke til å stole på, men samtidig virke interessant.

Videregående

Dette er undersiden videregående. Her har jeg lagt søkebaren tydelig fremme, mens de forskjellige underkategoriene blir listet med bilder og skrift. Hvis du da trykker på f.eks. blogginlegg, så vil du bli sendt videre til artikler som er tagget med “blogginlegg”

Artikkel

Hvis du trykker på en lenke du har lyst til å lese / vite mer om så kan du trykke på den, og bli sendt videre hit.

 

Design: Arbeidskrav #2.3 & #3.3

 

 

 

 

 

Cowboygryte

10705239_10152700077788570_1556159397_n

Dette er det alt startet med. Ideen var hovedsaklig å bruke typografi med elementer tatt fra det vi assosierer med den ville vesten.

Cowboygryte_3Her ser vi skisse nr 2. Her digitaliserte jeg skissen min, og fant også ut at jeg ville gjøre som på leverposteiboksen, hvor de har bilde av et barn, noe som er vel så karakteristisk. Her kan man tydelig se feil i typografien (ujevne bokstaver og farger).

 

FINAL

Her er den ferdige versjonen av etiketten. Etter et par timer med redigering har typografien tatt seg opp betraktelig, med tanke på ujevnheter i både form og farge. Jeg har valgt å redigere teksten til en metallisk gullfarge, for å gjøre det litt mer eksklusivt, ganske enkelt for å skape et penere bilde av det cowboygryte er. Cowboygryte ansiktet er der fortsatt. Cowboygryte EKsempelDette er et eksempel på hvordan etiketten ville sett ut på en boks. Jeg vil hovedsaklig at emballasjen skal være i glass m/skrulokk, og ikke metall. Det er to grunner til dette; 1. Jeg vil at man skal kunne se maten 2. Målgruppen for dette designet er studenter, og jeg kjenner få mennesker som orker en hel boks med cowboygryte på en gang, men med skrulokk kan man enkelt fordele all maten på flere forskjellige måltider

På denne oppgaven har jeg kun brukt photoshop, fordi det er det jeg kan fra før av og fordi jeg syntes det er masete å flytte ting fra program til program, selv om jeg i ettertid skjønner at det hadde gått noe fortere med Illustrator og/eller InDesign. Skal dog sies at jeg ble veldig fornøyd med resultatet.

Logo

Logo-4_4

Dette er den ferdige logoen. Jeg har valgt svart bakgrunnsfarge fordi den er mektig, men samtidig mystisk. Teksten er hvit, fordi den er ren og autoritær. Sammen er disse fargene mektige, så lenge man gjør typografien spennende nok. Derfor har jeg valgt en font som er litt annerledes. Den har et romersk preg (som igjen gjenspeiler makt) og du kan se at “A”ene og “M”en ikke er slik vi er vandt til. Jeg har valgt å ha to sverd i kors, for å gjøre opp for de strekene i “A”ene som ikke er der, noe som igjen etterlater en følelse av styrke og makt. Under dette står det  “Est. MCMXCII”, som står for established in 1993. Grunnen til at jeg har valgt å bruke romertall, er for å supplere den romerske fonten jeg har brukt på “GRAHAM”. Her har jeg kun brukt photoshop og er alt i alt veldig fornøyd med resultatet. Jeg lager musikk og dette er en logo som gjenspeiler den type musikken jeg lager. Tungt, mektig og hardt.

 

Teori: Visuell Retorikk

segregated

http://www.worldsfamousphotos.com/2007/09/05/segregated-water-fountains-1950/

Visuell retorikk handler om billedlige elementer satt sammen for å overbevise.

I bildet vi har valgt ser vi en person som står ved to vasker, en finere enn den andre. Over den fine vasken står det “white” og over den andre vasken står det “colored”.

En metafor er noe som gir bilde, ord eller utrykk en overført betydning. De to vaskene er f.eks. en metafor på klasseskille.

En metonymi er svært lik en metafor, det som skiller de to er at en metafor overfører betydning fra et sted til et annet, imens et metonym har er en nærere betydning. F.eks. på veggen over vaskene står det “White” og “Black”, som etterlater oss med tanken om at det er klasseskille dette også handler om.

 

Semiotikken i bildet

Læren om hvordan vi kommuniserer og forstår verden gjennom tegn kalles tegnlære eller semiotikk. Semiotikken er relevant for retorikken fordi kommunikasjon må utøves gjennom en eller annen form for tegn. Et tegn er noe som representerer/står for noe annet og de tre typer tegn vi har er ikoniske, indeksikalske og symbolske tegn.

Ikoniske

Et tegn er ikonisk nå tegnbæreren refererer til objektet i form av likhet, et eksempel på dette kan være hvordan vi ser at det er en kvinne eller en mann. I bildet vi har valgt kan vi si det ikoniske er mannen. Vi skjønner at dette er en mann i hvordan han ser ut og hvordan han kler seg.

Indeksikale

Indeksikale tegn henviser til objektet via spor. Ansiktsuttryk og kroppspråk er indeksikale tegn for følelser og sinsstemninger. Fotspor kan også være et indeksikal tegn, det kan vise at at noen har gått forbi. I bildet ser vi at mannen bøyer seg ned for å drikke, i tillegg at han ser bort mot den andre vasken. Vi kan se på dette som et indeksikalt tegn fordi han er i bevegelse og kroppspråket viser oss at han står vendet mot den andre vasken. Vi ser ikke annsiktsutrykket hans men vi kan tyde på at han syntes skillet mellom de to vaskene er urettferdig

Symbolske

Vi snakker om et symbolsk tegn når tegnbæreren kan referere til objektet i kraft av en konvensjon. Forbindelsen er kulturelttt, og kan bare forstås fullt av de som kjenner denne kulturen. I bildet kan vi si at vaskene i seg selv er et symbol, dette er et symbol på hvordan vi skilte hvite og mørkhudete før i tiden. Dette vet vi fordi vi har vokst opp og lært om dette.

 

Retoriske funksjonar i visuelle uttrykk

Den emosjonelle funksjonen

Den emosjonelle funskjonen har evnen til å fremstille noe på måte slik at seeren får følelsen av at de ser det med egne øyne. Det kan framkalle emosjoner som ligner de vi ville opplevd hvis vi hadde sett det samme i virkeligheten. Vi kan også få ulike former for identifikasjon som vil si vi kan få etos- og patosappell

I dette bildet kan det framkalle emosjonelle responser i hvordan ting blir vist i bildet. Siden vi ikke ser ansiktsuttrykket hans kan vi ikke se hva mannen i bildet føler, men hvor han er plassert i bildet og hvordan er vendt mot den andre vasken gir oss et slags perspektiv på at dette er urettferdighet. Bildet viser hvordan skillet var før i tiden og selvom du ser deg igjen i bildet eller ikke, kan dette vekke følelser hos deg fordeom. Om du har opplevd slikt behandling, eller sett noen opplevd det, eller om du er for at alle skal behandles likt så kan du få en emosjonell respons når du ser bildet.

Den illustrerande funksjonen

Kan fort og effektivt vise, illustrere og opplyse om romlige relasjonar, som f.eks. avstand og størrelse, og visuelle forhold, som f.eks. utseende, form, farge og komposisjon.

Vi har tre ulike former for illustrerende funksjoner; fremvisning, redegjørelse, og bevis.

Fremvisning gir oss en beskrivelse på noe generelt ved å vise noe konkret. I bildet ser vi en mann og to vasker, noe som kan fortelle oss at vi er inne og at objektene i bildet er på kort avstand, fordi vi f.eks. kan se detaljene på vaskene.

Redegjørelse er hurtig og presis informasjon, som deles inn i to undergrupper; handlingsorientert- og analytisk redegjørelse. Handlingsorientert beskrive hvordan noe har skjedd, kan skje eller skal skje, mens analytisk redegjørelse beskriver hvordan noe ser ut, er konstruert eller fungerer.

Eksempler på bevis kan f.eks. være røntgenbilder.

Den dokumentariske funksjonen

Den dokumentariske funksjonen er fotografisk avbildning der den indeksikalske  forbindelsen til det framviste, fungerer som bevis for at noko har skjedd og korleis det skjedde.

Her er et bilde som bevis at skille mellom kvite personar og farga personar faktisk skjedde, og at det skjedde på “brutale” måtar, der dei som var farga fekk det vanskeligare, og måtte gjere verre ting enn det dei “normale” personane måtte gjere.

Bildet blei tatt i Nord Carolina på 1950 tallet av Elliot Erwitt og heiter “seperate vannfontener”.

Sidan bildet er svartkvitt ser vi at det er et gammalt bilde, og slik har vi det ikkje i dag.

Hukommelsesfunksjonen

Hukommelsesfunksjonen er ikoniske framstillingar som har ei særlig evne til å hjelpe hukommelsen. Bilder som skal huskast brukar å vere tydelige og konkrete og oppsiktsvekkande.

Bildet hjelper oss med oss å huske hvor anderledes ting var før i tiden og hvor langt vi har kommet den dag i dag. Det viser oss at det var mye urettferdighet for ikke-hvite mennesker. Dette bildet er også veldig konkret, vi ser hva som foregår i bildet og skillet er veldig tydelig. Vi kan huske bildet godt fordi det vekker oppsikt siden skillet ikke er slikt lenger og det er mange nå i dag som er mot slik oppførsel enn det var før

 

 

Design: Arbeidskrav #3.1

Logo-2

Her ville jeg lage en leken og barnslig logo. Fonten heter Rocky AOE, og er en slik en horror-font. Jeg har plassert “Joakim” i bakgrunn. Fonten her er hvit og har brukt “gradient-overlay”, slik at teksten blir litt satt i bakgrunn. På “Graham” har jeg valgt å bruke en lilla/rosa farge, for å gjøre det litt barnslig, typ slimete. Denne teksten er også 8 eller 10 punkter større enn “Joakim”. Den svarte bakgrunnen har jeg valgt for å fremheve horror-følelsen fonten gir.

Logo-1

 

Denne logoen er noe enklere. Jeg har brukt intialene mine og jeg har brukt en font som ligner litt på en avis logo. Under står det “studieblogg” i en bit-font. Denne logoen er veldig enkel, men gir også en følelse av modenhet og makt.

Design: Arbeidskrav #3.2

Jeg ble ikke helt fornøyd med mine to første skisser, og ikke fikk jeg noe særlig konstruktiv kritikk i klassen, så jeg valgte like gjerne å lage en ny. Her har jeg hentet inspirasjon fra gamle Hellas, fra en tid da grekerne regjerte og ikke hadde gjeld i bøtter og spann. Jeg har brukt en font som heter Empiric Roman, den har spisse linjer og har noen særpreg på de forskjellige bokstavene, som for eksempel “A”en som ser ut som en opp-ned “V”. Jeg har brukt to sverd i kors for å få frem at det er “A”‘er. Teksten er i hvit og bakgrunnen er i svart, dette har jeg gjort for å skape en følelse av makt og styrke. Under “Graham” så står det “Est. MCMXMIII” som er 1993 (året jeg ble født), bak denne teksten har jeg valgt å skape en horisontal-uskarphet, for å gjøre det hele litt mer spennende.

 

Logo-4_4