Share
Lo scopo della funzione Salva per Web in Adobe Illustrator è ottimizzare la grafica da utilizzare su un sito Web o su un'altra schermata, come un telefono di tablet. La parola "ottimizzare" si riferisce al bilanciamento ottimale tra dimensione del file e qualità. Vogliamo file di piccole dimensioni in modo che si caricino rapidamente su una pagina Web, ma non vogliamo sacrificare il loro aspetto. Salva per Web ti consente di vedere in anteprima come apparirà una grafica vettoriale ottimizzata, in modo da poter scegliere il miglior compromesso.
In questo articolo, esaminerò i formati di file disponibili in Salva per Web e mostreremo quali formati sono più adatti per diversi tipi di opere d'arte.
Accedi al Salva per Web dialogo sotto il File menu. Save for Web è quasi un'applicazione in sé e per sé e la finestra di dialogo occupa la maggior parte dello schermo.
Puoi scegliere di visualizzare l'anteprima delle tue opere in tre modi. Puoi semplicemente mostrare l'originale da solo. Questo sembra piuttosto inutile, tuttavia, perché probabilmente vorrai vedere come apparirà la grafica una volta ottimizzata. Puoi mostrare l'anteprima ottimizzata da solo o puoi scegliere 2-up, che ti darà anteprime affiancate. È possibile fare clic su uno dei due riquadri per regolarne le impostazioni. Nell'immagine qui sotto, l'originale è a sinistra e la versione ottimizzata (in questo caso, come GIF) è sulla destra.
Puoi regolare le dimensioni dell'anteprima nel menu a discesa in basso a sinistra e puoi anche utilizzare scorciatoie da tastiera familiari come Comando / controllo-0 per adattare l'opera d'arte nella finestra, o Comando / controllo-plus o meno per aumentare o diminuire l'ingrandimento.
Cliccando sul Anteprima il pulsante aprirà l'immagine ottimizzata nel tuo browser predefinito. Se vuoi vedere come appare in altri browser, puoi aggiungerne altri facendo clic sull'icona del piccolo globo accanto al pulsante Anteprima.
Una delle sezioni più importanti dell'interfaccia di Salva per Web è la dimensione del file. Sotto ogni anteprima è il tipo di file e le sue rispettive dimensioni. Quindi nell'immagine qui sotto, l'originale EPS è a sinistra, con una dimensione del file di 2,44 M. La GIF ottimizzata è sulla destra, con una dimensione del file molto più piccola di circa 39K. Poiché l'obiettivo di Save for Web è trovare l'equilibrio ideale tra dimensioni e qualità, guarderai spesso questi numeri.
GIF è uno dei formati più vecchi e più usati sul Web. È ideale per le immagini con aree di colore piatto, come in questo esempio. Lo spazio colore GIF è il colore indicizzato. Ciò consente di specificare un numero esatto di colori nella tabella dei colori, in modo da poter utilizzare solo quelli necessari, riducendo così la dimensione complessiva del file.
La finestra di dialogo Salva per Web ha diversi preset GIF. Scegli diverse impostazioni e tieni d'occhio l'immagine e la dimensione del file risultante. Nell'immagine qui sotto, ho usato un preset che ha 128 colori. Come puoi vedere, l'immagine sembra buona e la dimensione del file è 37.72K.
Nel prossimo esempio, ho scelto solo 8 colori. Puoi vedere che la dimensione del file è ora di 23,3 K. Si tratta di un risparmio significativo, ma l'immagine sta iniziando a perdere qualità. I bordi sono ruvidi perché non ci sono abbastanza colori per riempire le transizioni tra ogni forma. Anche se nell'illustrazione sono presenti solo cinque colori: tre tonalità di blu, giallo e bianco, Illustrator utilizza più colori nel processo di anti-aliasing in modo che i bordi e le curve appaiano uniformi.
I colori GIF possono essere limitati a quelli considerati "sicuri per il Web". Al giorno d'oggi questa non è una vera preoccupazione, ora che i monitor possono mostrare milioni di colori, ma c'è stato un momento in cui ai progettisti è stato consigliato di utilizzare solo i 216 colori condivisi dai sistemi Windows e Macintosh. Quindi, se volevi assicurarti che il tuo grafico fosse uguale su ogni piattaforma, limiterai i suoi colori a quella tavolozza. Nell'esempio qui sotto, ho usato il Tavolozza Web preimpostato, e puoi vedere come il colore azzurro si è spostato su un blu verdastro.
Una GIF può essere in bianco e nero e utilizza qualcosa chiamato dithering per simulare un tono continuo. Puoi scegliere diversi metodi di dithering, ma tutti hanno un aspetto decisamente anni '80.
Le GIF supportano un livello di trasparenza. Ciò significa che ogni pixel è solido o completamente trasparente: non utilizzeresti una GIF per un'immagine con un'ombra morbida o una sfumatura trasparente.
Accanto alla casella di spunta Trasparenza puoi scegliere un colore opaco. Questo aggiungerà un leggero contorno intorno all'immagine in quel colore. Quindi, se stai posizionando la GIF su uno sfondo colorato, puoi selezionare lo stesso colore del colore opaco. In questo modo la transizione tra la grafica e lo sfondo apparirà liscia.
È possibile scegliere di ritagliare l'immagine nella tavola da disegno, che renderà le dimensioni dei pixel del grafico salvato uguali a quelle della tavola da disegno di Illustrator. Oppure puoi scegliere di lasciare deselezionata questa casella, che limiterà l'immagine ai limiti della grafica vettoriale. Questa è l'impostazione che probabilmente userai la maggior parte del tempo, poiché non c'è bisogno di ulteriore trasparenza intorno all'immagine. Anche la dimensione del file risultante sarà più piccola.
Nella sezione Dimensione immagine puoi scegliere di ridurre o ingrandire la grafica ottimizzata. La nomenclatura è un po 'ambigua qui. Non si riferisce alla dimensione del file dell'immagine in kilobyte, ma alle dimensioni in pixel, espresse come larghezza e altezza.
È qui che Illustrator ha un vantaggio rispetto a un'applicazione raster o basata su pixel come Photoshop. Se si ingrandisce l'immagine per l'output ottimizzato, Illustrator utilizza le informazioni vettoriali nel file per l'ingrandimento e il grafico risultante è nitido e uniforme. Se si dovesse utilizzare Salva per Web in Photoshop e si tenta di ingrandire un'immagine raster, tuttavia, l'immagine ingrandita sembrerebbe sfocata.
Sotto i campi Dimensione immagine è presente un menu a discesa in cui è possibile selezionare il metodo di ottimizzazione. Se il tuo grafico è pesante per il testo, puoi scegliere Tipo ottimizzato. Negli esempi seguenti, puoi vedere la differenza tra l'immagine che è ottimizzata e quella che non ha alcuna ottimizzazione applicata.
La tabella dei colori contiene campioni per ogni colore che verrà contenuto nel grafico ottimizzato. In realtà puoi fare doppio clic su un campione e cambiarne il colore. Qui ho cambiato il giallo in rosa. Puoi vedere che il campione ora è metà giallo e metà rosa nella tavola dei colori, e quando passi il mouse su di esso, il suggerimento ti dà la suddivisione RGB per l'originale e per il nuovo colore. Ciò potrebbe essere utile se si salva una serie della stessa immagine e si desidera che un elemento sia di un colore diverso in ogni versione. Sostituendo il colore in Salva per Web, non è necessario modificare il vettore originale.
Sotto la tavola dei colori c'è una serie di icone che ti permettono di regolare ulteriormente il colore. Quando si seleziona un campione, è possibile renderlo trasparente, limitarlo a un colore sicuro Web, bloccarlo o eliminarlo. Un diamante all'interno di un campione di colore indica un colore sicuro per il Web e, quando si passa con il mouse su di esso, viene visualizzato il codice esadecimale.
Ci sono alcune altre impostazioni e pratiche che puoi utilizzare con le GIF. Ad esempio, puoi scegliere di interlacciare la GIF, che caricherà l'immagine in più passaggi in un browser. Questo metodo è stato sviluppato nei giorni in cui la maggior parte delle persone utilizzava connessioni dial-up lente. Un grafico interlacciato sembra caricare più velocemente di quanto non sia in realtà. Non ci sono molti motivi per usarlo oggi, specialmente con un file relativamente piccolo come una GIF. Le altre opzioni nelle impostazioni GIF sono altamente specializzate o alquanto antiquate, quindi non dedicherò più tempo a queste. Passiamo agli altri formati!
Il formato PNG (alcuni dicono "P-N-G" e altri lo pronunciano "ping") è spesso un'alternativa migliore alla GIF. PNG-8 è simile a GIF in quanto utilizza 256 colori, supporta la trasparenza a 1 bit e può usare il dithering. "8" significa che questa è un'immagine a 8 bit. La principale differenza tra i due è il modo in cui comprimono le informazioni dell'immagine. GIF usa un metodo "lossy", il che significa che alcuni dati vengono scartati (o "persi") per ottenere una dimensione di file più piccola. Il metodo PNG è senza perdita di dati, ma a causa del suo algoritmo di compressione, la dimensione dei file risultante è spesso significativamente più piccola di una GIF. Quindi perché dovresti usare una GIF, se PNG è meglio? Beh, non tutti i browser supportano il formato PNG (sto guardando te, Internet Explorer 6!). Ma più persone aggiornano ai nuovi browser, questo non è tanto un problema. Quindi vai avanti e prova PNG-8 su immagini che normalmente richiedono una GIF. La maggior parte delle opzioni per PNG-8 sono le stesse di quelle per GIF nella sezione precedente.
JPEG è stato originariamente sviluppato per comprimere le foto, e quindi è più adatto per i vettori con toni continui. I file JPEG sono a 24 bit e supportano quindi oltre 16 milioni di colori. La compressione JPEG è in perdita e l'immagine si degraderà se si tenta di comprimerla troppo. Nell'immagine sottostante, puoi iniziare a vedere "artefatti" di blocco, che sono indesiderabili. Scegli un'impostazione di qualità più alta finché non ottieni un'immagine più bella con una dimensione di file accettabile.
Puoi scegliere di caricare l'immagine in più passate selezionando Progressive, e puoi sfocare l'immagine per mitigare alcuni degli artefatti. Nessuno di questi metodi è ideale, né realmente necessario. Sono dei richiami ai giorni delle connessioni dial-up e delle macchine più lente.
Come con GIF e PNG-8, è possibile specificare una dimensione di pixel nel campo Dimensione immagine, selezionare il metodo di ottimizzazione e scegliere se ritagliare l'immagine nella tavola da disegno. Non esiste una tabella di colori, perché i JPEG sono in modalità RGB, non a colori indicizzati.
JPEG è adatto per immagini con tono continuo, ma non è così eccezionale per la grafica con aree più grandi di colore piatto. Nell'esempio seguente, il JPEG è sulla destra. Anche con l'impostazione di massima qualità, sembra peggiore della GIF e mostra alcuni artefatti.
PNG-24 è, come suggerisce il nome, un'immagine a 24 bit. In qualche modo, combina il meglio dei due mondi di GIF e JPEG, ed è un formato superiore. Come JPEG, può supportare milioni di colori. PNG-24 può anche contenere trasparenza alfa, quindi può essere utilizzato per grafici con bordi sfocati e ombre trasparenti. Tutti questi colori e trasparenze hanno un prezzo, tuttavia, in un file di dimensioni maggiori. Nell'esempio seguente, puoi vedere che un JPEG salvato con l'impostazione alta è quasi 22K, mentre il PNG è circa 95K. Ma la trasparenza consente di posizionare l'immagine PNG-24 su uno sfondo con motivi o con texture. Quindi, se hai bisogno di quel tipo di flessibilità, PNG-24 è la strada da percorrere.
Spero che tu abbia una migliore comprensione dei formati di file nella funzione Salva per Web di Illustrator. Ogni formato ha i suoi vantaggi e svantaggi, ma con alcuni test accurati, puoi trovare le migliori impostazioni per la tua grafica. Questo è uno strumento potente e può rendere il tuo flusso di lavoro sul Web molto più facile e veloce. Una volta determinate le impostazioni ideali per le immagini, è possibile salvarle come predefinite personalizzate. Quindi è possibile elaborare in batch intere cartelle piene di immagini simili in poco tempo.
La grafica vettoriale in questo articolo è stata acquistata da GraphicRiver: vettore Janitor, zucca vettoriale.
Accentsconagua