# Gradient i Photoshop: verktyg, kartor och mjuka resultat [Canonical HTML page](https://gradiently.design/sv/guide/photoshop-gradient) Photoshop ger dig fyra olika sätt att göra en gradient, och vart och ett passar olika jobb. Här är vilket du ska ta till, hur redigeraren egentligen fungerar och vanorna som håller en blandning fri från ränder. ## The short version - Photoshop gör gradienter på fyra sätt: gradientverktyget (Gradient tool), ett gradientfyllningslager, en gradientkarta (Gradient Map) och lagerstilen gradientöverlägg (Gradient Overlay). - Gradientverktygets liveläge skapar ett redigerbart fyllningslager vars färgstopp du kan dra på ytan, medan klassiskt läge målar pixlar på det aktuella lagret. - Photoshop erbjuder fem gradientformer: Linear, Radial, Angle, Reflected och Diamond. - En gradientkarta färgsätter om en bild efter dess toner och skickar de mörkaste pixlarna till vänster stopp och de ljusaste till höger. - Dither, ett 16-bitarsdokument och lite monokromt brus är de pålitligaste sätten att stoppa bandning i en gradient i Photoshop. En **gradient i Photoshop** görs med gradientverktyget (Gradient tool, tryck G), ett gradientfyllningslager, en gradientkarta (Gradient Map) eller en lagerstil för gradientöverlägg (Gradient Overlay). För det mesta, använd verktyget i sitt liveläge så att blandningen ligger på ett eget redigerbart lager, välj Perceptual som metod, låt Dither vara ibockad och byt till 16 bitar per kanal när gradienten är mörk eller subtil. De vanorna är skillnaden mellan ett rent svep av färg och ett randigt. ## Fyra sätt att göra en gradient i Photoshop Folk tar ofta gradientverktyget till allt och undrar sedan varför de inte kan ändra färgerna senare. Varje metod har ett jobb, och att välja rätt från början sparar ombyggnad. | Metod | Var du hittar den | Bäst för | | --- | --- | --- | | Gradient tool | Verktygsfältet, genväg G | Att dra en blandning över ett lager eller ett urval | | Gradient Fill layer | Layer › New Fill Layer › Gradient | Bakgrunder du kommer att fortsätta justera | | Gradient Map | Layer › New Adjustment Layer › Gradient Map | Att färgsätta om ett foto efter dess ljusa och mörka toner | | Gradient Overlay | Layer Style (fx-knappen) | Färg på text och former som förblir redigerbar | De fyra gradientmetoderna i Photoshop och vad var och en är bra på. Fyllningslager, kartor och överlägg är alla icke-destruktiva. ## Så använder du gradientverktyget 1. **Välj verktyget** Tryck G. Gradientverktyget delar plats med färghinken, så tryck Skift+G om hinken dyker upp i stället. 2. **Välj live eller klassiskt** I aktuella versioner erbjuder alternativfältet **Gradient**, som skapar ett redigerbart gradientfyllningslager med handtag på ytan, och **Classic gradient**, som målar pixlar på det aktiva lagret. Välj live om du inte medvetet målar i en mask. 3. **Välj färger** Klicka på gradientrutan i alternativfältet, eller öppna Window › Gradients för att bläddra bland förinställningar i mappar. Ställ in förgrunds- och bakgrundsfärg först om du vill ha den enklaste tvåfärgsblandningen. 4. **Välj en form** Linear, Radial, Angle, Reflected eller Diamond. Nästa avsnitt visar vad var och en gör. 5. **Dra över ytan** Starten på draget är det första färgstoppet och slutet är det sista. Håll Skift för att låsa vinkeln till steg på 45 grader. I liveläge kan du dra stoppen och mittpunkten efteråt. 6. **Ställ in metod och dither** Välj **Perceptual** för jämna blandningar mellan mättade färger, och låt **Dither** vara på. Classic återger det äldre beteendet, som kan se lerigt ut i mitten. ## De fem gradientformerna i Photoshop Linear är arbetshästen för bakgrunder. Radial gör en ljusfläck, vilket är det snabbaste sättet att ge en platt bakgrund djup. Angle sveper färg runt en mittpunkt som en klockvisare. Reflected speglar en linjär blandning från mitten och utåt, vilket passar horisonter och ljusstaplar. Diamond sprider färg i en kvadrat och är den du kommer att använda minst. - Linjär: `linear-gradient(90deg, #1e1b4b 0%, #7c3aed 50%, #f9a8d4 100%)` - Radiell: `radial-gradient(circle at 50% 50%, #fde68a 0%, #f97316 40%, #431407 100%)` - Vinkel: `conic-gradient(from 0deg at 50% 50%, #0ea5e9, #6366f1, #ec4899, #0ea5e9)` - Reflekterad: `linear-gradient(90deg, #0f172a 0%, #14b8a6 50%, #0f172a 100%)` Fyra av Photoshops fem former, återbyggda i CSS så att du kan kopiera dem till webben. Angle är en konisk gradient; Diamond har ingen direkt CSS-motsvarighet. ## Arbeta i gradientredigeraren Dubbelklicka på rutan i alternativfältet, eller på gradienten i ett fyllningslagers dialog, för att öppna redigeraren. Färgstopp sitter under fältet och opacitetsstopp ovanför. Klicka under fältet för att lägga till ett stopp, dra bort ett för att ta bort det och dra den lilla romben mellan två stopp för att flytta mittpunkten i deras blandning. Fältet Location låter dig skriva in exakta positioner, vilket spelar roll när du vill att en uppsättning gradienter ska matcha. Tre till fem stopp ser oftast rikare ut än två: en skuggton, en huvudfärg, en ljusning och kanske en accent. Håll angränsande stopp besläktade, eftersom motsatta färger bredvid varandra passerar genom grått, vilket förklaras i [leriga gradienter](https://gradiently.design/sv/guide/muddy-gradients). Redigerarens meny Gradient Type erbjuder också **Noise**, som genererar slumpmässiga färgband; det är användbart för texturexperiment, sällan för varumärkesarbete. > **Tona ut till genomskinlig, inte till vit** För att låta en bild synas igenom, sätt det sista opacitetsstoppet till 0 % i stället för att välja vitt. Förinställningen Foreground to Transparent gör detta, och den låter lagret under förbli synligt i stället för att tvätta ut det. ## Gradientkartor i Photoshop för foton En Gradient Map ignorerar fotots färger och läser bara dess toner. De mörkaste pixlarna tar vänster stopp, de ljusaste tar höger, och allt däremellan följer fältet. Med två stopp får du en klassisk duoton; med tre kan du driva skuggor svala och högdagrar varma. Sätt justeringslagrets blandningsläge till Color eller Soft Light och sänk opaciteten för en mildare ton. [Gradientkarta](https://gradiently.design/sv/guide/gradient-map) och [duotoneffekten](https://gradiently.design/sv/guide/duotone-effect) går djupare. Karta i indigo, rosa och smör: `linear-gradient(90deg, #1e1b4b 0%, #db2777 55%, #fde68a 100%)` En karta med tre stopp: skuggor blir indigo, mellantoner rosa, högdagrar ett blekt smörgult. Ladda dessa som stoppen i ett Gradient Map-lager. ## Så stoppar du bandning i en gradient i Photoshop Bandning är synliga steg där en blandning borde vara mjuk. Den är värst i mörka gradienter med låg kontrast som sträcks över en stor yta, eftersom en 8-bitarsfil bara har ett begränsat antal nivåer mellan två nära färger. Hela förklaringen finns i [gradientbandning](https://gradiently.design/sv/guide/gradient-banding). ### Ger band - Ett 8-bitarsdokument för en mörk, subtil blandning - Dither avstängt - Två nära stopp utdragna över 4 000 px - Kraftig JPEG-komprimering vid export - Metoden Classic mellan starka motsatta färger ### Håller den mjuk - Image › Mode › 16 Bits/Channel medan du arbetar - Dither ibockat i verktyget eller fyllningsdialogen - Ett mittstopp, eller metoden Perceptual - PNG, eller JPEG i hög kvalitet - 1 till 3 % monokromt brus på ett grått Overlay-lager Brusskiktet är värt att förklara. Fyll ett nytt lager med 50 % grått, sätt det på Overlay så att det grå försvinner och applicera sedan Filter › Noise › Add Noise med Gaussian och Monochromatic ibockade. Det fina kornet bryter upp stegen, överlever komprimering bättre än en ren blandning och får gradienten att kännas som en yta. [Korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients) visar utseendet. Ett stående socialt inlägg på en mörk, mjuk gradient med ett kort tips om dither och brus En mörk blandning som den här är precis där bandning dyker upp. Dither plus ett lätt korn håller den mjuk på varje skärm. ## Gradienter på text och former För text du vill behålla redigerbar, lägg till ett Gradient Overlay från fx-menyn. Låt Align with Layer vara ibockat så att blandningen spänner över orden i stället för hela ytan, och justera Scale och Angle tills färgändringen sitter där du vill. Alternativet är ett gradientfyllningslager ovanför texten, beskuret mot den genom att hålla Alt (Option på Mac) och klicka på linjen mellan de två lagren. När orden ligger på en gradient i stället för att bära en, läs [text på gradient](https://gradiently.design/sv/guide/text-on-gradient) så att de förblir läsbara. ## När en bild blir tio storlekar Photoshop är utmärkt för en enda, noggrant färdigställd bild. Det blir långsamt när samma bakgrund ska bli ett inlägg, en story, en banner och en miniatyr, eftersom varje beskärning flyttar den ljusaste delen och varje yta behöver gradienten ritad på nytt. I Gradiently är bakgrunden en Mark som renderas i varje storlek du designar i, och dess lugnaste område flyttar sig bakom dina ord av sig själv, så en story och en banner kommer från en design. [Ett utseende, varje storlek](https://gradiently.design/sv/guide/one-look-every-size) förklarar hur. ## FAQ ### Var finns gradientverktyget i Photoshop? Det delar plats i verktygsfältet med färghinken. Tryck G för att välja det, eller Skift+G för att växla mellan de två. ### Varför har min gradient i Photoshop ränder? Det är bandning, som orsakas av för få färgnivåer mellan nära toner. Arbeta i 16 bitar per kanal, låt Dither vara på och lägg till lite monokromt brus före export. ### Hur gör jag en gradient som tonar ut till genomskinlig i Photoshop? Använd förinställningen Foreground to Transparent, eller sätt det sista opacitetsstoppet i gradientredigeraren till 0 %. ### Hur lägger jag en gradient på text i Photoshop och behåller den redigerbar? Lägg till en lagerstil Gradient Overlay med Align with Layer ibockat, eller beskär ett gradientfyllningslager mot textlagret. ### Vad är skillnaden mellan en gradient och en gradientkarta i Photoshop? En gradient målar ny färg över en yta. En gradientkarta färgsätter om en befintlig bild efter dess toner, från mörkast till ljusast.