Markkinat
Hinnoittelu
Kirjaudu sisäänAloita
SuunnitteluopasLiukuvärit
Liukuvärit

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

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.

GradientlyVahvistettu Gradiently-tili·1. lokakuuta 2026·4 min lukuaika
Kansi: Thin Pier · GR·YNRB·JF

Lyhyesti

  • 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.
Tällä sivulla
Neljä tapaa tehdä liukuväri PhotoshopissaNäin käytät liukuvärityökaluaPhotoshopin viisi liukuvärimuotoaLiukuvärieditorin käyttöPhotoshopin liukuvärikartat valokuvilleNäin estät Photoshop-liukuvärin sävyraidatLiukuvärit tekstissä ja muodoissaKun yhdestä kuvasta tulee kymmenen kokoa

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ä.

Gradient-työkalu

Mistä löytyy

Työkalurivi, pikanäppäin G

Sopii parhaiten

Liukuvärin vetäminen tasolle tai valintaan
Gradient Fill -täyttötaso

Mistä löytyy

Layer › New Fill Layer › Gradient

Sopii parhaiten

Taustat, joita säädetään myöhemmin
Gradient Map

Mistä löytyy

Layer › New Adjustment Layer › Gradient Map

Sopii parhaiten

Kuvan uudelleenväritys vaaleiden ja tummien sävyjen mukaan
Gradient Overlay

Mistä löytyy

Layer Style (fx-painike)

Sopii parhaiten

Muokattava väri teksteille ja muodoille
MenetelmäMistä löytyySopii parhaiten
Gradient-työkaluTyökalurivi, pikanäppäin GLiukuvärin vetäminen tasolle tai valintaan
Gradient Fill -täyttötasoLayer › New Fill Layer › GradientTaustat, joita säädetään myöhemmin
Gradient MapLayer › New Adjustment Layer › Gradient MapKuvan uudelleenväritys vaaleiden ja tummien sävyjen mukaan
Gradient OverlayLayer 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. 1

    Valitse työkalu

    Paina G. Gradient jakaa työkalupaikan Paint Bucketin kanssa, joten paina Shift+G, jos esiin tulee maalisanko.

  2. 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. 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. 4

    Valitse muoto

    Linear, Radial, Angle, Reflected tai Diamond. Seuraava osio näyttää kunkin vaikutuksen.

  5. 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. 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.

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 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 ja duotone-efekti kertovat lisää.

Indigon, ruusun ja voinkeltaisen karttalinear-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 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 näyttää ilmeen.

Photoshop-vinkki
Dither päälle. Raidat pois.
Lisää 2 % yksiväristä kohinaa ennen vientiä
Gradiently · @gradiently

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ä 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 kertoo miten.

Suunnittele elävällä liukuvärillä

Julkaisuja, tarinoita, dioja ja bannereita kaikissa koissa, ja teksti pysyy aina luettavana.

Aloita suunnittelu, ilmaiseksi

Usein kysyttyä

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.

Jaa tämä opas

Kirjoittanut GradientlyVahvistettu Gradiently-tili

Gradientlyn tiimi. Gradiently on Markien ympärille rakennettu suunnittelutyökalu: eläviä liukuvärejä, joiden ansiosta kaikki suunnittelemasi näyttää omaltasi.

Katso profiilimme

Tällä sivulla

Neljä tapaa tehdä liukuväri PhotoshopissaNäin käytät liukuvärityökaluaPhotoshopin viisi liukuvärimuotoaLiukuvärieditorin käyttöPhotoshopin liukuvärikartat valokuvilleNäin estät Photoshop-liukuvärin sävyraidatLiukuvärit tekstissä ja muodoissaKun yhdestä kuvasta tulee kymmenen kokoa

Jaa tämä opas

Seuraavaksi aiheesta Liukuvärit

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

Lue myös

Kaikki oppaat aiheesta Liukuvärit
Liukuvärit

Liukuvärikartta: värjää mikä tahansa kuva sekunneissa

3 min lukuaika

Liukuvärikartta ottaa minkä tahansa kuvan, valokuvan, tekstuurin tai kuvituksen, ja maalaa sen uudelleen valitsemillasi väreillä säilyttäen kaiken valon ja varjon. Se on nopein uudelleenvärityksen työkalu.

Liukuvärit

Miksi liukuvärissäsi on raitoja ja miten korjaat raidoittumisen

4 min lukuaika

Teit sileän liukuvärin, ja se palasi raidallisena. Se on raidoittumista, ja sillä on yksinkertainen syy ja kourallinen luotettavia korjauksia. Ensin laskutoimitus, sitten lääkkeet.

Liukuvärit

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

4 min lukuaika

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

Löydä ilme, joka on vain sinun.

Jokainen Mark on elävä tausta, jolla on yksi omistaja. Kokeile vapaata Markia ja lunasta omasi, kun se tuntuu oikealta.

Aloita suunnittelu

Tarkista sertifikaatti

Kirjoita sertifikaatin numero tai Markin koodi nähdäksesi, kuka sen omistaa.

Toimii ChatGPT:n ja Clauden kanssa

Pyydä tekoälyltäsi designia. Se tekee sen Markissasi, muokkausvalmiina.

ChatGPTClaude
Näin yhdistät

Tuote

  • Markkinat
  • Selaa
  • Hinnoittelu
  • Sertifikaatit

Opi

  • Suunnitteluopas
  • Ohjekeskus
  • Mitä uutta

Kehittäjille

  • Yleiskatsaus
  • ChatGPT ja Claude
  • API-viite
  • API-avaimet

Yritys

  • Tietoa meistä
  • Ota yhteyttä
  • Kirjaudu sisään

Juridiikka

  • Ehdot
  • Tietosuoja
  • Hyvitykset
  • Markin suoja
  • Evästeet
  • Kaikki käytännöt
Liiku kirjainten yli. Jokaisessa on oikea Mark.Kosketa kirjainta nähdäksesi sen Markin.Yksi nimi. Kymmenen Markia sen sisällä.
© 2026 Gradiently