Nyhet: Gary Hustwit - Objectified!

Igår landade filmen Objectified hemma i brevlådan tillsammans med en kul textilväska som man fick med om man var snabb att boka sitt exemplar av filmen. Detta är dokumentärfilmaren Gary Hustwits andra film som denna gång handlar om produktdesign (den första: Helvetica handlade om typografi och finns även den i hyllan).


"You may not ever think about what kind of planning goes into designing simple, everyday things like toothbrushes, wastebaskets or hedge trimmers, but after seeing this movie, you will never look at any one of those objects the same way again." – Wired

Jag kan definitivt rekommendera filmen till alla som är nyfikna och intresserade av formgivning och även högskolor/universitet med utbildningar inom design/konsthantverk skulle kunna använda filmen som referensmaterial tidigt i utbildningarna. Vi möter designers från möbelindustrin till klock- och radioapparattillverkare (ex. Braun) och vi får ta del av designprocessen bakom bland annat Apples ultratunna laptop.

För egen del hade denna film inte samma genomslag som Helvetica när den kom eftersom nyhetsvärdet här inte var så stort för mig efter mina designstudier på universitetet. Men givetvis kommer jag hålla koll på vad Gary Hustwit pysslar med framöver. Hans filmer är snyggt fotade och innehåller mycket bra intervjumaterial och fantastiska ljudspår.

Lektion: Sista veckan med A-kursen!

I vecka 40 fick eleverna ut ett case som handlade om att ta fram en grafisk profil för det fiktiva kaffeföretaget Qahwa. Upplägget var ungefär detsamma som förra årets avslutande A-kursmoment (som kan läsas om här) och byggde på att man skulle följa den modell av designprocessen vi gått igenom med marknadsundersökning, konkurrentanalys, styrmöte med kund osv.

Designprocessen.

Nu i torsdags (vecka 43) skulle allt vara klart. Detta innebar inte att eleverna hade 4 veckor på sig, för vecka 41 och 42 var lektionsfria till förmån för arbetsplatsförlagd utbildning (APU). Lektionstiden som fanns till förfogande var alltså 4 lektioner à 6 timmar vilket är ganska snävt med tid för ett projekt av denna omfattning. Därför tycker jag att eleverna gjort en strålande insats! I torsdags skulle följande levereras: grafisk manual, ett falsat produktblad och en mock-up-förpackning, och det blev en hektisk dag för såväl elever och lärare som för vår gamle trofaste 4880 när allt detta skulle printas i sista sekund. Klockan 1400 sattes deadline för att vi skulle hinna äta marängsviss och avsluta kursen, men den tiden gick visst inte att hålla utan fick senareläggas till 1445.

Nedan följer några bilder från veckans aktiviteter. Fler bilder från utställningen kommer i nästa vecka så håll till godo!

Malin utövar lite mät- och skärteknik för att få perfekta mått och spikraka sidor på sitt produktblad. Noggrannhet är A och O.

Grafiska manualer i görningen. I denna manual redovisar eleverna hur de tänkt att företagets logotyp ska placeras i förhållande till andra element, på vilka bakgrunder de får placeras, vilka färger och typsnitt som får användas i olika sammanhang osv.

Benjamin får hjälp av Anh med att spaymåla några gamla ölburkar till sin mock-up.

Utställningen i skolans Café. Det kommer fler bilder i nästa vecka. Ruskigt provocerande av Benjamin att utgå ifrån Comic Sans i Qahwa-loggan ovan måste jag säga... Brrr...

Bra jobbat allihop. Ha nu ett bra lov så ses vi när B-kursen startar i vecka 45!

Tips: Hiphop i 8-bitar

På 4 dagar har de över 50.000 visningar och 5-stjärnigt betyg på Youtube.

Ett gäng ungdomar som tog studenten i våras har gjort en riktigt snygg video till en svensk hiphoplåt: Pato Pooh ft. Adam Tensta - Follow Me. Med tanke på att budgeten varit på 0 kr får man nog lov att kalla det godkänt.

Ruskigt snygg och välplanerad produktion. Missa inte! Klicka på bilden nedan.

Tips: Aktivera ClearType i XP!

ClearType är en högst välkommen teknik när det gäller fontrendering på skärm. Det handlar om hur typsnittens konturer (som ju är vektoriserade) ska avbildas på skärmen (bli rasteriserade) för bästa läsbarhet. Microsoft släppte denna teknik med Windows XP för ett antal år sedan och måste där aktiveras manuellt, men är aktiverad per automatik i Vista och Windows 7.

Tekniskt om ClearType
ClearType skapar mjukare och mer lättläst text för visning på skärm genom att utnyttja s.k. subpixlar. Varje pixel byggs upp av 3 subpixlar i färgerna röd, grön och blå som tillsammans (genom olika valörer på R, G och B) skapar färgen i pixeln (om du sätter dig riktigt nära en gammal "tjock-TV" är det lätt att se subpixlarna).

För att ett teckensnitt ska kunna visas på skärm måste vektorinformationen i fonten renderas till en pixelmatris (vi ska ju visa tecknen på en skärm som byggs upp av pixlar). ClearType kommer in i bilden när denna översättning ska ske. Att ClearType utnyttjar subpixlarna innebär i praktiken att varje pixel har tre gånger högre upplösning (varje pixel byggs ju som bekant upp av 3 subpixlar), men eftersom varje subpixel kan anta 256 olika intensitetsvalörer kan upplösningen upplevas som som mycket högre än så.

Denna bild är tagen på en LCD-skärm och visar subpixlarna in action. ClearType är aktiverat här och vi kan se att subpixlarna inbördes har olika valörer (antingen tända, släckta eller någon av de 254 valörer däremellan) och tecknen ser nästan mjuka ut även vid denna enorma förstoring. Fotografiet hjälpte Benjamin mig att ta i våras.

Nedan ser vi ett par skärmdumpar som belyser hur skillnaderna i rendering ser ut med ClearType inaktiverat respektive aktiverat (du bör klicka på bilden för att se den i sin helhet):

Med ClearType får texten en mjukare ton och känns mer behaglig att läsa.

Aktivera ClearType
Kanske sitter någon av er fortfarande på Windows XP? Det gör jag på jobbdatorn som jag kvitterade ut tidigare i höstas. Det stod också mycket klart att ClearType inte var aktiverat per default i XP. Om du vill veta hur man gör kan du läsa nedan:

Dessa fönster är aktuella när du vill aktivera ClearType i Windows XP.

Leta upp Egenskaper för Bildskärm (antingen genom att högerklicka på skrivbordet och välja Egenskaper, eller via Kontrollpanelen.) Där markerar du fliken Utseende och trycker på knappen Effekter. Här sätter du kantutjämningstekniken till ClearType. Voilà!

Läsvärt: Windows XP: Better Screen Resolution with ClearType

Tips: Kom igång med OpenType!

Typografiundervisningen i A-kursen går knappast in på djupet, men lite fakta och historik om antikvor och linjärer har vi ändå lyckats pressa in på schemat. Annat matnyttigt som vi pratat om är typsnittsuppbyggnad där begrepp som ligatur, swash och kapitäler varit återkommande. Men hur kan vi hitta dessa tecken och figurer i våra digitala typsnitt? Läs vidare så får du veta...

En samling blandade tecken du kan nå genom att fippla runt i OpenType-fonten Adobe Caslon Pro.

Tekniskt om OpenType
OpenType-fonter bygger på PostScript- och TrueType-fonterna. Det är en utveckling av TrueType men där man även tagit med det bästa ur PostScript-formatet. Ett typsnitt i OpenType-format kan innehålla 65 536 olika tecken och en rad olika finesser för förbättrad typografi. Det beror på att den baseras på Unicode (en 16-bit/2-byte teckenstandard) och inte på ASCII (8-bit/1-byte, dvs. 256 tecken). Man kan exempelvis hitta kapitäler, versala och gemena siffror, olika varianter av bråktal, en mängd ligaturer, historiska varianter av vissa tecken m.m inbakade i fonterna. Man kan också få med många andra kul specialtecken som är mycket enkla att plocka fram i program som Adobe Illustrator och InDesign om man vet var man ska leta.

Förenklat kan man säga att Adobes PostScript-format och Microsofts TrueType-format genererat OpenType, där man tagit det bästa ifrån båda formaten och skapat ett plattformsoberoende format. Du kan lätt kolla i din Fonts-mapp för att se vilka typsnitt som är PostScript, TrueType och OpenType.

Dock innehåller långt ifrån alla typsnitt i OpenType-format alla dessa finesser. Vissa OpenType-filer (.otf) är raka kopior av TrueType-fonterna (.ttf) och brukar då ha tillägget Std i namnet. Dessa utnyttjar inte fördelarna med OpenType utan är bara en kopia av TrueType-fontens innehåll. Det är heller inte alla program som kan dra nytta av funktionerna i OpenType (ex. finns det flera typografiska finesser du inte når genom Adobe Photoshop eftersom programmet inte är avsett att behandla text i). InDesign och Illustrator är dock två programvaror där fontformatet kommer till sin rätt.

Tyvärr kan man inte på förhand veta vilka specialtecken som ingår i en OpenType-font, men generellt brukar Linotype, Monotype och Adobe vara duktiga på att fylla ut sina teckenuppsättningar. Man kan leta efter Adobes och Monotypes fonter med tillägget Pro, ex. Adobe Caslon Pro eller Gill Sans MT Pro, som brukar innehålla mycket material.


Kom igång med OpenType!
Här kommer ett par handfasta tips kring hur du kan (och bör) använda OpenType-fonter.

Panelen Character ser ungefär likadan ut i InDesign och Illustrator. OpenType har dock en egen panel i Illustrator CS4 och är alltså inte inkluderad i dropdown-menyn i Characterpanelen. Skärmdumpen ovan är ifrån InDesign.

I InDesigns Window>Type & Tables-meny eller under Illustrators rubrik Window>Type hittar du alla verktyg du kan tänkas behöva för typsättning. I InDesigns Character-panel kan du enkelt sätta kapitäler, ligaturer, eller leta upp specialtecken i panelen Glyphs. Photoshop är mer begränsad i detta avseende, exempelvis finns inte Glyphs med i Photoshop alls så du måste importera specialtecken från fonter via exempelvis Illustrator om du hittat ett specialtecken du gillar.

Visste du att Times New Roman har plats för en arabisk teckenuppsättning (tror jag att det är?) i OpenType-versionen av teckensnittet? Du kommer åt dessa tecken via Glyphs.

Chanserna är goda att du sitter du på outnyttjade resurser. Börja utforska ditt typsnittsbibliotek!

Artikel: Grids (del 3/4 - Grids för webben)

Vi har i de två föregående delarna i denna artikelserie introducerat grids och kikat på tillämpningar i print. Denna del fokuserar på webbtillämpning men kommer inte att gå in på hur man rent praktiskt stylar webbsidor. Det kanske tas upp i artikelform framöver.

Precis som i trycksaker är det viktigt att ha struktur även i digitala medier. Förmodligen är det till och med ännu viktigare att layouten är väl avvägd, tydlig och användarvänlig eftersom det finns så många andra snygga och roliga webbsidor bara några knapptryckningar bort. I och med skrivandet av denna artikel fick jag chansen att testa 960-gridsystemet men givetvis kan man arbeta enligt gyllene snittet eller enligt andra geometriska förhållanden om man så vill.

960 px är tillräckligt!
960.gs är ett utmärkt exempel på där man försöker visa på hur mångsidigt ett 960 pixlar brett gridsystem kan vara. Till denna artikel har jag valt att utgå ifrån 12-spaltsversionen av detta system när jag skapat en webblayout för en portfolio/weblog (men jag utnyttjar bara 820 pixlar i bredd till innehållet, läs vidare...).

Gridsystemet byggs upp på ett liknande sätt som när pressen arbetar med layout (läs Grids - del 2/4), där ytan delas in i spalter. 960-gridsystemet bygger i detta fall på 12 spalter (12 x 60 px), spaltmellanrum (11 x 20 px) och spaltfyllnad i ytterkanterna (2 x 10 px). Se figur nedan.

Guides på enklaste sätt utdragna till rätt positioner i Illustrator. Arbetsytan är 1280x800 vilket ger oss en idé om hur bred sidan blir i en av dagens standardupplösningar*.

Det blir visuellt mer tilltalande och enklare att tyda gridsystemet om vi sätter lite färg på det.

Eftersom jag redan innan betämt innehållet på sidan så underlättade det framtagningen av en layout som passar mina behov. Som synes utnyttjas inte de yttre spalterna alls varför innehållet snällt får samsas om en bredd på 960-((2x60)+2x10)=820 pixlar.

Så här ser sidan ut på en skärm med upplösningen 1280x800. De 820 pixlarna ser ut att räcka gott och väl för denna webbsida som nu blir lätt och luftig utan att kännas tom.

Att skapa gridet och att ta fram layoutförslaget ovan tog ungefär en halvdag och ännu är själva webbsidan inte i närheten av klar. Ska man fortsätta skapa webbsidan kommer det att handla om färgval, texturer och typografi där olika varianter ska testas och dessutom måste ju sidan vara snabbnavigerad och enkel att uppdatera. Det är några veckors arbete kvar om man ska gå vidare med projektet alltså...


Sista delen av denna artikelserie blir av sammanfattande karaktär. Håll till godo!

* Att uppösningen 1280x800 benämns som standardupplösning ovan baseras på Google Analytics statistik om besökare på denna sida (lbsgraf.blogspot.com) där 31% hade denna upplösning vid besöket på sidan, 21%-1680x1050, 19%-1280x1024, 9%-1024x768 (som är lägsta uppmätta upplösning) och övriga har haft upplösning i ungefär samma storleksordning.

Reportage: Bokmässan 2009

Efter en trevlig after-work med kollegorna förra fredagen tog jag 20.02-tåget mot Göteborg. Bokmässan, den 25:e i ordningen, skulle öppna 09.00 på lördagen så det kändes rationellt att åka upp redan dagen innan och sova hos föräldrarna i Kungsbacka för att slippa gå upp så tidigt.


Med nyförvärvad kamera på axeln och anteckningsboken från Moleskin i fickan betalades inträde på mässan. Huvudsyftet med besöket för min del var att ta del av miniföreläsningarna på Grafiska torget, och att i andra hand köpa böcker. Det skulle jag ha igen sen när de böcker jag ville ha var slutsålda på eftermiddagen. Mitt program såg ut som följer:

Grafiska torget:
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

Forskartorget:
Lö 10.00 - Insekter med macrofoto
Lö 13.30 - Hacktivism

Forskartorget var ett kul initiativ där författare och forskare berättade om sina böcker och publikationer. Ett exempel är en insektsforskare som berättade om sitt macrofotograferande och jämförde skalbaggars mönsterkonstruktion (på skalet) med pointillistiska målningar från 1890-talet (ex. Georges Seurat). Ett annat intressant föredrag på Forskartorget hölls av en kille som doktorerat på HDK i modedesign, och handlade om Hacktivism. Musiker kan sampla, datornördar kan hacka. Modeskapare göra precis detsamma menade han. Man kan sticka en D&G-väska, återvinna gamla kläder genom att plocka delar ifrån dem och sätta ihop till något nytt. Det bjöds också på en modevisning där bl. a. Björn Ranelid kom in som gubben i lådan iförd en högst speciell outfit. Se foto nedan.

Björn Ranelid trivs i centrum för allas uppmärksamhet.

På Grafiska torget var förmodligen föredraget om företagsbloggar det som gav mig mest. InDesign-föredraget handlade om formatmallar och Ikea-föredraget handlade om en historisk beskrivning av företagets marknadsföring, och som vanligt handlade det då mest om Leon Nordin och gammal 70-talsreklam. Reklambyråerna Brindfors och Forsman/Bodenfors, som på 80- och 90-talet haft stort inflytande i Ikeas marknadsföring, nämndes endast i förbigående. Jag hade förhoppningar om att få höra några kommentarer kring Ikeas senaste idéer kring typsnittet Verdana också, men icke...

Gustav Bergman som pratade om företagsbloggar, och i synnerhet så innehåll och språkbruk i dessa, menade att företagsbloggar generellt är stela och produktorienterade medan reklambyråbloggar står på motsatt sida med ett allt för lekfullt och personligt språkbruk och innehåll. Han menar att journalisten har de språkmässiga verktygen att skriva bra texter för blogg. Innehållsmässigt är det viktigt att anpassa sig till sin målgrupp, men här finns tre grundläggande regler: ENGAGE, ENTERTAIN, EDUCATE. Någon, helst flera av dessa, måste uppfyllas i varje blogginlägg för att det ska kännas meningsfullt att läsa texten. Läsaren ska bli engagerad, road eller få kunskap om något.

Kolla in Gustav Bergmans presentation här.


Som vanligt var det vansinnigt mycket folk på mässan, och som tur är gör man det bara en gång om året. Men som min gamle konfirmandledare sa för ett antal år sedan: "Den som missar en mässa missar en massa!". Ett uttryck som uppenbart är tillämpbart även utanför kyrkans väggar. Nu börjar nedräkningen till den 26:e bokmässan i ordningen.