# Photoshop-liukuväri: työkalut, kartat ja sileä lopputulos

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

Photoshopissa liukuvärin voi tehdä neljällä tavalla eri tehtäviin. Näin valitset oikean, käytät editoria ja pidät väriseoksen raidattomana.

## The short version

- Photoshop luo liukuvärit neljällä tavalla: Gradient-työkalulla, Gradient Fill -täyttötasolla, Gradient Map -säädöllä ja Gradient Overlay -tasotyylillä.
- Liukuvärityökalun live-tila luo muokattavan täyttötason, jonka väripisteitä voi vetää työalueella. Classic-tila maalaa pikseleitä nykyiselle tasolle.
- Photoshopissa on viisi liukuvärimuotoa: Linear, Radial, Angle, Reflected ja Diamond.
- Liukuvärikartta värittää kuvan uudelleen sävyarvojen mukaan: tummimmat pikselit saavat vasemman ja vaaleimmat oikean väripisteen.
- Dither, 16-bittinen asiakirja ja pieni määrä yksiväristä kohinaa estävät luotettavimmin Photoshop-liukuvärin sävyraidat.

**Photoshop-liukuväri** tehdään Gradient-työkalulla (paina G), Gradient Fill -täyttötasolla, Gradient Map -säädöllä tai Gradient Overlay -tyylillä. Useimmissa töissä kannattaa käyttää työkalun live-tilaa, jotta liukuväri jää omalle muokattavalle tasolleen. Valitse menetelmäksi Perceptual, pidä Dither käytössä ja vaihda 16 bittiin kanavaa kohti, kun liukuväri on tumma tai hienovarainen. Nämä tavat erottavat puhtaan väriliu’un raidallisesta.

## Neljä tapaa tehdä liukuväri Photoshopissa

Moni käyttää liukuvärityökalua kaikkeen ja ihmettelee sitten, miksei värejä voi muuttaa myöhemmin. Jokaisella menetelmällä on tehtävänsä. Oikea valinta alussa säästää uudelleen tekemiseltä.

| Menetelmä | Mistä löytyy | Sopii parhaiten |
| --- | --- | --- |
| Gradient-työkalu | Työkalurivi, pikanäppäin G | Liukuvärin vetäminen tasolle tai valintaan |
| Gradient Fill -täyttötaso | Layer › New Fill Layer › Gradient | Taustat, joita säädetään myöhemmin |
| Gradient Map | Layer › New Adjustment Layer › Gradient Map | Kuvan uudelleenväritys vaaleiden ja tummien sävyjen mukaan |
| Gradient Overlay | Layer Style (fx-painike) | Muokattava väri teksteille ja muodoille |

Photoshopin neljä liukuvärimenetelmää ja niiden vahvuudet. Täyttötasot, kartat ja peittokuvat eivät muuta alkuperäistä sisältöä.

## Näin käytät liukuvärityökalua

1. **Valitse työkalu** Paina G. Gradient jakaa työkalupaikan Paint Bucketin kanssa, joten paina Shift+G, jos esiin tulee maalisanko.
2. **Valitse live tai classic** Nykyversioiden asetusrivillä **Gradient** luo muokattavan liukuväritäyttötason työalueen kahvoineen. **Classic gradient** maalaa pikseleitä aktiiviselle tasolle. Valitse live, ellet tarkoituksella maalaa maskiin.
3. **Valitse värit** Napsauta asetusrivin liukuvärinäytettä tai avaa Window › Gradients selataksesi esiasetuksia kansioissa. Määritä etu- ja taustaväri ensin, jos haluat yksinkertaisen kahden värin seoksen.
4. **Valitse muoto** Linear, Radial, Angle, Reflected tai Diamond. Seuraava osio näyttää kunkin vaikutuksen.
5. **Vedä työalueen yli** Vedon alku on ensimmäinen väripiste ja loppu viimeinen. Shift lukitsee kulman 45 asteen välein. Live-tilassa voit siirtää pisteitä ja keskikohtaa jälkikäteen.
6. **Määritä menetelmä ja dither** Valitse **Perceptual**, kun haluat tasaiset seokset kylläisten värien välille, ja pidä **Dither** päällä. Classic toistaa vanhemman toiminnan, joka voi tehdä keskikohdasta samean.

## Photoshopin viisi liukuvärimuotoa

Linear eli lineaarinen on taustojen perustyökalu. Radial eli säteittäinen tekee valoalueen ja antaa nopeasti syvyyttä tasaiselle taustalle. Angle kiertää väriä keskipisteen ympäri kuin kellon viisari. Reflected peilaa lineaarisen seoksen keskeltä ulospäin ja sopii horisontteihin sekä valopalkkeihin. Diamond levittää väriä neliömäisesti, ja sitä käytät vähiten.

- Lineaarinen: `linear-gradient(90deg, #1e1b4b 0%, #7c3aed 50%, #f9a8d4 100%)`
- Säteittäinen: `radial-gradient(circle at 50% 50%, #fde68a 0%, #f97316 40%, #431407 100%)`
- Kulma: `conic-gradient(from 0deg at 50% 50%, #0ea5e9, #6366f1, #ec4899, #0ea5e9)`
- Peilattu: `linear-gradient(90deg, #0f172a 0%, #14b8a6 50%, #0f172a 100%)`

Neljä Photoshopin viidestä muodosta CSS:llä rakennettuna verkkoa varten. Angle on kartioliukuväri, Diamondille ei ole suoraa CSS-vastinetta.

## Liukuvärieditorin käyttö

Avaa editori kaksoisnapsauttamalla asetusrivin värinäytettä tai täyttötason ikkunan liukuväriä. Väripisteet ovat palkin alla ja peittävyyspisteet yläpuolella. Lisää piste napsauttamalla palkin alle, poista vetämällä pois ja siirrä seoksen keskikohtaa vetämällä pisteiden välistä pientä vinoneliötä. Location-kenttään voit kirjoittaa tarkat paikat. Se auttaa, kun liukuvärisarjan pitää sopia yhteen.

Kolmesta viiteen pistettä näyttää yleensä täyteläisemmältä kuin kaksi: varjosävy, pääväri, vaalennus ja ehkä korostus. Pidä vierekkäiset värit sukulaisina, sillä vastavärit kulkevat harmaan kautta. [Sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) selittää tämän. Editorin Gradient Type -valikossa on myös **Noise**, joka tuottaa satunnaisia väriraitoja. Se on hyödyllinen tekstuurikokeiluissa, harvoin brändityössä.

> **Häivytä läpinäkyvään, älä valkoiseen** Jos haluat alla olevan kuvan näkyviin, aseta viimeisen peittävyyspisteen arvoksi 0 % valkoisen valitsemisen sijaan. Foreground to Transparent -esiasetus tekee tämän ja säilyttää alemman tason näkyvissä haalistamatta sitä.

## Photoshopin liukuvärikartat valokuville

Gradient Map ohittaa kuvan värit ja lukee vain sävyarvot. Tummimmat pikselit saavat vasemman väripisteen, vaaleimmat oikean ja välisävyt seuraavat palkkia. Kahdella pisteellä saat klassisen duotonen, kolmella voit viilentää varjot ja lämmittää huippuvalot. Vaihda säätötason sekoitustilaksi Color tai Soft Light ja laske peittävyyttä lempeämpään käsittelyyn. [Liukuvärikartta](https://gradiently.design/fi/guide/gradient-map) ja [duotone-efekti](https://gradiently.design/fi/guide/duotone-effect) kertovat lisää.

Indigon, ruusun ja voinkeltaisen kartta: `linear-gradient(90deg, #1e1b4b 0%, #db2777 55%, #fde68a 100%)`

Kolmen pisteen kartta: varjot muuttuvat indigoksi, keskisävyt ruusuksi ja huippuvalot vaalean voinkeltaisiksi. Lisää nämä Gradient Map -tason väripisteiksi.

## Näin estät Photoshop-liukuvärin sävyraidat

Sävyraidat ovat näkyviä portaita kohdissa, joissa seoksen pitäisi olla sileä. Ne ovat pahimmillaan suurilla työalueilla tummissa, vähäkontrastisissa liukuväreissä. 8-bittisessä tiedostossa kahden läheisen värin välille mahtuu vain rajallinen määrä sävyjä. [Liukuvärien sävyraidat](https://gradiently.design/fi/guide/gradient-banding) selittää ilmiön kokonaan.

### Aiheuttaa raitoja

- 8-bittinen asiakirja tummalle, hienovaraiselle seokselle
- Dither pois käytöstä
- Kaksi läheistä pistettä 4 000 px:n alueella
- Voimakas JPEG-pakkaus viennissä
- Classic-menetelmä vahvojen vastavärien välillä

### Pitää sileänä

- Image › Mode › 16 Bits/Channel työskentelyn aikana
- Dither valittuna työkalussa tai täyttöikkunassa
- Keskipiste tai Perceptual-menetelmä
- PNG tai laadukas JPEG
- 1-3 % yksiväristä kohinaa harmaalla Overlay-tasolla

Kohinakerros ansaitsee selityksen. Täytä uusi taso 50-prosenttisella harmaalla, valitse Overlay niin, että harmaa katoaa, ja käytä Filter › Noise › Add Noise -toimintoa Gaussian ja Monochromatic valittuina. Hieno rakeisuus rikkoo portaat, kestää pakkausta sileää seosta paremmin ja saa liukuvärin tuntumaan pinnalta. [Rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) näyttää ilmeen.

Pystyjulkaisu tummalla sileällä liukuvärillä, mukana lyhyt dither- ja kohinavinkki

Juuri tällaisessa tummassa seoksessa sävyraidat näkyvät. Dither ja kevyt rakeisuus pitävät sen sileänä joka näytöllä.

## Liukuvärit tekstissä ja muodoissa

Lisää muokattavana säilyvälle tekstille Gradient Overlay fx-valikosta. Pidä Align with Layer valittuna, jotta seos ulottuu sanojen eikä koko työalueen yli. Säädä Scale ja Angle, kunnes värimuutos on haluamassasi kohdassa. Vaihtoehtona on tekstin yläpuolinen liukuväritäyttötaso, joka leikataan tekstiin pitämällä Alt (Macissa Option) painettuna ja napsauttamalla tasojen välistä viivaa. Kun sanat ovat liukuvärin päällä eivätkä sen värisiä, [teksti liukuvärillä](https://gradiently.design/fi/guide/text-on-gradient) auttaa luettavuudessa.

## Kun yhdestä kuvasta tulee kymmenen kokoa

Photoshop sopii erinomaisesti yhteen tarkasti viimeisteltyyn kuvaan. Työ hidastuu, kun saman taustan pitää muuttua julkaisuksi, tarinaksi, banneriksi ja pikkukuvaksi. Jokainen rajaus siirtää kirkkainta kohtaa ja jokainen työalue vaatii liukuvärin uudelleen piirtämisen. Gradientlyssä tausta on Mark, joka renderöityy jokaiseen suunnittelukokoosi. Sen rauhallisin alue siirtyy itse sanojesi taakse, joten tarina ja banneri syntyvät yhdestä designista. [Yksi ilme joka kokoon](https://gradiently.design/fi/guide/one-look-every-size) kertoo miten.

## FAQ

### Missä Photoshopin liukuvärityökalu on?

Se jakaa työkalurivin paikan Paint Bucketin kanssa. Valitse se painamalla G tai vaihda työkalujen välillä painamalla Shift+G.

### Miksi Photoshop-liukuvärissäni näkyy raitoja?

Sävyraidat syntyvät, kun läheisten värien välissä on liian vähän sävyasteita. Työskentele 16 bitillä kanavaa kohti, pidä Dither päällä ja lisää hieman yksiväristä kohinaa ennen vientiä.

### Miten häivytän Photoshop-liukuvärin läpinäkyväksi?

Käytä Foreground to Transparent -esiasetusta tai aseta Gradient Editorin viimeisen peittävyyspisteen arvoksi 0 %.

### Miten lisään liukuvärin Photoshop-tekstiin muokattavuuden säilyttäen?

Lisää Gradient Overlay -tasotyyli Align with Layer valittuna tai leikkaa liukuväritäyttötaso tekstitasoon.

### Mitä eroa on liukuvärillä ja liukuvärikartalla Photoshopissa?

Liukuväri maalaa uuden värin alueelle. Liukuvärikartta värittää olemassa olevan kuvan sävyarvojen mukaan tummimmasta vaaleimpaan.