Lyslekk-effekt: varm filmglød i design

En lyslekk-effekt er den varme oransje, røde og gule gløden som oppstår når uønsket lys når fotografisk film, vanligvis gjennom et løst bakstykke, en slitt tetning eller en åpning under innlasting. På film var det et uhell. I design har det blitt en stemning: nostalgisk, solfylt og litt uperfekt. Du kan gjenskape den med myke gradienter i varme farger ved kanten av bildet, blandet over et fotografi. Detaljene nedenfor gjør at effekten ser ekte ut fremfor pålimt.

Slik ser en ekte lyslekk ut

Fordi lyset kommer gjennom en åpning, starter en lyslekk nesten alltid ved en kant eller et hjørne og tones innover. På fargefilm går gløden vanligvis fra dyp rødt i den svakeste enden gjennom oransje til gult og nesten hvitt der den var sterkest. Den gjør bildet lysere, ikke mørkere, og har ingen hard kontur.

• Plassering: ved en kant eller et hjørne, ofte bare på én side.
• Farge: rødt til oransje til blekgult, varmest ved glødens ytterkant.
• Form: myke loddrette striper eller en diffus lysflekk, aldri en perfekt sirkel i midten.
• Virkning: tilfører lys og bleker skyggene der det faller.
• Variasjon: ingen to filmruter er like, og det er en del av sjarmen.

Lyslekk-gradienter du kan kopiere

Hver av disse er én CSS-gradient som tones til gjennomsiktig, slik at den kan ligge over et fotografi eller en mørk bakgrunn. Her vises de alene på mørk bunn. Over et fotografi blander du dem som beskrevet i neste seksjon.

Slik legger du til lyslekk i CSS

Legg gradienten på et lag over bildet og bland med screen, som bare gjør bildet lysere, akkurat som uønsket lys. Senk opasiteten til fotografiet fortsatt er tydelig. MDNs referanse for mix-blend-mode viser de andre modusene. lighten og soft-light er også verdt å prøve.

.photo {
  position: relative;
  isolation: isolate;
}

.photo img {
  display: block;
  width: 100%;
}

.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 45% 80% at 0% 50%,
    #fff3c4 0%, #ffb547 18%, #f0612e 38%, #a3202a 58%, transparent 82%
  );
  mix-blend-mode: screen;
  opacity: 0.75;
  pointer-events: none;
}

For mer filmpreg legger du korn over alt og varmer skyggene litt. Kornete gradienter og gradientoverlegg i CSS dekker begge lagene.

Pass også på fargerekkefølgen. De fleste lite troverdige lyslekk holder seg ensartet oransje fra kant til kant eller blir rosa i den lyse enden. Hold det heteste punktet lyst og svakt gult, la det kjøles gjennom rav til rødt, og la rødt forsvinne inn i bildet fremfor å stoppe ved en synlig kant.

Hvor lyslekk fungerer, og hvor det ikke gjør det

Lyslekk passer til fotografer, filmfestivaler, musikere, sommerkampanjer, reise og alt nostalgisk. De passer naturlig med retrogradientpaletter og varme, falmede fotografier. De passer dårligere til presise, tekniske merkevarer, fordi hele poenget er ufullkommenhet.

Lyslekk i video og bevegelse

I video brukes lyslekk ofte som overganger: et varmt lysglimt sveiper gjennom bildet i omtrent et halvt sekund, topper seg mot nesten hvitt og avdekker neste klipp. Hold dem korte og bruk dem sparsomt. Én lyslekk mellom scener føles som film. Én på hvert klipp føles som en filterpakke.

For stillbildeinnlegg som trenger varme uten overlegg, gjør en varm, levende bakgrunn den samme jobben mer stille. I Gradiently gjengis Markens lys og korn live i hver størrelse, og det roligste området flytter seg bak ordene av seg selv. En solfylt, filmaktig overflate legger dermed aldri sitt lyseste felt bak en overskrift. Bilder lagt til i Studio kan også få en varm lavering i Markens farger, slik at bilde og bakgrunn deler gløden. Se glødeffekt for den beslektede effekten med lys rundt former, og profilering av fotografer for fotografer spesielt.