Guida utente Annulla

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. Barra degli strumenti
      4. Scelte rapide da tastiera predefinite
      5. Personalizzare le scelte rapide da tastiera
      6. Introduzione alle tavole disegno
      7. Gestire le tavole disegno
      8. Personalizzazione dell’area di lavoro
      9. Pannello Proprietà
      10. Impostare le preferenze
      11. Area di lavoro Tocco
      12. Supporto di Microsoft Surface Dial in Illustrator
      13. Ripristino, annullamento, cronologia e automazione
      14. Ruota vista
      15. Righelli, griglie e guide
      16. Accesso facilitato in Illustrator
      17. Modalità protetta
      18. Visualizzare la grafica
      19. Usare la Touch Bar con Illustrator
      20. File e modelli
    3. Strumenti in Illustrator
      1. Panoramica sugli strumenti
      2. Selezionare gli strumenti
        1. Selezione
        2. Selezione diretta
        3. Selezione gruppo
        4. Bacchetta magica
        5. Lazo
        6. Tavola disegno
      3. Strumenti di navigazione
        1. Mano
        2. Ruota vista
        3. Zoom
      4. Strumenti Pittura
        1. Sfumatura
        2. Trama
        3. Crea forme
      5. Strumenti di testo
        1. Testo
        2. Testo su un tracciato
        3. Testo verticale
      6. Strumenti di disegno
        1. Penna
        2. Aggiungi punto di ancoraggio
        3. Elimina punto di ancoraggio
        4. Punto di ancoraggio
        5. Curvatura
        6. Segmento linea
        7. Rettangolo
        8. Rettangolo arrotondato
        9. Ellisse
        10. Poligono
        11. Stella
        12. Pennello
        13. Pennello tracciato chiuso
        14. Matita
        15. Shaper
        16. Sezione
      7. Strumenti di modifica
        1. Rotazione
        2. Riflettere
        3. Scala
        4. Distorsione curvilinea
        5. Larghezza
        6. Trasformazione libera
        7. Contagocce
        8. Fusione
        9. Gomma
        10. Forbici
  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. Vettorizzazione di immagini raster
    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. Mappare l'immagine sugli oggetti 3D
      4. Creare oggetti 3D
      5. 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. Aggiungere testo e utilizzare gli oggetti di testo
      2. Creare elenchi puntati e numerati
      3. Gestire l'area di testo
      4. Font e composizione tipografica
      5. Tipo di formato
      6. Importare ed esportare il testo
      7. Formattare i paragrafi
      8. Caratteri speciali
      9. Creare testo su un tracciato
      10. Stili di carattere e di paragrafo
      11. Tabulazioni
      12. Testo e composizione tipografica
      13. Trovare i font mancanti (flusso di lavoro Typekit)
      14. Aggiornare testo da Illustrator 10
      15. Testo in arabo e in ebraico
      16. Font | Domande frequenti e suggerimenti per la risoluzione dei problemi
      17. Creazione di un effetto di testo 3D
      18. Progettazioni di composizione tipografica creativa
      19. Ridimensionare e ruotare il testo
      20. Spaziatura tra righe e caratteri
      21. Sillabazione e interruzioni di riga
      22. Miglioramenti del testo
      23. Dizionari per il controllo ortografico e la sillabazione
      24. Formattare i caratteri asiatici
      25. Modulo di composizione per scritture asiatiche
      26. Creare progettazioni di testo con oggetti di fusione
      27. 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. Inserire più file
      2. Gestire file collegati e incorporati
      3. Informazioni sui collegamenti
      4. Scorporare le immagini
      5. Importare disegni di Photoshop
      6. Importare immagini bitmap
      7. Importare i file Adobe PDF
      8. Importare file EPS, DCS e AutoCAD
    2. Creative Cloud Libraries in Illustrator 
      1. Creative Cloud Libraries in Illustrator
    3. Salva
      1. Salvare un disegno
    4. Esporta
      1. Utilizzare la grafica di Illustrator in Photoshop
      2. Esportare un disegno
      3. Raccolta delle risorse ed esportazione in blocco
      4. Creare pacchetti di file
      5. Creare file Adobe PDF
      6. Estrarre il codice CSS | Illustrator CC
      7. Opzioni Adobe PDF
      8. 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
    2. Recuperare i file dopo l'arresto anomalo
    3. Problemi relativi ai file
    4. Formati di file supportati
    5. Problemi relativi ai driver del dispositivo GPU
    6. Problemi dei dispositivi Wacom
    7. Problemi relativi ai file DLL
    8. Problemi relativi alla memoria
    9. Problema del file delle preferenze
    10. Problemi di font
    11. Problemi con la stampante
    12. Condividere il rapporto sugli arresti anomali con Adobe
    13. Miglioramento delle prestazioni di Illustrator

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

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.

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

Logo Adobe

Accedi al tuo account