Grundforløbsprøven - afslutningsprojekt

Transkript

1 Grundforløbsprøven - afslutningsprojekt Julia Igaard Abrahamsen Mediegrafiker studerende, Hansenberg Dokumentationen

2 Indholdsfortegnelse Opgavebeskrivelse: 3 Tidsplan: 4 Logo til hjælpeorganisation: 7-11 Brochure: Plakat: Hjemmeside: /55

3 Opgavebeskrivelse: Opgaven går ud på, at jeg skal lave en humanitær hjælpeorganisation. Hjælpeorganisationens formål er at hjælpe børn på Agbogbloshie-lossepladsen i Ghana. Jeg skal designe et logo og et navn til organisationen. Derudover skal jeg også lave forskellige grafiske produkter, som har udgangspunkt i hjælpeorganisationen. De produkter jeg skal lave er en brochure, en A3 plakat og en hjemmeside. Der skal være en rød tråd gennem alle de grafiske produkter. 3/55

4 Tidsplan: Fredag d. 27/11-15: - Prøven blev udleveret og læst i gennem - Brainstorm over logo + navn - Farve valg (farvers symbolik) - råtekst læst i gennem (hvad handler det om) Mandag d. 30/11-15: - Logo design - Oprettelse af kontaktoplysninger - Pritning af logo - Find og redigere billeder Tirsdag d. 1/12-15: - Skitse tegning af hjemmeside - Design hjemmesidens grundidé i Photoshop - Storyboard og flowchart til hjemmesiden - Konverter billederne til web - Kodning af hjemmeside Onsdag d. 2/12-15: - Kodning af hjemmeisde Torsdag d. 3/12-15: - Synopsis + aflevering af den - Gør Indesign klar (dokument opsætning, paragraph style mm.) - Brochure Fredag d. 4/12-15: - Fri Mandag d. 7/12-15: - Info 2 møde/skolepraktikmøde - Brochure - Gennemlæs brochure og ret fejl og mangler - Print brochuren - Få den lagt op på hjemmesiden Tirsdag d. 8/12-15: - Plakat - Photoshop (fritlægning, layer mask, levels mm.) - Printning af plakat Onsdag d. 9/12-15: - Alt skal printes - Ret i gennem, hvis der er fejl og mangler - Dokumentation Torsdag d. 10/12-15: - Dokumentation Fredag d. 11/12-15: - Dokumentation 4/55

5 Mandag d. 14/12-15: - få styr på det hele (sørg for det hele er der, tjekliste) - Aflevering af trykt og digitalt afslutningsprojekt Tirsdag d. 15/12-15: - Forberedelsesdag Onsdag d. 16/12-15: - Eksamens dag, skal ind kl /55

6 Beskrivelse af research og overvejelser: Efter opgaven blev udleveret, begyndte jeg at researche på emnet, og få idéer. Jeg vidste fra starten af, at jeg gerne ville spille på folks følelser, for det er sådan man vågner op og få tænkt tingene i gennem. Man kan se de elementer jeg gerne vil bruge, i mit moodboard. Jeg vil gerne have mine billeder i s/h. Overordnede tema: Det overordnede tema for mine produkter, er at få folk, til at indse hvor vigtigt det er, at vi står sammen og hjælper hinanden, der hvor vi kan. Det er også derfor jeg spiller så meget med følelser, med bl.a. de rubrikker jeg får lavet. Målgruppe: Min målgruppe ligger både i det grønne og det rosa segment, efter minerva modellen. Det grønne segment, fordi de er miljøbevidste, engageret og går op i kultur og natur. Det rosa segment, fordi de er familie mennesker, så der kan virkelig spilles på forholdet og følelser mellem forældre og barn. 6/55

7 Logo til hjælpeorganisation: Jeg skal designe et logo og et navn, til en fiktiv humanitær hjælpeorganisation, der har til formål at hjælpe børn og unge på Agbogbloshie-lossepladsen i Ghana. Logoet skulle indgå i alle de andre grafiske produkter. Brainstorm over navn: Ord fra brainstorm: - The eye - øjet der ser alt - Hope - Homosapien - Our children your future - Connection/connect - Connecting the world (slogan?) 7/55

8 Logo til hjælpeorganisation: Brainstorm over design: Navnet på hjælpeorganisationen, skal enten være Connect eller Connection, fordi denne hjælpeorganisation går ud på at forbinde verden til en stor helhed. Dem som kan hjælpe, skal hjælpe dem der har brug for det, og derfor bliver man forbundet med hinanden. Ord fra brainstorm: - Puslespilsbrikker (illustration) - Enkelt - Farver (rød, blå, gul) - Let at kende, let at se, let at forstå 8/55

9 Logo til hjælpeorganisation: Skitser: Jeg er fast besluttet på, at der skal indgå puslespilsbrikker i mit logo, da navnet enten skal være connection eller connect, og dermed kan det blive en god symbolik. Puslespilsbrikkerne kan også sagtens stå alene, uden bogstaverne, og man vil stadig vide hvad det er for et firma, som der er tale om. 9/55

10 Logo til hjælpeorganisation: Logo idéer: Connecting the world Connecting the world Connecting the world Da jeg begyndte at designe logoet, synes jeg at connection, blev lige langt nok, og jeg kunne ikke få puslespilsbrikkerne på den måde jeg gerne vil have det. Derfor begyndte jeg at lave designs til, at organisationen skulle hedde connect i stedet. Dermed kunne jeg få brikkerne som jeg gerne vil have det, at den ene skulle stå for o et, og den anden skulle være lige ovenover, så de er lige ved at sætte sig sammen. Puslespilsbrikkerne er tegnet i illustrator. 10/55

11 Logo til hjælpeorganisation: Det færdige logo: Connecting the world Her ses det færdige logo, både i farve, sort/hvid og hvor puslespilsbrikkerne står for dem selv. Info om logoet: Font: - Bangla Sangam MN, Bold Farver: - Rød C: 0 % R: 227 #E30613 M: 100 % G: 6 Y: 100 % B: 19 K: 0% - Blå C: 100 % R: 39 #27348B M: 90 % G: 52 Y: 0 % B: 139 K: 0 % - sort & hvid Rød er valgt fordi den symboliserer passion, energi, styrke, intensitet og bevægelse. Blå er valgt fordi den symboliserer tillid, pålidelighed, forståelse og samarbejde. 11/55

12 Brochure: Bruchuren skal omhandle Agbogbloshie-lossepladsen, og skal udgives af hjælpeorganisationen. Teksten der er blevet brugt til brochuren, er tager fra den tekst jeg fik udleveret. Brainstorm: Ord fra brainstorm: - Billeder (som kan spille på følelser) - Tekst i to spalter - A5 format - Farve (rød, meget fremtræden) 12/55

13 Brochure: Rough: Der skal være meget tekst i den her brochuren, derfor vælger jeg at lave det i to spalter og indsætter en masse billeder, for at gøre det mere overskueligt. Jeg sætter en indholdsfortegnelse ind, fordi jeg vil gerne gøre det nemt for læserne, så de hurtigt kan finde det de søger. 13/55

14 Brochure: Dokumentopsætning: 12 sider facing pages Str. A5 Margin Bleed: 3 mm 14/55

15 Brochure: Preflight profile: Links Images Text 15/55

16 Brochure: Preflight profile: Document Jeg valgte at lave en meget simpel preflight, hvor der er de vigtigste ting krydset af. Det jeg synes er vigtigt er, at den kommer med en alarm, hvis der f.eks. er nogle links der mangler, billedopløsningen er for lille, i forhold til den ppi det må være (minimum 200 ppi, da det skal printes på en digital printer) eller hvis der noget tekst, som ikke kommer med. 16/55

17 Brochure: Paragraph styles - rubrik: 17/55

18 Brochure: Paragraph styles - rubrik: 18/55

19 Brochure: Paragraph styles - rubrik: Paragraph styles - brødtekst: 19/55

20 Brochure: Paragraph styles - brødtekst: 20/55

21 Brochure: Paragraph styles - mellemrubrikker (udregning af mellemrubrikken): Jeg har udregnet hvor meget luft der skal være over og under mellemrubrikken, vha. brødtekstens skydning. Med 1 linie mellemrubrik, skal der være 2 pt luft under og 10 pt luft over. 2 linier mellemrubrik, 2 pt luft under og 8 pt luft over. 3 linier mellemrubrik, 2 pt luft under og 6 pt luft over. 21/55

22 Brochure: Paragraph styles - mellemrubrikker: 22/55

23 Brochure: Paragraph styles - mellemrubrikker: 23/55

24 Brochure: Paragraph styles - 1 linie mellemrubrik: 10 pt over 2 pt under Paragraph styles - 2 linie mellemrubrik: 8 pt over 2 pt under 24/55

25 Brochure: Baseline grid: Da brødteksten skal tilpasses til grid, så den ser flot ud og er på linje med hinanden, skal man gå op i menulinjen -> InDesign CC -> Preferences -> Grids og tilpasse grid til brødtekstens skydning. I det her tilfælde er brødtekstens skydning på 14 pt, derfor skal baseline grid også være på 14 pt. 25/55

26 Brochure: Forsiden: Forsiden til brochuren, har jeg lavet i Photoshop. Jeg fandt et billede, som jeg gerne ville bruge, og derefter begyndte jeg at redigere det, så det var lige som jeg gerne ville have det. Det oprindelige billede Her har jeg brugt lidt liguify, til at gøre ham tyndere. 26/55

27 Brochure: Forsiden: Derefter lagde jeg levels på billede, for at gøre farverne/ lyset og skarpheden bedre. 27/55

28 Brochure: Forsiden: Jeg ville gerne have, at billedet skulle være i højformat, i stedet for kvadratisk, så derfor manglede jeg noget top og noget bund, på billedet. Jeg valgte at bruge content aware, til at udfylde de tomme felter, hvor billedet manglede, både i toppen og i bunden. 28/55

29 Brochure: Forsiden: Men bunden blev ikke så pæn, der var for mange gentagelser i jorden, så det ville jeg rette ud, med clone stamp tool. Sådan blev jorden, efter jeg havde brugt clone stamp tool i photshop. 29/55

30 Brochure: Forsiden: Her ses så det færdige resultat, hvor billedet er i s/h, og der er en rød rubrik. Jeg har valgt s/h billeder, fordi det er en grå, trist og dyster verden de lever i. Den røde farve er valgt, fordi den er meget fremtræden og i øjenfaldene. Det er samme røde farve, som fra logoet. 30/55

31 Brochure: Bagsiden: Bagsiden er lavet på samme måde som forsiden, bare med et andet billede, men der har jeg også brugt levels, content aware, black & white filter. På bagsiden ses også CONNECTs logo og kontaktoplysninger. Det er den samme blå farve fra logoet, som er brugt til kontaktoplysningerne, og den er valgt fordi blå bl.a. symboliserer tillid, pålidelighed og sandhed. 31/55

32 Brochure: Tekstside: Jeg har valgt, at teksten skal skrives i to spalter, for bl.a. at have den gode linjelængde. Det er mere overskueligt, at læse en lang tekst, når det er i to spalter. Mellemrubrikker er som sagt røde, så de er mere fremhævet, og dermed ved man at der kommer et nyt afsnit. Topbilledet vil stort set ligge på alle mine tekst sider, med få undtagelser, f.eks. så har jeg to sider midt i, hvor der er et kæmpe billede i stedet for tekst. 32/55

33 Brochure: De forskellige sider i brochuren: Det ghanesiske flag er optegnet i illustrator. 33/55

34 Brochure: Indholdsfortegnelsen: For at lave min indholdsfortegnelse brugte jeg funktionen Table of contents. Jeg huskede også at lave en paragraph style på den, så den ville se ud lige som jeg ønskede det. Og sådan enten min indholdsfortegnelse med at se ud. Den holder samme design, som alt det andet. 34/55

35 Brochure: Pdf: Jeg slår funktionen spreads til, fordi jeg gerne vil have siderne til at være overfor hinanden, ligesom i en bog. Crop marks er sat på, for at have noget at skære efter, så der f.eks. ikke kommer en hvid kant. Da jeg oprettede mit dokument, satte jeg bleed på 3 mm, derfor giver det meget god mening, bare at lade pdf bruge de samme bleed indstillinger. Bleed er til hvis man f.eks. har et billede eller en farve der skal fylde hele dokumentet, så skal man sørge for at det går helt ud til bleed kanten i stedet for dokument kanten, for at undgå hvide kanter. 35/55

36 Brochure: Pdf: Fogra 39 er en printerenhed. Pdf filen skal gemmes i samme enhed, som den printer man skal printe på, for at få det bedste resultat. Da man sidder og arbejder på en computerskærm, skal man altid arbejde i RGB, fordi det er lysets farver. Når man så gemmer sin fil som en pdf, og skal til at printe filen, bliver det automatisk konventeret om til CMYK farver. CMYK farver bruges næsten til alle tryksager. 36/55

37 Plakat: Her skal jeg designe en A3 plakat i Photohsop, hvor jeg viser mange af de ting jeg har lært i gennem tiden, i photoshop. Designmæssigt skal plakaten passe til emnet og de forskellige grafiske produkter. Brainstorm: Ord fra brainstorm: - fangende - spille på følelserne - sort/hvid (rød rubrik og farvet logo) - Brug liguify til at gøre børnene tyndere 37/55

38 Plakat: Skitser: 38/55

39 Plakat: Billederedigering: Jeg har valgt at tage udgangspunkt i det samme billede, som jeg brugt på forsiden af brochuren, til min plakat. Derfor er der de samme instillinger, dog med tilføjelser. Billedet fra brochuren På dette billede, har jeg rykket personen lidt med clone stamp tool, fordi jeg gerne vil have, at der er noget mere i baggrundet af billedet. Bagefter fjernede jeg ham, fra den oprindelige plads, med content aware. 39/55

40 Plakat: Billederedigering: En af de ting jeg gerne vil have i baggrunden af billedet, er et bål og noget elektronik der brænder. Først fandt jeg det billede jeg gerne ville bruge. Derefter fritlagde jeg det, som jeg gerne ville have med. Her ses bålet fritlagt, dog meget kantet og kunstigt, men det får jeg rettet med brush tool. 40/55

41 Plakat: Billederedigering: Nu ligger bålet i baggrunden af billedet, hvor jeg har brugt brush tool for at få det til at passe med det andet billede. Men det var ikke helt nok, der manglede noget mere, derfor fandt jeg endnu et billede, som jeg fritlagde på samme måde som med bålet og satte ind i baggrunden. 41/55

42 Plakat: Den færdige plakat: Til sidst, satte jeg en rød rubrik ind (den samme fra brochuren) + logo og kontaktinformationer. For at logo og kontaktinformationerne blev mere synlige, valgte jeg at lave en hvid kasse med opacity på 50 %. 42/55

43 Hjemmeside: Her skal jeg designe og kode en hjemmeside, som indeholder 1 forside og 2 undersider. Hjemmesiden skal være til min hjælpeorganisation, hvor jeg præsenterer organisationen og viser hvad formålet med den er. Hjemmeside skal hænge sammen med de andre grafiske produkter. Skitser: Jeg vil gerne designe en hjemmeside, som er enkel og meget overskuelig. Det skal være nemt at finde de ting som man gerne vil bruge. Samtidig med skal hjemmesiden også meget gerne have et godt design og hænge sammen med mine andre produkter. 43/55

44 Hjemmeside: Storyboard: Her ses forsiden. På forsiden skal der være en introtekst, og de vigtigste informationer. Baggrunden skal være et stort billede, som ikke flytter sig når man scroller op og ned. Her er undersiden Connect, hvor det samme design går igen, men indholdet er skiftet ud. Der bliver fortalt hvem Connect er, deres værdier, hvad de gør, ledige stillinger etc. Undersiden Projekter, hvor det samme design går igen, men indholdet er skiftet ud. Her fortælles om de projekter Connect har gang i. 44/55

45 Hjemmeside: Storyboard: Undersiden Bliv frivillig, hvor det samme design går igen, med indholdet er skiftet ud. Her vises hvordan man kan blive frivillig. Undersiden Giv et bidrag, hvor det samme design går igen, med indholdet er skiftet ud. Her vises hvordan man kan bidrage og hvad man kan bidrage med. Undersiden Kontakt, hvor det samme design går igen, med indholdet er skiftet ud. Her vises et kort, så man kan se hvor vi befinder os, kontaktinformationer, kontaktformular og bankoplysninger. Det her skal ligge sidst i menulinjen, hvor man kan vælge hvilket sprog man gerne vil have hjemmesiden på. 45/55

46 Hjemmeside: Design af hjemmesiden i Photoshop: Sådan her ønsker jeg, at min hjemmeside skal se ud. Det er et overskueligt design, og den er nem at finde rundt i. Det skal være det samme design på alle siderne, men indholdet i midten skal skiftes ud, alt efter hvilken siden man er på. I toppen er Connects logo og det samme billede som fra brochuren, bare med opacity, så det ikke er så fremtræden og så man kan se logoet. Derefter kommer menulinjen, hvor man kan finde nogen undersider, samt skifte sprog (flagene er tegnet op i illustrator). Efter det bliver hjemmesiden delt op i tre spalter; første spalte er til brochuren, anden spalte er til tekst, og tredje spalte er til forskellige ting som er på hjemmesiden, f.eks. de projekter som Connect laver, hvordan man kan give et bidrag, kampagne plakaten etc. Nede i bunden, står kontaktinformationerne. 46/55

47 Hjemmeside: Flowchart: Forside CONNECT Projekter Blev frivillig Giv et bidrag Kontakt Hvem er vi Hvad gør vi Job Strategi og politik Hvordan bliver jeg frivillig? Find dit lokalområde Frivilligjobs Kontakt os Bankoplysninger Bliv ringet op 47/55

48 Hjemmeside: Kodning - HTML: Der hvor der står title, skal man skrive det, som man gerne vil have, at hjemmesiden bliver kaldt. Hjemmesiden er opbygget af en masse div id er, hvilket er ligesom containere, som indeholder ting. Ved hjælp af en uordnet liste, kan man lave en munu. Man laver det som et link, så siderne kan snakke sammen, og linke til hinanden. <h1> er den første rubrik, og det google bruger, når der søges. <p> bliver lavet til brødteksten. Man laver en class, hvis der f.eks. er noget tekst man gerne vil have fed, mens resten ikke skal være det. 48/55

49 Hjemmeside: Kodning - HTML: <h2> er en anden form for rubrik. Man kan vælge mellem seks rubrikker, altså h1,h2... h6. For at få sat et billede ind i indholdet, er det denne kode man skal bruge, hvor man først fortæller, at det er et billede, derefter hvor billedet ligger (images) og til sidst hvad billedet hedder. Kodning - CSS: Når man har lavet en class i sin html, skal man style den i css en. Denne kode er til mit baggrundsbillede, for at få det til ikke at rykke sig, når man scroller op og ned. Da jeg gerne vil have et billede til at ligge i baggrunden og fylde den ud, skal jeg gøre det i body en. Når det er et baggrundsbillede, så kan jeg godt ligge ting oven på det. 49/55

50 Hjemmeside: Kodning - CSS: Her fortæller jeg hvor stor jeg gerne vil have min wrap (indholdet) til at være. Height = auto, fordi den skal bare blive længere, når der kommer mere ind. Margin og padding = auto, fordi når man skaller siden ned eller op, skal indholdet stadig være i midten. Sådan her bliver menuen designet. Normalt når man laver links, kommer det i punktform, derfor er der små cirkler ud for hver tekst. Vha. denne kode, fjernes de. Denne kode fjerner understregningen, som man tit ser, når der er et link. Når man holder musen henover teksten skifter den farve. Her fortæller jeg hvilken skrifttype jeg gerne vil bruge. Grunden til, at der er tre valgmuligheder er fordi, browseren henter skrifttypen fra computeren, og hvis computeren ikke har f.eks. verdana, kan browseren altså hente arial ind i stedet. 50/55

51 Hjemmeside: Kodning - CSS: Float left bliver brugt for at fortælle, at en div skal ligge sig ved siden af den forrige div. Hvis der ikke er float left på, vil div bare ligge sig under eller over den forrige. 51/55

52 Hjemmeside: Det færdige resultat - forsiden: Designet linger meget godt det, som jeg havde i tankerne fra starten af. Hjemmesiden er overskuelig og man kan hurtigt finde svar på det man søger. De samme farver går igen fra bochuren og plakaten. I menulinjen kan man så skifte sprog, hvis man nu vil have siden skal være på engelsk i stedet. I bundlinjen er kontaktinformationer på både den danske og den britiske afdeling. 52/55

53 Hjemmeside: Det færdige resultat - undersiden Projekter : Når man holder musen henover en menu, i menulinjen, vil den tekst skifte farve fra hvid til rød. Siden fortsætter nedad, men holder det samme design. Når man klikker på det røde her kommer man ind på en side (findes ikke i menulinjen), hvor man kan læse den samme tekst som står i brochuren. 53/55

54 Hjemmeside: Det færdige resultat - undersiden Projekter -> Agbogbloshie-lossepladsen: Det er den side, som man kommer ind på, fra siden projekter. Siden har samme design, som de andre sider, det er bare indholdet der er skiftet ud. Det færdige resultat - undersiden Giv et bidrag : På denne side, kan finde ud af hvad man selv kan bidrage med. F.eks. så kan man sende en sms med teksten Agbogbloshie til 4040, så støtter man med 100 kr. 54/55

55 Kilder: Billeder: - Billede med mønt: Foto Steffen Ortmann, Tekst: - På hjemmeside: Røde kors, rodekors.dk Ellers er de resterende billeder og tekst brugt fra det materiale, som blev udleveret sammen med opgaven. Derudover har jeg googlet andre hjælpeorganisationer, for at se hvordan de var opbygget og for at få noget inspiration. 55/55