Portfolie Grundforløb
Indhold
3 Grafisk design og Process// 21 Grafik og billede // 31 TYPOGRAFI OG OMBRYDNING// 45 Grafisk workflow//
Grafisk design og Process//
Grafisk design og Process
}
Opgaven lød: Design eller redesign et produkt. Der kan frit vælges mellem områderne, tekstil, mode, arkitektur, møbler, bygninger, brugsgenstande til køkken og hjem samt grafisk design. Opgaven er individuel. Krav; dokumentation af design proces, skriftlig redegørelse, visning af produkt og evt. Mockup, samt evaluering
Idé
4
Redesign af en hjemmeside/webshop for Inn Sale International Aps. Den eksisterende side www.innsale.dk, er pt. uoverskuelig, rodet og udstråler slet ikke den eksklusivitet og indbydende linje firmaet ellers står for. Den giver desuden et indtryk af at den ikke blevet behandlet i mange år. Kodningen vil ske efter eksamen, så jeg har således udelukkende stået for design-delen af dette projekt. Min ide var at designe en enkel og indbydende side, i tråd med firmaets værdier og produkter. Grundideen tog udgangspunkt i et menukort/drinkskort - nemt, overskueligt og appetitvækkende.
samt beslægtede virksomheder såsom catering-branchen. Målgruppen er bred fra provins-cafe ejere, til store hovedstads diskoteker. Men fælles for disse er at de har med finger på pulsen og ønsker eksklusivitet og modebevidsthed i de varer de køber. Skal målgruppen kategoriseres er det generelt, designinteresserede byboere med en husstandsindkomst i den højere ende. Så der var ingen tvivl om, at designet skulle fremstå mere eksklusivt end dét ISI allerede havde. Kundens ønsker var „Bevar logoet, ryd op i butikken og lav et slogan”Ellers havde jeg frie hænder. Mine tankeoverskrifter fra start var, appetitvækkende eksklusivitet, overblik/brugervenlighed og en rød tråd.
Kunden og Målgruppen og sloganet
Proces
Inn Sale International, er en dansk import /eksport virksomhed, og sælger produkter til professionelle indenfor restaurationsbranchen. Produkterne strækker sig fra barudstyr, maskiner og udklædning, til dekoration og sirup, og mix til drinks. Hovedsagligt fokuseres der på varer fra Monin. Monin er verdenskendt for sine alkoholfri mixer sirupper til drikkevarer, der fås i et hav af forskellige varianter. ISI’s koncept er altså at sælge produkter til at drive en smagfuld forretning inden for deres kundegruppe. Ved målgruppen og dennes behov, er der tale om indkøbere for diskoteker, barer, cafeer, restauranter, hoteller
I processen har jeg brugt brainstorm, skitser, kamera og fotos.Min idé om et menukort, indebar fotos af drinks som „splasher”. Jeg udførte derfor en del forsøg med kamera. Resultatet efter redigering i Photoshop, er blevet som ønsket. Undervejs har jeg været i tæt kontakt med John Lund Andersen, direktør for ISI og Allan Sørensen, tekniker og webansvarlig for ISI, omkring design og det tekniske. Jeg var nødsaget til at undersøge mulighederne til bunds, for brugen af mit design ved Scannet, udbyderen for WebShopen ISI har i dag og fortsat ønsker at bruge. Jeg har derfor sat mig grundigt ind i opbygningen har undervejs brugt demoer fra Scannet.
Processen
Design & fotografering
udlevering af opgave Recearche og inspiration
QA & godkendelse redegørelse og dokumentation
Start
Intruduktionsmøder med kunden
Slut skitsering
møder med kunden ændringer
overlevering
Resultat og kvalitetsvurdering Processen har igen lært mig en hel del, om hvordan jeg kalkulerer min tid og organiserer mit arbejde. Selv er jeg tilfreds med resultatet.
Under forløbet har jeg fået godkendt og rettet designet, i samråd med John. ISI har godkendt det endelige resultat og ønsker et samarbejde til kodning af designet.
5
Grafisk design og Process Skærmdumps af ISI’ s WebShop Inden redesign
}
Kunden ønsker samme width-mål og fortsat scroll, men overtales til mindre af det.
6
Inspiration
Inspiration
7
Grafisk design og Process// Brainstorm 1 drinks kort
eksklusivitet
Menu kort splash dråber Coctailglas Appetitvækkende
pink
limegrøn
friskhed
Orden
Overblik
Hjerne storm
Lime jordbær Likör farver
fest glæde
Med på beatet cafeliv mode
Smag 8
Enkelthed
I idéprocessen var min første idé drinkskort med flotte billeder med flow i.
Grafisk design og Process// research- og definitionsfasen Resarge af webshops fra scanNet
Monins hjemmeside inspiration
9
Grafisk design og Process menu redigering og m책lgruppetanker Brainstorm menu redigering og m책lgruppetanker
Font og farvevelg
Helvetica Neue (TT) UltraLight 24 pt Helvetica Neue (TT) UltraLight 12 pt Helvetica Neue (TT) Light 9 pt
Helvetica Neue (TT) Light 12
10
IDEUDVIKLING Brainstorm 2 & Første skitser og farvevalg
11
Grafisk design og Process// skitser Endelige skitser
}
P책 alle sider er der i bunden et billed i stil og stemning med den aktuelle sides indhold.
12
Grafisk design og Process//slogan og headder
Vi sætter smag på din verden
}
Headderen havde jeg fra start en ide om skulle lyse af pink og grøn i drinks, en frozen og en splash coctail var grund ideen. Her er resultatet ISI sælger smagsoplevelser til flere sanser, syns sansen, føle sansen og frem for alt smagssansen. Dette udviklede sig i mine tanker under processen mens jeg fotograferede, pludselig poppede det op i mit hoved - „ISI - Vi sætter smag på din verden„ Sloganet kom altså lidt af sig selv.
Inn Sale International Vi sætter smag på din verden
13
Grafisk design og Process// fotos Udsnit af Billeder fra fotoforsøg
Alle billeder blev optaget i raw 14
Billeder fra fotoprosessen
Test af fotos i photoshop for at se om iso og lukketid var regulere korrekt
Alt for meget støj men tættere på målet 15
Grafisk design og Process//fotos
}
Det var svært at finde den rigtige måde at splashe vand på. Jeg lavede flere forsøg med at dumpe frugter. Dette gav også en god effekt, men jeg ville gerne have coctailen havde et specielt flow i væsken, som om den lige var landet hårdt på bordet og skvulpede hårdt mod højre med fastfrosne dråber. Dette kunne kun løses med luft. Her er vist forsøg med mini kompressor og airbrush piston som viste sig at give det rigtige splash.
16
Forsøg med airbrush pistol og kompressor
17
Grafisk design og Process// Redigering af udvalgte fotos
}
18
Brug af levels curves og hue saturation var en stor del af processen da jeg ønskede meget klare farver. Mange billeder er helt farvet om, for at fü det lidt syntetiske neonagtige udtryk jeg ønskede.
Udsnit af fritlĂŚgning.
}
Jeg har fritlagt, optimeret og lavet effekter pĂĽ samtlige billeder til den fĂŚrdige opgave i photoshop. Dette er derfor kun et meget lille udsnit
19
Ekstra info
Grafik og billede //
Grafik og billede // Vector grafik
}
Opgaven lød:Vælg en stilperiode. Design et smudsomslag til en bog af Rudolf Kristian Albert Broby-Johansen. Tid til løsning af opgaven, 8 timer. Opgaven var individuel så jeg har produceret alt selv.
Krav: Gyldendals logo på forside og ryg, hvor forfatterens navn samt bogens titel ligeledes skal placeres. Titlen skal indeholde teksten Krop og Klær. Udleveret tekst samt billede af forfatteren, skal placeres på flappen. Yderlig krav, en forside illustration. Resten er frit, herunder format.
Design og grafik Jeg valgte at fokusere på udviklingen fra 50’erne til 70’erne, en tid hvor ikoner som Twiggy, Chanel, Hepburne og Marimekko blomsten, var tilbagevendende emner i min brainstorm. Jeg valgte ud fra tankerne om Marimekko, at illustrere Twiggy og Hepburne i vectore, ved hjælp af Illustrator. Jeg ville gerne have at den „flade illustreering blomsten har skulle gå igen men ikonerne skulle give farve kontrast hertil.Jeg søgte fotos på nettet af Twiggy og Hepburne. Herefter kopierede jeg billedet til illustrator og voctoriserede ved hjælp af pen tool og koblede de enkelte paths i grupper.
Font og farve
22
Valget af fonte tog jeg ud fra Chanel logoet, som oghså havde indvirkning på mit valg af overskrift.Bagside teksten skrev jeg selv ud fra mit kendskab til perioderne og forfatteren.Farve valget er også taget ud fra Marimekko
blomsten og jeg har valgt at præsentere bogen i to forskellige farver, sort og pink.
Kvalitetsvurdering Jeg synes udfaldet er blevet rigtig godt. Omslaget har en god stop effekt og stemningen fra stil perioden rammer også med den nutidige retro-minimalisme jeg ønskede at frembringe.
Før og efter Photoshop
Orginal foto før
Efter Phoposhop 23
Grafik og billede //billede redigering
}
I phothoshop lavede jeg 1 lag kopi, justerede levels og curves, lavede yderligere 2 kopier. Konverterede et billede til black and white. Rettede hue& saturation i billedet med farve, sü kjolen fremstod unaturligt rød.
24
}
Herefter brugte jeg quick selection tool markedede kjolen og lidt af øreringene i black and white laget. Invertedede markeringen og lavede en maske. Til sidst samlede jeg lagene og tilføjede lidt ekstra kunstast
25
Grafik og billede // Vector grafik
}
26
Jeg flyttede herefter billedet til Illusrtator, hvor jeg oprettede et nyt lag. Ved hjælp af penn tool kortede jeg farvetonerne ned til enkelte rene flader.En lang men precis process, og meget mere estetisk end live trace”. Desuden er web fotoet alt for lavt opløst til at illustrator vil kunne dele lagene pænt. Herover ses udsnit af udviklingen i opbygningen af vectoren.
27
Grafik og billede // Vector grafik Det færdige resultat i pink
SMUSDOMSLAG KORTTIDS OPGAVE I DESIGN OM STILARTERNES MODE Krop og klær No 5
KROP OG KLÆR NO 5 ver mange genopstår..
Tag med på en rejse i modebilledet og følg den kultur-kritiske forfatters fængende fortællende modetolkninger.
Modens historie fra figenbladet til korsettet, fra parykken til skaldeisssen, fra ringbrynjen til lårkort, set med Broby-Johansens altseende øjne og beskrevet med hans tæft for markante formuleringer.
50’erne 60’erne 70’erne
“Klær er kunst, bundet til tid og sted, som alt andet mennesker former og farver”
“Fashion fades, only style remains the same” COCO CHANEL
t
28
AF :RUDOLF KRISTIAN ALBERT BROBY-JOHANSEN
AF :RUDOLF KRISTIAN ALBERT BROBY-JOHANSEN
En rejse gennem 3 årtier som Broby-Johansen absolut har en mening om. Hans egne favoritter, som Hepburne, Twiggy, Monroe og Bond Pigerne, bliver gået efter i sømmene, vendt på hovedet og vurderet, overfor det han fandt absolut, forvrænget, forkert og forkasteligt.
Fra Hepburne og Twiggy, til Hepburne igen
Krop og klær No 5
Er 5. bind af Broby Johansens serie om modens stilhistorie. I denne udgave bliver vi taget i hånden gennem 50’erne og op til 70’erne, og ser hvordan mode udspringer, blomster og dør – nogle forbli-
“Fashion is not something that exists in dresses only. Fashion is in the sky, in the street, fashion has to do with ideas, the way we live, what is happening.” COCO CHANEL
Rudolf Kristian Albert BrobyJohansen (25. november 1900 i Ålborg - 9. august 1987) var kunst pædagog, kommunist, engageret debattør og oprører. Broby-Johansen var flittig en skribent, der bevægede sig inden for et bredt fagligt spektrum med vedkommende fængende og kritisk kulturjournalistik. Han kæmpede for at få sine artikler publiceret, mens det senere gik langt lettere med bøger. Hans lange række af kunstforklarende bøger havde det til fælles, at han ønskede at formidle det grundlæggende kunst-forklarende budskab, at alle kan se på billeder. Blandt de hædersbevisninger, som Broby-Johansen blev tildelt, var Holberg-medaljen (1970), Dansk Forfatterforenings Faglitterære Pris (1975), LO’s Kulturpris (1980), PH-prisen (1984) samt en udnævnelse til æresdoktor ved Odense Universitet i 1985.
Det færdige resultat i sort
SMUSDOMSLAG KORTTIDS OPGAVE I DESIGN OM STILARTERNES MODE KROP OG KLÆR NO 5
KROP OG KLÆR NO 5 Fra Hepburne og Twiggy, til Hepburne igen
Er 5. bind af Broby Johansens serie om modens stilhistorie. I denne udgave bliver vi taget i hånden gennem 50’erne og op til 70’erne, og ser hvordan mode udspringer, blomster og dør – nogle forbliver mange genopstår..
Modens historie fra figenbladet til korsettet, fra parykken til skaldeisssen, fra ringbrynjen til lårkort, set med Broby-Johansens altseende øjne og beskrevet med hans tæft for markante formuleringer.
50’erne 60’erne 70’erne
RUDOLF KRISTIAN ALBERT BROBY-JOHANSEN
Tag med på en rejse i modebilledet og følg den kultur-kritiske forfatters fængende fortællende modetolkninger.
Krop og klær No 5
En rejse gennem 3 årtier som Broby-Johansen absolut har en mening om. Hans egne favoritter, som Hepburne, Twiggy, Monroe og Bond Pigerne, bliver gået efter i sømmene, vendt på hovedet og vurderet, overfor det han fandt absolut, forvrænget, forkert og forkasteligt.
Af Rudolf Kristian Albert Broby-Johansen
“Klær er kunst, bundet til tid og sted, som alt andet mennesker former og farver”
“Fashion fades, only style remains the same” COCO CHANEL
“Fashion is not something that exists in dresses only. Fashion is in the sky, in the street, fashion has to do with ideas, the way we live, what is happening.” COCO CHANEL
Rudolf Kristian Albert BrobyJohansen (25. november 1900 i Ålborg - 9. august 1987) var kunst pædagog, kommunist, engageret debattør og oprører. BrobyJohansen var flittig en skribent, der bevægede sig inden for et bredt fagligt spektrum med vedkommende fængende og kritisk kulturjournalistik. Han kæmpede for at få sine artikler publiceret, mens det senere gik langt lettere med bøger. Hans lange række af kunstforklarende bøger havde det til fælles, at han ønskede at formidle det grundlæggende kunst-forklarende budskab, at alle kan se på billeder. Blandt de hædersbevisninger, som Broby-Johansen blev tildelt, var Holberg-medaljen (1970), Dansk Forfatterforenings Faglitterære Pris (1975), LO’s Kulturpris (1980), PH-prisen 81984) samt en udnævnelse til æresdoktor ved Odense Universitet i 1985.
29
Ekstra info
TYPOGRAFI OG OMBRYDNING//
p K
TYPOGRAFI OG OMBRYDNING
}
Opgaven lød fremstil, med en rød tråd mellem, en bog og en hjemmeside om to stilperioder. Skriv en tekst på mindst 12000 anslag, fordelt mellem 2 til 4 stilperioder. Redegør for valg af bogformat og marginforhold. Læg vægt på, design, layout, typografi og ombrydning. Opgaven er individuel.
Krav: smudstitelside, titelside, kolofon forord, indholdsfortegnelse og mindst 8 indholdssider. Trykark med formatet 74x52 eller 72x102 cm prima/sekunda. Hvis ekstra tid, design smudsomslag. Mit valg faldt af stilarter var Popart og nutid. Jeg ønskede at henvende mig til læseren, som gerne vil have mening og viden med eftertanke om de valgte perioder og tog udgangspunkt i, at skrive en samfundskritisk og atypisk gennemgang af stilperioderne. For at give bogen et kvadratisk og fangende udtryk, valgte jeg et bogformat i 200x200 mm. Jeg udførte forskellige analyser af klummestørrelse, ud fra Van de Graf og Jan Tschhold. Den bedste indstilling var dog InDessigns forslag. Alle forsøg med trykark gav spildplads, men jeg vurderede at bogformatet var vigtigere for bogens udtryk.I produktionsmetoderer der bl.a brugt. Paragraphstyles, mastersider og regulering af grundlinienet.i InDesign.
Begrundelse for typografi
32
Valget af font til gennemgående rubrik og til stopeffekt på forside, var vigtig.- Den skulle give, sige noget om stilarterne og udstråle eksklusivitet og enkelthed. Fonten Matra gav den ønskede virkning. I kontrast hertil valgte jeg som brødtekst, Legacy Serif, en antikva, fra skriftgruppe 1, fonten er frisk, let læselig og moderne med de
skrå streger i minuskel E-rne. Den store størrelseskontrast mellem brødtekstens 10 pt og rubrikkens 56 pt er bevidst og skaber en god sammenhæng mellem fonte og det grafisk design. Den minimale afstand mellem rubrik og brød på 0,5 mm blev gav bedst læsbarhed og harmoni. Kontrasterne understøtter det utraditionelle, kvadratiske og frimodige look, jeg ønskede i designet.Billedteksterne er i Helvetica Neue (TT), 37 Thin Condensed 9 pt. som er let og luftig. Jeg arbejdede med at designe en ligatur af titlen, resultatet blev dog luft mellem P KogN, som giver fornemmelse af ligatur, men er nok mere en display typografi. Der er to tekstspalter på hver side, som gennemsnitligt indeholder 50,5 anslag pr. linje og holder sig herved under den almindelige grænse for god læsbarhed, 60-65 anslag. Billede og tekst er tilpasset så de holder register.Brødteksten er venstrejusteret for at undgå floder, og indrykkene er med til at give holdepunkter til orientering i teksten. Placeringen af spalternes margin giver en harmonisk placering af tekstfelter og billeder, der holder sig centreret og fremhæver tekst og billeder på opslagssiderne som noget, der hænger sammen. Paginering og bund-billedtekster er henholdsvis venstre- og højrejusteret og flugter op til ydermarginerne. Rubrikker flugter med brødtekst og topmargin.
Mere en display typografi end ligatur. Men resultatet er godt.
Virkemidler Kontrast i billeder, fonte og farver skal lede læseren nemt og underholdt igennem bogen. I bevidsthed om det gyldne snit og læseretning, er samtlige rubriktoner valgt ud fra toner i billedet på samme opslag. Billederne forholder sig til tekstindholdet. De dynamiske udtryk og farver i billederne giver samspil og kontrast, til den statiske tekst og det kvadratiske design. Variationen af baggrunds farve og negativ skrift, skaber liv. Rubrik-typografien er sammen med billeder og farve, med til at understrege opslagenes sammenhæng og emne, så det grafiske design fanger læserens opmærksomhed.
Kvalitetsvurdering Jeg er rigtig godt tilfreds med mit arbejde og har fået et dragende forhold til typografi og ombrydning. Tekniks har de fleste standard regler har sat sig på rygraden.
33
TYPOGRAFI OG OMBRYDNING// paragraph styles SkĂŚrmdump af mastersider
}
RATIONELLE PRODUKTIONSMETODER Der er oprettet flere mastersider, med blandt andet paginering, marginfor-hold, tekstbokse, baggrunds farver og regulering af grundlinjenettet, mm.
SkĂŚrmdump af indstillinger & sidetal - master D som eksembel
34
SkĂŚrmdumps: Udsnit og oversigt over paragraph styles
35
TYPOGRAFI OG OMBRYDNING
36
12,7mm inside margin
Baseline grid start 26,46 mm
12,7 mm topmarign 12,7mm outside margin
13 mm bottom margin
Collums 2 stk
Pagineringen er venstrejusteret i sin tekstboks og flugter op til ydermarginen.
37
TYPOGRAFI OG OMBRYDNING Grundlinjenettet tilsvarer brødtekstens skydning og er tilpasset således, at rubrikkens x-højde flugter med topmarginen.
Eksempel på citat flugter med indhold i billeder - munden på som udtalte citatet
38
Alle billeder flugter med
marginforhold eller/og collums
Alle billedtekster i bunden af siderne, følger pagineringen
39
TYPOGRAFI OG OMBRYDNING// Register og læseretning Valg af farver i rubrik er på hver side udvalgt udfra toner i billederne og læseretning
Rubrik billeder og læseretning er nøje tilpasset på samlige ideer udfra indhold og læseretning
40
Billeder og rubrik holder register og margin
Alt efter billedernes toner skifter baggrundsfraven melllem sort og hvid for blikfang og lĂŚsbarhed
41
TYPOGRAFI OG OMBRYDNING// Register og læseretning Eksembel på farvealg til rubrik udfra billeder
42
En samfundskritisk bog om Pop-art og nutiden Af Marie Prokopek
e
Pop Kunst Nutid
n
}
Trods det at formatet er 100% kvadratisk vil det ofte som her syne vertikalt aflangt. Denne effekt arbejdede jeg bevidst arbejdede med.
POP KUNST NUTID
Marie Prokopek f.982, Medieg blandt andet Li opr책bende klum
Marie har siden forskellige mag Hendes artikler og fyldt med he
En samfundskritisk bog om Pop-art og nutiden Af Marie Prokopek
43
Ekstra info
}
Under projektet søgte jeg info om copyright på billederne, jeg kom tilfældigvis i kontakt med, Kristian Von Hornsleth selv, som ønsker at fremvise bogen på sin hjemmeside.
Grafisk workflow//
Grafisk workflow
}
Opgaven lød lav en hjemmeside og en bog om stilarter. Websitet skal bestå af en index-side samt 3 underliggende sider og to fiktive sider. Siden og bogen skal have en rød tåd. Der skal laves frimærkeskitser, storyboard, skelet og sitemap. Det er individuelt, så jeg ståd for hele produktionen bag dette projekt.
Layout Layoutet er enkelt og holdt i sort hvid, som er i tråd med forsiden og indholdet i bogen. Desuden er dette valgt ud fra at kontrasterne skaber blikfang og giver brugervenlighed. Jeg har valgt at bruge fonten Matra som jeg også anvender til forside og rubrikker i bogen. Jeg valgte at lade det ordene skifte fra side til side. Skriften er ikke web sikker så og anvendte derfor et baggrundsbillede på hver wrapper og indsatte menulinie for sig herefter. Jeg har derfor ikke valgt at bruge en template.
Komposition Jeg valgte at lave en forside som leder videre til indexsiden. Dette faldt mig logisk da en bog også har en sådan.Websitet er bygget op med følgende, en wrapper, (billedet i wrapperen forskelligt fra side til side da jeg synes det gav det bedste resultat. Der er derfor heller ingen headder da billedet opdeler siden) menulinje, bokse til billeder animation og tekst. Dette går igen på alle sider, men indholdet er forskelligtfra side til side.
Usability 46
Der er taget højde for brugervenligheden på websitet. Bogen og siden er skabt, ud fra en idé om at sætte tan-
ker i gang hos målgruppen så de skal prøve sig lidt frem og gå på opdagelse. Menuen viser tydeligt hvad de foskellige sider linker til.
Typografi Teksten der står skrevet på websitet er valgt ud fra designet af bogen. I menulinien var det vigtigt for mig at ordene stod tæt mod kanterne af linien og var enkelte. Jeg har valgt gennemgående at bruge font family Arial, Helvetica, sans-serif, da jeg synes det gav den bedste brugervenlighed og opfyldte mine ønsker.
Browserkompatilitet Websitet er testet i Firefox, Safari og Internet Explore, hvor de på alle sammen virker fint og ligner hinanden.
Kvalitetsvurdering Jeg ville gerne have websitet bare var en ”appetitvækker” til bogen og jeg synes siden lever på til mine forventninger. Det eneste problem der har været under projektet har været at arbejde med mit template.
Grafisk workflow // Flowchart OG Storyboard
Index.html side.html Popside. html
Kunstnutid.Html Dødt link
Storyboard Betingelser gældende for alle sider Alle billeder og amimationer findes i mappen ‘findes i mappen „images”.’ og al tekst findes i mappen ‘txt’.Sitet skal være centreret i browseren. Font family, Arial, Helvetica, sans-serif, fs10 px, lh 14 px.
Bogen.html
dødt link hotspot bog
P tag font-size: 10px, color: #FFF, margin L 8px Teksten venstrestilles font-size: 18px, color: #CCC Font valg Skriftvalg - brødtekst Arial 12px
Wrapper H 600px,W 900px, margin-right og left, auto, bg colour #FFFFFF, img varierer fra side til side, se skelet.
abcdefghijklmnopqrstuvwxyzæøå
Billedpil img :Hjem/billedpil img tright pil_03.gif” Pilen placeres i toppen i venstre side af headeren i en id-box(float left, h 72px w126px ) linkes til side 1 via hotspot- Pilen er det eneste sted der linker tilbage til side 1
Skriftvalg – menu a Arial 26 px
Menu Menuen består af en id box (float left, W 588 px, H 23 px, margin left 310 px) som indsættes efter Menupunkternes rækkefølge: Pop Kunst, Kunst Nutid, Bogen #Menu a font-size 26 px, font-w lighter, font-v normal, farve #fff, text decoration NONE. Padding: T 2 px, L 10 px. Margin: T 3 px, L 40 px.
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 47
GRAFISK WORKFLOW // STORYBOARD og skelet
2
600px
1
3
Index.html wrapper Background-image: url(bogweb/images/index-logo.png 1 menu float: left H 23px, W 588px Margin: T 198px, L 310px 2 #menu a font-size: 24px; font-weight: lighter color: #FFF, font-variant: normal margin: L88px , T2px float: left
48
3 tekstbox float: left H 50px, W400px padding: T 50px margin: L335px, T100px font-size: 14px font-weight: lighter
4
900px 4 font-size: 10px line-height: 14px color: #333
1
600px
2
3
4 side.html wrapper background-img bogweb/images/side-1.png) 1 billedpil float: left H 72px, W 126px img :tright pil_03.gif” 2 Img:flags.jpg” H 295 px, W100 px Margin: T 20 px, L 400px
5
6
900px 5 tekst1 box float: left. H 350px, W420px Margin T 20px, background-color: #000 6 Billed1pop float: left H 200px, W 200px Margin: T 128px, R 20px, L20px
3 Animation box float right margin: T 4px img: animation-raucg.gif 4 billleds1, img crybaby img H 200px, W 200px float: L. Margin: T 168px, L 10px
49
GRAFISK WORKFLOW // STORYBOARD og skelet 1
600px
2
4 3 5
Popside.html wrapperpop, background-image: url(bogweb/images/pop-side.png) 1 #billedpil float: left H 72px, W126px img :tright pil_03.gif� 2. billedwar float: right margin:T 22px, B 28px img: electri2.gif 3 tekstbox float left H 350px,W 420px,margin: T 20px, L 10px background-color: #000 margin-left:
50
4 billed1popside float: left H 200px, W 200px margin: T 20px, L 20px, img: /pop/war.jpg
900px 5 billed3popside float: left H 200px, W 200px margin: T 168px, L 10px img: pop/rl.jpg
1
600px
2
4
3 5
Kunstnutid.Html wrapperkunst background-image: url(bogweb/images/nutid.png) 1. billedpil float left, H 72px, W126px, img :tright pil_03. gif�
900px 5 Dillerbox H200 px, W200 px margin T 150 img: diller.png
2. Billed top,W 173px, H 188px, float right Img: hornsketh_02.jpg 3 Tekstbox H 350px,W 420px, float left margin-r 10px Tekst folat left, marg R 10 px 4 animations box float left H222px, W222 px margin L 30 px, T 20 px Img: horn-animation.gif
51
GRAFISK WORKFLOW // STORYBOARD og skelet 1
600px
2
3 Bogen.html wrapperbla background-image: url(bogweb/images/side-1.png) 1 billedpil float: left H 72px, W126px img :tright pil_03.gif� 2 img: ego.jpg float: right margin-top: 24px 3 smudsbox float: left height: 217px width: 551px margin: R auto, L200px, T 100px img; smudslink.jpg hotspot link: http://issuu.com/mptp/docs/endelig-bogweb?mode=window&pageNumber=1
52
4
900px
4 #tekstboxsmudslink H 30px, W451px float: left margin L 200px H2
GRAFISK WORKFLOW // IDEUDVIKLING til list, rna gs jou nin ce me lan g ee t, o for e, g fr ´es ejd t. v o inet C et. le arb ette riske tt e s k er aga terne tisk tern fo et. pe fik alis in eta g liv ko gra tilsm å in urn e på de, m ket o Pro edie Livss er p jo n s e t rm ri M t m ve tfo ale nne Ma 82, ande klum 6 la pla r m e f.9 ndt de 00 og er e m m n n 2 er m g o bla råbe ide sin lum enin op r s ga k ha e ma r og es m e le d ri g Ma kelli artik d hen fors ndes t me He fyld og
p Po nst
og
n
p Po
sam
-art
p Po
in
tm
og
ne
nA tide nu
åb
om
r ha
og
kb ritis
dsk fun
ma
sam
er.
råd
om
m
go
bo
ek
kop
Pro
fun
En
En
på
tid
nt
riso
ho
e ng
arie
fM
k Pro
ek
op
n , me ar e tivis r h uk hve nstr En , g , ko d. ,o er. ive on lig, hva od g mig ksik ue var jle eri kan t. k e le e lp p rs m så sti rs ed n. at s g. ove ve af elle er tide t til nin dm ? re se eu gh ng er nu en lys stem t u tiden ge oft or, o tter. ga sbøg an li g te g s d l if o m o gk rt mig til sk g ti ne hv ri r ti . ne g seli de de sy ar vo en psla p-a et ns s lev a ø, be og d v re fa lud po , giv tide l b erd kg ro ho in hv e fr amle rien Hva ar fle u p t? pis delse er, et mig på nu o d d ty f e a n is alk d om ng tur r a ldg isto … h en lde Hv i dyb og nem lidt r fa nd tre i æ t i h me Jeg råb er ka de. d ig r ha le ru op PS en ms et nd e is e. tid em en ne e d de lil og blo lukk r ru ism lend r, G å ig nu -fr nd tur vis der, en ne å n st ab ser ver p lte e lta vil erio d på spæ l en un e g en far ket, væ ism st ti lefo u s p k isk de jeg stilp me nd ilte ille d ere igeve ns s bu larter me, n me b te e m Po typ ren rne, af de e dig o is n ll V ti e rd r m ft. Ve tide g s ada r de te åa De flekte ode r en så tag tisk ter, sa de du s et. nu er o e, d elle tilis re lperi en e g og pu eby og t i ss aks il om nk f n s ism ism ste Sti p-art vil je en str e, v r a blom ede ssion ukke t, c Ry Po rfor ert ern utid ge rne og ikk od rin r en mstr spre sm De gn inte dkort u s tilperi no dsp jeg e afblo e, ek r den d is e n u v s s rt e f , h r, la Alt og af ism es e sat? pa syn t a ere ne po fort Du væld sion syn e, duk ng lefo ar em od Et pres t, de tv g fu ntte nn eri t pro ge im ms ige rda mø stilp er e rbru tur hve ine, blo en u de is fo m r, at d din ask n v o h s le u, Ville rivem ma jes rstå vi n sk tilfø g fo tisk var en n o skri or nd ism rie Hv afu GO histo sm is E i en Hv selv å dig dp me Tag ld
s ti
de
ven
p Pounstid K Nut
spø
r
he
Nu
rg
kte
irre
g
no
ere
læs
-art
sk
riti dsk
e utid
arie
fM
nA
Ku
l til
å sm
n ie
P T O P UNSTID K NU
” de. old en dh ng gtin . g fæ væ ard t o ant inga ” „Flo ress inet V ng te ga In gas ke an Ma t” eT nd reje ere ford spir en og „In litikk et lsk Po fore et ker rarg tan o s ”F en Tid
Popart Bogen Nutiden
Popart Popart Bogen Nutiden
Bogen
Nutiden
}
Kunst Nutid
Pop Kunst Nutid
Pop Kunst
Kunst Nutid
Hornsleth
Kunst Nutid
Pop Kunst Nutid
Pop Kunst
Kunst Nutid
Bogen bag
Forskellige prøver af layout udfra bogens smudsomslag. Pink ring viser endelig mukup. Pop Kunst
Kunst Nutid
Bogen bag
Pop Kunst Nutid
Pop Kunst Nutid Pop Kunst Nutid Pop Kunst
Kunst Nutid
Pop Kunst
Bogen
En samfundskritisk web-site om popart og nutiden af Marie Prokopek
53
Bogen
GRAFISK WORKFLOW // LAYOUT
}
Det endelige layout af de 5 sider opsat i photoshop, slicet og afm책lt.
54
GRAFISK WORKFLOW // Animation
}
Mine animationer er lavet i Photoshop CS5. Samtlige billeder -for hele sitet iøvrigt er optimeret i Phptoskop inden de er slicet Jeg har givet animationen en feather imellem billeder for at give det et stilet udtryk. Jeg valgte at lave animationer trods det at det ikke var et krav, for jeg syntes siden skulle „leve”lidt.
55
GRAFISK WORKFLOW // CSS
56
#wrapper { height: 600px; width: 900px; margin-right: auto; margin-left: auto; background-image: url(bogweb/images/side-1. png); } @charset �UTF-8�; body { font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 14px; color: #333; margin-top: 0px; padding-top: 0px; } #wrapperkunst { height: 600px; width: 900px; margin-right: auto; margin-left: auto; background-image: ); background-image: ; background-image: url(bogweb/images/nutid. png); }#wrapperpop { background-image: url(bogweb/images/pop-side. png); height: 600px; width: 900px; margin-right: auto; margin-left: auto; padding-top: 0px; } #menu { float: left; height: 23px; width: 588px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; margin-left: 310px; } .anima { float: right; margin-right: 700px; padding-right: 0px; padding-left: 20px; padding-top: 20px; } #menu a { font-size: 26px; font-weight: lighter; color: #FFF; text-decoration: none; font-variant: normal; margin-top: 3px; margin-right: 0px; margin-bottom: 0px;
margin-left: 40px; padding-right: 0px; padding-top: 2px; float: left; padding-left: 10px; } .bolledhorn { float: right; margin-top: 8px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .billedwar { float: right; margin-top: 22px; margin-right: 0px; margin-bottom: 28px; margin-left: 0px; } #boxbund { float: left; height: 382px; width: 900px; background-color: #000; } #urboks { float: left; height: 222px; width: 222px; margin-top: 20px; margin-left: 30px; } #tekstnu { height: 350px; width: 420px; float: left; margin-right: 10px; } p{ font-size: 10px; color: #FFF; margin-left: 8px; } .billed1 { float: right; margin-top: 4px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #billedpil { float: left; height: 72px; width: 126px; } #dillerbox { float: left; height: 200px; width: 200px; margin-top: 150px;
} #billleds1 { float: left; height: 200px; width: 200px; margin-top: 168px; margin-left: 10px; } #billed1popside { float: left; height: 200px; width: 200px; margin-top: 20px; margin-left: 20px; } #wrapperbla { background-image: url(bogweb/images/side-1. png); height: 600px; width: 900px; margin-right: auto; margin-left: auto; } h1 { font-size: 18px; color: #CCC; font-weight: lighter; margin-left: 8px; } #Billed1pop { float: left; height: 200px; width: 200px; margin-top: 128px; margin-right: 20px; margin-left: 20px; } #tekst1 { float: left; height: 350px; width: 420px; margin-top: 20px; background-color: #000; } .flag { float: left; margin-top: 20px; margin-left: 400px; margin-bottom: 0px; } #tekstpopside { float: left; height: 350px; width: 420px; margin-top: 20px; background-color: #000; margin-left: 10px; } #billed3popside { float: left; height: 200px;
width: 200px; margin-top: 168px; margin-left: 10px; } .ego { float: right; margin-top: 24px; } #smudsbox { float: left; height: 217px; width: 551px; margin-right: auto; margin-left: 200px; margin-top: 100px; } #tekstboxsmudslink { height: 30px; width: 451px; margin-top: 0px; float: left; margin-left: 200px; } #dodtlink1 { float: right; height: 20px; width: 150px; margin-top: 2px; margin-right: 20px; margin-bottom: 2px; margin-left: 2px; font-size: 24px; color: #FFF; text-decoration: none; background-color: #000; } #dødtlink2 { float: right; height: 20px; width: 150px; margin-top: 2px; margin-right: 40px; margin-bottom: 2px; margin-left: 10px; background-color: #000; font-size: 24px; color: #FFF; text-decoration: none; } #dødtlink2 a { color: #FFF; text-decoration: none; } h2 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #000; }
57
Ekstra info
}
Ekstra info, ved forbedring kunne siden få mere luft før wrapper og herved få mere luft og centrering. Herudover kunne der arbejdes mere med tekst opsætning. Her udover kunne css og gennemgåes for unødvendige oplysninger.
58
59
60
61