Bildkomposition för responsiv webbpublicering

Med tv-serien The Americans som förlaga byggde vi upp en responsiv temabild för webbpublicering. Vi använde oss av tre ljuskällor, kolsyrerök och ett eget specialbyggt rum. Två bilder monterades slutligen ihop till en.

Bildkomposition, fotostudio
Vi byggde upp en rumslig miljö i fotostudion med hjälp av bland annat ett gammalt fönster.

Fotograf Niklas Palmklint och jag har jobbat ihop i flera år nu. Niklas är specialist på människor. Särskilt de som befinner sig framför hans lins. Att få fram deras karaktärer i bild. Han är också majestäten av ljussättning och brukar upplysa sina elever i ämnet på Berghs och Fotoskolan.

Vi hade länge planerat att jobba tillsammans med ett eget bildexperiment i studion. Nu skulle det äntligen bli av. Idén var att återskapa en filmisk känsla från en bild till tv-serien The Americans.

Bildkomposition med ljussättning för responsiv webbpublicering

Bilden skulle fungera som bakgrundsbild till den här webbsajtens startsida. Så ett av villkoren var utrymme för rubrik och underrubrik. Bilden skapades redan från början med den förutsättningen. Och givetvis responsivt och levande, det vill säga med alla skärmbredder i åtanke.

Även ljuset, bestående av tre ljuskällor, sattes med webbpubliceringen som utgångspunkt. Vi läser från vänster till höger. Här kunde vi välja att öppna eller stänga läsningen med hjälp av ljuset. Mer om detta senare.

Bildkomposition, förlaga, The Americans, Netflix
Förlagan: The Americans, Netflix.

Bildens story

Bilduppgiften vi gav oss själva var att få fram samma typ av känsla som i förlagan. Karaktärerna från förlagan är agenter, och tycks befinna sig i en spänd situation som kräver deras odelade uppmärksamhet. Troligen står de inför en kalkylerad risk, en strategisk utmaning, där de närmar sig en person eller ett problem.

Något jag i högsta grad kan relatera till i arbetet med kommunikationsstrategi och marknadskommunikation.

Osäkert om agenterna rör sig framåt eller backar. Om jag skulle sammanfatta bilden med ett ord så skulle det vara närvaro. Närsomhelst kan scenen i bilden förbytas till ett inferno av eld och smärta.

Två bilder i kombination

Efter analysen började Niklas och jag resonera om hur bilden skulle komponeras. Niklas var tidigt inne på att bygga upp rummet i studion med hjälp av rekvisita och props. Alltså göra två bilder. Den ena på rummet och den andra på objektet. (Vi begränsade oss till en enda agent i bild.) Därefter montera ihop dem.

Rummet

Första steget var bakgrunden. Rummet är mörkt så Niklas valde ett svart tygstycke som inte ger upphov till några skuggor.

Bildkomposition, backdrop
Första steget: Backdrop och planera ljussättning och kameravinkel.

Andra steget var väggarna. Här klädde vi in studion med hjälp av stora paneler. En av panelerna var mönstrad vilket kunde ge bilden liv, tyckte vi. Ett fruktansvärt tungt fönster användes på höger sida för att återskapa en trovärdig ljuskälla därifrån. Ljuset kunde passera genom fönstret precis som på förlagan.

Effekter

Det här med röken var ett speciellt kapitel. Det går naturligtvis att stjäla rök från färdigproducerade bilder och göra montage. Men Niklas ville göra det själv. Han stack iväg och köpte kolsyreis. Jag stack iväg och köpte handskar, vilket vi saknade för att kunna hantera den där isens ofattbart låga temperaturer.

Bildkomposition, rummet
Rummet med backdrop, sidopaneler, fönster, kolsyreis, varmvatten och en stege som rekvisita.

Objektet

Slutligen objektet, agenten, som skulle vara i fokus. Både bilden på rummet och objektet hade samma kameravinkel för att få ljus och perspektiv att överensstämma. Niklas var bestämd med att ändra på förlagans ljussättning, där skuggan i ansiktet stänger läsflödet, eftersom rubriken skulle placeras på bildens vänstra sida. Ljus från höger där fönstret var, javisst, men det hårda ljuset skulle vara från vänster där läsrörelsen startade.

Läsning av bild, stängd och öppen sida

Ljussättning

Vi hade tre ljuskällor med olika uppgifter. Ett bakgrundsljus, ett ljus från fönstrets tänkta utsida och ett hårt ljus som skapar den stora högdagern från vänster sida.

Bildkomposition, ljussättning
Schematisk översikt av ljussättningen i studion. A kommer från rubrikhållet. B (backlight) och C tjänar som kantljus.
Bildkomposition, backlight, testfotografering
Testfotografering med enbart bakgrundsljus. En av tre ljuskällor.

Fotograferingens ordningsföljd

Den första bilden vi tog var på objektet. Niklas jobbade med ljusstyrkorna på kannorna tills han var nöjd. Det gällde förstås att få fram ett trovärdigt ansiktsuttryck också.

Därefter plåtade vi samma scen igen där objektet byttes ut mot kolsyreröken. Vi behöll samma kameravinkel och ljussättning. Vi kokade litervis med vatten för att få igång röken och satte igång fläktar för att få röken att sprida sig. Kolsyrerök är annars tung och lägger sig längs golvet.

Bildkomposition, kolsyreis blir rök
Dyrbar kolsyreis hälls i grytor och kastruller. Här gäller det att handla snabbt.
Bildkomposition, kolsyrerök
Dags att köra igång fläktarna.

Den färdiga bilden

Till slut monterades de två bilderna ovanpå varandra. Bilden med objektet är frilagd. Eftersom bilderna har samma ljussättning ser montaget fullt naturligt ut.

Bildkomposition, startsida, proportioner 16:9
Resultatet: Bildproportionerna är 16:9 och utrymme för rubrik har lämnats till vänster. Den huvudsakliga ljuskällan kommer från läsriktningen. Foto: Niklas Palmklint.
Bildkomposition, startsida, responsivt format
Responsiv bild med hjälp av <picture>-elementet. Bilden blir kvadratisk under 650px skärmbredd. Foto: Niklas Palmklint.
Bildkomposition, startsida
Den färdigt beskurna bilden med rubrik på webbsajtens startsida, desktop.

Du kan också kolla sajten på olika enheter i Google Resizer.

(Det här blogginlägget har lästs 23591 gånger.)

Inspirationsbrevet Maslow

    Maslow är vårt inspirationsbrev om marknadskommunikation och varumärkesutveckling. Det publiceras nån gång i månaden. Du kan avsluta din prenumeration när du vill. Läs mer om hur dina personuppgifter hanteras.