Adobe Illustrator CC per un cheat sheet di LuckyTemplates

Molti dei cambiamenti più drammatici nel modo in cui Illustrator viene utilizzato si stanno verificando nel regno della traduzione di immagini vettoriali sul Web e il formato SVG sottovalutato è il collegamento chiave in questo processo. I file SVG mantengono le preziose funzionalità di scalabilità della grafica vettoriale e sono supportati quasi universalmente nei siti Web e negli ambienti di sviluppo Web. Quando preparate grafica vettoriale per il Web, è importante evitare gli effetti standard di Illustrator e utilizzare invece i filtri SVG.

Illustrator viene fornito con un set decente ma minimalista di filtri SVG, ma ecco alcuni suggerimenti su come trovare e aggiungere filtri SVG e risorse per creare i tuoi filtri SVG. Per coloro che lavorano con sviluppatori web e app, rendi la loro vita più facile e più produttiva controllando il cheat sheet per consegnare il codice SVG.

Come applicare i filtri SVG in Illustrator

Quando crei file SVG per schermi in Illustrator e desideri applicare effetti (come ombre esterne), dovresti applicarli come filtri SVG. In questo modo, i tuoi file SVG mantengono una scalabilità infinita senza distorsioni.

I seguenti passaggi ti guidano attraverso l'applicazione di un filtro SVG alla grafica in Illustrator:

Seleziona gli oggetti a cui stai applicando il filtro.

Scegli Effetto → Filtri SVG.

Seleziona un filtro dall'elenco che appare.
La maggior parte dei filtri ha nomi descrittivi. Ad esempio, quelli con ombra nel nome sono ombre, quelli con gaussiano nel nome sono sfocature gaussiane. Il flusso di lavoro è un po' strano e indiretto, ma devi prima selezionare un filtro per accedere a tutte le opzioni disponibili per applicarne uno.

Per modificare il filtro selezionato:

• Mantieni selezionato l'oggetto a cui è stato applicato il filtro e apri il pannello Aspetto scegliendo Finestra → Aspetto.
• Nel pannello Aspetto, fai clic sul filtro SVG che appare nella sezione Riempimento del pannello. Si apre il pannello Applica filtro SVG.
• Nel pannello Applica filtro SVG, modifica il filtro applicato.
• Per vedere come apparirà il filtro, seleziona la casella di controllo Anteprima, come mostrato in figura.
  

Dopo aver scelto un filtro, fai clic su OK nel pannello Applica filtro SVG.

Come aggiungere filtri SVG a Illustrator

Il set di filtri SVG di Illustrator è minimalista, ma puoi migliorarlo progettando i tuoi filtri o scaricando set preconfezionati di filtri SVG da fonti online. La progettazione di filtri implica la codifica, ma è fattibile se hai dimestichezza con l'HTML. Raccomando il tutorial su w3Schools per la creazione di filtri SVG. Oppure puoi acquistare set di filtri online e persino trovare alcuni bei set di filtri SVG gratuiti su Creationo .

Dopo aver acquistato o creato i tuoi filtri SVG, ecco come installarli in Illustrator:

Scegli Effetto → Filtri SVG → Importa filtro SVG.

Nella finestra di dialogo che si apre, individua e fai doppio clic sul file dei filtri SVG che hai creato o scaricato gratuitamente.
Il file che stai cercando dovrebbe essere un file SVG (più filtri sono raggruppati in un singolo file SVG).
I tuoi nuovi filtri sono ora disponibili nel sottomenu Filtri SVG.

Scegli Effetto → Filtri SVG per applicare i nuovi filtri agli oggetti selezionati.

Come passare il codice SVG da Illustrator a uno sviluppatore

Spesso la grafica SVG che crei in Illustrator viene consegnata a game designer, animatori, infografiche o altri output, dove gli sviluppatori lavoreranno con il codice dietro la grafica SVG. Come illustratore, non è necessario sapere come creare quel codice, ma potrebbe essere necessario sapere come ottenerlo e consegnarlo a uno sviluppatore. Ecco come.

Il percorso per esportare la grafica SVG come codice passa attraverso le funzioni di salvataggio di Illustrator. Il menu Salva ha opzioni (non facili da trovare) che esportano il tuo file come codice SVG. Probabilmente vorrai essere in comunicazione in tempo reale con lo sviluppatore dello schermo mentre generi quel codice perché diverse opzioni sono determinate da come verrà utilizzato quel codice:

Scegli File → Salva (o Salva con nome se stai salvando nuovamente un file).

Nella finestra di dialogo che si apre, seleziona SVG dal menu Formato.
Ignora l'opzione file SVGZ, che è per un file compresso che non viene visualizzato nei browser.

Fare clic su Salva per aprire la finestra di dialogo Opzioni SVG.

Scegli sempre SVG 1.1 nell'elenco a discesa Profili SVG. Altre versioni sono obsolete.

Se hai incorporato o collegato immagini nel tuo file SVG, scegli Incorpora dal menu a discesa Posizioni immagine. Tuttavia, consulta prima il tuo sviluppatore web in merito a questa scelta.

Seleziona Mantieni funzionalità di modifica di Illustrator per rendere il file modificabile in Illustrator.
Questa scelta aumenta le dimensioni del file ma ti consente di lavorare con un singolo file SVG che puoi modificare, aggiornare e condividere con gli sviluppatori web.

Se viene visualizzato il pulsante Altre opzioni, fai clic su di esso per accedere alle opzioni avanzate. e fai le tue scelte
Essenzialmente, le diverse opzioni generano CSS con il tuo file che definisce le proprietà nei seguenti modi. Consulta il tuo compagno di squadra di sviluppatori web su come definire queste proprietà CSS:

• Gli attributi di presentazione incorporano lo stile nel codice SVG. Questa opzione è la più semplice e predefinita. Usalo se non collabori con uno sviluppatore web o di app.
• Le due opzioni degli attributi di stile si basano su CSS per gestire lo stile ove possibile.
• Style Elements genera selettori di stile di classe per lo stile.
• L' opzione Includi stili non utilizzati genera codice che probabilmente aumenta la dimensione del file SVG senza aggiungere valore funzionale.

Deseleziona le cinque caselle di controllo nella parte inferiore della finestra di dialogo Opzioni SVG, a meno che il tuo partner sviluppatore non richieda di selezionarle.
Queste opzioni sono per applicazioni altamente specializzate.

Per generare codice SVG in base alle selezioni effettuate nella finestra di dialogo Opzioni SVG, fare clic sul pulsante Codice SVG .
Il codice SVG generato viene visualizzato nell'editor di testo del sistema operativo. Puoi salvare quel codice come file di testo utilizzando l'editor di testo del tuo sistema operativo e consegnare il file a uno sviluppatore.

Dopo aver generato il codice, fai clic su OK per salvare il file.
Puoi riaprire e modificare questo file in Illustrator.