# Gradient i Illustrator: linjär, radiell och frihand [Canonical HTML page](https://gradiently.design/sv/guide/illustrator-gradient) Illustrators gradienter bor i en enda liten panel, men de flesta använder bara halva den. Här är hela panelen, frihandstypen och vad som händer med dina gradienter när du exporterar. ## The short version - Illustrator har tre gradienttyper i Gradientpanelen: linjär, radiell och frihand. - Gradientpanelen öppnas från Fönster › Gradient, och Gradientverktyget (G) låter dig dra, rotera och redigera en gradient direkt på illustrationen. - En gradient på en linje kan löpa inuti linjen, längs dess bana eller tvärs över dess bredd. - För att lägga en gradient på live-text och behålla den redigerbar lägger du till en ny fyllning i panelen Utseende och använder gradienten på den fyllningen. - Linjära och radiella gradienter exporteras till SVG som inbyggda gradientelement, medan frihands- och nätgradienter saknar motsvarighet i SVG. En **gradient i Illustrator** ställs in i Gradientpanelen (Fönster › Gradient) och formas på illustrationen med Gradientverktyget (G). Markera ett objekt, välj linjär, radiell eller frihand i panelen och klicka på stopp under reglaget för att sätta färger. Linjära och radiella gradienter passar loggor, ikoner och allt som ska ut på webben, eftersom de förblir små och skarpa överallt. Frihand är till mjuk, målerisk färg, och det äldre Gradientnätet är till fotografisk skuggning. ## Gradientpanelen, reglage för reglage Allt börjar med att objektet är markerat och rätt mål är aktivt: panelen visar en fyllnings- och en linjeruta, och gradienten hamnar på den som ligger överst. Ett klick på gradientminiatyren använder den senaste gradienten du körde, vilket är smidigt när du formger en serie former. | Reglage | Vad det gör | | --- | --- | | Typ | Linjär, radiell eller frihand | | Vinkel | Roterar en linjär eller radiell gradient | | Proportioner | Trycker ihop en radiell gradient till en ellips | | Vänd | Vänder ordningen på stoppen | | Färgstopp | Klicka under reglaget för att lägga till, dra bort för att ta bort | | Opacitet och position | Genomskinlighet per stopp och exakt läge i procent | | Mittpunktsrutrar | Flyttar punkten där två intilliggande stopp blandas hälften av varje | | Linjealternativ | Inuti, längs eller tvärs över en linje | Vad varje del av Illustrators Gradientpanel styr. Att skriva in positionsvärden är sättet att få en hel familj av gradienter att matcha. Om du vill spara en gradient drar du miniatyren från panelen till panelen Färgrutor. Sparade gradienter är hur du håller ett varumärkes gradienter identiska från fil till fil. [Gradientstopp](https://gradiently.design/sv/guide/gradient-stops) visar hur du väljer lägen som ser jämna ut. ## Linjära och radiella gradienter När Gradientverktyget är valt visas ett fält som kallas annotatorn över objektet. Dra i dess runda ände för att flytta starten, i den fyrkantiga änden för att ändra längd och vinkel, och i stoppen längs den för att sätta färger utan att öppna panelen. Om annotatorn är dold får du fram den med Visa › Visa gradientannotator. Håll ned Skift medan du drar för att låsa vinkeln till steg om 45 grader. - Linjär, tre stopp: `linear-gradient(120deg, #064e3b 0%, #10b981 55%, #d9f99d 100%)` - Radiell, proportion 100 %: `radial-gradient(circle at 50% 50%, #fef3c7 0%, #f59e0b 45%, #78350f 100%)` - Radiell, hoptryckt proportion: `radial-gradient(ellipse 70% 40% at 50% 50%, #e0e7ff 0%, #6366f1 50%, #1e1b4b 100%)` En linjär gradient, en rund radiell och en radiell med lägre proportion, skrivna i CSS så att du kan matcha dem på en webbplats. Gradienter i Illustrator följer formen, inte ritytan. Markerar du flera objekt och drar över alla med Gradientverktyget sträcker sig dock en enda gradient över hela gruppen, och så delar en rad bokstäver eller ikoner på ett enda svep av färg. ## Frihandsgradienter Frihandsgradienter släpper fältet helt. Du placerar färgpunkter var som helst inuti en form och Illustrator blandar mellan dem, vilket ger den mjuka, organiska färg som en [mesh-gradient](https://gradiently.design/sv/guide/mesh-gradients) ger, med mycket mindre arbete än Nätverktyget. 1. **Byt typ** Markera formen och klicka på Frihand i Gradientpanelen. Illustrator placerar några startpunkter åt dig. 2. **Välj Punkter eller Linjer** Punktläget placerar enskilda färgpunkter. Linjeläget låter dig klicka fram en bana av punkter, och färgen flödar längs linjen. 3. **Sätt varje färg** Dubbelklicka på en punkt för att välja dess färg, eller markera den och välj en färgruta. 4. **Justera spridningen** I punktläget drar du i den prickade cirkeln runt en punkt, eller ändrar Spridning i panelen, för att bestämma hur långt färgen når. 5. **Ta bort det du inte behöver** Dra en punkt ut ur formen eller tryck på Delete. Färre, väl placerade punkter ser lugnare ut än många. > **Frihand eller Gradientnät** Använd frihand till platt illustration och bakgrunder. Nätverktyget (U) ger fortfarande mest kontroll för realistisk skuggning, men varje nätpunkt måste du hantera för hand. ## Gradienter på linjer Markera linjeknappen i Gradientpanelen, använd en gradient, så dyker tre knappar upp. De ändrar resultatet mer än något färgval. | Linjealternativ | Resultat | Passar till | | --- | --- | --- | | Inuti linjen | Gradienten fyller linjen som om den vore en form | Tjocka konturer och ramar | | Längs linjen | Färgen vandrar från banans start till dess slut | Linjer, ringar, förloppsbågar | | Tvärs över linjen | Färgen löper från den ena kanten av linjen till den andra | Rör, neonlinjer, band | De tre sätten Illustrator lägger en gradient på en linje. ## Gradienttext som förblir redigerbar Live-text kan inte alltid ta en gradient direkt på teckenfyllningen, och att konvertera texten till konturer för att tvinga fram det betyder att du aldrig mer kan rätta en felstavning. Den pålitliga vägen går via panelen Utseende: markera textobjektet, välj Lägg till ny fyllning i panelmenyn, dra den nya fyllningen under posten Tecken vid behov och använd gradienten på den. Orden förblir redigerbara och gradienten sträcker sig över hela raden. För logotyper visar [gradientloggor](https://gradiently.design/sv/guide/gradient-logo) när en gradient hjälper ett märke och när en platt version behövs. En stående A4-affisch med en stor rubrik över en mjuk gradientbakgrund En A4-affisch i 2480×3508. Håll bakgrunden mjuk och texten platt eller enkelt tonad, så att orden går att läsa från andra sidan rummet. ## Exportera Illustrator-gradienter till SVG och tryck När du exporterar SVG blir linjära och radiella gradienter inbyggda gradientelement, så de förblir små och skarpa i alla storlekar. Frihands- och nätgradienter saknar motsvarighet i SVG, så räkna med att de rastreras eller approximeras: kontrollera filen innan du lämnar över den till en utvecklare. [SVG-gradienter](https://gradiently.design/sv/guide/svg-gradients) förklarar formatet. ```html ``` Ungefär så ser en linjär gradient med tre stopp ut efter SVG-export: stoppen och förskjutningarna kommer rakt från Gradientpanelen. I tryck är gradienter det första ställe där bandning och färgskiften syns. Konvertera till tryckeriets färgläge tidigt, undvik långa gradienter mellan två mycket närliggande toner och be om ett korrektur. [Tryck av gradienter](https://gradiently.design/sv/guide/print-gradients) listar kontrollerna. ## Lägg ditt verk på en bakgrund Illustrator är rätt hem för en logotyp. Bakgrunden den ligger på i inlägg, stories och bildspel är ett annat problem, eftersom den måste ritas om för varje format. En Gradiently-Mark är en färdig bakgrund som renderas i alla storlekar och håller orden läsbara, och när du säkrar en kan inget annat varumärke exportera med den. ## FAQ ### Var finns Gradientpanelen i Illustrator? Öppna den från Fönster › Gradient. Själva Gradientverktyget finns i verktygsfältet, med kortkommandot G. ### Hur gör jag en frihandsgradient i Illustrator? Markera en form, välj Frihand i Gradientpanelen och lägg sedan till färgpunkter i punktläget eller rita en rad punkter i linjeläget. ### Hur lägger jag en gradient på text i Illustrator utan att konvertera den till konturer? Lägg till en ny fyllning på textobjektet i panelen Utseende och använd gradienten på den fyllningen. Texten förblir redigerbar. ### Kan jag lägga en gradient på en linje i Illustrator? Ja. Markera linjen i Gradientpanelen och välj om gradienten ska löpa inuti, längs eller tvärs över linjen. ### Fungerar Illustrator-gradienter i SVG? Linjära och radiella gradienter exporteras som inbyggda SVG-gradienter. Frihands- och nätgradienter har ingen motsvarighet i SVG.