Användarhandbok Avbryt

Bästa sätten att skapa webbgrafik

  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. Allmänt om arbetsytan
      2. Lär dig snabbare med panelen Upptäck i Illustrator
      3. Skapa dokument
      4. Verktygsfält
      5. Standardkortkommandon
      6. Anpassa kortkommandon
      7. Introduktion till ritytor
      8. Hantera ritytor
      9. Anpassa arbetsytan
      10. Egenskapspanelen
      11. Ange inställningar
      12. Toucharbetsytan
      13. Stöd för Microsoft Surface Dial i Illustrator
      14. Ångra redigeringar och hantera designhistorik
      15. Rotera vy
      16. Linjaler, stödraster och stödlinjer
      17. Tillgänglighet i Illustrator
      18. Säkert läge
      19. Visa illustrationer
      20. Använda Touch Bar med Illustrator
      21. Filer och mallar
    3. Verktyg i Illustrator
      1. Verktygsöversikt
      2. Markeringsverktyg
        1. Markering
        2. Direktmarkering
        3. Gruppmarkering
        4. Trollstav
        5. Lasso
        6. Rityta
      3. Navigeringsverktyg
        1. Hand
        2. Rotera vyn
        3. Zooma
      4. Målningsverktyg
        1. Övertoning
        2. Nät
        3. Formbyggaren
      5. Textverktyg
        1. Text
        2. Text på bana
        3. Lodrät text
      6. Ritverktyg
        1. Ritstift
        2. Lägg till fästpunkt
        3. Ta bort fästpunkt
        4. Fästpunkt
        5. Krökning
        6. Linjesegment
        7. Rektangel
        8. Rundad rektangel
        9. Oval
        10. Polygon
        11. Stjärna
        12. Pensel
        13. Plumppensel
        14. Penna
        15. Shaper
        16. Segment
      7. Ändringsverktyg
        1. Rotera
        2. Spegla
        3. Skalförändra
        4. Skeva
        5. Bredd
        6. Omforma fritt
        7. Pipett
        8. Övergång
        9. Suddgummi
        10. Sax
    4. Snabbåtgärder
      1. Text i retrostil
      2. Text i neonljus
      3. Gammaldags text
      4. Ändra färg
      5. Konvertera en skiss till en vektorbild
  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. Dela dokument för granskning
      4. Uppgradera molnlagringen för Adobe Illustrator
      5. 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-objekt och material
      1. Adobe 3D-effekter i Illustrator
      2. Skapa 3D-grafik
      3. Mappa en teckning över 3D-objekt
      4. 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. Kopiera och duplicera objekt
      8. Rotera och spegla objekt
      9. Sammanfläta 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. Format
      1. Lägg till text och jobba med textobjekt
      2. Skapa punktlistor och numrerade listor
      3. Hantera textområde
      4. Teckensnitt och typografi
      5. Formatera text
      6. Importera och exportera text
      7. Formatera stycken
      8. Specialtecken
      9. Skapa text på en bana
      10. Tecken- och styckeformat
      11. Flikar
      12. Text och tecken
      13. Sök efter saknade teckensnitt (Typekit-arbetsflöde)
      14. Uppdatera text från Illustrator 10
      15. Arabisk och hebreisk text
      16. Teckensnitt | Vanliga frågor och felsökningstips
      17. Skapa 3D-texteffekter
      18. Kreativ typografisk design
      19. Skalförändra och rotera text
      20. Rad- och teckenavstånd
      21. Avstavning och radbrytningar
      22. Textförbättringar
      23. Stavnings- och språkordlistor
      24. Formatera asiatiska tecken
      25. Dispositioner för asiatisk skrift
      26. Skapa textdesign med övergångar mellan objekt
      27. 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. Montera flera filer
      2. Hantera länkade och inbäddade filer
      3. Länkinformation
      4. Ångra inbäddning av bilder
      5. Importera teckningar från Photoshop
      6. Importera bitmappsbilder
      7. Importera Adobe PDF-filer
      8. Importera EPS-, DCS- och AutoCAD-filer
    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. Filformat som stöds
    5. Problem med GPU-enhetsdrivrutiner
    6. Problem med Wacom-enheter
    7. Problem med DLL-filer
    8. Minnesproblem
    9. Problem med preferensfilen
    10. Problem med teckensnitt
    11. Skrivarproblem
    12. Skicka en kraschrapport till Adobe
    13. Förbättra prestandan för Illustrator

Illustrator har flera verktyg för att skapa webbsideslayouter och för att skapa och anpassa webbgrafik. Använd till exempel webbsäkra färger, balansera bildkvalitet mot filstorlek och välj det bästa filformatet för bilden. Webbgrafik kan utnyttja fördelarna med segment och bildscheman, och du kan använda en mängd olika optimeringsalternativ för att se till att filerna visas korrekt på webben.

Om webbgrafik

När du formger grafik för webben måste du tänka på andra saker än när du formger grafik för tryck. 

Du kan ta hjälp av de här tre riktlinjerna när du ska fatta beslut om webbgrafik:

Använd webbsäkra färger.

Färg är ofta det viktigaste i en teckning. Färgerna du ser på ritytan behöver dock inte alltid vara de färger som visas i en webbläsare på någon annans dator. Du kan förhindra gitter (sättet att simulera färger som inte är tillgängliga) och andra färgproblem om du vidtar två försiktighetsåtgärder när du skapar webbgrafik. För det första måste du alltid arbeta i RGB-färgläge. För det andra ska du använda en webbsäker färg.

Balansera bildkvalitet med filstorlek.

Det är nödvändigt att skapa små grafiska filstorlekar om du vill distribuera bilder på webben. Mindre filstorlekar gör så att webbservrar kan lagra och överföra bilder mer effektivt och användare kan hämta bilder snabbare. Du kan visa storleken och den beräknade hämtningstiden för en webbild i dialogrutan Spara för webben & enheter.

Välj det bästa filformatet för grafiken.

Olika typer av grafik måste sparas i olika filformat så att de kan visas på bästa sätt och skapa en filstorlek som passar för webben. Mer information om särskilda format finns i Optimeringsalternativ för webbgrafik.

Obs!

Det finns många Illustrator-mallar som har gjorts särskilt för webben, och det finns också webbsidor och banderoller. Välj Arkiv > Ny från mall om du vill välja en mall.

Om läget Förhandsvisa med pixlar

För att webbdesigner ska kunna skapa en design med exakta pixlar, har egenskapen pixeljusterad lagts till i Illustrator. När egenskapen pixeljustering har aktiverats för ett objekt, justeras alla vågräta och lodräta segment i objektet mot pixelstödrastret vilket ger linjerna ett tydligt utseende. Vid en omformning justeras objektet om mot pixelstödrastret enligt de nya koordinaterna, om den här egenskapen har ställts in för objektet. Du kan aktivera den här egenskapen genom att välja Justera till pixelstödraster på panelen Omforma. I Illustrator finns också alternativet Justera nya objekt mot pixelstödrastret på dokumentnivå, som aktiveras som standard för webbdokument. Med den här egenskapen aktiverad anges egenskapen pixeljustering som standard för alla nya objekt som du ritar.

Mer information finns i Rita pixeljusterade banor för webbarbetsflöden.

När du sparar en teckning i bitmappsformat, till exempel JPEG, GIF eller PNG, rastreras teckningen med 72 pixlar per tum i Illustrator. Du kan förhandsvisa hur objekt kommer att se ut när de är rastrerade genom att välja Visa > Förhandsvisa med pixlar. Den här funktionen är bra om du vill kontrollera exakt placering, storlek och kantutjämning för objekten i en rastrerad bild .

Om du vill förstå hur objekt delas upp i pixlar kan du öppna en fil som innehåller vektorobjekt, välja Visa > Förhandsvisa med pixlar och förstora teckningen så att du kan se de enskilda pixlarna. Placeringen av pixlarna bestäms av pixelstödrastret som delar in ritytan i steg om 1 punkt (1/72 tum). Du kan visa pixelstödrastret om du zoomar in till 600 %. Om du flyttar, lägger till eller omformar ett objekt fästes objektet mot pixelstödrastret. Det innebär att eventuell kantutjämning längs ”fästkanterna” på objektet (vanligtvis de vänstra och övre kanterna) försvinner. Avmarkera nu kommandot Visa > Fäst mot punkt och flytta objektet. Nu kan du placera objektet mellan rasterlinjerna. Lägg märke till hur det här påverkar objektets kantutjämning. Som du kan se påverkar väldigt små justeringar hur objektet rastreras.

Förhandsvisa med pixlar avmarkerat (överst) och markerat (nederst)
Förhandsvisa med pixlar avmarkerat (överst) och markerat (nederst)

Obs!

Punktrastret känner av linjalens nollpunkt (0,0). Om du flyttar linjalens nollpunkt ändras teckningens rastrering.

Tips för att skapa Illustrator-bilder för mobila enheter

Om du vill optimera grafiskt innehåll för mobila enheter ska du spara grafik skapad i Illustrator i ett SVG-format, till exempel SVG-t som är speciellt utformat för mobila enheter.

Använd de här tipsen när du vill försäkra dig om att bilder skapade i Illustrator visas på rätt sätt på mobila enheter:

  • Använd SVG-standarden när du skapar innehåll. Om du använder SVG när du publicerar vektorgrafik på mobila enheter resulterar det i liten filstorlek, oberoende visning, överlägsen färgkontroll, zoommöjlighet och redigerbar text (inom källkoden). Eftersom SVG är XML-baserat kan du dessutom lägga till interaktivitet i bilderna, till exempel markeringar, knappbeskrivningar, specialeffekter, ljud och animeringar.

  • Arbeta inom de slutliga måtten för din(a) mobila målenhet(er) ända från början. Även om SVG är skalbart kommer den slutliga grafiken definitivt att ha optimerad kvalitet och storlek för målenheten/målenheterna om du arbetar med rätt storlek.

  • Ange färgläget för Illustrator till RGB. SVG visas på visningsenheter med RGB-raster, till exempel skärmar.

  • Om du vill minska filstorleken kan du försöka minska antalet objekt (inklusive grupper) eller göra den mindre komplicerad (använda färre punkter). Om du använder färre punkter minskas mängden textinformation som behövs för att beskriva grafiken i SVG-filen betydligt. Du kan minska antalet punkter genom att välja Objekt > Sökväg > Förenkla och testa olika kombinationer för att hitta en balans mellan kvalitet och antalet punkter.

  • Använd symboler när det går. Symboler betecknar de vektorer som beskriver ett objekt en enda gång i stället för flera gånger. Det är användbart om grafiken innehåller objekt, till exempel bakgrunder till knappar som återanvänds.

  • När du animerar grafik bör du begränsa antalet använda objekt och försöka återanvända objekt där det går så att filstorleken inte blir för stor. Använd animeringar på grupper av objekt i stället för på enskilda objekt så undviker du kodrepeteringar.

  • Du bör använda SVGZ, den komprimerade gzippade versionen av SVG. Att komprimera filen kan minska dess storlek betydligt, beroende på innehåll. Text kan vanligtvis komprimeras kraftigt medan binärkodat innehåll, till exempel inbäddade raster (JPEG-, PNG- och GIF-filer), inte kan komprimeras lika mycket. SVGZ-filer kan dekomprimeras av alla program som expanderar filer komprimerade med gzip. För att kunna använda SGVZ bör du kontrollera att din mobila målenhet kan dekomprimera gzip-filer.

Adobes logotyp

Logga in på ditt konto