thomas lundin grafisk design grafisk design redegørelse Opgaven De fire designparametre Procesbeskrivelse En skoleopgave, der bestod i at designe et logo til MiGP 2011. Derudover skulle der udvikles en designmaual, der dels viste logoet, typografi og farver, men også forskellige anvendelsesmuligheder. Typografi Jeg har valgt at bruge den groteske skrift Cocon Regular. Det er en kraftig skrift med bløde og eksotiske former, som samtidig er enkel og tidløs. Budskab Illustration Logoet er opbygget af 5 noder. Noderne har samme form, men ikke samme farve, hvilket skal illustrere de forskellige folk der stiller op til et melodi grand prix. De kommer alle fra forskellige baggrund, men har musikken tilfældes. Derfor valgte jeg at vise det med noder, fordi de også er ens for alle musikgenre. Tilsammen danner de en stjerne, som symbolisere det spektakulære show det bliver, når de forskellige folk forener deres glæde for musik. • Brainstorming på MiGP, musik og melodi grand prix • Inspirationssøgning i bøger, og på nettet • Skitser i hånden og udvælgelse af idé • Mulige fonte findes med Fontcase, og uvælges • Logo skitseres, og udarbejdes i Illustrator • Designmanual med logo, font, farver og anvendelse udarbejdes. • Designmanual sendes ind til konkurrencen Kundens beskrivelse: “Logoet skal være simpelt og effektivit og selvfølgelig skal det frem for alt udstråle alt det som MiGP står for: fest, musik, modulationer og gang i den.” Afsender Det interne melodi grand prix på Afdelingen for Musikvidenskab (MiGP) ved Københavns Universitet. Et årligt arrangement hvor musikstuderende dyster om den ”legendariske” gyldne banjo. Modtager Primært musikstuderende på universitetet, men også musikinteresseret, venner og familie, samt andre med tilknytning til Afdelingen for Musikvidenskab. Farve Et melodi grand prix er lig med glitter, glam og masser af stærke farver. Jeg har derfor valgt at bruge 10 farver i logoet, for virkelig at understrege budskabet, og symbolisere mangfoldighed. Kvalitetsvurdering Både kunden og jeg var meget tilfredse med resultatet. De var endda så tilfredse, at jeg faktisk vandt konkurrencen. De skrev: ” Med hensyn til dit logo, så valgte vi det, fordi du var den der havde formået at lave det mest simple, men samtidig et af de mest forståelige, hvilket var lige præcis hvad vi ledte efter. Logoet skal bruges på alt, så som plakater, programmer, cd’er, og bagtæppe, så det var vigtig at det kunne fungere i forskellige størrelser, uden at miste betydning”. grafisk design idéudvikling / brainstorm MiGP Musik Melodi grand prix - Musik - Show - Fest - Studerende - Glitter & Glam - Den gyldne banjo - Universitet - Instrumenter - Underholdning - Rytme - Strenge - Trommer - Symfoni - Show - Farverigt - Mangfoldighed - Europa - Musik - Dans idéudvikling / inspiration grafisk design grafisk design idéudvikling / skitser Set før Godt med stjerner Godt med møntre Lidt for oplagt For kedeligt grafisk design idéudvikling / skriftype Caflisch Script Pro Bold Honey Script Max Bold MiGP 2011 Det interne melodi grand prix på Afdelingen for Musikvidenskab MiGP 2011 Det interne melodi grand prix på Afdelingen for Musikvidenskab MiGP 2011 Det interne melodi grand prix på Afdelingen for Musikvidenskab Jackie Bold Cocon Regular Spring Regular MiGP 2011 Det interne melodi grand prix på Afdelingen for Musikvidenskab MiGP 2011 Det interne melodi grand prix på Afdelingen for Musikvidenskab MiGP 2011 Det interne melodi grand prix på Afdelingen for Musikvidenskab Forte Regular Market Medium MiGP 2011 Det interne melodi grand prix på Afdelingen for Musikvidenskab MiGP 2011 Det interne melodi grand prix på Afdelingen for Musikvidenskab grafisk design idéudvikling / logo MiGP 2011 MiGP 2011 MiGP 2011 1 2 3 5 4 1 3 5 Ud af mine skitser er denne idé den som har flest muligheder. Udgangspunktet er okay, men noderne er for små og for spredt. Med farver på noderne, får mere af budskabet om mangfoldighed frem. Desværre minder det alt for meget om De olympiske leje. 2 4 Rigtig godt med lidt asymetri, det fremhæver stjernen. Farverne er blevet mere lækre med et farveforløb. Farverne undertreger budskabet om fest, glitter og glam. Noderne er nu blevet trukket mere sammen, og danner en stjerne. Det er et rigtig spændende mønster, som jeg vil arbejde videre med. Godt at logotypen får mere plads. Gode farver, men de er måske lidt for 80’er agtige. grafisk design logo / præsentation 75% 100% 150% 50% 50% Når logoet sættes ned i 50% eller mindre, bliver stjernen for lille. Jeg har derfor lavet et alternativt logo til mindre formater. 250% logo / præsentation 400% grafisk design grafisk design logo / farvekort C: 7 M: 81 Y: 100 K: 0 R: 212 G: 63 B: 26 C: 0 M: 36 Y: 80 K: 0 R: 245 G: 157 B: 53 C: 78 M: 44 Y: 40 K: 33 R: 0 G: 117 B: 108 C: 65 M: 80 Y: 0 K: 0 R: 93 G: 61 B: 146 C: 52 M: 0 Y: 40 K: 0 R: 110 G: 192 B: 157 C: 11 M: 44 Y: 0 K: 0 R: 206G: 138 B: 188 C: 4 M: 83 Y: 31 K: 0 R: 216 G: 57 B: 104 C: 0 M: 57 Y: 7 K: 0 R: 236 G: 117 B: 160 C: 0 M: 44 Y: 85 K: 0 R: 242 G: 140 B: 42 C: 4 M: 0 Y: 89 K: 0 R: 250G: 235 B: 17 logo / anvendelse grafisk design typografi & ombrydning typografi & ombrydning redegørelse Opgaven Jeg har valgt at tage udgangspunkt i en artikel om QR-koder i magasinet De Grafiske Fag. Jeg synes på nogle punkter at artiklen er uhensigtmæssigt ombrudt, og jeg vil forsøge at komme med et bedre forslag. De nødvendige billeder og tekst fra artiklen er tilgængelige på nettet. Print af artiklen både før og efter er vedlagt. Dokument • 210x280 mm • Facing pages • 3 mm bleed • Start på side 26 Master • A-master (opslag) • Baseline Grid • Pagina Brødtekst • Kontrapunkt Light: Plade Serif (Slab Serif), bred og læsevenlig • 9 pt/13pt • Dansk orddeling • Indryk, 1 geviert (9 pt) • Låst til Baseline Grid Mellemrubrik • Kontrapunkt Bold: Plade Serif (Slab Serif), god kontrast til brødtekst. • 10 pt/14 pt • 2 pt luft under, 10 pt luft over Udregning af luft over mellemrubrik: 2 linjer brødtekst Skydning Luft under Luft over 26 pt 14 pt 2 pt 10 pt Kvalitetsvurdering Jeg er selv rigtig godt tilfreds med resultatet. Teten virker langt mere indbydende med mere skydning og 3 spalter i stedet for 2. Det tog lidt tid at få teksten til at passe ind, men sådan er det når man arbejder med fast for- og bagkant. Der er er knebet lidt hist og her, men optisk har det ikke nogen betydning. Ved at QR-ko skanne den cen, på an ha nontilbu r bruger dsav en he isen i hånd le en. Spatiering og knibning • Maks knibning på -15/1000 em • Maks spatiering på +15/1000 em Målb ar tr Komposition Når tryk • Margin (mm): top: 20 bund: 37 indre: 14 og ydre: 32 • 3 spalter med fast for- og bagkant, og mellemrum på 8 mm Stibo er klar med tilbud, de r anvend er Quick Re sp teknologie onsen. Også kunderne ser ud til at være parate til at eksperim entere. Tekst: Søren Knudsen ([email protected]) Foto: Thoma s Lundin De er så småt beg yndt at duk herhjemme: ke op QR-tags’ne, altså de todimensione lle mosaikkoder, man kan skanne med sin mob iltelefon og herefter bliv e sendt vide re til bl.a. webside. en 26 De Grafiske Fag / 1 / 2011 bliver kli kbart yksa Der er is – Og det her ær én frem er kun topp hæ ting, en af isbj get. Fremti Uffe er- gøresat ver: Nu den inde kan Han kltage føle nfor kom kation på – Og også se muni- Tidlig ikbarog på. tværs af derm tileat tageog derm Dettrhar er yksafået nStibo m medier ser ud, siger gen en–si Vi viled får te ed lyspå at førshavde næs Uffe Han on i fo gerne trslå ålog intern skrimdt m bar.udvikle sit fo sen, dire QR-prod forretnings endn rhold yk et ktør forlikum ålete rnem slag for etteder trafi ukt, tæll udvikling t msæl kk at dett ste, s sær ges til en vo det,ikke u en diat fore op etilher intelig onop i Stibo Gra kamen ognep Han har pag ress resska ol deris phicke ve, ne derer . lte web b mengaen rm errake kund brugt man eo for at få bred voretviden- ged ed mrå m er de lavt si t kendsk ge timer på udpubekn seneste s detrtil ligolog Seve abe isk måd forb de en in teknder. Hve at st måneder på res fo indeiblad mul e at tags nfold. te olog r yr deighe på at udfo er og web rretog området en- derne T i re op–la , der – ikkeke rske let at rnetsideien. enkelt m ning nog og er nu i et ledte Bladet gt der usek Kampagre fuld gang e omgiver papiret . mindst ekstra Han gistre ha fortælle Stib hen lik neti medpratoduk se, hvilk mat lbud mere vær serLæs rå redet til en vde QR ere os kunder s, e eria d tr omf te kan di.er vi indl så de atter et e op r el edendesider sener tags om de manpopu nye mulighe t kanrencer, lagte st des videre til konkur-at lde med le, som gr hel mas og e, de ge lære QR-ler ydel mød ska der i den bels an stre se . eder vide rm e af en uppe skrif ame . tag parse mæ ve ne forbinde Q mellem tryk atr,tildetryk , hvorooptage ter, ka rke ik Materiale ns fa es: m de nyhedsnd lseR-tagsen r er samed sagen og tr lser brev ns t Q ke ta yk , des m sa som ag e, Rlo ign afger. ’n webside online-unive pol, est te m altid iale set. Og hva inermed der r sam socas SMS, ge agas ier, sende er pl r-for nu telee har br , som er tilpasse d der er /t br vel vær id in e t in ad t med ud sfone re mobilværd at på di ges kan – La s til kli am t de mærke til: afstemninge læggesse på gr , eller so d msom alle prinr.t i det t mon etry Kunderne r og,De ig m un rede pe m og kål næ næv l d af er interess oikke inge så ko fra dening vne rede. nt, få flere kunn form r. ekan ba ble si e bl oply bare n uder på web verd s-ckst atet .a. læ ben g ét. ek enla en, age se de . ndsk de vi repo sem der ud nemlig 28 e m rtag de Kampagn Revol gav er, se taljerede agas etilbud en ko oer, sm en sæ ver se m inDe Gr ugly Mag mm ed en Uffe Han ru tte til streameafisk ende azin konc sen har e Fa ny cd dgave i e, num er cd fortalt om g/1 te fo , teknologien re fr fra gr rb købe r QR/ 20 a – Det osv. på Stibo uppe indelbille 11 Days, på tter n Ave aftensmøde er så fans fyrtil r og på kun ndan el demøder, noge alle steder me i sker, og og t, ha har respons dem mød rd co en været e ge re til nnem kan man kom den simpl e QR - g forb inde ls Varek e melle m tr yk for en ataloger åbne og web. rækk sen r lig fortæ e mulig hede eledes op vise ller, plug r. Uffe r ku at in (e n én t lille Stibo ha ning Han som mod r udvi af Q tillæ el, m auto R-kod klet gs ren mat klum et en ka ens en hen isk ka program per af til et skan n lede . red. n ge lektio site, ), – Hve QR-tags nere forb nen. der vi ruge re . Et r ka he en ser he impo tilbu n lig le kelt d rter eled tag le ko tag, es ko på en la er un lInDes es i et der mm mbine ik og desi ign. udlø eryg en gnpr ka re se op n s m Det ogra r en skrif ed et vil al m so mob t. Og at kn tså si m ils så ide m vide ytte ge, at Sim re. ed hver vare det pelt, t kata men log til enkelt pr er mulig Hvo skan ... r sv t od en nes, ært gang og so QR-kod ukt i et vide er de ? e, de re til m se r kan yder at de Tjae, Uffe t så at tione nder liger t over ko r. m H læ e prod anse me sere ordn bety i n fo n et er uktin Ende der rtælle ikke, si form mas og og lig er de r, at m mpelt, m ase ov r rekl så an sl en de amet øst po her ser ippe – Der ervejelser t r fo Uffe ryks tent En og fo findes de-g ager scan Han rbered r en – Se iale. ning ener mas , sen og så elser. se at et af de ne er du m or r se st vet af gr an fx er på kam rinne er ra dire tilladt pagn atis QR skriv nett e-sm kte inde hjem kodet et. H e sit i Dan batkupon arts på S mes nem link ite. er ka mar er bl iden t for op in k, resp n d, lø eskab snin og de hvor anno on er et g pa at nå efter ncør t gø af sa følgel semålin ra Q er fr R t r gen ne at ger. ig go frem em til el er de til tryk. Så -tag i hø re pr Man lave dt kl tage le j . r r D ob eg for tu de et du ippe kan lem den entli være ng selv ku er ik g ikke n side m skan Derim er i. enke ke. D e at he ne et ed, men ponen ud de st od sk lt og ellers et he om i m otilse tag og hu al m hopp fo le s ndt, og få an kan an tæ er de rtigt for hvor rhold til også so men nke en ra brug fra. den indh sig go , der m man ern Tror batk mob olde vise vise here dt ode fra. P på p ile w t sk s på r ka fter eb å de al ro en Han ss si trækk jekt ligge fon, n måd meg er ov et . Det de, så de skærm er ra edaet pr e får er på be ba rf be sk sine or ka æci rne og anno tten vist sers trad n man en mobilt al om, ncør effekt s målin an iti te at no en el on udvi knol tryksa g af ikke ncør eelle en ogie QR-ta . kle he anve erne tilbu web gskø dsav gs’e nok nde side – Der n til sig. anno – Man lt nye. ne gi skal ir, men ncør er tr tage skal Gallu må er tu er et ver i de e tin trad pt hele ng og tænke ition dans undersøg g i det: i grafi el an udvidet tage hove hele kern Ifølg k, de univ t nonc de tiden e en e alle else har ers. r ikke med e fra smar t, at ”m 3 ha re En m 0 de væ usen ve i et tø tp obile pct. nes ” på bagn, an jfirm af ret på Så de hone er stig a en kl ta ens r sk eg intern er, og en llet af sm nettet ikba al ik knap r ke væ en pege et i delig artp per, finger en riv vend ho men er de re m Og en . er vi få og ange ende t mob delig hove stor tekn små ile sen, e. det m udviklin unde olog at m g. ie rs od Ja n bine tege Og obilatte ret m er vidt sitet r Uffe r test udbr pan, hvor ed m test hede edt og es, te Hanob – Jeg es. r, ja, stes kom så er ile beta er un plos på Q og lings iv ud der ud R-site der min mul bred sigt re s, so –M til en igen vi else. m er search st eksog he befind ødt kom r på plicer er os jeg Stib ede i Dan o er ka mar vi st Halle lder fo k, ad r luja! ig i ”præ  det, dika ntfa sen” » QR . -t på a ag’en h a t tryk registr r brudt sag en g ere læs interne Hans øres tme en, dir e ektør diets klik rintere for for retnin bar s gsu dvikli og d se. Nu monop ng i Stibo erm o Gra pic ed m kan og l så ålba r. « Tre frisk e eksemp ler er plak for Skills-d aten anmarks en smartph mesterskab bl.a. med one og så et for iegrafiker et lille prog , der kan afl elever og ram, tekniker elev æse koden grafisk er, webbuti og fortælle lefonen, hva kken dus tedk samt d den ska tin. magasinet l gøre. Gastro, hvo skanning r af et tag En eks kan kalde tra dimens opskrifter rådejsion frem på mob Om stillingen ilskærme I alle tre til interne n. tilfælde kan tsid én er af er kun de funktion rede hold interesseer, man kan e mobilen ind i en lægge op foran saikken, QR-tag. Der motage et bille er masser andre. Ma de af den af herefter n kan bru og få flere ge mosaikk til at skrive information oden en webside en tekstbes er på , der kald ked, ringe et tele es fonn frem til bilens skæ ummer, skri på morm. ve en SM skrive en S, mailadress Der er derm e og en mai ed skabt dire sked, aflæse lbedelse mel kte forbinkontaktoply lem tryk på et visi sningern og internet brug af com tkort (så e uden slipper man puter og ude taste dem for at n at taste lang web manuelt en adresse ind ind) vise en litet på Goo først. Det lokaver blot en gleMaps kræeller linke nyere mob Facebook-g til en iltelefon elle rup pe. r Uffe De Gr afisk e Fa g/1 / 20 11 29 Eksempe l: QR-koden på træet giver adga pasnings ng til en vejlednin g på mob om hvilk ilen, med e planter gode råd der kan plan træet, f.eks te sammen . de hvide med blomster i bunden. De Grafiske Fag / 1 / 2011 27 typografi & ombrydning detaljer Den grønne farver fremhæver budskabet – Og det her er kun toppen af isbjerget. Fremtiden indenfor kommunikation på tværs af medier ser lys ud, siger Uffe Hansen, direktør for forretningsudvikling i Stibo Graphic. Han har brugt mange timer de seneste måneder på at udforske området og er nu i fuld gang med at fortælle Stibos kunder om de mange nye muligheder i denne forbindelse mellem tryksagen og online-universet. Og hvad der er værd at lægge mærke til: Kunderne er interesserede. at tage og føle på. Det har fået Stibo til at tage næste skridt og udvikle sit første QR-produkt, der sælges til en særlig kampagnepris for at få udbredt kendskabet til mulighederne i teknologien. Kampagnetilbuddet omfatter et indledende møde, skabelse af en QR-tag parat til tryk samt design af en webside, som er tilpasset mobiltelefoner. Baseline Grid tilpasset til x-højde nyhedsbreve, sociale medier, sende SMS, være med i afstemninger og, som allerede nævnt, få flere oplysninger på webben.  Kampagnetilbud Uffe Hansen har fortalt om QRteknologien på Stibo Days, på fyraftensmøder og på kundemøder, og alle steder har responsen været til Når tryk bliver klikbart Stibo er klar med tilbud, der anvender Quick Responseteknologien. Også kunderne ser ud til at være parate til at eksperimentere. Column-break for at undgå horeunge Tekst: Søren Knudsen ([email protected]) Foto: Thomas Lundin De er så småt begyndt at dukke op herhjemme: QR-tags’ne, altså de todimensionelle mosaik-koder, man kan skanne med sin mobiltelefon og herefter blive sendt videre til bl.a. en webside. 26 De Grafiske Fag / 1 / 2011 Tre friske eksempler er plakaten for Skills-danmarksmesterskabet for bl.a. mediegrafiker elever og grafisk tekniker elever, webbutikken dustin. dk samt magasinet Gastro, hvor skanning af et tag kan kalde rådejsopskrifter frem på mobilskærmen. I alle tre tilfælde kan interesserede holde mobilen op foran mosaikken, tage et billede af den og herefter få flere informationer på en webside, der kaldes frem på mobilens skærm. Der er dermed skabt direkte forbindelse mellem tryk og internet uden brug af computer og uden at taste en lang webadresse ind først. Det kræver blot en nyere mobiltelefon eller en smartphone og så et lille program, , der kan aflæse koden og fortælle telefonen, hvad den skal gøre. En ekstra dimension Omstillingen til internetsider er kun én af de funktioner, man kan lægge ind i en QR-tag. Der er masser af andre. Man kan bruge mosaikkoden til at skrive en tekstbesked, ringe til et telefonnummer, skrive en SMS, skrive en mailadresse og en mailbesked, aflæse kontaktoplysningerne på et visitkort (så slipper man for at taste dem manuelt ind) vise en lokalitet på GoogleMaps eller linke til en Eksempel: QR-koden på træet giver adgang til en pasningsvejledning på mobilen, med gode råd om hvilke planter der kan plante sammen med træet, f.eks. de hvide blomster i bunden. De Grafiske Fag / 1 / 2011 27 typografi & ombrydning detaljer forbindelse mellem tryk og web. Varekataloger åbner ligeledes op for en række muligheder. Uffe Hansen fortæller, at Stibo har udviklet et plugin (et lille tillægsprogram. red.), som automatisk kan generere hele klumper af QR-tags. – Hver enkelt tag er unik og kan importeres i et designprogram som InDesign. Det vil altså sige, at det er muligt at knytte hvert enkelt produkt i et varekatalog til en QR-kode, der kan skannes, og som sender læseren videre til yderligere produktinformationer. Endelig er der reklametryksager, og også her ser Uffe Hansen et seriøst potentiale. – Senest er rabatkuponer blevet tilladt i Danmark, og det gør det nemt for annoncørerne at lave responsemålinger. Man kan selvfølgelig godt klippe kuponen ud og tage den med, men man kan også skanne et tag og få en rabatkode tilsendt, som man viser kassedamen, der herefter trækker rabatten fra. På den måde får annoncøren en meget præcis måling af tilbudsavisers effekt. QR-tags’ene giver i det hele taget annoncører et udvidet univers. En traditionel annonce fra et tøjfirma Ved at skanne QR-koden på annoncen, har brugeren hele tilbudsavisen i hånden. Bredt spaltemellemrum giver lethed Målbar tryksag Der er især én ting, Uffe Hansen fremhæver: Nu kan også tryksagen gøres klikbar og dermed målbar. Tidligere havde internettet monopol på at måle trafikken og dermed publikums interesseområder på de enkelte websider. Hver enkelt museklik på en internetside registreres, så det er let at se, hvilke sider og dermed produkter eller ydelser, der er mest populære. QR-tags’ne har brudt det monopol, for nu kan print også koble sig på disse målinger. 28 De Grafiske Fag / 1 / 2011 – Og dermed får tryk endnu en dimension i forhold til det, der er vores fornemste opgave, nemlig at styrke vores kunder i deres forretning. Tre oplagte områder Han ser tre oplagte steder, hvor QRtags kan anvendes: magasiner/tidsskrifter, kataloger samt reklametryksager. – Lad mig nævne bare ét eksempel fra den udenlandske magasinverden, nemlig Revolver Magazine, der udgav en særudgave i forbindelse med en ny cd fra gruppen Aven- ged Sevenfold. Bladet havde QRtags, der ledte hen til en hel masse ekstramateriale, som gruppens fans er vilde med. Materiale som der vel at mærke ikke altid er plads til i det trykte magasin, eller som ikke kan bringes på grund af formatet. De kunne bl.a. læse detaljerede backstage-reportager, se streamede videoer, smuglytte til numre fra en kommende cd, købe billetter til – Det er sådan noget, hard core fans elsker, og dem kan man komme i møde gennem den simple QR- viser kun én model, mens en skanning af QR-koden kan lede forbrugeren hen til et site, der viser hele kollektionen. Et tilbud på en lammeryg kan ligeledes kombineres med et tag, der udløser en mobilside med en opskrift. Og så videre. Simpelt, men... Hvor svært er det så at komme i gang? Tjae, Uffe Hansen fortæller, at det overordnet er simpelt, men det betyder ikke, at man slipper for en masse overvejelser og forberedelser. – Der findes masser af gratis kode-generatorer på nettet. Her kan man fx skrive sit link ind, hvorefter hjemmesiden skaber et QR-tag i høj opløsning parat til tryk. Så den side af sagen er der egentlig ikke de store problemer i. Derimod skal man tænke sig godt om i forhold til den mobile webside, hvor indholdet skal ligge. Det skal vises på en skærm på en mobiltelefon, så derfor kan man ikke anvende sine traditionelle websider, men må udvikle helt nye. – Man skal tænke i grafik, der ikke er tung og hele tiden have i baghovedet, at ”musen” på en klikbar smartphone er ens egen pegefinger. Så der skal ikke være mange små knapper, men få og store. Og endelig understeger Uffe Hansen, at mobil-sitet testes, testes og atter testes. – Jeg er under min research stødt på QR-sites, som er komplicerede En scanning af denne QR-kode og så er du direkte inde på Stibos kampagne-smartsite. at nå frem til eller for tunge at hente frem. Det duer ikke. Det hele skal være enkelt og hurtigt for brugerne, ellers hopper de fra. Tror på projektet Den grønne farver er en god kontrast til teksten Han er overbevist om, at tryksagskøberne og annoncørerne nok skal tage teknologien til sig. – Der er tre ting i det: Ifølge en Gallup-undersøgelse har 30 pct. af danskerne allerede været på nettet med mobilen, antallet af smartphones stiger, og endelig er det mobile internet i en rivende udvikling. Og vender vi hovedet mod Japan, hvor teknologien er vidt udbredt og kombineret med mobile betalingsmuligheder, ja, så er der udsigt til en eksplosiv udbredelse. – Men vi befinder os i Danmark, og her på Stibo er vi stadig i det, jeg kalder for ”prædikantfasen”. Halleluja!  » QR-tag’en har brudt internetmediets monopol på at registrere læserinteresse. Nu kan også tryksagen gøres klikbar og dermed målbar. « « Uffe Hansen, direktør for forretningsudvikling i Stibo Grapic De Grafiske Fag / 1 / 2011 29 billedbehandling billedbehandling redegørelse Opgaven En illustration af et træ med QR-kode til min version af en artikel i magasinet De Grafiske Fag, der omhandler QR-koder. Jeg har udarbejdet alle illustrationer i artiklen, men har valgt at afgrænse dokumentation, da det ellers ville blive for omfattende. Magic Wand Selektion af områder i billedet. Opacity Ændring af objekters gennemsigtighed Burn Tool Tegne skygger på objekter Anvendte værktøjer Procesbeskrivelse Pen Tool Tegning af objekter, samt fritlægning. • Billedet sendes til fritlægning • Der lægges skygge på de forreste objekter • Træet selekteres og fyldes med sort • Det sorte træ blødgøres i kanten, og ligges ned med Distort • Begge skygger gøres gennemsigtige • Snor og hangtag tegnes • QR-kode indsættes på hangtag’et • Konvertering til CMYK • Udprint af opslag Gradient Tool Give objekter et farveforløb Distort Justering af objekters perspektiv. Mask Skjule dele af lag. Brush Tool Tegning af skygger. Polygonal Lasso Tool Selektion af området i billedet. Kvalitetsvurdering Jeg er generelt godt tilfreds med resultatet. Billedet var farvekorrigeret fra starten, og det ser fint ud på printet. effekter / skygge billedbehandling 1. Pen Tool 2. Fill 3. Gaussian Blur 4. Opacity Efter fritlægning af alle tre objekter i billedet, fritlægger jeg skyggen af den lille potte og vandkanden med Pen Tool, hvorefter jeg laver en selektion af stien. Selektion fyldes med med sort, ved at oprette en Layer Mask med Solid Color. Skyggens kant blødes op ved at give den effekten Gaussian Blur. Skyggen lægges bag potterne. Til sidst giver jeg skyggen en Layer Style, som dæmper opaciteten til 40%. effekter / skygge billedbehandling 5. Polygonal Lasso Tool 6. Fill og Gaussian Blur 7. Distort 8. Opacity Fritlægningen af alle tre objekter selekteres, hvor efter at den lille potte og vandkanden skildes fra med Polygonal Lasso Tool, så kun træet er valgt (det er kun en relativ selektion, da træet står bag vandkanden, men det har ingen betydning). Selektion fyldes med med sort, ved at oprette en Layer Mask med Solid Color, hvorefter at der tilføjes effekten Gaussian Blur. Skyggen lægges i ned bag ved træet, ved at bruge funktionen Distort så den passer med de andre skygger. Til sidst giver jeg skyggen en Layer Style, som dæmper opaciteten til 40%. effekter / hangtag billedbehandling 1. Brush Tool og Burn Tool 2. Pen Tool og Gradient 3. Stroke 4. Distort Med Brush Tool tegnes den hvide snor omkring træet, hvor efter den gøres lidt mørk i toppen med Burn Tool, for at illustrere rundingen. Hangtag’et tegnes med Pen Tool og fyldes med en Gradient. For at give hangtag’et en 3D-effekter, tilføjer jeg en Stroke der har samme farve som en nuance i farveforløbet. QR-koden indsættes og tilpasses til hangtag’et ved at bruge funktionen Distort. grafisk workflow grafisk workflow redegørelse Opgaven For tre år siden designede og producerede jeg en hjemmeside med eget CMS-system, til firmaet SKAtek A/S. På det tidspunkt havde jeg ikke så meget erfaring med html og css, så derfor bærer hjemmesiden idag præg af mange små fejl. Der ud over er firmaet kommet til den konklusion, at de ikke selv har tid til at opdatere den, og derfor ikke har behov for CMS-systemet. Derfor besluttede vi at jeg skulle bygge siden op fra ny, med udgangspunkt i den eksisterende. Da jeg mangler nyt indhold, har jeg indtil videre indsat mumletekst for at fylde siderne. Layout Den nye hjemmeside er en bredde på 800px og ikke nogen fast højde. Bredden er valgt på baggrund af at den skal kunne vises i fuld bredde, selv på en lille netbook. I forhold til almen brugervenlighed, burde jeg nok have givet den en fast højde, men jeg tror på at folk i dag er blevet så vant til scrolle, at det ikke har nogen mærkbar betydning. Menuen er sammen med logoet blevet fremhævet, ved at flytte den op øverst, hvor forbrugeren fokuserer først. Det giver en langt bedre brugervenlighed, i stedet for at forbrugeren skal lede efter menuen. Baggrundsfarven er ændret til sort, da den blå farve ikke er blevet brugt i andre sammenhænge. Den sorte farve giver et mere seriøst look, og desuden klæder det logoet rigtig godt at komme på en sort baggrund. Alle overskrifter, H1, H2 o.s.v., er ved hjælp af et javascript skrevet med logoskriften, hvilket binder siden sammen, og giver et rigtig godt helhedsindtryk. Komposition Grundlæggende er siden opbygget af divtags. I store træk, er det en wrapper, hvor i der er en header, et header_image, content og en footer. Navigation Ud over at menuen er øverst på alle sider, har jeg på forsiden vist, hvad jeg vil kalde et udviddet link. Boksen til højre, med henvisning til Profil har jeg lavet til et stort link, i stedet for bare at skrive et lille tekst-link inde i boksen. Det hjælper brugeren til lettere at ”ramme plet” specielt de der bruger en touchskærm. Ud over links, har kontaktoplysninger også fået en meget mere central plads, ved at fremgå i bunden på alle sider. Dels viser undersøgelser at brugere fokuserer nederst på siden, når de skal finde kontaktoplysninger, men ved at de er tydelige på alle sider, er der større sandsynlighed for at kunden ringer eller skriver en e-mail. Procesbeskrivelse • Møde med kunden hvor den eksisterende hjemmeside gennemgås, og forventnin gerne til den nye afstemmes. • Flowchart udarbejdes • Skitser tegnes i hånden • Eksisterende billedemateriale efterbehan les og retoucheres, hvorefter det klargøres til web. • Opsætning af layout • Kodning af html og css i hånden. • Logoskrift indsættes på menu og overskrif ter ved hjælp javascript. • GoogleMaps med egen stedangivelse tilrettes og indsættes på kontaktsiden. • Hjemmesiden testes i Internet Explorer, Firefox og Safari. • Upload til midlertidig server Kvalitetsvurdering Med udgangspunkt i det gamle design, synes jeg virkelig at siden er løftet til et højere niveau, både i forhold til brugervenlighed og design, men også i forhold til at afspejle hvad virksomheden står for. Kunden er også rigtig glad for hvad der er lavet indtil nu. Lidt længere ud i fremtiden skal jeg eksperimentere med at lave en form for filterfunktion på projekt-siden, så brugeren let kan inddele projekterne efter f.eks. årstal. før / efter grafisk workflow skitser grafisk workflow grafisk workflow flowchart Forside Projekter Profil Kontakt vectorgrafik vectorgrafik redegørelse Anvendte værktøjer Procesbeskrivelse Pen Tool Tegning af objekter. • Tegning af skitse i hånden • Foto af de tre objekter • Indtegning af objekterne med Pen Tool, samt farvelægning med Gradient Tool • Tegning af papkassen med Pen Tool, samt farvelægning med Gradient Tool • Live Trace af symboler, samt placering på papkassen med Free Distort • Tegning af skygger på papkassen med Pen Tool, farvelægning med Gradient Tool og blødgøring af kanter med Feather • Indtegning af snørebånd og høretelefoner • Justering af gennemsigtigheden på brille glassene Gradient Tool Give objekter et farveforløb, af to eller flere farver. Live Trace Konvertere pixelbilleder til vectorgrafik. Feather Blødgøre kanter på objekter. Transparency Justere objekters gennemsigtighed. Pathfinder Opdeling eller samling af objekter. Eyedropper Tool Opsamling og påføring af farver, og indstillinger. Free Distort Justering af objekters perspektiv. Kvalitetsvurdering Jeg er rigtig tilfreds med slutresultatet. Det er dejlig friskt og farverigt. I forhold til skitsen synes jeg også at illustrationen stemmer meget godt overens, og jeg har fået det frem jeg ville. Men hensyn til valg af værktøjer, har jeg forsøgt at vise nogle mere specielle funktioner i Illustrator, hvilket jeg også synes lykkedes rigtig godt. fra billede til illustration 1 vectorgrafik 2 1. Foto 3. Farvelægning Jeg startede med at tage et billede af hvert af de objekter der skulle med i illustrationen. Jeg lægger nu farver på alle de optegnede flader, og tilføjer detajler som for eksempel syninger. Til sidst bruger jeg Gradient-tool til at give fladerne skygger som for eksempel inden i skoen. Jeg tog billederne selv, frem for at finde dem på nettet, dels fordi eg ønskede at lave billederne selv, og dels fordi at jeg på den måde kunne få objekterne fra den rigtige vinkel. 2. Pen Tool Det valgte foto trækkes ind i Illustrator, hvor jeg så har tegnet alle linjer og flader op med Pen-tool. 3 fra billede til illustration vectorgrafik fra billede til illustration vectorgrafik fra billede til illustration vectorgrafik anvendte funktioner / værktøjer vectorgrafik Transparency For at give effekten af at der er glas i solbrillerne, bruger jeg værktøjet Transparency. Fyldfarven er grå, og opacity er sat til 85% Multiply. Multiply gør at alle sorte farver bag glasset forbliver sorte, mens alle lyse nyancer bliver en mellemting mellem deres originale farve, og den grå farve glasset har. Pathfinder Til at opdele de farverige blomster og blade, har jeg brugt værktøjet Pathfinder. I paletten Pathfinder finder man en række forskellige værktøjer til opdeling og samling af objekter. Jeg har anvendt værktøjet Divide. Jeg brugte også Divide til at dele den hvide ledning, der hvor den går ind over blomsten. Derved kunne jeg gøre ledningen grå udenfor blomsten, så den kan ses på hvid baggrund. anvendte funktioner / værktøjer vectorgrafik Free Distort I forhold til det oprindelige billede af telefonen har jeg ændret dens perspektiv, med værktøjet Free Distort. Det giver en mere realistisk vinkel på telefonen, når den kommer op at svæve sammen med blomsterne. Før Efter anvendte funktioner / værktøjer vectorgrafik Live Trace Live Trace Symbolerne på siden af kassen er fundet på nettet, og derefter vectoriseret med værktøjet Live Trace. I det her tilfælde var det nogle forholdsvis simple ikoner, der skulle traces, så derfor lavede jeg ingen instillinger. Havde det været mere komplekst, ville jeg have valgt Tracing Options, og selv defineret hvor små arealer den skal tage med o.s.v. Efter Live Trace, har jeg brugt Free Distort, som beskrevet på forgående side, til at placere ikonerne på kassen. Free Distort anvendte funktioner / værktøjer vectorgrafik Gradient Feather Feather Skyggen under kassen er i princippet bare en firkant med en gradient. Men for at gøre den mere realistisk, har jeg brugt værktøjet Feather. Feather bløder kanterne op, så overgangen mellem skyggen og den hvide baggrund bliver mere glidende. færdig illustration Roteret 45° vectorgrafik thomaslundin.dk