# Valovuototehoste: filmin lämpimät hohteet suunnittelussa

[Canonical HTML page](https://gradiently.design/fi/guide/light-leaks)

Vanhan valokuvan reunan meripihkanväriset juovat olivat kameran vika. Nyt ne luovat yhden suunnittelun lämpimimmistä tunnelmista. Näin valovuodot toimivat ja näin teet uskottavan digitaalisen version.

## The short version

- Valovuoto on lämmin hohde tai juova, joka syntyy hajavalon päästessä filmille kameran raosta.
- Aidot valovuodot ovat yleensä kuvan reunalla ja kulkevat punaisesta oranssin kautta keltaiseen, usein kohti valkoista siellä, missä valo oli voimakkainta.
- Uskottavan digitaalisen valovuodon voi tehdä pehmeillä, lämpimänvärisillä säteittäisillä tai lineaarisilla liukuväreillä kuvan päällä screen- tai lighten-sekoitustilassa.
- Valovuodot kannattaa pitää erossa tekstistä, sillä kirkas kohta sanojen takana heikentää niiden kontrastia.
- Videossa alle sekunnin ajan kuvan poikki kulkeva valovuoto luo lempeän siirtymän leikkeiden välille.

**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.

- Vasemman reunan vuoto: `radial-gradient(ellipse 45% 80% at 0% 50%, #fff3c4 0%, #ffb547 18%, #f0612e 38%, #a3202a 58%, transparent 82%)`
- Kulman valottuma: `radial-gradient(circle at 100% 0%, #fff7d6 0%, #ffc15a 14%, #ff7a3c 30%, #c2283a 48%, transparent 72%)`
- Pystyjuova: `linear-gradient(100deg, transparent 0%, transparent 52%, #b3262e 60%, #ff8a3d 68%, #fff0b8 74%, #ff8a3d 80%, #b3262e 88%, transparent 96%)`
- Alareunan hohde: `radial-gradient(ellipse 70% 50% at 50% 110%, #ffe0a3 0%, #ff9d4a 22%, #e0473a 42%, #6e1a35 62%, transparent 85%)`

Neljä klassista vuodon sijaintia. Kirkas keskus on kuvan reunalla tai sen ulkopuolella, joten vain hiipuva valo näkyy, kuten aidossa vuodossa.

- Kuuma ydin: #fff3c4
- Meripihka: #ffb547
- Mandariini: #f0612e
- Filminpunainen: #c2283a
- Häipyvä viininpunainen: #6e1a35

Valovuodon paletti hohteen kirkkaimmasta kohdasta siihen, missä se katoaa kuvaan. Säilytä järjestys: vuoto ei koskaan muutu keltaiseksi heikossa päässä.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) luettelee muut tilat; myös `lighten` ja `soft-light` kannattaa kokeilla.

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

Vasemman reunan vuoto minkä tahansa kuvan päällä. Liukuväri päättyy läpinäkyvään, ja screen-sekoitus voi vain lisätä lämpöä ja valoa.

Saat filmimäisemmän vaikutelman lisäämällä rakeisuutta kaiken päälle ja lämmittämällä varjoja hieman. [Rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) ja [CSS-liukuväri kuvan päällä](https://gradiently.design/fi/guide/css-gradient-overlay) käsittelevät molempia kerroksia.

> **Tee pieni valikoima vuotoja** Tee neljä tai viisi vuotoa eri sijainneilla ja voimakkuuksilla ja peilaa tai kierrä niitä käytön aikana. Aito filmi ei koskaan vuoda samalla tavalla kahdesti, joten yhden kerroksen toistaminen karusellissa tai ruudukossa paljastaa tempun nopeimmin.

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

### Vältä

- Kirkasta vuotoa otsikon takana
- Samaa vuotoa sarjan jokaisessa kuvassa
- Täydellistä hohdeympyrää keskellä
- Viileänsinisiä tai vihreitä vuotoja lämpimissä kuvissa
- Niin voimakkaita vuotoja, että aihe katoaa

### Tee näin

- Vuodot tekstin vastakkaiselle reunalle
- Vaihtele sijaintia ja voimakkuutta sarjassa
- Aloita hohde kuvan reunalta tai sen ulkopuolelta
- Punaisesta meripihkan kautta vaaleankeltaiseen, kuten filmi tallentaa
- Peittävyyttä lämpimään tunnelmaan ilman kuvan haalistumista

Valovuodot sopivat valokuvaajille, elokuvafestivaaleihin, muusikoille, kesäkampanjoihin, matkailuun ja kaikkeen nostalgiseen. Ne yhdistyvät luontevasti [retroliukuvärien](https://gradiently.design/fi/guide/retro-gradients) paletteihin ja lämpimiin, haalistuneisiin kuviin. Ne sopivat heikommin täsmällisille, teknisille brändeille, koska niiden koko idea on epätäydellisyys.

Kattoterassin elokuvateatterin pystyjulkaisu, jonka yhdeltä reunalta hohtavat lämpimät filmivärit

Lämmin pinta, jonka hohde pysyy yhdellä sivulla ja sanat kuvan rauhallisella puolella.

Neliönmuotoinen musiikkijulkaisun kansi nimellä Side B ja lämpimillä, filmimäisillä väreillä

Neliönmuotoinen julkaisukansi, jossa lämpö ja rakeisuus luovat nostalgian vilkkaan lisäkerroksen sijaan.

## 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](https://gradiently.design/fi/guide/glow-effect), ja valokuvaajille erityisesti [valokuvaajan brändäys](https://gradiently.design/fi/guide/photographer-branding).

## FAQ

### Mikä on valovuototehoste?

Lämmin punainen, oranssi tai keltainen hohde, joka syntyy hajavalon päästessä filmille kameran raosta. Suunnittelijat jäljittelevät sitä nykyään digitaalisesti nostalgisen, aurinkoisen tunnelman luomiseksi.

### Miten teen valovuototehosteen?

Aseta kuvan reunalle pehmeä, lämmin liukuväri, joka häipyy läpinäkyväksi. Käytä screen- tai lighten-sekoitustilaa, pienennä sitten peittävyyttä ja lisää hieman rakeisuutta.

### Minkä värisiä valovuodot ovat?

Yleensä syvänpunaisia heikossa päässä, sitten oranssia ja meripihkaa, ja vaaleankeltaisia tai lähes valkoisia siellä, missä valo oli voimakkainta.

### Voinko sijoittaa tekstiä valovuodon päälle?

Mieluiten et. Vuodon kirkas osa heikentää tekstin kontrastia, joten sijoita vuoto kuvan vastakkaiselle puolelle sanoistasi.