Valovuototehoste: filmin lämpimät hohteet suunnittelussa

Valovuototehoste on lämmin oranssi, punainen ja keltainen hohde, joka syntyy hajavalon osuessa valokuvafilmiin. Valo pääsee sisään yleensä löysästä takakannesta, kuluneesta tiivisteestä tai filmilatauksen aikaisesta raosta. Filmillä se oli vahinko. Suunnittelussa siitä on tullut tunnelma: nostalginen, aurinkoinen ja hieman epätäydellinen. Voit jäljitellä sitä sijoittamalla lämpimänvärisiä pehmeitä liukuvärejä kuvan reunalle ja sekoittamalla ne kuvan päälle. Alla olevat yksityiskohdat saavat sen näyttämään aidolta päälle liimatun sijaan.

Miltä aito valovuoto näyttää

Koska valo tulee raosta, vuoto alkaa lähes aina reunasta tai kulmasta ja häipyy sisäänpäin. Värifilmillä hohde kulkee yleensä heikon pään syvästä punaisesta oranssin kautta keltaiseen ja lähes valkoiseen, missä valo oli voimakkainta. Se kirkastaa kuvaa eikä tummenna sitä, eikä sillä ole terävää ääriviivaa.

• Sijainti: reuna tai kulma, usein vain yksi sivu.
• Väri: punaisesta oranssin kautta vaaleankeltaiseen, lämpimimmillään hohteen ulkoreunalla.
• Muoto: pehmeitä pystyjuovia tai hajanaista hohdetta, ei koskaan täydellistä ympyrää keskellä.
• Vaikutus: lisää valoa ja vaalentaa kohdalleen osuvia varjoja.
• Vaihtelu: kaksi ruutua ei koskaan vastaa toisiaan, mikä on osa viehätystä.

Kopioitavat valovuotoliukuvärit

Jokainen näistä on yksi CSS-liukuväri, joka häipyy läpinäkyväksi, joten sen voi sijoittaa valokuvan tai tumman taustan päälle. Tässä ne näkyvät yksinään tummalla pohjalla. Valokuvan päälle voit sekoittaa ne seuraavan osion ohjeilla.

Näin lisäät valovuodon CSS:llä

Aseta liukuväri kuvan yläpuoliselle tasolle ja käytä screen-sekoitusta, joka vain vaalentaa, aivan kuten hajavalo. Pienennä peittävyyttä, kunnes kuva erottuu yhä selkeästi. MDN:n mix-blend-mode-viite luettelee muut tilat; myös lighten ja soft-light kannattaa kokeilla.

.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;
}

Saat filmimäisemmän vaikutelman lisäämällä rakeisuutta kaiken päälle ja lämmittämällä varjoja hieman. Rakeiset liukuvärit ja CSS-liukuväri kuvan päällä käsittelevät molempia kerroksia.

Tarkkaile myös värien järjestystä. Useimmat epäuskottavat vuodot pysyvät tasaisen oransseina reunasta reunaan tai muuttuvat pinkeiksi kirkkaassa päässä. Pidä kuumin kohta vaaleana ja hieman keltaisena, anna sen jäähtyä meripihkan kautta punaiseksi ja punaisen kadota kuvaan näkyvän reunan sijaan.

Missä valovuodot toimivat ja missä eivät

Valovuodot sopivat valokuvaajille, elokuvafestivaaleihin, muusikoille, kesäkampanjoihin, matkailuun ja kaikkeen nostalgiseen. Ne yhdistyvät luontevasti retroliukuvärien paletteihin ja lämpimiin, haalistuneisiin kuviin. Ne sopivat heikommin täsmällisille, teknisille brändeille, koska niiden koko idea on epätäydellisyys.

Valovuodot videossa ja liikkeessä

Videoissa valovuotoja käytetään usein siirtyminä: lämmin heijaste pyyhkäisee kuvan poikki noin puolessa sekunnissa, kirkastuu lähes valkoiseksi ja paljastaa seuraavan leikkeen. Pidä ne lyhyinä ja satunnaisina. Yksi vuoto kohtausten välillä tuntuu filmiltä; vuoto jokaisessa leikkauksessa tuntuu suodatinpaketilta.

Staattiseen julkaisuun, joka tarvitsee lämpöä ilman lisäkerrosta, lämmin elävä tausta tekee saman työn hillitymmin. Gradientlyssä Markin valo ja rakeisuus renderöityvät elävänä kaikissa koissa, ja sen rauhallisin alue siirtyy itsestään sanojesi taakse. Aurinkoinen, filmimäinen pinta ei siis sijoita kirkkainta kohtaansa otsikon taakse. Studiossa lisätyt kuvat voivat myös saada lämpimän väripesun Markin väreissä, joten kuva ja tausta jakavat saman hohteen. Muotoja ympäröivästä valosta kertoo hohdetehoste, ja valokuvaajille erityisesti valokuvaajan brändäys.