MG-PORTFOLIO 2. HOVEDFORLØB JOSEFINE MADSEN DANSK INDUSTRI

Transkript

1 MG-PORTFOLIO 2. HOVEDFORLØB JOSEFINE MADSEN DANSK INDUSTRI

2 INDHOLD 3 TYPOGRAFI & OMBRYDNING 10 GRAFISK DESIGN 20 GRAFIK OG BILLEDEBEHANDLING 26 GRAFISK WORKFLOW

3 TYPOGRAFI & OMBRYDNING Vandvision Handlingsplan Opsætning af pjecen Vandvision Handlingsplan for vores miljøafdeling. Brochuren skal bruges i forbindelse med en konference. Udfordringen i denne brochure er, at den indeholder en del tabeller der skal sorteres i, da ikke alt indhold fra den originale plan, skal bruges i den trykte. H2 TYPOGRAFI OG OMBRYDNING 5

4 DOKUMENTET mm, antal sider: 16 Margin: Top 21 mm, Bund 19 mm, inderside 21 mm og yderside 21 mm 2 spalter med 12 mm spaltebredde 3 mm bleed til beskæring Antal mastersider: 2 Master B Bruges til tabeller BASELINEGRID Brødtekstens skydning på 10 pt Start: 0 mm, toppen af margin Master A Bruges til pagina og spalter 6 TYPOGRAFI OG OMBRYDNING H2

5 TYPOGRAFI Dansk Industri har fået udviklet deres egne fonte, der bruges i alt materiale. Der er udviklet DI Serif og DI Sans samt DI Stuff som er en ikonfont. Mellemrubrikker: Der fremgår mellemrubrikker på både én, to og tre linjer dertil har jeg udregnet korrekt luftfordeling. Luften fordeles med ca. 2/3 over og 1/3 under. Brødtekst = 13 pt Mellemrubrik = 15 pt En linje: To linjer: (13 pt 2) - (15pt 1)= 11 pt 7 pt over og 4 pt under (13 pt 3) - (15 pt 2)= 11 pt 6 pt over og 3 pt under Tre linjer: (13 pt 4) - (15 pt 3)= 11 pt 5 pt over og 5 pt under AFSNIT DI Serif Bold, 17/19 pt Mellemrubrik DI Heavy, 13/15 pt Overskrifter DI Serif bold, 12/13 pt Første linje bundet til grundlinjen Citat DI Serif Italic, 14/17 pt Brød DI Serif Regular, 10/13 pt Bundet til grundlinjen KORREKT TEGNSÆTNING Thin space, tankestreg og thin space bruges ved til og med. Sænket tal ved kemiske formler H2 TYPOGRAFI OG OMBRYDNING 7

6 NUMMERERING Da der flere steder i brødteksten er nummerering, vil den automatisk forsætte med at tælle op af hvis jeg bruger den samme Paragraph Style igen senere i brødteksten. Derfor laver jeg to styles: 1 Bullet tal er standart en nummerering med Mode sat til Continue from Previous Number. 2 Bullet tal 1. baseret på Bullet tal. I denne style sætter jeg Mode til Start at og skriver 1, i feltet ved siden af. Det betyder at denne style manuelt starter numreringen med tallet 1. Når jeg tilføjer nummereringen til brødteksten, starter jeg den første nummerering med style 1. Næste gang der kommer et afsnit med nummerering i brødteksten, tilføjer jeg style 1 til det første punkt og de efterfølgende får style 2. Style 1 Style 1 tilføjet teksten Style 2 Style 2 tilføjet teksten 8 TYPOGRAFI OG OMBRYDNING H2

7 TABELLER Pjecen indeholder syv tabeller. Én i brødteksten og seks i bilag som omhandler handlingsplanens aktiviteter. Da seks af dem er ens, laver jeg Cell Styles til dem, så alle tabeller er ens og så hvis der kommer ændringer, ændre den automatisk alle tabellerne. I den lille tabel centrere jeg årstallet og højrestiller dataen. Derefter rykker jeg indholdet ved at øge margen i højreside af cellerne. På den måde er dataen centreret, men holder samme bagkant. H2 TYPOGRAFI OG OMBRYDNING 9

8 FIND/CHANGE Mens jeg er ved at layoute teksten, skifter MMV (mindre og mellemstore virksomheder) til SMV (små og mellemstore virksomheder). Jeg ved at MMV forkommer i brødteksten, derfor bruger jeg Find/Change til at finde MMV og erstatte det med SMV. På den måde er jeg sikker på at jeg fanger det alle steder i teksten. Jeg trykker på Find Next, hvor efter den markerer MMV, herefter trykker jeg Change og den skifter MMV til SMV. Det gentager jeg, indtil søgningen er færdig. Jeg kunne også trykke Change All, for at spare tid, men ved at tage dem en af gangen, er jeg sikker på at den ikke ændre forkerte steder. Jeg laver også find/change på: Procent til pct. Dobbeltmellemrum til enkeltmellemrum Bindestreg til tankestreger (på nær i orddelinger) 10 TYPOGRAFI OG OMBRYDNING H2

9 KVALITETSTJEK Da jeg er færdig med at layoute min pjece kontrollere jeg følgende ting: Tekst er linket i korrekt rækkefølge Ingen overset tekst i tekstbokse Streger mellem spalte følger spaltehøjden Alle links virker 3 mm bleed til beskæring på billeder og ting til kant CMYK farverum på billeder 300 dpi på billeder Preflight Enker og horeunger. Trykklar pdf enkelsider. Cropmarks og Bleed. Web pdf enkelsider, Fit Page i view og med Hyperlinks slået til. TRYKKLAR OG WEB PDF Pjecen skal trykkes og ligge online. Derfor laver jeg en pdf til tryk og en til web. H2 TYPOGRAFI OG OMBRYDNING 11

10 GRAFISK DESIGN Plameolielogo Erhvervsinitiativ for Bæredygtig Palmeolie DI Fødevarer etablerede i 2014 Erhvervsinitiativ for Bæredygtig Palmeolie og skulle i den forbindelse bruge et logo/ identitet til at reklamere for brugen af palmolie på hjemmeside og til arrangementer. H2 GRAFISK DESIGN 13

11 PROCESS Møde med konsulenten der briefter os om opgaven. På mødet snakker vi om hvor logoet skal bruges, om der er krav til elementer og deadline. Brainstorming Inspirationssøgning Skitsering af idéer Rentegning Test af typografi Test af logo (farver og placering) Palme Danmark Dråbe Palmeolie Miljø Organisk 14 GRAFISK DESIGN H2

12 LOGOINSPIRATION Efter vores møde med konsultenten og en brainstorm, går jeg i gang med at finde inspiration til logoet. Jeg kigger på sider som Pinterest, Behanche og Google. Jeg søgte på stikord som: Coco Plams Palm logo Oil logo Palm oil logo Palm oil icons Icons for palms Jeg ønsker at kombinere palme og olie i ét ikon, derfor gemmer jeg de ikoner/logoer som indeholder en eller to elemter der på en eller anden måde er kombineret. H2 GRAFISK DESIGN 15

13 SKITSERING Efter min inpsirationssøgning begynder jeg at skitsere mine idéer. 16 GRAFISK DESIGN H2

14 UDVIKLING AF IKON Efter min skitsering begynder jeg at tegne ikonet op i Illustrator. Disse logoer er også dem jeg viser til konsulenten. Denne er rigtig god, men palmebladet er for detaljeret Kan godt lide det realistiske palmeblad, den er for detaljeret Formen på dråben er god, men den er ikke helt god Flotte, men ikke så organiske. Kan have svært ved at fungere på web Kan godt lide kombinationen, men dråben er ikke god H2 GRAFISK DESIGN 17

15 VALG AF IKON Jeg udvikler videre på dråben med det realistiske palmeblad i, da jeg rigtig godt kan lide idéen. Derfor gør jeg bladet simplere, så bladende ikke sidder oven i hinanden, dråben bliver smallere og mere spids og til sidst gør jeg bladet mindre, så der kommer flere fyldfarve i bladet. Jeg synes, at jeg har ramt de ønsker og tanker både konsulenten og jeg har haft om ikonet. 18 GRAFISK DESIGN H2

16 UDVIKLING AF TAGLINE I logoet skal der indgå Erhvervsinitiativ for Bæredygtig Palmeolie. Det er lidt af en udfordring, da ordene er meget lange. Erhvervsinitiativ for Bæredygtig Palmeolie Da det er det et logo til DI, skal jeg bruge vores egne fonte. Jeg vælger DI Sans, da logoet skal bruges på web og derfor egner DI Serif sig ikke til dette. Jeg laver dog en enkel afprøvning med DI Serif Italic, da den har bløde fødder. Den valgte tagline H2 GRAFISK DESIGN 19

17 TILRETNING AF TAGLINE Da jeg har valgt min tagline, optimere jeg den ved at spacere/klibe luften mellem orderne. 20 GRAFISK DESIGN H2

18 FÆRDIG LOGO Dette er det færdige logo. Både konsulenten og jeg er meget tilfredse med resultatet. Logoet skal bruges både i dansk og engelsk version. Erhvervsinitiativ for Bæredygtig Palmeolie Business Initiative for Sustainable Palm Oil H2 GRAFISK DESIGN 21

19 LOGOET I BRUG Logoet er brugt på hjemmeside og i en invitation til et arrangement 20. december Bæredygtig palmeolie hvordan kommer vi videre? Palmeolie indgår i mange af de varer, danske virksomheder producerer fra shampoo til chokoladepastiller. Men hvordan sikrer man sig som virksomhed, at man ikke ved at bruge palmeolie bidrager til, at regnskove fældes, eller at mennesker arbejder under urimelige vilkår? I DI Fødevarers Erhvervsinitiativ for bæredygtig palmeolie er svaret: Køb certificeret palmeolie. Tirsdag den 20. december sætter vi bæredygtig palmeolie på dagsorden i Industriens Hus, og emnet bliver belyst fra forskellige vinkler set fra myndigheder, investorer, kunder og virksomheder. Kom og diskutér med andre virksomheder, hvordan bæredygtighed og forretning kan gå op i en højere enhed! Erhvervsinitiativ for Bæredygtig Palmeolie Sted: Industriens Hus Tid: Tirsdag den 20. december, kl. 13 Tilmelding: Engagetilmelding Program Velkomst & præsentation af task forcens afrapportering om initiativet Leif Nielsen, DI Fødevarer Hvorfor arbejde med bæredygtig palmeolie? John Nordbo/ Hlif Ivy Linnetved, WWF Hvordan gribes RSPO-certificering an? Jan Hedemand, Bureau Veritas Virksomhedernes arbejde med bæredygtig palmeolie Paneldebat med XX, YY og ZZ Debat ved bordene Pause Hvordan arbejder detailhandlen med bæredygtig palmeolie? Helene Regnell, CSR-chef, Dansk Supermarked The Age of Hyper-Scrutiny and the Role of the Finance Sector in Supporting Sustainable Palm Oil Kristjan Jespersen, Center for CSR, CBS Tak for i dag 22 GRAFISK DESIGN H2

20 GRAFIK OG BILLEDEBEHANDLING Bearposter Dette er et kreativt projekt jeg har lavet privat, både for at lege i photoshop med ting jeg normalt ikke bruger, men også fordi jeg længe har haft lyst til at lave noget double exposure/sammen kopiering med natur/dyr. H2 GRAFIK OG BILLEDEBEHANDLING 23

21 BILLEDEMATERIALE Jeg har downloadet billeder fra unsplash.com og pixabay.com ARBEJDSGANG Fritlægning af bjørn Cloning af grene i bunden af bjørnen Gradient og brush maskning af skoven Lysstyrke og kontrast justering Farvelag Fotofilter Final touch Skarphed FRITLÆGNING Jeg bruger Quick Selection Tool (Q) til at markere bjørnens omrids. Jeg bruger det gamle værktøj Refine Edge, da jeg synes at det er mere præcis og ikke så automatisk som det nye Select and Mask. Jeg bruger Refine Radius tool i kanten på bjørnen, for at fjerne baggrunden mellem hårene. Sætter Edge Detection til 1,3 px og slår Smart Radius til, Shift Edge på -3%, så er jeg sikker på at den ikke tager ekstra grønt med i kanten. Til sidst sætter jeg output til New Layer with Layer Mask og sætter hak i Remember Settings, så jeg kan gå tilbage og rette i min indstillinger, hvis der er behov for det. 24 GRAFIK OG BILLEDEBEHANDLING H2

22 CLONING AF GRENE Jeg bruger Clone Stamp Tool (S) til at fjerne grenene i bunden af bjørnen. Jeg bruger en rund brush på 230 px med 0% i hardness, for at få en blød overgang i det clonede pels i forhold til resten. Jeg cloner fra forskellige steder i pelsen for at få et så naturligt resultat som muligt. MASK OG GRADIENT SKOV Jeg laver et nyt lag med bjørnen efter at den er blevet fritlagt og clonet, og skjuler de to andre lag. Derefter placere jeg skoven og vender den -90 grader. Jeg kopierer masken fra bjørnen til skoven, så skoven macher bjørnen, og jeg kan derfra tilføje/fjerne hvis jeg ønsker mere/mindre skov. Jeg bruger en blød brush med opacity på 47% til at bløde kanten af masken og tilføje mere i toppen af skoven. H2 GRAFIK OG BILLEDEBEHANDLING 25

23 BAGGRUND Jeg tilføjer to Solid Color lag med farver fra skovens himmel, et lyst og et gråt, under skoven og bjørnen. Jeg ligger det lyseste nederst og tilføjer en maske på det øverste. Med en blød brush på 2800 px masker jeg midten af den mørke baggrund væk, for at få en vingrette effekt. JUSTERING AF LYS OG FARVE Jeg tilføjer et justeringslag og flytter det under skoven og giver mere lys og kontrast til bjørnen. For at gøre bjørnen mere blå, tilføjer jeg et Solid Color lag i blå, ændre Layer Style til Lighten og sætter opacityen til 65%. 26 GRAFIK OG BILLEDEBEHANDLING H2

24 FOTOFILTER For at give hele billedet et blåt skær, giver jeg billedet et Photofilter. Jeg sætter filter til Underwater og density til 11%, så billedet får lidt blåtligt skær, men ikke for meget. RETTELSER I MASKER OG SKAPRHED Efter jeg er færdig med justering af billedet, retter jeg til maskerne på bjørnen og skoven. Med en blød brush, udmasker jeg omkring bjørnen ører, så de får effekten af at være udbrændt og hår på hakket, nederst på bjørnens mave. Jeg retter også lidt i masken på skoven. Til sidst tilføjer jeg skarphed via Filter > Sharpen > Smart sharp. Det gør jeg på bjørnen og skoven. H2 GRAFIK OG BILLEDEBEHANDLING 27

25 FÆRDIGT BILLEDE 28 GRAFIK OG BILLEDEBEHANDLING H2

26 GRAFISK WORKFLOW OPS redegørelse 2017 Afdelingen Offentlig-Privat Samarbejde ønsker at digtialisere deres redegørelse for Som noget nyt laver vi det til en hjemmeside, i stedet for en trykt udgave som de før har lavet. Hjemmesiden bliver lancheret 31. januar 2017 og er et pilotprojekt på DI s første online redegørelse. H2 GRAFISK WORKFLOW 29

27 OPGAVEN Jeg er kommet ind midt i dette projekt, og har derfor ikke været med i opstart/de indledende faser af projektet. Det er første gang for dette projekt, derfor er der blevet truffet valg af design allerede blevet groft skitseret/kodet et design, så afdelingen tidligt har haft noget at forholde sig til. SITEMAP Da jeg kommer ind i projektet har afdelingen endnu ikke truffet valg om menupunkter. Derfor beder jeg dem om at lave et sitemap til mig, så jeg kan sætte menuen op og begynde at lave indholdssider. Da jeg modtager første udkast til menuen, indeholder der tre alt for lange menupunkter. En menu skal være hurtig og nem at afkode, derfor beder jeg afdelingen om at omformulere de tre menupunkter, så de bliver nemmere for modtageren at læse. Første udkast Endelig menu 30 GRAFISK WORKFLOW H2

28 UDVIKLING AF TESTSIDER Test Forside Test Underside Endelig - Underside Da denne hjemmeside er et pilotprojekt på en redegørelse online, har der været mange designmæssige ændringer undervejs. RESPONSIV Siden er ikke responsiv. Det er et bedvist valg vi har truffet, da graferne ikke fungrer optimalt på en lille skærm. Derfor har vi valg ikke at optimere hjemmesiden så den passer på en smartphone/ tablet. Endelig Forside IFRAME FEJL For nemmere at kunne redigere i grafer, har vi valgt at ligge dem i iframes og derved linke til dem på de enkelte sider. Det gør også at hvis graferne skal gå igen på flere af siderne, skal den ikke redigeres to steder, hvis der skulle komme ændringer. For at rydde op i mappen, flyttede jeg graferne ind i sin egen mappe så de var samlet og nemmere at komme til. Men siden kunne ikke hente iframesne medmindre de lå i samme mappe. Derfor er graferne nu navngivet graf_ xx.html for at de ligger sammen alfabetisk. H2 GRAFISK WORKFLOW 31

29 KODEEKSEMPEL På flere af siderne skal OPS have et hovedbudskab med anbefalinger i punktopstilling liggende. Afsnittet er bygget således: Citat kasse H6 Sektion med anbefalinger Kolonne Kolonne Kolonne I CSS filen har jeg lagt en kommentar på linje 89. Det gør det nemmere for mig efterfølgende at se hvad de efterfølgende CSS linjer omhandler. Resultat 32 GRAFISK WORKFLOW H2

30 UPLOAD TIL FTP-SERVER Da vores egen hjemmeside di.dk, er et lukket CMS system er det ikke muligt hjemmesider liggende der er kodet uden CMS. Derfor ligger OPS siden under dibapp.dk. Siden bliver først offentlig gjort d. 31. januar 2017, og der kommer den til at ligge på di.dk/ops, som automatisk fører videre til vores dibapp.dk side. Mit kodningsvindue, med rodmappen til min hjemmeside til venstre. Der kan jeg åbne filerne direkte. Når siden skal uploadet til FTP serveren, bruger vi Dreamweavers uploadings funktion. Når siden er opettet og forbundet i Dreamweaver, kan jeg også tilgå sidens indhold, direkte i mit vindue når jeg koder. Oversigten med Sites Link til rodmappe for hjemmesiden, lokalt på computeren FTP-server indstillinger H2 GRAFISK WORKFLOW 33