Kohinainen liukuväri: tasainen väri, rakeinen pinta

Kohinainen liukuväri on tasainen väriliuku, jonka päällä oleva hieno satunnaiskohina saa värin tuntumaan painetulta digitaalisen pinnan sijaan. Liuku antaa värin ja valon suunnan, kohina pinnan ja estää liukua hajoamasta raidoiksi. Alla on viisi kopioitavaa ohjetta ja selkeät selitykset generaattorin asetuksista, jotta voit tehdä omia versioita.

Viisi ohjetta kohinaiseen liukuväriin

Jokainen ohje sisältää pohjaliukuvärin ja kohina-asetuksen. Liukuvärit näkyvät tässä ilman kohinaa, jotta näet värin. Alla oleva taulukko kertoo päälle lisättävän kohinan. Ne ovat tarkoituksella erilaisia: yksi tumma, yksi vaalea, yksi lämmin, yksi viileä ja yksi rohkea.

Kohinaliukuvärigeneraattorin asetukset selitettynä

Jokainen kohinavaihtoehdon sisältävä liukuvärigeneraattori ja SVG-kohinasuodatin käyttää samoista säätimistä jotakin versiota. Kun tunnet niiden tehtävät, osaat lukea ohjeita ja korjata tuloksia.

Näin teet kohinaisen liukuvärin CSS:llä

Selkein tapa kerrostaa SVG-kohinakuva liukuvärin päälle yhdessä background-määrityksessä ja sekoittaa ne. Vaihda liukuväriksi mikä tahansa yllä olevista ohjeista ja aseta taajuus ja peittävyys taulukosta.

.noise-gradient {
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%);
}

.noise-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Recipe 1: frequency 0.85, 3 octaves */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.08;
}

Vahvakontrastisten pilkkujen menetelmä

Rohkeampaa, lähes risopainettua ilmettä varten aseta kohina ja liukuväri samaan kerrokseen ja käytä kontrastisuodatinta. Kohina puristuu teräviksi pilkuiksi, jotka seuraavat liukuvärin valoa. Ilme on ohjetta 3 voimakkaampi, joten käytä sitä julisteissa ja pääbannereissa, älä leipätekstin takana.

.speckle {
  background:
    linear-gradient(160deg, #ff7a3d 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  filter: contrast(170%) brightness(1000%);
  mix-blend-mode: multiply; /* over a coloured parent, e.g. #5b2a86 */
}

Oikean kohinan valitseminen eri muotoihin

Kohina on suhteessa työalueeseen. Sama suodatin näyttää puhelintarinassa hienolta ja pienessä bannerissa karkealta. Sovita siis taajuus muotoon saman tiedoston käyttämisen sijaan.

• Tarinat ja julkaisut: taajuus noin 0,8, peittävyys 8-14 prosenttia. Hieman enemmän kuin luulet, koska lataukset pehmentävät sitä.
• Verkkopääkuvat: taajuus 0,7-0,9, peittävyys 4-10 prosenttia. Katso verkkosivun pääkuvataustat.
• Painojulisteet: karkeampi rae, taajuus 0,5-0,7 lopullisessa pikselikoossa, jotta se säilyy painossa.
• Tummat taustat: puolita tavallinen määrä. Tummat liukuväritaustat selittää, miksi rakeisuus näkyy ensin varjoissa.

Kohinainen vai rakeinen liukuväri

Ajatus on sama, painotus eri. Rakeinen liukuväri kuvaa ilmettä, kohinainen liukuväri valmistustapaa. Rakeiset liukuvärit kertoo, miksi rae toimii ja mihin sitä sijoitetaan. Tämä sivu on ohjekirja. Jos haluat tekstuurin ilman väriliukua, aloita rakeisesta tekstuurista.

Jos et halua säätää liukusäätimiä lainkaan, jokainen Gradientlyn Mark sisältää oman rakeisuusasetuksensa värien, valon ja liikkeen rinnalla. Se piirtyy uudelleen jokaisessa koossa, joten kohina ei veny tai sumene. Suunnittele ilmaiseksi millä tahansa lunastamattomalla Markilla.