Min läslista

Din läslista är tom.

Sök på capdesign.se

En enkel match

TEXT Per Torberger
Annons

Måla hela världen på ett kick

Det finns en uppsjö av smarta verktyg för att skapa färgpaletter på webben. Men många är rätt dåliga. Här är CAP&Designs favoritverktyg som hjälper dig att matcha färgerna rätt på ett kick.

Kuler heter den mest kända tjänsten för att skapa färgpaletter på webben. Bakom Kuler ligger Adobe, som också har integrerat tjänsten i flera av sina program från och med CS 5.

Kuler (kuler.adobe.com) är på sina sätt en fantastiskt smidig och bra tjänst. När du behöver hitta en bra färgpalett att arbeta med i ett projekt, kan du helt enkelt besöka Kuler, titta bland alla sparade paletter, välja en och ladda ner. Arbetar du i Adobe-program version fem eller högre, behöver du inte ens besöka webben för att komma åt alla sparade paletter – du når dem via programmen.

  • Kuler är en välkänd och smart tjänst för att ta fram färgpaletter. Vill du inte göra det själv, kan du ladda ner någon annans palett. Med Kuler kan du också plocka färger ur ett foto.

Sitter du med äldre versioner av Adobes program, men ändå tycker att webben ligger lite för långt bort, finns det en klient att ladda ner. Då får du starta klienten från datorn och bläddra bland paletterna där i stället.

Vill du däremot göra det lite svårare för dig och sätta ihop din egen palett, krävs det att du går till webbsidan. För att skapa en palett har du två metoder till hands. Antingen kan du ladda upp en bild och plocka färger ur den. Eller så börjar du från grunden och hittar en basfärg, som Kuler sedan hjälper dig att matcha mot andra färger.
Kulers paletter innehåller fem färger. Du har sex grundmetoder att matcha ihop färgerna på, bland annat analogt, monokromt, komplementärt och i toner. Du kan också skapa paletten helt för hand.

Fördelen med att använda Kuler jämfört med att göra allt helt för hand, är att du sparar en hel del tid. Med hjälp av grundmetoderna hjälper Kuler dig att snabbt hitta kompletterande färger till din palett utifrån den basfärg du har valt. Varje färg specificeras också med många olika värden – hsv, rgb, cmyk, lab och hex – vilket gör att du slipper sitta och mäta och läsa av.

  • Även på Color Scheme Designer kan du sätta ihop din palett med olika metoder. Här kan du också se en uppdelning i primära och sekundära färger.

Kuler är inte bara en dans på rosor. Det kräver trots allt en del arbete och nyfikenhet för att komma igång och hitta fungerande paletter. Trots det finns det mycket tid att spara i förlängningen.

Ett mycket starkt alternativ till Kuler är Color Scheme Designer. Det är ett lättanvänt och mycket kompetent verktyg, som dessutom är väldesignat.

I grunden är Color Scheme Designer och Kuler funktionsmässigt lika varandra. Också i Color Scheme Designer har du sex grundmetoder för att skapa paletter. Du kan inte skapa paletten helt för hand, men du kan å andra sidan justera inom de olika grundläggande metoderna mycket mer än hos Kuler.

En fördel hos Color Scheme Designer gentemot Kuler är att du kan plocka ut flera paletter ur en och samma palett. Du får således en palett baserad på primärfärgen, en på sekundärfärgen och så vidare.
Color Scheme Designer har också gott om möjligheter att testa dina färgval på olika sätt. Med ett knapptryck får du upp en skisswebbsida som har färgsatts med den palett du skapat. Visningen är visserligen primitiv, men den ger ändå lite en känsla av hur det skulle kunna se ut på en sajt.

  • Med Checkmycolours kan du kolla om du har tillräcklig kontrast och annat på din webbsida. Smart och snabbt, men inte helt enkelt att överblicka resultatet.

Men det finns också andra, mycket viktigare testmöjligheter. En av menyerna i toppen på sidan heter Colorblind. I menyn finns en lista på olika typer av färgblindhet. Väljer du någon av dem, får du se din palett som en människa med den synnedsättningen uppfattar färgerna.

Färgblindhet är ganska vanligt, enligt sajten har närmare 15 procent av jordens befolkning nedsatt färgseende. Även i lilla Sverige finns det en hel del människor som riskerar att få problem med dina färgval.

En uppenbar brist med Color Scheme Designer jämfört med Kuler är förstås kopplingen till Adobes program. Däremot går det att exportera din palett som en färgkarta för Photoshop. En smidig funktion som vi inte sett hos Kuler är också att du med ett knapptryck kan exportera färgernas hex- och rgb-värden som text.
Testa själv på colorschemedesigner.com.

Det finns som sagt många, många andra webbtjänster som låter dig sätta ihop och spara färgpaletter. Dessa två är dock de mest kompletta och lättanvända.

  • Pictaculous gör inget annat än att plocka färager ur en bild och skapa en palett ur dem.

Däremot finns det flera begränsade tjänster som kan vara bra på olika sätt. En av dem är Pictaculous, pictaculous.com. Den fungerar så att du laddar upp en bild på sajten, som sedan analyseras. Därefter får du dels se några av de färger som finns i bilden, dels förslag på färgpaletter som ligger nära dessa färger. Paletterna hämtas från användarnas bibliotek på Kuler och en annan tjänst, Colourlovers, och är alltså användargenererade. Smart och snabbt, även om det kan ta en stund att ladda upp bilden och få den analyserad.

Ett verktyg som kan vara bra som försäkring för webbdesignern är Checkmycolurs. På sajten kan du fylla i en webbadress och bland annat få besked om sajtens färger är tillräckligt kontrastrika. Checkmycolours finns på checkmy­colours.com.

Ytterligare ett verktyg som kan vara bra att ha i färglådan är någon av Pantones olika telefon-appar. Du hittar dem på pantone.com/pagespantone/category.aspx?ca=86.

Genväg till lyckade typsnittskombinationer

Att hitta ett typsnitt går ofta snabbt. Att hitta kompletterande snitt kan däremot ta mycket tid och kraft. Enkla regler kan vara räddningen. Eller varför inte ta tekniken till hjälp?

Vilka typsnitt passar egentligen ihop med varandra? Finns det en gyllene regel, eller är det empiriskt arbete som väntar varje gång – att testa, testa, testa tills rätt kombination visar sig på skärmen?
Typsnittskombinationer är något som har sysselsatt designer i många, många år. Ett exempel på det är en tabell som visar hur väl 22 olika typsnitt fungerar tillsammans, första gången publicerad i tidningen U&lc 1992. Uppenbarligen fanns behovet redan då, men utvecklingen i utbudet av typsnitt de senaste 20 åren har både sprungit ifrån U&lc:s tabell och gjort behovet av guidning än mer akut.

  • Tabellen Mixing typefaces från U&lc 1992 berättar hur väl typsnitt går tillsammans på en tregradig skala.

I dag finns det andra, bättre verktyg. Ett av dessa är Type DNA. Programmet hjälper dig att hitta kombinationer av typsnitt med ett enkelt klick – hur det fungerar får du läsa mer om längre fram. Innan vi går in på snabbverktygen får du här en kort uppdatering av de olika strategier som finns för att hitta bra typsnittskombinationer. Det finns trots allt en hel del bra metoder som gör kombinerandet lättare. Här är några av de vanligaste råden.

  • 1. Sikta på total harmoni. Vill du ha ett väldigt harmoniskt uttryck, arbeta med bara en familj. Kom bara ihåg att välja en familj med tillräckligt många vikter och varianter, så att du kan variera dig. Sedan är det bara att börja arbeta. Variation hittar du i valet av varianter, vikter och grad.
  • 2. Kombinera antikva med sanserif. En självklar och traditionell metod för att skapa variation är att kombinera ett antikvasnitt med en sanserif. Det är också här många fastnar. Vilka går ihop? Tipsen nedan kan ge vägledning.
  • 3. Välj från olika klasser. Om du har valt en diagonalantikva för brödtexten, välj något annat för rubriken. Alltså, sikta på att kombinera snitt från olika typsnittsklasser. Väljer du snitt från samma klass, blir de gärna för lika. Då får du ingen verklig kontrast utan bara ett irriterande misspass.
  • 4. Vill du ha kontrast, se till att göra den ordentlig. Kombinera inte en halvfet med normal eller fet. Kontrastera starkt och tydligt.
  • 5. Hitta likheter mellan snitten. Det här handlar om att hitta vissa gemensamma drag hos typsnitten. Har du ett öppet »a« i det ena snittet, fungerar det ofta bättre om det andra snittet har samma öppna »a«. Likheter i bredd och x-höjd gör också typsnitten lättare att kombinera.

Det finns som sagt mängder med råd och tips om hur du kan tänka för att hitta lyckade kombinationer. På nätet hittar du till exempel Hoefler & Frere-Jones artikel Fyra tekniker för att kombinera typsnitt (typography.com/email/2010_03/index.htm), Indra Kupferschmids guide till lämpliga snitt att kombinera med Helvetica (fontshop.com/blog/newsletters/april10c/indexEMAIL.html) och
Daniel Will-Harris omfattande lista på typsnitt som fungerar tillsammans (will-harris.com/typepairs.htm). Vill du ha mer finns länksamlingar hos bland andra Smashing Magazine (smashing­magazine.com/2010/05/06/50-helpful-typography-tools-and-resources) och Bon FX (http://bonfx.com/14-top-typeface-and-font-combinations-resources).

  • Hoefler & Frere-Jones tipsar om fyra tekniker för att matcha typsnitt.

Genvägen förbi den empiriska metoden är att köpa grovjobbet. Det kan du göra med Type DNA. Type DNA är lite som en typsnittshanterare på steroider. Ja, det kan hålla ordning på dina typsnitt, men det kan också göra mycket mer.

Som typsnittshanterarare är Type DNA ett smidigt verktyg som erbjuder åtminstone de vanligaste funktionerna. Du kan sortera snitt i grupper, se vilka typsnitt du har installerade, duplikat, trasiga snitt och annat. Du kan dock använda programmet parallellt med din vanliga typsnittshanterare, och bara dra nytta av de extra funktioner Type DNA erbjuder.

Det är i de extra funktionerna Type DNA sticker ut. Type DNA analyserar alla dina typsnitt och tittar på deras former och andra detaljer. Utifrån analysen kan programmet sedan föreslå bra kombinationer av snitt.

  • Type DNA:s gräns­­-snitt som det visas i webbdemon. Välj ett rubriktypsnitt och få förslag på brödtexttypsnitt. Eller tvärtom.

Du kan till exempel välja ett brödtexttypsnitt och be om förslag på vilka typsnitt som skulle fungera i rubrikerna. Eller tvärt om. Visserligen är inte alla förslag lysande varje gång, men för dig som har hundratals typsnitt installerade, är det ett enkelt sätt att begränsa alternativen.

Type DNA kan användas som fristående program, men också som instick i Adobe CS 5-program och senare. Insticket blir en egen verktygspanel och lägger till ett antal funktioner specifika för de olika CS-programmen.

Läs mer om Type DNA och testa programmet online på typedna.com.

Ett enkelt men begränsat alternativ till Type DNA är appen Font combinations från Bon FX. Appen gör det möjligt att snabbt testa kombinationer mellan 45 olika typsnitt. Smidig och snabbjobbat, men den kraftigt begränsande typsnittspaletten gör det tveksamt om appen är värd de 15 kronor den kostar.

Hitta styrkan i aparta bilder

Vissa bilder går bara inte att kombinera. De drar åt olika håll, de har olika innehåll och färg, de är närbilder och panoramor. Fast det är precis som det ska vara. Och det finns knep också för de värsta fallen.

Bo Bergström, art director och författare till en smärre bokhylla böcker om visuell kommunikation, ofta med bilden i fokus, gjuter olja på de värsta vågorna.

– Har du ett antal bilder som krockar på olika sätt i en artikel, katalog eller sajt, så är det egentligen inte ett problem. Tvärtom, det är något som är väldigt lockande för läsaren.

Bo Bergström baserar detta på teorier om lärande, där just kontraster blir en hjälp i inlärningen och för minnet.

– Strategin bakom detta som handlar om att man förstärker betraktarens motivation eller intresse med kontrasterna. De skapar ett slags framåtrörelse, som håller intresset vid liv, säger han.

I till exempel en magasinsdesign fungerar det på samma sätt – kontrasterna ger läsaren ständigt nya överraskningar, vilket ökar intresset.

– När du får en överraskning på varje ny sida är det ruskigt stimulerande för hjärnan. Så ett antal bilder som inte stämmer överens kan vara något formgivaren bör eftersträva. Det borde göras lika medvetet i designbranschen som det görs inom inlärning, säger han.

  • Bo Bergström tipsar om Pompe Hedengrens fina broschyr för Stadsteatern 2012. Starka kontraster mellan när- och avståndsbilder, mörka uppslag mot ljusa, och mitt i allt detta ett uppslag som är liggande.

Ytterligare en effekt av bilder som är väldigt olika är att de stimulerar minnet.

– Variationen gör att vi kommer ihåg berättelsen bättre. Och vill vi gå tillbaka in i materialet, gör variationen att vi lättare hittar tillbaka till där vi var tidigare. Du minns att det var vid en viss bild, säger Bo Bergström.

– Så det är kommersiellt riktigt också.

Men det finns gränser. Blir krocken för stor och bilderna så annorlunda att det inte längre finns någon röd tråd, då har det gått för långt, enligt Bo Bergström.

Det finns också det helt omvända problemet, när du inte alls har en massa omaka bilder utan i stället en hel massa text men bara en bild. Pär Ljung, tidnings-ad på Rubrik i Göteborg, har sprungit på detta problem flera gånger.

– I de flesta fall jobbar jag mycket med rubriken i stället och gör en typografisk lösning, som ett slags illustration. Går det, drar jag också upp bilden maximalt så att den enda bilden får ta mycket plats, säger han.

Måste bilden användas på fler än en sida, jobbar Pär Ljung mycket med beskärning. Då gör han det rejält – på en sida kanske bilden bara visar ett öga, på nästa hela ansiktet.

För att kunna jobba så fritt med en bild krävs att den är av bra kvalitet. Så är inte alltid fallet. Pär Ljung själv är van vid bilder med begränsad kvalitet, men tycker egentligen inte att det behöver vara ett problem.

– Var inte rädd att dra på en dåligt tagen bild. Gör en grej av det fula. Förstärk effekterna i till exempel Adobe Lightroom. Det finns en mängd olika gratis förinställningar man kan ladda ner för att uppnå olika sorters effekter. Det kan rädda den mest tråkigt tagna inomhusbild. Var inte rädd för att exprimentera, säger han.

  • Ett liggande uppslag ur Stadsteaterns broschyr för 2012.

Det dåliga kan tillföra värde i kombination med det bra.

– Det skapar ett slags dynamik att det inte bara är proffsbilder rätt igenom. Och dåliga bilder kan lyfta fram de bättre bilderna, säger Pär Ljung.

– Det finns så otroligt många bra bilder i dag. Ibland kan det helt enkelt vara väldigt befriande att få jobba med en bild där det känns att den är tagen av en människa. Jag tycker att det finns en trend i hela samhället just nu där vi går tillbaka till det analoga, det handgjorda. Det handlar om att det finns känsla där, inte bara teknik, säger han.

Pär Ljung har många av knep för att hantera bilder som av någon anledning inte håller måttet. Det kan vara lättare att kombinera svartvita bilder.

– Om bilderna har väldigt olika färg eller färgstick kan man alltid jobba med svartvita bilder. Svartvitt är snyggt, det brukar dessutom många fotografer gilla. Friläggningar är ett annat knep, säger han.
Är bilden väldigt liten och behöver bli större, kan programmet Photo Zoom bli räddningen.

– Det är ett väldigt bra program som gör att jag kan dra upp bilderna – ibland ända upp till dubbla storleken, säger Pär Ljung.

Så, nästa gång du sitter med en bunt omaka eller dåliga bilder, oroa dig inte. Dåliga bilder kan räddas med olika knep. Väldigt olika bilder? Försök inte jämka dem samman. Som Bo Bergström säger:

– Låt skillnaderna komma fram i stället för att dölja dem. Låt bilderna krocka och bråka med varandra helt enkelt.

Annons
Annons
Annons

Magasinet

magimage
magimage
2019
No4

Vi pratar med Tecken Signs | Bokstavsillustratören Sofie Björkgren-Näse | Typsnittformgivarna So-Type | Ett samtal om typografi med ATypI | Typotugg | Gutenberg till Opentype

Besök vår shop
magimage
magimage
2019
No3

Pond Designs förpackningsprocess | Tomorrow Machine och framtidens förpackningar | Avkodade förpackningar | Brobygrafiska om varumärkesbärare | Årets PIDA-vinnare | Jake Knapps Design Sprint | Laptop-test

Besök vår shop
magimage
magimage
2019
No2

Interaktiva affischer med Pangpangpang | Visual Arts resa | The Emotional Art Gallery | Galleri: The Pavilion | De formger för Times Square | Personporträtt: Åsa Kax Ideberg | TBWA moderniserar

Besök vår shop
magimage
magimage
2019
No1

Fotorealistisk 3D hos Foam Studio | Offentlig konst i 3D | Galleri med Sven Prim | Ines Alpha sminkar med 3D | The Reprap Story | Omvärldsspaning | Framtiden för 3D | Vinetiketter för världen från Karlstad

Besök vår shop
magimage
magimage
2018
No4

Personporträtt med fotografen Weroncka Gȩsicka | Illustrera med papper | Flat design | Att välja bild | Konflikt och Kreativitet | Platt formagivning tar steget in i framtiden | Så når du betraktaren | Analys av Ericssons nya logotyp

Besök vår shop
magimage
magimage
2018
No3

Så jobbar Tele2 Inhouse | Lean design för formgivare | Effektiv utomhusreklam | Galleri: Björn Persson | Inhouse: Stockholms stadsbibliotek | Anti-copying in design | Inhouse: MoMA | Intervju: Christina Knight

Besök vår shop
magimage
magimage
2018
No2

Sthlm signs handmålar | Nordblicks nya profil | Semiotik i grafiken | Galleri: Simon Hjortek | Löwengrips redesign | Designa effektiva logotyper | Att redesigna eller ej | Nystartade studion Ulmaja Wilsson | Vi testar Loupedeck

Besök vår shop