Användarhandbok Avbryt

SVG

  1. Användarhandbok för Illustrator
  2. Lär känna Illustrator
    1. Introduktion till Illustrator
      1. Nyheter i Illustrator
      2. Vanliga frågor
      3. Systemkrav för Illustrator
      4. Illustrator för Apple Silicon
    2. Arbetsyta
      1. Grundläggande om arbetsytan
      2. Skapa dokument
      3. Verktyg
      4. Standardkortkommandon
      5. Anpassa kortkommandon
      6. Introduktion till ritytor
      7. Hantera ritytor
      8. Anpassa arbetsytan
      9. Egenskapspanelen
      10. Ange inställningar
      11. Toucharbetsytan
      12. Stöd för Microsoft Surface Dial i Illustrator
      13. Återställa, ångra och automatisera
      14. Rotera vy
      15. Linjaler, stödraster och stödlinjer
      16. Tillgänglighet i Illustrator
      17. Säkert läge
      18. Visa illustrationer
      19. Använda Touch Bar med Illustrator
      20. Filer och mallar
      21. Synka inställningar med hjälp av Adobe Creative Cloud
    3. Verktyg i Illustrator
      1. Markering
        1. Översikt
        2. Markering
        3. Direktmarkering
        4. Lasso
        5. Rityta
      2. Navigering
        1. Översikt
        2. Zooma
        3. Rotera vyn
      3. Färg
        1. Översikt
        2. Övertoning
        3. Formbyggaren
      4. Text
        1. Översikt
        2. Text
        3. Text på bana
  3. Illustrator på iPad
    1. Introduktion till Illustrator på iPad
      1. Illustrator på iPad – översikt
      2. Vanliga frågor om Illustrator på iPad
      3. Systemkrav | Illustrator på iPad
      4. Vad du kan och inte kan göra med Illustrator på iPad
    2. Arbetsyta
      1. Illustrator på iPad-arbetsytan
      2. Touchgenvägar och touchgester
      3. Kortkommandon för Illustrator på iPad
      4. Hantera appinställningarna
    3. Dokument
      1. Arbeta med dokument i Illustrator på iPad
      2. Importera Photoshop- och Fresco-dokument
    4. Markera och ordna objekt
      1. Skapa upprepade objekt
      2. Övergångsobjekt
    5. Rita
      1. Rita och redigera banor
      2. Rita och redigera former
    6. Text
      1. Arbeta med text och teckensnitt
      2. Skapa textdesign längs en bana
      3. Lägg till egna teckensnitt
    7. Arbeta med bilder
      1. Vektorisera rasterbilder
    8. Färg
      1. Använda färger och övertoningar
  4. Molndokument
    1. Grunderna
      1. Arbeta med Illustrator-molndokument
      2. Dela och samarbeta om Illustrator-molndokument
      3. Uppgradera molnlagringen för Adobe Illustrator
      4. Illustrator-molndokument | Vanliga frågor
    2. Felsökning
      1. Felsöka problem med att skapa eller spara molndokument i Illustrator
      2. Felsöka problem med molndokument i Illustrator
  5. Lägga till och redigera innehåll
    1. Rita
      1. Grunder i ritning
      2. Redigera banor
      3. Skapa skarpa bilder
      4. Rita med pennan, krökningsverktyget eller pennverktyget
      5. Rita enkla linjer och former
      6. Bildkalkering
      7. Förenkla en bana
      8. Definiera perspektivstödraster
      9. Symbolverktyg och symboluppsättningar
      10. Justera bansegment
      11. Designa en blomma i fem enkla steg
      12. Perspektivritning
      13. Symboler
      14. Rita pixeljusterade banor för webbarbetsflöden
    2. 3D-effekter och Adobe Substance-material
      1. Adobe 3D-effekter i Illustrator
      2. Skapa 3D-grafik
      3. Mappa en teckning över 3D-objekt
      4. Skapa 3D-objekt
      5. Skapa 3D-text
    3. Färg
      1. Om färg
      2. Välj färger
      3. Använda och skapa färgrutor
      4. Justera färger
      5. Använda temapanelen i Adobe Color
      6. Färggrupper (harmonier)
      7. Färgtemapanelen
      8. Färga om teckningar
    4. Färglägga
      1. Om färgläggning
      2. Färglägg med fyllningar och linjer
      3. Direktfärgsgrupper
      4. Övertoningar
      5. Penslar
      6. Genomskinlighet och blandningslägen
      7. Tillämpa linjer på ett objekt
      8. Skapa och redigera mönster
      9. Nät
      10. Mönster
    5. Markera och ordna objekt
      1. Markera objekt
      2. Lager
      3. Gruppera och expandera objekt
      4. Flytta, justera och fördela objekt
      5. Stapla objekt    
      6. Låsa, dölja och radera objekt
      7. Duplicera objekt
      8. Rotera och spegla objekt
    6. Ändra form på objekt
      1. Beskär bilder
      2. Omforma objekt
      3. Kombinera objekt
      4. Skära ut, dela och beskära objekt
      5. Tänjning av marionett
      6. Skalförändra, skeva och förvränga objekt
      7. Övergångsobjekt
      8. Omforma med hjälp av omslag
      9. Ändra form på objekt med effekter
      10. Skapa nya former med verktygen Shaper och Formbyggare
      11. Arbeta med live-hörn
      12. Förbättrade arbetsflöden för att ändra form på objekt med stöd för touch
      13. Redigera urklippsmasker
      14. Live-former
      15. Skapa former med hjälp av verktyget Formbyggare
      16. Global redigering
    7. Text
      1. Lägg till text och jobba med textobjekt
      2. Hantera textområdet
      3. Teckensnitt och typografi
      4. Formatera text
      5. Importera och exportera text
      6. Formatera stycken
      7. Specialtecken
      8. Skapa text på en bana
      9. Tecken- och styckeformat
      10. Flikar
      11. Text och tecken
      12. Sök efter saknade teckensnitt (Typekit-arbetsflöde)
      13. Uppdatera text från Illustrator 10
      14. Arabisk och hebreisk text
      15. Teckensnitt | Vanliga frågor och felsökningstips
      16. Skapa 3D-texteffekter
      17. Kreativ typografisk design
      18. Skalförändra och rotera text
      19. Rad- och teckenavstånd
      20. Avstavning och radbrytningar
      21. Textförbättringar
      22. Stavnings- och språkordlistor
      23. Formatera asiatiska tecken
      24. Dispositioner för asiatisk skrift
      25. Skapa textdesign med övergångar mellan objekt
      26. Skapa en textaffisch med Bildkalkering
    8. Skapa specialeffekter
      1. Arbeta med effekter
      2. Grafikformat
      3. Skapa en skugga
      4. Utseendeattribut
      5. Skapa skisser och mosaik
      6. Skuggor, glöd och ludd
      7. Sammanfattning av effekter
    9. Webbgrafik
      1. Bästa sätten att skapa webbgrafik
      2. Diagram
      3. SVG
      4. Skapa animeringar
      5. Segment och bildscheman
  6. Importera, exportera och spara
    1. Importera
      1. Importera teckningsfiler
      2. Importera bitmappsbilder
      3. Importera teckningar från Photoshop
      4. Montera flera filer | Illustrator CC
      5. Ångra inbäddning av bilder
      6. Importera Adobe PDF-filer
      7. Importera EPS-, DCS- och AutoCAD-filer
      8. Länkinformation
    2. Creative Cloud Libraries i Illustrator 
      1. Creative Cloud Libraries i Illustrator
    3. Spara
      1. Spara teckningar
    4. Exportera
      1. Använda Illustrator-bilder i Photoshop
      2. Exportera teckningar
      3. Samla resurser och exportera gruppvis
      4. Packa filer
      5. Skapa Adobe PDF-filer
      6. Extrahera CSS | Illustrator CC
      7. Adobe PDF-alternativ
      8. Filinformation och metadata
  7. Skriva ut
    1. Förbereda för utskrift
      1. Ange utskriftsinställningar för dokument
      2. Ändra sidstorlek och orientering
      3. Ange skärmärken för beskärning eller justering
      4. Kom igång med stora arbetsytor
    2. Skriva ut
      1. Övertryck
      2. Skriva ut med färghantering
      3. PostScript-utskrift
      4. Utskriftsförinställningar
      5. Utskriftsmärken och utfall
      6. Skriva ut och spara genomskinliga teckningar
      7. Svällning
      8. Skriva ut färgseparationer
      9. Skriva ut övertoningar, nätövertoningar och färgövergångar
      10. Vitt övertryck
  8. Automatisera uppgifter
    1. Datasammanfogning med hjälp av panelen Variabler
    2. Automatisering med skript
    3. Automatisering med funktionsmakron
  9. Felsökning 
    1. Problem med krascher
    2. Återställ filer efter kraschar
    3. Filproblem
    4. Problem med GPU-enhetsdrivrutiner
    5. Problem med Wacom-enheter
    6. Problem med DLL-filer
    7. Minnesproblem
    8. Problem med preferensfilen
    9. Problem med teckensnitt
    10. Skrivarproblem
    11. Skicka en kraschrapport till Adobe

Lär dig arbeta med SVG för att skapa webbgrafik med XML och JavaScript som svarar på användaråtgärder med avancerade effekter, t.ex. markeringar, knappbeskrivningar, ljud och animeringar.

Om SVG

Bitmappsbildformat för webben, GIF, JPEG, WBMP och PNG beskriver bilderna med hjälp av ett raster med pixlar. De slutliga filerna kan bli skrymmande, begränsade till en enda upplösning (ofta låg) och använder stora mängder bandbredd på webben. SVG är ett vektorformat som beskriver bilder som former, banor, text och filtereffekter. De färdiga filerna är komprimerade och ger högkvalitativ grafik på webben, i tryck och till och med på resursbegränsade, handhållna enheter. Användare kan förstora visningen av en SVG-bild på skärmen utan att skärpa, detaljer eller klarhet förloras. Dessutom ger SVG bra stöd för text och färger vilket garanterar att användarna ser bilderna som de visas på din Illustrator-rityta.

SVG-formatet är helt XML-baserat och är fördelaktigt för utvecklare och användare. Med SVG kan du använda XML och JavaScript och skapa webbgrafik som svarar på användaråtgärder med avancerade effekter, t.ex. markeringar, knappbeskrivningar, ljud och animeringar.

Du kan spara teckningar i SVG-format med kommandona Spara, Spara som, Spara kopia eller Spara för webben & enheter. Använd kommandona Spara, Spara som och Spara kopia om du vill få tillgång till alla exportalternativ för SVG. Med kommandot Spara för webben & enheter får du en deluppsättning SVG-exportalternativ som kan användas för webborienterat arbete.

Dina inställningar för teckningen i Illustrator påverkar den resulterande SVG-filen. Tänk på följande:

  • Använd lager om du vill lägga till struktur i en SVG-fil. Om du sparar teckningen i SVG-format konverteras varje lager till ett gruppelement (<g>). (Ett lager med namnet Knapp1 blir t.ex. <g id="Knapp1_ver3.0"> i SVG-filen.) Kapslade lager blir SVG-kapslade grupper och dolda lager bevaras med SVG-formategenskapen display="none".

  • Om du vill att objekt i olika lager ska vara genomskinliga justerar du opaciteten för varje objekt, inte för varje lager. Om du ändrar opaciteten på lagernivå visas inte genomskinlighet i den resulterande SVG-filen på samma sätt som i Illustrator.

  • Rasterinformation kan inte skalas i SVG Viewer och kan inte redigeras som andra SVG-element. Du bör undvika att skapa teckningar som rastreras i SVG-filen. Nätövertoningar och objekt där effekterna Rastrera, Konstnärliga, Oskärpa, Penseldrag, Förvräng, Förvandla pixlar, Skärpa, Skiss, Stilisera, Textur och Video används, rastreras när de sparas i SVG-format. Grafikformat som innehåller de här effekterna blir också rastrerade på samma sätt. Använd SVG-effekter om du vill lägga till grafiska effekter utan att orsaka rastrering.

  • Använd symboler och förenkla banorna i teckningen för förbättrade SVG-prestanda. Om du prioriterar prestanda bör du undvika att använda penslar som ger mycket baninformation, t.ex. Träkol, Aska och Bläddringspenna.

  • Använd segment, bildscheman och skript om du vill lägga till webblänkar i en SVG-fil.

  • Skriptspråk, t.ex. JavaScript, möjliggör obegränsade funktioner i en SVG-fil. Rörelser med pekare och tangenttryckningar kan starta skriptfunktioner som rollover-effekter. Skript kan också använda Document Object Model (DOM) för att få tillgång till och ändra SVG-filer, t.ex. infoga eller ta bort SVG-element.

Använda SVG-effekter

Du kan använda SVG-effekter om du vill lägga till grafiska egenskaper, t.ex. skuggor, i teckningar. SVG-effekter skiljer sig från motsvarande bitmappseffekter eftersom de är XML-baserade och oberoende av upplösning. En SVG-effekt är egentligen inget annat än en serie XML-egenskaper som beskriver olika matematiska operationer. Resultateffekten återges i målobjektet i stället för i källgrafiken.

I Illustrator finns en standarduppsättning med SVG-effekter. Du kan använda effekterna tillsammans med deras standardegenskaper, redigera XML-koden och skapa anpassade effekter och skriva nya SVG-effekter.

Obs!

Om du vill ändra SVG-standardfiltren i Illustrator använder du en textredigerare och redigerar filen Adobe SVG-filter. svg i mappen Documents and Settings/<användarkatalog>/Application Data/Adobe/Adobe Illustrator <versionsnummer> Settings/<plats>. Du kan ändra befintliga filterdefinitioner, ta bort filterdefinitioner och lägga till nya filterdefinitioner.

  1. Markera ett objekt eller en grupp (eller ange ett lager som mål på panelen Lager).
  2. Vidta en av följande åtgärder:
    • Om du vill tillämpa en effekt med standardinställningarna markerar du effekten från nedre delen av undermenyn Effekt > SVG-filter.

    • Om du vill tillämpa en effekt med anpassade inställningar väljer du Effekt > SVG-filter > Tillämpa SVG-filter. Markera effekten i dialogrutan och klicka på knappen Redigera SVG-filter  . Redigera standardkoden och klicka på OK.

    • Om du vill skapa och tillämpa en ny effekt väljer du Effekt > SVG-filter > Tillämpa SVG-filter. Klicka på knappen Nytt SVG-filter i  dialogrutan, ange den nya koden och klicka på OK.

      När du tillämpar en SVG-filtereffekt visas en rastrerad version av effekten på ritytan. Du kan styra upplösningen i den här förhandsvisningsbilden genom att ändra dokumentets inställning för rasterupplösning.

      Obs! En SVG-effekt måste vara den sista effekten när flera effekter används i ett objekt. Det innebär att den måste visas längst ned på panelen Utseende (alldeles ovanför Genomskinlighet). Om andra effekter används efter en SVG-effekt skapas ett rasterobjekt.

Importera effekter från en SVG-fil

  1. Välj Effekt > SVG-filter > Importera SVG-filter.

  2. Markera den SVG-fil som du vill importera effekter från och klicka på Öppna.

Panelen SVG-interaktivitet – översikt

Du använder panelen SVG-interaktivitet (Fönster > SVG-interaktivitet) om du vill lägga till interaktivitet i teckningar som ska exporteras till en webbläsare för visning. Genom att skapa en händelse som startar ett JavaScript-kommando kan du snabbt skapa rörelse på en webbsida när användaren utför en åtgärd, t.ex. flyttar muspekaren över ett objekt. Med panelen SVG-interaktivitet kan du visa alla händelser och JavaScript-filer som hör till den aktuella filen.

Ta bort en händelse från panelen SVG-interaktivitet

  • Du tar bort en händelse genom att markera den och klicka på Ta bort, eller välja Ta bort händelse på panelmenyn.
  • Om du vill ta bort alla händelser väljer du Radera alla händelser på panelmenyn.

Visa, lägga till och ta bort händelser som är länkade till en fil

  1. Klicka på Länka JavaScript-filer .
  2. Markera en JavaScript-post i dialogrutan JavaScript-filer och gör något av följande:
    • Klicka på Lägg till om du vill söka efter fler JavaScript-filer.

    • Klicka på Ta bort om du vill ta bort den valda JavaScript-posten.

Lägga till SVG-interaktivitet i teckningar

  1. Markera en händelse på panelen SVG-interaktivitet. (Se SVG-händelser.)

  2. Ange motsvarande JavaScript och tryck på Enter.

SVG-händelser

onfocusin

Startar åtgärden när elementet fokuseras, t.ex. när det markeras med pekaren.

onfocusout

Startar åtgärden när elementet inte längre fokuseras, t.ex. när ett annat element fokuseras i stället).

onactivate

Startar åtgärden med ett musklick eller en tangenttryckning, beroende på SVG-elementet.

onmousedown

Startar åtgärden när musknappen trycks ned över ett element.

onmouseup

Startar åtgärden när musknappen släpps upp över ett element.

onclick

Startar åtgärden när användaren klickar på ett element med musen.

onmouseover

Startar åtgärden när pekaren flyttas till ett element.

onmousemove

Starta åtgärden när pekaren är över ett element.

onmouseout

Startar åtgärden när pekaren flyttas bort från ett element.

onkeydown

Startar åtgärden när en tangent trycks ned.

onkeypress

Startar åtgärden medan en tangent trycks ned.

onkeyup

Startar åtgärden när en tangent släpps upp.

onload

Startar åtgärden efter att SVG-dokumentet har tolkats av webbläsaren. Använd den här händelsen om du vill anropa engångsfunktioner för initiering.

onerror

Startar åtgärden när ett element inte läses in på rätt sätt eller om andra fel uppstår.

onabort

Startar åtgärden när sidinläsningen avbryts innan elementet hämtats.

onunload

Startar åtgärden när SVG-dokumentet tas bort från ett fönster eller en bildruta.

onzoom

Startar åtgärden när zoomnivån ändras i dokumentet.

onresize

Startar åtgärden när storleken på dokumentvyn ändras.

onscroll

Startar åtgärden när dokumentvyn rullas eller panoreras.

Exportalternativ för webboptimerad SVG

Ett nytt alternativ för SVG-export (Arkiv > Exportera > SVG) är tillgängligt. Med det nya arbetsflödet kan du skapa standardiserade webboptimerade SVG-filer för webb- och skärmdesignprojekt.

Tillgängliga alternativ är:

  • Stilar: Välj hur visuell stilinformation ska lagras i SVG-märkningen.
    • Presentationsattribut: Använder separata XML-attribut för varje enskild stilegenskap för varje SVG-tagg. Detta format krävs för att använda SVG-resurser med Android Studio.
    • Intern CSS: Använder en enda <style>-tagg med CSS -klasser och delar stilinställningar mellan objekt med samma stil. Detta kan leda till att filerna blir mindre.
    • Inline-stil: Använder ett enda style-attribut per SVG-tagg, som innehåller alla taggens stilegenskaper uttryckt med CSS-syntax.

Obs! Standardstilen för SVG är Presentationsattribut eftersom det ger bättre kompatibilitet med vanliga utvecklarverktyg som Android Studio.

  • Teckensnitt. Välj hur teckensnitt visas i SVG-filen. Konturer bevarar bandefinitionen , och är mest kompatibla.
  • Bilder: Välj detta om du vill att bilder ska sparas som inbäddade i dokumentet eller som externa filer som är länkade till dokumentet.
  • Objekt-ID:n: Välj hur objekt tilldelas ID-typer (namn) i SVG-filen. Välj mellan Lagernamn, Minimal och Unik. Med det här alternativet anger du hur dubblettnamn på objekt hanteras och hur objekt namnges i den exporterade CSS-filen.
  • Decimal: Välj hur mycket information du vill behålla om den exakta objektplatsen. Ett högre värde för Decimal ökar noggrannheten för hur objekt placeras, och detta ökar följsamheten i den visuella återgivningen i den renderade SVG-filen. Om du ökar värdet för Decimal ökar även storleken på den exporterade SVG-filen.
  • Minimera: Optimerar storleken på SVG-filen genom att ta bort tomma grupper och ytor. Om du väljer det här alternativet minskas läsbarheten i den resulterande SVG-koden.
  • Responsiv. Om du markerar det här alternativet ser du till att den genererade SVG:n skalanpassas i webbläsare. Inga absoluta värden för storlek skrivs.
  • Visa kod: Öppnar det exporterade innehållet i din standardtextredigerare.
  • Visa i webbläsare (ikon): Visar bilden i din standardwebbläsare.
Adobes logotyp

Logga in på ditt konto