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.
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:
Dopo aver scelto un filtro, fai clic su OK nel pannello Applica filtro SVG.
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.
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:
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.
Puoi utilizzare lo strumento Istantanea in Adobe Acrobat CS5 per selezionare sia testo che immagini e creare un'immagine di una determinata area all'interno di un file PDF. Il risultato viene comunemente chiamato screenshot di una sezione all'interno di un file PDF. Il risultato è un'immagine e il tuo testo non è […]
Progettato per ricercatori e scienziati, le capacità di misurazione in Photoshop CC sono piuttosto potenti. Puoi misurare qualsiasi cosa e contare il numero di qualsiasi cosa in un'immagine tecnica, magari da un microscopio o un telescopio. Se conosci la dimensione esatta di qualsiasi elemento in un'immagine, puoi scoprire praticamente qualsiasi cosa […]
Quando utilizzi gli strumenti Fluidifica in Adobe Creative Suite 5 (Adobe CS5) Illustrator, puoi piegare gli oggetti, renderli ondulati, appiccicosi o appuntiti, creando distorsioni da semplici a complesse. Gli strumenti Fluidifica possono realizzare tutti i tipi di distorsioni creative o stravaganti (a seconda di come lo guardi) ai tuoi oggetti. Voi […]
Quando hai del testo nel tuo progetto Adobe XD, puoi iniziare a modificare le proprietà del testo. Queste proprietà includono Famiglia di caratteri, Dimensione carattere, Spessore carattere, Allineamento, Spaziatura caratteri (crenatura e tracciamento), Interlinea (interlinea), Riempimento, Bordo (tratto), Ombra (ombra esterna) e Sfocatura sfondo. Quindi esaminiamo come vengono applicate queste proprietà. A proposito di leggibilità e carattere […]
Puoi utilizzare InDesign per creare e modificare la grafica del codice QR. I codici QR sono una forma di codice a barre in grado di memorizzare informazioni come parole, numeri, URL o altre forme di dati. L'utente esegue la scansione del codice QR utilizzando la fotocamera e il software su un dispositivo, come uno smartphone, e il software utilizza […]
Proprio come in Adobe Illustrator, le tavole da disegno di Photoshop offrono la possibilità di creare pagine o schermate separate all'interno di un documento. Questo può essere particolarmente utile se stai costruendo schermi per un'applicazione mobile o una piccola brochure. Puoi pensare a una tavola da disegno come a un tipo speciale di gruppo di livelli creato utilizzando il pannello Livelli. Suo […]
Avvolgere il testo in Adobe Illustrator CC non è esattamente come avvolgere un regalo: è più facile! Un ritorno a capo forza il testo a avvolgere un elemento grafico, come mostrato in questa figura. Questa caratteristica può aggiungere un po' di creatività a qualsiasi pezzo. L'elemento grafico sta costringendo il testo a avvolgerlo. Innanzitutto, crea […]
Quando si progetta in Adobe Illustrator CC, spesso è necessario che una forma abbia le dimensioni esatte (ad esempio, 2 x 3 pollici). Dopo aver creato una forma, il modo migliore per ridimensionarla a misure esatte è utilizzare il pannello Trasforma, mostrato in questa figura. Avere l'oggetto selezionato e quindi scegliere Finestra → Trasforma in […]
Scopri come applicare la trasparenza alla grafica SVG in Illustrator. Scopri come produrre SVG con sfondi trasparenti e applicare effetti di trasparenza.
Dopo aver importato le tue immagini in Adobe XD, non hai un grande controllo sulla modifica, ma puoi ridimensionare e ruotare le immagini proprio come faresti con qualsiasi altra forma. Puoi anche arrotondare facilmente gli angoli di un'immagine importata utilizzando i widget degli angoli. Mascherare le tue immagini Definendo una forma chiusa […]
