Lyhyesti
- Nestemäinen liukuväri näyttää kaadetulta, sillä sen värit säilyvät erillisinä taipuvina, kiertyvinä, kapenevina ja levenevinä nauhoina tasaisen häipymisen sijaan.
- Tavallinen tapa tehdä sellainen on aloittaa suorista väriraidoista ja vääristää niitä taivutus-, nesteytys- tai siirtymäsuotimella.
- Verkossa feTurbulence- ja feDisplacementMap-toiminnot yhdistävä SVG-suodin voi muuttaa raidallisen CSS-liukuvärin marmoroiduksi, nestemäiseksi pinnaksi.
- Ohuet kirkkaat nauhat kaarteissa näyttävät märän pinnan valolta ja tekevät vaikutelmasta paljon uskottavamman.
- Nestemäiset liukuvärit ovat levottomia, joten teksti tarvitsee rauhallisen alueen tai suuren yksinkertaisen muodon, jossa virtaus hidastuu.
Tällä sivulla
Nestemäinen liukuväri näyttää kaadetulta väriltä: sävynauhat kiertyvät toistensa ympärille, venyvät ohuiksi yhdessä kohdassa ja kerääntyvät toisaalle, kaarteissa välähtää valo. Ajattele akryylivalumaalauksia, marmoroituja esilehtiä, öljyä märällä tiellä tai veteen pudotettua mustetta. Yllättävää on valmistustapa. Et sekoita värejä, vaan aloitat selkeillä raidoilla ja taivutat niitä. Siksi tavallinen liukuvärityökalu ei yksin tuota aivan samaa ilmettä.
Mikä saa värin näyttämään nestemäiseltä
- Nauhoja häipymisen sijaan. Jokainen väri säilyttää identiteettinsä nauhana. Leveä pehmeä häipyminen näyttää ilmalta, ei nesteeltä.
- Vaihtuva paksuus. Sama nauha paisuu ja kapenee kulkiessaan virtaavan maalin tavoin.
- Ei kulmia. Jokainen käännös on kaari. Yksi terävä kulma rikkoo illuusion.
- Valoa kaarteissa. Ohut vaalea viiva muutamassa reunassa näyttää märältä heijastukselta.
- Yksi virtaussuunta. Samaan suuntaan kallistuvat pyörteet tuntuvat yhdeltä kaadolta.
Neljä nestemäistä liukuväri-ilmettä
Nämä näytteet ovat raaka-ainetta: taivutettavia värinauhoja. Jokainen on yksi CSS-arvo, jonka voit kopioida lähtökohdaksi mille tahansa alla olevalle menetelmälle.
Huomaa vaalea väri. Valumaalauksessa vaalein sävy on yleensä ohuin nauha. Se saa ympäröivät tummat värit näyttämään rikkailta. Käytä sitä heijastuksena, älä täyttönä.
Nestemäisen liukuvärin tekeminen suunnittelutyökalulla
- 1
Piirrä raidat
Täytä lopullista kokoa suurempi pinta 5-8 viistolla värinauhalla. Tee osasta leveitä ja osasta hyvin ohuita.
- 2
Taivuta kokonaisuutta
Taivuta raidat leveäksi S-kaareksi taivutus-, pyörre- tai aaltovääristyksellä. Pidä ensimmäinen käsittely maltillisena.
- 3
Työnnä nesteytyssiveltimellä
Vedä nauhoja yhdensuuntaisesti suurella pehmeällä siveltimellä ja luo pyörteitä sekä lammikoita. Etene suurista muodoista pieniin.
- 4
Lisää muutama heijastus
Maalaa ohuita vaaleita viivoja kahteen tai kolmeen kaarteeseen virtauksen suuntaisesti pienellä peittävyydellä.
- 5
Rajaa paras kohta
Vääristäminen jättää sotkuiset reunat. Rajaa kiinnostavin kohta ja mitoita käyttötarkoitukseesi.
- 6
Viimeistele rakeisuudella
Kevyt kohinakerros peittää venytyksen aiheuttaman porrastumisen ja antaa pinnalle tuntua.
Ohjelmistojen nimitykset vaihtelevat, mutta useimmissa muokkaimissa on taivutus- ja nesteytys- tai tahrimistyökalu. Photoshop-liukuvärit ja Procreate-liukuvärit käsittelevät kummankin omia työkaluja.
Nestemäinen liukuväri SVG:llä ja CSS:llä
Verkossa SVG-suodin voi hoitaa taivutuksen. feTurbulence tuottaa tasaista kohinaa, ja feDisplacementMap työntää sen avulla raidallisen liukuvärin pikseleitä. Pieni baseFrequency tuottaa leveitä hitaita pyörteitä, suuri scale siirtää nauhoja pidemmälle.
<svg width="0" height="0" style="position:absolute">
<filter id="liquid" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence type="fractalNoise" baseFrequency="0.003 0.006" numOctaves="2" seed="11" />
<feDisplacementMap in="SourceGraphic" scale="220" xChannelSelector="R" yChannelSelector="G" />
</filter>
</svg>
<div class="liquid"></div>
<style>
.liquid {
width: 100%;
aspect-ratio: 16 / 9;
background: repeating-linear-gradient(115deg,
#1e1b4b 0%, #4f46e5 6%, #f472b6 11%, #fde68a 14%, #1e1b4b 20%);
filter: url(#liquid);
}
</style>Nestemäisten liukuvärien liikuttaminen
Nestemäinen on liukuvärityyli, joka suorastaan pyytää liikettä. Hitaasti verkkosivun pääosiossa tai tarinassa ajelehtiva valu tuntuu elävältä. Pidä nopeus pienenä kuin maali olisi paksua ja silmukoi liike niin, että loppu vastaa alkua. Turbulenssin reaaliaikainen animointi on raskasta, joten lyhyt viety videosilmukka on yleensä parempi. 8-15 sekunnin silmukka antaa valulle aikaa liikkua ilman helposti huomattavaa toistoa. 1080×1920-MP4 palvelee tarinoita, Reelsejä ja puhelimen taustakuvia yhdellä tiedostolla. Animoidut liukuväritaustat käsittelee kevyempiä tapoja.
Sanat nestemäisellä liukuvärillä
Kilpailee sanojen kanssa
- Ohuet, vahvakontrastiset nauhat otsikon takana
- Yhtä tiheät pyörteet kaikkialla
- Pieni teksti levottomimman lammikon päällä
- Kirjainten poikki kulkevat heijastukset
Tukee sanoja
- Leveä rauhallinen nauha, jossa virtaus hidastuu
- Levottomat pyörteet reunoilla, rauha keskellä
- Suuri vahva kirjasin ja vähän sanoja
- Heijastukset poissa tekstistä
Yksi sana vahvalla kirjasimella rauhallisella värialueella.
Neliömuotoinen julkaisukansi. Nestemäinen ilme sopii musiikkiin, sillä se tuntuu näkyväksi muuttuneelta ääneltä.
Gradientlyn Markit ovat eläviä taustoja, joiden materiaalit voivat virrata ja ajelehtia. Jokainen siirtää pintansa rauhallisimman osan automaattisesti sanojesi taakse. Pro vie ne GIF-, MP4- tai WebM-muodossa, joten nestemäinen ilme voi muuttua tarinaksi tai pääosion silmukaksi ilman varjostinohjelman rakentamista. Lue luettavuudesta tekstistä liukuvärillä.
Usein kysyttyä
Miten teen nestemäisen liukuvärin?
Piirrä väriraidat ja taivuta niitä taivutus-, pyörre- tai nesteytystyökalulla pyörteiksi. Lisää ohuita vaaleita heijastuksia muutamaan kaarteeseen ja hieman rakeisuutta.
Voiko nestemäisen liukuvärin tehdä CSS:llä?
Useimmiten SVG:n avulla. Käytä raidalliseen CSS-liukuväriin SVG-suodinta, jossa on feTurbulence ja feDisplacementMap, taivuttaaksesi sen nestemäiseksi kuvioksi.
Mitä eroa on nestemäisellä ja mesh-liukuvärillä?
Mesh-liukuväri sekoittaa värejä tasaisesti verkon yli. Nestemäinen liukuväri pitää värit erillisinä kaadetun maalin tavoin kiertyvinä ja venyvinä nauhoina.
Mitkä värit toimivat nestemäisessä liukuvärissä?
Tumma pohja, kaksi vahvaa keskisävyä ja vain ohuissa nauhoissa käytetty vaalea sävy. Paksujen tummien ja ohuiden vaaleiden nauhojen kontrasti luo nestemäisen vaikutelman.
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