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 scegliete 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. Inoltre con Adobe Device Central potrete garantire una perfetta visualizzazione dei file sul Web.

La grafica per il Web

Quando create della grafica per il Web, dovete considerare questioni diverse da quelle per la stampa. 

Per ottenere risultati ottimali per la grafica, tenete 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 create grafica per Internet. Innanzitutto, lavorate sempre con il metodo di colore RGB. In secondo luogo, usate 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. Potete visualizzare le dimensioni e il tempo di scaricamento stimato della grafica per Internet nella finestra di dialogo Salva per Web e dispositivi.

Scegliete 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, consultate Opzioni di ottimizzazione della grafica per Web.

Nota:

Illustrator offre molti template creati specificatamente per Internet, tra cui banner e pagine Web. Per selezionare un template, scegliete File > Nuovo da template.

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, consultate Disegno di tracciati allineati ai pixel per i flussi di lavoro Web.

Quando salvate 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, scegliete 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 potete osservare, regolazioni molto piccole possono avere effetti sulla rasterizzazione di un oggetto.

Anteprima pixel disattivata (in alto) e attivata (in basso)
Anteprima pixel disattivata (in alto) e attivata (in basso)

Nota:

La griglia di pixel si basa sull’origine del righello (0,0). Spostando il punto zero del righello, si cambia il modo in cui Illustrator rasterizza i disegni.

Utilizzo di Adobe Device Central con Illustrator

Device Central consente agli utenti di Illustrator di avere un’anteprima di come i file Illustrator appariranno su una serie di dispositivi mobili.

Ad esempio, un grafico può utilizzare Illustrator per creare un wallpaper per i telefoni cellulari. Dopo aver creato il file, il grafico può facilmente provarlo su una varietà di telefoni. Il grafico può quindi apportare delle modifiche, ad esempio modificare il file in modo che venga visualizzato in modo ottimale su un certo numero di telefoni o creare due file separati in modo da comprendere una gamma più ampia di dimensioni dello schermo dei telefoni.

Accedere a Illustrator da Adobe Device Central

  1. Avviate Device Central.
  2. Selezionate File > Nuovo documento in > Illustrator.

    In Device Central, il pannello Nuovo documento viene visualizzato con le opzioni corrette per la creazione di un nuovo documento per dispositivo mobile nell’applicazione selezionata.

  3. Apportate eventuali modifiche, ad esempio selezionate opzioni di versione lettore, dimensioni di visualizzazione, versione Flash o tipo di contenuto.
  4. Effettuate una delle seguenti operazioni:
    • Selezionate l’opzione Dimensioni personalizzate per tutti i dispositivi selezionati e aggiungete un’altezza e una larghezza (in pixel).

    • Selezionate uno o più dispositivi dall’elenco Gruppi di dispositivi o Dispositivi disponibili.

  5. Se avete selezionato più documenti, la dimensione viene selezionata automaticamente. Se desiderate selezionare un’altra dimensione, fate clic su un dispositivo o un gruppo di dispositivi diverso.
  6. Fate clic su Crea.

    Viene aperta l’applicazione selezionata con un nuovo documento per dispositivo mobile pronto per essere modificato.

Creare contenuti per dispositivi mobili con Adobe Device Central e Illustrator

  1. In Illustrator selezionate File > Nuovo.
  2. In Nuovo profilo documento, selezionate Portatili e dispositivi.
  3. Fate clic su Device Central per chiudere la finestra di dialogo in Illustrator e aprire Device Central.
  4. Selezionate un tipo di contenuto.

    L’elenco Dispositivi disponibili a sinistra viene aggiornato e visualizza i dispositivi che supportano il tipo di contenuto selezionato.

  5. In Device Central, selezionate un dispositivo, più dispositivi o un gruppo di dispositivi.

    In base al dispositivo o ai dispositivi selezionati e al tipo di contenuto, Device Central suggerisce una o più dimensioni della tavola da disegno da creare. Per creare un documento per volta, selezionate una dimensione di documento suggerita (oppure selezionate l’opzione Dimensioni personalizzate per tutti i dispositivi selezionati e immettete i valori personalizzati di larghezza e altezza).

  6. Fate clic su Crea.

    In Illustrator viene aperto un file AI vuoto delle dimensioni specificate. Per impostazione predefinita, per il nuovo file vengono impostati i seguenti parametri:

    • Modalità colore: RGB

    • Risoluzione raster: 72 ppi

  7. Inserite il contenuto nel file AI vuoto in Illustrator.
  8. Al termine, scegliete File > Salva per Web e dispositivi.
  9. Nella finestra di dialogo Salva per Web e dispositivi, selezionate il formato desiderato e modificate le altre impostazioni di esportazione in base alle vostre esigenze.
  10. Fate clic su Device Central.

    Nella scheda Emulatore di Device Central viene visualizzato un file temporaneo con le impostazioni di esportazione specificate. Per continuare il test, fate doppio clic sul nome di un altro dispositivo negli elenchi Gruppi di dispositivi o Dispositivi disponibili.

  11. Se dopo aver eseguito l’anteprima del file in Device Central dovete apportate delle modifiche, tornate in Illustrator.
  12. Nella finestra di dialogo Salva per Web e dispositivi di Illustrator, apportate le modifiche, ad esempio selezionando un formato o una qualità di esportazione diversi.
  13. Per eseguire nuovamente il test del file con le nuove impostazioni di esportazione, fate clic sul pulsante Device Central.
  14. Se siete soddisfatti del risultato, fate clic su Salva nella finestra di dialogo Salva per Web e dispositivi di Illustrator.

    Nota:

    Per aprire semplicemente Device Central da Illustrator (invece di creare un file e di sottoporlo a test), selezionate File > Device Central.

Suggerimenti per la creazione di immagini Illustrator per i dispositivi mobili

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

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

  • Utilizzate 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, potete incorporare elementi interattivi nelle immagini, ad esempio l’evidenziazione, i suggerimenti, gli effetti speciali, l’audio e le animazioni.

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

  • Impostate 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, provate 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, selezionate Oggetto > Percorso > Semplifica e provate combinazioni diverse per trovare un punto di equilibrio tra qualità e numero di punti.

  • Se possibile, utilizzate 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, limitate il numero di oggetti utilizzati e se possibile, provate a riutilizzare gli oggetti in modo da ridurre le dimensioni del file. Applicate le animazioni ai gruppi piuttosto che ai singoli oggetti in modo da evitare ripetizioni del codice.

  • Prendete 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, verificate che il dispositivo mobile di destinazione sia in grado di decomprimere i file gzip.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online