Per includere un tratto esterno mantenendo invariate le dimensioni PNG di una risorsa di gioco, riserva spazio per il tratto all’interno di una tavola da disegno di dimensioni fisse. In Affinity su Mac, adatta l’intera grafica contornata entro quel limite, quindi esporta la tavola da disegno con nome alle dimensioni in pixel richieste.

Questo flusso di lavoro è pensato per chi prepara una piccola risorsa vettoriale per un gioco, come un’icona geometrica da 32 × 32 px. Utilizza i controlli del Centro assistenza desktop di Affinity attuale. Affinity Designer 2 dispone di un’area di lavoro per l’esportazione separata, chiamata Export Persona; la documentazione attuale di Affinity la chiama Slice Studio. Il flusso di lavoro principale seguente usa la finestra di dialogo Esporta dell’app desktop attuale. Documentazione attuale sull’esportazione di Affinity, Documentazione di Export Persona per Designer 2.

Cosa può rimanere invariato quando aggiungi un tratto esterno?

Prima di modificare il file, distingui tre misure: le dimensioni della forma, la grafica visibile che include il tratto e le dimensioni in pixel dell’immagine esportata. Il pannello Tratto di Affinity posiziona il tratto centrato sul bordo dell’oggetto, all’interno o all’esterno. Queste opzioni di allineamento determinano lo spazio occupato dal contorno. Pannello Tratto.

Un tratto esterno richiede spazio oltre la forma originale. Se la forma riempie già il limite di esportazione, per mantenere l’intero tratto occorre intervenire in qualche modo: ridurre o rimodellare la grafica, usare lo spazio trasparente disponibile oppure ridimensionare l’intera composizione entro le dimensioni di esportazione richieste. Mantenere le posizioni originali dei bordi, l’intero tratto esterno e gli stessi limiti dell’immagine è geometricamente impossibile quando il tratto oltrepassa tali limiti.

Affinity definisce un limite preciso per le tavole da disegno: gli oggetti che si estendono oltre una tavola vengono ritagliati al suo bordo. Una tavola da disegno può quindi mantenere fisse le dimensioni dell’esportazione, ma non può conservare le parti del tratto che restano al di fuori di quel limite. Informazioni sulle tavole da disegno.

La documentazione ufficiale sull’esportazione descrive come scegliere un’area di esportazione e modificare la larghezza e l’altezza dell’output. Non documenta un’opzione che includa i tratti esterni fuoriusciti mantenendo sia la scala originale della grafica sia un limite immagine fisso. Il metodo supportato consiste nell’adattare la grafica visibile all’interno dell’area di esportazione scelta. Finestra di dialogo Esporta, Impostazioni di esportazione.

Requisito Approccio adatto Cosa cambia
Mantenere un vero tratto esterno e dimensioni PNG esatte Rientrare la forma in una tavola da disegno fissa Dimensioni della forma o spazio interno disponibile
Mantenere il bordo esistente della forma come limite esterno visibile Usare, se opportuno, un tratto allineato all’interno Posizione del contorno e area di riempimento visibile
Mantenere le proporzioni dell’intera composizione e imporre le dimensioni di output desiderate Ridimensionare l’immagine esportata Scala della grafica nei pixel esportati
Mantenere l’intera grafica alla scala originale senza spazio disponibile Aumentare l’area di output Dimensioni dell’esportazione; questo non soddisfa il requisito di dimensioni fisse

Come adattare un tratto esterno a un’esportazione da 32 × 32 px?

L’esempio seguente usa un quadrato illustrativo, allineato agli assi, con un tratto esterno uniforme da 2 px. Esclude intenzionalmente effetti, tratti a larghezza variabile e dettagli sporgenti agli angoli, così il calcolo dello spazio risulta chiaro.

Per questo quadrato, la larghezza visibile è la larghezza della forma più lo spessore del tratto su ciascun lato. Di conseguenza, un output da 32 px consente una larghezza della forma di 32 − 2 − 2 = 28 px. Lo stesso calcolo dà un’altezza di 28 px. Centrando la forma, restano 2 px tra il bordo sottostante e ciascun bordo della tavola da disegno; il tratto esterno occupa quello spazio.

1. Imposta l’area di output fissa

In Vector Studio, scegli File > Nuovo. Imposta Unità documento su pixel, Larghezza pagina e Altezza pagina su 32 px e attiva Tavole da disegno. Attiva Sfondo trasparente se la risorsa deve avere un’area circostante trasparente. Per questo esempio, usa 72 DPI, quindi fai clic su Crea documento. Questi controlli del documento sono descritti nella guida di Affinity per la creazione di nuovi documenti. Creazione di nuovi documenti.

Se stai aggiungendo una tavola da disegno dedicata all’esportazione a un documento esistente, lo Strumento Tavola da disegno offre i controlli L e A per una nuova tavola, seguiti da Inserisci tavola da disegno. Inserisci esplicitamente le dimensioni in pixel richieste, anziché dimensionare la tavola intorno alla grafica selezionata. Strumento Tavola da disegno.

2. Imposta le dimensioni della forma sottostante e il tratto

Crea o seleziona il quadrato. Apri Finestra > Generale > Trasforma e inserisci L: 28 px e A: 28 px. Il pannello supporta dimensioni esatte e un punto di ancoraggio per le trasformazioni. Posiziona il quadrato al centro, lasciando i suoi bordi sottostanti a 2 px dai bordi della tavola da disegno. Pannello Trasforma.

Apri Finestra > Vettore > Tratto. Scegli un tratto continuo, inserisci Spessore: 2 px e scegli Allinea tratto all’esterno. Per questo semplice esempio, usa un’unione arrotondata. Affinity documenta i controlli di allineamento, spessore e unione nel pannello Tratto. Pannello Tratto.

Quando ridimensioni una grafica esistente, controlla come viene scalato il tratto. Scala con oggetto determina se lo spessore del tratto cambia insieme a una forma chiusa. Il pannello Trasforma dispone anche di Sostituzione scala, che può forzare la scalatura di proprietà tra cui gli spessori dei tratti. Dopo il ridimensionamento, verifica di nuovo che lo spessore sia quello desiderato, pari a 2 px, invece di presumere che sia rimasto costante. Controlli di scalatura del tratto, Sostituzione scala di Trasforma.

3. Controlla l’estensione visibile completa

Il quadrato da 28 px più il tratto esterno occupano ora 32 px in entrambe le direzioni. È un calcolo geometrico per l’esempio descritto, non una misurazione dell’esportazione. Se vuoi un margine trasparente intorno al contorno, riserva anche quello spazio: un margine di 1 px su ogni lato riduce il quadrato consentito a 26 × 26 px.

Non applicare ciecamente la stessa sottrazione a ogni risorsa. Le unioni a mitra di Affinity possono sporgere agli angoli acuti, mentre i terminali influiscono sulle estremità delle linee. Una sagoma complessa richiede di controllare l’intero contorno, soprattutto agli angoli e alle estremità. Il semplice calcolo della larghezza è un punto di partenza per le forme regolari. Unioni e terminali del tratto.

Come esportare la tavola da disegno senza modificarne le dimensioni?

Scegli File > Esporta > Esporta, quindi seleziona una preimpostazione PNG. Imposta Area sulla tavola da disegno con nome. Affinity distingue questa opzione da Area selezione, che include i livelli sovrapposti, e Solo selezione, che esclude i livelli sovrapposti non selezionati. Scegliendo la tavola da disegno con nome, l’area di esportazione desiderata è definita esplicitamente. Finestra di dialogo Esporta.

Controlla la larghezza e l’altezza dell’output: entrambe devono essere di 32 px per questo esempio. Affinity consente di impostare dimensioni diverse e offre Blocca proporzioni. Evita di modificare le dimensioni dell’output per compensare una grafica che si estende ancora oltre la tavola da disegno; prima adatta il contorno entro i limiti. Impostazioni di esportazione.

Controlla l’anteprima dell’esportazione prima di salvare. Su Mac, ⌘1 mostra l’anteprima al 100%; ⌘2 la mostra al 200%. Controlla tutti e quattro i bordi per verificare che non ci siano parti del contorno ritagliate e conferma l’eventuale margine trasparente desiderato. Poi scegli Chiedi posizione, fai clic su Esporta, assegna un nome al file, scegli la destinazione e fai clic su Salva. Finestra di dialogo Esporta e scorciatoie di anteprima per Mac.

Come controllo pratico finale, apri il PNG salvato e verifica le sue dimensioni in pixel e la sagoma completa. Le sole larghezza e altezza corrette non dimostrano che il tratto sia contenuto: un’immagine ritagliata può comunque misurare esattamente 32 × 32 px.

È possibile ottenere lo stesso risultato a dimensioni fisse usando le sezioni?

Sì, purché tu definisca con attenzione l’area di esportazione. Affinity documenta due comportamenti distinti delle sezioni: una sezione creata da un elemento nel pannello Livelli di esportazione assume automaticamente le dimensioni dell’estensione di quell’elemento ed esporta il contenuto del relativo livello; una sezione disegnata manualmente include il contenuto di tutti i livelli visibili nella sua area. Esportare usando Slice Studio.

Per un’area di esportazione fissa, seleziona lo Strumento Sezione in Slice Studio e trascina per definire un’area intorno alla grafica preparata. Usa il pannello Trasforma di supporto per impostare dimensioni e posizione precise della sezione. Scegli PNG nelle opzioni di esportazione della sezione ed esporta la sezione richiesta. Mantieni l’intero tratto all’interno del rettangolo della sezione, proprio come faresti con una tavola da disegno. Esportare le sezioni.

Controlla la risoluzione di esportazione mostrata invece di presumere che 1x corrisponda sempre alle dimensioni in pixel del documento. Affinity documenta una relazione tra la scala della sezione e i DPI del documento: nel suo esempio, a 72 DPI una sezione da 64 × 64 px viene esportata a 64 × 64 px con scala 1x, mentre a 144 DPI viene esportata a 32 × 32 px con scala 1x. Questo è un problema di impostazione delle dimensioni distinto dal posizionamento del tratto. Dimensioni delle sezioni e DPI.

Cosa modificare se il risultato continua a non essere corretto?

Scegli la modifica successiva in base al sintomo:

  • Il PNG ha le dimensioni corrette, ma il contorno è tagliato: sposta o riduci la grafica finché l’intero tratto rientra nella tavola da disegno o nella sezione.
  • Le dimensioni del PNG cambiano quando modifichi la grafica: controlla se stai esportando una selezione o una sezione dell’oggetto ridimensionata automaticamente. Usa la tavola da disegno con nome o una sezione manuale di dimensioni precise per mantenere limiti fissi.
  • Lo spessore del contorno cambia dopo il ridimensionamento: controlla Scala con oggetto e Sostituzione scala in Trasforma, quindi reimposta lo spessore del tratto desiderato.
  • Il contorno rientra, ma la risorsa appare più piccola: controlla se la larghezza e l’altezza di esportazione sono state usate per ridimensionare una composizione più grande alle dimensioni desiderate.
  • Vengono tagliati solo gli angoli acuti: controlla lo stile delle unioni e la sporgenza della mitra prima di modificare le dimensioni dell’intera composizione.

Questi controlli seguono le distinzioni documentate tra il ritaglio delle tavole da disegno, le estensioni delle sezioni, la scalatura dei tratti e il ridimensionamento dell’esportazione. Rispondono a cause diverse; modificare solo l’allineamento del tratto non risolve tutti i problemi relativi alle dimensioni dell’esportazione. Limiti delle tavole da disegno, Comportamento delle sezioni, Controlli del tratto, Dimensioni di esportazione.

Per un flusso di lavoro ripetibile con le risorse di gioco, definisci prima i limiti in pixel richiesti e riserva spazio al contorno al loro interno. Mantieni l’allineamento esterno quando è importante per l’aspetto, modifica la grafica sottostante per fare spazio ed esporta l’area fissa. In questo modo le dimensioni richieste del file restano invariate e il tratto completo dispone dello spazio necessario per essere visualizzato.

Fonti