Birgitte Bremholm Persson MG21 svendeprøve 2015 MEDIEGRAFIKERSVENDEPRØVE

Transkript

1 Birgitte Bremholm Persson MG21 svendeprøve 2015 MEDIEGRAFIKERSVENDEPRØVE

2 Grafisk produktion og workflow

3 Grafisk produktion og workflow l 12

4 Pedersholmparken 6 DK 3600 Frederikssund Tlf.: Bank reg Kontonr Cvr. nr 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 (ISO :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 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

5 Grafisk produktion og workflow l 14

6 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