Felhasználói útmutató Mégse

CSS kinyerése | Illustrator

Keresés
Illustrator

Illustrator

Megnyitás a weben
  1. Illustrator felhasználói útmutató
  2. Az Illustrator megismerése
    1. Bevezetés az Illustrator programba
      1. Az Illustrator újdonságai
      2. Gyakori kérdések
      3. Az Illustrator rendszerkövetelményei
      4. Az Illustrator használata Apple Silicon processzorral ellátott számítógépeken
      5. GPU-teljesítmény
    2. Munkaterület
      1. A munkaterület alapjai
      2. Dokumentumok létrehozása
      3. Tanuljon gyorsabban az Illustrator Felfedezés panelje segítségével
      4. Gyorsítsa fel a munkafolyamatokat a Környezetfüggő feladatsávval
      5. Eszköztár
      6. Alapértelmezett billentyűparancsok
      7. Billentyűparancsok testreszabása
      8. A rajztáblák bemutatása
      9. Rajztáblák kezelése
      10. Munkaterület testreszabása
      11. Tulajdonságok panel
      12. Beállítások megadása
      13. Érintés munkaterület
      14. Microsoft Surface Dial-támogatás az Illustrator alkalmazásban
      15. Szerkesztések visszavonása és a tervezési előzmények kezelése
      16. Nézet elforgatása
      17. Vonalzók, rácsok és segédvonalak
      18. Akadálymentesség az Illustrator alkalmazásban
      19. Grafika megtekintése
      20. Az Illustrator használata a Touch Barral
      21. Fájlok és sablonok
    3. Eszközök az Illustrator programban
      1. Az eszközök áttekintése
      2. Kijelölő eszközök
        1. Kijelölés
        2. Közvetlen kijelölés
        3. Csoport kijelölése
        4. Varázspálca
        5. Lasszó
        6. Rajztábla
      3. Navigációs eszközök
        1. Kéz
        2. Nézet elforgatása
        3. Kicsinyítés/nagyítás
      4. Festési eszközök
        1. Színátmenet
        2. Háló
        3. Alakzatformáló
      5. Szöveg eszközök
        1. Szöveg
        2. Görbére írt szöveg
        3. Függőleges szöveg
      6. Rajzeszközök
        1. Toll
        2. Szerkesztőpont hozzáadása
        3. Szerkesztőpont törlése
        4. Szerkesztőpont
        5. Görbület
        6. Vonalszegmens
        7. Téglalap
        8. Lekerekített téglalap
        9. Ellipszis
        10. Sokszög
        11. Csillag
        12. Ecset
        13. Pacaecset
        14. Ceruza
        15. Shaper
        16. Szelet
      7. Módosítás eszközök
        1. Forgatás
        2. Tükrözés
        3. Méretezés
        4. Nyírás
        5. Szélesség
        6. Szabad átalakítás
        7. Pipetta
        8. Keverés
        9. Radír
        10. Olló
        11. Dimenzió
    4. Generatív mesterséges intelligencia (a kontinentális Kínában nem érhető el)
      1. Jelenetek, tárgyak és ikonok létrehozása szöveges utasításokkal
      2. Vektorminták létrehozása szöveges utasításokkal
      3. Vektoralakzat-kitöltések létrehozása szöveges utasításokkal
      4. Grafika átszínezése szöveges utasításokkal
    5. Gyorsműveletek
      1. Retro szöveg
      2. Neonfényű szöveg
      3. Régies szöveg
      4. Átszínezés
      5. Vázlat átalakítása vektorrá
  3. Az iPadhez készült Illustrator
    1. Az iPadhez készült Illustrator bemutatása
      1. Az iPadhez készült Illustrator áttekintése
      2. Az iPadhez készült Illustrator – GYIK
      3. Rendszerkövetelmények | Az iPadhez készült Illustrator
      4. Mit tehet vagy mit nem tehet az iPadhez készült Illustrator alkalmazásban
    2. Munkaterület
      1. iPadhez készült Illustrator munkaterülete
      2. Érintéses gyorsbillentyűk és ujjmozdulatok
      3. Billentyűparancsok az iPadhez készült Illustrator programban
      4. Az alkalmazásbeállítások kezelése
    3. Dokumentumok
      1. Dokumentumokkal végzett munka az iPadhez készült Illustratorban
      2. A Photoshop- és a Fresco-dokumentumok importálása
    4. Objektumok kiválasztása és elrendezése
      1. Ismétlődő objektumok létrehozása
      2. Objektumok keverése
    5. Rajzolás
      1. Görbék rajzolása és szerkesztése
      2. Alakzatok rajzolása és szerkesztése
    6. Szöveg
      1. Műveletek szöveggel és betűtípusokkal
      2. Szövegtervek létrehozása egy görbe mentén
      3. Saját betűtípusok hozzáadása
    7. Képekkel végzett munka
      1. Raszterképek vektorizálása
    8. Szín
      1. Színek és színátmenetek alkalmazása
  4. Felhőalapú dokumentumok
    1. Alapvető tudnivalók
      1. Az Illustrator felhőalapú dokumentumainak kezelése
      2. Illustrator felhőalapú dokumentumainak megosztása és együttműködés azokon
      3. Dokumentumok megosztása véleményezésre
      4. Felhőtárhely frissítése az Adobe Illustratorhoz
      5. Felhőalapú Illustrator-dokumentumok | Gyakori kérdések
    2. Hibaelhárítás
      1. Az Illustrator felhőalapú dokumentumainak létrehozásával vagy mentésével kapcsolatos hibák elhárítása
      2. Hibaelhárítás – Illustrator felhőalapú dokumentumokkal kapcsolatos hibái
  5. Tartalom hozzáadása és szerkesztése
    1. Rajzolás
      1. A rajzolás alapjai
      2. Görbék szerkesztése
      3. Képpont-tökéletes grafika rajzolása
      4. Rajzolás a Toll, a Görbület vagy a Ceruza eszközzel
      5. Egyszerű vonalak és formák rajzolása
      6. Téglalaprácsok és poláris rácsok rajzolása
      7. Fényfoltok rajzolása és szerkesztése
      8. Képek képkontúrozása
      9. Görbe egyszerűsítése
      10. Szimbólumeszközök és szimbólumkészletek
      11. Görbeszegmensek módosítása
      12. Készítsen virágot 5 egyszerű lépéssel
      13. Perspektívarács létrehozása és szerkesztése
      14. Perspektívarácsban lévő objektumok rajzolása és módosítása
      15. Alkosson elemekből szimbólumokat ismétlődő használatra
      16. Képpontra igazított görbék rajzolása internetes munkafolyamatokhoz
    2. Mérés
      1. Dimenziók mérése és ábrázolása
    3. 3D objektumok és anyagok
      1. Ismerje meg az Illustrator 3D-s hatásait
      2. 3D-s grafikák létrehozása
      3. Rajzelem leképezése 3D objektumokon
      4. 3D szöveg létrehozása
      5. 3D objektumok létrehozása
    4. Szín
      1. A színek ismertetése
      2. Színek kijelölése
      3. Színtárak használata és létrehozása
      4. Színek beállítása
      5. Az Adobe Color témák panel használata
      6. Színcsoportok (harmóniák)
      7. Színtémák panel
      8. Grafika átszínezése
    5. Festés
      1. Festés ismertetése
      2. Festés kitöltésekkel és ecsetvonásokkal
      3. Élő festési csoportok
      4. Színátmenetek
      5. Ecsetek
      6. Átlátszóság és keverési módok
      7. Ecsetvonás alkalmazása egy objektumon
      8. Mintázatok létrehozása és szerkesztése
      9. Hálók
      10. Mintázatok
    6. Objektumok kiválasztása és elrendezése
      1. Objektumok kijelölése
      2. Rétegek
      3. Objektumok kibővítése, csoportosítása és a csoportosítás megszüntetése
      4. Objektumok mozgatása, igazítása és szétosztása
      5. Objektumok igazítása, elrendezése és mozgatása egy görbén
      6. Objektumok igazítása karakterjelhez
      7. Objektumok igazítása japán karakterjelhez
      8. Objektumok halmozása    
      9. Objektumok zárolása, elrejtése és törlése
      10. Objektumok másolása és megkettőzése
      11. Objektumok forgatása és tükrözése
      12. Tárgyak összefonása
      13. Realisztikus grafikai vázlatok létrehozása
    7. Objektumok átformálása
      1. Képek vágása
      2. Objektumok átalakítása
      3. Objektumok kombinálása
      4. Objektumok kivágása, felosztása és körülvágása
      5. Bábu hajlítása
      6. Objektumok méretezése, nyírása és torzítása
      7. Objektumok keverése
      8. Átformálás burkológörbék használatával
      9. Objektumok átformálása hatásokkal
      10. Új alakzatok készítése a Shaper és az Alakzatformáló eszközzel
      11. Élő sarkok használata
      12. Továbbfejlesztett újraformáló munkafolyamatok érintés támogatásával
      13. Vágómaszkok szerkesztése
      14. Élő alakzatok
      15. Alakzatok létrehozása az Alakzatformáló eszközzel
      16. Globális szerkesztés
    8. Szöveg
      1. Szöveg hozzáadása és a szövegobjektumokkal végzett munka
      2. Áttördelés megtekintése
      3. Felsorolásjeles és számozott listák létrehozása
      4. A szövegterület kezelése
      5. Betűtípusok és tipográfia
      6. A képeken belüli szöveg átalakítása szerkeszthető szöveggé
      7. Szöveg egyszerű formázása
      8. Szövegek speciális formázása
      9. Szöveg importálása és exportálása
      10. Bekezdésformázás
      11. Speciális karakterek
      12. Görbére írt szöveg létrehozása
      13. Karakter- és bekezdésstílusok
      14. Tabulátorok
      15. Hiányzó betűtípusok hozzáadása az Adobe Fonts oldalról
      16. Arab és héber szöveg
      17. Betűtípusok | GYIK és hibaelhárítási tippek
      18. Kreatív tipográfiai tervek
      19. Szöveg méretezése és elforgatása
      20. Sortávolság és karaktertérköz
      21. Elválasztás és sortörések
      22. Helyesírás és nyelvi szótárak
      23. Ázsiai karakterek formázása
      24. Tördelők ázsiai típusú írásokhoz
      25. Szöveges tervek készítése objektumok keverésével
      26. Szöveges poszter létrehozása a Kép kontúrozása használatával
    9. Speciális effektusok létrehozása
      1. Hatásokkal való munka
      2. Grafikus stílusok
      3. Megjelenési jellemzők
      4. Vázlatok és mozaikok létrehozása
      5. Vetett árnyékok, ragyogások és lágy perem
      6. Hatások összefoglalása
    10. Webgrafikák
      1. Gyakorlati tanácsok webgrafikák készítéséhez
      2. Diagramok
      3. SVG
      4. Szeletek és képzónák
  6. Importálás, exportálás és mentés
    1. Importálás
      1. Több fájl elhelyezése
      2. Csatolt és beágyazott fájlok kezelése
      3. Hivatkozásinfó
      4. Képek beágyazásának megszüntetése
      5. Grafikák importálása a Photoshopból
      6. Bittérképek importálása
      7. Adobe PDF-fájlok importálása
      8. EPS-, DCS- és AutoCAD-fájlok importálása
    2. Creative Cloud Libraries az Illustrator alkalmazásban 
      1. Creative Cloud Libraries az Illustrator alkalmazásban
    3. Mentés és exportálás
      1. Grafika mentése
      2. Grafika exportálása
      3. Adobe PDF fájlok létrehozása
      4. Adobe PDF-beállítások
      5. Illustratorban készített tartalom használata a Photoshopban
      6. Kellékek összegyűjtése és exportálása kötegelve
      7. Csomagfájlok
      8. CSS kinyerése | Illustrator CC
      9. Dokumentum adatai panel
  7. Nyomtatás
    1. Előkészületek a nyomtatáshoz
      1. Dokumentumok beállítása nyomtatáshoz
      2. Az oldal méretének és tájolásának módosítása
      3. Vágójelek meghatározása körülvágáshoz és igazításhoz
      4. Első lépések nagyméretű rajzvászonnal
    2. Nyomtatás
      1. Felülnyomás
      2. Nyomtatás színkezeléssel
      3. PostScript-nyomtatás
      4. Nyomtatási készletek
      5. Nyomtatási jelek és kifutók
      6. Áttetsző grafikák nyomtatása és mentése
      7. Alátöltés
      8. Színkivonatok nyomtatása
      9. Színátmenetek, hálók és színkeverések nyomtatása
      10. Fehér felülnyomás
  8. Feladatok automatizálása
    1. Adategyesítés a Változók panel használatával
    2. Automatizálás parancsfájlokkal
    3. Automatizálás műveletekkel
  9. Hibaelhárítás 
    1. Javított problémák
    2. Ismert problémák
    3. Összeomlási problémák
    4. Fájlok helyreállítása az összeomlás után
    5. Biztonságos mód
    6. Fájllal kapcsolatos problémák
    7. Támogatott fájlformátumok
    8. GPU-kártya eszközillesztővel kapcsolatos problémák
    9. Wacom eszközzel kapcsolatos problémák
    10. DLL-fájllal kapcsolatos problémák
    11. Memória-problémák
    12. Beállításfájl-problémák
    13. Betűtípus-problémák
    14. Nyomtatóproblémák
    15. Ossza meg az összeomlási jelentést az Adobe-bal
    16. Az Illustrator teljesítményjavítása

Ismerje meg, hogyan nyerheti ki és exportálhatja egyes objektumok vagy akár az Illustrator programban megtervezett teljes oldal CSS-kódját.

Létrehozhatja egy HTML oldal tervét az Illustrator szoftverben. Ez jó vizuális útmutatóul szolgál a webfejlesztőknek, akik aztán egy HTML-szerkesztő oldalán kódolhatják az elrendezést, a stílusokat és az objektumokat. Az összes összetevő és objektum kinézetének és helyzetének pontos lemásolása azonban nagyon időigényes és fárasztó eljárás.

Ha az Illustrator programmal készíti el egy HTML oldal elrendezését, akkor létrehozhatja és exportálhatja is az alapjául szolgáló CSS-kódot, ami meghatározza az oldal összetevőinek és objektumainak kinézetét. A CSS lehetővé teszi, hogy meghatározza a szöveg és az objektumok megjelenését (a karakterek és grafikák stílusához hasonlóan).   

CSS-kód megtekintése és kinyerése

A CSS-tulajdonságok panelen a felhasználók a következőket tehetik:

  • A kiválasztott objektumok CSS-kódjának megtekintése és másolása.
  • Egy, több vagy az összes kijelölt Illustrator elem exportálása egy CSS fájlba.
  • A felhasznált raszterezhető képek exportálása.
  • Böngésző-specifikus CSS-kód létrehozása.
CSS-tulajdonságok kódja

A. Figyelmeztetést kap, ha néhány stílus nem konvertálható CSS-kóddá B. CSS exportálási beállítások párbeszédablak C. Kijelölt CSS exportálása fájlba D. Kijelölt stílus másolása a vágólapra E. CSS generálása F. CSS-tulajdonságok panel menü G. Kijelölt objektumokban használt stílusok H. CSS-kód 

A CSS-kód megtekintéséhez és kinyeréséhez kövesse az alábbi lépéseket:

  1. Válassza az Ablak > CSS-tulajdonságok elemet.

    Megjegyzés:

    Ügyeljen arra, hogy az Illustrator dokumentumban az objektumok el legyenek nevezve a Réteg panelen.

  2. A létrehozott CSS-kód megjelenítéséhez:

    Egy objektum esetén:

    Válasszon ki egy objektumot. Az objektum CSS kódja a CSS-tulajdonságok panelben látható.

    Több objektum esetén:

    Tartsa lenyomva a Shift billentyűt, válasszon ki több objektumot, majd válassza a CSS generálása lehetőséget a CSS-tulajdonságok panelen.

    Az összes objektum esetén:

    Nyomja le a Ctrl/Cmd + A billentyűkombinációt az összes objektum kijelöléséhez, majd válassza a CSS generálása lehetőséget a CSS-tulajdonságok panelen.

  3. A létrehozott CSS-kód megszerzéséhez hajtsa végre az alábbiak egyikét:

    A kiválasztott kód másolásához:

    • Válasszon ki egy adott kódot, és válassza a Kijelölt stílus másolása lehetőséget a vágólapra másolásához.
    • Válassza a CSS-tulajdonsáok panel menüt  , és válassza a Kijelölt CSS exportálása lehetőséget fájl exportálásához.

    Az összes kód másolásához:

    • Ne jelöljön ki semmit sem a CSS-kódban, majd válassza a Kijelölt stílus másolása lehetőséget a vágólapra másolásához.
    • Válassza a CSS-tulajdonsáok panel menüt  , és válassza az Összes exportálása lehetőséget fájl exportálásához.

  4. A CSS-kód fájlba mentésekor válasszon a CSS exportálási beállításai párbeszédpanelen megadott lehetőségek közül.

    CSS exportálási beállítások párbeszédpanel
    CSS exportálási beállításai

Minta CSS-kód

Téglalap színátmenettel (minden böngészőhöz)

.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);
}

Téglalap színátmenettel (csak webkit alapú böngészőhöz)

.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;
}

Több objektum

.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;
}

Kapcsolódó témák

Kérdése vagy ötlete van?

Kérdezzen a közösségtől

Ha kérdése van, vagy szeretne megosztani egy ötletet, jöjjön és vegyen részt az Adobe Illustrator-közösségben. Szeretnénk hallani a véleményét!

Kapjon segítséget gyorsabban és könnyebben!

Új felhasználó?

Gyorslinkek

Összes előfizetési csomag megtekintése Csomagjainak kezelése
Gyorshivatkozások megtekintése
Gyorshivatkozások elrejtése

Jogi közlemények    |    Webes adatvédelmi nyilatkozat