Adobe Illustrator CC For LuckyTemplates Cheat Sheet

Mange av de mest dramatiske endringene i hvordan Illustrator brukes , finner sted i området for å oversette vektorbilder til nettet, og det undervurderte SVG-formatet er nøkkelleddet i denne prosessen. SVG-filer opprettholder de dyrebare skalerbarhetsfunksjonene til vektorgrafikk og støttes nesten universelt i nettsteder og webutviklingsmiljøer. Når du forbereder vektorgrafikk for nettet, er det viktig å unngå Illustrators standardeffekter og i stedet bruke SVG-filtre.

Illustrator kommer med et anstendig, men minimalistisk sett med SVG-filtre, men her er noen tips om hvordan du finner og legger til SVG-filtre samt ressurser for å lage dine egne SVG-filtre. For de som jobber med nett- og apputviklere, gjør livene deres enklere og mer produktive ved å sjekke ut juksearket for utlevering av SVG-kode.

Slik bruker du SVG-filtre i Illustrator

Når du oppretter SVG-filer for skjermer i Illustrator og du vil bruke effekter (som drop-shadows), bør du bruke dem som SVG-filtre. På den måten beholder SVG-filene uendelig skalerbarhet uten forvrengning.

Følgende trinn viser deg hvordan du bruker et SVG-filter på grafikk i Illustrator:

Velg objektet/objektene du bruker filteret på.

Velg Effekt → SVG-filtre.

Velg et filter fra listen som vises.
De fleste filtre har beskrivende navn. For eksempel er de med skygge i navnet drop-shadows, de med gaussisk i navnet er gaussisk uskarphet. Arbeidsflyten er litt rar og rundkjøring, men du må først velge et filter for å få tilgang til alle tilgjengelige alternativer for å bruke et.

Slik endrer du det valgte filteret:

• Hold objektet som filteret ble brukt på valgt, og åpne Utseende-panelet ved å velge Vindu→ Utseende.
• I Utseende-panelet klikker du på SVG-filteret som vises i Fyll-delen av panelet. Panelet Bruk SVG-filter åpnes.
• I panelet Bruk SVG-filter endrer du det brukte filteret.
• For å se hvordan filteret vil se ut, merk av for forhåndsvisning, som vist i figuren.
  

Etter at du har bestemt deg for et filter, klikker du OK i Apply SVG Filter-panelet.

Slik legger du til SVG-filtre i Illustrator

Illustrators sett med SVG-filtre er minimalistisk, men du kan forbedre det ved å designe dine egne filtre eller laste ned ferdigpakkede sett med SVG-filtre fra nettkilder. Å designe filtre innebærer koding, men det er mulig hvis du er komfortabel med HTML. Jeg anbefaler opplæringen på w3Schools for å lage SVG-filtre. Eller du kan kjøpe sett med filtre på nettet, og til og med finne noen fine sett med gratis SVG-filtre hos Creatingo .

Etter at du har kjøpt eller opprettet dine egne SVG-filtre, er det slik du installerer dem i Illustrator:

Velg Effekt → SVG-filtre → Importer SVG-filter.

I dialogboksen som åpnes, naviger til og dobbeltklikk på SVG-filterfilen du opprettet eller lastet ned gratis.
Filen du leter etter skal være en SVG-fil (flere filtre er samlet i en enkelt SVG-fil).
De nye filtrene dine er nå tilgjengelige i undermenyen SVG-filtre.

Velg Effekt → SVG-filtre for å bruke de nye filtrene dine på valgte objekter.

Hvordan overlevere SVG-kode fra Illustrator til en utvikler

Ofte blir SVG-grafikken du lager i Illustrator overlevert til spilldesignere, animatører, infografikk eller andre utdata, der utviklere vil jobbe med koden bak SVG-grafikken. Som illustratør trenger du ikke å vite hvordan du lager den koden, men det kan hende du må vite hvordan du får den og overfører den til en utvikler. Dette er hvordan.

Veien til eksport av SVG-grafikk som kode går gjennom Illustrators Lagre-funksjoner. Lagre-menyen har alternativer (ikke lett å finne) som eksporterer filen din som SVG-kode. Du vil sannsynligvis være i sanntidskommunikasjon med skjermutvikleren din mens du genererer den koden fordi flere alternativer bestemmes av hvordan den koden skal brukes:

Velg Fil → Lagre (eller Lagre som hvis du lagrer en fil på nytt).

I dialogboksen som åpnes velger du SVG fra Format-menyen.
Ignorer SVGZ-filalternativet, som er for en komprimert fil som ikke vises i nettlesere.

Klikk Lagre for å åpne dialogboksen SVG-alternativer.

Velg alltid SVG 1.1 i rullegardinmenyen SVG-profiler. Andre versjoner er foreldet.

Hvis du har innebygde eller koblet bilder i SVG-filen, velg Bygg inn fra rullegardinmenyen Bildeplasseringer. Rådfør deg imidlertid med nettutvikleren din om dette valget først.

Velg Behold Illustrator-redigeringsevner for å gjøre filen redigerbar i Illustrator.
Dette valget øker filstørrelsen, men lar deg jobbe med én enkelt SVG-fil som du kan redigere, oppdatere og dele med nettutviklere.

Hvis knappen Flere alternativer vises, klikker du på den for å få tilgang til avanserte alternativer. og gjør dine valg.
I hovedsak genererer de forskjellige alternativene CSS med filen din som definerer egenskaper på følgende måter. Rådfør deg med nettutviklerteamkameraten din om hvordan du definerer disse CSS-egenskapene:

• Presentasjonsattributter bygger inn styling i SVG-kode. Dette alternativet er det enkleste og standard. Bruk dette hvis du ikke samarbeider med en nett- eller apputvikler.
• De to stil attributter alternativene er avhengige av CSS til å styre styling der det er mulig.
• Style Elements genererer klassestilvelgere for styling.
• Alternativet Inkluder ubrukte stiler genererer kode som sannsynligvis øker SVG-filstørrelsen uten å legge til funksjonell verdi.

Fjern merket for de fem avmerkingsboksene nederst i dialogboksen SVG-alternativer, med mindre utviklerpartneren din ber om at du velger dem.
Disse alternativene er for svært spesialiserte applikasjoner.

For å generere SVG-kode basert på valgene du gjør i dialogboksen SVG-alternativer, klikk på SVG-kode- knappen.
Den genererte SVG-koden vises i operativsystemets tekstredigeringsprogram. Du kan lagre den koden som en tekstfil ved å bruke operativsystemets tekstredigerer, og overlevere filen til en utvikler.

Etter at du har generert kode, klikker du OK for å lagre filen.
Du kan åpne og redigere denne filen på nytt i Illustrator.