Birgitte Bremholm Persson MG21 svendeprøve 2015 MEDIEGRAFIKERSVENDEPRØVE
Grafisk design
Grafisk design l 3
Grafisk design l 4 Identitet til ny tøjbutik i form at logo, visitkort, paper bags, stickersmærker, Facebookprofil og web-visitkort. Fonten Gill sans MT i farverne sort og hvid var de retningslinjer, jeg på forhånd var blevet stillet. Butikken er en ukompliceret eksklusiv med priser i den højere ende af skalaen. Indretningen er spartansk og moderne. Introduktion 1 Jeg startede med at holde et møde med kunden for at danne mig et billede af kundes forventninger, stil, målgruppe og beliggenhed. Under mødet begyndte jeg så småt at lave skitseforslag til logo og udtænke de grafiske virkemidler der skal kendetegne butikken. Under mødet snakkede vi om hvilke former og farver der egner sig på de forskellige digitale platforme som fx Facebook og når logoet skulle bruges til trykt materiale. Jeg lagde en strategi for hvad vi skulle nå at have designet, rentegnet, filhåndteret og bestilt inden butikkens første åbningsdag. Der var en lille udfordring i at nå at få paper bags med logo hjem inden åbning, da kundens poseleverandør får produceret i Kina ergo en leveringstid på mindst 5 uger fra de modtager trykklar fil. Det giver plads til at trække vejret og man føler ingen pres. Det ser professionelt ud og giver et eksklusivt udtryk. 2 Typografien er centreret, det vil sige der er omtrent lige meget luft (padding på websiden) oppe som nede, og i hver side. Det giver ro og balance og det kan vi mennesker godt lide at se på. 3 Gestalt-loven med nærhedsprincip og forbundethed giver et roligt flow i læseforståelsen af teksten. Man er klar over der afsluttes en information, før en ny begynder. Der er fx god luft mellem tekstblokkene og elementerne på webvisitkortet, så det tekst der omhandle det samme, står i grupper sammen. Luften er vigtig omkring typografien, man føler sig velkommen og afkoder nemt budskabet. Budskabet er moderne, troværdigt og indbydende. Gill sans MT er en moderne grotesk typografi fra 1920 erne, uden fødder og med lige tykke grund og hårstreger. Skriften er geometrisk M er kvardratisk og O er næsten en perfekt cirkel. Målgruppe Butikkens målgruppe skal henvende sig til kvinder moderne og mellem 25 og 65 år. Hvis man skal bruge Minerva-modellen rammer KUBACH primært flest i det blå segment, men også en del i det grønne segment. 1 2 3 Designproces Møde med kunde + skitser i hånden Idégenering (former) Speed-skitser logo Illustrere/tegne logo 1. korrektur logo vælge + godkendelse Rentegning logo 2. korrektur + aflevering Indhente priser fra tryk/printvirksomheder på diverse designs Design af visitkort, paper bag og stickersmærke 1. korrektur på designs vælge + godkendelse Rentegning af designs 2. korrektur + aflevering Grafiske virkemidler generelt Der er brugt sort baggrund med hvid typografi på alle layouts. Det er i sig selv en stor kontrast, som er et genialt grafisk virkemiddel. Den hvide farve er opløftende og optimistisk, hvor den sorte er skarp og lidt alvorlig. Sort og hvid er moderne og klassisk. Jeg har brugt mere luft/afstand mellem bogstaver og linjer, end ved standard (som fx 10 /13). Personer i det blå segment er højuddannede med høj indkomst, de har selvtillid og har et stort forbrug. Karrieren er vigtig og de har en positiv indstilling til fremtiden. I det grønne segment er personerne moderne, engagerede og fællesskabsorienterede. De er veloriententerede og vil gerne have god service. I lokalområdet er de tro mod sine egne og er miljøbevidste. Programmer Adobe PhotoShop Adobe Illustrator
Grafisk design l 5
Grafisk design l 6 Jeg har brugt de samme grafiske virkemidler på alle designs jeg har lavet til KUBACH, for at skabe sammenhæng. Kunder skal nemt afkode og genkende butikkens identitet. Logo 4 4 5 Jeg tegnede nogle forskellige simple håndskitser til at starte med og tegnede bagefter formerne videre i Illustrator sammen med typografien. Som rettesnor brugte jeg mine skitser fra mødet med kunden, hvor kunden allerede havde lagt sig fast på noget simpelt. For at skabe identitet og genkendelighed har jeg spatieret mellem bogstaverne i logoet. Det giver lige meget luft imellem hvert bogstav. Det ser eksklusivt og moderne ud og drager paralleller til butikkens indretning. Logoet er prøveprintet i småt og stort og vendt på hovedet for bedre at kunne se regelmæssighed i spatieringen og er derefter finjusteret. Logoet fungerer i både lille og stor størrelse. svært at finde råd til reklame som nystartet, derfor er Facebook et er et rigtig godt sted at starte. Det kan give et mersalg og fastholde butikkens kunder. De skal føle de er en del af noget, og vide at her er de i trykke rammer, hvad angår mode. Jeg har med ejeren af butikken, som også står for opdateringer på Facebook forklaret og lært hende hvor vigtigt det er at være opmærksom på, hvad man poster, og hvad og hvordan man skriver. Det skal have samme professionalisme og grafiske udformning som hele hendes butikskoncept. 4 6 7 10 9 Visitkort, paper bags og stickersmærker 7 Visitkortet er trykt på begge sider. Forsiden er det enkle logo, som er centreret landskabsformat. Bagsiden er portrætformat med teksten centreret med lige meget luft i linjeskydningen og lige meget margin til kant. Det har samme udtryk som logoet i sig selv spartansk og udstråler dermed, her er noget eksklisivt. Jeg har valgt 350 gr. papir med blank overflade, for at give sammenhæng til det blanke inventar. 8 9 Det samme gælder for Paper bag og stickersmærker typografien er centreret og har meget luft. Stickersmærkerne er ligeledes blanke. 5 8 Facebook 10 Jeg har oprettet en Facebook-profil til KUBACH. Det giver kunderne pleje og skaber en næsten gratis reklamekanal for butikken. Det kan være
Typografi og ombrydning
Typografi og ombrydning l 8
Typografi og ombrydning l 9 Artikel til magasinet MAD fra forlaget Aller. Magasinet er meget visuelt orienteret med farverigt billedmateriale og med simpel tekst. Specifikationer Format 208X278 mm + 5 mm bleed i 4+4 CMYK Coated FOGRA39 (ISO-12647-2:2004) Billedekvalitet 300 ppi (pixel pr. inch) Marginforhold 20 mm 17 mm 23 mm 20 mm Spalter 2 + 7 mm Gutter tende at læse. Fonten giver personlighed og karakter der understøtter meningen med emnet. De svungne former er romantiske, feminine og henvender sig til målgruppen. Kontrasten af de to forskellige fonte giver et flot interessant tekstbillede, der virker friskt og tiltalende. Den blå farve er valgt både som komplementærfarve til den gule, men også for at associere til det forfriskende azurblå hav. 11 14 Moodboard Jeg startede med at lave et moodboard for at komme i rette stemning og lægge en strategi for farver, stemning og formgivning. Det er en sommerudgave, så jeg har valgt friske klare farver og enkelt billedmateriale med sol og lys. Typografi 12 11 Jeg har valgt at bruge to forskellige fonte. Frutiger i forskellige snit (garniture) og Corsiva i regular (grundskrift). Fordelt som følgende: Frutiger light til brødtekst Frutiger Black til overskrifter i tekstboksene Frutiger Light Italic til billedtekst Monotype Corsiva Regular til rubrik og uncial Typografisk grundlag Frutiger designet af den schweiziske designer Adrian Frutiger, er en sans serif grotesktypografi oprindeligt lavet til displays og skiltning i Charles de Gaulle Airport in Paris. Den er moderne, enkel og nem at afkode og har god læsbarhed selv i lille punktstørrelse. Fontens grund- og hårstreger er ikke lige tykke og minder om kalligrafiskrift. Det giver god kontrast og det er med til at gøre typografien nem for øjet at læse. Monotype Corsiva er en displaytypografi. Det bruges ofte i rubrikker, bomærker og logoer, ikke i lange tekstblokke, da den er svær og træt- Uncial/Drop Cap 13 14 Når der benyttes majuskler (store bogstaver), som i uncialet (Drop Cap) fylder bogstavet ud over dets grundlinjenet (over/underhøjde) og X-højde dette kaldes Swash (udløb). Jeg har rykket uncialets grundstreg (stamme) ud til grid et, så Swashen stikker ud over spaltebredden, ved at tilføje Hair Space foran uncialet og knibe til venstre. Uncialet er en god og dekorativ måde at starte en sætning på. Man afkoder nemt hvor øjet skal starte med at læse. Det laves med Paragraphstylen og defineres med antal bogstaver hen over antal linjer. I denne artikel har jeg valgt ét bogstav over fire linjer. Første linjes bogstav efter uncialet rykkes altid lidt til venstre, for at bedre kan lede øjet hen til hvor linjen starter det kaldes spærring. Da D et har en rund flot bue har jeg valgt at linje to, tre og fire følger denne bue rundt og skaber en lækker grafisk effekt. Det gøres ved at knibe og spærre mellemrummet efter uncialet og linjen efter (alt+højre/venstre pile). Teknisk dokumentopbygning 15 16 Dokumentet er 208x278 mm med bleed på 5 mm, da det skal trykkes til kant. Masterpage er brugt for at holde en ens flot sats på alle sider, og nemt kan rette gennemgående fejl. 12 13 15 16
Typografi og ombrydning l 10 Jeg har oprettet forskellige paragraphstyles med punktstørrelse, skydning, sprog (dansk), Align to Grid, Left Justify eller Align Center, Hyphenation, Justificationog Keep Options. 17 Hyphenation (orddeling) og Justification (ordmellemrum) er vigtig for at få en pæn og ensartet tekststrøm, jeg har derfor sat orddelingen til 5 3 2 3, så der fx ikke kommer mere end 3 orddelinger i træk i et afsnit. Jeg har lavet lille i prøve, for at justere og udligne luften mellem orderne, og indstillet Justification derefter. Keep Options som sørger for at man undgår horeunger i sin brødtekst og holder sidste eller første linjer sammen, har jeg indstillet til mindst 2. 18 Jeg har brugt H&J Violations under Composition i Prefrences., som viser brødteksten i et gult farveforløb. Det gælder om at udligne den stærke gule og dermed fordele luften mellem ordene så ens som muligt. Her har jeg mulighed for at finjustere brødteksten. Alt-knappen Text Frame Option vinduet popper op og her vælges Ignore Text Wrap. 20 Tabs/tabulator (ctrl+shift+t) er brugt til at indstille korrekt afstand mellem klassifikation og fakta i boksen med videnskabelig klassifikation. Jeg indstiller ved at køre skyderen frem/tilbage eller indtaste manuelt. Teksten skal være separeret af tab-funktionen hvor afstand ønskes. Tegnsætning 21 For at opnå korrekt tegnsætning ifølge dansk standard (Dansk sprognævn) har jeg brugt følgende tegn: Korrekte citationstegn X eller X Spærring (mere luft) ved talforbindelser Hårfin luft (Hair Space) foran høje skilletegn som ; :!? Korrekte tankestreger (alt+-) er ½ geviert (kvadrat af skriftsnit) større end bindestreg 17 18 20 21 Mellemrubrikken er defineret med 1/3 luft under og 2/3 luft over og er udregnet og derefter indstillet i Paragraphens skydning (Leading). Udregningen ser således ud: Jeg har brugt Glyphs (alt+shift+f11) for at finde de korrekte tegn til teksten fx citationstegn. Korrektur 2 x13 (brødteksts skydning) = 26-15 (mellemrubriks skydning) = 11 pt overskydende luft deles 2/3 og 1/3 7 pt over og 4 pt under. Mellemrubrikken er fri fra Baselinegrid. For at få uncialet til at slå igennem med ønskede formation, har jeg lavet en Characterstyle. På det lille billede af bogen, har jeg lavet en Text Wrap (ctrl+alt+w) med margin til alle sider, så teksten og billederne ikke konflikter med hinanden. 19 Undtagelsesvis er Paragraphen billedtekst center og billedtekst left sat til Ignore Text Wrap, ved at markere tekstfeltet og dobbeltklikke med Den oprindelige artikeltekst er et Word-dokument, så jeg har brugt Words stavekontrol til at få styr på tastefejl og stavefejl. Teksten er linket til InDesigndokumentet, så eventuelle tekstrettelser under ombrydningen sker automatisk. Jeg kørte Word-stavekontrollen inden jeg importerede teksten i InDesign. I InDesigns Check Spelling (ctrl+i), har jeg også kørt teksten igennem for stavefejl. Det gjorde jeg som det sidste inden 1. korrektur. Jeg har ligeledes brugt Find/Change (ctrl+alt+f) til at undgå fx dobbeltmellemrum og mellemrum foran komma. 19 Programmer Adobe InDesign Adobe PhotoShop Microsoft Word
Grafisk produktion og workflow
Grafisk produktion og workflow l 12
Pedersholmparken 6 DK 3600 Frederikssund Tlf.: +45 27 57 7164 www.contecpackaging.com Bank reg. 3543 Kontonr. 11039375 Cvr. nr. 3389997 Grafisk produktion og workflow l 13 Klargøring og håndtering af filer til trykt og digitalt brug for butik KUBACH. Den trykte opgave indeholder paper bag, stickersmærke og visitkort den digitale opgave er et web-visitkort. 22 Specifikationer: Dato: Navn: KUBACH Type: Papirpose Størrelse: 320x120x400 mm My: Workflow Indhente information og krav til opgave Paper bag 22 Ud fra en skabelon (pdf-fil) fra poseleverandøren lavede jeg det nye posedesign i Illustrator, med farveprofil Coated FOGRA39 (ISO12647-2:2004). Posekvaliteten er solidt 110 g/m² kraftpapir. Den sorte farve er defineret; C 50 %, M 50 %, Y 50 %, K 100 % for at give en bedre mætning. Der kommer sidst i processen en lak på posen. Al tekst er Outlinet (fra tekst til grafik), for at sikre den valgte typografi ikke bliver formateret eller ændre placering. Jeg har kørt en modificeret basis PreFlight-profil for at sikre den trykklare pdf-fil [press Quality] var korrekt med fx farveprofil og ingen typografi. Stickermærker 23 Stickersfilen har en CutContour en skærelinje. Jeg oprettede en ny Spotcolour og navngav den præsis CutContour, for at computeren der skal læse filen, ved hvor den skal skære. Den pink stroke er lige gyldig, den kommer ikke med på printet. Alt tekst er outlinet, som på paper bag en. Filen er gemt som pdf [Press Quality] incl. Bleed på 2 mm, for at sikre den sorte farve helt ud til kanterne. 23 24 Farve: Sort/hvid Bemærk! Venligst gennemlæs korrekturen for eventuelle tastefejl - om mål og logo er korrekte. Farver på skærm og farver på tryk kan ikke sammenlignes 100%, så tjek venligst, om det er de rigtige pantonefarver, der er defineret på skrift! Når korrekturen er godkendt, hæfter Contec Packaging Scandinavia IKKE for fejl! Strategi og priotering inden deadline (åbning) Research af grafiske/ digitale muligheder, brugerflade, behov og konkurrance Idé-generaring skitser (i hånden og digitalt) Indhente tekst og info Design og ombrydning af layouts Idefremlæggelse og præsentation af layouts Udvælgelse og godkendelse af layoutet Udarbejdelse og filhåndtering i korrekte grafiske programmer Prøveprint og test af digitale filer under hele udarbejdelsen Visitkort 24 Visitkortet er udarbejdet i Illustrator og gemt i to separate pdf-filer [Press Quality], incl. Bleed på 3 mm. Jeg har valgt Coated 300g/m² papir, med en mat-lakfinish. Der er ingen ICC-profil hos vistaprint.dk, så jeg lavede selv en profil ud fra paper bag ens og tilføjede bleed. 1. korrektur og udbedring af fejl og rettelser 2. korrektur og endelig godkendelse inden print og udgivelse/upload på digital flade
Grafisk produktion og workflow l 14
Grafisk produktion og workflow l 15 Kunden har indtil videre ikke ønsket en hjemmesiden, men jeg har rådet hende til et viralt visitkort. Siden indeholder adresse og andre relevante informationer om butikken. Designproces og test på enheder samme luft. Hvis fonten, som jeg har brugt til logoet, havde været en del af Google Fonts kunne jeg have benyttet det i min kode. Ligeledes med line-height:1.9em; har jeg givet mere luft til skydningen mellem linjerne. 25 Jeg har designet web-visitkortet i Indesign ved brug af Alternate Layout. Det giver mulighed for at lave flere størrelser designs i samme dokument ud fra det første design man har lavet. Øverst i Headeren (meta data) har jeg skrevet Keywords der beskriver hvad butikken indeholder og består af. Det er for at optimere browsersøgningen. Igennem hele designprocessen har jeg testet web-visitkortet på en computer i browserne; Internet Explorer, Safari, Firefox og Chrome, så jeg vidste at alle funktionerne virker alle steder. Det samme har jeg testet på henholdsvis en smartphone og på en tablet. I Description (meta data) har jeg også skrevet en unik tekst der fortæller om butikken, så fx Google ikke selv snupper tekst fra websiden og fylder ud med i søgeresultaterne. Jeg har i CSS en stylet baggrundsbilledet så det dækker hele det åbne vindue i browseren. Web-visitkort 25 Jeg har lavet web-visitkortet Responsive med de forskellige enheders Breakpoints. Det er vigtigt når vi i dag både bruger desktops, laptops, tablets og smartphones i forskellige størrelser. Jeg har brugt følgende Breakpoints i html-filen, som er lavet i DreamWeaver html { background-color:#000; background: url(photo/bg_kubach.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* Mobile: 480px and below */ /* Tablet: 481px to 768px */ /* Desktop: 769px to max 1600px */ På den måde kan du style (på dit linkede stylesheet/css eller direkte øverst i html-filen) og placere elementer hvor du ønsker, alt efter hvilken enhed websiden ses fra. Det gøres i procent. Baggrundsbilledet er et jeg selv har taget og redigeret i Photoshop. Psd-filen har mange lagmasker med Hue and Saturation, Brush og Dodge Tool til at lave flere skygger og Invert til at vende farvespektrumet. Jeg har meta-tagget billedet i Bridge med copyright og butikkens navn. Det giver bedre søgning i browserne. 26 Programmer Adobe DreamWeaver Jeg har valgt at skrive navnet som tekst i stedet for at sætte et billede ind, det giver bedre søgemaskineoptimering (SEO). For at få samme udtryk som i logoets spatiering og fonttype har jeg valgt sans (uden seriffer) og stylet med letter-spacing:15px; for at give Validering og upload til server 26 HTML-filen og det linkede CSS-stylesheet er valideret hos 3W.org og har ingen fejl, så browserne læser min koder nemt, korrekt og hurtigt. Webvisitkortet er uploadet igennem DreamWeaver via ftp-server til one.com. Adobe PhotoShop Adobe Illustrator
Grafik og billedbehandling
Grafik og billedbehandling l 17
Grafik og billedbehandling l 18 Annonce for Euroman 255x298 mm + 5 mm bleed og et mega sektionsbanner 930x600 px. Annoncerne er sammensat af tre billeder. Farveprofilen er konverteret fra srgb ICE61966-2.1 til Adobe RGB (1998) til brug ved digitale flader og Coated FOGRA39 (ISO 12647-2:2004) til trykt materiale. Det er efter Europe Prepress 3, som er dansk standard. Billedets ppi er 300 som er den foretrukne opløsning til trykt materiale og 72 ppi til digitale flader. 27 28 Jeg har retoucheret ørering, næsering, panderynker, skønhedspletter, støvpartikler væk. Jeg brugt Pacth Tool (J) samt finpudset skygger og uens farve i og omkring de fjernede elementer med Spot Healing Tool (J) 33 Manchetten dækker for en lille del af uret og er placeret i et lag ovenpå. Jeg har lavet to skyggelag en skarp mørkere skyggekant tæt ved hvor manchetten møder uret og en lysere skygge med større radius der udligner. Begge lavet med Brush Tool (B) og Opacity på 17 %. Baggrunden har to filtre. Det første er Gaussian Blur som gør baggrunden uskarp, det andet er et farvefilter, så jeg opnår den antikke varme tone i hele billedet som jeg ønsker. Timeglas-logoet er designet og tegnet i illustrator og placeret som Smart Object i Photoshop. 27 29 30 32 33 29 Refine Edge er brugt til at fritlægge modelen fra hans oprindelige baggrund, ved markering med Quick Selection Tool (W), åbne Refine Egde-paletten og justere skyderne og bruge Refine Radius Tool (E) til at fritlægge håret mere præcist. 30 Manchetknappen er retoucheret væk med Stamp Tool (S) ved at kopiere fra et lignende område uden manchetknappen og kopiere det hen over manchetknappen jeg ville fjerne. 31 Uret er fritlagt med Pen Tool (P) og placeret som Smart Object er linket og spejler eventuelle ændringer jeg foretager. Det er manipuleret på plads ved hjælp af Liquify og Forward Warp Tool (W), her har jeg brugt 3 Toolstørrelser 50 px, 151 px og 560 px, for at få uret lagt naturligt ind til modelens håndled. 28 31 Programmer Adobe PhotoShop 32 Håndleddet er manipuleret en smule længere, for bedre at få plads til uret. Modellens kindben er blevet en anelse mere markerede og hans hår en lagt mere ind til hovedet. I samme omgang skulle øreflip afrundes, da den var blevet deform efter retouchering af ørering Adobe Illustrator
Grafik og billedbehandling l 19
Grafik og billedbehandling l 20 Mega sektionsbanneret, som er beregnet til annoncering digitalt, er animeret i InDesigns interaktive funktioner. 34 37 40 34 Baggrunden er lavet i PhotoShop af samme grundbilleder som i den trykte annonce. Jeg har fjernet de mørke horisontale og vertikale vinduesrammer med Stamp Tool på grund af ombrydningen af formatet. 35 Logoet er tegnet i Illustarator over et kvadrat med Pen Tool og Expanded fra Stroke til grafik, så propositonerne holdes ved skalering. Logoteksten er Outlinet og tilpasset i bredden, for at holde logoet firkantet. Der er brugt samme farveværdi som i resten af teksten i baggrunden. 35 38 41 Animation 36 For at få logoet til at dreje om sig selv har jeg brugt Interactive Animation i InDesign. I funktionen har jeg defineret Preset til Spin (360 ). 37 38 39 Under Event(s) har jeg sat animationen til at køre ved Page Load og ved Mouse Over. Duration er sat til 2 sekunder og Play er sat til én afspilning. 40 Igennem hele tilrettelæggelsen af animationen har jeg testet i SWF Prewveiw i Indesign. 36 39 41 Jeg har gemt som SWF (Shock Wave Flash) for at animationen virker i browserne. Programmer Adobe PhotoShop Adobe Illustrator Adobe InDesign