Lyhyesti
- Liukuväri näyttää hyvältä, kun värit kohtaavat harmaantumatta, pysäkit ovat epätasaisin välein ja valo tuntuu tulevan yhdestä suunnasta.
- Harmaa tai samea keskikohta syntyy vastavärien suorasta sekoituksesta; väliväri tai OKLCH-sekoitus korjaa sen.
- Pieni rakeisuus, noin 2-6 prosentin peittävyydellä, peittää raidoittumista ja saa digitaalisen liukuvärin tuntumaan pinnalta.
- Hyvä liukuväri jättää aina rauhallisen alueen, jossa sanat erottuvat vahvalla kontrastilla.
- Vie liukuvärit PNG:nä tai laadukkaana videona pakatun JPEGin sijaan, sillä se aiheuttaa näkyviä raitoja.
Tällä sivulla
Hyvän liukuvärin tekeminen perustuu seitsemään järjestyksessä tehtävään tarkistukseen: harmaantumatta kohtaavat värit, epätasaiset pysäkkivälit, yksi valosuunta, tunnelman määrittävä pohja, ripaus rakeisuutta, rauhallinen tila sanoille ja tasaisuuden säilyttävä vienti. Jokainen on nopea testi selkeällä korjauksella. Lähes jokainen halvalta näyttävä liukuväri epäonnistuu ainakin kahdessa, ja niiden korjaaminen auttaa yleensä enemmän kuin kaikkien värien vaihtaminen.
Testi
Korjaus
Testi
Korjaus
Testi
Korjaus
Korjaus
Testi
Korjaus
Testi
Korjaus
Testi
Korjaus
1. Puhtaasti kohtaavat värit
Kun väriympyrän vastakkaiset värit sekoittuvat suoraan, keskikohta muuttuu harmaaksi. Tavallisia pareja ovat sininen ja oranssi sekä vihreä ja vaaleanpunainen. Lisää väliväri, joka ohjaa sekoituksen ympyrää pitkin keskustan sijaan, tai sekoita havaintoon perustuvassa väriavaruudessa. Sameat liukuvärit ja liukuvärin interpolointi selittävät molemmat.
2. Epätasaisin välein asetetut pysäkit
Tasaiset värivälit näyttävät valmiilta liukuväripohjalta. Luonnossa yksi väri hallitsee ja muutos tapahtuu lyhyellä matkalla: taivas on enimmäkseen sininen ja lämmin kaista horisontissa kapea. Anna päävärille 60-70 prosenttia kuvasta ja muiden tulla myöhään. Liukuvärin väripysäkit syventää sijainteja ja siirtymävihjeitä.
3. Valo yhdestä suunnasta
Hyvä liukuväri tuntuu valaistulta. Päätä valon suunta, yleensä yläkulma, ja tee siitä kirkkain ja kylläisin alue. Muu pinta hiipuu siitä poispäin. Jos et voi osoittaa valonlähdettä, liukuväri tuntuu litteältä väreistä riippumatta. Lineaarisen päälle asetettu pehmeä säteittäinen liukuväri lisää valon nopeimmin.
4. Tunnelman määrittävä pohja
Päätä, onko suunnitelma tumma vai vaalea, ja pysy siinä. Keskivioletista keskivaaleanpunaiseen vaeltavalla liukuvärillä ei ole pohjaa, joten se tuntuu epäröivältä. Lähes musta saa värit hohtamaan, lämmin luonnonvalkoinen tuntumaan painetuilta. Vie pohja hieman mukavuusrajan yli ja palaa yksi askel takaisin.
5. Rakeisuus: sopiva kohinan määrä
Täysin sileät digitaaliset liukuvärit raidoittuvat monilla näytöillä ja näyttävät ohjelmiston oletuksilta. Hieno kohinakerros korjaa molemmat. Hyödyllinen alue on kapea: alle noin 2 prosentin peittävyyttä ei näe, ja yli noin 8 prosenttia näyttää jo tarkoitukselliselta tekstuurilta viimeistelyn sijaan. Aloita tummalla liukuvärillä 3 prosentista ja vaalealla 5 prosentista, sillä kohina erottuu vaaleissa väreissä heikommin.
.gradient {
position: relative;
background: radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%);
}
.gradient::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.04;
mix-blend-mode: overlay;
pointer-events: none;
}Lisää rakeisuusohjeita on artikkeleissa rakeiset liukuvärit ja CSS-kohinatekstuuri.
6. Rauhallinen tila sanoille
Useimpien liukuvärien tehtävä on kantaa viesti. Päätä sanojen paikka ja varmista, että alue on rauhallisin ja sävyiltään tasaisin, jolloin jokaisella rivillä on sama kontrasti. Kirkkain ja levottomin kohta kuuluu muualle. Älä korjaa heikkoa kontrastia kirjainten takaisella hohdolla: siirrä valo.
Ei läpäise kohtaa 6: väri kulkee suoraan sanojen läpi.
Läpäisee: tekstin takainen alue on rauhallisempi ja kaikki rivit erottuvat.
Tämän tarkistuksen Gradiently tekee puolestasi. Mark tietää sanojesi paikan: rauhallisin alue siirtyy tekstin taakse, värit syvenevät tai vaalenevat kirjainten lähellä ja Automaattinen muste valitsee jokaiselle riville vaalean tai tumman tekstin Markin omasta paletista.
7. Tasaisuuden säilyttävä vienti
- Still-kuvat: vie PNG:nä. JPEG-pakkaus muuttaa pitkät häivytykset portaiksi, ja somesovellus pakkaa uudelleen ladattaessa.
- Video: käytä suuren bittinopeuden MP4:ää täsmälleen alustan koossa, jotta skaalausta ei tarvita.
- Koko: vie alustan omilla mitoilla, kuten Instagram-julkaisu 1080×1350, sovelluksen rajauksen sijaan.
- Tarkista puhelimella: katso ladattu versio pimeässä huoneessa täydellä kirkkaudella. Siellä raidoittuminen paljastuu.
Jos raidat säilyvät, liukuvärin raidoittuminen tarjoaa perusteellisemmat korjaukset.
Usein kysyttyä
Miten teen hyvännäköisen liukuvärin?
Käytä harmaantumatta sekoittuvia värejä, epätasaisia pysäkkivälejä ja yhtä valosuuntaa. Valitse tumma tai vaalea pohja, lisää vähän rakeisuutta ja jätä rauhallinen tila sanoille.
Paljonko kohinaa liukuväriin kannattaa lisätä?
Yleensä 2-6 prosentin peittävyys. Aloita tummilla liukuväreillä noin 3 prosentista ja vaaleilla 5 prosentista ja lopeta heti raitojen kadottua.
Miksi liukuvärini näyttää samealta?
Kaksi vastaväriä sekoittuu harmaan kautta. Lisää niiden väliin väliväri tai sekoita OKLCH:ssa.
Miksi liukuvärini näyttää halvalta?
Siinä on luultavasti kaksi tasaisesti jaettua väriä 45 asteen kulmassa ilman rakeisuutta. Nämä ovat useimpien työkalujen oletukset ja näyttävät siksi harkitsemattomilta.
Mikä tiedostomuoto sopii liukuväreille?
PNG still-kuville ja suuren bittinopeuden MP4 videolle. Pakattu JPEG raidoittaa pitkät, pehmeät häivytykset.
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