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)

nuovo documento photoshopInseriamo 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) forma di partenza

Adesso dal menu File selezionate la voce Generate > Image Assets  (nella versione in italiano del programma  andate su Genera> Risorse Immagine)

image assets

A questo punto spostiamoci sul livello appena creato, clicchiamo sul nome del livello e rinominiamolo “orologio.png”  (senza le virgolette)

orologio

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.

folder

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).

colore diverso

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

esportazione 1024

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)

4 formati

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

esportazione totale

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.

Dillo ad un amico

Di cosa abbiamo parlato

autore

A 5 anni ho fatto un ritratto a matita di mio padre. Il mio primo Picasso. Da allora ho sempre tenuto una matita in mano, soppiantata adesso, da una penna grafica. Faccio del mio meglio per rendere bello il mondo in cui vivo e ho scelto Evermind per attuare il mio piano diabolico, far sparire il comic sans dalla faccia della terra. Ogni tanto scrivo facts su Chuck Norris e bevo Amaro del Capo

Cosa ne pensi ?

Scrivici per avere informazioni sui nostri servizi
o per entrare a far parte del network di smart worker di Evermind