Artikel: Grids (del 2/4 - Grids i trycksaker)

När vi arbetar med layout måste vi inse att det hela handlar om att på bästa sätt strukturera ett text- och bildinnehåll på en yta.

Det första vi måste göra är att bestämma storleken på denna yta, ett bredd- och ett höjdmått som vi baserar på innehållets karaktär och den grafiska produktens användningsområde.

Denna del av artikelserien behandlar grids för trycksaksproduktion och jag kommer här att presentera ett par praktiska tillämpningsområden för grids i denna miljö. Det är viktigt att poängtera att exemplen är helt gripna ur luften och att man i ett skarpt läge måste tänka till kring vilka behov man har när drar ut linjer i gridsystemet. I dessa exempel drar jag ju bara ut linjer för att visa på principen.


Symmetrisk indelning av ytan
A-serien (ISO 216) bygger på proportionerna 1:1.414. Detta pappersformat använder vi dagligen både i Sverige och i de flesta andra länder och verkar därför vara ett lämpligt format som utgångspunkt i mina gridexempel. Principen för det symmetriska gridsystemet som visas nedan skulle fungera utmärkt för såväl tidningslayout som affischlayout eller produktkatalogformgivning.

(1) Att dividera A4-arkets mått med talet 2 och sätta ut linjer i vertikal respektive horisontell led ger oss mittpunkterna på respektive sida (105x148,5 mm) och därigenom också mittpunkten på ytan.
(2) Att dividera med 3 ger oss linjer på bredden vid 70 mm och 140 mm, och på höjden får vi linjer vid 99 mm och 198 mm.
(3) Fortsätt på liknande sätt genom att dividera med olika tal och till slut har du ett grid som påminner om denna figur.
(4) Du kan nu börja experimentera med hur text ska sättas och bild ska placeras.


Asymmetrisk indelning av ytan
Förra exemplet byggde på ett symmetriskt grid där alla linjer i rutnätet hade en motsvarande linje på motsatt sida mittaxeln. Nedan visar jag ett exempel på ett grid som även här utgår ifrån ett A4 (210x297 mm), men som är asymmetriskt. Denna layout skulle kunna fungera i magasinsform eller i bokform. Här finns också en tillämpning av gyllene snittet (detta matematiska förhållande kan du läsa mer om i Artikel: Gyllene snittet).


(1) (2) (3) Dessa streckade linjer dras ut först för att ge riktlinjer för hur satsytan ska placeras på pappersytan. I exemplet ovan satte jag toppmarginal 30mm och därigenom får jag måtten för övriga marginaler genom att titta var skärningspunkterna hamnar på de streckade diagonalerna. Yttermarginal:42 mm, innermarginal: 22 mm, bottenmarginal: 30 mm läses av.
(4) Satsytan delas in i två kolumner med en spalt på 4 mm. Delningen tänkte jag göra med teorin om gyllene snittet som bas. Eftersom satsytan är 146 mm (210-42-22 mm) och gyllene snittets proportioner är 1:1.6185 ska delningen ske 90 cm ifrån innermarginalen (146/1.6185).
(5) Lägg nu in fler horisontella linjer (och ev. även vertikala linjer) där du tror att det kan passa. Jag delade i exemplet ovan bara in satsytan i tre lika delar vilket gav styckenas höjd på jämna 79 mm (297-30-30=237 mm, som divideras med 3).


Givetvis använder sig dagspressen av grids eftersom det underlättar det formgivande arbetet och skapar helhet och struktur. Det blir dessutom förhållandevis lätt att planera och beräkna hur många tecken en viss artikel får lov att innehålla. Gridkonstruktionen är beroende på vilket storleksformat tidningen har (Broadsheet, Berliner, Tabloid etc.). För tabliodformatet ser vi ofta sidor baserade på fem- eller sex lika breda spalter som delar in ytan och sätter riktlinjer för hur man planerar och placerar innehållet. Kolla själva i en dagstidning så kommer ni snart att se mönstret! Läs en intressant artikel om ämnet på A4.

Denna del av artikelserien om grids visade på hur man kan arbeta med gridsystem i print. Innehållet är kort och koncist och kan säkert vara lurigt att greppa vid första ögonkastet. Titta på bilderna och försök följ texten. Skapa gärna ett eget grid i InDesign efter instruktionerna samtidigt som ni läser. Det viktigste är att ni börjar tänka i grids och börjar experimentera med dem nu när ni fått lite ingångsvärden. Att skapa gridsystem är ett hantverk och övning kommer att ge färdighet.

Nästa del i artikelserien kommer att handla om gridsystem för digitala medier och då i synnerhet för webbformgivning.

Nyhet: Bok- och biblioteksmässan 2009

Den 25:e Bok- och biblioteksmässan går av stapeln på torsdag-söndag nu i veckan. I likhet med förra året kommer Grafiska torget att finnas på plats och givetvis måste jag åka upp och ta del av några gratisföreläsningar och köpa en trave böcker. Jag har lyft en förfrågan till rektor och hoppas få ett litet anslag tilldelat oss att köpa referenslitteratur till skolan och grafutbildningen.

Böcker som jag vill köpa in och som jag vet finns på mässan är Arne Heines bok om typografi samt Tryckfärgguiden (en bok som bygger på hur processfärger upplevs olika beroende på vilken kvalitet och bestrykning pappersmaterialet har). Dessutom ligger Müller-Brockmanns Grid systems in Graphic design högt på önskelistan, men den kanske jag får jaga rätt på via adlibris/bokus eller i västa fall ebay.

De miniföreläsningar jag planerar att kolla in är följande. Alltid snappar man upp något nytt!

Lö 10.30–10.50, InDesign - Görans fem bästa tips
Lö 11.30–11.50, Bloggen - Snart företagets viktigaste reklamkanal
Lö 14.30–14.50, IKEA - design och identitet

Har ni möjlighet så tycker jag definitivt att ni ska åka upp till Göteborg och ta en dag inne på mässan. Även om det brukar vara ruskigt mycket folk och dyr fika så brukar man komma berikad därifrån.



Förra året skrev jag så här om Bok- och biblioteksmässan:

Nyhet: Bok- och biblioteksmässan
Reportage: 3 miniföreläsningar och några kilo böcker

Artikel: Grids (del 1/4 - Introduktion)

Man brukar säga att grafisk kommunikation omfattar tre arbetsområden: typografi, bildhantering och layout.

Dessa tre måste samverka för ett bra slutresultat och de ger alla utmaningar på sitt eget sätt. Denna artikelserie kommer i sina fyra delar främst att inrikta sig på layout och i synnerhet grids.

Så, vad är då ett grid?
En stor utmaning med grafisk design är layout. Det har alltid varit komplicerat och det är något som inte riktigt går att ta på. Vi kan oftast se när en text är felstavad, där tecknen har dålig kerning eller är skrivet i ett opassande typsnitt och vi kan ofta se när ett fotografi är felaktigt beskuret eller har fel färgsammansättning, men när det kommer till layout säger somliga att det ska "kännas" rätt. Luddigt, eller hur? Vaddå kännas?

Det är just den här subjektiviteten som ett s.k. grid kan hjälpa oss att kringgå.

Vi kan ibland se skräckexempel på dålig layout i mindre lokaltidningar eller på den lilla lokala biografen med reklam som surrar förbi i ett powerpoint-bildspel före filmen. Nedan har vi en reklambild från 1938 där man sprängt in text i en jämrans massa olika typsnitt på varje tänkbar yta som inte innehåller några bildelement. Det hela upplevs som ganska rörigt och ostrukturerat. Håller ni med så långt?

Annons för Whitman Easter Chocolates, 1938.

För att kringgå strukturproblem som dessa har man uppfunnit gridsystemet, ett universellt hjälpmedel som kan tillämpas i alla möjliga former, för posterdesign, för bokdesign, för webbdesign eller varför inte i 3D-formgivning? Rutnätet konstrueras efter de behov man har för sin layout och fungerar som en mall där vi placerar text och bild i enlighet med vårt linjesystem. Gridsystemet till vänster ser kanske inte mycket ut för världen men rätt använt är det guld värt.

Joseph Müller-Brockmann som var en schweizisk grafisk formgivare, en gammal räv i sammanhanget, skrev 1981 en bok om grids och menar:

"The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice."

Från modernismen...

Grundtankarna till detta system uppstod efter första världskriget då behovet av att återuppbygga samhället efter bombräderna ledde till nytänkande. Inom konstvärlden hade man börjat experimentera med allt mer förenklade former och arkitekturen började ta ett allt mer strikt och funktionellt uttryck, det var bara naturligt att den grafiska formen gick samma väg. Denna väg brukar vi kalla modernism, och vi ser tydligt kopplingen mellan Brockmanns gridsystem och exempelvis Mondrians neoplastiska konstverk nedan.

Piet Mondrian: Composition with Red, Blue, Black, Yellow, and Gray, 1921.

I denna artikelserie ska jag försöka visa på några tillämpningsområden och praktiska utföranden för gridsystem, både på trycksidan och för digital publicering.

Nyhet: Tre återvinner gammal form

Varför uppfinna hjulet två gånger?

Mobiloperatören Tre återvinner formspråket i en gammal anti-kärnkraftkampanj som var i full gång under gröna vågens sjuttiotal. Man var livrädd för kärnkraften och ville hellre utnyttja sol, vind och vatten och alltså inte nukleära kraftkällor och helst inte fossila bränslen. En fin tanke som kanske var lite före sin tid då teknik för att utvinna energi ur dessa källor först på senare år börjat bli riktigt raffinerade och kan ge lite avkastning.

Men jag vill inte öppna för energidebatt. Vi ska kolla på mobiloperatörens reklamkampanj istället.

Foto: Magnus Persson, 2009 (med Iphone)

Tre kör kampanjen i många olika medier, ex. TV, dagstidningar och reklamskyltar på stan. Ni har säkert sett den. Nedan ser vi en pin från anti-kärnkraftkampanjen som tre lånat formen ifrån. Snarlika, eller hur?

Den leende solen var/är symbolen för anti-kärnkraftorganisationer runt om i världen.

Nyhet: TV3 blir opersonlig

Har ni noterat att tv3 skaffat sig en ny logga?

Efter ett snabbt ögonkast och lite pulande med vektorbanor i Illustrator (se bild nedan) ser man att den nya logotypen bygger rakt av på typsnittet Helvetica. En kärnfull analys av en professor i typografi jag glömt namnet på sade en gång att: "Det som är bra med Helvetica är att det kan användas till allting och det som är dåligt med Helvetica är att det kan användas till allting".

Vektorbanorna för Helvetica i snittvarianten Heavy matchar 3:an precis!

Typsnittet är alltså avskalat ifrån alla former av personlighet, helt i enlighet med de modernistiska grundtankarna i början på 20-talet.

Jag öppnade ämnet för diskussion med min kollega Magnus som hört att MTG (Modern Times Group) som äger bl. a. TV3 och Viasat kanske vill göra kanalen opersonlig och karaktärslös inför en eventuell försäljning. Om detta är sant har de gjort ett genidrag och skulle vara en bra förklaring till varför loggan är så tråkig.

Lektion: Hänt i veckan!

... var en gammal skvallerblaska vars namn jag tänkte utnyttja i en empirisk studie om hur rubriker lockar läsare. Ska bli kul att läsa statistiken om detta inlägg på google analytics om några veckor. Jag inbillar mig att rubriken kan locka en och annan läsare som normalt inte besöker denna blogg.

Till sak. I veckan har ni jobbat duktigt med övningar i Ps, Ai och Id! Med höga knäuppdragningar och glada hurrarop har ni angripit övning efter övning och förhoppningsvis har ni nu börjat få lite koll på de olika programmen och deras styrkor respektive svagheter, även om några av er fortfarande inte är övertygade om Illustrators storhet. ;]

Eric jobbar för fullt i Illustrator, vilket inte syns eftersom undertecknad lyckats överexponera datorskärmen.

På torsdag morgon nästa vecka är det prov på digitala verktyg (teori+praktik) vilket innebär att onsdagen kommer att präglas av repetition. Förutom provet ska ni lämna in en drös övningsuppgifter i kursmappen så att vi kan avsluta detta delmoment och börja fokusera på nästa moment om typografi och layout i vecka 38.

Jag placerar några arbeten nedan som redan trillat ner i inlämningsmappen:

Efter lite experimenterande med vektorbanor och gradienter i Illustrator fick Veronica fram denne gemytlige figur.

Malin fipplar runt med Photoshops effekter och blending options för att ta fram en kul bakgrundsbild. Grönt är skönt!

Denna nyhetsgrafik gjorde Elin med Illustrator i veckan. Ett trevligt sätt att presentera annars färglös statistik på!