Luettava teksti valokuvan päällä ilman laatikkoa

Luettava teksti valokuvan päällä ilman laatikkoa alkaa sijoittelusta: etsi tai luo kuvan rauhallisin alue ja aseta sanat siihen. Jos se ei riitä, lisää liukuvärikerros, joka vaihtuu läpinäkyvästä tummaksi yhdellä reunalla. Vähennä sitten kuvan kontrastia sävyttämällä ja kasvata lopuksi tekstin vahvuutta ja kokoa. Tässä järjestyksessä käytettyinä keinot säilyttävät kuvan ehjänä ja sanat selkeinä. Laatikko on viimeinen keino.

Tämä opas keskittyy laatikottomaan toteutukseen. Kaikki menetelmät, myös laatikot, nauhat ja irrotetut kuvat, löytyvät oppaasta teksti kuvan päällä.

Miksi teksti katoaa valokuvaan

Teksti tarvitsee vaaleuseron kirjainten ja taustan välille. Valokuvan vaaleus vaihtelee jatkuvasti: valkoinen paita tumman oviaukon vieressä, lehdet taivasta vasten. Kun kirjain ylittää vaalean ja tumman rajan, osa siitä katoaa. Pienet yksityiskohdat pahentavat tilannetta, sillä silmä ei erota kirjaimen reunaa taustan tekstuurista.

Kuusi keinoa parantaa tekstin luettavuutta valokuvalla

1. Valitse ja rajaa kuva tyhjää tilaa varten

Paras korjaus tehdään ennen ensimmäistä sanaa. Valitse kuva, jossa on tyhjä alue: taivasta, seinä, pöytäpinta tai sumea tausta. Rajaa se niin, että alue osuu otsikon kohdalle. Pystyjulkaisussa 1080×1350 voit siirtää kohdetta alas ja jättää ylimmän kolmanneksen rauhalliseksi. Kuvaa tätä ajatellen, jos voit: astu taakse ja jätä tilaa kohteen yläpuolelle. Teksti levottomilla taustoilla käsittelee vastaavasti toimivia kuvioita ja tekstuureja.

2. Lisää liukuvärikerros

Liukuvärikerros asetetaan kuvan päälle. Se on tumma tekstin kohdalla reunassa ja häipyy täysin läpinäkyväksi. Silmä tulkitsee häivytyksen valon vähenemiseksi eikä muodoksi. Rajaa kerros tekstin sisältävään kolmannekseen ja käytä kuvasta poimittua tummaa sävyä puhtaan mustan sijaan.

3. Sävytä valokuva

Kuvan sävyttäminen yhdellä tai kahdella värillä kaventaa vaaleiden ja tummien vaihteluväliä. Teksti erottuu silloin helpommin kaikkialla. Tumma kaksisävytys, kuten syvästä sinisestä pehmeään liilaan, toimii erityisen hyvin valkoisen tekstin takana. Duotone-tehoste näyttää toteutuksen. Sävytys myös yhtenäistää erilaisia kuvia saman brändin näköisiksi.

4. Tummenna tai vaalenna paikallisesti

Useimmissa kuvankäsittelyohjelmissa voi vähentää valotusta tai huippuvaloja yhdeltä alueelta. Kirkkaan taivaan tummentaminen yhdellä aukolla juuri otsikon takaa riittää usein. Muutosta ei huomaa näkemättä alkuperäistä.

5. Tee tekstistä tukevampi

Ohut ja pieni teksti katoaa ensimmäisenä. Käytä semibold- tai bold-vahvuutta, suurenna kokoa ja avaa pienten rivien kirjainväliä hieman. Vahva päätteetön fontti koossa 110 px kestää valokuvalla, jolla ohut päätteellinen fontti koossa 70 px ei toimi. Lihavoidut fontit listaa luotettavia vaihtoehtoja.

6. Aseta kuva sanojen viereen

Joskus toimivin ratkaisu on välttää päällekkäisyyttä. Rajaa kuva ympyrään, kaareen tai puoleen kuvasta ja aseta sanat viereiselle tasaiselle tai liukuväriselle pinnalle. Kuva säilyy ehjänä ja teksti saa täydellisen kontrastin.

Mikä menetelmä sopii mihinkin kuvaan

Liukuvärikerroksen lisääminen kuvaan CSS:llä

Verkkosivulla kerrosta liukuväri ja kuva samaan background-määritykseen. Liukuväri tulee ensin, jolloin se on päällä. Tehoste pysyy CSS:ssä ja mukautuu asettelun tekemiin rajauksiin.

.hero {
  min-height: 70vh;
  display: grid;
  align-items: end;
  padding: 4rem;
  color: #fafaf9;
  background:
    linear-gradient(0deg, rgb(12 10 9 / 0.85) 0%, rgb(12 10 9 / 0.4) 35%, rgb(12 10 9 / 0) 65%),
    url("/images/terrace.jpg") center / cover no-repeat;
  background-color: #1c1917; /* fallback while the image loads */
}

Tarkista tulos kontrastisuosituksilla: noin 4,5:1 tavalliselle tekstille ja 3:1 suurille otsikoille, kuten WebAIMin kontrastiopas kertoo. Testaa sanojen takainen vaalein kohta, älä keskiarvoa. Värikontrasti ja saavutettavuus selittää luvut.

Vältettävät virheet valokuvan päälle asetetussa tekstissä

Halot ja hehkut kirjainten ympärillä ovat tavallisin pelastusyritys ja halvimman näköinen. Ne sumentavat kirjainten reunat, vaikka lukeminen tarvitsee terävyyttä. Jos harkitset niitä, lue ensin tekstivarjot ja paremmat vaihtoehdot.

Gradientlyssä kuvia voi sävyttää Markin väreillä yksivärisesti, duotonena tai väripesuna. Ne voi rajata kaariin, ympyröihin ja epäsäännöllisiin muotoihin sanojen viereen. Kun Mark näkyy designissa, se siirtää rauhallisimman alueensa tekstin taakse. Automaattinen muste valitsee vaalean tai tumman tekstin kullekin riville ilman laatikoita, varjoja tai sumennusta.