GRAFISK WORKFLOW
www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline Færdige produkt
www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline Færdige produkt
www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline Færdige produkt
Opgaven Der var opstillet forskellige krav til n. Hjemmesiden skulle bestå af en forside, samt min. 2 undersider, som skulle præsentere hver sin stilart. Der skulle herudover være min. 3 døde links, for at vise, at siden kan udvides. Der skulle udarbejdes et flowchart, et layout i Photoshop og et skelet. Der skulle arbejdes med metatags og n skulle fungere i mindst 2 browsere. Målgruppebeskrivelse Målgruppen til denne er unge studerende. Formålet med n er, at det skal være let og lidt mere spændende for studerende at finde informationer om stilperioder. Hjemmesiden kan bruges som opslagsværk. Tidsplan Da jeg gik igang med tidsplanen, var jeg sikker på, at jeg ville blive presset mht. tiden. Jeg fandt dog ud af i løbet af projektet, at der ikke var nogen grund til bekymring. Det viste sig, at jeg brugte mindre tid end jeg havde regnet med. Skitsering I idefasen lavede jeg forskellige skitser til layout af n. Dette gjorde jeg for at finde frem til det bedste layout som ville passe til denne opgave. Flowchart Flowchartet viser hvordan man kan bevæge sig rundt på sitet. Sitet består af en index side, som også er forsiden. Der er fire undersider med forskellig tekst og billeder, men opsætningen på undersiderne er ens. Layout Det var vigtigt for mig, at det blev holdt meget enkelt, både mht. farver, opsætning og indhold. Layoutet er først bygget op i Photoshop, for at eksperimentere lidt med farver og opsætning, og viser udseendet og placeringen af de forskellige objekter på sitet. Her vises stilen og stemningen på n. Skelet Skelettet er mere detaljeret end layoutet. Her er sat mål på for at få de forskellige objekters præcise placering. Her går man ikke op i stemning og farver. Det er en tidskrævende proces, da man skal regne frem og tilbage for at få regnestykket til at gå op. Skelettet er bygget op i Illustrator. CSS betingelser Disse betingelser er en guideline til, hvordan formateringen på n skal være. Hvilken font man vil bruge, skriftstørrelse, skriftfarve osv. Det er noget der er meget tidskrævende, da man indimellem skal ind i Dreamweaver og teste for at finde frem til den rigtige formatering. Billeder I mit layout i Photoshop har jeg slicet billederne for at få dem i den rigtige størrelse og kvalitet da de skulle sættes ind i Dreamweaver. Jeg har desuden valgt at lave et slideshow på hver underside, som viser billeder fra hver stilperiode. Slideshowet er lavet i Bridge, og herefter lagt ind i Dreamweaver. Alle billeder er optimeret til web i Photoshop, ved at konvertere dem fra CMYK til RGB. Uploading Da sitet var færdigt, skulle vi uploade det til et fællesdrev. Herefter ville det være muligt at åbne sin på en hvilken som helst computer. Browserkompatibilitet Hjemmesiden er blevet testet i Firefox, Safari, Google Chrome og Internet Explorer, og virker i alle disse browsere. Hjemmesiden er desuden testet på forskellige computere. Kvalitetsvurdering Jeg er meget tilfreds med resultatet. Specielt forsiden synes jeg skaber blikfang og fanger ens interesse. Jeg er ikke 100% tilfreds med slideshowene. Jeg ville gerne have haft et jquery galleri, men kunne ikke få det til at fungere. Det er dog noget jeg håber på at få lært til næste gang jeg skal have lavet et galleri. Men alt i alt synes jeg at jeg har formået at holde det enkelt og overskueligt. Redegørelse
Tidsplan Mandag Tirsdag Onsdag Torsdag Fredag Lørdag/søndag Mandag 1. lektion Tidsplan Bogfremstilling flowchart og storyboard Oprette CSS regler Aflevering 2. lektion Bestemme målgruppe, skitsering af bog og, læse korrektur på tekst, vælge format Bogfremstilling Storyboard 3. lektion Lave udskriftsprøver til bog, opstille paragraph styles Bogfremstilling Storyboard 4. lektion Billedoptimering, bogfremstilling Bogfremstilling Skelet 5. lektion Bogfremstilling Bogfremstilling Skelet 6. lektion Bogfremstilling Testprint og rettelser Skelet Uploading og test i forskellige browsere 7. lektion Bogfremstilling Udskydning og print Skelet Rettelser 8. lektion Bogfremstilling Falsning og samling Billedoptimering til web og slice billeder Aften Tidsplan
Mandag Tirsdag Onsdag Torsdag Fredag Lørdag/søndag Mandag 1. lektion Tidsplan Bogfremstilling Revideret tidsplan Samling af bog, udskrivning af plaonark, InDesign package Udskrive bogomslag, aflevering af projekt 2. lektion Tidsplan, bestemme målgruppe, skitsering af bog og Bogfremstilling Falseprøve, skitsering af, 3. lektion Læse korrektur på tekst, vælge format Bogfremstilling Storyboard/layout Photoshop 4. lektion Vælge format Bogfremstilling Storyboard/layout i Photoshop, teste i forskellige browsere bogomslag i InDesign 5. lektion Vælge format Bogfremstilling Billedoptimering til web og slice billeder Uploade til web, skelet i Illustrator bogomslag i InDesign 6. lektion Bogfremstilling Bogfremstilling Billedoptimering til web og slice billeder Skelet, flowchart i Illustrator bogomslag i InDesign 7. lektion Bogfremstilling Udskydning i Quite Imposing CSS betingelser bogomslag i InDesign 8. lektion Bogfremstilling Bogfremstilling, testprint + rettelser CSS betingelser, revidering af tidsplan Aften Printning af bog Revideret tidsplan
Skitser
138 10 68 60 198 Wrapper 960 x 850 684 21 107 320 138 400 10 21 320 Skelet - index
150 10 68 60 198 Wrapper 960 x 850 98 30 300 660 150 200 20 660 470 Skelet - undersider
Layout i Photoshop
Index Nyklassicisme Modernisme Bauhaus Pop Art Stilperiode Stilperiode Stilperiode Døde links www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline Flowchart
*: Margin 0 Padding 0 Body: Background color: Font family: P: Color: Font size: Line height: Text-align: H1: Color: Font size: Text-align: #2e2d29 Arial, Helvetica, Sans-serif #ffffff 12 px 16 px left #8c8c8c 30 px right H2: Color: #8c8c8c Font size: 16 px Line height: 19 px Font weight: bold Padding: - bottom 3 px a: Color: Font size: Font weight: a:hover: Color: #8c8c8c 14 px bold #ffffff.menu_luft: Padding - left 20 px #Menu_1: Text-align: #Menu_2: Text-align: right left #Tekstbox: Overflow: auto Padding: - left 150 px - right 150 px CSS betingelser
GRAFISK WORKFLOW Browserkompatibilitet