Lyhyesti
- Sumea tausta poistaa yksityiskohdat, jotta sen edessä oleva kohde tai teksti nousee selkeäksi kohdaksi.
- Sumennus toimii parhaiten, kun se on joko hienovarainen, kuten objektiivin pieni syväterävyysalue, tai niin voimakas, että tausta muuttuu pehmeäksi väriksi, ja siltä väliltä se näyttää vahingolta.
- Voimakkaasti sumennetusta valokuvasta tulee oman värinsä liukuväri, mikä on nopea tapa tehdä kuvaan sopiva tausta.
- Sumennetuissa kuvissa näkyy usein juovittumista ja haalistuneita reunoja, jotka korjaat vähällä rakeisuudella ja pienellä suurennuksella.
- Valokuvan väreistä rakennettu liukuväri, tumma peitekerros tai yhtenäinen paneeli hoitaa saman tehtävän kuin sumennus, mutta paremmin hallittuna.
Tällä sivulla
Sumea tausta vie yksityiskohdat pois, jotta jokin muu voi johtaa: kasvot muotokuvassa, tuote kauppakuvassa, otsikko julkaisussa, paneeli käyttöliittymässä. Sumennus toimii, koska silmä hakeutuu terävimpään. Taito on määrässä. Vähäinen sumennus näyttää objektiivilta, paljon sumennusta tekee taustasta pehmeää väriä, ja välimuoto näyttää yleensä kameralta, joka menetti tarkennuksen.
Milloin sumea tausta auttaa
- Kohteen erottaminen. Muotokuvat ja tuotekuvat erottuvat selkeämmin, kun tausta on pehmeä, kuten laajalla aukolla otetussa kuvassa.
- Tilan tekeminen sanoille. Teksti sumennetun valokuvan päällä on helpompi lukea kuin teksti terävän, yksityiskohtaisen päällä.
- Kuvakoon täyttö. Vaakasuuntainen valokuva pystysuuntaisessa tarinassa tarvitsee jotain ylä- ja alapuolelleen. Saman valokuvan sumennettu, suurennettu kopio täyttää tilan sopivilla väreillä.
- Kerrokselliset käyttöliittymät. Huurrelasipaneelit sumentavat taakseen jäävän, jolloin paneeli erottuu omana kerroksenaan ja vihjaa alla olevasta sisällöstä.
- Yksityisyys puheluissa. Videopuhelusovellukset sumentavat huoneen taustallasi, jotta huomio pysyy kasvoillasi.
Kuva 1200×900 (4:3)
1200 × 900
Tarina 1080×1920
1080 × 1920
Kuinka paljon sumennusta käyttää
| Voimakkuus | Miltä näyttää | Käyttö |
|---|---|---|
| Vähäinen | Tausta tunnistettava, pehmeästi epätarkka | Muotokuvat, tuotekuvat, luonnollinen syvyys |
| Keskitaso | Muodot tahriintuneita mutta silti tunnistettavia | Harvoin: näyttää helposti tarkennusvirheeltä |
| Voimakas | Muodot poissa, vain pehmeitä värikenttiä | Tekstin taustalle, kuvakoon täyttöön, tunnelmataustoiksi |
Sumennuksen voimakkuus on suhteessa kuvan kokoon: sama säde, joka tuskin pehmentää 4 000 pikselin valokuvaa, liuottaa 600 pikselin kuvan kokonaan. Arvioi silmällä siinä koossa, jossa ihmiset sen näkevät. Tekstin taustoissa mene niin voimakkaaseen sumennukseen, ettei kirjainten takana ole reunoja, koska puoliksi sumeat muodot kilpailevat silti sanojen kanssa. Teksti kuvan päällä selittää syyn.
Sumennettu valokuva on liukuväri valepuvussa
Sumenna valokuva voimakkaasti, ja jäljelle jää sen väri pehmeiksi kentiksi: auringonlaskusta tulee oranssin ja violetin häivytys, metsästä syviä vihreitä vaalealla taivaalla ylhäällä. Siksi sumennetut valokuvat ovat niin luonnollisia taustoja kuville, joista ne tulivat. Se on myös vihje: saman liukuvärin voi rakentaa suoraan ja saada saman sopusoinnun, tarkemman hallinnan ja ilman pakkausartefakteja.
Valokuvan paletin poimimisesta lisää oppaassa väripaletti kuvasta. Gradientlyssä Sovita kuvaan hoitaa sen yhdellä askeleella: pudota kuva, niin saat sen paletin ja lähimmät Markit tai uusia sen näköisiä.
Yleisten sumennusongelmien korjaaminen
- 1
Suurenna piilottaaksesi haalistuneet reunat
Sumennus vetää sisään läpinäkyvyyttä tai tummia pikseleitä kuvan ulkopuolelta, joten reunat muuttuvat vaaleiksi tai harmaiksi. Skaalaa sumennettua kopiota hieman kehyksen yli, jotta sen pehmeät reunat leikkautuvat pois.
- 2
Lisää rakeisuutta juovittumisen estämiseksi
Voimakkaasti sumennettu kuva on joukko hitaita, sileitä häivytyksiä, jotka juovittuvat 8-bittisenä JPEG- tai PNG-tiedostona tallennettaessa. Kevyt rakeisuuskerros piilottaa askeleet, katso liukuvärin juovittuminen.
- 3
Tummenna tai vaalenna tekstiä varten
Sumennus poistaa yksityiskohdat mutta ei kirkkautta. Jos teksti kärsii yhä, lisää sumennuksen päälle tumma tai vaalea kerros, kunnes kontrasti pitää.
- 4
Pidä kylläisyys elävänä
Sumennus keskiarvoistaa värit yhteen, mikä voi tylsistää niitä. Pieni kylläisyyden nosto sumennuksen jälkeen tuo värin takaisin.
Sumeat taustat CSS:llä
Verkossa työkaluja on kaksi. filter: blur() sumentaa elementin, mikä sopii kuvan sumennetulle kopiolle oikean kuvan takana. backdrop-filter: blur() sumentaa sen, mikä on elementin takana, ja tekee huurrelasipaneelit. Molemmat maksavat piirtoaikaa, ja backdrop-filter vierivän sisällön päällä maksaa eniten. Katso CSS-liukuvärien suorituskyky.
/* a blurred, enlarged copy of the cover image fills the frame */
.cover {
position: relative;
overflow: hidden;
isolation: isolate;
}
.cover::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--cover-image) center / cover;
filter: blur(40px) saturate(1.2);
transform: scale(1.15); /* crops the faded edges */
}
/* a frosted glass panel */
.panel {
background: rgb(255 255 255 / 0.12);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}--cover-image kuvan url()-arvoksi elementille. Skaalaus piilottaa sumennuksen synnyttämät vaaleat reunat.Huurrepaneelit värikkäiden taustojen päällä ovat glassmorphismin perusta, ja sillä on omat sääntönsä kontrastille ja reunoille.
Vaihtoehtoja sumennukselle
Sumennus
- Säilyttää valokuvan värit automaattisesti
- Voi juovittua, haalistua reunoilta ja tylsistää värejä
- Kirkkaus vaihtelee yhä tekstin takana
- Maksaa piirtoaikaa, kun se on livenä verkossa
Suunniteltu liukuväri
- Käyttää valokuvan palettia, valittuna tarkoituksella
- Puhdas, rakeisuus lisättynä missä tarvitaan
- Rauhallinen, tasainen alue täsmälleen tekstin takana
- Muutama tavu CSS:ää tai terävä vienti
Tumma peitekerros, yhtenäinen paneeli sanojen takana tai valokuvan duotone-käsittely ovat muita yleisiä valintoja. Sumennus on nopein, ja suunniteltu tausta on yleensä hallituin.
Usein kysyttyä
Milloin sumeaa taustaa kannattaa käyttää?
Kun jonkin edessä olevan pitää johtaa: valokuvan kohde, julkaisun sanat, käyttöliittymän paneeli tai valokuva, joka ei täytä kokoa, johon se on asetettu.
Kuinka paljon taustaa kannattaa sumentaa?
Joko vähän, jotta se näyttää luonnolliselta syväterävyysalueelta, tai voimakkaasti, jolloin jäljelle jää vain pehmeää väriä. Keskitason sumennus näyttää helposti tarkennusvirheeltä.
Miksi sumeassa taustassani on harmaat reunat?
Sumennus vetää sisään tyhjiä tai tummia pikseleitä kuvan ulkopuolelta. Suurenna sumennettua kerrosta hieman kehyksen yli, jotta reunat leikkautuvat pois.
Miksi sumea taustani näyttää portaikolta?
Sileät, hitaat häivytykset juovittuvat 8-bittisissä muodoissa. Lisää himmeä rakeisuuskerros ennen vientiä.
Miten sumennan taustan CSS:llä?
Käytä filter: blur() -ominaisuutta kuvan kopiolle sisällön takana tai backdrop-filter: blur() -ominaisuutta paneelille, jolloin sen takana oleva sumenee.
Kirjoittanut Gradiently
Gradientlyn tiimi. Gradiently on Markien ympärille rakennettu suunnittelutyökalu: eläviä liukuvärejä, joiden ansiosta kaikki suunnittelemasi näyttää omaltasi.
Katso profiilimme
