Esportazioni raster
Dimensioni PNG del logo per siti web, email e consegna al cliente
Scegli dimensioni di esportazione utili in base agli utilizzi reali, poi rendi chiara la consegna al cliente.
La risposta breve
Scegli le dimensioni in pixel di un PNG del logo in base alla dimensione di visualizzazione prevista e alla densità di pixel che vuoi supportare. Un logo visualizzato a 200 × 50 pixel CSS richiede un PNG da 400 × 100 pixel per una versione 2×. Mantieni le proporzioni, verifica le regole di caricamento della destinazione e genera il file dal master vettoriale quando disponibile.
Parti dal contesto di utilizzo
Non esiste un’unica dimensione PNG adatta a ogni sito web, firma email e presentazione del cliente. Una consegna utile dice al destinatario quale file usare e a quali dimensioni visualizzarlo.
Per un sito web, chiedi la dimensione CSS effettiva del logo alle larghezze di layout pertinenti. Un logo di 200 pixel nell’intestazione desktop potrebbe essere più piccolo su mobile. Per le email, controlla il modello o l’editor delle firme anziché copiare un’impostazione del sito web. Per le presentazioni, concorda una collocazione utile e controlla la slide esportata alla risoluzione prevista.
SVG può essere una buona opzione per i loghi vettoriali quando il sistema di destinazione lo accetta. PNG è utile quando serve un’immagine di dimensioni fisse con trasparenza. La nostra guida ai formati del logo spiega la scelta più ampia.
Prima di esportare, annota quattro cose:
- Dove comparirà il logo e quali formati di file sono accettati
- La larghezza e l’altezza di visualizzazione, compresi eventuali margini trasparenti
- Se serve una versione raster a densità maggiore
- Il limite di peso per il caricamento e gli eventuali ridimensionamenti applicati dalla piattaforma
Calcola le dimensioni del PNG
Per un utilizzo raster, usa questa regola di pianificazione:
Larghezza di esportazione = larghezza visualizzata × densità di pixel desiderata.
Applica lo stesso moltiplicatore all’altezza. Un’esportazione 2× raddoppia entrambe le dimensioni, offrendo quattro volte i pixel complessivi. Non significa che il logo debba apparire due volte più grande sulla pagina. Il rapporto di pixel del dispositivo del browser descrive la relazione fra pixel fisici dello schermo e pixel CSS.
Per l’esempio del sito web qui sotto, una versione 3× sarebbe di 600 × 150 pixel. È un requisito separato da concordare con lo sviluppatore, non un motivo per esportare ogni dimensione possibile.
Per i siti web responsive, uno sviluppatore può fornire più immagini alternative usando srcset. Questo consente al browser di selezionare una risorsa appropriata. I file esportati e le impostazioni di visualizzazione del sito web devono essere coerenti.
Questi sono calcoli svolti per un logo immaginario di Morrow Quay con un’area grafica in proporzione 4:1. Sono scelte progettuali illustrative, non requisiti di piattaforme né risultati di clienti reali.
| Destinazione di esempio | Dimensione di visualizzazione prevista | PNG 1× | PNG 2× |
|---|---|---|---|
| Intestazione del sito web | 200 × 50 px | 200 × 50 px | 400 × 100 px |
| Firma email | 180 × 45 px | 180 × 45 px | 360 × 90 px |
| Posizionamento nelle slide del cliente | 480 × 120 px | 480 × 120 px | 960 × 240 px |
1× esportazione
File PNG: 200 × 50 px
Visualizzazione: 200 × 50 px CSS
2× esportazione
File PNG: 400 × 100 px
Visualizzazione: 200 × 50 px CSS
3× esportazione
File PNG: 600 × 150 px
Visualizzazione: 200 × 50 px CSS
Approfondimenti: MDN: devicePixelRatio · MDN: immagini responsive
Controlla le dimensioni email nell’editor effettivo
Un PNG da 360 × 90 è un punto di partenza ragionevole per la firma di esempio da 180 × 45 solo se la configurazione email lo vincola a quella dimensione di visualizzazione prevista. Inseriscilo, controlla le impostazioni delle dimensioni e invia un’email di prova. Esamina il risultato nei client usati dal tuo pubblico, anche su mobile se pertinente.
La larghezza totale del modello di un’email è diversa dalla larghezza del suo logo. Mailchimp, per esempio, documenta raccomandazioni diverse per le immagini nei suoi editor nuovi e precedenti e raccomanda immagini a risoluzione maggiore con dimensioni vincolate per gli schermi ad alta densità. Raccomanda inoltre immagini RGB e PNG quando serve trasparenza. Sono le linee guida di Mailchimp, non una specifica universale per le firme.
Usa una versione del logo adatta allo sfondo. Un wordmark bianco trasparente può sembrare vuoto in un messaggio bianco. Un wordmark scuro può diventare difficile da vedere se il client del destinatario cambia lo sfondo. Controlla il risultato effettivo prima di considerare pronta la risorsa.
Approfondimenti: Mailchimp: raccomandazioni sulle immagini
Conta i pixel del logo all’interno dell’area dell’immagine
Le dimensioni in pixel includono lo spazio vuoto. Supponiamo che un PNG da 400 × 100 contenga un logo visibile da 320 × 80, centrato con 40 pixel di margine a sinistra e a destra e 10 sopra e sotto. Visualizzando l’intera immagine a 200 × 50, il logo visibile occupa solo 160 × 40.
Potrebbe essere un’area di rispetto intenzionale. Se il margine è accidentale, correggi i limiti di esportazione nel sorgente. Mantieni l’eventuale regola approvata per l’area di rispetto e indica allo sviluppatore se quella spaziatura è incorporata nel file o deve essere aggiunta dal layout. Ingrandire l’intera immagine per compensare cambia di nuovo la dimensione apparente.
Esporta le dimensioni in Figma o Illustrator
Figma supporta esportazioni raster native personalizzate. Seleziona il logo o il frame preparato, aggiungi un’esportazione PNG e inserisci una larghezza come 400w nel campo Scale. Puoi anche inserire un’altezza fissa con h o usare un moltiplicatore come 2x. Il moltiplicatore segue le dimensioni dell’oggetto selezionato, quindi controlla i pixel risultanti.
Anche i flussi Export for Screens e Asset Export di Illustrator supportano più scale e formati. Prepara la risorsa o la tavola da disegno corretta, scegli PNG e le scale richieste, poi verifica le dimensioni dei file scaricati.
Per una consegna completa da Figma, segui il nostro flusso di esportazione del logo.
Approfondimenti: Figma: formati e impostazioni di esportazione · Adobe: raccogliere risorse ed esportare in serie
Rendi comprensibile la consegna
Aggiungi una breve nota: “Il PNG per il sito web è una risorsa 2× destinata a essere visualizzata a 200 × 50 pixel. Mantienine le proporzioni.” Conserva il master vettoriale approvato per poter generare direttamente nuove dimensioni in futuro.
Per chi prepara pacchetti regolarmente, logopack.app Pro aggiunge dimensioni di esportazione PNG e JPG personalizzate. Parti da un SVG approvato, scegli le dimensioni per le tue destinazioni ed esamina le risorse scaricate. Le esportazioni native dell’editor restano una strada valida; il flusso di preparazione del pacchetto è utile quando vuoi quei file personalizzati insieme al resto della consegna.
Prima della consegna, apri i file effettivi, controlla dimensioni in pixel e trasparenza e inserisci la risorsa prioritaria nella sua destinazione reale. Se un file delle dimensioni corrette appare comunque poco nitido, usa la nostra guida per risolvere i problemi dei PNG sfocati.
Assegna ai file nomi che riportino le informazioni necessarie al cliente. Per questo esempio:
- MorrowQuay_Primary_Web_400x100.png
- MorrowQuay_Primary_Email_360x90.png
- MorrowQuay_White_Slides_960x240.png
Approfondimenti: Prepara un pacchetto logo con logopack.app
METTILO IN PRATICA
Vuoi preparare il tuo pacchetto?
logopack.app trasforma disegni SVG esistenti in un pacchetto del logo organizzato. Visualizza l’anteprima dei file, scegli le opzioni di esportazione disponibili e controlla il risultato prima della consegna. Per esportare i tuoi file di logo o icone serve Pro.
Inizia con il generatore di pacchetti del logo, esplora lo ZIP di esempio, oppure confronta i piani attuali.
Apri il generatore