Portfolio. Elektronisk portfolio findes på: Sofie Jespersen August 2012 MEDIEGRAFIKER PORTFOLIO

Transkript

1 Portfolio MEDIEGRAFIKER PORTFOLIO Sofie Jespersen August 2012 Elektronisk portfolio findes på:

2 grafisk design

3 grafisk design Opgaven Opgaven gik ud på at lave et redesign af Familiemåltider.dk s madplan, da de synes deres fontstørrelser var for små på den nuværende. Desuden ville de gerne give layoutet et pift. Målgruppe Afsender: Familiemåltider.dk er et firma, som leverer ingredienser til 4 nemme og variende retter ud til deres kunder. Der leveres en gang om ugen og leveringen består af 2 kasser. En kasse med tilbehør og en termokasse med kød.man tilmelder sig online via deres hjemmeside. Målgruppe: Målgruppen er hovedsageligt par eller familier, som gerne vil spare tid og trænger til variation i deres madlavning. Det er både mænd og kvinder som er 30+, og har en hektisk hverdag, hvor de ikke ønsker at bruge flere timer på at handle ind og stå i køkkenet. De går op i lækker, varierende mad af god kvalitet, og finder derfor ikke færdigretter som en løsning. Budskab: Lækker og nem mad af rigtig god kvalitet. De 4 grafiske designparametre Form: A5, så madplanen kan udskrives på en A4 og foldes. Dette var et krav fra kunden, da de selv skal printe det hjemme, og det er derfor en god traditionel og økonomisk størrelse. Typografi: Jeg har brugt 3 forskellige fonte, hvor 1 af dem er en skriveskrift og de 2 andre er groteske. Helvetica Neue Lidt bastant Kantet Tidsløs Segoe UI Rolig Let læselig Tidsløs Jenny Handwritten Er brugt i logo Livlig Barnlig/familievenlig Kontrast til groteske fonte Illustrationer: Jeg har brugt billeder til at vise, hvordan retten ser ud. Dette er gjort, da vi mennesker tit spiser med øjnene, og opskrifterne virker derfor mere indbydende, og vi kan bedre visualisere, hvordan det kommer til at smage. Jeg har også tegnet nogle vandrettet og lodrettet streger, for at skabe harmoni og balance. Farver: Jeg har valgt at holder farverne i de samme som bliver brugt i firmaets logo, altså en mørk grøn og en orange. Begge disse farver giver associationer til friske råvarer og sunde måltider. Ellers er der valgt sort til det meste af teksten. Denne grønne og orange farve giver også lidt liv til siderne, og skaber noget kontrast til hinanden. Procesbeskrivelse Ideudvikling: Vurdering af gammel madplan Brainstorm på Familiemåltider.dk, mad og madplan Inspirationssøgning på nettet og kogebøger hjemme Skitser i hånden Forslag udarbejdes i Indesign og sendes til kunden Skærmdumps Prøveprint Udarbejdelse af madplan i Indesign Jeg havde ret frie hænder fra start, og efter at have kikket kogebøger igennem derhjemme og søgt på nettet, fandt jeg frem til flere ideer. Deres største krav var, at madplanen skulle kunne udskrives på A4 og på en printer som de havde hjemme. Så der var en lille udfordring i at tekst og billeder ikke måtte komme for tæt på papirkanten. Ellers gik udviklingen godt, og der var rigtig god respons fra kunden, som synes at ideerne passede til de forventninger, som de havde. Kvalitetsvurdering Både kunden og jeg er blevet godt tilfredse med det endelige resultatet. Jeg synes at madplanen passer godt til budskabet, da den udstråler, at det er lækker mad af god kvailitet, med sin enkelthed og med de lidt lyse farver. Jeg valgte specielt Jenny som kontrast, da denne bliver brugt i logoet, og da der gerne måtte komme lidt liv på opskriftssiderne. Desuden understreger fonten også firmaets navn familiemåltider.dk.

4 idéudvikling / tidligere madplan Large - kasse OPSKRIFTER uge 46 Billeder på vej Billeder på vej Billeder på vej Billeder på vej KYLLING MED KARTOFFEL- JORDSKOKMOS STEGTE MAJS-KARTOFFELKAGER MED SVINEKOTELETTER OVNBAGTE KØDBOLLER PÅ TOMAT- BUND SPAGETTI MED GRØNNE BØNNER OG STEAK 3 stk. skalotteløg 250 g. brune mark champignon 125 g. bacon i tern Lidt olie 500 g. kyllingbryst 2 spsk. mel Lidt salt og peber 2,5 dl. rødvin 3 dl. grøntsagsbouillon 2 stk. lauerbærblade 15 g. mørk chokolade 800 g. kartofler 500 g. jordskokker 1 spsk. olie ½ cirton, skal heraf ½ bdt. persille Tilberedning - tid ca. 40 min Pil løg. Skær løg og champignon i halve. Steg bacon sprød i en pande, lad dryppe af. Brun løg og champignon i lidt af baconfedtet. Vend kylling i mel og brun godt på panden. Krydr med salt og peber. Tilsæt rødvin, bouillon og lauerbærblade, bacon og chokolade. Væden skal akkurat dække kyllingen. Bring retten i kog, skru ned og lad småkoge ca. 15 min. Skræl kartofler og jordskokker og skær i mindre stykker og kog møre. Gem ca. ½ dl af vandet. Mos grøntsagerne groft med kogevandet og lidt olie. Smag til med citron skal, salt og peber. Drys retten med hakket persille og server med kartoffel-jordskok mosen til. 500 g kartofler 1 ds. majs 2 stk æg 2 spsk. mel 1 dl mælk ½ bdt. hakket persille 1 tsk. salt Lidt olie 500 g. tomater 1 stk. rød peber 2 spsk. hvidvinseddike 2 spsk. sukker 1 tsk. salt 600 g. svinekoteletter Lidt salt og peber Tilberedning - tid ca. 40 min Kog kartoflerne og mos dem efterfølgende. Bland majs, æg, mel, mælk og persille i kartoffelmosen. Varm olie i en slip-let pande. Form og steg små kager af farsen 3-4 min pr. side. Grofthakket tomater og finthakket peberfrugt kommes i en gryde sammen med eddike, sukker og salt. Kog chutneyen sammen til den tykner, ca. 10 min. Steg koteletter i lidt olie på en varm pande krydr med salt og peber. 500 g. hakket oksekød Lidt salt og peber 1 stk. æg 1½ dl. mælk 4 spsk. grahamsmel 2 spsk. parmesanost 1 tsk. tørret rosmarin 800 g. bagekartofler i både 1 bk. blommetomater Lidt olie 2 fed hvidløg Lidt salt og peber 1 stk. aubergine Tilberedning - tid ca. 20 min + 40 min ovntid Rør oksekød med salt, peber, æg, mælk, mel, parmesanost og rosmarin, sammen til en fars. Bland kartofler og tomater i en skål, tilsæt olie, finthakket hvidløg, salt og peber og vend godt rundt. Skær aubergine i skiver, læg dem i bunden af et ovnfast fad. Fordel kartoffelblandingen over. Form farsen til små kødboller og læg dem på toppen. Steg grøntsager og fars i ovnen ca. 40 min ved 200 grader. 400 g. fuldkorns spaghetti 500 g. flankesteak Lidt olie Lidt salt og peber 150 g. grønne bønner 1 gl. pesto 25 g. hakket hassalnødder 40 g. parmesan Tilberedning - tid ca. 20 min Kog spaghetti i letsaltet vand til den er al dente. Krydr kødet godt med salt og peber og steg på en varm pande i ca. 2 min på hver side, og hold varme. Kog bønnerne i ca. 2 min i letsaltet vand. Bland den varme spaghetti med bønner og pesto, smag til med salt og peber. Skær kødet i skiver og server til pastaen. Drys med hakket nødder og parmesan. Drys persille over majs-kartoffelkager og server med tomat chutney og svinekoteletter til. Symbolet betyder egenkøb, se sms God fornøjelse - Hilsen Familiemåltider.dk

5 Idéudvikling / brainstorm Familiemåltider.dk Gode råvarer Nemme opskrifter Lækre måltider Høj kvalitet Professionelle og kvalificerede medarbejdere Råvarer leveres til døren Varierende opskrifter Varebil Service Bud Få egenkøb Sms-service Pakke Nye opskrifter Nye smagsindtryk Troværdig Madplan Nemt Overskueligt Hurtigt Planlagt Overskud Penge besparende Varierende Lækkert Nyt Smag Sundt Mad Lækkert Kvalitet Råvarer Fisk Kød Grønt Frisk Varmt Mættende Socialt Sundt Vitaminer Duft Varierende Smag

6 Idéudvikling / Inspiration

7 Idéudvikling / Inspiration

8 idéudvikling / skitser

9 Udvikling / Forslag der skal sendes til kunden / Forslag nr 1

10 Udvikling / Forslag der skal sendes til kunden / Forslag nr 2

11 Udvikling / Forslag der skal sendes til kunden / Forslag nr 3

12 Udvikling / Madplan Kunden kunne godt lide forslag nr. 2, men ville gerne kompinere det med forsiden fra forslag nr. 3 og indholdsfortegnelsen i forslag nr. 1.

13 typografi & ombrydning

14 typografi og ombrydning Opgaven Dette er en fiktiv opgave, som består af et 16 siders hæfte. Hæftet omhandler den Sibiriske Tiger, som er en af verdens mest truede dyrearter. Dokumentet 190 x 140 mm. Facing pages. Marginer in: 15 mm, out: 30 mm top: 20 mm, bund 34,3 mm Marginer bestemt efter 24-delingsmetoden, og tilpasset 3 mm til beskæring. Autogenereret indholdsfortegnelse Baseline Grid Grid sat til brødtekstens skydning på 14 pt. Grid tilpasset så det flugter med bundmargin. Topmargin tilpasset brødtekstens x-højde. A-Master Pagina. Grid tilpasning. Modul med 5 spalter Brødtekst Myriad pro: Grotesk, letlæselig, klassisk, seriøst udtryk. 10 pt/14 pt, Metrics. Låst til grundlinienettet. Alignment = Left Justify. Language = dansk. First line indent = 10 pt (en geviert). Wordspacing = min. 70 %, desired 100 % og max 133 %. Er også lavet som brødtekst u. indryk, uden first line indent. Overskrift Lubalin Graph Book: Antikva, lidt kantet, kontrast til Myriad Pro, moderne udtryk. 20 pt/24 pt. Rule below på 0,5 pt, offset 5 pt (1,764 mm) Alignment = både left og right justify, for at give liv på siderne. Billeder Følger som udgangspunkt brødtekstens x-højde. Farvevalg Har valgt at bruge sort og orange, da det er de samme farver som tigerens pels er. Så farverne i teksten refererer til emnet. De er også kontraster, da orange er varm og glad, mens sort er mørk og kold. Passer også godt til emnet, da man både kender tigeren som en koldblodig dræber og som et smukt og elegant dyr. Knibning/space Max knibning brødtekst = - 5 pt Thin space inden % Halvgeviert inden bullets Optiske årsager Billede på side 13 er rykket en smule over brødtekstens x-højde Kvalitetsvurdering Jeg havde lidt problemer med teksten enkelt steder, da jeg gerne ville undgå, at have et enkelt ord på sidste linie, og da jeg ikke ville knibe teksten for meget. Men det lykkes dog de steder kun at knibe teksten max. 5 pt, hvilket jeg er godt tilfreds med. Sideantal og tekstmængden bragte mig også lidt udfordringer, da jeg havde for meget tekst til at holde mig på 12 sider og lige lidt for lidt til at det kunne udfylde 16 sider, så jeg var omkring flere muligheder før jeg fandt min løsning. Jeg brugte lang tid på at ombryde teksten, for at få det rigtige forløb. Især brugte jeg tid på at få forløbet omkring min cirkel med pelsstrukturen til at blive pæn. Alt i alt er jeg rigtig godt tilfreds med mit slutprodukt, og synes jeg kom frem til et resultat, som matchede de forventninger jeg havde.

15 Den sibiriske tiger / highlights / Indholdsfortegnelse Mine arbejdsplatter til denne opgave Autogenereret indholdsfortegnelse Tallene holder bagkant

16 den sibiriske tiger / highlights / side 4-5 & side 6-7 En halvgeviert mellem bullet og tekst Der er indsat thin space før % Billede og tekst tilpasset, så de følger spalterne i modulet Flugter brødtekstens x-højde Grid tilpasset så det flugter bundmargin Opmærksom på pænt tekstforløb ved figursats

17 den sibiriske tiger / highlights / side & side mm beskæring Af optiske årsager er billede rykket lidt over brødtekstens x-højde Billede og tekst tilpasset, så de følger spalterne i modulet Grid tilpasset x-højde, så det flugter topmargin

18 grafik & billede

19 GRAFIK OG BILLEDE GRAFIK Opgaven Opgaven gik ud på at designe 5 plakater til Xplanations 10 års jubilæum. De skulle holdes i Xplanations farver og skulle godkendes til at følge deres designlinie. Jeg har lavet denne plakat fra bunden af i Illustrator og indesign. Programvalg Til at lave X et i er der brugt illustrator, for at kunne manipulere mest muligt med teksten. Værktøjer brugt i Illustrator Pen Tool: Tegneværktøj Type Tool: Tekstværktøj Rotate Tool: Vender og drejer objekter Selection Tool: Strække og mindske objekter Type on a Path Tool: Tekstværktøj Arbejdsprocess Optegning af X et Indskriving af tekst i øverste del af X et Outline tekst Strækker, mindsker og roterer tekst Type on a Path Tool - indskrivning af sætning på nederste del af X et Favelægning i Xplanations farver X et sat ind i indesign og tiltet Jubilæumslogo tilføjet samt streg Opstart til slut Det gik fint med at få optegnet x et, men det var lidt et tidskrævende job, at få skrevet teksten ind og så derefter få den drejet, strækket og mindsket, så den fulgte faconen af x et. Den nederste del af x et drillede mig lidt. Jeg skulle få sætningerne til at passe, så de ikke blev delt, men sluttede med en færdig sætning og et punkttum. Det tog lidt tid, at finde den rigtige punktstørrelse, og få det til at passe. Kvalitetsvurdering Firmaet er rigtig godt tilfredse med det færdige resultat. Jeg selv er også godt tilfreds, men ville dog gerne have lavet noget mere spændende, dog satte designlinien en lille stopper for, hvor vildt det måtte være. Overordnet set er jeg tilfreds, og synes det blev en god plakat, da den blev printet og kom op og hænge.

20 ILLUSTRATOR / PROCES Først tegnede jeg x et, så jeg havde nogle streger at gå efter. Brugte værktøjer: Derefter skrev jeg den test, som jeg gerne ville have til at stå i den øverste del af x et. Teksten er taget fra Xplanations hjemmeside. Brugte værktøjer: De jeg havde min tekst på plads, begyndte jeg at manipulere den. Jeg valgt nogle ord us, som skulle være fed. Derefter blev teksten outlinet, så jeg kunne strække og rotere den, som jeg villle. Jeg sørgede for at følge x ets form. Brugte værktøjer:

21 ILLUSTRATOR / PROCES Da jeg havde den øverste del af x et klar, var det den nederste dels tur. Først deletede jeg stregerne i den øverste del af x et, og derefter skrev jeg teksten på i den nederste del. Brugte værktøjer: Tilsidst lagde jeg farver på x et i Xplanations farver. Brugte værktøjer:

22 ILLUSTRATION BRUGT PÅ PLAKAT We care about your words 10 years caring about your words years caring about your words. 10 years caring about your word 10 s. 10 years caring about your wor ds. 10 years caring about your word s. 10 years caring about your words. 1 0 years caring about your words. 10 years caring about your words. 10 years caring about your words.

23 grafisk workflow

24 GRAFISK WORKFLOW Opgaven Designe og programmere Timmm.dk for Anne Sofie Timm Meltvedt. Kunden ønsker en præsentations-website med hendes CV og øvrige informationer, som kan bruges ved jobsøgning. Hjemmesiden skal derfor fortælle noget om hende og de ting hun har beskæftiget sig med. Den skal udstråle professionalisme og seriøsitet. Designkrav Let tilgængelig kontaktinformation, da den skal bruges ved jobsøgning Skal være indbydende Gerne enkel og uden for mange farver, med dog lidt retro Relatere til film og tv Informerende og overskuelig Seriøst udtryk, uden at blive for kedelig Layout Format 950 x 650 px. Dette er en god størrelse, som passer til de fleste skærmstørrelser, her i blandt en 17 skærm (1024 x 768 px) Dropdown menu ved CV og TIMMM Rollover-images med link Links med mouseover effekt (a:hover), for brugervenlighed Usability SItet er overskueligt for enhver bruger, da det er enkelt stillet op. Dog kan dropdownmenuenerne måske forvirre lidt, da du ikke kan gå ind på de engelske sider fra forsiden. Det var dog kundens ønske at beholde det sådan. På kontakt siden er der et mail link, samt en mailformular. Begge så det er let for brugeren at komme i kontakt med ejeren af sitet. Procesbeskrivelse Brainstormin på tv og film Inspirationssøgning på nettet Skitser i hånden Præsentationslayout i photoshop Skærmdumps Udarbejdelse af flowchart Udarbejdelse af skelet Udarbejdelse af storyboard Fremstilling af flash-element til banner Billeder behandlet i photoshop - RGB og 72 ppi, jpg- og png-filer Opsætning i Dreamweaver Benyttet html, javascript og css Testet i Firefox, Google Chrome og internet Explorer Uploadet på Browserkompatibilitet Er testet i både firefox, chrome og explorer, hvor sitet virker fint i alle tre. Desuden er mailformularen testet i alle 3 browsere, hvor den også fungere som den skal. Der er lavet farve defination på scrollbaren, hvor definationerne kun ses i chrome og explorer, og ikke i firefox. Kvalitetsvurdering Kunden er meget tilfreds med resultatet, hvilket jeg også selv er. Jeg synes min arbejdsprocess er gået rigtig godt, og kunden havde selv nogle ideer, hvorfra jeg modifinerede dem lidt efter mine skitser. Jeg havde forventet problemer med mailformularen, men dette gik faktisk problemfrit. Der var lidt problemer med at lave dropdown menuen, og det tog mig lidt tid, at få den til at virker. Det var dog en fejl i koden, som bragte mig problemer, men da jeg fik den rettet rigtigt til, så fungerede det fint. Alt i alt er jeg god tilfreds med resultatet, og har været godt tilfreds med arbejdsgangen, da der ikke var særlig mange problemer undervejs. Og så er jeg godt tilfreds med, at sitet lever op til min kundes forventninger.

25 PROCES / INSPIRATIONSSØGNING

26 PROCES / BRAINSTORM / SKITSER Brainstorm Filmrulle TV-skærm Udsendelser Seriøsitet Fiktion Nyheder Biograf Storyboard Mindmap Film clapper Redigering Kamera Skuespillere Produktion Statister scener Film negativer Popcorn og sodavand Optagelser

27 PROCES / LAYOUT / INDEX.HTML

28 PROCES / LAYOUT / TIMMM.HTML

29 PROCES / FLOWCHART index.html cv.html ref.html timmm.html kontakt.html cvgb.html timmmgb.html tak.html fejl.html

30 PROCES / SKELET / INDEX.HTML OG TIMMM.HTML Index 950 px 30 px 30 px 150 x 65 px 20 px # menu 950 x 115 px 100 px 150 px 150 px 150 x 84 px 150 x 84 px 105 px 105 px 650 px 20 px 400 x 143 px 20 px 116 px 107 px 116 px # forside 950 x 350 px 40 px 40 px 40 px 40 px 145 px 150 x 100 px 20 px 150 x 100 px 150 x 100 px 150 x 100 px 20 px 20 px 145 px 45 px 45 px 45 px 45 px Timmm 30 px 30 px 150 x 65 px 100 px 640 x 26 px 250 px 950 px 950 x 115 px 75 px 20 px 14 px 30 px CV // REFERENCER // TIMMM // KONTAKT 30 px 495 x 475 px 130 px 30 px 360 x 241 px 650 px 32 px 33 px 164 px 30 px

31 PROCES / STORYBOARD / GENERELT Typografi P: font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 16px; color: #EDEDED; H1: H2: H3 font-family: Verdana, Geneva, sans-serif; font-size: 24px; font-weight: lighter; color: #2DA1AF; text-align: left; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: normal; color: #2DA1AF; text-align: left; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 16px; color: #2DA1AF; padding-top: 6px; padding-bottom: 3px; font-weight: normal; Links menu P: font-family: Verdana, Geneva, sans-serif; font-size: 16px; color: #2da1af; text-align: left; Li: font-family: Verdana, Geneva, sans-serif; font-size: 16px; list-style-type: none; Li a: font-family: Verdana, Geneva, sans-serif; font-size: 16px; color: #6E6D6D; text-decoration: none; display: block; white-space: nowrap; width: auto; margin-right: 7px; margin-left: 7px; Li a:hover: color: #2da1af; margin-right: 7px; margin-left: 7px; Li ul: position: absolute; visibility: hidden; border: 1px solid #2DA1AF; margin-top: 5px; background-color: #000; Li ul li { display: inline; float: none; background-color: #000; Li ul li a: font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #6E6D6D; text-decoration: none; width: auto; margin-top: 5px; margin-bottom: 5px; Li ul li a:hover: font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #2da1af; text-decoration: none; margin-top: 5px; margin-bottom: 5px;

32 PROCES / STORYBOARD / GENERELT 1 2 CV // REFERENCER // TIMMM // KONTAKT Scrollbar overflow:auto; scrollbar-3dlight-color:#2da1af; scrollbar-arrow-color:#000; scrollbar-track-color:#3b3b3b; scrollbar-darkshadow-color:#000; scrollbar-face-color:#2da1af; scrollbar-highlight-color:#2da1af; scrollbar-shadow-color:#2da1af; ::-webkit-scrollbar { width: 10px; height: 10px; ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { height: 5px; display: block; background-color: transparent; Body Background-color: #000 Elementer 1) logo.png Actions 1) Linker til index.html 2) LINKS: CV -> dropdown menu, dansk linker til cv.html og english linker til cvgb.html Referencer -> linker til ref.html Timmm -> dropdown menu, dansk linker til timmm.html og english linker til timmmgb.html Kontakt -> linker til kontakt.html ::-webkit-scrollbar-track-piece { background-color: #3b3b3b; -webkit-border-radius: 6px; ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #2DA1AF; border: 1px solid #2DA1AF; -webkit-border-radius: 6px;

33 PROCES / STORYBOARD index.html Elementer 3) filmrullev.png 4) filmrulleh.png 5) velkommen.png 6) cv.png 7) ref.png 8) timmm.png 9) kontakt.png Actions 6) Linker til cv.html, rollover image til cv2.png 7) Linker til ref.html, rollover image til ref2.png 8) Linker til timmm.html, rollover image til timmm2.png 9) Linker til kontakt.html, rollover image til kontakt2.png cv.html CV // REFERENCER // TIMMM // KONTAKT Elementer 3) CV_Anne Sofie T. Meltvedt.doc CURRICULUM VITAE Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia qui. Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. 3 Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaerc. Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. Actions

34 PROCES / STORYBOARD cvgb.html CV // REFERENCER // TIMMM // KONTAKT Elementer 3) Curriculum vitae _Anne Sofie T. Meltvedt.doc CURRICULUM VITAE Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia qui. Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. 3 Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaerc. Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. Actions ref.html REFERENCER Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. 3 Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. 4 5 CV // REFERENCER // TIMMM // KONTAKT Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. 8 9 Elementer 3) Alt tekst: ref.doc 4) deluca-logo.jpg 5) Aftenshowetlogo.jpg 6) logo-rabatten.jpg 7) LOGO-Xplanation-neg.jpg 8) DR_Ramasjang-logo.jpg 9) imagesca8unslc-logo.jpg 10) radiator-film-logo.jpg 11) miso-logo.jpg Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. 6 Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Actions 4) linker til deluca.pdf -> target: blank 5) linker til Aftenshowet.pdf -> target: blank 6) linker til dr.pdf -> target: blank 7) linker til xplanation.pdf -> target: blank 8) sbd@dr.dk -> linker til mail 9) mbi@cadesignmind.dk -> linker til mail 10) stefan@radiatorfilm.com -> linker til mail 11) claus@film.dk -> linker til mail

35 PROCES / STORYBOARD timmm.html CV // REFERENCER // TIMMM // KONTAKT Elementer 3) CV_Anne Sofie T. Meltvedt.doc WHO IS TIMMM Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 3 Actions 4) tvslideshow.swf ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia qui. 4 timmmgb.html CV // REFERENCER // TIMMM // KONTAKT Elementer 3) Curriculum vitae _Anne Sofie T. Meltvedt.doc WHO IS TIMMM Lorem sed do labore et consectetur adipisicing elit, eiusmod tempor incididunt ut dolore magna aliqua. Ut enim ad 3 Actions 4) tvslideshow.swf minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia qui. 4

36 PROCES / STORYBOARD kontakt.html CV // REFERENCER // TIMMM // KONTAKT Elementer 3) kontakt.doc 4) mailformular KONTAKT MIG Lorem consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 3 magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation Navn Telefon Besked 4 Actions 3) mail@timmm.dk linker til mail 5) send knap -> sender formularinfo til mail@timmm.dk. Derefter videresendes man til tak.html Hvis feltet ikke er udfyldt videresendes man til fejl.html 6) nulstil knap -> nulstiller formular felterne Send Nulstil 5 6 tak.html og fejl.html CV // REFERENCER // TIMMM // KONTAKT Elementer 3) tak og fejl.doc TAK Mange tak for din . Jeg vender tilbage med et svar hurtigst muligt << tilbage 3 Actions 3) tilbage linker til kontakt.html CV // REFERENCER // TIMMM // KONTAKT Elementer 3) tak og fejl.doc FEJL Du mangler at udfylde feltet med din adresse! << tilbage 3 Actions 3) tilbage linker til kontakt.html

37 PROCES / FREMSTILLING AF FLASH Først lavede jeg flashelementet i photoshop, hvor jeg lagde de forskellige frames i hvert sit lag Derefter hentede jeg photoshop filen ind i flash og lavede dem om til movieclip. Jeg oprettede keyframes, så billederne er fremme et stykke tid, før der skiftes til et nyt. å blev der oprettet en motion tween, med blur, så der er en rolig overgang mellem billederne. Movieclippet med fjernsynet er synligt hele tiden.

38 PROCES / OPSÆTNING I DREAMWEAVER / KONTAKT.HTML

39 PROCES / CSS / STYLES.CSS body { background-color: #000; *{outline:none; #wrapper { height: 650px; width: 950px; margin-top: 50px; margin-right: auto; margin-left: auto; border: 1px solid #FFF; #menu { margin: 0px; height: 85px; width: 900px; padding-top: 30px; padding-right: 20px; padding-left: 30px; #wrapper #menu #logo { padding: 0px; height: 65px; width: 150px; margin-right: 100px; #forside { height: 350px; width: 950px; #wrapper #cv { height: 100px; width: 150px; margin-top: 40px; margin-left: 145px; #wrapper #referencer { height: 100px; width: 150px; margin-top: 40px; margin-left: 20px; #wrapper #rtimmm { height: 100px; width: 150px; margin-top: 40px; margin-left: 20px; #wrapper #kontakt { height: 100px; width: 150px; margin-top: 40px; margin-left: 20px; #punkter p { font-family: Verdana, Geneva, sans-serif; font-size: 16px; color: #2da1af; text-align: left; margin: 0px; padding: 0px; #punkter { height: 25px; width: 390px; margin-left: 0px; margin-top: 45px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FFF; padding-left: 250px; #punkter li { font-family: Verdana, Geneva, sans-serif; font-size: 16px; list-style-type: none; #punkter li a { font-family: Verdana, Geneva, sans-serif; font-size: 16px; color: #6E6D6D; text-decoration: none; display: block; white-space: nowrap; width: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 7px; margin-bottom: 0px; margin-left: 7px; #punkter li a:hover { color: #2da1af; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 7px; margin-bottom: 0px; margin-left: 7px; #punkter li ul { padding: 0px; position: absolute; visibility: hidden; border: 1px solid #2DA1AF; margin-top: 5px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-color: #000;

40 PROCES / CSS / STYLES.CSS #punkter li ul li { display: inline; float: none; background-color: #000; #punkter li ul li a { font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #6E6D6D; text-decoration: none; width: auto; margin-top: 5px; margin-bottom: 5px; #punkter li ul li a:hover { font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #2da1af; text-decoration: none; margin-top: 5px; margin-bottom: 5px; #txt { height: 475px; width: 890px; padding: 30px; #wrapper #txt #cv { width: 890px; height: 475px; margin: 0px; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 0px; overflow:auto; scrollbar-3dlight-color:#2da1af; scrollbar-arrow-color:#000; scrollbar-track-color:#3b3b3b; scrollbar-darkshadow-color:#000; scrollbar-face-color:#2da1af; scrollbar-highlight-color:#2da1af; scrollbar-shadow-color:#2da1af; ::-webkit-scrollbar { width: 10px; height: 10px; ::-webkit-scrollbarbutton:start:decrement, ::-webkit-scrollbarbutton:end:increment { height: 5px; display: block; background-color: transparent; ::-webkit-scrollbar-track-piece { background-color: #3b3b3b; -webkit-border-radius: 6px; ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #2DA1AF; border: 1px solid #2DA1AF; -webkit-border-radius: 6px; #wrapper #txt #info { margin: 0px; padding: 0px; height: 475px; width: 300px; #wrapper #txt #field { height: 435px; width: 430px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 150px; padding-top: 40px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; #wrapper #txt p { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 16px; color: #EDEDED; margin: 0px; padding: 0px; #wrapper #txt li { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 16px; color: #EDEDED; padding: 0px; text-align: left; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; text-indent: 0px; text-align: left; list-style-position: outside; #wrapper #txt ul { padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; margin-top: 0px; margin-bottom: 0px; margin-left: 5px; #wrapper #txt h3 { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 16px; color: #2DA1AF; margin: 0px; padding-top: 6px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; font-weight: normal;

41 PROCES / CSS / STYLES.CSS #wrapper #txt a { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 15px; color: #2DA1AF; margin: 0px; padding: 0px; font-weight: normal; display:block; text-align:left; text-decoration: none; #wrapper #txt a:hover { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 15px; font-weight: normal; color: #999; text-decoration: none; margin: 0px; padding: 0px; #wrapper #txt #info a { font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; font-weight: normal; display:block; text-align:left; color: #2DA1AF; text-decoration: none; margin: 0px; padding: 0px; #wrapper #txt #info a:hover { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 16px; font-weight: normal; color: #EDEDED; text-decoration: none; margin: 0px; padding: 0px;.knap { width: 60px; height: 19px; color: #000; background-color: #6E6D6D; margin-right: 10px; border: 1px solid #FFF; padding: 0px; clear:left;.knap:hover { color: #000; background-color: #2DA1AF; fieldset { float:left; font-family:arial, Helvetica, sans-serif; font-size: 12px; width: 400px; padding: 8px 0px 17px 8px; margin-bottom: 0px; margin-left: 0px; border: 1px solid #999; #wrapper #txt h1 { f ont-family: Verdana, Geneva, sans-serif; font-size: 24px; font-weight: lighter; color: #2DA1AF; text-align: left; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; #wrapper #txt h2 { font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: normal; color: #2DA1AF; text-align: left; margin: 0px; padding: 0px; #wrapper #txt h4 { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 16px; font-weight: normal; color: #6E6D6D; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; #wrapper #txt #tv { padding: 0px; height: 241px; width: 360px; margin-top: 100px; margin-right: 0px; margin-bottom: 0px; margin-left: 32px; #wrapper #txt #omtimmm { height: 475px; margin: 0px; padding: 0px; width: 495px;.velkommen { margin-top: 100px; margin-right: 0px; margin-bottom: 0px; margin-left: 20px;

42 PROCES / CSS / STYLES.CSS.filmrulle { margin-top: 150px; margin-right: 0px; margin-bottom: 0px; margin-left: 20px;.filmrulle1 { margin-top: 150px; margin-right: 0px; margin-bottom: 0px; margin-left: 105px; #wrapper #txt #ref1 { height: 90px; width: 350px; margin-right: 30px; #wrapper #txt #ref2 { height: 90px; width: 380px; margin-left: 130px; #wrapper #txt #ref3 { height: 90px; width: 350px; margin-top: 20px; margin-right: 30px; #wrapper #txt #ref4 { height: 90px; width: 380px; margin-left: 130px; margin-top: 20px; #wrapper #txt #ref5 { height: 90px; width: 350px; margin-top: 20px; margin-right: 30px; #wrapper #txt #ref7 { height: 90px; width: 350px; margin-top: 20px; margin-right: 30px; #wrapper #txt #ref6 { height: 90px; width: 380px; margin-left: 130px; margin-top: 20px; #wrapper #txt #ref8 { height: 90px; width: 380px; margin-left: 130px; margin-top: 20px;.referencer { float: right; padding: 0px; margin-top: 5px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; #wrapper #txt #cv li { font-family: Verdana, Geneva, sans-serif; font-size: 10px; line-height: 15px; color: #999; margin: 0px; padding: 0px; font-weight: normal; list-style-type: disc; #wrapper #txt #cv h5 { font-family: Verdana, Geneva, sans-serif; font-size: 10px; line-height: 15px; color: #999; margin: 0px; padding: 0px; font-weight: normal; list-style-type: disc; #wrapper #txt h5 { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 16px; color: #999; margin: 0px; padding: 0px; font-weight: normal; list-style-type: disc;

43 PROCES / TEST / FIREFOX, CHROME OG EXPLORER Her er sitet testet i explore. Sitet fungere fint også mailformularen. Her kan man se, hvordan jeg har defineret den farvede scrollbar til explorer. Her er sitet testet i firefox. Sitet fungere fint også mailformularen. I firefox fungere mine definationer af den farvede scrollbar ikke. Her er sitet testet i chrome Sitet fungere fint også mailformularen. Her kan man se, hvordan jeg har defineret den farvede scrollbar til chrome.