Portfolio
MEDIEGRAFIKER PORTFOLIO
Sofie Jespersen
August 2012
Elektronisk portfolio findes på:
www.my-graphic.dk
grafisk
design
grafisk design
Opgaven
Illustrationer:
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.
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.
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
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
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
Jenny Handwritten
·· Er brugt i logo
·· Livlig
·· Barnlig/familievenlig
·· Kontrast til groteske fonte
Segoe UI
·· Rolig
·· Let læselig
·· Tidsløs
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“.
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.
Symbolet betyder egenkøb, se sms
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.
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.
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.
Drys persille over majs-kartoffelkager og
server med tomat chutney og svinekoteletter
til.
Steg koteletter i lidt olie på en varm pande
krydr med salt og peber.
Grofthakket tomater og finthakket peberfrugt kommes i en gryde sammen med eddike, sukker og salt. Kog chutneyen sammen til
den tykner, ca. 10 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.
Tilberedning - tid ca. 40 min
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
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
STEGTE MAJS-KARTOFFELKAGER MED
SVINEKOTELETTER
Billeder på vej
KYLLING MED KARTOFFELJORDSKOKMOS
Billeder på vej
Skær kødet i skiver og server til pastaen.
Drys med hakket nødder og parmesan.
Bland den varme spaghetti med bønner og
pesto, smag til med salt og peber.
Kog bønnerne i ca. 2 min i letsaltet vand.
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 spaghetti i letsaltet vand til den er al dente.
Tilberedning - tid ca. 20 min
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
SPAGETTI MED GRØNNE BØNNER OG
STEAK
Billeder på vej
OPSKRIFTER uge 46
God fornøjelse - Hilsen Familiemåltider.dk
Steg grøntsager og fars i ovnen ca. 40 min ved
200 grader.
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.
Rør oksekød med salt, peber, æg, mælk, mel,
parmesanost og rosmarin, sammen til en fars.
Tilberedning - tid ca. 20 min + 40 min ovntid
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
OVNBAGTE KØDBOLLER PÅ TOMATBUND
Billeder på vej
Large - kasse
idéudvikling / tidligere madplan
Idéudvikling / brainstorm
Familiemåltider.dk
Madplan
··
··
··
··
··
··
··
··
··
··
··
··
··
··
··
··
··
··
··
··
··
··
··
··
··
··
··
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
Mad
··
··
··
··
··
··
··
··
··
··
··
··
··
··
··
Lækkert
Kvalitet
Råvarer
Fisk
Kød
Grønt
Frisk
Varmt
Mættende
Socialt
Sundt
Vitaminer
Duft
Varierende
Smag
Nemt
Overskueligt
Hurtigt
Planlagt
Overskud
Penge besparende
Varierende
Lækkert
Nyt
Smag
Sundt
Idéudvikling / Inspiration
Idéudvikling / Inspiration
idéudvikling / skitser
Udvikling / Forslag der skal sendes til kunden / Forslag nr 1
Udvikling / Forslag der skal sendes til kunden / Forslag nr 2
Udvikling / Forslag der skal sendes til kunden / Forslag nr 3
Udvikling / Madplan
Kunden kunne godt lide forslag nr. 2, men ville gerne
kompinere det med forsiden fra forslag nr. 3 og indholds
fortegnelsen i forslag nr. 1.
typografi &
ombrydning
typografi og ombrydning
Opgaven
Billeder
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.
·· Følger som udgangspunkt brødtekstens x-højde.
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
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
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.
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.
Den sibiriske tiger / highlights / Indholdsfortegnelse
Mine arbejdsplatter til denne opgave
Autogenereret indholdsfortegnelse
Tallene holder bagkant
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
Grid tilpasset så det flugter bundmargin
Flugter brødtekstens x-højde
Opmærksom på pænt
tekstforløb ved figursats
den sibiriske tiger / highlights / side 12-13 & side 14-15
3 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
grafik &
billede
GRAFIK OG BILLEDE GRAFIK
Opgaven
Arbejdsprocess
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
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
Rotate Tool:
·· Vender og drejer objekter
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.
Selection Tool:
·· Strække og mindske objekter
Kvalitetsvurdering
Type Tool:
·· Tekstværktøj
Type on a Path Tool:
·· Tekstværktøj
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.
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:
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:
rds.
W
c e
abaore
ut
y
woorur
ds
ILLUSTRATION BRUGT PÅ PLAKAT
rw
o
word
s
year
your word
ring about
ds. 10 years
ca
rin
rin
g
ab
ou
t
ca
ca
ye
ars
r
w
or
ds
.1
rs
ty
ou
ca
0y
ea
ga
bo
u
rs
g about
your
carin
g ab
out
your
word
s
b
ng a
cari
0y
ea
rds. 10 y
ears cari
n
10
s.
ears
10 y
or
ur w
yo
out
ab
ou
g about
your wo
years ca
rin
s.
1
rin
g
ty
ou
10
yo
ur
o
wo
g ab
arin
rd
c
s
r
s.
a
1 0 ye
d
wor
our
ut y
s. 10
grafisk
workflow
GRAFISK WORKFLOW
Opgaven
Procesbeskrivelse
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
··
··
··
··
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å www.timmm.dk
Browserkompatibilitet
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.
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.
PROCES / INSPIRATIONSSØGNING
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
PROCES / LAYOUT / INDEX.HTML
PROCES / LAYOUT / TIMMM.HTML
PROCES / FLOWCHART
index.html
cv.html
cvgb.html
ref.html
timmm.html
kontakt.html
timmmgb.html
tak.html
fejl.html
PROCES / SKELET / INDEX.HTML OG TIMMM.HTML
Index
950 px
30 px
150 x 65 px
30 px
# menu
950 x 115 px
20 px
100 px
150 px
150 px
20 px
150 x 84 px
20 px
400 x 143 px
150 x 84 px
105 px
650 px
105 px
116 px
107 px
116 px
# forside
950 x 350 px
45 px
40 px
150 x 100 px
45 px
20 px
150 x 100 px
40 px
20 px
150 x 100 px
145 px
40 px
20 px
40 px
45 px
150 x 100 px
145 px
45 px
Timmm
950 px
30 px
30 px
950 x 115 px
75 px
150 x 65 px
100 px
640 x 26 px
250 px
CV // REFERENCER // TIMMM // KONTAKT
20 px
30 px
14 px
30 px
495 x 475 px
130 px
30 px
360 x 241 px
32 px
650 px
33 px
164 px
30 px
PROCES / STORYBOARD / GENERELT
Typografi
P:
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
line-height: 16px;
color: #EDEDED;
H1:
font-family: Verdana, Geneva, sans-serif;
font-size: 24px;
font-weight: lighter;
font-style: normal;
color: #2DA1AF;
text-align: left;
H2:
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #2DA1AF;
text-align: left;
H3
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;
font-style: normal;
color: #2da1af;
text-align: left;
Li:
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-style: normal;
float: left;
list-style-type: none;
Li a:
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-style: normal;
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;
font-style: normal;
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;
font-style: normal;
color: #2da1af;
text-decoration: none;
margin-top: 5px;
margin-bottom: 5px;
PROCES / STORYBOARD / GENERELT
1
CV // REFERENCER
2 // TIMMM // KONTAKT
Scrollbar
Body
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;
Background-color: #000
::-webkit-scrollbar {
width: 10px;
height: 10px;
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button: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;
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
PROCES / STORYBOARD
index.html
Elementer
5
3
4
3)filmrullev.png
4)filmrulleh.png
5)velkommen.png
6)cv.png
7)ref.png
8)timmm.png
9)kontakt.png
Actions
6
8
7
9
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
Elementer
CV // REFERENCER // TIMMM // KONTAKT
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
3)
CV_Anne Sofie T. Meltvedt.doc
Actions
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.
PROCES / STORYBOARD
cvgb.html
Elementer
CV // REFERENCER // TIMMM // KONTAKT
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
Elementer
CV // REFERENCER // TIMMM // KONTAKT
REFERENCER
Lorem consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut.
4
Lorem consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut.
8
Lorem consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut.
5
Lorem consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut.
9
Lorem consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut.
6
Lorem consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut.
10
7
Lorem consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut.
3
Lorem consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut.
11
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
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) [email protected] -> linker til mail
9)[email protected]
-> linker til mail
10)[email protected]
-> linker til mail
11) [email protected] -> linker til mail
PROCES / STORYBOARD
timmm.html
Elementer
3)CV_Anne Sofie T. Meltvedt.doc
CV // REFERENCER // TIMMM // KONTAKT
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
Actions
4)tvslideshow.swf
3
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
Elementer
CV // REFERENCER // TIMMM // KONTAKT
3)Curriculum vitae _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
Actions
3
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)tvslideshow.swf
4
PROCES / STORYBOARD
kontakt.html
Elementer
CV // REFERENCER // TIMMM // KONTAKT
3)kontakt.doc
4)mailformular
KONTAKT MIG
Lorem consectetur adipisicing
elit, sed do eiusmod tempor
incididunt ut labore et dolore
Navn
3
magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation
Actions
Telefon
4
Email
Besked
Send
5
3) [email protected] linker til mail
5)send knap -> sender formularinfo til [email protected]. Derefter
videresendes man til tak.html
Hvis feltet email ikke er udfyldt
videresendes man til fejl.html
6)nulstil knap -> nulstiller formular
felterne
Nulstil
6
tak.html og fejl.html
Elementer
CV // REFERENCER // TIMMM // KONTAKT
3)tak og fejl.doc
TAK
Mange tak for din e-mail.
Actions
Jeg vender tilbage med et svar hurtigst muligt
<< tilbage
3)
3
tilbage linker til kontakt.html
Elementer
CV // REFERENCER // TIMMM // KONTAKT
3)tak og fejl.doc
FEJL
Du mangler at udfylde feltet med din e-mail adresse!
<< tilbage
3
Actions
3)
tilbage linker til kontakt.html
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.
PROCES / OPSÆTNING I DREAMWEAVER / KONTAKT.HTML
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;
float: left;
height: 85px;
width: 900px;
padding-top: 30px;
padding-right: 20px;
padding-left: 30px;
}
#wrapper #menu #logo {
padding: 0px;
float: left;
height: 65px;
width: 150px;
margin-right: 100px;
}
#forside {
float: left;
height: 350px;
width: 950px;
}
#wrapper #cv {
height: 100px;
width: 150px;
margin-top: 40px;
margin-left: 145px;
float: left;
}
#wrapper #referencer {
height: 100px;
width: 150px;
margin-top: 40px;
margin-left: 20px;
float: left;
}
#wrapper #rtimmm {
height: 100px;
width: 150px;
margin-top: 40px;
margin-left: 20px;
float: left;
}
#wrapper #kontakt {
height: 100px;
width: 150px;
margin-top: 40px;
margin-left: 20px;
float: left;
}
#punkter p {
font-family: Verdana, Geneva,
sans-serif;
font-size: 16px;
font-style: normal;
color: #2da1af;
text-align: left;
margin: 0px;
padding: 0px;
}
#punkter {
float: left;
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;
font-style: normal;
float: left;
list-style-type: none;
}
#punkter li a {
font-family: Verdana, Geneva,
sans-serif;
font-size: 16px;
font-style: normal;
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;
}
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;
font-style: normal;
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;
font-style: normal;
color: #2da1af;
text-decoration: none;
margin-top: 5px;
margin-bottom: 5px;
}
#txt {
float: left;
height: 475px;
width: 890px;
padding: 30px;
}
#wrapper #txt #cv {
float: left;
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;
float: left;
height: 475px;
width: 300px;
}
#wrapper #txt #field {
float: left;
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;
font-style: normal;
line-height: 16px;
color: #EDEDED;
margin: 0px;
padding: 0px;
}
#wrapper #txt li {
font-family: Verdana, Geneva,
sans-serif;
font-size: 12px;
font-style: normal;
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;
}
PROCES / CSS / STYLES.CSS
#wrapper #txt a {
font-family: Verdana, Geneva,
sans-serif;
font-size: 12px;
font-style: normal;
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;
font-style: normal;
line-height: 15px;
font-weight: normal;
color: #999;
text-decoration: none;
margin: 0px;
padding: 0px;
}
.knap:hover {
color: #000;
background-color: #2DA1AF;
}
#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;
font-style: normal;
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;
}
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 {
font-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;
font-style: normal;
}
#wrapper #txt h2 {
font-family: Verdana, Geneva,
sans-serif;
font-size: 14px;
font-style: normal;
}
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;
float: left;
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;
float: left;
width: 495px;
}
.velkommen {
margin-top: 100px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
float: left;
}
PROCES / CSS / STYLES.CSS
.filmrulle {
margin-top: 150px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
float: left;
}
#wrapper #txt #ref5 {
float: left;
height: 90px;
width: 350px;
margin-top: 20px;
margin-right: 30px;
}
.filmrulle1 {
margin-top: 150px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 105px;
float: left;
}
#wrapper #txt #ref7 {
float: left;
height: 90px;
width: 350px;
margin-top: 20px;
margin-right: 30px;
}
#wrapper #txt #ref1 {
float: left;
height: 90px;
width: 350px;
margin-right: 30px;
}
#wrapper #txt #ref6 {
float: left;
height: 90px;
width: 380px;
margin-left: 130px;
margin-top: 20px;
}
#wrapper #txt #ref2 {
float: left;
height: 90px;
width: 380px;
margin-left: 130px;
}
#wrapper #txt #ref3 {
float: left;
height: 90px;
width: 350px;
margin-top: 20px;
margin-right: 30px;
}
#wrapper #txt #ref4 {
float: left;
height: 90px;
width: 380px;
margin-left: 130px;
margin-top: 20px;
}
#wrapper #txt #ref8 {
float: left;
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;
font-style: normal;
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;
font-style: normal;
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;
font-style: normal;
line-height: 16px;
color: #999;
margin: 0px;
padding: 0px;
font-weight: normal;
list-style-type: disc;
}
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.