I denne oppgaven skulle jeg produsere et nettsted/wordpress-side for et fiktivt regnskapsfirma. Fordelen med WordPress er at kunden/redaktøren lettere kan skrive innlegg, legge inn bilder og oppdatere nettsiden uten at det kreves mye webkunnskap. Minimum til oppgaven var at den skulle innholde fire sider: Nyhetsside, pris/info-side, ansatte-side og kontaktside.
Et regnskapsfirma vil som regel framstå som seriøse og troverdige, og laget derfor en layout med fargene blå og hvitt. Navigasjonen ville jeg ikke ha for komplisert. Den er nokså standard og har undermenyer/nedtrekksmenyer.
Link til nettsiden til regnskapsfirmaet Kleivene & Co.
Prosess:
Research
- Studerte flere tilsvarende selskapers nettsider, og søkte generelt etter andre gode nettsider.
- Undersøkte forskjellige muligheter for forskjellige themes/temaer til wordpressider.
Installering
- Intallerte temaet twentyten til egen PC (localhost).
- Laget childtheme av twentyten-temaet og gjorde alt av endringer til regnskapssiden på denne.
Idé- og prototype-fase
- La til ny header og bakgrunn, nye sider, widgets, innhold, bilder, linker osv. Hadde en overliggende idé om hvordan layout og uttrykket skulle være, men det ble gjort mye endringer underveis i dette arbeidet. Brukte for det meste Photoshop og Illustrator til å designe med.
La ut på server
- Før jeg la ut filene på server endret jeg wp-config-samle.php til wp-config.php og la til alle opplysninger om brukernavn, passord, host.
- Brukte Dreamweaver til å laste opp. Laget ny side/Site og la til FTP og MySql.
- Oppdaterte siden med å legge til info på ny.
- Ga til slutt en venn tilgang til nettstedet som bruker/editor.
Innledning
Dette prosjektet var delt i to deler: produksjon av et Flash fotogalleri og produksjon av en Flash interaktiv webbanner.
Før jeg kom skikkelig igang måtte jeg søke kunnskap om flash og så gjennom videleksjoner og fagstoff på moodle, søkte på internett og youtube, og brukte hjelpefilen i programmet en del.
Beskrivelse
Fotogalleriet har sort bakgrunn for at fargene skal komme bedre fram. Navigasjonsknappene er plassert øverst på siden og skal være enkle å legge merke til. På galleriforsiden har jeg livnet opp siden med litt bevegelse i forsidebildet og tekst som fades inn. På bildesiden er “Thumbs” laget i størrelse 100×100, og høyden på alle store bilder er 380 px mens bredden varierer. Alle thumbs er knapper og åpner selve bilde. Plasseringen av elementer har jeg forsøkt å ordne på en stram og oversiktlig måte. Banneret til fotogalleriet ligger på sidene i Enkelt nettsted, plassert like under sidepanelet. Banneret er bygd opp av både motion tweens og classic tveens. Overgangen fra slutt til start er “sømløs” – laget slik at det ikke blir et plutselig stopp når den startes fra nytt.
På nettsiden min har jeg plassert swf-filer over alle headerne mine for å gjøre siden mer livlig og dynamisk. På Hjem-siden jeg også lagt til en liten swf-fil av Noroff-logoen som er laget i Adobe After Effects. Banneret litt for kornete til at jeg er vil si meg fornøyd. Det var ikke en del av oppgaven, men likevel moro å bruke After Effects og få inn banneret på nettsiden..
Konklusjon
Etter en å ha bearbeidet førsteutkastet mitt synes jeg fotogalleriet har forbedret seg. Layouten i fotogalleriet er oversiktlig, navigeringen er enkel og ren. Banneret har bedre flyt, dvs. ikke hakkete, men en glidene overgang når den repeteres.
Sjekk Enkelt nettsted og klikk på webbanner for å se Flash-fotogalleriet.
Nå har jeg jobbet en del med flash og da syntes jeg det var på tide med en liten oppdatering av nettsiden min. Det jeg har forandret er headerne på hver enkelt side, som er gjort om fra å være statiske til å komme i bevegelse med flash. Jeg har også gjort solen i bakgrunnsbilde skarpere, et tips jeg fikk i tilbakemeldingen fra studieveileder.
I denne aktiviteten skulle jeg jobbe med symboler og bygge opp scenen min med bruk av arkivet(library)-panelet i Flash.
Movie Clip:
En enkel sol som skifter farger over 120 frames.
Button:
Her gjorde jeg avataren min om til en button. I UP vises det opprinnelige bilde, i OVER vises en sorthvitt-variant, og i DOWN en kontrastfylt fargevariant. I HIT brukes bilde i en litt forstørret versjon.
Siden jeg var så godt igang laget jeg enda en button av en kattelignende figur og brukte én variant av figuren i UP, og én i DOWN. I OVER la jeg inn en tegneserieboble med teksten “SMACK!”. I HIT la jeg inn en runding på størrelse med figuren.
I denne oppgaven skulle jeg lage en digital Avatar av meg selv, på 200*200 px. Det skulle tas utgangspunkt i et selvportrett, lage en skisse analogt og så produsere Avataren digitalt i Adobe Flash.
Som utgangspunkt til Avataren brukte jeg skisse og foto. Jeg jobbet lagvis og brukte for det meste pen tool. Jeg la etterhvert på skygger i Adobe Flash, litt tilfeldig, men jeg synes det ga et nokså bra resultat.
Her er mitt ferdige foto-essay.
Breif:
Oppgaven var å lage et fotoessay som portretterte en person, dvs. en bildeserie på 6 bilder pluss et forsidebilde. Kriteriene for oppgaven var at forsidebildet skulle være i sort/hvitt og et av hovedbildene hadde en naturlig lyskilde. Personen måtte selvfølgelig også samtykke til å bli tatt bilde av.
Research- og idéstadiet:
Til å begynne med måtte jeg finne mer ut om fotoessay. Jeg fant mye bra info og inspirasjon på nettet og i fotobøker. Jeg laget tankekart for å få ideene ned på arket og kom etter hvert frem til at temaet skulle omhandle mat. Til dette har jeg en god venn som elsker å lage mat og som ikke var vanskelig å spørre om å bli portrettert. Videre laget jeg flere skisser som mulige forslag til bildeserien. Temaet ble mat der jeg ville ha bilder av mat i ulike faser, fra hyllen i butikken, på vei hjem og til kjøkkenet.
Fotografering og redigering:
Da jeg var ferdig med skissearbeidet begynte jeg å planlegge hvilke bilder jeg skulle ta, hvor jeg skulle ta dem og i hvilken rekkefølge. Dette gjennomgikk jeg også med personen som skulle portretteres før selve fotograferingen. De første bildene tok jeg på handleturen, først inne i butikken og deretter på gåturen hjem med handleposen i hånda. Så fotograferte jeg under selve matlagingen til måltidet var ferdig tilbredt. I utgangspunktet et rask måltid å lage, men ettersom jeg trengte en del tid til fotograferingen tok det hele mye, mye lenger tid. En tålmodighetsprøve for den som er sulten, men verdt det for bildene sin del. Jeg redigerte så bildene i Photoshop.
Redigeringsvalg
Beskjæring: Bildene beskjærte jeg i ulike størrelser som jeg syntes passet best for komposisjonen i motivet.
Hue: I alle bildene bortsett fra forsidebildet(sort/hvitt) reduserte jeg fargetonen i bakgrunnen slik at de fremstår som nesten som sort/hvitt, men ikke helt. Grunnen var å skape en harmonisk kontrast til andre elementer i bildet som ble trukket frem bildet uten noen fargereduksjon. Effekten jeg ønsket var å få fokuset enda mer rettet mot det som var av betydning i bildet og duse ned bakgrunn og det omkringliggende. Med helt sort/hvit bakgrunn syntes jeg kontrasten kunne bli for stor, i tillegg til at jeg syntes det var spennende og mer beskrivende med en bakgrunn som bar en forsiktig farge.
Kontrasten og lysstyrke justerte jeg opp noe for å få et klarere bilde. Jeg justerte også hvitbalansen på noen bilder for å gjøre fargene mindre gule.
Sort/hvitt: Forsidebilde, kniv og gaffel, er et mye brukt symbol for mat. De brukes bl.a. som piktogram for serveringsteder/restauranter og syntes disse kunne representere temaet “mat” godt. Bildet er tatt på et kurvet A2-ark med lys fra forskjellige kanter for å få ulik refleksjon i metallet. I tillegg til å blitt omgjort til sort/hvitt er det tilført noe diffuse glow.
Diffus bakgrunn: I enkelte bilder gjorde jeg bakgrunnen mer diffus og mindre tydelig. Poenget var å rette fokuset over til personen og objektet i stedet for bakgrunnen.
Konklusjon
Dette har vært en veldig lærerik og artig oppgave. Det var en annerledes og spennende måte å ta bilder på denne gangen, ikke raskt og spontant, men gjennomtenkt på forhånd. God planlegging og god tid til fotograferingen er essensielt. Selve fotograferingen kunne jeg nok brukt mer tid på for å få enda skarpere bilder. Lys har jeg lært også er veldig viktig og kommer nok garantert til å investere i utstyr for å forbedre lysforholdene i bildene framover. Også spennende var det å bruke Photoshop til bilderedigering. Kanskje kan jeg være såpass selvkritisk at jeg brukte verktøyet litt unødvendig mye, men det var svært nyttig erfaring.
Introduksjon
Prosjektet gikk ut på å lage et nettsted bestående av én indexside med fremstilling av nettstedets innhold og tre undersider. Undersidene skulle ha hvert sitt tema: Historisk oversikt av html og css, design på nett, og egen erfaring med bruk og design av nettsteder.
Research
Først måtte jeg sette meg inn i hvordan Dreamweaver fungerte og gikk gjennom videleksjoner og fagstoff på moodle, søkte på internett, og brukte hjelpefilen i programmet. Da jeg begynte arbeidet med nettstedet søkte jeg etter nyttige tips om hvordan det kunne være lurt å bygge opp nettsiden. Jeg fikk mye inspirasjon ved å søke på flere forskjellige nettsider og analysere designet.
Utforming
Jeg utformet layouten på nettstedet ved å skisse diverse layouter og prøve ut de forskjellige layoutstilene i Dreamweaver. Jeg ønsket å variere designet og laget ulike headerne og bakgrunn for hver enkelt side. 10 av 14 bilder i bildemappen er laget selv ved bruk av Illustrator og Photoshop. Siden er 800px bred og forblir midtstilt når vindusstørrelsen varierer. Fonten som er brukt er Verdana og Arial. Fargene lys blå og gult er gjennomgående for nettsiden. Til sammen synes jeg dette gir et enkelt, harmonisk og oversiktlig utseende med et leservennlig innhold.
Teksten på hver side har jeg valgt å starte med en ingress for at leserne rask kan sette seg inn i innholdet. På siden med historie har jeg skrevet om den generelle historien først og lagt inn et Spry Collapsable Panel for mer info om html og css. Selv om tekstinnholdet ikke er så stort syntes jeg det fungerte godt at siden ble komprimert il en nettere utgave, men samtidig gav muligheten til å lese mer. På siden for nettdesign har jeg brukt Spry Tabbed Panels som hjelper å kategorisere linkene til de ulike nettsidene.
Resultat
Jeg synes designet av nettstedet fungerer bra, farger harmonerer og forhåpentligvis gir dette et godt førsteinntrykk for leseren. Navigeringen er enkel og innholdet er fint tilpasset. Jeg har prøvd få frem budskapet på sidene slik at man kan få oversikt ved første øyekast. Nettstedet tror jeg også kan være god å jobbe videre med, utvide og vedlikeholde.
Nå er jeg i startgropa i hvordan man utarbeider en nettside. Den første teknikken jeg anvender er HTML og CSS. Til dette gjorde jeg oppgaver for å praktisk erfare hvordan html og css er bygget opp og fungerer. Her er en enkel webside jeg laget.
HTML
CSS
Webside
I denne prosjektoppgaven skulle jeg utvikle et prosjekt, f.eks. lage ny logo og nye trykksaker, for en bedrift eller en organisasjon. Prosjektet måtte bli godkjent av faglærer etter en prosjektbeskrivelse som ble levert i forkant av prosjektperioden.
Presentasjon: Grafisk prosjekteksamen
Sammendrag av prosjektbeskrivelse
Kunde: Prima Invest AS. Prima Invest er et eiendomsselskap etablert i 2001 i Grimstad, Aust-Ager. Selskapet driver primært med utleie, kjøp og salg av næringsbygg på sør- og østlandet. Selskapet eies av Verdia Holding AS, som inngår som en del av LKGruppen.
Begrunnelse for valg av prosjektoppgave: Prima Invest AS synes det er på tide med en fornyelse av logoen sin. Den nye logoen kan gjerne ha likheter med logoen som brukes i dag.
Problemstilling: Lage ny logo for Prima Invest AS. Med en ny logo vil det også være behov for nye brevark og visittkort, og tillegg mener selskapet at det hadde vært nyttig med en flyer/enkel brosjyre/ informasjonshefte e.l. som kunne gis til kunder og interessenter.
.
Nåværende logo
.
Med dette utgangspunktet gjorde jeg research på selskapsformen og på logoer til tilsvarende bedrifter, og begynte så å skissere varierende typer symboler. Noen av skissene valgte jeg så videre og gjøre om til vektorgrafikk. Etterhvert fikk jeg mange positive tilbakemeldinger fra kunden, Prima Invest, og om hvilke skisser og utkast som de syntes passet. Disse utviklet jeg så videre til den endelige avgjørelsen ble tatt om hvilken logo som skulle brukes.
Med logoen på plass kunne jeg produsere brevark, telefax, visittkort og flyer slik bedriften ønsket seg, og utarbeide en profilmanual. Bedriften ble svært positive til den nye logoen. Alt i alt har det vært en svært morsom og lærerik prosess, og her er den nye logoen jeg utviklet.
.
Ny logo
I den har jeg samlet alle de obligatoriske oppgavene jeg har hatt til nå i dette studiet.
