Il miglior flusso di lavoro per il design delle icone: iniziare in grande o iniziare in piccolo?

Quando si progettano icone che devono essere consegnate a più dimensioni, si inizia con dimensioni più ridotte, quindi si passa alle dimensioni più grandi? O inizi in grande e riduci?

Ci sono molti vantaggi per entrambi. Sto cercando di perfezionare il mio flusso di lavoro, quindi gli input degli altri sarebbero utili. Supponiamo che stiamo progettando un'icona per Mac o Windows, in cui le dimensioni si riferiscono - sono per lo più multipli esatti.

Per OS X, le dimensioni delle icone delle app standard sono:

• 16 × 16, 32 × 32, 128 × 128, 256 × 256, 512 × 512 e 1024 × 1024.

Per Windows 7 le dimensioni delle icone delle app standard sono:

• 16x16, 32x32, 48x48, 64x64 e 256x256.

Per iOS le dimensioni standard delle icone delle app sono:

• 29x29, 48x48, 57x57, 58x58, 72x72, 96x96, 114x114, 144x144, 512x512 e 1024x1024.

Per Android le dimensioni standard delle icone delle app sono:

• 36x36, 48x48, 72x72, 96x96 e 512x512.

Per iOS e Android, le dimensioni dell'icona sono un po 'più casuali e anche le scale non si relazionano, quindi essere intelligenti sulla griglia di progettazione conta meno, perché è meno probabile trovare coordinate che colpiscono i confini dei pixel per più dimensioni.

Metodo 1: ridimensionamento

1. Progetta l'icona con le dimensioni maggiori (spesso 1024 × 1024) usando vettori ed effetti generati, come gli stili di livello.

2. Duplica e ridimensiona il documento per creare dimensioni inferiori.

3. Apporta le modifiche necessarie e salva l'immagine finale.

È fantastico, ma manca l'opportunità per gli elementi di allinearsi a una griglia che funziona per più dimensioni. L'uso di una griglia grossolana su cui scattare sembra aiutare un po '. Ad esempio, un documento 1024 × 1024 con una griglia 16px indica che i punti di aggancio ti daranno bordi con pixel spezzati fino alla dimensione 64 × 64. L'idea è progettare con dettagli, ma agganciare le griglie di dimensioni inferiori, in modo da raggiungere quelle posizioni importanti.

Metodo 2: ingrandimento

1. Progetta l'icona nella dimensione più piccola o in una delle dimensioni più piccole (spesso 32 × 32 o 64 × 64) usando vettori ed effetti generati, come gli stili di livello. Di solito non ci sono abbastanza dettagli in 16 × 16 per usarlo come punto di partenza.

2. Duplica e ridimensiona il documento per creare dimensioni maggiori e verso il basso per dimensioni minuscole.

3. Apporta le modifiche necessarie e salva l'immagine finale.

Questo tende a portare a icone semplici con molti dettagli, quindi non mi piace lavorare così.

Metodo 3: scalare su e poi giù

1. Crea un disegno approssimativo a dimensioni inferiori (spesso 32 × 32 o 64 × 64) usando vettori ed effetti generati, come gli stili di livello.

2. Ridimensionare il documento fino alla dimensione massima e aggiungere dettagli. Questo è il punto in cui l'icona viene lucidata e viene aggiunta la maggior parte dei dettagli.

3. Duplica e ridimensiona il documento per tutte le dimensioni più piccole.

4. Apporta le modifiche necessarie e salva l'immagine finale.

Questo sembra essere il metodo migliore, con i pro e i contro degli altri metodi. Come punto leggermente correlato, significa anche che in genere disegno icone iOS a 912 × 912, perché è esattamente 16 volte la dimensione dell'icona non Retina di iPhone di 57 × 57.

Esiste un metodo migliore per progettare icone che devono essere consegnate in diverse dimensioni?

L'obiettivo è ottenere il miglior risultato possibile, con il minimo sforzo.

Una leggera correzione ai tuoi presupposti: mentre Windows e Mac usano multipli di 16, non si adattano alla stessa velocità. Le dimensioni standard di Vista / 7 sono 16 ² , 32 ² , 48 ² , 256 ² . OS X è 16 ² , 32 ² , 128 ² , 512 ² (+ versioni HiDPI). Per complicare ulteriormente le cose, i livelli di zoom predefiniti di Windows Vista / 7 sembrano essere 16 ² , 48 ² , 96 ² , 256 ² e si ridimensioneranno felicemente con incrementi di soli 2 pixel. Ciò non dovrebbe fare una grande differenza per il flusso di lavoro, tranne per il fatto che ovvia alla necessità di occuparsi di griglie pixel specifiche a tutti i livelli di zoom.

Il mio flusso di lavoro è diverso dal tuo in quanto non faccio molto ridimensionamento. Viene creata una nuova immagine per ogni livello di dimensione e non provo a riciclare esattamente lo stesso layout.

Le dimensioni con cui inizio sono determinate dalla piattaforma. Se sto progettando per Windows, parto da 48x48. (Non ho alcuna base scientifica per questo, ma il livello di zoom di Windows 7 predefinito è "Medio" che è 48x48. Anche Vista, OS X, iPhone, iPad e Android sono abbastanza vicini a queste dimensioni, quindi è comodo e confortevole.)

L'icona completamente finita viene eseguita a queste dimensioni ed è il riferimento per altre icone della famiglia. Se eseguo un'app desktop, creerò altre versioni a 16x, 96x e 256x per abbinare i livelli predefiniti di Windows (a meno che non sia per Mac, naturalmente). Il 96x è di solito molto simile al 48x.

La versione 256x sarà una creazione completamente nuova. Molto più dettaglio (anche se si tratta di piccole cose come la trama di elementi di sfondo). Vengono aggiunti tutti i dettagli che non potevo inserire nelle versioni più piccole. Se qualcuno ha lo schermo composto da icone giganti, dovrebbe essere contento di ciò che vede.

Anche la versione 16x è una nuova creazione. Pochissimi dettagli. Identificazione del logo o iconografia molto semplice con la stessa tavolozza di colori delle versioni più grandi. A queste dimensioni non tento di rendere nulla di bello, ma immediatamente riconoscibile.

Quindi, almeno per me, non si tratta di aumentare o ridurre le dimensioni nella speranza di avere un'immagine identica o di utilizzare lo stesso layout di base in tutte le dimensioni. Ci penso come guidare in una città - in lontananza è solo uno skyline minuscolo ma identificabile. Ti avvicini e inizi a scegliere gli edifici. Allora ci sei dentro e senti tutti i dettagli e le dimensioni. Da ogni distanza sembra diverso, ma c'è una transizione graduale da una dimensione all'altra in modo che l'intera famiglia non si senta mai sconnessa.

Sicuramente iniziare in grande e ridimensionare. Ogni volta che ho avuto icone di design per il mio software, preferisco vedere come apparirà l'icona con una dimensione maggiore e quindi posso decidere quali funzionalità rimuovere o enfatizzare in dimensioni inferiori. Devi sapere cosa c'è nell'icona prima di rimuovere gli elementi nel piccolo. Le icone glyfx hanno alcuni buoni esempi di come interpretare icone grandi e piccole dello stesso design.

Bene, preferisco fare tutto per la più piccola densità e ridimensionarlo. Se stai progettando l'intero layout per un'app, il lavoro con la griglia è molto più semplice e ti fa risparmiare un sacco di mal di testa, perché stai spostando gli oggetti in una griglia più piccola.

Quindi il mio flusso di lavoro è simile al seguente: 1. Realizzo un layout con una scala dpi minima in Photoshop e continuo a creare le icone in Illustrator, poiché le immagini vettoriali non hanno alcun problema con il ridimensionamento. 2. Quando realizzo ogni icona / oggetto ecc. Creo tutte le versioni ridimensionate nello stesso momento (quando decido che sembra buono nel layout ovviamente) e consegno i programmatori finali al programmatore.

Devo notare che ho iniziato con iOS prima.