Chi sviluppa per il web o per dispositivi mobili si è trovato, prima o poi, nella stressante situazione di dover esportare icone (ma non solo) in diversi formati e dimensioni perdendo tempo prezioso. In questo tutorial vi spiego come esportare facilmente un elemento in più formati attraverso un’unica operazione usando Photoshop CC
La prima cosa da fare è creare un documento nuovo grande 1024x1024px (il formato Icona di applicazione per iPhone/iPod/iPad con display Retina)
Inseriamo nel nostro documento l’icona che ci interessa, in questo caso ho optato per un’immagine vettoriale presa direttamente da Photoshop, ma potete scegliere qualsiasi forma vogliate. Non vi preoccupate del colore e dei dettagli, li vedremo più avanti.
Una volta creata l’immagine, salvate il file dove preferite (questo passaggio è fondamentale per andare avanti correttamente) 
Adesso dal menu File selezionate la voce Generate > Image Assets (nella versione in italiano del programma andate su Genera> Risorse Immagine)
A questo punto spostiamoci sul livello appena creato, clicchiamo sul nome del livello e rinominiamolo “orologio.png” (senza le virgolette)
Adesso andate nella cartella dove avete precedentemente salvato il vostro progetto, e vedrete una cartella generata da Photoshop, dentro quella cartella troverete la PNG dell’orologio.
La Png appena creata è totalmente fedele al livello che avete su photoshop, sia nel colore che nelle dimensioni. Provate a cambiare il colore del livello e a ritornare nella cartella, vedrete l’icona cambiare colore (io ho scelto il verde).
Adesso, sempre nel nome del livello, provate a scrivere “200% orologio.png” (sempre senza virgolette) e ritornate nella cartella. Vedrete la vostra icona ingrandita del 200%.
Visto che siamo partiti da un immagine vettoriale, la png esportata sarà perfetta, senza sbavature, se provate a fare la stessa cosa con un livello rasterizzato, noterete i pixel sgranati tipici dell’ingrandimento da jpg.
Adesso passiamo all’esportazione delle nostre icone.
Andiamo sul livello dell’orologio, rimuoviamo il 200% e scriviamo:
“1024×1024 orologio.png”, vedremo il file nella cartella cambiare nuovamente e diventare una png grande 1024x1024px
Adesso ipotizziamo di voler esportare un set intero di icone, dalla più grande, 1024px a quella più piccola, da 29x29px. Avremo questo range pixel di icone (quello in uso sui dispositivi mobile):
- 1024×1204
- 512×512
- 144×144
- 114×114
- 100×100
- 96×96
- 72×72
- 58×58
- 57×57
- 50×50
- 48×48
- 36×36
- 29×29
Andiamo sul livello e scriviamo:
1024×1024 1024-orologio.png, 512×512 512-orologio.png, 144×144 144-orologio.png.
Ogni volta vedrete apparire, nella vostra cartella, 3 file rispettivamente da 1024×1024, 512×512 e da 144×144 pixel (come da figura)
Ecco cosa abbiamo scritto, nel dettaglio:
La prima parte è la grandezza dell’icona espressa in pixel 1024×1024 poi viene il nome del file che sarà 1024-orologio e dopo l’estensione .png seguito dalla virgola ,.
Visto che photoshop salva i file in un unica cartella, il nome deve essere univoco, per questo il numero di pixel sembra essere ripetuto 3 volte, in realtà le prime due sono le misure di altezza e larghezza, e il terzo è il nome file. La virgola serve a separare i vari file.
Per facilitarvi il compito vi consiglio di aprire un documento di testo, scrivere tutti i formati e poi fare copia/incolla sul livello di photoshop. Questo vi permetterà di sostituire il nome del file con un semplice “cerca/sostituisci” su blocco note ad esempio, per creare icone con nomi diversi.
Per facilitarvi il compito vi scrivo qui di seguito cosa incollare sul file del nostro orologio (ho dovuto abbreviare in “ORO” la parola “orologio” perché non si può scrivere più di un certo numero di caratteri nel nome del livello): 1024×1024 1024-oro.png, 512×512 512-oro.png, 144×144 144-oro.png, 114×114 114-oro.png, 100×100 100-oro.png, 96×96 96-oro.png, 72×72 72-oro.png, 58×58 58-oro.png, 57×57 57-oro.png, 50×50 50-oro.png, 48×48 48-oro.png, 36×36 36-oro.png, 29×29 29-oro.png.
Copiatelo e incollatelo sul livello per vedere esportare le icone nella vostra cartella
Questo metodo di esportazione è valido per qualsiasi documento creato con photoshop. Potete aprire un file contenente più immagini e, rinominandole, esportarle senza dover fare “Salva per il web”. Inoltre è possibile fare l’esportazione anche di intere cartelle, o salvare in formati diversi, basta scrivere .jpeg invece di .png
Ecco come esportare icone in diversi formati in meno di un minuto, giusto il tempo di un copia/incolla. Se avete metodi altrettanto veloci, segnalateceli, se avete domande, o se non riuscite ad esportare correttamente i vostri file, commentate usando il form qui sotto, vi risponderò il prima possibile.
