# Brändin tekstuuri: materiaalista oma tunnusilme

[Canonical HTML page](https://gradiently.design/fi/guide/brand-texture)

Värin ja kirjasimen voi helposti poimia. Tekstuuri, pinnan rakeisuus, kiilto ja valo, on paljon vaikeampi kopioida ja kertoo brändistä yllättävän paljon.

## The short version

- Brändin tekstuuri on sen pintojen materiaalituntua, kuten rakeisuutta, paperin karheutta, lasimaista kiiltoa tai pehmeää valoa.
- Tekstuuri muuttaa värin tunnetta: sama violetti tuntuu rakeisena filmiltä, lasilla teknologialta ja silkillä ylellisyydeltä.
- Tekstuuri on heksakoodia vaikeampi kopioida, sillä se on materiaalin, valon ja mittakaavan yhdistelmä yhden arvon sijaan.
- Hyvä bränditekstuuri on riittävän rauhallinen sanojen taakse ja riittävän yhtenäinen tunnistettavaksi kaikissa muodoissa.
- Rakeisuus peittää myös väriporrastumista, joten se parantaa sekä laatua että luonnetta.

**Brändin tekstuuri** on materiaalituntua kaikessa, mitä brändi laittaa pinnalle: taustan rakeisuutta, paperin karheutta, lasin kiiltoa sekä valon suuntaa ja pehmeyttä. Se erottaa näytöllä olevan värin jonkin materiaalin väristä. Kahdella brändillä voi olla sama paletti ja fontti, mutta jos toinen on hienolla filmirakeella ja toinen puhtaalla lasilla, kukaan ei sekoita niitä.

Tekstuuri on myös niitä harvoja ilmeen osia, jotka vastustavat kopiointia. Kuka tahansa voi lukea heksakoodisi kuvakaappauksesta. Tarkan rakeisuuden, koon, tiheyden ja siihen osuvan valon toistaminen on paljon vaikeampaa. Siksi se sopii vahvasti [visuaalisen identiteettisi](https://gradiently.design/fi/guide/visual-identity) tunnusmerkiksi.

## Mitä tekstuuri tekee brändille

Tekstuuri kantaa mielikuvia, jotka havaitaan heti ennen sanoja. Se vastaa kysymyksiin: onko tämä käsintehtyä vai teknistä, lämmintä vai viileää, arkista vai erityistä?

| Tekstuuriperhe | Tuntuu tältä | Sopii tähän |
| --- | --- | --- |
| Hieno filmirae | Analoginen, toimituksellinen, harkittu | Studiot, kustantajat, valokuvaajat, musiikki |
| Paperin karheus | Käsintehty, painettu, rauhallinen | Tekijät, leipomot, paperituotteet, hyvinvointi |
| Lasimainen kiilto | Täsmällinen, digitaalinen, moderni | Ohjelmistot, fintech, tuotelanseeraukset |
| Silkin tai satiinin valo | Pehmeä, kallis, aistillinen | Kauneus, korut, muoti, hotellit |
| Puhdas tasainen väri | Suora, graafinen, rohkea | Kampanjat, urheilu, nuorisobrändit |

Viisi yleistä tekstuuriperhettä ja kunkin tunne. Tasainenkin väri on tekstuurivalinta: materiaalin puuttuminen kertoo jotakin.

Mikään ei ole toista parempi. Tärkeää on, että tekstuuri sopii siihen, mitä kerrot itsestäsi. Hitaasta käsityöstä puhuva brändi kiiltävällä lasilla lähettää ristiriitaisen viestin. [Brändin persoonallisuus](https://gradiently.design/fi/guide/brand-personality) on hyvä lähtökohta, jos et tiedä, mitä omasi pitäisi sanoa.

## Rakeisuus, materiaali ja valo: kolme kerrosta

Useimmat rikkaalta tuntuvat tekstuurit rakentuvat kolmesta kerroksesta. Niiden erillinen ajattelu tekee tekstuurista harkitun suunnittelukohteen lopuksi lisättävän suodattimen sijaan.

1. **Materiaali** Pinnan peruskäyttäytyminen: miten väri virtaa sen yli. Sileitä sekoituksia, pehmeitä taitteita, nestemäisiä muotoja tai teräviä viisteitä.
2. **Valo** Mistä se tulee ja kuinka kova se on. Pehmeä kulmavalo antaa syvyyttä, tasainen valaistus näyttää lattealta ja digitaaliselta.
3. **Rakeisuus** Hieno kohina päällä. Pieni määrä tekee pinnasta aidon tuntuisen ja peittää väriporrastumista. Liiallinen määrä näyttää likaiselta ja kilpailee sanojen kanssa.

- Tasainen, ei valonlähdettä: `linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #a5b4fc 100%)`
- Pehmeä valo oikealta ylhäältä: `radial-gradient(circle at 80% 15%, #a5b4fc 0%, #4338ca 30%, #1e1b4b 70%)`
- Lämmin valo vasemmalta alhaalta: `radial-gradient(ellipse at 20% 100%, #f9a8d4 0%, #7e22ce 35%, #1e1b4b 75%)`

Yksi väriperhe kolmessa valossa. Pelkkä valo muuttaa tunnelmaa ennen rakeisuuden lisäämistä.

Verkon rakeisuuskerrokseen riittää pieni taustan päälle asetettu SVG-kohina. Pidä peittävyys matalana: sen pitäisi tuntua enemmän kuin näkyä.

```css
.brand-surface {
  position: relative;
  background: radial-gradient(circle at 80% 15%, #a5b4fc 0%, #4338ca 30%, #1e1b4b 70%);
}

.brand-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Valaistu liukuväri hienolla kohinakerroksella. Nosta `baseFrequency`-arvoa hienompaan rakeeseen ja laske `opacity`-arvoa rauhallisempaan.

[Rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) antaa lisää reseptejä, ja [liukuvärin porrastuminen](https://gradiently.design/fi/guide/gradient-banding) selittää, miksi kohina on tavallinen korjaus sileiden sekoitusten näkyviin raitoihin.

## Näin valitset brändisi tekstuurin

- **Aloita yhdestä sanasta.** Kirjoita tavoittelemasi tunne, kuten ”käsintehty” tai ”täsmällinen”, ja valitse sitä vastaava perhe.
- **Testaa sanojen takana.** Tekstuuri elää otsikoiden, hintojen ja päivämäärien alla. Jos se vaikeuttaa lukemista puhelinkoossa, se on liian vahva.
- **Tarkista molemmat ääripäät.** Katso 1080×1920-tarinaa ja 1050×600-käyntikorttia. Suurena sopiva rae voi puuroutua pienessä koossa.
- **Tarkista painettuna.** Näytöllä hieno rakeisuus voi näyttää paperilla painovirheeltä. Tulosta yksi A5-esite ennen päätöstä.

Leipomon pystyjulkaisu, jossa lukee Hapanjuurileipää joka aamu pehmeästi teksturoidulla taustalla

Pehmeämpi pinta leipomolle: materiaali voi sanoa käsintehty ennen sanoja.

Fintech-pystyjulkaisu, jossa lukee Maksut selvitetään sekunneissa erilaisella tekstuuritaustalla

Eri Mark fintech-tuotteelle. Sama asettelu, täysin eri brändi.

## Virheet, jotka saavat tekstuurin näyttämään halvalta

### Vältä

- Kuvapankin paperikuvan liimaamista kaiken alle
- Vahvaa rakeisuutta, joka sumentaa tekstin
- Eri tekstuuria kullakin alustalla
- Tekstuuria vain sanojen takana, muualla tasaista
- Yhden tekstuurikuvan skaalausta joka kokoon

### Tee näin

- Materiaalista, valosta ja rakeesta rakennettu tekstuuri
- Riittävän hieno rae tuntumaan ilman huomiota
- Yksi pinta syötteessä, sivustolla ja painossa
- Sama pinta jokaisessa kuvassa
- Renderöi tekstuuri uudelleen joka koossa

Viimeinen kohta yllättää monet brändit. Kun tekstuurikuva venytetään neliöjulkaisusta leveäksi banneriksi, rakeisuuskin venyy ja valo osuu outoon paikkaan. Tekstuuri pitää renderöidä käyttökokoon. Tätä käsittelee myös [taustatekstuuri](https://gradiently.design/fi/guide/background-texture).

## Tee tekstuurista omasi

Ilmainen kohinakerros on kaikkien saatavilla, ja siinä on juuri ongelma: mitä suositumpi tekstuuri on, sitä vähemmän se kertoo sinusta. Omistettava tekstuuri tarvitsee täsmällisen yhdistelmän, jota kukaan muu ei käytä.

Tähän Gradiently Mark on rakennettu. Jokainen Mark on värien, enintään kolmen pinotun materiaalin, valon, rakeisuuden ja liikkeen resepti. Sitä verrataan kaikkiin muihin, joten kahta samanlaista ei ole. Se renderöityy elävänä jokaisessa suunnittelukoossa, joten rakeisuus ja valo asettuvat aina oikein. Se rauhoittaa yksityiskohtia sanojesi takana, jotta otsikot pysyvät luettavina. Kun lunastat Markin, vain sinä voit viedä sillä tehtyjä suunnitelmia. [Liukuvärimateriaalit](https://gradiently.design/fi/guide/mark-materials-explained) selittää materiaalikerrokset tarkemmin.

Mark on tekstuuri brändin tunnusmerkkinä: materiaali, valo ja rakeisuus yhdessä reseptissä, yksi omistaja kerrallaan.

## FAQ

### Mitä tekstuuri tarkoittaa brändäyksessä?

Brändin visuaalisten pintojen materiaalituntua, kuten rakeisuutta, paperia, kiiltoa tai valoa, joka muovaa värien ja sanojen tunnetta.

### Auttaako vai haittaako rakeisuus luettavuutta?

Hieno, vähän peittävä rae ei yleensä haittaa ja auttaa usein peittämällä väriporrastumista. Vahva rae pienen tekstin takana sumentaa kirjaimia, joten pidä se hienovaraisena sanojen kohdalla.

### Voiko tekstuuri olla osa brändi-identiteettiä?

Kyllä. Kaikilla pinnoilla käytetty yhtenäinen tekstuuri muuttuu itsessään tunnistettavaksi värin tai fontin tavoin.

### Miten lisään liukuväriin rakeisuutta CSS:llä?

Aseta pieni SVG-kohinakuva liukuvärin päälle pseudoelementillä. Käytä noin 10 ja 15 prosentin väliltä valittua peittävyyttä ja overlay-sekoitusta.