La grafica SVG di Adobe Illustrator CC viene raramente consegnata a designer digitali con sfondi. Normalmente la grafica fluttua sopra qualsiasi sfondo esistente nel sito Web, nell'app, nell'animazione o nel contesto interattivo.
Prima di discutere cosa implica eliminare lo sfondo dietro la grafica SVG, concentrati sull'applicazione della trasparenza alla grafica SVG. È necessario definire l'opacità della grafica utilizzando il pannello Trasparenza. Ad esempio, alla forma gialla nella figura è stata applicata una trasparenza del 50 percento e puoi vedere la trasparenza in vigore. E sì, quell'immagine è un file SVG, con tutte le funzionalità leggere, a caricamento rapido e infinitamente scalabili integrate in SVG.
Una forma SVG semi-opaca su uno sfondo colorato.
I designer sono abituati a pensare in termini di sfondi resi trasparenti o visibili. Pensiamo a buttare giù uno sfondo. Le immagini PNG e GIF funzionano così: crei con uno sfondo o scegli uno sfondo trasparente in un programma come Illustrator o Photoshop per eliminare quello sfondo.
Con GIF e PNG, puoi avere un colore trasparente che consente ai colori di sfondo o alle immagini di essere visualizzati nelle pagine web. Ma la logica di eliminare lo sfondo è diversa in un file SVG rispetto a PNG e GIF. In sostanza, non esiste una grafica SVG con uno sfondo non trasparente perché non c'è uno sfondo. In altre parole: per impostazione predefinita la grafica SVG salva ed esporta senza sfondo.
Allora, qual'è il problema? Bene, è facile finire accidentalmente con uno sfondo trasparente durante il salvataggio o l'esportazione di file SVG! La figura seguente potrebbe avere uno sfondo bianco o uno sfondo trasparente. Non puoi dirlo solo guardando lo schermo di Illustrator; devi scegliere Visualizza → Mostra griglia di trasparenza.
Questo grafico potrebbe avere uno sfondo bianco o potrebbe non avere uno sfondo.
Con la griglia di trasparenza abilitata, come mostrato, puoi vedere che l'uccello ha un rettangolo bianco dietro di esso e che lo sfondo bianco "andrà con" l'immagine se salvi il file come SVG o lo esporti come SVG.
La visualizzazione della griglia di trasparenza rivela un rettangolo bianco dietro l'elemento grafico.
Permettetemi di enfatizzare e far luce su questo da un'altra angolazione. Quando vado a esportare questa immagine come SVG, la finestra di dialogo Esporta per schermi, mostrata, non ha un'opzione per selezionare un colore di trasparenza.
Non puoi scegliere un colore di trasparenza in SVG perché non c'è il colore di sfondo.
Incontro spesso designer che insistono nel mettere un rettangolo di sfondo dietro la loro opera d'arte destinata a SVG in modo che possano vedere come apparirà la grafica quando viene sfondo con un colore nel supporto di destinazione (come una pagina web o un'app). Va bene, li avverto, purché ti ricordi di rimuovere quel rettangolo di sfondo quando salvi o esporti l'SVG. E nell'odierno mondo ad alta pressione, alta produttività e rapidi tempi di consegna, chi ha bisogno di un'altra cosa da ricordare?
Una soluzione migliore è definire una “griglia” di trasparenza con un unico colore che corrisponda all'ambiente in cui verrà inserita la grafica. Perché metto la griglia tra virgolette? Perché questa tecnica imbroglia: con essa, definisci entrambi i colori della griglia come lo stesso colore, simulando efficacemente una pagina Web o un colore di sfondo dell'app.
Per utilizzare questa tecnica per creare uno sfondo personalizzato mentre sviluppi la grafica SVG, segui questi passaggi:
Scegli File → Configurazione documento.
Nella scheda Generale, trova la sezione Opzioni di trasparenza e sovrastampa.
Le modifiche desiderate sono controllate in questa sezione della finestra di dialogo.
Non preoccuparti di definire la dimensione della griglia perché stai effettivamente facendo a meno della griglia.
Nella sezione Griglia trasparenza della finestra di dialogo, fare clic sul primo dei due pannelli del colore della griglia e scegliere un colore di sfondo utilizzando una delle varie tavolozze di colori nel menu a comparsa Colori mostrato nella figura seguente.
Nessuna di queste tavolozze di colori è particolarmente adatta al digitale, tra l'altro. Non esiste una tavolozza per RGBA, esadecimale o altri formati di colori Web standard, ma il contagocce per la selezione dei colori può aiutarti a ottenere il colore di sfondo che desideri abbinare.
Definire un colore di sfondo in anteprima con una griglia di trasparenza.
Seleziona il secondo dei due pannelli di colore della griglia e assegnagli lo stesso colore.
Ricorda, puoi usare il contagocce del selettore di colori per afferrare quel colore.
Fare clic su OK nella finestra di dialogo Imposta documento.
Tutto quello che ho fatto nella precedente serie di passaggi è stato definire come viene visualizzata la griglia di trasparenza quando è abilitata . Quindi, se la tua griglia di trasparenza non è abilitata, scegli Visualizza → Griglia di trasparenza.
In questa figura, ho selezionato la tavola da disegno con la grafica e sto visualizzando in anteprima il progetto su un colore di sfondo simulato.
Anteprima del colore di sfondo dell'output con una griglia di trasparenza personalizzata.
Quando la trasparenza (come il 50 percento di opacità) o gli effetti di trasparenza come brucia, scurisci o moltiplica il colore vengono applicati alla grafica SVG, tali effetti mantengono la scalabilità di SVG.
Questa figura mostra lo stesso grafico (tre rettangoli arancioni semitrasparenti) esportato come file PNG (in alto) e SVG. Puoi vedere come il file PNG diminuisce di qualità quando lo ingrandisco in un browser. Quello che non puoi vedere è che il file PNG è grande quasi il doppio di quello SVG.
Confronto dell'output PNG (in alto) con SVG quando viene applicata la trasparenza
Ecco un riepilogo dei vantaggi dell'utilizzo di SVG per gli effetti di trasparenza:
A proposito, se sei curioso di sapere come appare il codice SVG generato per questo set di rettangoli e quanto sia facile per uno sviluppatore web o app lavorarci, ecco il codice per la prima delle tre caselle SVG , con il 60% di opacità applicato:
<="" codice="">
Infine, se desideri che lo sfondo del tuo SVG abbia un riempimento colorato, puoi farlo anche tramite le Proprietà del documento menù. Basta fare clic sulla striscia bianca posizionata accanto al punto in cui è indicato Colore di sfondo. Sullo schermo verrà visualizzato un selettore di colori.
È importante notare che lo sfondo SVG continuerà a essere trasparente nonostante il riempimento colorato finché la colonna A (che rappresenta il trasparenza del colore) rimane a 0. Se desideri che il documento abbia effettivamente quel colore di sfondo (anche nelle esportazioni), puoi aumentare la colonna da 0 a 100.
E questo dovrebbe bastare per lavorare con gli sfondi in Inkscape. Se hai domande che non sono state affrontate in questo post, lascia un commento qui sotto e ti risponderò se posso aiutarti.
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 […]
