AdobeIllustrator: Färga del i SVG-fil

Permalänk

AdobeIllustrator: Färga del i SVG-fil

Hej! Jag har deadline kl.23:59 idag för Prototyp-arbete i Figma (Webbanvändbarhetskurs) och jag försöker göra en väldigt simpel grej i Adobe Illustrator: färga en del i en nedladdad SVG-fil. Men den färgar allt när jag väljer "Fill" och färgen grönt (0,255,0) som jag vill använda.

Det är en kalenderikon där + ska symbolisera "Lägg till" och sedan ska jag färga om samma sak i ett med ett - där det symboliserar "Ta bort". Prototypen är en Färdtjänst-sajt och jag försöker ge den lite bättre produktionsvärde med tydligare ikoner!

Jag har laddat ned denna SVG-fil (välj "Download SVG"):
https://uxwing.com/add-date-calendar-icon/

Och jag vill färga det vita området inuti den svarta cirkeln med det svarta +.

Jag använder "Lasso Tool" och har markerat det svarta + och då intuitivt tror jag att den bara färger det när jag klickar på "Fill" och väljer en färg. Men den färger hela SVG-filen, dvs., allt svart. Jag måste på något vis koppla ifrån olika "Paths" till olika lager eller kunna skapa ett nytt lager med min "Lasso Tool"-markering.

Hur gör jag detta? Jag har så bråttom med min Figma-prototyp så direkta svar på nätet är svårtolkade för mig att ta mig till just nu. Men vet jag hur jag kan färga markerad del i en SVG-fil så löser det för mig i alla andra SVG-filer jag ska färga om!

Här är bild på hur det ser ut just nu i Adobe Illustrator:

Lägg märke till att jag har svarta + markerat och det vita området utanför + vill jag färga grönt. Men då färger den allt svart istället. Hur kan jag på något vis skapa nytt lager (eller vad som behövs) som gör att jag kan bestämma vilket område som ska färgas grönt? Jag provade "Inverse" under "Select" men då valde den allt förutom + så det blev fel.

Guida gärna mig var i menyerna eller verktygen till vänster jag ska använda för att kunna separera "(Compound) Paths" eller vad det heter så att min "Fill" bara påverkar det inuti den svarta cirkeln (ej + om det går. Det får gärna kunna bli helt vitt i detta fall för bättre kontrast).

Går det ens att göra det jag vill göra eller måste man börja om från grunden i Illustrator? Skapa helt egen SVG-fil?

Tack för den brådskande hjälpen! <3

Mvh,
WKL.

EDIT: Hoppsan! Nu fick jag till det:

Jag fick först ta "Ctrl+X" för att klippa ut krysset och då verkade det bli en egen "Path" och "Layer". Sedan fick jag dra ut den från cirkeln och köra en ny "Lasso Tool" inuti den svartvita cirkeln så jag kunde klippa ut den till egne "Path" och "Layer". Därefter kunde jag använda "Fill" för de separata lager. Sedan fick jag flytta om ordningen så gröna lagret ligger "under" det dåmera vita krysset!

Visa signatur

(V)ulnerabilities
(I)n
(B)asically
(E)verything
Programming

Permalänk

Här är arbetsflödet för andra stackare som har bråttom med att göra en simpel grej i Adobe Illustrator med nedladdad SVG-fil:

1. Välj "Lasso Tool" från vänstra verktygsmenyn.

2. Rita med vänster musknapp det som ska markeras.

3. Kolla så att rätt del av SVG-filen har markerats (lägg märke till de blåa "Paths" som programmet visar) som du vill särskilja och få separat kontroll över.

4. CTRL+X och sedan CTRL+V för att klippa ur markeringen och klistra in igen.

5. När den klistras in nu så klistras den in som nytt separat lager istället för att tillhöra hela SVG-filen!

OBS: När du klistrar in det markerade som nytt lager så får de standard "Fill"-färgen vilket är svart i mitt fall. Den klistras även in på samma ställe som du klippte ur. Så dra undan den så du kan justera dess "Fill"-färg till önskvärd!

Bon edi'-tit!

Mvh,
WKL.

P.S. Om det finns bättre industristandarder för det jag gjorde så dela gärna med dig.

Visa signatur

(V)ulnerabilities
(I)n
(B)asically
(E)verything
Programming

Permalänk
Medlem
Skrivet av WebbkodsFrilansaren:

P.S. Om det finns bättre industristandarder för det jag gjorde så dela gärna med dig.

Låter som att alla objekt i din fil var ihopslagna till en Compound Path. Enklaste sättet att separera delarna i en sådan brukar vara att markera den och sedan antingen använda sig av Divide i paletten Path Finder eller via menyraden Edit > Compound Path > Release. Resultatet mellan dessa operationer kan vara samma eller variera något beroende på hur de ingående banorna överlappar.

Visa signatur

Mostly Harmless

Permalänk
Skrivet av Mayhem SWE:

Låter som att alla objekt i din fil var ihopslagna till en Compound Path. Enklaste sättet att separera delarna i en sådan brukar vara att markera den och sedan antingen använda sig av Divide i paletten Path Finder eller via menyraden Edit > Compound Path > Release. Resultatet mellan dessa operationer kan vara samma eller variera något beroende på hur de ingående banorna överlappar.

Nice! Jag använde "Lasso Tool", markerade inuti cirkeln och tog sedan "Object" -> "Path" -> "Divide Objects Below" så delade den upp massa delar. Lustigt nog så hade den två lager av den inre vita cirkeln?! Var bara att fylla ena rött och sedan dra in krysset igen och ta bort dubbletterna!

Notera nu att jag bara har ett lager men krysset, färgat rött och resten är separata objekt (tror jag de kallas för då?).

Visa signatur

(V)ulnerabilities
(I)n
(B)asically
(E)verything
Programming

Permalänk

Nu går det undan, tack för hjälpen!

Jag upptäckte att "Divide Objects Below" ej fungerar för flera markerade objekt samtidigt.

Bilden nedan så är i-tecknet två separata objekt och då behövde jag använda CTRL+X -> CTRL+V-metoden istället efter jag markerat båda med "Lasso Tool"!

Visa signatur

(V)ulnerabilities
(I)n
(B)asically
(E)verything
Programming

Permalänk
Skrivet av Mayhem SWE:

Låter som att alla objekt i din fil var ihopslagna till en Compound Path. Enklaste sättet att separera delarna i en sådan brukar vara att markera den och sedan antingen använda sig av Divide i paletten Path Finder eller via menyraden Edit > Compound Path > Release. Resultatet mellan dessa operationer kan vara samma eller variera något beroende på hur de ingående banorna överlappar.

Tack så mycket igen!

Förresten, en kort uppföljningsfråga: När man "lossat" på olika delar i SVG-filen för att göra ändringar, hur kan man slå ihop dem sedan? Jag märkte nu att när jag laddade upp en SVG-fil i Figma så blir de losstagna delarna även flyttbara när det är tänkt att hela SVG-filen ska flyttas som en fullständig enhet.

Visa signatur

(V)ulnerabilities
(I)n
(B)asically
(E)verything
Programming

Permalänk
Medlem
Skrivet av WebbkodsFrilansaren:

Förresten, en kort uppföljningsfråga: När man "lossat" på olika delar i SVG-filen för att göra ändringar, hur kan man slå ihop dem sedan? Jag märkte nu att när jag laddade upp en SVG-fil i Figma så blir de losstagna delarna även flyttbara när det är tänkt att hela SVG-filen ska flyttas som en fullständig enhet.

Om det skall vara olika färger kan du inte slå ihop det till objekt, ett objekt kan liksom bara ha en färg (eller ja en fyllning och en linje då). Men prova att gruppera objekten (command/control-G) och se hur Figma reagerar på det. Illustrator brukar väl dock redan exportera lager som grupper när man gör en SVG så risk att det inte gör någon skillnad.

Visa signatur

Mostly Harmless