Brugerhåndbog Annuller

Udtræk CSS | Illustrator

  1. Brugerhåndbog til Illustrator
  2. Lær Illustrator at kende
    1. Introduktion til Illustrator
      1. Nyheder i Illustrator
      2. Almindelige spørgsmål
      3. Systemkrav til Illustrator
      4. Illustrator til Apple silicon
    2. Arbejdsrum
      1. Grundlæggende om arbejdsrum
      2. Opret dokumenter
      3. Værktøjer
      4. Tilpasning af tastaturgenveje
      5. Tegnebrætter
      6. Tilpas arbejdsrummet
      7. Panelet Egenskaber
      8. Angive indstillinger
      9. Touch-arbejdsrum
      10. Understøttelse af Microsoft Surface Dial i Illustrator
      11. Gendannelse, fortrydelse og automatisering
      12. Roter visning
      13. Linealer, gitre og hjælpelinjer
      14. Tilgængelighed i Illustrator
      15. Sikker tilstand
      16. Vis illustrationer
      17. Brug Touch Bar med Illustrator
      18. Filer og skabeloner
      19. Synkroniser indstillinger ved hjælp af Adobe Creative Cloud
    3. Værktøjer i Illustrator
      1. Markering
        1. Oversigt
        2. Valg
        3. Direkte markering
        4. Lasso
        5. Tegnebræt
      2. Navigation
        1. Oversigt
        2. Zoom
        3. Roter visning
      3. Mal
        1. Oversigt
        2. Forløb
        3. Opret form
      4. Tekst
        1. Oversigt
        2. Tekst
        3. Tekst på kurve
  3. Illustrator på iPad
    1. Nu kommer Illustrator på iPad
      1. Oversigt over Illustrator på iPad
      2. Ofte stillede spørgsmål om Illustrator på iPad
      3. Systemkrav | Illustrator på iPad
      4. Hvad du kan og ikke kan gøre med Illustrator på iPad
    2. Arbejdsrum
      1. Illustrator-arbejdsrum på iPad
      2. Touchgenveje og -bevægelser
      3. Genvejstaster til Illustrator på iPad
      4. Administrer dine appindstillinger
    3. Dokumenter
      1. Arbejde med dokumenter i Illustrator på iPad'en
      2. Importér Photoshop- og Fresco-dokumenter
    4. Marker og arranger objekter
      1. Opret gentagelsesobjekter
      2. Blandede objekter
    5. Tegning
      1. Tegn og rediger kurver
      2. Tegn og rediger former
    6. Tekst
      1. Arbejd med tekst og skrifttyper
      2. Opret tekstdesign langs en kurve 
      3. Tilføj dine egne skrifttyper
    7. Arbejd med billeder
      1. Vektoriser rasterbilleder
    8. Farve
      1. Anvend farver og farveforløb
  4. Cloud-dokumenter
    1. Grundlæggende
      1. Arbejd med Illustrator-cloud-dokumenter
      2. Del og samarbejd i Illustrator-cloud-dokumenter
      3. Opgrader cloud-lagring til Adobe Illustrator
      4. Illustrator-cloud-dokumenter | Almindelige spørgsmål
    2. Fejlfinding
      1. Fejlfinding af problemer med at oprette eller gemme cloud-dokumenter i Illustrator
      2. Fejlfinding af problemer med cloud-dokumenter i Illustrator
  5. Tilføj og rediger indhold
    1. Tegning
      1. Grundlæggende om tegning
      2. Redigering af kurver
      3. Tegn pixel-perfekte illustrationer
      4. Tegning med penne-, krumnings- eller blyantsværktøjet
      5. Tegning af enkle linjer og former
      6. Billedvektor
      7. Forenkl en kurve
      8. Definition af perspektivgitre
      9. Symbolismeværktøjer og symbolsæt
      10. Justering af kurvesegmenter
      11. Design en blomst i 5 enkle trin
      12. Perspektivtegning
      13. Symboler
      14. Tegning af pixeljusterede kurver til webarbejdsforløb
    2. 3D -effekter og Adobe Substance-materialer
      1. Om 3D-effekter i Illustrator
      2. Opret 3D-grafik
      3. Opret 3D-objekter
      4. Opret 3D-tekst
    3. Farve
      1. Om farver
      2. Vælg farver
      3. Brug og opret farveprøver
      4. Juster farver
      5. Brug panelet med Adobe Color-temaer
      6. Farvegrupper (harmonier)
      7. Panelet Farvetemaer
      8. Skift farve på din illustration
    4. Maling
      1. Om maling
      2. Mal med fyld og streger
      3. Dynamisk maling-grupper
      4. Forløb
      5. Pensler
      6. Gennemsigtighed og blandingstilstande
      7. Anvend streg på et objekt
      8. Opret og rediger mønstre
      9. Masker
      10. Mønstre
    5. Marker og arranger objekter
      1. Marker objekter
      2. Lag
      3. Grupper og udvid objekter
      4. Flyt, juster og fordel objekter
      5. Stabling af objekter    
      6. Lås, skjul og slet objekter
      7. Dubler objekter
      8. Roter og spejl objekter
    6. Omform objekter
      1. Beskær billeder
      2. Transformer objekter
      3. Kombiner objekter
      4. Klip, opdel og beskær objekter
      5. Fordrej som marionetdukke
      6. Skaler, vrid og forvræng objekter
      7. Blandede objekter
      8. Omformning med hylstre
      9. Omformning af objekter ved hjælp af effekter
      10. Opret nye former med værktøjerne Shaper og Opret form
      11. Arbejde med live-hjørner
      12. Berøringsunderstøttelse forbedrer dine arbejdsforløb
      13. Rediger udsnitsmasker
      14. Live-former
      15. Opret former med værktøjet Opret form
      16. Global redigering
    7. Tekst
      1. Opret tekst
      2. Skrifttyper og typografi
      3. Formater tekst
      4. Import og eksport af tekst
      5. Formater afsnit
      6. Specialtegn
      7. Opret tekst på en kurve
      8. Tegn- og afsnitstyper
      9. Faner
      10. Tekster
      11. Find manglende skrifttyper (Typekit-arbejdsforløb)
      12. Opdater tekst fra Illustrator 10
      13. Arabisk og hebraisk tekst
      14. Skrifttyper | Ofte stillede spørgsmål og tips om fejlfinding
      15. Opret 3D-teksteffekt
      16. Kreative typografiske design
      17. Skaler og roter tekst
      18. Linje- og tegnafstand
      19. Orddeling og linjeskift
      20. Tekstforbedringer
      21. Stave- og sprogordbøger
      22. Formater asiatiske tegn
      23. Ombryder til asiatiske skriftarter
      24. Opret tekstdesign med blandede objekter
      25. Opret en tekstplakat ved hjælp af Billedvektor
    8. Opret specialeffekter
      1. Arbejde med effekter
      2. Grafikformater
      3. Opret en skyggeeffekt
      4. Attributter for udseende
      5. Opret skitser og mosaikker
      6. Skyggeeffekter, skær og udtynding
      7. Oversigt over effekter
    9. Webgrafik
      1. Bedste fremgangsmåder for oprettelse af webgrafik
      2. Diagrammer
      3. SVG
      4. Opret animationer
      5. Udsnit og grafikobjekter
  6. Importere, eksportere og gemme
    1. Importer
      1. Import af illustrationsfiler
      2. Import af bitmapbilleder
      3. Import af illustrationer fra Photoshop
      4. Placer flere filer | Illustrator CC
      5. Fjern integrering af billeder
      6. Import af Adobe PDF-filer
      7. Import af EPS-, DCS- og AutoCAD-filer
      8. Kædeoplysninger
    2. Creative Cloud Libraries i Illustrator 
      1. Creative Cloud Libraries i Illustrator
    3. Gem
      1. Gem illustration
    4. Eksportér
      1. Brug Illustrator-illustrationer i Photoshop
      2. Eksport af illustrationer
      3. Hent aktiver, og eksportér i batches
      4. Pakkefiler
      5. Opret Adobe PDF-filer
      6. Udtræk CSS | Illustrator CC
      7. Adobe PDF-indstillinger
      8. Filoplysninger og metadata
  7. Udskrivning
    1. Forbered til udskrivning
      1. Konfigurer dokumenter til udskrivning
      2. Skift sidestørrelse og -retning
      3. Angiv skæremærker til beskæring eller justering
      4. Kom i gang med stort lærred
    2. Udskrivning
      1. Overprint
      2. Udskrivning med farvestyring
      3. PostScript-udskrivning
      4. Printerforudindstillinger
      5. Printermærker og beskæringer
      6. Udskriv og gem gennemsigtige illustrationer
      7. Diffusering
      8. Udskrive farveseparationer
      9. Udskrivning af farveforløb, masker og farveblandinger
      10. Hvid overprint
  8. Automatiser opgaver
    1. Datafletning ved hjælp af panelet Variabler
    2. Automatisering med scripts
    3. Automatisering med handlinger
  9. Fejlfinding 
    1. Problemer med, at programmet går ned
    2. Gendan filer efter nedbrud
    3. Filproblemer
    4. Problemer med GPU-enhedsdriver
    5. Problemer med Wacom-enhed
    6. Problemer med DLL-fil
    7. Problemer med hukommelse
    8. Problemer med indstillingsfil
    9. Problemer med skrifttyper
    10. Problemer med printer
    11. Del nedbrudsrapport med Adobe

Du kan designe en HTML-side i Illustrator. Dette er en god visuel rettesnor for en webudvikler, som herefter kan kode layoutet, typografierne og objekterne til en side i et HTML-redigeringsprogram. Det er dog et stort arbejde at genskabe det nøjagtige udseende og komponenternes eksakte placering.

I Illustrator kan du, når du opretter layoutet for en HTML-side, også generere og eksportere den underlæggende CSS-kode, der bestemmer komponenternes og objekternes udseende på siden. Med CSS kan du kontrollere udseendet af tekst og objekter (på samme måde som tegn- og grafikformater). Du kan vælge at eksportere CSS-koden for hvert enkelt objekt eller for hele det layout, der er designet i Illustrator.   

I panelet CSS-egenskaber (Vindue > CSS-egenskaber) kan brugerne gøre følgende:

  • Se CSS-koden for de markerede objekter
  • Kopiere CSS-koden for de markerede objekter
  • Eksportere et, flere eller alle de markerede Illustrator-elementer til en CSS-fil
  • Eksportere billeder, der kan omdannes til rasterbilleder
  • Generere browserspecifik CSS-kode

Vis og udtræk CSS-kode

Bemærk:

Benyt en af følgende fremgangsmåder til at generere CSS-kode:

  • Sørg for, at objekterne i dit Illustrator-dokument er navngivet i panelet Lag.
  • Klik på Vindue > CSS-egenskaber > pop op-menu > Eksportindstillinger, og markér afkrydsningsfeltet Generér CSS for unavngivne objekter
  1. Vælg Vindue > CSS-egenskaber.

    CSS-egenskabskode

    A. Advarsel, hvis nogle formater ikke kunne konverteres til CSS-kode B. Dialogboksen Indstillinger for CSS-eksport C. Eksportér markeret CSS til fil D. Kopiér det markerede format til udklipsholder E. Generer CSS F. Pop op-menu G. Formatter brugt i de markerede objekter H. CSS-kode 

  2. Gør et af følgende i et åbent Illustrator-dokumentet:

    • Markér et objekt. CSS-koden for objektet vises i paneletCSS-egenskaber.
    • Hold Shift-tasten nede, markér flere objekter, og klik derefter på knappen Generér CSS i panelet CSS-egenskaber.
    • Tryk på Ctrl/Cmd+A for at markere alle objekterne, og klik derefter på knappen Generér CSS i panelet CSS-egenskaber.

    Den genererede CSS-kode vises.

  3. Benyt en af følgende fremgangsmåder til at hente den CSS-kode, der er genereret:

    • Den markerede kode kopieres ved at vælge den specifikke kode og derefter:
      • Klik på Kopiér det markerede format for at kopiere til udklipsholder
      • Klik på pop op-menuen og på Eksportér den markerede CSS
        for at eksportere til en fil
    • Hele koden kopieres ved at undlade at markere noget i CSS-koden og derefter gøre følgende:
      • Klik på Kopiér det markerede format for at kopiere til udklipsholder
      • Klik på pop op-menuen og på Eksportér alt for at eksportere til en fil
  4. Når du gemmer CSS-koden til en fil, skal du vælge en af følgende indstillinger:

    CSS-eksportindstillinger

    Bemærk:

    Klik på Eksportindstillinger i panelet CSS-egenskaber, og foretag de relevante markeringer for at ændre indholdet i den CSS-kode, der er genereret.

Eksempel på CSS-kode

Rektangel med en farvetildeling (alle browsere)

.GRADIENT_BOX { background : -moz-linear-gradient(0% 50% 0deg,rgba(255, 242, 0, 1) 0%,rgba(254, 236, 1, 1) 10.31%,rgba(253, 218, 4, 1) 24.34%,rgba(251, 190, 9, 1) 40.51%,rgba(247, 150, 15, 1) 58.28%,rgba(243, 99, 24, 1) 77.37%,rgba(238, 37, 34, 1) 97.27%,rgba(237, 28, 36, 1) 100%); background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : -o-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -ms-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)"; background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200',endColorstr='#ED1C24' , GradientType=1); }

Rektangel med en farveforløbtildeling (gælder kun webkitbaserede browsere)

.GRADIENT_BOX { background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px; }

Flere objekter

.NormalCharacterStyle { font-family : Myriad Pro; font-size : 12px; } .st0 { border-style : Solid; border-color : #FFFFFF; border-color : rgba(255, 255, 255, 1); border-width : 0px; } .GRADIENT_BOX { background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px; }
Adobe-logo

Log ind på din konto