Come ottenere risultati ottimali nella creazione di grafica per il Web

  1. Guida utente di Illustrator
  2. Scoprire Illustrator
    1. Introduzione a Illustrator
      1. Novità di Illustrator
      2. Domande frequenti
      3. Requisiti di sistema per Illustrator
      4. Illustrator per Apple Silicon
    2. Area di lavoro
      1. Nozioni di base sull’area di lavoro
      2. Creare documenti
      3. StrumentiScelte rapide da tastiera predefinite | Illustrator
      4. Personalizzare le scelte rapide da tastiera
      5. Tavole da disegno
      6. Personalizzazione dell’area di lavoro
      7. Pannello Proprietà
      8. Impostare le preferenze
      9. Area di lavoro Tocco
      10. Supporto di Microsoft Surface Dial in Illustrator
      11. Ripristino, annullamento e automazione
      12. Ruota vista
      13. Righelli, griglie e guide
      14. Accesso facilitato in Illustrator
      15. Modalità protetta
      16. Visualizzare la grafica
      17. Usare la Touch Bar con Illustrator
      18. File e modelli
      19. Sincronizzare le impostazioni con Adobe Creative Cloud
    3. Strumenti in Illustrator
      1. Selezione
        1. Panoramica
        2. Selezione
        3. Selezione diretta
        4. Lazo
      2. Navigazione
        1. Panoramica
        2. Zoom
        3. Ruota vista
      3. Pittura
        1. Panoramica
        2. Sfumatura
        3. Crea forme
      4. Testo
        1. Panoramica
        2. Testo
        3. Testo su tracciato
  3. Illustrator per iPad
    1. Introduzione a Illustrator per iPad
      1. Panoramica di Illustrator per iPad
      2. Domande frequenti su Illustrator per iPad
      3. Requisiti di sistema | Illustrator per iPad
      4. Cosa è possibile fare con Illustrator per iPad
    2. Area di lavoro
      1. Area di lavoro di Illustrator per iPad
      2. Scelte rapide tocco e gesti
      3. Scelte rapide da tastiera per Illustrator per iPad
      4. Gestire le impostazioni dell'app
    3. Documenti
      1. Utilizzare i documenti in Illustrator per iPad
      2. Importazione di documenti Photoshop e Fresco
    4. Selezionare e disporre oggetti
      1. Creare oggetti ripetuti
      2. Fusione di oggetti
    5. Disegno
      1. Disegnare e modificare i tracciati
      2. Disegnare e modificare le forme
    6. Testo
      1. Utilizzo di testo e font
      2. Creare progetti di testo lungo un tracciato
      3. Aggiungere i propri font
    7. Utilizzo delle immagini
      1. Utilizzo delle immagini
    8. Colore
      1. Applicare colori e sfumature
  4. Documenti cloud
    1. Nozioni di base
      1. Utilizzare i documenti cloud di Illustrator
      2. Condividere e collaborare sui documenti cloud di Illustrator
      3. Aggiornare l'archiviazione cloud per Adobe Illustrator
      4. Documenti cloud di Illustrator | Domande frequenti
    2. Risoluzione dei problemi
      1. Risoluzione dei problemi di creazione o salvataggio dei documenti cloud di Illustrator
      2. Risoluzione dei problemi relativi ai documenti cloud di Illustrator
  5. Aggiunta e modifica di contenuti
    1. Disegno
      1. Nozioni di base sul disegno
      2. Modificare i tracciati
      3. Creare un disegno con perfezionamento pixel applicato
      4. Disegnare con lo strumento Penna, Curvatura o Matita
      5. Disegnare linee e forme semplici
      6. Ricalco immagine
      7. Semplificare un tracciato
      8. Definire le griglie prospettiche
      9. Strumenti simboli e set di simboli
      10. Regolare i segmenti di tracciato
      11. Disegna un fiore in 5 semplici passaggi
      12. Disegno in prospettiva
      13. Simboli
      14. Disegnare tracciati allineati ai pixel per i flussi di lavoro Web
    2. Effetti 3D e materiali Adobe Substance
      1. Informazioni sugli effetti 3D in Illustrator
      2. Creare grafica 3D
      3. Creare oggetti 3D
      4. Creare testo 3D
    3. Colore
      1. Il colore
      2. Selezionare i colori
      3. Usare e creare i campioni
      4. Regolare i colori
      5. Utilizzare il pannello Temi Adobe Color
      6. Gruppi di colori (armonie)
      7. Pannello Temi colore
      8. Ricolorare il disegno
    4. Colorare
      1. Pittura
      2. Colorare con riempimenti e tracce
      3. Gruppi di pittura dinamica
      4. Sfumature
      5. Pennelli
      6. Metodi di trasparenza e fusione
      7. Applicare la traccia a un oggetto
      8. Creare e modificare i pattern
      9. Trame
      10. Pattern
    5. Selezionare e disporre oggetti
      1. Selezionare gli oggetti
      2. Livelli
      3. Raggruppare ed espandere gli oggetti
      4. Spostare, allineare e distribuire gli oggetti
      5. Sovrapporre gli oggetti    
      6. Bloccare, nascondere ed eliminare gli oggetti
      7. Duplicare gli oggetti
      8. Ruotare e riflettere gli oggetti
    6. Rimodellare oggetti
      1. Ritagliare le immagini
      2. Trasformare gli oggetti
      3. Combinare più oggetti
      4. Tagliare, dividere e rifilare gli oggetti
      5. Alterazione marionetta
      6. Ridimensionare, inclinare e distorcere gli oggetti
      7. Fusione di oggetti
      8. Rimodellare con gli involucri
      9. Rimodellare gli oggetti con gli effetti
      10. Creare nuove forme con gli strumenti Shaper e Crea forme
      11. Lavorare con gli angoli dinamici
      12. Flussi di lavoro migliorati per rimodellare gli oggetti con supporto touch
      13. Modificare le maschere di ritaglio
      14. Forme dinamiche
      15. Creare forme con lo strumento Crea forme
      16. Modifica globale
    7. Testo
      1. Creare il testo
      2. Font e composizione tipografica
      3. Tipo di formato
      4. Importare ed esportare il testo
      5. Formattare i paragrafi
      6. Caratteri speciali
      7. Creare testo su un tracciato
      8. Stili di carattere e di paragrafo
      9. Tabulazioni
      10. Testo e composizione tipografica
      11. Trovare i font mancanti (flusso di lavoro Typekit)
      12. Aggiornare testo da Illustrator 10
      13. Testo in arabo e in ebraico
      14. Font | Domande frequenti e suggerimenti per la risoluzione dei problemi
      15. Creazione di un effetto di testo 3D
      16. Progettazioni di composizione tipografica creativa
      17. Ridimensionare e ruotare il testo
      18. Spaziatura tra righe e caratteri
      19. Sillabazione e interruzioni di riga
      20. Miglioramenti del testo
      21. Dizionari per il controllo ortografico e la sillabazione
      22. Formattare i caratteri asiatici
      23. Modulo di composizione per scritture asiatiche
      24. Creare progettazioni di testo con oggetti di fusione
      25. Creare un poster di testo utilizzando Ricalco immagine
    8. Creare effetti speciali
      1. Utilizzo degli effetti
      2. Stili di grafica
      3. Creare un’ombra esterna
      4. Attributi di aspetto
      5. Creare schizzi e mosaici
      6. Ombre esterne, bagliori e bordi sfocati
      7. Riepilogo degli effetti
    9. Grafica per il Web
      1. Come ottenere risultati ottimali nella creazione di grafica per il Web
      2. Grafici
      3. SVG
      4. Creare animazioni
      5. Sezioni e mappe immagini
  6. Importare, esportare e salvare
    1. Importazione
      1. Importare i file di grafica
      2. Importare immagini bitmap
      3. Importare immagini di Photoshop
      4. Inserire più file | Illustrator CC
      5. Scorporare le immagini
      6. Importare i file Adobe PDF
      7. Importare file EPS, DCS e AutoCAD
      8. Informazioni sui collegamenti
    2. Creative Cloud Libraries in Illustrator 
      1. Creative Cloud Libraries in Illustrator
    3. Salva
      1. Salvare un disegno
    4. Esporta
      1. Esportare un disegno
      2. Raccolta delle risorse ed esportazione in blocco
      3. Creare pacchetti di file
      4. Creare file Adobe PDF
      5. Estrarre il codice CSS | Illustrator CC
      6. Opzioni Adobe PDF
      7. Informazioni file e metadati
  7. Stampa
    1. Preparare la stampa
      1. Impostare i documenti per la stampa
      2. Modificare le dimensioni e l’orientamento della pagina
      3. Specificare gli indicatori di taglio per rifilare o allineare
      4. Introduzione al quadro di grandi dimensioni
    2. Stampa
      1. Sovrastampa
      2. Stampare con la gestione colore
      3. Stampa PostScript
      4. Predefiniti di stampa
      5. Segni di stampa e pagine al vivo
      6. Stampare e salvare un disegno con trasparenza
      7. Abbondanza
      8. Stampare le selezioni colore
      9. Stampare sfumature, trame e fusioni di colore
      10. Sovrastampa del bianco
  8. Automatizzare operazioni
    1. Unione dei dati mediante il pannello Variabili
    2. Automazione con script
    3. Automazione con le azioni
  9. Risoluzione dei problemi 
    1. Problemi di arresto anomalo all’avvio
    2. Recuperare i file dopo l'arresto anomalo
    3. Problemi relativi ai file
    4. Problemi relativi ai driver del dispositivo GPU
    5. Problemi dei dispositivi Wacom
    6. Problemi relativi ai file DLL
    7. Problemi relativi alla memoria
    8. Problema del file delle preferenze
    9. Problemi di font
    10. Problemi con la stampante
    11. Condividere il rapporto sugli arresti anomali con Adobe

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.

La grafica per il 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, 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.

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.

Nota:

Illustrator offre molti template creati specificatamente per Internet, tra cui banner e pagine Web. Per selezionare un template, scegli 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, 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.

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.

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.

  • 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.

Logo Adobe

Accedi al tuo account