Prima di iniziare, una breve premessa: durante la navigazione, potreste imbattervi in avvisi sulla privacy e sui cookie su alcuni siti web (ad esempio, i forum più popolari mostrano messaggi di consenso). Questo non è rilevante per la procedura tecnica che seguirete, ma è importante notare che questi siti spesso raccolgono consigli da più utenti. Qui, invece, troverete una guida completa e coerente, con metodi collaudati per evitare errori comuni e creare immagini PNG nitide e leggere, pronte per l'uso sul web o nelle app.
Esportare immagini PNG di alta qualità richiede un equilibrio tra pianificazione (dimensioni in pixel, griglia e colore), scelta del metodo di output più adatto ed esecuzione di rapidi controlli. Seguendo le linee guida sopra riportate, le tue risorse saranno nitide, con una trasparenza perfetta e pronte per qualsiasi ambiente, da una landing page a un'app per dispositivi mobili, mantenendo la fedeltà visiva e una dimensione del file ragionevole.
Cosa preparare in Illustrator prima di esportare
La qualità di un file PNG non è determinata solo dall'esportazione; inizia già nel documento stesso. Migliore è l'impostazione iniziale, minori saranno le sorprese in seguito. L'obiettivo è che la grafica vettoriale venga rasterizzata alla dimensione corretta, senza spostamenti che creino aloni o immagini fantasma. Per raggiungere questo risultato, il primo passo è squadrare l'area di lavoro. Crea o modifica il documento utilizzando un'area di lavoro in pixel , impostandola con precisione alla dimensione finale desiderata (ad esempio, 1200 × 628 px).
Attiva la visualizzazione appropriata: vai su Visualizza > Anteprima pixel. Questa visualizzazione ti permette di vedere come apparirà il disegno rasterizzato, il che è molto utile per individuare bordi sfocati su icone e linee sottili. Se noti una sfocatura insolita, è molto probabile che un elemento sia posizionato utilizzando coordinate decimali o misure che non vengono arrotondate a pixel interi. In questi casi, utilizza Allinea alla griglia di pixel in modo che i contorni si trovino su pixel interi ed eviti la tipica sfocatura di 1 pixel.
Verifica il colore: per i file PNG destinati alla visualizzazione a schermo, lavora in RGB. L'utilizzo di Documento > Modalità colore > RGB garantisce che i colori vengano visualizzati correttamente sul web e sui dispositivi. Se provieni da CMYK, potresti notare una variazione di saturazione; sfrutta questa possibilità per regolare le tonalità pur continuando a lavorare in formato vettoriale. Durante l'esportazione, abilita la conversione in sRGB quando l'opzione è disponibile, poiché sRGB è lo standard web e riduce le differenze tra browser e sistemi operativi.
Verifica la risoluzione degli effetti: se utilizzi ombre, sfocature o luci, vai su Effetti > Impostazioni effetti raster documento. Il valore impostato qui influirà sul modo in cui questi effetti vengono visualizzati quando vengono convertiti in bitmap. Per le risorse web, 72-150 dpi sono generalmente sufficienti; per il materiale che verrà stampato o se desideri la massima nitidezza nei dettagli, arriva fino a 300 dpi. Un dpi più elevato significa file di dimensioni maggiori, quindi scegli con attenzione; l'importante è che gli effetti vengano calcolati con una densità sufficiente per evitare distorsioni durante l'esportazione. Se lavori con una rasterizzazione intensiva, è utile consultare guide su come creare PNG ottimizzati in rasterizzatori come Photoshop per confrontare risultati e processi.
Presta attenzione ai tratti e al ridimensionamento: se stai trasformando la tua grafica, abilita "Ridimensiona tratti ed effetti" nelle Preferenze o quando utilizzi gli strumenti di trasformazione. Questo eviterà che i contorni abbiano spessori frazionari come 0,5 px, che possono causare un anti-aliasing non uniforme. Per la massima precisione, valuta la possibilità di espandere i tratti prima dell'esportazione (Oggetto > Espandi) in modo che le linee diventino forme solide e perdano la loro dipendenza da uno spessore del tratto che può portare a bordi sfumati.
Ritaglia le parti in eccesso: se hai bisogno che il file PNG abbia esattamente le stesse dimensioni dell'area di lavoro, abilita il ritaglio dell'area di lavoro durante l'esportazione. Questo garantisce che non ci siano pixel extra o spazi vuoti indesiderati. Ciò è particolarmente importante per icone o loghi, dove i margini indesiderati sono molto evidenti; utilizzando l'opzione "Usa aree di lavoro" o equivalente, il file PNG erediterà i bordi dell'area di lavoro senza che vengano incollati elementi grafici aggiuntivi.
Eseguite un controllo di qualità per evitare errori comuni: assicuratevi che nessun elemento importante sia semitrasparente se non necessario, che lo sfondo sia completamente trasparente se prevedete un canale alfa e che il testo sia rasterizzato correttamente alla dimensione desiderata. Per interfacce o banner, assicuratevi che il corpo del testo non sia troppo piccolo; se la dimensione cambia in seguito, esportate più versioni (1x, 2x, 3x) invece di ridimensionare un PNG pregenerato, poiché ingrandire un raster degrada sempre la nitidezza . Se dovete garantire che la tipografia non presenti errori, considerate la possibilità di convertire il testo in un oggetto prima dell'esportazione.
Come esportare PNG senza perdere qualità: metodi e impostazioni
Illustrator offre diverse opzioni di esportazione in formato PNG. Non sono tutte uguali, quindi scegli quella più adatta al tuo flusso di lavoro. In generale, Esporta per display e il pannello Esporta risorse sono i più comodi per gestire diverse dimensioni; Esporta come consente un controllo preciso su un singolo file; e Salva per Web (vecchia opzione) è ancora utile per le opzioni di colore e anteprima. L'importante è applicare regolazioni coerenti per mantenere nitidezza, colore e trasparenza , indipendentemente dal metodo utilizzato.
Esporta come: controllo diretto per un PNG
Vai su File > Esporta > Esporta come… e scegli PNG. Seleziona “Usa tavole da disegno” se desideri che il ritaglio rispetti la tavola da disegno. Nella finestra delle opzioni, cerca di impostare i seguenti valori: risoluzione alla dimensione desiderata (puoi impostare una risoluzione personalizzata per il ridimensionamento), sfondo trasparente e anti-aliasing. L'anti-aliasing è fondamentale: seleziona “Ottimizzato per grafica (supersampling)” per illustrazioni e forme, oppure “Ottimizzato per testo (hinted)” se dai priorità al testo di piccole dimensioni. Questo garantirà che i bordi si fondano uniformemente senza aloni su sfondi chiari o scuri.
Se hai bisogno di un'immagine PNG con le dimensioni esatte in pixel (ad esempio, 1024 × 1024), idealmente l'area di lavoro dovrebbe già avere quelle dimensioni. Tuttavia, puoi utilizzare l'opzione Esporta come per moltiplicare per un fattore di scala (50%, 100%, 200%, ecc.). Evita di scalare a valori non arrotondati che introducono un ricampionamento irregolare. Se noti una sfocatura nell'anteprima dei pixel, torna indietro e regola le dimensioni dell'area di lavoro o le misure dei tuoi elementi arrotondandole a numeri interi ed evitando l'interpolazione.
Esportazione per schermi: più dimensioni al volo
Accesso tramite File > Esporta > Esporta per schermi. Questa opzione è ideale per preparare varianti 1x, 2x e 3x per web o dispositivi mobili. Aggiungi le scale (ad esempio, 1x, 2x) e seleziona PNG come formato. Puoi esportare per tavola da disegno o per risorsa (se definisci le risorse dal pannello). Assicurati che l'opzione di sfondo sia impostata su trasparente e che i suffissi (come @2x) vengano generati correttamente. Questo metodo consente di risparmiare tempo e garantisce la coerenza tra le diverse dimensioni, in modo che ogni densità riceva la sua raster nativa e non sia necessario ricorrere a successivi ridimensionamenti. Per la documentazione sui flussi di lavoro di esportazione, consulta le guide sul salvataggio dei file e sui formati per le migliori pratiche.
Un consiglio utile: se il tuo design appare strano ingrandito 2x perché lo hai creato originariamente con una dimensione "non divisibile", configura l'area di lavoro di base con dimensioni progettate per il ridimensionamento (ad esempio, 48, 96, 144 px, ecc.). In questo modo, quando generi le versioni 2x/3x, i pixel si adatteranno alla griglia e la nitidezza verrà mantenuta. Questa precauzione è fondamentale per icone e interfacce perfette al pixel.
Pannello di esportazione delle risorse: automatizza senza problemi
Trascina gli elementi nel pannello Esporta risorse e definisci ridimensionamento e formati per ciascuna risorsa. È un modo efficace per gestire un sistema di token di progettazione visiva. Puoi specificare di esportare un logo in PNG 1x, 2x e SVG, e un'icona in PNG 24 con trasparenza e WebP (ove applicabile). Quando i team richiedono modifiche, è sufficiente fare clic su Esporta e il gioco è fatto: le impostazioni saranno sempre le stesse. Questo elimina le incongruenze e consente di risparmiare innumerevoli ripetizioni.
Salva per il web (legacy): ancora utile
Anche se si tratta di una funzione legacy, File > Esporta > Salva per Web (Legacy) offre un'anteprima molto utile. Scegli PNG-24 per la massima trasparenza (PNG-8 riduce la gamma di colori e spesso introduce banding). Seleziona Trasparenza e imposta Opaco su Nessuno per evitare aloni attorno ai bordi. Se vedi opzioni per convertire in sRGB, abilitale per uniformare i colori tra i browser. Questa finestra ti permette anche di regolare le dimensioni in pixel con una buona anteprima, nel caso in cui tu debba vedere il risultato esatto prima di confermare.
Colore e consistenza: evitare sorprese di colore
Per l'utilizzo sul web, assicurati che il documento sia in RGB e convertilo in sRGB in fase di esportazione, se necessario. Disabilita i profili insoliti ed evita di mescolare elementi CMYK e RGB all'interno dello stesso file PNG. Se ricevi un'immagine con profili diversi, riposizionala e reinterpreta il colore prima dell'esportazione. L'obiettivo è che il file PNG risultante abbia lo stesso aspetto in Chrome, Safari e Firefox, e questo richiede l'utilizzo di sRGB come denominatore comune.
Trasparenza e bordi: zero aloni
Quando si esporta con trasparenza, evitare sfondi temporanei bianchi o neri nel documento, poiché possono interferire con l'anti-aliasing. In "Salva per Web", impostare "Matte" su "Nessuno"; in "Esporta come", lasciare lo sfondo "Trasparente". Se si nota un velo chiaro o scuro sul bordo, verificare che non vi siano oggetti con opacità parziale non necessaria e che l'anti-aliasing sia impostato correttamente. Per il testo piccolo, provare "Ottimizzato per il testo" e per le icone con linee rette, utilizzare "Nessuno" se si desidera ottenere risultati perfetti al pixel, anche se si perderà parte dell'anti-aliasing. Questo renderà il contorno più nitido senza artefatti.
Un altro trucco per le icone: usa tratti di spessore uniforme e cerca di allineare le forme centrate sui pixel. Una linea di 1 pixel centrata su un pixel appare nitida; una linea di 1 pixel che si estende su due pixel è anti-aliasing e appare sfocata. La visualizzazione in pixel e l'opzione Allinea alla griglia fanno metà del lavoro per te, assicurando che ogni bordo si trovi dove dovrebbe.
Dimensioni e densità: 1x, 2x, 3x
Per le interfacce moderne, è necessario fornire almeno le versioni a 1x e 2x. Se si progetta a 1x, generare le versioni a 2x e 3x utilizzando lo strumento Esporta per schermi. Se si progetta a 2x (molto comune), esportare la versione a 1x dividendo per 2 e la versione a 3x moltiplicando per 1,5. Non ingrandire mai un'immagine PNG finale in un editor esterno; tornare sempre al formato vettoriale ed esportare nativamente alla nuova scala. Questa procedura consente di mantenere sotto controllo la nitidezza e le dimensioni dei file nell'intero sistema di risorse.
Lista di controllo rapida prima di premere il pulsante
È consigliabile eseguire un semplice controllo. Verificate che: la tabella abbia le dimensioni esatte, la posizione e le dimensioni degli elementi siano espresse in pixel interi, la modalità colore sia RGB, gli effetti raster siano alla risoluzione corretta, l'antialiasing sia corretto, la trasparenza sia pulita e, se necessario, venga eseguita la conversione in sRGB. In questo modo, il 90% dei problemi di "immagine sfocata" scomparirà, perché avrete la certezza che i dati vettoriali e raster siano compatibili.
- Misure da tavolo e arrotondate in px per evitare frazioni.
- Visualizzazione pixel abilitata per convalidare la nitidezza effettiva.
- RGB + sRGB durante l'esportazione per garantire coerenza tra i display.
- Antialiasing e trasparenza configurati in base al tipo di opera d'arte.
Risoluzione dei problemi comuni
Testo sfocato? Aumenta leggermente la dimensione del carattere, utilizza l'opzione "Ottimizzato per il testo" nell'anti-aliasing, verifica che il testo non contenga cifre decimali ed evita di ridimensionare il file PNG finale. A volte vale la pena rasterizzare il testo come immagine separata a 2x per aumentare la densità di pixel e la leggibilità senza compromettere il resto dell'immagine. Se lavori con Photoshop, scoprirai che copiare e rasterizzare tra le applicazioni velocizza il processo; consulta le tecniche per la rasterizzazione e il trasferimento di elementi tra Photoshop e Illustrator.
Icone con bordi frastagliati? Allineale alla griglia di pixel, usa larghezze pari (2px, 4px) o dispari coerenti con la griglia e valuta la possibilità di disabilitare l'anti-aliasing se lo stile è prettamente pixel art. Se l'icona presenta diagonali, lascia l'anti-aliasing su "Ottimizzato per l'arte" per smussare i bordi frastagliati, ma evita le maschere che introducono aloni su sfondi variabili.
Colori sbiaditi nei browser? Assicurati di convertire l'immagine esportata in sRGB ed evita profili colore incorporati non standard. Sui monitor a gamma cromatica estesa, un'immagine non convertita può apparire sovrasatura nelle applicazioni desktop e sottosatura nei browser. La conversione in sRGB è la soluzione ideale per garantire la coerenza tra le diverse piattaforme.
File di grandi dimensioni? Il formato PNG è senza perdita di dati e trasparente, ma non è sempre il più leggero. Se possibile, riduci le dimensioni, rimuovi i livelli invisibili prima dell'esportazione, comprimi con utility esterne senza perdita di dati (ad esempio, optipng, pngquant - da usare con cautela) e, quando non è necessaria la trasparenza, considera JPEG o WebP. Anche se, in ogni caso, devi necessariamente utilizzare il PNG, mantenere le palette pulite ed evitare canali alfa non necessari consente di risparmiare kilobyte.
Vedi aloni bianchi e neri su sfondi variabili? Significa che la maschera è stata applicata in modo errato. In "Salva per Web", imposta "Maschera = Nessuna"; altrimenti, usa uno sfondo trasparente e correggi l'anti-aliasing. Se stai ereditando un'immagine con un'ombra su sfondo bianco, ricrea l'ombra su trasparenze reali, altrimenti l'interpolazione trascinerà il bianco creando un contorno fantasma.
Buone pratiche di flusso di lavoro
Lavora con un file vettoriale master, utilizzando livelli chiari e stili coerenti. Definisci fin da subito le dimensioni di base compatibili con densità 1x/2x/3x e usa la funzione Esporta per schermi per ridimensionare. Una nomenclatura coerente (icon- [email protected] , icon- [email protected] , ecc.) e cartelle specifiche per piattaforma semplificano la distribuzione. Se lavori in team, documenta le impostazioni di esportazione in un file README interno in modo che tutti generino gli stessi file binari senza differenze.
Integra la validazione visiva: apri i file PNG negli ambienti reali in cui verranno utilizzati (browser, dispositivo mobile, app). Non affidarti esclusivamente all'anteprima di Illustrator. Sul web, posiziona i file PNG su sfondi diversi per verificare la presenza di aloni; sui dispositivi mobili, caricali su un prototipo e controlla la presenza di densità elevate. Questa fase di validazione anticipa i problemi e consente di correggerli prima della pubblicazione.
Ricorda che Illustrator rasterizza in tempo reale; se la tua grafica si basa molto sugli effetti, prova a espandere o convertire alcune parti in bitmap intermedie ad alta risoluzione prima dell'esportazione finale. Non è la norma, ma in composizioni complesse a volte è l'unico modo per evitare che il motore ricalcoli in modo incoerente tra un'esportazione e l'altra.
