# Liukuvärin materiaalit: Silkki, Revontulet ja rakeisuus

[Canonical HTML page](https://gradiently.design/fi/guide/mark-materials-explained)

Kaksi Markia voi jakaa paletin ja näyttää täysin erilaisilta, koska materiaali määrää värin käyttäytymisen. Tutustu perheisiin, kerroksiin, valoon ja rakeisuuteen.

## The short version

- Liukuvärin materiaali on värin täyttämä rakenne: kiilto, hohde, kudos, kivi tai rakeisuus.
- Jokainen Gradientlyn Mark muodostuu enintään kolmesta materiaalikerroksesta: pohjasta ja enintään kahdesta sen päälle sekoitetusta kerroksesta.
- Gradientlyn materiaalit on jaettu neljääntoista perheeseen Liukuväristä ja Valosta Tekstiiliin, Mineraaliin, Lasiin, Metalliin ja Maaliin.
- Valo, rakeisuus ja liike määritetään kussakin kerroksessa, joten sama materiaali voi olla rauhallinen tai dramaattinen.
- Valitse materiaali pinnan mielleyhtymien mukaan: rakeisuus painamiseen ja käsityöhön, silkki ylellisyyteen, lasi ja kromi teknologiaan.

**Liukuvärin materiaalit** saavat liukuvärin näyttämään joltain muulta kuin kahden värin sekoitukselta. Materiaali on värin täyttämä rakenne: Silkin suuntakiilto, Revontulten valoverhot, Meshin pehmeät värikukinnat, Lietteen hiekka tai marmorin suonet. Jokainen Gradientlyn Mark pinoaa niitä enintään kolme ja lisää valoa, rakeisuutta sekä liikettä. Siksi saman paletin Markit voivat näyttää täysin erilaisilta.

## Mikä materiaali on

Ajattele palettia maalina ja materiaalia pintana. Sama laivastonsininen, sinivihreä ja oranssi silkillä, huurrelasilla tai käsintehdyllä paperilla tuottaa kolme eri esinettä. Markin jokainen materiaali käyttää sen omaa palettia, joten materiaali muuttaa luonnetta muuttamatta värejä.

- Silkki: suunnattu kiilto: `linear-gradient(115deg, #1b2a3a 0%, #2f5d62 30%, #9fd3c7 46%, #2f5d62 60%, #1b2a3a 100%)`
- Revontulet: alareunasta nouseva valo: `linear-gradient(0deg, #9fd3c7 0%, #2f5d62 18%, #1b2a3a 55%, #0b1419 100%)`
- Mesh: pehmeät värikukinnat: `radial-gradient(circle at 30% 35%, #d9822b 0%, transparent 40%), radial-gradient(circle at 70% 65%, #2f5d62 0%, transparent 45%), linear-gradient(135deg, #1b2a3a 0%, #2f5d62 100%)`
- Halo: yksi valolammikko: `radial-gradient(circle at 50% 40%, #d9822b 0%, #6b3410 30%, #0b1419 70%)`

Neljän materiaalin CSS-luonnokset samalla paletilla. Oikeiden Markien rakenne on paljon rikkaampi, mutta nämäkin osoittavat materiaalin suuren vaikutuksen.

## Neljätoista materiaaliperhettä

Gradiently ryhmittelee materiaalit niiden muistuttamien asioiden mukaan. Alla olevat nimet ovat oikeita [Markkinoilla](/market) vastaan tulevia materiaaleja. Jokaisessa perheessä on paljon lisää.

| Perhe | Sisältö | Esimerkkimateriaalit |
| --- | --- | --- |
| Liukuväri | Sulautumat, pallot ja värikentät | Kulmat, Pallot, Häivähdys, Helmi |
| Valo | Hehkut, heijasteet ja säteet | Halo, Näyttämö, Neon, Säteet |
| Neste | Nesteet, muste ja metalli | Muste, Elohopea, Valu, Laava |
| Ilmakehä | Sumu, pilvet ja taivas | Usva, Hämärä, Kumpupilvi, Järviusva |
| Kosminen | Kaasu, tähdet ja syvä avaruus | Tähtisumu, Galaksi, Linnunrata, Pimennys |
| Orgaaninen | Kasvu, solut ja terälehdet | Solut, Koralli, Ruusu, Saniainen |
| Mineraali | Kivi, marmori ja hiekka | Suoni, Liete, Akaatti, Travertiini |
| Tekstiili | Silkki, kudos ja neulos | Silkki, Pellava, Sametti, Satiini |
| Lasi | Huurre, prisma ja vesi | Huurrettu, Prisma, Uurrettu, Lasimaalaus |
| Geometrinen | Viivat, pisteet ja laatat | Puolisävy, Kaaret, Ruudukko, Truchet |
| Rakeisuus | Paperi, painatus ja filmi | Kuitu, Riso, Filmi, Dither |
| Metalli | Harjattu, anodisoitu ja sula | Harjattu, Anodisoitu, Sula, Patina |
| Maali | Öljy, guassi ja sivellin | Impasto, Guassi, Akryyli, Suihkemaali |
| Digitaalinen | Näytöt, häiriöt ja pikselit | Kuvaputki, Häiriö, Pikselilajittelu, LED-seinä |

Perheet Gradientlyn nimillä. Rakeisuus on oma perheensä ja myös jokaisen kerroksen asetus.

### Silkki, Revontulet ja Mesh

Näistä kolmesta kysytään eniten. **Silkki** on hienojen lankojen suuntakiiltoa: elegantti, hieman muodollinen ja sopiva kauneuteen sekä muotiin. **Revontulet** on kirkkaasta alareunasta tummaan taivaaseen nousevia valoverhoja, dramaattinen tyhjällä tummalla pohjalla. **Mesh** on toisiinsa sulavia värikukintoja, klassinen moderni liukuväri, ystävällinen ja monipuolinen. [Silkkiliukuväreillä](https://gradiently.design/fi/guide/silk-gradient), [revontuliliukuväreillä](https://gradiently.design/fi/guide/aurora-gradients) ja [mesh-liukuväreillä](https://gradiently.design/fi/guide/mesh-gradients) on omat CSS-oppaansa.

### Rakeisuus, paperi ja painatus

Rakeisuus-perhe saa näytön näyttämään painetulta. **Kuitu** on käsintehtyä paperia pitkillä kuiduilla ja satunnaisilla täplillä, **Riso** kahden musteen painatus, **Filmi** filmiraetta ja **Dither** pikseliportaittaista väriä. Ne sopivat ruokaan, käsityöhön, kirjoihin ja kaikkeen käsintehdyltä tuntuvaan. Ne myös peittävät tasaisten liukuvärien raitautumista, kuten [rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) selittää.

## Kerrosten pinoaminen

Markissa on pohjakerros ja enintään kaksi lisäkerrosta. Jokaisella ylemmällä kerroksella on oma peittävyys ja sekoitustila (normaali, rasteri, kertova, peittävä tai pehmeä), kuten kuvankäsittelyohjelmassa. Tavallinen resepti on laaja Mesh- tai Usva-pohja värikentäksi, Pellavan tai Puolisävyn kaltainen rakennekerros tekstuuriksi ja Halo- tai Valovuoto-valokerros huomion keskittämiseen.

```css
.card {
  background:
    /* top layer: a light, screened over the rest */
    radial-gradient(circle at 75% 20%, rgb(255 214 170 / 0.55) 0%, transparent 40%),
    /* middle layer: a fine stripe for texture */
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 6px),
    /* base layer: the colour field */
    linear-gradient(160deg, #1b2a3a 0%, #2f5d62 60%, #5e8b7e 100%);
  background-blend-mode: screen, overlay, normal;
}
```

Kolme CSS-kerrosta, ylin ensin: Markin käyttämä pohjan, tekstuurin ja valon rakenne yksinkertaisimmillaan.

## Valo, rakeisuus ja liike

Kunkin kerroksen asetukset muuttavat materiaalin mittakaavaa, vääristymistä, yksityiskohtaisuutta, valaistusta, rakeisuutta ja liikettä. Sama Silkki voi olla tiivis kirkas kimmellys tai laaja hämärä kangas. Markin yhteinen liike määrää nopeuden ja lipumisen, jotta kerrokset liikkuvat yhdessä eivätkä toisiaan vastaan.

Rauhallinen pystysuunnitelma pehmeällä, laajalla liukuvärillä ja sanalla Hiljainen

Rauhallinen Mark: laaja rakenne ja lempeä valo jättävät runsaasti tilaa sanoille.

Voimakas pystysuunnitelma kirkkaalla yksityiskohtaisella tekstuurilla ja sanalla Äänekäs

Elävämpi Mark: hienojakoinen rakenne ja vahvempi valo sopivat lanseerauksiin ja tapahtumiin.

Yksityiskohdat ja sanat kilpailevat, joten Markit rauhoittavat itse levottomaa rakennetta tekstin lähellä. Mark tietää, missä sanat ovat: rauhallisin alue siirtyy tekstin taakse ja kirjainten lähellä värit syvenevät tai vaalenevat. Näin tekstuurikin säilyttää otsikon luettavana.

## Materiaalin valinta

### Rauhallinen, päivittäinen

- Mesh, Usva, Liete, Pellava, Kuitu
- Laajat muodot, vähän yksityiskohtia
- Helppo pitkien otsikoiden takana
- Hyvä päivittäisiin julkaisuihin ja ruokalistoihin

### Näyttävä, satunnainen

- Revontulet, Neon, Kromi, Häiriö, Hologrammifolio
- Vahva valo, hienojakoinen rakenne
- Paras hyvin vähillä sanoilla
- Hyvä lanseerauksiin, tapahtumiin ja kansiin

Mieti, mistä brändisi on tehty. Leipomo on jauhoa, paperia ja lämmintä valoa, joten Kuitu tai Laveeraus. Ohjelmistoja myyvä studio on lasia ja puhdasta valoa, joten Huurrettu tai Prisma. Mieti sitten julkaisutiheyttä: mitä useammin, sitä rauhallisempi pinta. [Oikean Markin valinta](https://gradiently.design/fi/guide/pick-the-right-mark) neuvoo loput, ja Markkinoilla voit suodattaa suoraan materiaalilla.

## FAQ

### Mikä on liukuvärin materiaali?

Värien täyttämä rakenne, kuten kiilto, hohde, kudos tai kivi. Se määrää, näyttääkö väri silkiltä, lasilta, paperilta vai valolta.

### Montako kerrosta Markissa voi olla?

Enintään kolme: pohjakerros ja kaksi lisäkerrosta, joilla on omat peittävyydet ja sekoitustilat.

### Miten Silkki ja Revontulet eroavat?

Silkki on hienojen lankojen suuntakiiltoa. Revontulet on kirkkaasta reunasta tummaan taivaaseen nousevia valoverhoja.

### Heikentääkö rakeisuus tekstin luettavuutta?

Pieni rakeisuus harvoin heikentää, ja se peittää raitautumista. Markit myös rauhoittavat yksityiskohtia sanojen takana.

### Voinko hakea Markkinoilta materiaalilla?

Kyllä. Voit suodattaa materiaalin, värin, pohjan, tunnelman ja tyylin mukaan sekä hakea sanoilla kuten ”blue silk”.