Come ottenere risultati ottimali nella creazione di grafica per il Web

Illustrator offre diversi strumenti per la creazione di layout per pagine Web nonché per la creazione e l’ottimizzazione di grafica per il Web. Ad esempio, usate colori sicuri per il Web, trovate un equilibrio tra qualità dell’immagine e dimensioni del file e scegli il formato di file più adatto per la grafica creata. La grafica per il Web vi permette di usare sezioni e mappe immagini, oltre a svariate opzioni di ottimizzazione che garantiscono una perfetta visualizzazione dei file sul Web.

Quando crei della grafica per il Web, devi considerare questioni diverse da quelle per la stampa. 

Per ottenere risultati ottimali per la grafica, tieni presenti le seguenti tre indicazioni:

Usate colori sicuri per il Web.

Spesso il colore è l’aspetto principale del disegno. Tuttavia, i colori che vedete sulla tavola da disegno non sono necessariamente gli stessi che appariranno in un browser Web nel sistema di un altro utente. Due precauzioni possono contribuire a evitare il dithering (ovvero la simulazione dei colori non disponibili) e altri problemi riguardanti i colori quando crei grafica per Internet. Innanzitutto, lavora sempre con il metodo di colore RGB. In secondo luogo, usa un colore sicuro per il Web.

Optate per il giusto compromesso tra qualità dell’immagine e dimensioni del file.

Creare file grafici di dimensioni ridotte è essenziale per la distribuzione delle immagini su Internet. I file di piccole dimensioni possono essere memorizzati e trasmessi dai server Web in modo più efficiente e richiedono tempi di scaricamento più brevi. Puoi visualizzare le dimensioni e il tempo di scaricamento stimato della grafica per Internet nella finestra di dialogo Salva per Web e dispositivi.

Scegli il formato di file più adatto per la grafica.

Tipi diversi di grafica devono essere salvati in formati diversi per essere visualizzati al meglio e produrre file di dimensioni adatte al Web. Per informazioni più dettagliate sui formati specifici, consulta Opzioni di ottimizzazione della grafica per Web.

La modalità Anteprima pixel

Per consentire ai progettisti di grafica per il Web di creare disegni con precisione a livello dei pixel, Illustrator ha una nuova funzione di allineamento ai pixel. Quando per un oggetto viene abilitata la proprietà di allineamento ai pixel, tutti i segmenti orizzontali e verticali dell’oggetto vengono allineati alla griglia dei pixel, in modo da ottenere tratti nitidi. Fintanto che questa proprietà resta impostata, a seguito di qualsiasi trasformazione l’oggetto viene riallineato alla griglia dei pixel in base alle sue nuove coordinate. Per abilitare questa proprietà, selezionate l’opzione Allinea a griglia pixel nel pannello Trasforma. Illustrator fornisce inoltre l’opzione Allinea nuovi oggetti a griglia pixel a livello di documento, attivata per impostazione predefinita per i documenti Web. Quando questa proprietà è attivata, a tutti i nuovi oggetti disegnati viene applicata per impostazione predefinita la proprietà di allineamento ai pixel.

Per ulteriori informazioni, consulta Disegno di tracciati allineati ai pixel per i flussi di lavoro Web.

Quando salvi un disegno in un formato bitmap, come JPEG, GIF o PNG, Illustrator rasterizza il disegno a 72 pixel per indice. Potete vedere come appariranno gli oggetti dopo la rasterizzazione scegliendo Visualizza > Anteprima pixel. Ciò è particolarmente utile per controllare in modo preciso la posizione, dimensione e anti-alias di oggetti  rasterizzati .

Per comprendere come Illustrator divide gli oggetti in pixel, aprite un file che contiene oggetti vettoriali, scegli Visualizza > Anteprima pixel e ingrandite il disegno in modo da visualizzare i singoli pixel. Il posizionamento dei pixel è determinato da una griglia pixel che suddivide la tavola da disegno in incrementi di 1 punto (1/72 di pollice). Potete visualizzare la griglia pixel se ingrandite la visualizzazione  al  600%. Se spostate, aggiungete o trasformate un oggetto, questo si allinea alla griglia dei pixel. Di conseguenza, l’eventuale effetto di anti-alias lungo i contorni “calamitati” degli oggetti (normalmente i margini sinistro e superiore) scompare. Ora deselezionate il comando Visualizza > Allinea al pixel e spostate l’oggetto. Questa volta sarete in grado di posizionare l’oggetto tra le linee della griglia. Osservate come questo ha effetto sull’anti-alias dell’oggetto. Come puoi osservare,  regolazioni molto  piccole possono avere effetti sulla rasterizzazione di un oggetto.

Suggerimenti per la creazione di immagini Illustrator per i dispositivi mobili

Per ottimizzare il contenuto grafico per dispositivi mobili, salva le opere grafiche create in Illustrator in uno dei formati SVG, compreso SVG‑t, progettato in modo specifico per i dispositivi mobili.

Utilizza i suggerimenti riportati di seguito per accertarti che le immagini create in Illustrator vengano visualizzate correttamente sui dispositivi mobili:

• Utilizza lo standard SVG per creare il contenuto. L’utilizzo del formato SVG per la pubblicazione di grafica vettoriale sui dispositivi mobili garantisce una dimensione dei file ridotta, l’indipendenza dal display, un maggiore controllo del colore, la possibilità di utilizzare lo zoom e di modificare il testo (all’interno del codice di origine). Inoltre, dal momento che il formato SVG è basato su XML, puoi incorporare elementi interattivi nelle immagini, ad esempio l’evidenziazione, i suggerimenti, gli effetti speciali, l’audio e le animazioni.

• Lavora fin dall’inizio con le dimensioni finali del dispositivo o dei dispositivi mobili di destinazione. Sebbene il formato SVG sia scalabile, se lavori con le dimensioni corrette sarai certo che la grafica finale sarà ottimizzata dal punto di vista della qualità e delle dimensioni per il dispositivo o i dispositivi di destinazione.

• Imposta la modalità di colore di Illustrator su RGB. Il formato SVG viene visualizzato sui dispositivi con schermo raster RGB, ad esempio un monitor.

• Per ridurre le dimensioni del file, prova a ridurre il numero di oggetti (compresi i gruppi) o a renderli meno complessi (meno punti). L’utilizzo di un numero di punti minore riduce in modo significativo la quantità di informazioni testuali necessarie per descrivere l’opera grafica nel file SVG. Per ridurre i punti, seleziona Oggetto > Percorso > Semplifica e prova combinazioni diverse per trovare un punto di equilibrio tra qualità e numero di punti.

• Se possibile, utilizza i simboli. I simboli definiscono i vettori che descrivono l’oggetto una sola volta e non più volte. L’utilizzo dei simboli risulta utile se l’opera grafica contiene oggetti come sfondi di pulsante che vengono riutilizzati.

• Durante l’animazione degli elementi grafici, limita il numero di oggetti utilizzati e se possibile, prova a riutilizzare gli oggetti in modo da ridurre le dimensioni del file. Applica le animazioni ai gruppi piuttosto che ai singoli oggetti in modo da evitare ripetizioni del codice.

• Prendi in considerazione l’utilizzo di SVGZ, la versione compressa gzipped di SVG. In base al contenuto, la compressione può ridurre in modo significativo le dimensioni del file. Solitamente il testo è soggetto a un’alta compressione ma il contenuto codificato con codice binario, ad esempio le immagini raster incorporate (file JPEG, PNG o GIF), non è soggetto a una compressione significativa. I file SVGZ possono essere decompressi con qualsiasi applicazione che decomprime i file compressi con gzip. Per utilizzare correttamente i file SGVZ, verifica che il dispositivo mobile di destinazione sia in grado di decomprimere i file gzip.