Tidsplan...3 Afgrænsning Research...5 Idégenerering...6. Logo Logo Logo Farver... 11

Transkript

1

2 Tidsplan.... Afgrænsning Research...5 Idégenerering....6 Navn / identitet...7 Logo Logo....9 Logo Farver.... Logo.4... Merchandise..... Brochure Brochure Brochure Brochure Plakat Plakat Plakat Plakat.4... Plakat.5... Plakat.6... Hjemmeside Hjemmeside Hjemmeside Hjemmeside Hjemmeside Hjemmeside Hjemmeside Hjemmeside Hjemmeside Mappestruktur....

3 Tidsplan Detaljeret Detaljeret tidsplan der viser hvad der skal laves hver dag. overordnet Overordnet tidsplan der viser hvornår hver enkelt ting bør være fædig. /

4 Afgrænsning. 4/

5 Research Research foregik ved at google, søge inspiration på sider som behance.net og dribbble.com og ellers bare tænke længe over emnet. 5/

6 Idégenerering brainsrom Lavede en brainstorm for at komme frem til idéer til en identitet. Navne idéer Ud fra braimstormen lavede jeg en masse navne forslag. Tagline idéer Ud fra braimstormen lavede jeg en masse forslag til taglines. 6/

7 Navn / identitet Ghanas affaldsbørn Er det okay bare det er Afrika? / Hvad hvis det var dit barn? 7/

8 Logo. Et enkelt men unikt og let genkendeligt logo der vil stå stærkt med visuelle grafiske elementer. 8/

9 Logo. Logo blev tegnet i illustrator. Ghanas grænse Ghanas grænse optegnet med pentool. første shape Den første shape jeg tog udgangpunkt i. Forenklet shape Et mere enkelt udtryk. 4 Kabler Jeg søgte inspiration i dette billede Færdigt Landegrænsen fungerer nu også som et ødelagt kabel, der symboliserere Ghanas problem med e-affald. 5 Expand Jeg expander pathen så logoet kan forstørres og formindskes uden problemer. Object > Expand 9/

10 Logo. Jeg bruger forskellige fonte til logoet. Det gør jeg for at skabe spil i logoet og gøre det mere visuelt spændende. De fonte vil være gennemgående i gennem hele designet. Bitter En stærk antikva font. En spinkel groteksk font der giver god kontrast til fonten Bitter. Exo Myriad pro En meget professionnel læsevenlig font. Rubriker Tekst Stor mængde tekst Bitter ABCDEFGHIJKLMNOPQRSTUVWxyzæøå ABCDEFGHIJKLMNOPQRSTUVWxyzæøå EXO ABCDEFGHIJKLMNOPQRSTUVWxyzæøå ABCDEFGHIJKLMNOPQRSTUVWxyzæøå Myriad pro ABCDEFGHIJKLMNOPQRSTUVWxyzæøå ABCDEFGHIJKLMNOPQRSTUVWxyzæøå /

11 Farver Den røde og den gule kommer fra Ghanas flag, den mørke blå fungerer som en grundfarve i stedet for sort. Hvid bliver kun brugt til små ting. Hvis baggrunden skal være helt lys bliver der brugt en grunge texture, for at skabe en rustik stemning og for at bryde de rene farveflader. print Der er forskellige mørkeblå, den ene bruges til print og tryk, den anden til skærm. RGB: R: 9 G: 45 B: 0 CMYK: C: 00 M: 96 Y: 0 K 8 HEX: #7d66 RGB: R: 57 G: 59 B: 0 CMYK: C: 0 M: 8 Y: 64 K 00 HEX: #e5484c RGB: R: 9 G: 45 B: 0 CMYK: C: 6 M: Y: 7 K 0 HEX: Skærm RGB: R: 9 G: B: 64 CMYK: C:9 M: 89 Y: 4 K 50 HEX: #df40 RGB: R: 55 G: 55 B: 55 CMYK: C: 00 M: 00 Y: 00 K 00 HEX: #ffffff Texture /

12 Logo.4 Færdigt logo i forskellige farve varianter og måder at bruge det på. /

13 Merchandise. Merchandise har en stor rolle i organisationen, dette vil blot være nogle få af de mange forskellige ting man kan købe, i alle organisationens farver. /

14 Brochure. Brochuren har fokus på store dramatiske billeder der er indrammet i en mørk blå ramme. Den visuelle stil følger de andre produkter. 4/

15 Brochure. Brochuren bliver samlet i InDesign. Opret dokument Opretter dokument med følgende indstillinger. Margins er udregnet med 4 dels metoden og efterfølgende rettet til. Preflight Definerer en preflight der kan give hjælp. Tekst Test af tekst str., skydning farve mellemrubrikker osv Baselinegrid Redigering af baselinegrid. InDesign > Preferences > Grids 5 i-test 0 i er med 9 mellemrum og et i under. med justification tilrettes teksten så mellemrum har samme størrelse som et i. 5/

16 Brochure. paragraph style Laver paragraph styles til alt tekst. Brødteksten er Myriad Pro 9/ left justify der er align to grid. Der er en skydnings rum efter. mellemrubriker Bitter med en størrelse på 0/, så linjes mellemrubrik udregnes ved at sige -=0 det betyder 7pt. over pt. under. Testprint Testprint for at se den faktiske str. skydning osv. 4 4 Billeder Testprint af tekst og mellemrubrikker se mappe. Billeder bliver redigeret i photoshop og ppi bliver sat så den er parat til print (00ppi), hvorefter de bliver placet ind i InDesign. Photoshop: Image > Image Size 6/

17 Brochure.4 MASTER PAGE På master page bliver baggrund og pagina sat ind. Type > insert special charecter > Markers > current page numer Tabs / faktaboks Bruger tabs til at stille fakta op over hiananden, samt lave prikker. Prøveprint Laver massere af prøveprint igennem designfasen, for at sikre mig at det kommer ud som det skal. 4 text wrap Til citaterne, laves der en tekstboks som får tekstwrap omkring sig. Anførselstegnene er et grafisk element, så i textframe options klikker man Ignore text wrap, så de kan placeres inden i citatet. Window > Text Wrap Object > Textframe Options 4 prøveprint af tekst og mellemrubrikker mm. se bilag. 7/

18 Plakat. Her er plakater i den serie plakater der er tiltænkt kampagnen. Der er stort fokus på dramatiske billeder, som står sammen med et af de taglines. Plakaterne følger den grafiske stil som er lagt igennem alle produkterne. 8/

19 Plakat. Plakaten blev lavet i Photoshop. Nyt dokument Åbner nyt dokument i A, giver dokumentet 6 mm ekstra i højde og bredde for at give plads til bleed. Original billede Original billedets PPI bliver sat til 00, hvorefter det bliver sat ind. Image > Image Size History states bliver sat til +00, så man i tilfælde af fejl kan gå tilbage. Photoshop > Preference > Performance 4 Performance Pentool Med pentool laves en path rundt om drengen. Derefter laves en selection Clone stamp Med en selection rundt om drengen, kan man med Clone Stamp klone drengen i baggrunden væk. 9/

20 Plakat. Curves Lysner og skaber kontrast med curves Brightness/contrast Lysner og skaber yderligere kontrast med Brightness & Contrast for et mere dramatisk udtryk. Indsætter et baggrundbillede over original billedet. Med en maske aktiveret males drengen ind i forgrunden. 4 Baggrundsbillede Adjustment layers På samme måde som med original billedet, bruges adjustment layers til at ændre lys, kontrast og farver. 0/

21 Plakat.4 Lys og skygger curves layers bliver lavet. Et helt mørkt og et lyst. Begge layers bliver fyldt ud med sort. lys og skygger Med en brush tool med lav opacitet males der på curvesnes layermask, der hvor der skal være skygge eller lys. Dette gøres for at skabe et dramatisk udtryk. Dette gøres igen på baggrundslaget for at få et ens udtryk. Navngivning af lag Alle lag er navngivet og lagt i navngivne mapper for et bedre workflow. /

22 Plakat.5 rammer Med selection tools fixed size laver jeg rammer, og med bucket tool fylder jeg dem ud. blå gradient Med bucket tool bliver billedet fyldt ud. Med gradient på en layermask laves der en flydende overgang. Tekst Tekst bliver indsat. /

23 Plakat.6 Eksempel på hvordan plakaterne vil blive hængt ved busstop og togstationer. /

24 Hjemmeside. Hjemmesiden blev designet i photoshop og kodet i Sublime text. Den grafiske stil fra de andre produkter går igen på websiden. 4/

25 Hjemmeside. Flowchart 5/

26 Hjemmeside. Storyboard 6/

27 Hjemmeside.4 Opet dokument Opretter et dokument med følgende indstillinger. 960px Siden bliver lavet så den fungerer til 960px bred. Bruger guides til at visualisere. Design Begynder at designe. 4 Navngivne lag 4 5 Alle lag bliver navngivet og lagt i mapper. 5 Save for web De billeder der skal bruges til kodningen bliver gemt med funktionen Save for web. File > Save For Web 7/

28 Hjemmeside.5 Index Merch Organisation 8/

29 Hjemmeside.6 kode begyndelse Henter grundata fra Dreamweaver, indsætter title og link til stylesheet eksternt stylesheet. Font Bruger fonte fra Google fonts. Der indsættes et link til fontene i headeren. Navigation Bruger en liste til navigationen. 9/

30 Hjemmeside.7 Cover Forsidens fokuspunkt er et stort banner der er 00% width 00% height, med slider funktion. Slider funktionen laves med js/jquery. JS / Jquery Downloader Jquey filen fra deres hjemmeside. som jeg linker til i mit html dokument. Skriver javascript for at få slideren til at virke, som igen bliver linket til i HTML en. 0/

31 Hjemmeside.8 For at gøre siden mere interessant laver jeg animationer på diverse elementer. Transitions html Indsætter elemtenter som normalt. Transitions css Bruger :hover funktion og transtitions til at skabe liv. Det er vigtigt at huske prefixes, så de fungerer på alle browsers. /

32 Hjemmeside.9 Kommentarer Sikrer der er massere af kommentarer, både i HTML CSS og Javascript. Det gøres for at andre ude fra kan læse og forstå koden nemmere. BRowsers Checker forskellige browsers for at sikrer siden fungerer i dem alle. /

33 Mappestruktur Sørger for alle filer er navngivet og lagt i mapper for bedre workflow. /