Adobe Illustrator CC för LuckyTemplates Cheat Sheet

Många av de mest dramatiska förändringarna i hur Illustrator används äger rum när det gäller att översätta vektorbilder till webben, och det underskattade SVG-formatet är nyckeln i den processen. SVG-filer upprätthåller de uppskattade skalbarhetsfunktionerna hos vektorgrafik och stöds nästan universellt på webbplatser och webbutvecklingsmiljöer. När du förbereder vektorgrafik för webben är det viktigt att undvika Illustrators standardeffekter och istället använda SVG-filter.

Illustrator kommer med en anständig men minimalistisk uppsättning SVG-filter, men här är några tips om hur du hittar och lägger till SVG-filter samt resurser för att skapa dina egna SVG-filter. För dem som arbetar med webb- och apputvecklare, gör deras liv enklare och mer produktivt genom att kolla in fuskbladet för att lämna ut SVG-kod.

Hur man använder SVG-filter i Illustrator

När du skapar SVG-filer för skärmar i Illustrator och du vill använda effekter (som skuggor), bör du använda dem som SVG-filter. På så sätt behåller dina SVG-filer oändlig skalbarhet utan förvrängning.

Följande steg leder dig genom att tillämpa ett SVG-filter på grafik i Illustrator:

Välj objektet/objekten som du tillämpar filtret på.

Välj Effekt→SVG-filter.

Välj ett filter från listan som visas.
De flesta filter har beskrivande namn. Till exempel, de med skugga i namnet är skuggor, de med gaussisk i namnet är gaussiska oskärpa. Arbetsflödet är lite udda och kringgående, men du måste först välja ett filter för att komma åt alla tillgängliga alternativ för att tillämpa ett.

Så här ändrar du det valda filtret:

• Behåll objektet som filtret tillämpades på markerat och öppna panelen Utseende genom att välja Fönster→ Utseende.
• På panelen Utseende klickar du på SVG-filtret som visas i avsnittet Fyll på panelen. Panelen Använd SVG-filter öppnas.
• I panelen Använd SVG-filter ändrar du det tillämpade filtret.
• För att se hur filtret kommer att se ut, markera kryssrutan Förhandsgranska, som visas i bilden.
  

När du har valt ett filter klickar du på OK i panelen Använd SVG-filter.

Hur man lägger till SVG-filter i Illustrator

Illustrators uppsättning SVG-filter är minimalistisk, men du kan förbättra den genom att designa dina egna filter eller ladda ner förpackade uppsättningar av SVG-filter från onlinekällor. Att designa filter involverar kodning, men det är genomförbart om du är bekväm med HTML. Jag rekommenderar handledningen på w3Schools för att skapa SVG-filter. Eller så kan du köpa uppsättningar med filter online, och till och med hitta några trevliga uppsättningar gratis SVG-filter på Creatingo .

När du har köpt eller skapat dina egna SVG-filter, så här installerar du dem i Illustrator:

Välj Effekt→SVG-filter→Importera SVG-filter.

I dialogrutan som öppnas, navigera till och dubbelklicka på SVG-filterfilen som du skapade eller laddade ner gratis.
Filen du letar efter bör vara en SVG-fil (flera filter är samlade i en enda SVG-fil).
Dina nya filter är nu tillgängliga i undermenyn SVG-filter.

Välj Effekt→SVG-filter för att tillämpa dina nya filter på valda objekt.

Hur man lämnar över SVG-kod från Illustrator till en utvecklare

Ofta lämnas SVG-grafiken du skapar i Illustrator till speldesigners, animatörer, infografik eller annan produktion, där utvecklare kommer att arbeta med koden bakom SVG-grafiken. Som illustratör behöver du inte veta hur du skapar den koden, men du kan behöva veta hur du skaffar den och lämnar över den till en utvecklare. Här är hur.

Vägen till att exportera din SVG-grafik som kod går genom Illustrators Spara-funktioner. Menyn Spara har alternativ (inte lätta att hitta) som exporterar din fil som SVG-kod. Du kommer sannolikt att vilja vara i realtidskommunikation med din skärmutvecklare när du genererar den koden eftersom flera alternativ bestäms av hur den koden kommer att användas:

Välj Arkiv → Spara (eller Spara som om du sparar om en fil).

I dialogrutan som öppnas väljer du SVG från Format-menyn.
Ignorera alternativet SVGZ-fil, som är för en komprimerad fil som inte visas i webbläsare.

Klicka på Spara för att öppna dialogrutan SVG-alternativ.

Välj alltid SVG 1.1 i rullgardinsmenyn SVG-profiler. Andra versioner är föråldrade.

Om du har inbäddade eller länkade bilder i din SVG-fil väljer du Bädda in från rullgardinsmenyn Bildplatser. Rådgör dock med din webbutvecklare om detta val först.

Välj Bevara Illustrator-redigeringsmöjligheter för att göra filen redigerbar i Illustrator.
Det här valet ökar filstorleken men låter dig arbeta med en enda SVG-fil som du kan redigera, uppdatera och dela med webbutvecklare.

Om knappen Fler alternativ visas klickar du på den för att komma åt avancerade alternativ. och gör dina val.
I huvudsak genererar de olika alternativen CSS med din fil som definierar egenskaper på följande sätt. Rådgör med din webbutvecklarteamkamrat om hur du definierar dessa CSS-egenskaper:

• Presentationsattribut bäddar in stil i SVG-kod. Det här alternativet är det enklaste och standard. Använd detta om du inte samarbetar med en webb- eller apputvecklare.
• De två Style Attributes- alternativen är beroende av CSS för att hantera styling där det är möjligt.
• Style Elements genererar klassstilsväljare för styling.
• Den Inkludera Oanvänd Styles alternativet genererar kod som sannolikt ökar SVG filstorlek utan att funktionellt värde.

Avmarkera de fem kryssrutorna längst ned i dialogrutan SVG-alternativ, såvida inte din utvecklare-partner begär att du väljer dem.
Dessa alternativ är för mycket specialiserade applikationer.

För att generera SVG-kod baserat på de val du gör i dialogrutan SVG-alternativ, klicka på knappen SVG-kod .
Den genererade SVG-koden visas i ditt operativsystems textredigerare. Du kan spara den koden som en textfil med ditt operativsystems textredigerare och lämna över filen till en utvecklare.

När du har skapat kod klickar du på OK för att spara filen.
Du kan öppna och redigera den här filen igen i Illustrator.