Adobe Illustrator CC a LuckyTemplates csalólaphoz

Az Illustrator használatának legdrámaibb változásai közül sok a vektoros képek webre fordítása terén megy végbe, és az alulértékelt SVG formátum a kulcsfontosságú láncszem ebben a folyamatban. Az SVG-fájlok megőrzik a vektorgrafikák értékes méretezhetőségét, és szinte általánosan támogatottak a webhelyeken és webfejlesztői környezetekben. Amikor vektorgrafikát készít webre, fontos, hogy kerülje az Illustrator szabványos effektusait, és helyette SVG-szűrőket használjon.

Az Illustrator tisztességes, de minimalista SVG-szűrőkészlettel érkezik, de itt van néhány tipp az SVG-szűrők megkereséséhez és hozzáadásához, valamint a saját SVG-szűrők létrehozásához szükséges erőforrásokhoz. Azok számára, akik web- és alkalmazásfejlesztőkkel dolgoznak, könnyítsék meg és tegyék hatékonyabbá az életüket az SVG-kód átadására szolgáló csalólapon.

SVG-szűrők alkalmazása az Illustratorban

Amikor SVG-fájlokat hoz létre képernyőkhöz az Illustratorban, és effektusokat (például vetett árnyékokat) szeretne alkalmazni, ezeket SVG-szűrőként kell alkalmaznia. Ily módon az SVG-fájlok torzítás nélkül megőrzik a végtelen méretezhetőséget.

A következő lépések végigvezetik az SVG-szűrő alkalmazásán a grafikákon az Illustratorban:

Válassza ki azt az objektumot, amely(ek)re a szűrőt alkalmazza.

Válassza az Effektus → SVG-szűrők lehetőséget.

Válasszon ki egy szűrőt a megjelenő listából.
A legtöbb szűrőnek leíró neve van. Például azok, amelyeknek a nevében van árnyék, drop- shadow , azoké , amelyek nevében szerepel a Gauss elmosódás. A munkafolyamat kissé furcsa és körbejárható, de először ki kell választania egy szűrőt, hogy hozzáférjen az összes alkalmazási lehetőséghez.

A kiválasztott szűrő módosításához:

• Tartsa kijelölve azt az objektumot, amelyre a szűrőt alkalmazta, és nyissa meg a Megjelenés panelt az Ablak → Megjelenés menüpontban.
• A Megjelenés panelen kattintson a panel Kitöltés részében megjelenő SVG-szűrőre. Megnyílik az SVG-szűrő alkalmazása panel.
• Az SVG-szűrő alkalmazása panelen módosítsa az alkalmazott szűrőt.
• A szűrő megjelenésének megtekintéséhez jelölje be az Előnézet jelölőnégyzetet az ábrán látható módon.
  

Miután kiválasztotta a szűrőt, kattintson az OK gombra az SVG-szűrő alkalmazása panelen.

SVG-szűrők hozzáadása az Illustratorhoz

Az Illustrator SVG-szűrőkészlete minimalista, de bővítheti saját szűrőinek tervezésével vagy előre csomagolt SVG-szűrőkészletek letöltésével online forrásokból. A szűrők tervezése magában foglalja a kódolást, de ez megvalósítható, ha jól ismeri a HTML-t. Az SVG-szűrők létrehozásához ajánlom a w3Schools oktatóanyagát . Vagy vásárolhat szűrőkészleteket az interneten, és még néhány szép ingyenes SVG-szűrőkészletet is találhat a Creatingo webhelyen .

Miután megvásárolta vagy létrehozta saját SVG-szűrőit, a következőképpen telepítheti őket az Illustratorban:

Válassza a Hatás → SVG-szűrők → SVG-szűrő importálása menüpontot.

A megnyíló párbeszédpanelen keresse meg, és kattintson duplán a létrehozott vagy ingyenesen letöltött SVG-szűrőfájlra.
A keresett fájlnak SVG-fájlnak kell lennie (egy SVG-fájlban több szűrő is található).
Az új szűrők mostantól elérhetők az SVG-szűrők almenüben.

Válassza az Effektus→SVG-szűrők menüpontot az új szűrők kiválasztott objektumokra való alkalmazásához.

Az SVG-kód átadása az Illustratorból a fejlesztőnek

Az Illustratorban létrehozott SVG-grafikákat gyakran játéktervezőknek, animátoroknak, infografikáknak vagy más kimenetnek adják át, ahol a fejlesztők az SVG-grafika mögötti kóddal dolgoznak. Illusztrátorként nem kell tudnod, hogyan kell létrehozni ezt a kódot, de lehet, hogy tudnod kell, hogyan szerezheted meg és add át egy fejlesztőnek. Itt van, hogyan.

Az SVG-grafika kódként történő exportálása az Illustrator mentési funkcióin keresztül fut. A Mentés menüben vannak olyan opciók (nem könnyű megtalálni), amelyek SVG-kódként exportálják a fájlt. Valószínűleg valós idejű kommunikációt szeretne folytatni a képernyőfejlesztővel, miközben létrehozza ezt a kódot, mert a kód felhasználási módja több lehetőséget is meghatároz:

Válassza a Fájl→Mentés (vagy a Mentés másként menüpontot, ha egy fájlt újra ment).

A megnyíló párbeszédpanelen válassza ki az SVG lehetőséget a Formátum menüből.
Hagyja figyelmen kívül az SVGZ fájl beállítást, amely olyan tömörített fájlokhoz tartozik, amelyek nem jelennek meg a böngészőkben.

Kattintson a Mentés gombra az SVG-beállítások párbeszédpanel megnyitásához.

Mindig válassza az SVG 1.1-et az SVG-profilok legördülő menüből. Más verziók elavultak.

Ha beágyazott vagy csatolt képeket tartalmaz az SVG-fájlban, válassza a Beágyazás lehetőséget a Képhelyek legördülő menüből. Azonban először konzultáljon webfejlesztőjével erről a választásról.

Válassza az Illustrator szerkesztési képességeinek megőrzése lehetőséget, hogy a fájlt szerkeszthetővé tegye az Illustratorban.
Ez a választás növeli a fájlméretet, de lehetővé teszi, hogy egyetlen SVG-fájllal dolgozzon, amelyet szerkeszthet, frissíthet és megoszthat a webfejlesztőkkel.

Ha megjelenik a További beállítások gomb, kattintson rá a speciális beállítások eléréséhez. és válasszon.
Lényegében a különböző beállítások CSS-t generálnak a fájllal, amely a következő módokon határozza meg a tulajdonságokat. Konzultáljon webfejlesztő csapattársával a következő CSS-tulajdonságok meghatározásáról:

• A Prezentációs attribútumok stílust ágyaznak be az SVG-kódba. Ez a lehetőség a legegyszerűbb és az alapértelmezett. Használja ezt, ha nem dolgozik együtt web- vagy alkalmazásfejlesztővel.
• A két Stílusattribútum opció a CSS-re támaszkodik a stílus kezeléséhez, ahol lehetséges.
• A Style Elements osztálystílusválasztókat generál a stílushoz.
• Az Include Unused Styles beállítás olyan kódot generál, amely valószínűleg növeli az SVG-fájl méretét funkcionális érték hozzáadása nélkül.

Törölje az SVG-beállítások párbeszédpanel alján található öt jelölőnégyzet bejelölését, hacsak a fejlesztő-partner nem kéri, hogy jelölje be őket.
Ezek az opciók speciális alkalmazásokhoz valók.

Az SVG-kód létrehozásához az SVG-beállítások párbeszédpanelen végzett beállítások alapján, kattintson az SVG-kód gombra.
A generált SVG-kód megjelenik az operációs rendszer szövegszerkesztőjében. Ezt a kódot szöveges fájlként mentheti az operációs rendszer szövegszerkesztőjével, és átadhatja a fájlt egy fejlesztőnek.

A kód létrehozása után kattintson az OK gombra a fájl mentéséhez.
Ezt a fájlt újra megnyithatja és szerkesztheti az Illustratorban.