Liukuväripeite: sävytä valokuvia peittämättä niitä

Liukuväripeite on valokuvan yli häipyvä värikerros. Se sävyttää kuvaa, yhtenäistää kuvasarjan tai tekee otsikosta luettavan. Olennaista on häipyminen: yksi kuvan osa muuttuu paljon, muu tuskin lainkaan. Siksi liukuväripeite näyttää harkitulta, kun tasainen 50-prosenttinen musta laatikko näyttää korjaukselta. Valitset värin paikan, voimakkuuden ja sekoitustavan alla olevaan kuvaan.

Neljä liukuväripeitteen tyyppiä

Lähes jokainen verkkosivun, julisteen tai julkaisun peite kuuluu neljään tyyppiin. Oikean valinta säästää paljon peittävyysliukusäätimen kokeilua.

Tummennusliuku tekstin taustaksi

Tummennusliuku on perustyökalu. Se alkaa täysin läpinäkyvänä ja tummenee sanojen reunaa kohti, yleensä alas tai vasemmalle. Kohteen kohdalla valokuva säilyy ennallaan, teksti saa rauhallisen tumman pohjan. Käytä kuvasta poimittua tummaa sävyä puhtaan mustan sijaan: syvää ruskeaa lämpimään sisätilaan ja laivastonsinistä merimaisemaan. Puhdas musta näyttää tahralta.

Alaliu'un ylin 40 prosenttia on täysin kirkas, jolloin kasvot ja tuotteet säilyvät valoisina. Tummuus kasvaa alapuoliskossa ja huipentuu reunassa, juuri kuvatekstin kohdalla. Lisää keinoja löytyy artikkelista luettava teksti valokuvissa.

Värilaveeraus ja sekoitustilat

Värilaveeraus saa kuvapankkikuvat, puhelinotokset ja tapahtumakuvat näyttämään samalta perheeltä. Aseta kahden brändivärin liukuväri kuvan päälle ja vaihda sekoitustilaa. Se määrää värin sekoittumisen kuvaan ja merkitsee enemmän kuin itse värit.

Lisää liukuväripeite valokuvaan

1. 1

   Päätä peitteen tarkoitus

   Teksti, tunnelma vai yhtenäisyys. Tummennusliuku tekstille, laveeraus tunnelmaan ja yhtenäisyyteen. Jos et osaa valita, et luultavasti tarvitse peitettä.

2. 2

   Poimi kuvasta tumma sävy

   Valitse tummennusliukuun kuvan syvin väri tai laveeraukseen kaksi brändiväriä.

3. 3

   Piirrä liukuväri apua tarvitsevalle alueelle

   Aloita kohteen päältä kirkkaana ja kasvata kohti sanojen reunaa. Tee häivytyksestä pitkä, ettei rajaa näy.

4. 4

   Valitse sekoitustila

   Normal tummennusliukuun, multiply vaaleaan kuvaan, screen tummaan ja color yhteen sävyyn.

5. 5

   Laske peittävyys lähes näkymättömäksi

   Nosta sitten yksi askel. Parhaat peitteet huomaa vasta poistettaessa.

6. 6

   Tarkista teksti puhelinkoossa

   Pienennä suunnitelma katselukokoon ja lue jokainen sana. Näytöllä toimiva kontrasti voi epäonnistua puhelimessa; värikontrasti antaa tavoitearvot.

Kuinka tumma liukuväripeitteen tulee olla

Käytännön rajana: jos tummennusliu'un tummin reuna vaatii yli noin 80 prosenttia, kuva on siinä kohdassa liian levoton. Siirrä sanat, rajaa toisin tai valitse rauhallisempi kuva. Koko kuvan laveeraus tarvitsee paljon vähemmän, muuten kuva lakkaa näyttämästä valokuvalta.

Liukuväripeitteet verkkosivulla

Verkossa voit kerrostaa peitteen ja kuvan yhteen määritykseen, jolloin ne pysyvät yhdessä kuvan vaihtuessa. Peite tulee ensin, koska CSS maalaa ensimmäisen kerroksen päällimmäiseksi. Liukuväripeite CSS:llä kattaa kaikki tekniikat, myös sekoitustilat ja pseudoelementit.

.hero {
  min-height: 70vh;
  background-image:
    linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
}

Brändiin joka kerta sopiva laveeraus

Peitteet ajautuvat erilleen, kun jokainen suunnittelija valitsee omat värit. Gradientlyn Studiossa kuvan voi sävyttää Markin omiin väreihin yksivärisenä, kaksisävyisenä tai laveerauksena. Eri lähteiden kuvat jakavat näin paletin ilman käsin sovittamista. Kun sanat ovat Markin eikä valokuvan päällä, se rauhoittaa niiden takaisen alueen itse ilman peitettä. Kaksisävykuvat Markisi väreissä kertoo menetelmän.