Full de trucs dAdobe Illustrator CC per a LuckyTemplates

Molts dels canvis més dramàtics en com s'utilitza Illustrator s'estan produint en l'àmbit de la traducció d'imatges vectorials al web, i el subestimat format SVG és l'enllaç clau d'aquest procés. Els fitxers SVG mantenen les característiques d'escalabilitat de les obres d'art vectorials i s'admeten gairebé universalment en llocs web i entorns de desenvolupament web. Quan prepareu il·lustracions vectorials per al web, és important evitar els efectes estàndard d'Illustrator i, en canvi, utilitzar filtres SVG.

Illustrator inclou un conjunt decent però minimalista de filtres SVG, però aquí teniu alguns consells sobre com trobar i afegir filtres SVG, així com recursos per crear els vostres propis filtres SVG. Per a aquells que treballen amb desenvolupadors web i d'aplicacions, feu la seva vida més fàcil i productiva consultant el full de trucs per lliurar el codi SVG.

Com aplicar filtres SVG a Illustrator

Quan creeu fitxers SVG per a pantalles a Illustrator i voleu aplicar efectes (com ara ombres desplegables), hauríeu d'aplicar-los com a filtres SVG. D'aquesta manera, els vostres fitxers SVG conserven una escalabilitat infinita sense distorsió.

Els passos següents us guiaran per aplicar un filtre SVG als gràfics a Illustrator:

Seleccioneu els objectes als quals esteu aplicant el filtre.

Trieu Efecte → Filtres SVG.

Seleccioneu un filtre de la llista que apareix.
La majoria dels filtres tenen noms descriptius. Per exemple, els que tenen ombra al nom són ombres, els que tenen gaussian al nom són desenfocaments gaussians. El flux de treball és una mica estrany i rodó, però primer heu de seleccionar un filtre per accedir a totes les opcions disponibles per aplicar-ne un.

Per canviar el filtre seleccionat:

• Mantingueu seleccionat l'objecte al qual s'ha aplicat el filtre i obriu el panell Aparença escollint Finestra → Aparença.
• Al tauler Aparença, feu clic al filtre SVG que apareix a la secció Omplir del tauler. S'obre el tauler Aplica el filtre SVG.
• Al tauler Aplica el filtre SVG, canvieu el filtre aplicat.
• Per veure com es veurà el filtre, marqueu la casella de selecció Vista prèvia, tal com es mostra a la figura.
  

Després d'establir un filtre, feu clic a D'acord al tauler Aplica el filtre SVG.

Com afegir filtres SVG a Illustrator

El conjunt de filtres SVG d'Illustrator és minimalista, però podeu millorar-lo dissenyant els vostres propis filtres o descarregant conjunts preempaquetats de filtres SVG de fonts en línia. Dissenyar filtres implica codificar, però és factible si us sentiu còmodes amb HTML. Recomano el tutorial a w3Schools per crear filtres SVG. O podeu comprar conjunts de filtres en línia i, fins i tot, trobar alguns bons conjunts de filtres SVG gratuïts a Creatingo .

Després de comprar o crear els vostres propis filtres SVG, aquí teniu com els instal·leu a Illustrator:

Trieu Efecte → Filtres SVG → Importa el filtre SVG.

Al quadre de diàleg que s'obre, navegueu i feu doble clic al fitxer de filtres SVG que heu creat o descarregat gratuïtament.
El fitxer que busqueu hauria de ser un fitxer SVG (s'agrupen diversos filtres en un sol fitxer SVG).
Els vostres filtres nous ja estan disponibles al submenú Filtres SVG.

Trieu Efecte→Filtres SVG per aplicar els vostres filtres nous als objectes seleccionats.

Com lliurar el codi SVG d'Illustrator a un desenvolupador

Sovint, els gràfics SVG que creeu a Illustrator es lliuren als dissenyadors de jocs, animadors, infografies o altres sortides, on els desenvolupadors treballaran amb el codi que hi ha darrere del gràfic SVG. Com a il·lustrador, no cal saber com crear aquest codi, però potser haureu de saber com obtenir-lo i lliurar-lo a un desenvolupador. Heus aquí com.

El camí per exportar els vostres gràfics SVG com a codi passa per les funcions de desar d'Illustrator. El menú Desa té opcions (no fàcils de trobar) que exporten el vostre fitxer com a codi SVG. És probable que voldreu estar en comunicació en temps real amb el desenvolupador de la pantalla mentre genereu aquest codi perquè hi ha diverses opcions que determinin com s'utilitzarà aquest codi:

Trieu Fitxer → Desa (o Desa com si torneu a desar un fitxer).

Al diàleg que s'obre, seleccioneu SVG al menú Format.
Ignoreu l'opció de fitxer SVGZ, que és per a un fitxer comprimit que no es mostra als navegadors.

Feu clic a Desa per obrir el diàleg Opcions SVG.

Trieu sempre SVG 1.1 al menú desplegable Perfils SVG. Altres versions estan obsoletes.

Si teniu imatges incrustades o enllaçades al vostre fitxer SVG, seleccioneu Incrusta al menú desplegable Ubicacions d'imatges. Tanmateix, consulteu primer amb el vostre desenvolupador web sobre aquesta opció.

Seleccioneu Conserva les capacitats d'edició d'Illustrator per fer que el fitxer es pugui editar a Illustrator.
Aquesta opció augmenta la mida del fitxer, però us permet treballar amb un únic fitxer SVG que podeu editar, actualitzar i compartir amb desenvolupadors web.

Si es mostra el botó Més opcions, feu-hi clic per accedir a les opcions avançades. i fes les teves seleccions.
Bàsicament, les diferents opcions generen CSS amb el vostre fitxer que defineix les propietats de les maneres següents. Consulteu amb el vostre company d'equip desenvolupador web sobre com definir aquestes propietats CSS:

• Els atributs de presentació inclouen l'estil al codi SVG. Aquesta opció és la més senzilla i la predeterminada. Utilitzeu-ho si no col·laboreu amb un desenvolupador web o d'aplicacions.
• Les dues opcions d' atributs d'estil es basen en CSS per gestionar l'estil sempre que sigui possible.
• Style Elements genera selectors d'estil de classe per a l'estil.
• L' opció Inclou estils no utilitzats genera codi que probablement augmenta la mida del fitxer SVG sense afegir valor funcional.

Desmarqueu les cinc caselles de selecció a la part inferior del diàleg Opcions SVG, tret que el vostre soci desenvolupador demani que les seleccioneu.
Aquestes opcions són per a aplicacions altament especialitzades.

Per generar codi SVG a partir de les seleccions que feu al diàleg Opció SVG, feu clic al botó Codi SVG .
El codi SVG generat es mostra a l'editor de text del vostre sistema operatiu. Podeu desar aquest codi com a fitxer de text mitjançant l'editor de text del vostre sistema operatiu i lliurar el fitxer a un desenvolupador.

Després d'haver generat el codi, feu clic a D'acord per desar el fitxer.
Podeu tornar a obrir i editar aquest fitxer a Illustrator.