# Illustratorin liukuvärit: lineaarinen, säteittäinen ja vapaa

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

Illustratorin liukuvärit löytyvät pienestä paneelista, jonka toiminnoista moni käyttää vain puolta. Tutustu koko paneeliin, vapaamuotoiseen liukuväriin ja viennin vaikutuksiin.

## The short version

- Illustratorin Gradient-paneelissa on kolme liukuvärityyppiä: Linear, Radial ja Freeform.
- Gradient-paneeli avautuu valikosta Window › Gradient, ja Gradient-työkalulla (G) voit siirtää, kiertää ja muokata liukuväriä suoraan työssä.
- Viivan liukuväri voi kulkea viivan sisällä, sen polkua pitkin tai sen leveyden poikki.
- Kun haluat liukuvärin muokattavaan tekstiin, lisää Appearance-paneelissa uusi täyttö ja kohdista liukuväri siihen.
- Lineaariset ja säteittäiset liukuvärit viedään SVG:n omina liukuvärielementteinä, mutta vapaamuotoisille ja verkkoliukuväreille ei ole SVG-vastinetta.

**Illustratorin liukuvärit** määritetään Gradient-paneelissa (Window › Gradient) ja muotoillaan työssä Gradient-työkalulla (G). Valitse kohde, valitse paneelista Linear, Radial tai Freeform ja määritä värit napsauttamalla liukusäätimen alla olevia väripisteitä. Lineaariset ja säteittäiset liukuvärit sopivat logoihin, kuvakkeisiin ja verkkokäyttöön, koska ne pysyvät kevyinä ja terävinä kaikkialla. Freeform sopii pehmeään, maalaukselliseen väriin ja vanhempi Gradient Mesh valokuvamaiseen varjostukseen.

## Gradient-paneelin säätimet

Aloita valitsemalla kohde ja aktivoimalla oikea osa: paneelissa näkyvät täytön ja viivan neliöt, ja liukuväri kohdistuu päällimmäiseen. Liukuvärin esikatselukuvan napsauttaminen ottaa käyttöön viimeksi käyttämäsi liukuvärin. Se helpottaa usean muodon yhtenäistä käsittelyä.

| Säädin | Toiminto |
| --- | --- |
| Tyyppi | Lineaarinen, säteittäinen tai vapaamuotoinen |
| Kulma | Kiertää lineaarista tai säteittäistä liukuväriä |
| Kuvasuhde | Litistää säteittäisen liukuvärin ellipsiksi |
| Käännä | Kääntää väripisteiden järjestyksen |
| Väripisteet | Lisää napsauttamalla liukusäätimen alle, poista vetämällä pois |
| Peittävyys ja sijainti | Jokaisen pisteen läpinäkyvyys ja tarkka sijainti prosentteina |
| Keskikohdan vinoneliöt | Siirtävät kohtaa, jossa kaksi vierekkäistä väriä sekoittuvat puoliksi |
| Viivan asetukset | Viivan sisällä, polkua pitkin tai leveyden poikki |

Illustratorin Gradient-paneelin osien vaikutukset. Kun syötät sijainnit Location-kenttään, saat liukuvärisarjan pysymään yhtenäisenä.

Tallenna liukuväri vetämällä esikatselukuva paneelista Swatches-paneeliin. Tallennetut liukuvärit pitävät brändin värisiirtymät samoina tiedostosta toiseen. [Liukuvärin väripisteet](https://gradiently.design/fi/guide/gradient-stops) kertoo, miten valitset tasaisilta näyttävät sijainnit.

## Lineaariset ja säteittäiset liukuvärit

Kun valitset Gradient-työkalun, kohteen päälle ilmestyy liukuvärin säätöjana. Siirrä alkukohtaa sen pyöreästä päästä, muuta pituutta ja kulmaa neliömäisestä päästä ja määritä värit janan pisteistä avaamatta paneelia. Jos jana on piilossa, saat sen takaisin komennolla View › Show Gradient Annotator. Pidä Shift painettuna vetäessäsi, niin kulma muuttuu 45 asteen askelin.

- Lineaarinen, kolme väripistettä: `linear-gradient(120deg, #064e3b 0%, #10b981 55%, #d9f99d 100%)`
- Säteittäinen, kuvasuhde 100%: `radial-gradient(circle at 50% 50%, #fef3c7 0%, #f59e0b 45%, #78350f 100%)`
- Säteittäinen, litistetty: `radial-gradient(ellipse 70% 40% at 50% 50%, #e0e7ff 0%, #6366f1 50%, #1e1b4b 100%)`

Lineaarinen liukuväri, pyöreä säteittäinen liukuväri ja litistetty säteittäinen liukuväri CSS-muodossa, jotta voit toistaa ne verkkosivulla.

Illustratorin liukuvärit seuraavat muotoa eivätkä piirtoaluetta. Jos valitset useita kohteita ja vedät Gradient-työkalulla niiden kaikkien yli, sama liukuväri ulottuu koko ryhmään. Näin kirjain- tai kuvakerivi saa yhteisen värisiirtymän.

## Vapaamuotoiset liukuvärit

Vapaamuotoisessa liukuvärissä ei ole säätöjanaa. Sijoitat väripisteitä mihin tahansa muodon sisälle, ja Illustrator sekoittaa värit niiden välillä. Tuloksena on [verkkoliukuvärin](https://gradiently.design/fi/guide/mesh-gradients) tapainen pehmeä ja orgaaninen pinta huomattavasti pienemmällä vaivalla kuin Mesh-työkalulla.

1. **Vaihda tyyppi** Valitse muoto ja napsauta Gradient-paneelista Freeform. Illustrator lisää muutaman aloituspisteen.
2. **Valitse Points tai Lines** Points-tilassa sijoitat yksittäisiä väripisteitä. Lines-tilassa napsautat pisteistä polun, jota pitkin väri kulkee.
3. **Määritä jokainen väri** Valitse väri kaksoisnapsauttamalla pistettä tai valitse piste ja värimalli.
4. **Säädä leviämistä** Vedä Points-tilassa pisteen ympärillä olevaa katkoviivaympyrää tai muuta paneelin Spread-arvoa. Näin päätät, kuinka pitkälle väri ulottuu.
5. **Poista tarpeettomat pisteet** Vedä piste muodon ulkopuolelle tai paina Delete. Harvat, hyvin sijoitetut pisteet näyttävät rauhallisemmilta kuin suuri joukko.

> **Freeform vai Gradient Mesh** Käytä vapaamuotoista liukuväriä pelkistettyihin kuvituksiin ja taustoihin. Mesh-työkalu (U) antaa edelleen tarkimman hallinnan realistiseen varjostukseen, mutta jokainen verkkopiste on säädettävä käsin.

## Liukuvärit viivoissa

Valitse Gradient-paneelin viivan neliö ja lisää liukuväri. Näkyviin tulee kolme painiketta. Niiden vaikutus lopputulokseen on suurempi kuin minkään yksittäisen värivalinnan.

| Viivan asetus | Tulos | Sopii käyttöön |
| --- | --- | --- |
| Viivan sisällä | Liukuväri täyttää viivan kuin se olisi muoto | Paksut ääriviivat ja kehykset |
| Viivaa pitkin | Väri kulkee polun alusta loppuun | Viivat, renkaat ja edistymiskaaret |
| Viivan poikki | Väri kulkee viivan reunasta toiseen | Putket, neonviivat ja nauhat |

Kolme tapaa kohdistaa liukuväri viivaan Illustratorissa.

## Muokattavana pysyvä liukuväriteksti

Muokattavan tekstin merkkitäyttöön ei aina voi lisätä liukuväriä suoraan. Tekstin muuttaminen poluiksi taas estää kirjoitusvirheiden korjaamisen. Varma tapa on Appearance-paneeli: valitse tekstikohde, valitse paneelin valikosta Add New Fill, vedä uusi täyttö tarvittaessa Characters-rivin alle ja lisää liukuväri siihen. Sanat pysyvät muokattavina, ja liukuväri ulottuu koko riville. [Liukuvärilogot](https://gradiently.design/fi/guide/gradient-logo) kertoo, milloin värisiirtymä auttaa logoa ja milloin tarvitaan yksivärinen versio.

Pystysuuntainen A4-juliste, jossa suuri otsikko on pehmeällä liukuväritaustalla

A4-juliste koossa 2480×3508. Pidä tausta pehmeänä ja teksti yksivärisenä tai yksinkertaisena liukuvärinä, jotta sanat voi lukea huoneen toiselta puolelta.

## Illustratorin liukuvärien vienti SVG:ksi ja painoon

SVG-viennissä lineaariset ja säteittäiset liukuvärit muuttuvat muodon omiksi liukuvärielementeiksi. Ne pysyvät kevyinä ja terävinä kaikissa ko’oissa. Vapaamuotoisille ja verkkoliukuväreille ei ole SVG-vastinetta, joten ne voivat rasteroitua tai muuttua likiarvoiksi. Tarkista tiedosto ennen kuin annat sen kehittäjälle. [SVG-liukuvärit](https://gradiently.design/fi/guide/svg-gradients) selittää tiedostomuodon.

```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="leaf" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#064e3b"/>
      <stop offset="0.55" stop-color="#10b981"/>
      <stop offset="1" stop-color="#d9f99d"/>
    </linearGradient>
  </defs>
  <circle cx="100" cy="100" r="90" fill="url(#leaf)"/>
</svg>
```

Kolmen väripisteen lineaarinen liukuväri SVG-viennin jälkeen näyttää suunnilleen tältä. Pisteet ja sijainnit tulevat suoraan Gradient-paneelista.

Painossa liukuvärit paljastavat ensimmäisinä juovittumisen ja värimuutokset. Muunna työ painon väritilaan ajoissa, vältä pitkiä siirtymiä kahden hyvin läheisen sävyn välillä ja pyydä vedos. [Liukuvärien painaminen](https://gradiently.design/fi/guide/print-gradients) listaa tarkistukset.

## Taustan lisääminen työhön

Illustrator on logolle oikea paikka. Julkaisujen, tarinoiden ja diojen tausta on eri tehtävä, sillä se on sovitettava jokaiseen muotoon uudelleen. Gradientlyn Mark on valmis tausta, joka piirtyy kaikissa ko’oissa ja pitää sanat luettavina. Kun lunastat sen, mikään muu brändi ei voi viedä sillä tehtyjä töitä.

## FAQ

### Mistä Illustratorin Gradient-paneeli löytyy?

Avaa se valikosta Window › Gradient. Gradient-työkalu on työkalupalkissa, ja sen pikanäppäin on G.

### Miten teen vapaamuotoisen liukuvärin Illustratorissa?

Valitse muoto ja Gradient-paneelista Freeform. Lisää sitten väripisteitä Points-tilassa tai piirrä pisteistä viiva Lines-tilassa.

### Miten lisään liukuvärin tekstiin Illustratorissa muuttamatta sitä poluiksi?

Lisää tekstikohteelle uusi täyttö Appearance-paneelissa ja kohdista liukuväri siihen. Teksti pysyy muokattavana.

### Voinko lisätä liukuvärin viivaan Illustratorissa?

Kyllä. Valitse viiva Gradient-paneelissa ja määritä, kulkeeko liukuväri viivan sisällä, sitä pitkin vai sen poikki.

### Toimivatko Illustratorin liukuvärit SVG:ssä?

Lineaariset ja säteittäiset liukuvärit viedään SVG:n omina liukuväreinä. Vapaamuotoisille ja verkkoliukuväreille ei ole SVG-vastinetta.