GRAFIK OG BILLEDE PORTFOLIO DAN KLESSEN BOOSTING BUSINESS H3

Transkript

1 GRAFIK OG BILLEDE PORTFOLIO DAN KLESSEN BOOSTING BUSINESS H3

2 Grafik og billede 04 INDHOLDSFORTEGNELSE Dokumentation 05 Clone Tool 06 Selection 07 Curves 09 Masker Masker 10 Masker med effekter 11 Blending 13 Brushes på masker 14 Resultat 15 Fritlægning 16 Filtre 17 Transform 20 Brushes 22 Andre filtre 23 Effekter 24 Layers 25 Færdige resultat 26

3 Grafik og billede 05 DOKUMENTATION Opgaven Opgaven består i at billedmanipulere et foto af Paris og derved skabe en helt anden stemning i billedet. Jeg skal manipulere billedet af byen, så byen fremstår som et dystert, forladt sted. I opgaven indgår brug af div. værktøjer såsom masker, Curves og Blending options. Det færdige billede er sammensat af to billeder, som begge overholder kravene for det medie, de senere hen skal bruges på, hvilket primært er web. Billedet laves derfor først i en 300dpi version, derefter en 72dpi til web, hvor det primært vil blive vist. Bidrag til opgaven CJeg har stået for alt billedbehandling i denne opgave. Jeg har tidligere arbejdet med fotografering og fordelene ved at arbejde med RAW billeder. Billederne i denne opgave er dog kun tilgængelige i JPG. Billedet er px. Programvalg Billedmanipulationen er udarbejdet i et standard billedbehandlings program for grafiske virksomheder, Photoshop CS6. Arbejdsproces Filerne er købt via nettet gennem et ukendt stockphoto site. De er modtaget i en høj opløsning, hvilket gør dem brugbare til grafisk behandling. Photoshop farveprofil for CMYK er Fogra39. Photoshop farveprofil for RGB er Adobe RGB (1998). Da billederne er købt online fra en professionel stockudbyder, behøver de i det her tilfælde ingen justering i forhold til farvekorrektion. Det vil sige at den justering i Selective Color, Levels og Curves er foretaget hos udbyderen.. Kvalitetsvurdering NMit billede har fået en stor omgang manipulering i Photoshop. Det har taget (meget) lang tid, men resultat er også derefter. Det viser den dystre effekt, som jeg ønskede. Ved brugen af maskerne i processen, har jeg haft god kontrol over de maskede dele på billedet. Jeg blev spurgt, om vinduerne i husene ikke skulle lyse, da det skal vise byen om natten, men det er ikke meningen, da byen skal fremstå efterladt.

4 Grafik og billede 06 CLONE TOOL Før Clone Tool For at kopiere underlaget ved siden af personerne på billedet, bruges Clone Stamp Tool. Det gør det muligt at male personer og andet væk. Efter Clone Tool

5 Grafik og billede Før 07 SELECTION Her laves en Selection af en fodgængerovergang, som kopieres og indsættes et sted på billedet, hvor bilerne dækker for fodgængerovergangen et andet sted. Selection Efter

6 Grafik og billede Før 08 Her ses det færdige resultat af Clone Tool og Selections på billedet. Efter

7 Grafik og billede 09 CURVES Billedet mørklægges ved brug af Curves.

8 Grafik og billede 10 MASKER Himmelen markeres med Quick Selection Tool. Laget med Curves er slået fra, for ikke at forstyre den næste process. Selection, cmd+i og Selection laves til en maske.

9 Grafik og billede 11 Det mørklagte lag er nu kun synligt på himmelen. Langs horisonten er der brugt en blød Brush for at fjerne den skarpe kant mellem by og himmel. Curves er blevet justeret.

10 Grafik og billede 12 En ny maske for byen oprettes. Bruger igen Curves, nu til at lysne byen.

11 Grafik og billede 13 BLENDING Opretter et blank lag og tilføjer effekten Color Fill. Blending Mode sættes på Color.

12 Grafik og billede 14 BRUSHES Før blød Brush Efter blød Brush Bruger en blød Brush med lav Opacity og maler på træerne, for at lave et lyst skær.

13 Grafik og billede 15 Her ses det færdige resultat af mørklægnings processen.

14 Grafik og billede 16 FRITLÆGNING Her starter fritlægningen af en UFO. Her bruges Pen Tool. Refine Edge kan bruges til at gøre fritlægningen bedre end ved bare at bruge Pen Tool. Refine Edge kan ligge en Feather rundt om objectet, så kanten ikke er så skarp. Hue/Saturation bruges til at justere farven på UFO'en.

15 Grafik og billede 17 FILTRE Før og efter Motion Blur. Der ligger to lag over hinanden. Et med Blur og et uden.

16 Grafik og billede 18 Felterne under UFO'en klippes ud og effekten Color Overlay tilføjes på dem.

17 Grafik og billede 19 Her ligger også to lag over hinanden. Et med Blur og et med Gaussian Blur.

18 Grafik og billede 20 TRANSFORM Da UFO'en kun er set nedefra på original billedet, er det nu tid til at skabe den set ovenfra. Toppen fritlægges, og derefter Clones texturen med Clone Tool.

19 Grafik og billede 21 Resten af UFO'en flippes vertikalt, og de firkantede felter fjernes også her med Clone Tool. Til sidst samles de to dele til en UFO set ovenfra.

20 Grafik og billede 22 BRUSHES En Blød Brush bruges også her til at male lysfald fra UFO'en ned på bygningen.

21 Grafik og billede 23 FILTERS Først en Selection med farve, derefter tilføjes Gaussian Blur til Beam strålen. 40% Opacity

22 Grafik og billede 24 EFFEKTER Ved at tilføje en Gradient, kan man nu se at strålen er kraftigere for oven. Samtidig er der tilføjet en smule Outer Glow for at sprede lyset.

23 Grafik og billede 25 LAYERS Oversigt over mine lag. Aktive og ikke aktive lag.

24 Grafik og billede 26 RESULTAT

25 Grafik og billede 27 Her ses det færdige resultat. Hos trykkeriet skal billedet printes med 60LPC. For at udregne hvor mange pixels pr. tomme jeg skal gemme billedet i, bruger jeg formlen her: 60LPC x2,5'' =150LPI x2 =300PPI Alle tallene er nu omregnet til tommer. Billedet er gemt som 300PPI RGB JPG.

26 GRAFISK DESIGN PORTFOLIO DAN KLESSEN BOOSTING BUSINESS H3

27 GrafISK DESIGN 04 INDHOLDSFORTEGNELSE Dokumentation 05 Inspiration 06 Brainstorm 07 Skitser 08 Fonte Farver Fontvalg 10 Fontfarver 11 Farveprøver 12 Farvevalg 13 Varianter 14 I brug 15

28 GrafISK DESIGN 05 DOKUMENTATION Opgaven Opgaven består i at idéudvikle et logo for iværksætterne for virksomheden Find Cup. Virksomheden Find Cup skal have udviklet en app til smartphones, som gør det muligt for brugerne af appen, via GPS og rutevejledning, at finde den nærmeste kaffebar. Dertil er det også muligt at udvælge en bestemt kaffebar ud fra, hvor mange stjerner kaffebaren har. Appen skal på nuværende tidspunkt kun være på dansk, men kan senere videre udvikles til at blive oversat til Svensk og Norsk. Virksomhedens stiftere er to friske fyre med et koncept om at skabe denne application, som skal have meget få indstillingsmuligheder, i den hensigt at bevare brugervenligheden på et højt niveau. Stifterne havde et særligt ønske til logoet. Det skulle ikke ligne en kaffebønne eller evt. en kop. Det skulle se smart ud, og samtidigt vise budskabet omkring virksomheden. Bidrag til opgaven Jeg har hele vejen fra kundemøder, idéudvikling, skitsetegning og til færdige produkt, været 100% inde over opgaven. Kunden har selv haft materialer med, i form af produkter, som de synes var inspirerende. Dette har været meget behjælpeligt i forhold til idéprocessen, da jeg har fået et hint om, hvilken grafisk vej jeg skal gå med designet. Afsender, målgruppe og budskab Afsenderen for dette produkt er virksomheden Find Cup, som er startet af to iværksættere. De grafiske udtryk skal først og fremmest henvende sig til den type personer, som ønsker at finde et sted, hvor der sælges kaffe. Desuden skal app en henvende sig til personer som sætter pris på ordentlig kvalitetskaffe. Målgruppens alder spænder fra år. Jeg kender personligt en del unge i alderen 19-24, som dagligt hopper forbi div. kaffebarer inden eller efter arbejde, men vil dertil sige at det er de færreste under 24 år, som dyrker kaffesmagning. For de under 24-årige er det oftere café-livet snarere end kaffen, der trækker. Brugerne af denne app vil primært være de, som befinder sig i bylivet. Personer som ejendomsmæglere, revisorer, advokater, grafikere, telefonsælgere, butiksansatte og studerende på universitets eller erhvervsuddannelser. Budskabet for virksomhedens app og udtrykket i logoet er at tiltrække den målgruppe, som er interesseret i at udforske de mange kaffebarer, de befinder sig i nærheden af. Der vil stadig være brugere, som oftest vælger at smutte forbi Baresso eller JOE & THE JUICE. Grafiske valg Efter at have brugt den afsatte tid til skitsetegning og brainstorm, skulle logoet tage sin form i det grafiske program Illustrator CS6. Farver: I rentegningsprocessen på computeren var det nemt at skifte mellem forskellige farvevariationer. Jeg har brugt brune nuancer for at tydeliggøre udtrykket, at virksomheden bag logoet har med kaffe at gøre. Dertil er det udelukkende pantone farver, der er brugt, dette er gjort for at sikre, at de trykte materialer får den rigtige farve. Det er et 4 farvet logo, i pantone farver. Logoet har også fået en form, som er nem at arbejde med i forhold til tryk på kuglepenne, klistermærker og applikations ikon. Font: Fonten, der blev valgt til logoet, er rund og blød, den udtrykker i mine øjne noget roligt og behageligt noget seriøst. C et minder mig om donuts. Stifterne har sjovt nok også henvist til kæden Dunkin Donuts, da deres grafik har inspireret dem. Det er vigtigt at promovere sig med noget sjovt for at blive husket. Dertil vil der også blive lavet online reklamer for virksomheden. Disse online reklamer bruger sjove udtryk. Procesbeskrivelse Efter kundemødet blev der afsat 2 timer til brainstorm, samt idéudvikling omkring det kunden fortalte og ønskede. Under mødet fik jeg hurtigt nogle idéer til logoet. Under min brainstorm skrev jeg de ord ned, som faldt mig ind i forhold til virksomhedens koncept. Mine skitser er ikke prangende, men deres funktion var også kun minde mig om de tanker, jeg havde om logoet. Jeg rentegnede derefter nogle af logoerne på computeren. Ved computeren er det hurtigere at klippe og klistre og nemt at skabe en form eller skygge, som for mig kan være svær at vise på skitsen. Under processen har jeg også: Lavet inspirationssøgning på kaffe og kaffebarrer Lavet font prøver. Hvilken virker bedst? Lavet farveprøver, og farve variationer af logoet Taget højde for anvendelsen af logoet Kvalitetsvurdering Når jeg tager udgangspunkt i, at virksomheden indtil nu kun har fået designet et logo, og at app processen kun er ved opstartsfasen, synes jeg, at resultatet er blevet rigtig godt, og jeg ved, at deres grafiske udtryk til fulde vil være noget, man lægger mærke til. Jeg blev personligt sat på noget af en prøve med dette projekt, da jeg fra start selv skulle føre samtalen på mødet. Det var ikke noget formelt møde, mest af alt en hyggesnak med de to fyre om, hvad de gik og tænkte på. Projektet har ikke mødt modgang i form af store grafiske ændringer eller mange korrekturer frem og tilbage. Jeg er blevet skubbet ud i projektet alene, dog altid med min chef på sidelinjen som positiv kritiker. Det har været et rigtig godt forløb, og jeg har fået prøvet kræfter af med hensyn til styringen og koordinationen. Jeg glæder mig til at arbejde videre på deres grafiske linje.

29 GrafISK DESIGN 06 INSPIRATION Her ses inspirations kilderne til projektet. Kunden nævnte selv Dunkin Donuts.

30 GrafISK DESIGN 07 BRAINSTORM Brainstorm på kaffe Appen.

31 GrafISK DESIGN 08 SKITSER Idé stiksering af logoet.

32 GrafISK DESIGN 09 Skiter som er tegnet på skærmen, tegnes som outlinet streger, så man ikke tænker på farver inden man kommer til den del. Formen på logot blev udvalgt på baggrund af dens signalværdi. Den har form som en kop, men ligner ikke på den typiske måde som den til venstre for. Valgte form

33 GrafISK DESIGN 10 FONTVALG Udvalgte fonte Brugte fonte Et udvalg at fonte som kunne passe i logoet. Valget faldt på to typer (set til højre). Den første har et elegant udrtyk med de bløde streger. Den vil passe godt ind, da den kunne forestille fløde, på måden bogstaverne flyder ind i hinanden på. Linje afstanden er skruet helt ned, så de to ord smelter mere sammen. Ordet Cup, er forstørret op, så det passer i bredden. Det danner nu en firkantet form som vil passe godt ind i et rundt eller firkantet logo. Den anden type er mere rund og tydelig i udtrykket. Det er nemt at læse hvad der står. På samme måde er Cup her også forstørret i breddden så de passer under hinanden og igen danner en firkantet form. Fonten her eksistere kun i versalform.

34 GrafISK DESIGN 11 FONTFARVER De to fonttypers farveprøver. Her er udelukkende brugt pantonefarver. Farven er lysbrun og skal signalere fløde på kaffen. Fløde er hvidt, men for ikke at skabe for stor kontrast mellem den brune kaffe og en hvid fløde, vælger jeg en lys brun. Når fløden og kaffen høldes sammen, dannes nemlig et lysere brun tone. PANTONE 7508 C PANTONE 466 C PANTONE 465 C Rhodamine Red C Den lyserrøde farve prøvede jeg, for at bryde den brune bane, den vil også stå godt mod med den mørkebrune. Det vil give en stor farvekontrast. PANTONE 7508 C PANTONE 466 C PANTONE 465 C Rhodamine Red C

35 GrafISK DESIGN 12 FARVEPRØVER PANTONE 7528 C PANTONE 7529 C PANTONE 7530 C PANTONE 7531 C Oversigt over pantonefarverne som blev udvalgt fra pantoneviften. Fra lys sandfarvet til de brune nuancer. De lyse nuancer skal bruges til form af koppen. Den brune til kaffefarven. PANTONE 469 C PANTONE 478 C PANTONE 477 C PANTONE 4695 C PANTONE WG 1 C PANTONE WG 3 C PANTONE WG 5 C PANTONE WG 7 C

36 GrafISK DESIGN 13 FARVEVALG PANTONE 7529 C PANTONE 4695 C Her ses farverne op mod hinanden. Da fontfarven er svær at se alene, blev alle fonte placeret på logoet, og kunden kunne nu udvælge det logo der faldt i deres smag. Dem med gradient, er sammensat af den lyse og den mørke pantone, som giver fonten mere effekt. Effekten er at vise hvordan fløden er blandet ned i kaffen. Logoet er blevet drejet ned for at fjerne den pileffekt som enden kunne ligne. PANTONE 7529 C PANTONE 466 C PANTONE 465 C Gradient Rhodamine Red C PANTONE 7529 C PANTONE 466 C PANTONE 465 C Gradient Rhodamine Red C

37 GrafISK DESIGN 14 ENDELIGE - VARIANTER QR mærke Det valgte logo i dets versioner. App icon Fuldfarve Grayscale Sort hvid

38 GrafISK DESIGN 15 I BRUG Logoet ses her i brug. - App icon - Sticker - Facebook page

39 GRAFISK PRODUKTION OG WORKFLOW PORTFOLIO DAN KLESSEN BOOSTING BUSINESS H3

40 grafisk produktion og workflow 04 INDHOLDSFORTEGNELSE Dokumentation 05 Flowchart 06 Skitser 07 Storyboard 08 Mock up 09 Opret dokument 11 ThemeRoller 12 Håndkodet CSS 13 WATC MORE Botton styling 14 Formular Formular 15 Form Validering 15 Redirect 16 Icon til hjemmeskærm 17 Fullscreen 17 W3 validering 18 Visning 19

41 grafisk produktion og workflow 05 DOKUMENTATION Opgaven Opgaveb består i at designe og udvikle en web-app for Mobildiskotek ijockeys, som jeg, i min fritid, er en stor del af. ijockeys har i forvejen en velfungerende hjemmeside. For at skabe en nem forbindelse mellem vores kunder og deres brug på mobile enheder, var en web-app den rette løsning. Den skal indeholde samme funktioner som vores fulde site. Vi er mange, som ved, hvor besværligt det er at surfe på sin smartphone på et ikke mobiloptimeret site. Dette var også en af grundene til at udvikle denne app. Layout Layoutet tager udgangspunkt i, hvordan vores fulde side ser ud. Det er f.eks. i form at farver og menupunkter. Layoutet bærer også stærkt præg af brugen af jquery Mobile, som leverer elegante layout elementer til webdesigns. Det kan bl.a. være knapper eller formular/søge felter. jquery Mobile er også nem at arbejde med, nemt at få noget til at se godt ud, eller hvis man ønsker menuerne skal swipe eller dreje, når der skiftes side (data-transition). Kodningen af appen er foregået med live-view funktionen slået til, for at Dreamweaver kan vise appens layout, mens der kodes. Modulopbygning Web-appen er opbygget på samme måde som et hvilket som helst andet website. Med body-, div-, og classtags. Almindelig html kodning. Brugervenlighed I en web-app er det helt essentielle udgangspunkt for designet, brugervenlighed. Et site med mange sider og undersider, skal på meget lidt plads, vise alt hvad der tilbydes, og det er en dårlig kombination. Det er for det første ikke til at overskue menupunkterne, og med et pegefingerklik vil man nemt trykke forkert. Mange smartphones i dag har displaystørrelser fra 4-7. men man oplever stadig sider som, på grund af for meget indhold, er svære at navigere rundt på. Indhold Tekstindholdet på mobilsiden er taget fra Mobildiskotek ijockeys fulde side. Jeg har derefter gennemlæst teksten grundigt, og justeret efter nogle af de grundlæggende regler for typografi til skærm samt læsbarhed. Brug skrifter uden fødder (grotesk) Korte tekst afsnit Min 12/17px fontstørrelse Ingen linjer over 60 anslag Jeg har også brugt en lix beregner fra sprogvaskeriet.dk, og tjekket om teksten var svær at læse. Lix beregneren giver dog kun en indikation af, hvordan teksten er at læse. Browserkompatibilitet Html og css koderne er blevet valideret på w3 schools, hvorefter tegn og tags er rettet. Dog skal jeg se bort fra nogle af de errors som valideringen giver, da html koden er kodet som jquery Mobile, og f.eks. type= datetime er ikke tilgængelig i Safari og Firefox. Appen er testet på følgende platforme: iphone 4s Safari iphone 4s - Chrome ipad 3 Safari Xperia mini - webbrowser. Kvalitetsvurdering eg har ikke arbejdet særlig meget med produktion af web apps før denne opgave, men jeg synes, at resultatet er blevet godt. Den fungerer, den er overskuelig, og den har ikke for mange fancy datatransitions effekter, hvilket kan gøre brugeroplevelsen langsommere. Appen har en redirect funktion, som gør man bliver ledt til mobilsiden, hvis skærmbredden er mindre end 420px. Jeg har desværre ikke fået integreret en go to main site knap, som gør det muligt at gå til den fulde side fra mobilen. Det ville kunne forbedre brugervenligheden for de, som ikke ønsker at surfe på mobilsiden.

42 grafisk produktion og workflow 06 OPSTART - FLOWCHART Skitsering af flowchart. Her er bestemt hvilke sider siden skal indeholde.

43 grafisk produktion og workflow 07 SKITSER Skitsering af designet, med information om elementer og mulige farver i designet. Der er tage udgangspunkt i index siden.

44 grafisk produktion og workflow 08 STORYBOARD Storyboard rentegnet på skærm. INDEX INDEX INDEX PRISERINDEX PRISER PRISER BILLEDER PRISER BILLEDER BILLEDER KONTAKT BILLEDER KONTAKT KO FORSIDE PRISER BILLEDER KONTAKT FORSIDE PRISER BILLEDER KONTAKTFORSIDE PRISER BILLEDER KONTAKT FORSIDE FORSIDE PRISER PRISER BILLEDER BILLEDER KONTAKT KONTAKT FORSIDE PRISER BILLEDER KONTAKTFORSIDE PRISER BILLEDER KONTAKT FORSIDE FORSIDE PRISER PRISER BILLEDER BILLEDER KONTAKT KONTAKT FORSIDE PRISER BILLEDER KONTAKTFORSIDE PRISER BILLEDER KONTAKT FORSIDE FORSIDE PRISER PRISER BILLEDER BILLEDER KONTAKT KONTAKT FORSIDE PRISER BILLEDER KONTA Velkommen til vores mobile version adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velkommen til vores mobile version adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velkommen til vores mobile version PriserVelkommen til vores mobile version Priser Lorem Lorem ipsum ipsum dolor sit dolor amet, sit amet, consecte- consecte- Lorem ipsum dolor sit amet, consecte- adipisicing elit, sed do eiusmod tur adipisicing tur adipisicing elit, sed elit, do sed eiusmod. do eiusmod tur adipisicing elit, sed do eiusmod. tempor incididunt ut labore et dolore tempor incididunt ut labore et dolore magna aliqua. Transport magna aliqua. Transport Lorem ipsum dolor sit amet, consecte- adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do eiusmod. Fotografering adipisicing elit, sed do eiusmod. Timer adipisicing elit, sed do eiusmod. Fotografering adipisicing elit, sed do eiusmod. Timer adipisicing elit, sed do eiusmod. Priser Billeder Priser Billeder adipisicing elit, sed do eiusmod. tur adipisicing tur adipisicing elit. elit, sed do eiusmod. tur adipisicing Lorem Lorem ipsum ipsum dolor dolor sit amet, sit amet, consecte- consecte- Lorem ipsum dolor sit amet, consecte- elit. Transport adipisicing elit, sed do eiusmod. Fotografering adipisicing elit, sed do eiusmod. Timer adipisicing elit, sed do eiusmod. Transport adipisicing elit, sed do eiusmod. Fotografering adipisicing elit, sed do eiusmod. Timer adipisicing elit, sed do eiusmod. Billeder Kontakt Billeder Kontakt Lorem Lorem ipsum ipsum dolor sit dolor amet, sit amet, consecte- consecte- Lorem ipsum dolor sit amet, consecte adipisicing elit. tur adipisicing tur adipisicing elit, sed elit. do eiusmod tur adipisicing elit, sed do eiusmod tempor incididunt ut labore. tempor incididunt ut labore. Navn: Telefon: Emne: Dato: Besked: Indsend Booking Udlejning Ryd Navn: Telefon: Emne: Dato: Besked: Indsend Booking Udlejning Ryd INFO INFO INFO PRISERINFO PRISER PRISER BILLEDER PRISER BILLEDER BILLEDER KONTAKT BILLEDER KONTAKT KO FORSIDE PRISER BILLEDER KONTAKT FORSIDE PRISER BILLEDER KONTAKTFORSIDE PRISER BILLEDER KONTAKT FORSIDE FORSIDE PRISER PRISER BILLEDER BILLEDER KONTAKT KONTAKT FORSIDE PRISER BILLEDER KONTAKTFORSIDE PRISER BILLEDER KONTAKT FORSIDE FORSIDE PRISER PRISER BILLEDER BILLEDER KONTAKT KONTAKT FORSIDE PRISER BILLEDER KONTAKTFORSIDE PRISER BILLEDER KONTAKT FORSIDE FORSIDE PRISER PRISER BILLEDER BILLEDER KONTAKT KONTAKT FORSIDE PRISER BILLEDER KONTA Info Udlejning Info Udlejning Info Udlejning PriserInfo adipisicing Udlejning elit, sed do eiusmod. Priser adipisicing elit, sed do eiusmod. Priser Billeder Priser Billeder adipisicing elit, sed do eiusmod. tur adipisicing tur adipisicing elit. elit, sed do eiusmod. tur adipisicing Lorem Lorem ipsum ipsum dolor dolor sit amet, sit amet, consecte- consecte- Lorem ipsum dolor sit amet, consecte- elit. Billeder Kontakt Billeder Kontakt adipisicing elit. tur adipisicing tur adipisicing elit, sed elit. do eiusmod tur adipisicing elit, sed do Lorem Lorem ipsum ipsum dolor sit dolor amet, sit amet, consecte- consecte- Lorem ipsum dolor sit amet, consecte eiusmod

45 grafisk produktion og workflow 09 MOCK UP Det blev besluttet at vi ville undlade knapper i bunden af skærmen. (facebook, , crew). INDEX INDEX PRISER PRISER INDEX BILLEDER PRISER BILLEDER Informationen på siden ville blive sværere at overskue, da bunden ville fylde for meget plads. LOG FORSIDE PRISER BILLEDER KONTAKT FORSID FORSIDE PRISER BILLEDER KONTAKT FORSIDE PRISER BILLEDER KONTAKT Velkommen til vores mobile version Velkommen til vores mobile version adipisicing elit, sed do eiusmod tur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consecte- tempor incididunt ut labore et dolore tempor incididunt ut labore et dolore magna aliqua. magna aliqua. FORSIDE PRISER BILLEDER KONTAKT FORSIDE Velkommen PRISER BILLEDER til vores mobile KONTAKT version Priser Priser adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consecte- adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do magna aliqua. eiusmod. Transport Transport adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do Lorem ipsum dolor sit amet, consecte- eiusmod. Fotografering Fotografering adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do Lorem ipsum dolor sit amet, consecte- eiusmod. Timer Timer adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do Lorem ipsum dolor sit amet, consecte- eiusmod. FORSIDE Billeder PRISER BILLEDER KONTAKT FORSIDE Priser PRI Lorem Billeder tur adip Lorem ipsum d adipisicing elit. tur adipisicing Transp Fotogr Lorem tur adip Timer Lorem tur adip PRISER PRISER BILLEDER BILLEDER KONTAKT KONTAKT INFO PRISER INFO INFO PRISER PRISER BILLEDER BILLEDER LOG BILLEDER KONTAKT FORSIDE PRISER BILLEDER FORSIDE KONTAKT PRISER BILLEDER KONTAKT FORSIDE PRISER BILLEDER FORSIDE KONTAKT PRISER BILLEDER KONTAKT FORSIDE PRISER BILLEDER FORSIDE KONTAKT PRISER BILLEDER KONTAKT FORSIDE PRISER BILLEDER KONTAKT FORSID s mobile version it amet, consected do eiusmod t labore et dolore Priser Priser adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consecte- Transport Transport adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consecte- Fotografering Fotografering adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consecte- Timer Timer adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do Lorem ipsum dolor sit amet, consecte- eiusmod. Billeder Billeder adipisicing elit. tur adipisicing elit. Lorem ipsum FORSIDE dolor sit PRISER amet, consecte- BILLEDER KONTAKT FORSIDE PRISER BILLEDER KONTAKT Info Info Udlejning Udlejning Oversigt over vores udlejningsudstyr Oversigt over vores udlejningsudstyr Værd at vide Værd at vide Inden du booker eller lejer udstyr Inden du booker eller lejer udstyr Crew Crew Indblik i personalets arbejde og interesser Indblik i personalets arbejde og interesser Dan Klessen, 21 år Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Dan Klessen, 21 år Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Kontakt Kontakt FORSIDE PRISER BILLEDER KONTAKT FORSIDE Info Lorem ipsum dolor sit amet, consecte- PRISER BILLEDER KONTAKT adipisicing elit, sed do eiusmod tur adipisicing elit, sed do eiusmod Udlejning tempor incididunt ut labore. tempor incididunt Priser ut labore. Priser Oversigt over vores udlejningsudstyr adipisicing elit, sed do eiusmod. tur adipisicing Værd elit, at vide sed do eiusmod. Lorem ipsum dolor sit amet, consecte- Booking Booking Udlejning Udlejning Inden du booker eller lejer udstyr Navn: Navn: Transport Transport Crew adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consecte- Telefon: Telefon: Indblik i personalets arbejde og interesser Emne: Emne: Dan Klessen, 21 år Dato: Dato: Fotografering Fotografering Lorem ipsum dolor sit Besked: adipisicing elit, sed do eiusmod. tur adipisicing ing elit, elit, sed sed do eiusmod do eiusmod. Lorem ipsum amet, dolor consectetur sit amet, adipisic- Besked: consecte- tempor incididunt ut Indsend Ryd Indsend Ryd labore et dolore magna Timer Timer Lorem ipsum dolor sit amet, consecte- adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do eiusmod. FORSIDE Billeder PRISER BILLEDER KONTAKT FORSIDE Priser PRI Lorem Billeder tur adip Lorem ipsum d adipisicing elit. tur adipisicing Transp Fotogr Lorem tur adip Timer Lorem tur adip PRISER PRISER BILLEDER BILLEDER KONTAKT KONTAKT

46 grafisk produktion og workflow 10 Mock up i farver. INDEX INDEX PRISER PRISER INDEX BILLEDER PRISER BILLEDER FORSIDE PRISER BILLEDER KONTAKT FORSIDE FORSIDE PRISER BILLEDER KONTAKT FORSIDE PRISER BILLEDER KONTAKT Velkommen til vores mobile version Velkommen til vores mobile version adipisicing elit, sed do eiusmod tur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consecte- tempor incididunt ut labore et dolore tempor incididunt ut labore et dolore magna aliqua. magna aliqua. FORSIDE PRISER BILLEDER KONTAKT FORSIDE Velkommen PRISER BILLEDER til vores KONTAKT mobile version Priser Priser adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consecte- adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do magna aliqua. eiusmod. Transport Transport adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do Lorem ipsum dolor sit amet, consecte- eiusmod. Fotografering Fotografering adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do Lorem ipsum dolor sit amet, consecte- eiusmod. Timer Timer adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do Lorem ipsum dolor sit amet, consecte- eiusmod. Lorem ipsu tur adipisic FORSIDE PRISER BILLEDER KONTAKT FORSIDE Priser PRISER Lorem ips Billeder Billeder tur adipisi Lorem ipsum dolo adipisicing elit. tur adipisicing Transport eli Fotografe Lorem ips tur adipisi Timer Lorem ips tur adipisi PRISER PRISER BILLEDER BILLEDER KONTAKT KONTAKT INFO PRISER INFO INFO PRISER PRISER BILLEDER BILLEDER LEDER KONTAKT FORSIDE PRISER BILLEDER FORSIDE KONTAKT PRISER BILLEDER KONTAKT FORSIDE PRISER BILLEDER FORSIDE KONTAKT PRISER BILLEDER KONTAKT FORSIDE PRISER BILLEDER FORSIDE KONTAKT PRISER BILLEDER KONTAKT FORSIDE PRISER BILLEDER KONTAKT FORSIDE obile version met, consectedo eiusmod bore et dolore Priser Priser adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consecte- Transport Transport adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consecte- Fotografering Fotografering adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consecte- Timer Timer adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do Lorem ipsum dolor sit amet, consecte- eiusmod. Billeder Billeder adipisicing elit. tur adipisicing elit. Lorem ipsum FORSIDE dolor sit PRISER amet, consecte- BILLEDER KONTAKT FORSIDE PRISER BILLEDER KONTAKT Info Info Udlejning Udlejning Oversigt over vores udlejningsudstyr Oversigt over vores udlejningsudstyr Værd at vide Værd at vide Inden du booker eller lejer udstyr Inden du booker eller lejer udstyr Crew Crew Indblik i personalets arbejde og interesser Indblik i personalets arbejde og interesser Dan Klessen, 21 år Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Dan Klessen, 21 år Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Kontakt Kontakt FORSIDE PRISER BILLEDER KONTAKT FORSIDE Info Lorem ipsum dolor sit amet, consecte- PRISER BILLEDER KONTAKT adipisicing elit, sed do eiusmod tur adipisicing elit, sed do eiusmod Udlejning tempor incididunt ut labore. tempor incididunt Priser ut labore. Priser Oversigt over vores udlejningsudstyr adipisicing elit, sed do eiusmod. tur adipisicing Værd elit, at vide sed do eiusmod. Lorem ipsum dolor sit amet, consecte- Booking Booking Udlejning Udlejning Inden du booker eller lejer udstyr Navn: Navn: Transport Transport Crew adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do eiusmod. Lorem ipsum Indblik dolor i personalets sit amet, arbejde consecte- og interesser Telefon: Telefon: Emne: Emne: Dan Klessen, 21 år Dato: Dato: Fotografering Fotografering Lorem ipsum dolor sit adipisicing elit, sed do eiusmod. tur adipisicing Lorem ipsum amet, dolor consectetur sit amet, adipisicing elit, consecte- Besked: Besked: elit, sed sed do eiusmod do eiusmod. tempor incididunt ut Indsend Ryd Indsend Ryd labore et dolore magna Timer Timer Lorem ipsum dolor sit amet, consecte- adipisicing elit, sed do eiusmod. tur adipisicing elit, sed do eiusmod. FORSIDE Billeder PRISER BILLEDER KONTAKT FORSIDE Priser PRISER Lorem ips Billeder tur adipisi Lorem ipsum dolo adipisicing elit. tur adipisicing Transport eli Fotografe Lorem ips tur adipisi Timer Lorem ips tur adipisi PRISER PRISER BILLEDER BILLEDER KONTAKT KONTAKT

47 grafisk produktion og workflow 11 OPRET DOKUMENT Dokumentet oprettes som HTML5. HTML5 er den eneste HTML form, som giver os mulighed for af lave web- og mobilapps. HTML5 er typisk avanceret javascript (F.eks. jquery) og CSS3.

48 grafisk produktion og workflow 12 THEMEROLLER ThemeRoller er et værktøj til design af jquery mobile frameworket. ThemeRoller gør det nemt at trække og slippe farver samt downloade et brugerdefineret tema. ThemeRoller anvender CSS3 egenskaber som for eksempel tekst-skygge, box-skygge og gradienter. Her ses også hvordan jeg implementere temaet i HTML'ens head sektion.

49 grafisk produktion og workflow 13 HÅNDKODET CSS 1. Håndkodet CSS til styling af fonte, header, menuer og footer 2. 3.

50 grafisk produktion og workflow 14 BOTTON STYLING Knap uden styling Knap med icon Dokumentet oprettes som HTML5. HTML5 er den eneste HTML form, som giver os mulighed for af lave web- og mobilapps. HTML5 er typisk avanceret javascript (F.eks. jquery) og CSS3. Knap float right Stylet knap uden tekst

51 grafisk produktion og workflow 15 FORMULAR Implementering af formular. Jeg har validering på feltet. På dato feltet har jeg valgt at bruge en ny HTML5 kode. Den frembringer en kalender med tidspunkter, når der klikkes. (type= datetime )

52 grafisk produktion og workflow 16 REDIRECT Efter formularen er udfyldt og afsendt, redirecter siden til denne takkeside.

53 grafisk produktion og workflow 17 ICON OG FULLSCREEN Fullscreen virker kun når siden er tilføjet til hjemmeskærm. Koden for fullscreen bevirker at url'en øverst på iphone skærmen, fjernes. Fullscreen 114x114px

54 grafisk produktion og workflow 18 VALIDERING Her ses et udsnit for validerings processen. Validering af webappen er gjort på w3schools.com. Validatoren opfatter desværre mine kommentar tags som fejl i koden. Dem ses der bort fra. Line 78 før Line 81 før Line 78 efter Line 81 efter

55 grafisk produktion og workflow 19 WEBAPP PÅ IPHONE Her ses visningen af webappen på iphone. Forside Priser Billeder

56 grafisk produktion og workflow 20 Infosiden åbnes ved iconet øverst til højre. På infosiden folder den valgte information sig ud, nedad. Kontakt Info Info

57 TYPOGRAFI OG OMBRYDNING PORTFOLIO DAN KLESSEN BOOSTING BUSINESS H3

58 typografi og ombrydning 04 INDHOLDSFORTEGNELSE Dokumentation 05 Opstart 06 Levende kolumnetitel 09 store Alt til den fest Sumquia consequos destias perferi doluptatiis es voles vollit a volupta dolore veles aut a voloreri voluptatur aut reruptas ea plit pro optatur, odi blacepe ribus, sus et es quodicient ab in rate vellor magnatis ullendae sunt, ullatem aut odit quis essent qui re voluptat. Skriftvalg 10 Styles Brødtekst 11 Mellemrubrik 12 Next style 14 Uncial 15 Bullets 16 Object styles 17 Figursats 18 Forankrede objekter 19 Faste mellemrum 20 Spatiering 21 Indholdsfortegnelse 22 En bartender serverer drikke ofte med alkohol til kunderne i en bar. Bartenderen arbejder på steder som barer, pubber, restauranter og diskoteker, besidder både jobbet som udskænker og kunderelation, og arbejder typisk med cocktails, vin og øl. Diorem voluptae et am rem harum quos eaquassit voloreius ni cus doluptatur abores dem aute excearibus nonem reroviducia ipsam ipissunt vendelit fugia nonseque exceruntio. Nam nobit ut que vel maion consequis aliciet et odignim porporum, custi sitas autassi vendae cone consequam asperfe ruptatem. Et aut fugia volorer spelent quiae re por repe id ut ipsum et accus ma es quisquibus, temporum quae labo. Daectasi odictati omnihitae perione volupie ntiaectem veriatia doluptur quaecusapis eossitas simodit iusanimaxim hil iscimus con receperis a num res rendign imilles eos saperemperum eum aspelli tasped quibusant. 5 VELKOMSTDRINKS DER GØR DIG TØRSTIG!... VIDSTE DU? Hvis man opbevare sin suppersirup i fryseren, kan det nemt varmes op igen 8 Alt til den store fest Fake Champagne Hyldeblomst Blomme/æble Alt til den store fest Daiquiri 9 i bowle cocktail cocktail Sumquia consequos destias perferi doluptatiis es voles vollit a volupta dolore veles aut a voloreri voluptatur aut reruptas ea plit pro optatur, odi blacepe ribus, sus et es quodicient ab in rate vellor magnatis ullendae sunt, ullatem aut odit quis essentem qui re voluptat. Ingredienser 1,5 L - Pærecider 1 Flaske - Tør hvidvin Frosne vindruer Appelsiner fredsoe-teltudlejning.dk Ingredienser 5 cl - Gin 6 styk - Mynteblade 1 tsk - Sukker 1.5 cl - Hyldeblomstsaft 1.5 cl - Juice, Lemon Ingredienser 20 ml - Gin 30 ml - Vodka 5 ml - Sukker 10 ml - Blommesaft 10 ml - Juice, Lime 10 ml - Æblemost... Ingredienser 5 cl - Rom, hvid 2 cl - Kildevand 8 cl - Knust is 2 tsk - Sukker fredsoe-teltudlejning.dk 3 cl - Juice, Lime Brandbil Ingredienser 6 cl - Jägermeister 1.5 cl - Rødsodavand Isterninger Flattener 24 Outline 25 Opslag 26 Fremgangsmåde Tag den kolde cider og bland sammen med hvidvin i en bowle. Herefter tilsættes de frosne vindruer. Er drinken for sur tilsættes der ekstra pærecider. Pynt med abelsin skiver. Fremgangsmåde Sukkersirup: Opkog sukker i en Fremgangsmåde Sukkersirup: Opkog sukker i en Fremgangsmåde Sukkersirup: Opkog sukker i en Fremgangsmåde Fyld et glas med isterninger og smule vand - ca. lige store dele. smule vand - ca. lige store dele. smule vand - ca. lige store dele. tilføj rød sodavand. Hæld til sidst køl siruppen ned, mens du rører køl siruppen ned, mens du rører køl siruppen ned, mens du rører Jägermeister over. Det ser flot ud jævnligt. jævnligt. jævnligt. i farverne mens Jägermeisteren Du skal bruge 5 ml. sukkerlage til bundfalder. Brug en morter, eller gaffel til at hver drink, eller efter behov. Alle ingredienserne shakes med is, nulre mynteblade, lemonjuice og eller blandes grundigt. Du kan også vælge at shake ingredienserne ca. 1 ml. sukkersirup sammen. Shake det hele sammen med is. i stedet. Hæld væsken igennem en si eller Derefter knuses en potion isterninger Tilføj resterende ingredienser og et klæde og servér i et nedkølet i et rent klæde, for at skåne din For at gøre denne drink mere fe- shake det hele sammen med is. cocktail/martiniglas. borplade og holde isterningerne minin og sofistikeret, kan du vælge Hæld væsken igennem en strainer/ rene. at servere den shakede drink op si eller et klæde og servér i et nedkølet Pynt med et rosenblad, eller lad en cocktailglas. cocktail/martiniglas. lille lyserød blomst af dit valg flyder Fyld det knuste is op i cocktailglas, rundt på overfladen. hæld den shakede drink over, fugt Pynt med mynteblad eller en lille glassets kant med limesaft og pynt hyldeblomst-stilk. med en limeskive. 6 velkomstdrinks velkomstdrinks 7

59 typografi og ombrydning 05 DOKUMENTATION Opgaven Opgaven består i, at udvikle og designe et gratismagasin på 16 sider. Magasinet er produceret for Fredsø Teltudlejning. Virksomheden beskæftiger sig med at udleje og opsætte telte med pynt og borddækning til bl.a. bryllupper, firmafester og lign. arrangementer. Magasinet bliver produceret med penge fra annoncekroner. Dermed har Fredsø Teltudlejning ikke nogen omkostninger med deres magasin. Min opgave er derfor, at magasinet skal være yderst attraktivt for annoncørerne. Bidrag til opgaven Jeg har stået for størstedelen af billedsøgningen til magasinet, samt annonceopsætning for 3 af annoncørerne i magasinet. Jeg har også stået for en stor del af tekstforfatningen, hvor virksomheden (Fredsø Teltudlejning) senere har haft det i korrektur. Min chef, Trine, har under produktionen været med på sidelinjen med konstruktiv kritik til det grafiske udtryk og opslagsopsætning. Typografiske valg Jeg har brugt fonten ITC Avant Garde 11/14 til brødtekst. ITC Avabtgarde er en grotesk skrift udviklet til både skærm og tryk. Den er let at læse, hvilket også er vigtigt i et gratismagasin, som folk ofte skimmer. Brødtekstens skydning har jeg valgt skal være min. 3pt større end skriftstørrelsen, da det øger læsbarheden. En 11pt ITC Avant Garde er lidt større brødtekst end normalt, men det begrunder jeg også med læsbarheden. Magasinet indeholder ikke meget tekst, derfor skal teksten være overskuelig for læseren. Kontraster For at få spil i magasinet, og lade teksten tale sammen med billederne, har jeg på mellemrubrikker, citater og uncialer valgt at bruge farver og nogle steder andre fonte. På hvert opslag har jeg valgt, at bruge en stor skrift til at fange læsernes opmærksomhed. Til brødtekst og mellemrubrikker er der kun brugt to skriftfamilier, da det nedsætter læsbarheden, hvis man bruger flere. Produktionsmetoder Jeg har arbejdet efter alle de typografiske regler, jeg kender. Margins, pagina og kolumnetitel er oprettet på mastersiden. Det gælder bl.a. grundlinienette, som brødteksten er låst til. Grundlinienettet starter 11pt under top margin. Mellemrubrikkernes luft over og under er udregnet efter brødtekstens skydning og mellemrubrikkens skydning. Mellemrubrikker, som står i toppen af en spalte, har sin egen Paragraph Style med baseline shift på +2pt. Jeg har benyttet mig af Thin space og Hair space til ombrydning ved parenteser og ved spørgsmåls- eller udråbstegn. Mellem numre har jeg brugt En space for at få det rette afstand mellem tallene. Jeg har brugt knibning de steder, hvor et afsnit ender i toppen af en spalte med en horeunge og de steder, hvor et afsnit begynder i bunden af en spalte og vil danne en fransk horeunge. Ved brødteksten og mellemrubrikkerne har jeg anvendt next Style, for at gøre mit ombrydningsarbejde lettere. For hvert linieskift, finder InDesign selv mine mellemrubrikker, dog skal jeg selv tjekke de steder, hvor der er mellemrubrikker med to linier eller mellemrubrikken står øverst. Billederne og farverne er CMYK og PANTONE baseret. Jeg har til sidst brugt Preflight, for at tjekke om farver og billedopløsning er optimale for tryk. Jeg har også indstillet Preflight til at se efter Overset text. Andet Inden produktionen har jeg samlet grafisk inspiration fra diverse magasiner. Et godt valg var også ikke at se efter inspiration i blade som indeholdte noget fra samme branche. Jeg har hentet opskrifter på velkomstdrinks og indkøbt enkelte billeder hos diverse stockphoto udbydere. Der mangler dog stadig godkendelse af enkelte billeder (med vandmærke). Kvalitetsvurdering Designet er baseret på at vise artiklerne opslagsvis og dermed kunne arbejde med hvert opslag for sig. Dertil var der mulighed for, at lege med både overskrifter og baggrundsbilleder for at skabe en blandet struktur i magasinet. Det har også gjort magasinet mere spændende i layoutet. Der sker noget nyt på hvert opslag. Magasinet mangler kun billedgodkendelse og er derefter klar til tryk. Resultatet er blevet et spændende og iøjnefaldende magasin.

60 typografi og ombrydning 06 OPSTART I InDesign oprettes 16 siders A4 dokument. Facing pages og 3 mm. bleed til beskæring. Margin i bunden af spalten måles og justeret så, den stopper på en linje.

61 typografi og ombrydning 07 Her indstilles InDesign med dansk ordbog, danske citationstegn og highligt ved knibning/spacering og store mellemrum. Baseline Grid start af måles så brødtektens x- højde flugter med top margin. Dette gøres for at teksten holder register og står på linje over for hinanden.

62 typografi og ombrydning 08 Her indstilles Paragraph Styles for mastersidens pagina. Pagina i både højre og venstre side.

63 typografi og ombrydning 09 LEVENDE KOLUMNETITEL Her er der anvendt levende kolumnetitel/running Header. Den er også oprettet på mastersiden, så den løber på alle siderne.

64 typografi og ombrydning 10 Versal Overlængde SKRIFTVALG X-Højde Her ses en oversigt over de anvendte fonte. Brødteksten er en grotesk ITC Avant Garde Gothic. Grundlinie Denne font har mange varianter, hvilket gør den meget anvendelig til typografisk opsætning. Nederst ses fonte som er brugt til overskrifter, citater og infobokse. Stamme Underlængde Code Bold: Code Light: Dekar Bold: Dekar Light: ITC Bookman Bold: Comenius Antiqua Bold: Circula Medium: Aachen Bold:

65 typografi og ombrydning 11 STYLES - BRØDTEKST Oprettelse af Paragraph Styles til brødtekst.

66 typografi og ombrydning 12 MELLEMRUBRIK Mellemrubrik 1 linje Mellemrubrik 1 linje Udregning af mellemrubrik 1 linje Brødtekstskydning x2, minus mellemrubrikkens skydning. 13pt x2 = 26-14pt = 12pt 10pt luft over 2pt luft under 3,528mm 0,706mm Udregning af mellemrubrik 2 linje Brødtekstskydning x3, minus 2x mellemrubrikkens skydning. 13pt x3 = 26-28pt = 11pt 9pt luft over 3,175mm 2pt luft under 0,706mm Mellemrubrik 2 linjer Mellemrubrik 2 linjer

67 typografi og ombrydning 13 Mellemrubrik øverst i spalte Oprettelse af Paragraph styles til mellemrubrik øverst i en spalte. Til undtagelser hvor mellemrubrikken ender i toppen. Mellemrubrik alm. 1 linje Mellemrubrik justeret øverst

68 typografi og ombrydning 14 NEXT STYLE Før Next style Efter Next style Next style er anvendt på brødteksten sammen med mellemrubrikken (1 linjes mellemrubrik) Next style ombryder automatisk teksten, men kun efter hvert linjeskift.

69 typografi og ombrydning 15 UNCIAL Oprettelse af Character Style til Uncial. Denne Uncial går over 3 linjer.

70 typografi og ombrydning 16 BULLETS Paragraph Style for Punktopstilling.

71 typografi og ombrydning 17 OBJECT STYLES Object Style til infoboxe med Next Style. Ideen med at oprette Object Styles er at du kan style eks. prisskilte til et katalog og derefter placere dem og vælge style. På samme måde som man bruger Paragraph Styles Før Object style Efter Object style

72 typografi og ombrydning 18 FIGURSATS Figursats på billede. Billedet er fritlagt i PhotoShop med gemt Path. (JPG) Billedet placeres i InDesign hvorefter jeg henter Pathen via Object>Clipping Path>Vælger gemte Path. Ved at gemme billedet som JPG med Path, undgår man at InDesign kører langsommere, fremfor at have placeret en PSD-fil som fylder 3 gange så meget. Figursats på tekstbox (Text Wrap).

73 typografi og ombrydning 19 FORANKREDE OBJEKTER Her ses et forankret billede. Ved at forankre et billede eller andet grafik, er man altid sikker på at grafikken følger den tekst, overskrift eller mellemrubrik den er linket til. Dvs. skulle der komme yderligere tekst til magasinet som får det hele til at skubbe sig, vil objektet følge med videre.

74 typografi og ombrydning 20 FASTE MELLEMRUM I magasinet er også benyttet faste mellemrum. Det giver en bedre ombrydning af teksten og forbedre læsbarhed. Hair space - Hårfint mellemrum Er en fireogtyvendedel så bred som et langt mellemrum. Thin space - Lille mellemrum Er en ottendedel så bred som et langt mellemrum. EM-Space - Geviert En geviert har altid samme bredde som den anvendte fonts punkt størrelse. En-Space - Halveviert En geviert er altid halvt så bred som den anvendte fonts punkt størrelse. Nonbreaking space Har samme bredde som et alm. mellemrum, men linjen bliver ikke delt ved mellemrumstegnet

75 typografi og ombrydning 21 SPATIERING Før spatiering Før spatiering Enkelte steder i magasinet opstår orddelinger. For at undgå for mange orddelinger i brødteksten, kan knibning og spatiering bruges. Blødt linjeskift er også en mulighed visse steder. Efter spatiering Efter spatiering Spatiering

76 typografi og ombrydning 22 INDHOLDSFORTEGNELSE Her er ikke valgt nogen titel. da den er lavet for sig selv. 2. Der er ikke oprettet en Paragraph style til titlen her. Der er oprettet en Indholdsfortegnelse/Table of Contents. Den er basseret på at finde overskrifter og Basic Paragraph. Nogle af overskrifterne er nemlig lavet uden Paragraph Style Her tilføjes hvilke styles indholdsfortegnelsen skal bruge. 4. Indholdsfortegnelsen styles med min Paragraph style (Indhold1) som bruger Next style (Indhold2) 5. Her er skrvet hvad der skal stå inden sidetallet.

77 typografi og ombrydning 23 Før formatering Next style Her ses indholdsfortegnelsens forløb. Next style Efter formatering

78 typografi og ombrydning 24 FLATTENER Flattener tilfæjet For at undgå problemer med Transparency i dokupemtet, som kan være forårsaget af InDesign effekter som: - Drop shadow - Blending mode - Opacity - Feather eller vectorgrafik kombineret med rasteriseret/pixelbaseret grafik, lægges en Flattener på dokumentet. Flatteneren skære delene ud, så der eks. ikke ligger kasser rundt om objekter med Drop Shadow. Flatteneren skal fremskaffes fra det aktuelle tryksted. Man kan også undgå problemet, ved at organisere sin Layer struktur, med tekst på det ene, grafik det andet, og billeder på det tredje.

79 typografi og ombrydning 25 Tekst normal Her er teksten outlinet. Ved at outline teksterne, undgår jeg Missing Fonts efter eksportering af printklar PDF. Hvis dokumentet har mange forskellige fonte, er det en god ide at outline de meste specielle. Tekst outlinet

80 typografi og ombrydning 26 Bagsiden - Forside 2-3 OPSLAG ANNONCE 183x256 GRATIS MAGASIN Udkommer 4 gange årligt maj Indhold fredsoe-teltudlejning.dk rubs maximus illam entias dolendae fredsoe-teltudlejning.dk Historien Side 4-5 Hoppeborgen Side 12 Nam, quae platem. Nem ipictur atias aut enima audanis quasitiberci dolessit eicilit emperum fugitaecus audaepernate pliquis exceati venis reped ut ad quis dipic te volupta volenimuscia int maios dolendus quas rerfernatus et volori a di dolupta temquate etum volestet re omnitem accat odios ducilibus expero conecul luptas magniminim ligenimodita volupta spidem. Ehentorest unturem iumquam, occae de exceatest, idelend eliaere rferciusdant quas audam nossi corestem aut omnihit volecer spicips aeperunt.... LÆS OM: Drømmebryllup i romantisk indrettet telt med lysekrone, runde borde og grønne planter 5 VELKOMSTDRINKS DER GØR DIG TØRSTIG! Udgiver Fredsø Teltudlejning -Navn- -Adresse- -Post nr- -By- Velkomstdrinks Side 6-7 Alt til den store fest Side 8-11 Redaktion Boosting Business Vestergade 6 1. sal th Hobro kontakt@boostingbusiness.dk Telefon Forestil dig lige Side 13 Tommelfingerregler Side Medieinformation Oplag: stk Hustandsomdeling: Fredsø, Hanstholm, Frøstrup, Vesløs, Snedsted, Bedsted Thy, Hurup Thy, Vestervig, Thyholm. 1. oplag vinter 2013/2014. Occus, quo blam il ium ut quis iuntur maximus que enda core vent odi dolore nobis dolentios dolupta tiaepudae cus ea dis expedi berum imus cus dolo blabore cestia serchit modio ommolora nos doluptatur sus, natesciet litio. Ximporem nescim corem aliquaspidis dipsum fugiame turios asinime ndisinvendae dolorru mendiandus dolluptasim eventemped et audae parchit iorehendunt andit haruptat et molupid evenimaion rate eos re, que. Que con eum et porum faccabo reicab ipsam ut doluptia voluptis aspit, sim custia sim samus si ditatio officab oribus volora volores duntiis mo coreremquis issed excea exceaquo idunt a quibea nullabo. Consedicto blatur, inus eosae dem intiorrum qui ut. Facieni apererf erferferum Dolupid modi dolore Pelita sam event. Fredsø Teltudlejning Hejlskovsving Nykøbing M Telefon : LÆS OM: Alt til den store fest Hoppeborgen fredsoe-teltudlejning.dk 2 Indhold fredsoe-teltudlejning.dk n bombe landede på bladkiosk-ernes hylder i USA sidst i E1963. Fra forsiden af magasinet Esquires decemberudgave skulede sværvægtsbokseren Sonny Liston ud på de julegaveshoppende amerikanere. Voles vollit a volupta dolore veles aut a voloreri voluptatur aut reruptas ea plit pro optatur, odi blacepe ribus, sus et es quodicient ab in rate vellor magnatis ullendae sunt, ullatem aut odit quis essentem qui re voluptat. Tet de ex et in res perum ad exerspe rchillant poritae sincta quid maximpost omnimol uptaeptur? Udae nihicil ignamus Iqui officid evel idi nectatur rehendi pitias voluptium quias ratiationse volorib usdandae volumet reptia coruntorem fugita as int volorest, nobis secatem es sit et ea et vidunt fuga. Am rehende ndipictur? Tiatemquos et mosapedit enimagnieni aut vent quam quate volescias prorerum quam eserferspiet harit ad mo is aut quae omnihil ibuscitassit utet, odia commolorem quibusc iaecta quo dolupta volorio rrovid ut voluptiatqui blaceatiatur sa inus est, ute ped maximolorio doluptatet, con consecusciis necto tem. Omniment fugiatem Expelloris autem volorum in core odit et prem inum harum quam, tem sam qui a dignam, eum quibus atus aut ut occum faccus dolore idel illitio. Volut quo te non quo te. quo beritib. RING OG FÅ EN SNAK OM DINE ØNSKER fredsoe-teltudlejning.dk Sumquia consequos destias perferi doluptatiis es voles vollit a volupta dolore veles aut a voloreri voluptatur aut reruptas ea plit pro optatur, odi blacepe ribus, sus et es quodicient ab in rate vellor magnatis ullendae sunt, ullatem aut odit quis essentem qui re voluptat. Totalløsninger der dækker DIT behov... Reparation, nybyggeri og montage er alle områder, hvor vi stiller vores ekspertise til rådighed MESTERBYG fredsoe-teltudlejning.dk Historien THY MESTERBYG ApS Tømrer / snedker Ballerumvej 157 Hillerslev 7700 Thisted Tlf Telefax thy@thymesterbyg.dk 4 fredsoe-teltudlejning.dk Historien VELKOMSTDRINKS DER GØR DIG TØRSTIG! Sumquia consequos destias perferi doluptatiis es voles vollit a volupta dolore veles aut a voloreri voluptatur aut reruptas ea plit pro optatur, odi blacepe ribus, sus et es quodicient ab in rate vellor magnatis ullendae sunt, ullatem aut odit quis essentem qui re voluptat. Ingredienser 1,5 L - Pærecider 1 Flaske - Tør hvidvin Frosne vindruer Appelsiner Fremgangsmåde Tag den kolde cider og bland sammen med hvidvin i en bowle. Herefter tilsættes de frosne vindruer. Er drinken for sur tilsættes der ekstra pærecider. fredsoe-teltudlejning.dk Fake Champagne i bowle Pynt med abelsin skiver. Hyldeblomst cocktail Ingredienser 5 cl - Gin 6 styk - Mynteblade 1 tsk - Sukker 1.5 cl - Hyldeblomstsaft 1.5 cl - Juice, Lemon Fremgangsmåde Sukkersirup: Opkog sukker i en smule vand - ca. lige store dele. køl siruppen ned, mens du rører jævnligt. Brug en morter, eller gaffel til at nulre mynteblade, lemonjuice og ca. 1 ml. sukkersirup sammen. Tilføj resterende ingredienser og shake det hele sammen med is. Hæld væsken igennem en strainer/ si eller et klæde og servér i et nedkølet cocktail/martiniglas. Pynt med mynteblad eller en lille Blomme/æble cocktail Ingredienser hyldeblomst-stilk. med en limeskive. 6 velkomstdrinks velkomstdrinks 7 20 ml - Gin 30 ml - Vodka 5 ml - Sukker 10 ml - Blommesaft 10 ml - Juice, Lime 10 ml - Æblemost Fremgangsmåde Sukkersirup: Opkog sukker i en smule vand - ca. lige store dele. køl siruppen ned, mens du rører jævnligt. Du skal bruge 5 ml. sukkerlage til hver drink, eller efter behov. Shake det hele sammen med is. Hæld væsken igennem en si eller et klæde og servér i et nedkølet cocktail/martiniglas. Pynt med et rosenblad, eller lad en lille lyserød blomst af dit valg flyder rundt på overfladen. Daiquiri Ingredienser 5 cl - Rom, hvid 2 cl - Kildevand 8 cl - Knust is 2 tsk - Sukker 3 cl - Juice, Lime Fremgangsmåde Sukkersirup: Opkog sukker i en smule vand - ca. lige store dele. køl siruppen ned, mens du rører jævnligt. Alle ingredienserne shakes med is, eller blandes grundigt. Derefter knuses en potion isterninger i et rent klæde, for at skåne din borplade og holde isterningerne rene. fredsoe-teltudlejning.dk Fyld det knuste is op i cocktailglas, hæld den shakede drink over, fugt glassets kant med limesaft og pynt Brandbil Ingredienser 6 cl - Jägermeister 1.5 cl - Rødsodavand Isterninger Fremgangsmåde Fyld et glas med isterninger og tilføj rød sodavand. Hæld til sidst Jägermeister over. Det ser flot ud i farverne mens Jägermeisteren bundfalder. Du kan også vælge at shake ingredienserne i stedet. For at gøre denne drink mere feminin og sofistikeret, kan du vælge at servere den shakede drink op cocktailglas.