H2 Portfolio. Patrick Lindholm-Andersen

Transkript

1 H2 Portfolio Patrick Lindholm-Andersen

2 Grafisk design Opgave Opgaven gik ud på at designe et nyt logo til et gammelt fiktionelt bryggeri firma. Da kunden er engelsk har alt kommunikation foregået på engelsk inklusiv brainstorm. Afsender Oak Island Brewing Co Programvalg Har valgt at benytte mig af Illustrator til opgaven, da jeg ønsker at arbejde med vectorgrafik Designparametre Typografi Har benyttet mig af Mohave Bold, skrifttyper blev fundet af mig og udvalgt af kunden. Typen udstråler et moderne look samtidig med at det virker professionelt Illustration Symbolet i logoet er blevet benyttet for at skabe en ekstra identitet til firmaet der kan bruges på deres produkter. Selve symbolet forestiller et agern, med en hat af øl skum. Form Logoet fungere både på print og web. Farve Kunden og mig kiggede på forhånd på farver der kunne benyttes, da kunden ønskede en simpel men blikfangs givende farve. Farvesymbolikken ligger hovedsageligt på øl farven dog symbolisere farven også glæde, energi og varme. Arbejdsproces Læse designbrief Kundekontakt Brainstorm/skitsering Kundekontakt Rentegning af skitser Typografi valg Finpudsning af rentegning Finpudsning af typografi Godkendelse Endelige resultat sendes til kunden Kvalitetsvurdering Det har været en svær men spændende opgave. Kunden gav mig en god briefing før vi startede hvilket gav mig en god fornemmelse af hvad kunden ville have fra dag et. Både mig selv og kunden samarbejde en del for at nå frem til et fornuftig endelig resultat, derudover er det blevet vist til adskillige kunder af Oak islands produkter, hvilket udelukkende er kommet ud med positive udmeldinger. Personligt er jeg meget glad for resultatet, det opnåede hvad kunden ønskede med deres logo. Det at firmaet fremstår moderne og giver en hvis blikfang igennem logoet er et kæmpe plus.

3 Inspiration

4 Nogle få udkast af skitser

5 Logoet Logoet kan skaleres, derudover er det bygget op så elementer kan trækkes ud for at tilpasse sig emnet det skal trykkes på Logoet fungere i CMYK, Gråtoner og S/H

6 Font og farve Fonten blev valgt i samarbejde med kunden, de ønskede en moderne font, hvor Mohave opfyldte deres ønske. Farve symbolikken ligger hovedsagligt på øl farven dog symbolisere den orange farve også glæde, energi og varme. Den grå nuance er med til at binde det hele sammen og symbolisere pålidelighed C: 0 M: 37 Y: 82 K:0 C: 0 M: 0 Y: 0 K:85 MOHAVE Regular abcdefghijklmnopqrstuvxyzæøå MOHAVE Semibold abcdefghijklmnopqrstuvxyzæøå MOHAVE bold abcdefghijklmnopqrstuvxyzæøå 100% 75% 50% 25%

7 Typografi & Ombrydning Opgaven Fik til opgave at lave en manual til lederstillingerne i det online community jeg er en del af det. Communitiet er engelsk, så alt foregik på engelsk. Afsender 6th Airborne Division - 6th-ab.co.uk Målgruppe Manualens målgruppe er hovedsageligt gruppe og delingsførere. Programvalg Har udelukkende benyttet mig af Indesign til denne opgave. Dokumentet Format: A4 Antal sider: 45 Bleed: 3mm Ordbog: Engelsk Baseline grid Sat til 15pt Arbejdsproces Opsætning af indesign dokument Fontvalg Opsætning af paragraph styles Indsættelse af tekster og billeder Finjusteringer af layout Oprettelse af indholdsfortegnelse Trykklar version færdiggøres Interaktiv version laves Aflevering til kunde. Kvalitetsvurdering Både mig selv og klienten var yderst tilfreds med resultatet. Formåede og ramme hvad de ønskede, da den både kan bruges til print, men også fås i en interaktiv version til webbrug. Da opgaven er en manual fokuserede jeg mere på funktion frem for æstetik men formåede at ramme en god balance mellem begge. Selve arbejdsprocessen var spændende og anderledes. Dog var opgaven lige til at gå til, da jeg fik udleveret tekst og billeder der skulle bruges på forhånd.

8 Masterpage Brugte standard margin for at tilpasse layoutet til måden teksten skulle sættes op på

9 Font Minion Pro Serif Let læselig Kontrast til Bebas Neue Bebas Neue Grotesk/Sans-serif Enkel Moderne Communitiets go to font ABCDEFGHIJKL MNOPQRSTUV XYZÆØÅ ABCDEFGHIJKL MNOPQRSTUV XYZÆØÅ

10 Paragraph styles

11

12

13 Table of content

14 Udsnit af manualen

15 Billedbehandling Opgaven Grundet manglende avancerede billedbehandlings opgaver på arbejdet, besluttede jeg mig for at lave en manipulation ud fra egen idéer. Programvalg Har udelukkende benyttet mig af photoshop til at redigere og manipuleret billedet. Arbejdsproces Idé udvikling Fritlægninger af diverse billeder Farve og lys korrigering af baggrunden Korrigering af farve, lys og skygger på bruden Sammensætning af Isblok med farve og lys/skygge korrigering Tilføjelse af fugle, med filtre og lys korrigering Tilføjelse af ekstra bølger foran isblokken Tilføjelse af bøjen med dertilhørende farve redigering og filtre Tilføjelse af sne Tilføjelse af farve korrigerende lag. Værktøjer og funktioner brugt i Photoshop Pentool Lasso tool Hue/sat layer Color balance layer Brightness/Contrast layer Layermask (brush) Brush tool Smart objects Smart filters Blending modes Clipping mask Redegørelse Processen har været spændende og udfordrende. Det at opgaven har været lavet med frie hænder har virkelig ladet mig udfordre mig selv. Det har ladet mig benytte mig af forskellige værktøjer til at nå frem til resultatet jeg ønskede. Har arbejdet non destruktivt igennem hele processen, og ved brug af smart objects har diverse filtre også været benyttet non destruktivt. Kvalitetsvurdering Er godt tilfreds med resultatet, jeg nåede frem til det jeg ønskede med opgaven. Billedet kunne benyttes til tryk af plakater/billeder til hjemmet eller til brug i magasiner. Formåede at ramme det kolde og lidt dystre tema i billedet jeg ønskede at frembringe. Derudover er jeg godt tilfreds med proportionerne af de forskellige elementer i billedet.

16 Resurse billeder

17 Der blev lavet farve og lys korrigering på baggrunden ved brug af color balance adjustmentlayer og brightness/contrast adjustmentlayer, derefter blev de to hav billeder sammenlagt ved brug af layermask. Alt fritlægning blev gjort med pentool

18 Bruden blev gjort mørkere ved hjælp af brightness/ contrast adjustmentlayer. Kold tone blev tilføjet til bruden, og håret gjort sort.

19 Isen blev klippet ud på en layer mask, og derefter tweaket lidt Isen fik shading ved hjælp af brush tool og opacity ændringer Bobler blev tilføjet med brush tool Den Isen blev gjort mørkere for at frembring effekten, derudover blev saturation sat i bund for at gøre isen hvid.

20 Fuglene blev tilføjet og konverteret til smart objects, derefter givet gaussian blur for at blende bedre ind i baggrunden. Opaciteten blev sat ned på de bagerste fugle Fuglen på hovedet blev gjort lidt mørkere for at gøre den klar til fremtidige ændringer

21 Bølge tilføjet ved hjælp af baggrunds kopi og layermask Sne tilføjet med brush tool Bøjen blev sat ind og skruet ned i opacitet Blå shading blev tilføjet med brush tool Bølge blev tilføjet

22 Hue/Sat og color balance blev derefter brugt for at give billedet et køligt look. Dette blev selvfølgelig gjort på justerings lag Færdige resultat

23 Grafisk workflow Opgaven Handy-Print A/S ville gerne have en ny hjemmeside, for at få et mere moderne look efter det nylige logo skift. Designkrav Enkel og moderne Brugervenlig - Kundekredsen er i alle aldre Have det nødvendige information Professionel udtryk Layout Format 960px i bredden, bygget op responsive med hjælp fra foundation Flat illustrationer Reference galleri med fade Font Har udelukkende brugt Lato, det er en letlæselig og moderne font Farver Siden er blevet lavet med en dæmpet hvid baggrund, med blå/cyan detaljer da dette er firmaets primær farve. Usability Selve siden er enkelt sat op, og er let at navigere rundt på. Kontakt oplysningerne er udelukkende i footer. Det er lavet med et anchor point og smooth scroll, så brugeren bliver ført derhen når de trykker på Kontakt os. Selve siden er responsive, så den fungere på alle platforme. Arbejdsprocess Kundekontakt Inspiration Skitser Præsentation af skitser og flowchart Opstart med SASS og Foundation 6 Opsætning i sublime text Benyttet HMTL, CSS, jquery Kundekontakt Udarbejdelse af illustrationer Kundekontakt SEO Test af browserkompatibilitet Aflevering Browser kompatibilitet Siden er blevet testet i Safari, Chrome, Firefox og Edge Kvalitetsvurdering Selve siden er opbygget med et overskueligt layout og opbygget med et professionelt og indbydende look ved brug af få farve og små tekster. Derudover er siden responsive og virker på alle platforme, da siden er opbygget med Foundation 6. Selve arbejdsprocessen har foregået og flere måneder, da det er et projekt jeg bare skulle springe til og fra alt efter hvor meget arbejde der ellers var. Der har ikke været de store problemer igennem processen. Størstedelen af alle beslutninger blev taget tidligt i starten af projektet. Firmaet og jeg er godt tilfreds med resultatet, da vi har formået at ramme de krav vi satte til hjemmesiden. Derudover er firmaet glad for at have et flot layout, men også en responsive side med øget funktionalitet.

24 Workflow Kundekontakt Inspiration Skitser Kodning Opstart Præsentation Kundekontakt Illustrationer Kundekontakt Aflevering Test SEO

25 Inspiration

26 Skitser og flowchart

27 Index Vi tilbyder Hvem er vi? Referencer

28 SASS & Foundation

29 Sublime, HTML, JS & CSS

30

31 Endelig side Forside Footer

32 Vi tilbyder, plads til at tilføje mere i fremtiden.

33 Hvem er vi

34 Referencer