Esporta dimensioni icona iOS in Affinity Designer

Sebbene Affinity Designer abbia l'utilissima esportazione @ 1x, @ 2x e @ 3x, mi chiedo se c'è un modo per esportare nella varietà di dimensioni richieste per un'icona iOS?

Ho trovato una griglia concisa delle dimensioni necessarie qui , che riprodurrò in formato elenco:

• 1024x1024
• 180x180
• 152x152
• 120x120
• 87x87
• 80x80
• 76x76
• 58x58
• 57x57
• 40x40
• 29x29

Sono 11 diverse dimensioni dell'icona!

Ho trovato l'intero concetto di configurazione dell'Esportazione Persona con slice come eccellente, soprattutto perché puoi applicare le slice ai singoli layer (diciamo, per le versioni normali e premute di un pulsante). C'è un modo per usare questo stesso strumento, forse, per fare specifiche dimensioni delle esportazioni?

Poiché i requisiti cambiano di volta in volta, è sempre una buona idea fare riferimento alle linee guida di Apple. C'è un modello di Affinity Designer sul mio sito Web che ho sviluppato che esporta le 18 dimensioni attualmente richieste per applicazioni universali.

Sembra un elenco enorme e complesso, ma ci sono davvero solo 5 dimensioni che devi costruire:

• 29pt
• 49pt
• 60pt
• 76pt
• 1024px

Le prime quattro dimensioni (elencate in punti) richiedono le versioni 1 ×, 2 × e 3 × (se si è a prova di futuro, oltre a coprire l'iPhone 6 Plus).

Alcune delle dimensioni che vedrai elencate in rete e sul sito di Apple sono per iOS 6 e precedenti (57 × 57 ecc.). Non sono necessari se scegli come target iOS 7 e versioni successive.

Ecco il modello di Photoshop che ho creato:

Ho delle sezioni impostate per esportare ogni icona e un'azione per ridimensionare e riesportare, quindi finisco con:

• icona-29.png
• icon-29@2x.png
• icon-29@3x.png
• icona-40.png
• icon-40@2x.png
• icon-40@3x.png
• icona-60.png
• icon-60@2x.png
• icon-60@3x.png
• icona-76.png
• icon-76@2x.png
• icon-76@3x.png

Non tutte quelle dimensioni sono ancora necessarie, ma probabilmente lo saranno in futuro. Iniziare con 4 dimensioni di base rende la costruzione delle icone molto più semplice.

Sto usando Slices in Photoshop per esportare le diverse regioni necessarie per ogni icona. Si noti che le icone fornite non devono avere aree trasparenti: il colore dovrebbe estendersi fino agli angoli. iOS maschererà l'icona, quindi non devi preoccuparti.

Potresti fare lo stesso, usando la funzione slice di Affinity?

Aggiornamento: ho creato alcuni modelli di icone di app open source per Affinity Designer, Sketch, Photoshop e Illustrator . Potrebbero valere la pena considerare.

Puoi farlo in Affinity Designer, i slice possono ridimensionare il loro output, usando i suffissi, ecco l'esportazione delle icone iOS usando il suffisso 'w':

Ho appena trovato un buon modo per farlo in Affinity Designer. Tuttavia non è completamente automatizzato. Spiegherò come ottenere le tre dimensioni dell'icona attualmente necessarie per iPhone (29pt, 40pt, 60pt), ciascuna con risoluzione 2x e 3x:

1. Crea un nuovo documento, imposta l'unità su "Punti", le dimensioni della pagina su 29x29 e seleziona "Crea tavola da disegno" nella finestra di dialogo
2. Incolla e posiziona la grafica nella tavola da disegno
3. Rinomina la tavola da disegno in "29pt" nel pannello Livelli (opzionale)
4. Fai clic con il pulsante destro del mouse sulla tavola da disegno e seleziona "Duplica"
5. Trascina la nuova tavola da disegno (in modo da poterle vedere entrambe fianco a fianco) e quindi rinominala in "40pt" (di nuovo, questo passaggio è facoltativo)
6. Ridimensiona il nuovo livello a 40x40pt usando il pannello Trasforma: la grafica verrà ridimensionata automaticamente
7. Ripeti i passaggi 4-6 per creare anche una tavola da disegno da 60pt (più 76pt e 83.5pt per iPad, se necessario)
8. Vai su Export Persona, passa al pannello Slices e seleziona le risoluzioni 2x e 3x (più 1x per iPad)
9. Seleziona tutti i livelli della tavola da disegno nell'elenco ("29pt", "40pt" ecc.) E fai clic su "Esporta selezionati" nella parte inferiore del pannello.

Affinity creerà tutte le dimensioni delle icone in ogni risoluzione selezionata, quindi potresti ottenere più icone di quelle effettivamente necessarie. Ma sono ben definiti "29pt@2x.png" ecc., Quindi è davvero facile assegnarli nel tuo catalogo di risorse Xcode.

Un avvertimento: quando vai su Export Persona, Affinity crea automaticamente una sezione di esportazione per ogni tavola da disegno (che è la cornice blu con l'etichetta delle dimensioni su di essa). Ho scoperto che a volte la dimensione di queste sezioni è disattivata di alcuni pixel. Sembra un bug in AD. Tuttavia, puoi risolverlo facilmente trascinando gli angoli delle sezioni.

Marc Edwards ha avuto un'ottima risposta in termini di dimensioni delle icone che devono essere create, uso delle sezioni per farlo e buoni collegamenti alle risorse di Photoshop per farlo. Tuttavia, sto ancora cercando una soluzione su come esportare in diverse dimensioni in Affinity Designer in particolare.

Alla fine mi sono reso conto che ciò sarebbe stato possibile utilizzando lo strumento Posiziona immagine. Crea la tua icona in un file, quindi in un altro file "modello", puoi utilizzare lo strumento Posiziona immagine per creare più livelli che estraggono il tuo file icona. Ognuno di questi livelli può essere trasformato in una sezione denominata.

Lo svantaggio qui è che ogni livello deve essere creato e puntato sul tuo file icona, quindi sembra che sarebbe noioso. Una volta che era in atto, tuttavia, dopo qualsiasi modifica al file di base, puoi facilmente riesportare tutto.