Jag är själv en nybörjare när det gäller layout och grafisk design. Senaste tiden har jag ändå arbetat lite med det, och även om jag har surfat runt lite och pratat med olika människor som kan det här så har jag inte hittat någon riktigt bra guide för hur man gör saker snyggt. Delvis handlar det nog om att vissa människor har sinne för grafik, och andra inte har det. Jag har det inte, vilket man kan se på de omslag jag har gjort till mina böcker.
Problemet med bristen på bra guider bygger bland annat på att de som kan grafisk design inte vet riktigt vad det är nybörjare som jag behöver. Det här är ett vanligt problem i alla typer av manualer och undervisning. I det här fallet läser jag mer om vilka verktyg jag ska använda (Photoshop, etc) och om teckensnitt och andra delar, eller om hur man gör olika avancerade saker med sina verktyg, som Iceflow studios utmärkta serie om just Photoshop på YouTube, snarare än om övergripande tips och tricks som snabbt och enkelt gör saker snyggare. (Självklart finns det undantag, men de är få.) Därför har jag samlat på mig några av de bästa tips om hur man ska tänka när man sysslar med grafisk design, som jag har stött på och haft mest nytta av. När du har läst om dem här kan du googla vidare på hur man faktiskt gör dem, för här finns inga manualer. Mycket nöje.
Rensa
Det här tipset är vanligt, men jag tänkte ändå ta med det, eftersom det inte är lätt att följa det. Man tror att man har rensat bort så mycket man kan, för ”det där måste ju vara med, och det där”. Man tror också att folk är lika intresserade av alla detaljer som man själv är. Tomma ytor, även om de inte är vita, är oftast bättre än det man fyller det med. (Sen behöver man inte gå till överdrift åt andra hållet heller.)
För att rensa ordentligt, gör det i flera omgångar. Börja med allt du tror att du måste ha med. Ta bort hälften. Ta sedan bort allt som bara de mest intresserade behöver. Hitta därefter ett tema eller en grundtanke. Det kan vara att saker är runda, eller att de syftar på ett ordspråk, eller vad som helst däremellan. Ta bort allt som inte följer den grundtanken. Låt sedan någon annan rensa lite bland det som är kvar. Gå sedan igenom det som finns kvar och slå ihop så många av elementen som möjligt: sätt ihop två meningar till en, välj en bild som säger samma sak som de två du har, renodla så att du bara har ett teckensnitt istället för flera.
Låt den här processen ta tid. Och när du tror att du är klar, börja om från början. Du kan aldrig få för mycket tomrum eller för lite jytter.
Själv vet jag att jag tenderar att skriva för långa texter, som i det här blogginlägget. Om jag skulle göra om det skulle jag helt enkelt skriva klart hela texten innan jag började om genom att skriva ner rubrikerna (såsom ”Hur man placerar grejer” nedan) separat. Därefter skulle jag ta en sak per område eller högst tre saker i en kortfattad mening/lista. Grejen skulle sen kunna läggas in i ett Facebook-flöde. Men här har jag också ett annat syfte: att gå in lite mer på djupet bakom lärdomen. Men som ni ser har jag inte överlastat texten med länkar (som drar uppmärksamheten till sig) eller extrema designval. Enkelt är oftast bäst.
Hur man placerar grejer
Du kanske har sett en sån här bild?
Det är en mätning som forskare gör för att mäta var folk tittar på en webbsida. Sånt är bra om man har som syfte att folk ska se vad man har placerat ut, så att de sen kan läsa vad man har skrivit, respektive analysera de bilder som finns där.
Tidningar gör likadant. Genom att placera något ”över vecket” på framsidan signalerar man att det är det viktigaste man har att säga. ”Upphittat”-annonserna läggs längre bak och längre ner, kanske på en vänstersida eftersom folk tittar på högersidor först.
Här vet jag att det är svårt. Allt man vill ha med är ju superviktigt (särskilt efter den där genomgången ovan), så det är svårt att välja vad man ska lägga var. En lärdom jag har gjort är att försöka använda mig av olika grejer som pekar neråt för att få läsaren att läsa vidare, som när man lovar något i en texts första mening eller stycke. Ett av de vanligaste textexemplen som jag hör om från skolvärlden är inledningen till Gösta Berlings saga:
Äntligen stod prästen i predikstolen.
Redan första ordet där är tänkt att väcka intresset. Varför ”äntligen”? Vad har hänt innan dess? Det finns många sådana tricks författare har för sig.
När man layoutar får man fundera på vad motsvarigheten till sådana textuella grejer skulle vara. Pilar? Pekande fingrar? Ibland är det lösningen. Särskilt om man ska förklara ett skeende. Där är det bra att titta på hur tecknade serier gör det.
Ordningen vänster-höger-neråt fungerar, men missa inte heller möjligheten att faktiskt använda siffror. (Om du kan, så försök att få in en siffra i titeln.) Eller faktiskt allting som påbörjar någonting, så att läsarens hjärna börjar leta efter någonting som kan avsluta serien. En fråga (uppe) får svar (där nere). Ett kontroversiellt påstående (överst) åtföljs av en förklaring (nere).
Blickriktningar i bilder är lätta att använda. Låt en figur titta mot en annan, så blir den andra plötsligt viktigare.
Ännu hellre: låt någon göra en rörelse som leder dit du vill att läsaren ska titta.
Beskär bilderna
Att skära bort delar av bilder är kraftfullare än vad man tror. Professionella fotografer vet att det som inte finns med i bilden är minst lika viktigt som det som finns med.
Min sambo mötte det här när hon skulle fixa en ståuppkomiker till en fest på jobbet, surfade runt och hittade en ståuppare. Hon förhandlade fram ett pris och fixade allt. När killen sedan kom till sambons jobb kände hon först inte igen honom. Han var nämligen nästan helt flintskallig. Det var först efteråt som hon kollade in sajten igen som hon insåg att alla bilder var närbilder som var beskurna i pannan, eller från lite avstånd där han hade keps på sig. Komikern var för övrigt bra, och det är inte poängen, utan poängen att det går att dölja saker genom att beskära bilderna. Som i den här bilden:
När man beskär en bild, kommer man per definition att fokusera ”läsarens” blick på det som finns där (vi kommer till ett undantag senare). Det går att skapa känslor. Till exempel om man tar bort ögonen:
Använd skuggor
När du väl har bilder eller andra objekt, lägg till skuggor bakom dem. Inget overkill, utan bara lätta skuggor (alla åt samma håll, gärna neråt till vänster eller rakt ner). Skuggor är något vi är så vana vid från verkligheten att vi knappt tänker på dem. Men i layout och design är det något man måste lägga till. Genom att lägga till en skugga får det vi håller på med en lätt tredimensionell anstrykning, som gör att bilden sticker ut. När du väl har börjat med det här, kommer dina tidigare grejer att kännas platta, tro mig.
Gör kanterna rundade
Om du har ett föremål, såsom en knapp eller en platta med text, är det nästan aldrig så att kanten slutar tvärt i 90 graders vinkel. Snarare finns det en viss lutning, eller så kröker sig kanten. Det där kallas fasning (”bevel”), och kan ge riktigt häftiga effekter. Exempelvis kan man göra bokstäver som sticker ut från pappret (tillsammans med en snygg skugga), närapå som en relief.
Lägg saker på snedden
Allt behöver inte vara rakt upp och ner, d.v.s. vertikalt. Genom att vända och vrida på texter blir de mer levande, och genom att snedställa bilder, så blir resultatet en mer energisk slutprodukt. Så länge man inte gör det med allt, bara. Om man kombinerar det här tipset och det förra får man bilder där det ser ut som att fotografen har lutat kameran åt sidan. Det här ger mycket mer liv än när bilden är rak, ungefär som när barn lär sig att rita personer som inte står och tittar rakt emot tittaren med kroppen helt vänd framåt.
Förstör bilder och text
Rent spontant skulle jag för ett tag sedan ha sagt att bildbearbetning till stor del handlar om att göra bilder bättre: öka fokus, ta bort störande element, och öka kontraster så att bilderna blir tydligare. Men det är bara en del av processen. En annan del av processen, som jag fortfarande håller på att vänja mig vid, är att förstöra bilder. Med tanke på hur mycket man kan göra med bilder (här är fler exempel), ska man tänka på att originalbilden är ett verktyg som man kan fixa ganska mycket med. Man kan göra så att bilden har sönderrivna kanter (som en skattkarta) eller ett uppvikt hörn (som när ett klistermärke håller på att lossna – mycket vanligt). Eller så kan man göra så att bokstäverna delvis är ”bortsuddade” eller består av imperfekta kritstreck.
För mer än tio år sedan lärde jag mig en viktig sådan läxa. Jag gick på Institutet för högre TV-utbildning. En övning vi manusförfattare fick var att skriva en två-minutersscen med två personer som kommer in i ett rum, pratar lite och sedan går ut. Den scenen skulle sedan filmas av regissörerna på skolan med professionella/halvprofessionella skådespelare och ett rum som de fick möblera fritt. Min scen var okej, men det som lyfte den var regissören Joen Windahls placering av kameran och möblerna. Istället för som de flesta andra i hans klass ställa alla möbler längs väggarna, så ställde han en bokhylla framför kameran, så att man såg allting med bokhyllan lite suddigt i förgrunden. Det låter kanske som att det skulle störa, med en bokhylla framför kameran, men det var briljant. Helt plötsligt fick rummet djup. I film använder man ofta någons axel eller huvud för att göra bilden lite mer spännande. Titta gärna på det nästa gång du ser en film.
Man ser sidan på Batmans huvud till vänster i bild.
Ofta handlar det just om att ge intrycket av tredimensionalitet när man ”förstör” dem. Man får det att se ut som ett framkallat fotografi ligger ovanpå ett bord, snarare än att det är perfekt återgivet.
Ge objekten nya former
Den absolut vanligaste formen i layoutsammanhang är fyrkanten. Att bara bryta mot det mönstret gör resultatet mer spännande. Men den vanliga fyrkanten är också den enklaste formen. Jag kan exempelvis göra fyrkanter i mitt ordbehandlingsprogram utan att anstränga mig.
Så genom att bara runda hörnen har den tråkiga fyrkanten fått nytt liv. Om man känner sig riktigt äventyrlig kan man använda cirklar. Eller en oregelbunden form.
Transparens
De flesta tänker på bilder som antingen närvarande eller inte. Bild: ja, eller bild: nej. Genom att göra objekten delvis genomskinliga kan man dra ner på hur påträngande de är, så att de nästan smälter in i bakgrunden. Särskilt effektivt blir det om man dessutom lägger saker lager på lager.
Gradienter
För ett par år sedan hade jag aldrig hört talas om gradienter. Nu klarar jag mig knappt utan dem. En gradient är en gradvis övergång mellan färger:
Från gul till genomskinligt
Det här är en effekt som finns i de flesta sammanhang, från logotyper till bokomslag till knappar på webbplatser, till bakgrunder. Professionella studiofotografer använder nästan aldrig enfärgade bakgrunder, eftersom det gör bilden platt. I de fall de inte har himmelsbakgrund, har de ofta gradienter. Gå och titta på någon bild du har från en fotoateljé ska du få se. Sådana gradienter är oftast ganska enkla att göra, men är ack så effektiva. Jag använder mig nu för tiden av bakgrunder med en diagonal gradient (d.v.s. det börjar med en färg i övre vänstra hörnet och så går övergången tvärs över bilden istället för rakt ner).
Som vanligt gäller det att vara lite subtil. Gör inte gradienter mellan rött och blått, utan ljusrött och rosa, eller mellan ljusgrått och vitt, så att det ser verkligt ut.
Glöm heller inte bort att text i större storlekar också kan innehålla gradienter. Det mest berömda exemplet är kanske logotypen till Tillbaka till framtiden (vars teckensnitt du kan ladda ner här).
En av de mest använda formerna av gradienter är den varianten som finns i bilden ovan, d.v.s. från en färg (till exempel gult) till genomskinligt (så att bakgrundsfärgen syns). Det ger en mjuk övergång som går att använda på många sätt.
Textur
En vanlig färg är ganska platt. Det var ju därför vi kikade på det där med gradienter och genomskinlighet ovan. Ett sätt att piffa upp en färg, som jag aldrig hade tänkte på för något år sedan var att använda en bild av en annan yta och sedan färglägga den. Möjligheterna att kombiera färg och textur är oändliga. Det här tar IceflowStudios upp flera gånger, till exempel när han använder störningar för att skapa en metallisk yta…
Man kan använda textur både i text och bilder. Framför allt gäller det att vara lite subtil och inte dra på det för mycket.
Snitsigheter
Mitt eget sätt att layouta saker tenderar att fokusera på text, eftersom det är sånt jag sysslar med och känner mig säkrast med. Jag har till och med haft svårt att hitta saker att lägga in. Varför skulle det finnas krumelurer och snirklingar?
Man behöver dock inte gå till Madicken-snirklar eller komplicerade snickarglädje-grejer för att snitsa till det litegrand. Det kan räcka med en banderoll eller att som webbbokhandeln Amazon – göra en pil från en bokstav till en annan. En ram runt en bild eller runt ett textstycke kan göra att det sticker ut. Ett citattecken i stor storlek gör det tydligt att något är viktigt. Några enkla runda former (ganska transparenta) i bakgrunden kan göra under för att få till en spännande produkt. Å andra sidan kan man gärna kika lite på det där med Madicken-snirklar och komplicerade snickarglädje-grejer när man ändå är igång.
En sak som jag hade problem med var krökta pilar. Det är en sak man alltid har nytta av, men eftersom de är så personliga, måste man fippla lite innan det går att få till några snygga pilar. Det finns pilar att låna, men de ska ju passa också…
Spegelbilder
En variant av skuggor är spegelbilder. De ger verkligen saker en tredimensionell känsla och ger dessutom bakgrunden lite stuns. Här är ett exempel på hur en mobil (helt skapad i PhotoShop) får en spegelbild. Spegelbilden tonas ut med en gradient.
Tänk i flera steg och observera andras verk
Oavsett vad man gör finns det en sak man ska tänka på, och det är att man kommer mycket längre om man tänker i flera steg. När man ska förbättra en bild behöver man kanske gå igenom tio eller tjugo olika steg. De första stegen ser inte ut att föra en närmare resultaten, men de är nödvändiga för att man ska kunna göra de senare stegen. Exakt vilka steg man ska ta är svårt att säga i förväg, men det är mycket lättare när man börjar titta noggrannare på hur andra gör.
För en tid sedan började jag själv titta närmare på det här med infographics. Det var coolt. När jag sedan skulle göra en infographic insåg jag att jag bara hade tittat på siffrorna. Men hur gjorde man materialet tydligt? Använde man pilar? Hurdana, i så fall? Vilka färger fungerade? Hur mycket information kunde man ha med? Och så vidare. Jag gjorde en bildgoogling och tittade mer noggrant på hur infographic-bilderna var uppbyggda. Det är inte säkert att jag fick en total bild, men den tid jag la ner på att studera (kanske tio minuter, en halvtimme) gjorde att det lossnade. Sedan fick jag göra som vanligt: tänka i flera steg. Om jag har den här rutan i den här färgen, då måste den här vara i den här andra färgen, och bakgrunden måste vara en tredje färg.
Fördelen är att det finns så många lärare online. Det finns videos om nästan allting man vill lära sig. De innehåller ofta tips om vilka steg som ingår för att göra något som först ser komplicerat ut. Dela upp det, och ta det steg för steg, utan att ta i för mycket i varje steg.
Tänk också på att det finns många andra som har gjort misstag före dig. Du kommer också att göra misstag. Svälj det, lär dig och gå vidare.
Avslutning
Jag har säkert glömt massor av saker. Lämna i så fall gärna kommentarer nedan.
[Uppdatering 5:e april: la till om gradient till genomskinligt och spegelbilder, samt misstag.]
Filed under: Internet, Skrivande | Tagged: äntligen stod prästen i predikstolen, över axeln, bakgrund, beskära bild, bevel, blickriktning, design, desktop publishing, emboss, formgivning, gösta berglings saga, gimp, gradient, hur formger man en webbplats, iceflow studios, krökta pilar, layout, photoshop, selma lagerlöf, skuggor, teckensnitt, textur, transparens, typsnitt, var tittar folk på en webbsida, youtube | 2 Comments »
Blog à la Mr Chapel 