Spesso ci capita di dover aggiornare le nostre applicazioni con  le immagini ad alta risoluzione necessarie per il nuovo iPad (iPad 3 o iPad 4). Fortunatamente il nuovissimo iPad Mini ha mantenuto la stessa risoluzione del primo degli iPad che è di 1024 x 768 pixels.
Poichè non è sempre semplice trovare i documenti ufficali di  Apple , in questo articolo ho nuovamente raccolto tutte le informazioni di cui abbiamo bisogno per aggiornare le icone, le immagini di intro o splash, e così via.

Innanzi tutto partiamo da questa utile tabella:

Device/Screen	File Name (PNG)	Icon Size (pixels)
iPhone and iPod
Application Icon for iPhone (retina display)	Icon@2x.png	114 x 114
Application Icon icon for iPhone	Icon.png	57 x 57
Settings/Spotlight icon for iPhone (retina display)	Icon-Small@2x.png	58 x 58
Settings/Spotlight icon for iPhone	Icon-Small.png	29 x 29
Launch image Portrait (retina display)	Default@2x.png	640 x 960
Launch image Portrait	Default.png	320 x 480
iPhone 5
Launch image for iPhone 5 Portrait (retina display)	Default-568h@2x.png	640 x 1136
iPad
Application Icon for the new iPad (retina display)	Icon-72@2x.png	144 x 144
Application Icon for the iPad	Icon-72.png	72 x 72
Settings/Spotlight icon for iPad	Icon-Small-50@2x.png	100 x 100
Settings/Spotlight icon for iPad	Icon-Small-50.png	50 x 50
Launch image Portrait (retina display)	Default-Portrait@2x.png	1536 x 2008
Launch image Portrait	Default-Portrait.png	768 x 1004
Launch image Landscape (retina display)	Default-Landscape@2x.png	2048 x 1496
Launch image Landscape	Default-Landscape.png	1024 x 748
iTunes App Store
App icon for the App Store (retina display)	iTunesArtwork@2x.png	1024 x 1024
App icon for the App Store	iTunesArtwork.png	512 x 512

 

Ricordiamo che con il passaggio da iOS 5 a iOS 6 è nato il nuovo iPhone 5, insieme con l’iPod touch di 5 ° generazione.
Questi nuovi dispositivi Apple hanno solo un grande cambiamento che aggravia il lavoro di sviluppo delle App: la risoluzione dello schermo.
Questi dispositivi hanno un ampio schermo 4″ , WDVGA (Wide VGA doppia) 640 × 1136 pixels, 326 DPI-Retina display.
Questi dispositivi hanno la stessa larghezza 4/4S iPhone ma più 176 pixel di altezza in modalità Portrait.

App Icon Template

Segnalo nuovamente, come ho gia fatto in un’altro articolo, questo utilissimo tool scaricabile direttamente dal sito “appicontemplate.com” .

Scaricando il file otterrete un modello PSD del’ icona dell’App che, attraverso oggetti avanzati in Photoshop, vi permette di automatizzare il processo di esportazione delle varie dimensioni del file icon.png che devono essere necessariamente incluse nel bundle di ogni iOS App.

Attraverso questo modello Photoshop potremo modificare solo l’icona di dimensione più grande e verrà automaticamente eseguito il rendering che permetterà di avere le icone di dimensioni minori attraverso un veloce flusso di lavoro.
Questo modello è stato creato dal designer danese Michael Flarup.

Come si usa (How to) App Icon Template ?
Il modello funziona con Photoshop CS2 o versioni successive.
Basta aprire il file PSD con la vostra versione di Photoshop e fare “clic destro” sul LAYER (Livello) chiamato “EDIT THIS SMART OBJECT” (MODIFICARE QUESTO OGGETTO SMART) e premere  su ’Edit Contents’ (“Modifica contenuto”).
Verrà aperto il file Icon.psb e potrete creare il vostro Artwork  in questo canvas (quadro).
Dopo aver salvato il Icon.psb, dovrebbe essere automaticamente eseguito il rendering per le diverse dimensioni del file PSD principale .
E’ possibile utilizzere le Actions (azioni automatizzate) di Photoshop che sono in bundle con la risorsa per esportare i file dell’icona nelle versioni squared and rounded corner (squadrate e arrotondate).

Buon Design!

L’icona di avvio (launcher icon) è un elemento grafico che rappresenta la nostra applicazione. Le icone di avvio vengono utilizzate per avviare le applicazioni e appaiono sulla schermata iniziale del dispositivo utente.
Le icone di avvio possono essere utilizzate anche per rappresentare i collegamenti (shortcuts) nella vostra applicazione (ad esempio, un’icona di collegamento contatto permette di aprire le informazioni di dettaglio per un contatto).

Quando si disegna per Android è necessario creare le icone separate per tutti i diversi display presenti sul mercato dei device che montano android gli , schermi che hanno diverse densita di pixel potranno essere a bassa, media, alta e altissima densità. Questa differenziazione assicura che le icone verranno visualizzate correttamente in tutta la gamma di dispositivi su cui l’applicazione può essere installata. Vedere Tips for Designers (Suggerimenti per i progettisti) su come lavorare con più set di icone.

Obiettivi del icona di avvio
Esempio di launcher icons per sistemi e applicazioni di terze parti

Figura 1. Esempi di launcher icons per system applications (sinistra) e applications di terze parti (destra).

Le icone di avvio dell’applicazione hanno tre obiettivi primari:
a. Promuovere il marchio e raccontare la storia delle app.
b. Aiutare gli utenti a scoprire l’applicazione in Android Market.
c. Permettere l’avvio dell’App.

a) Promuovere la storia del marchio
Le icone di avvio applicazione sono l’occasione per presentare il marchio e la storia della vostra applicazione .
Pertanto, si dovrebbe:

• Creare un’icona con uno stile unico e memorabile.
• Utilizzare una combinazione di colori che si adatta il vostro marchio.
• Non cercate di comunicare troppo con l’icona. Una semplice icona avrà più impatto e più memorabile.
• Evitare di includere il nome dell’applicazione nell’icona. Il nome della applicazione sarà sempre visualizzato accanto all’icona.

b) Aiutare gli utenti a scoprire l’applicazione in Android Market
Le icone di avvio fornicono una prima impressione agli utenti potenziali in Android Market. Un icona di alta qualità può influenzare gli utenti che scorrono gli elenchi di applicazioni.

Un icona ben progettata può essere un segnale forte che la vostra applicazione sarà di qualità altrettanto elevata. Consideriamo quindi di lavorare con un designer professionista per sviluppare un’icona di avvio per la nostra applicazione.

c) Funzionare e pemettere l’avvio
Un’icona di successo dovra’ essere ben definita in tutte le situazioni: su qualsiasi sfondo e accanto ad altre icone e widget app.

Per fare questo, le icone dovrebbero:

• Comunicare bene anche dimensioni ridotte.
• Lavorare con una vasta gamma di sfondi.
• Rispecchiare il tipo di illuminazione del laucher (top-lit).
• Se l’icona è 3D, utilizzare una prospettiva che non sia fuori luogo con le altre icone, forward-facing (rivolte in avanti) funziona meglio.
• Icone 3D funzionano meglio con una ridotta profondità.
• Avere un profilo unico per rendere veloce il riconoscimento, non tutte le icone Android app devono avere dimesioni quadrate.
• Le icone non dovrebbero presentare un quadro ritagliato di un’immagine più grande.
• Avere un peso simile ad altre icone. Le icone che sono troppo sottili o che non utilizzano abbastanza spazio spesso non attirano l’attenzione dell’utente, o possono non stare bene in tutti i contesti/background.

Dimensioni e formato
Le icone di avvio dovrebbero essere a 32-bit PNG con un canale alfa per la trasparenza. Le dimensioni finali un’icona di avvio corrispondente a una data densità dello schermo sono riportate nella tabella sottostante.

Table 1. Summary of finished launcher icon dimensions for each generalized screen density.
Tabella 1. Sommario delle dimensioni dell’icona per ogni densità schermo.

	ldpi (120 dpi) (Low density screen)	mdpi (160 dpi) (Medium density screen)	hdpi (240 dpi) (High density screen)	xhdpi (320 dpi) (Extra-high density screen)
Launcher Icon Size	36 x 36 px	48 x 48 px	72 x 72 px	96 x 96 px

È anche possibile includere pochi pixel di padding (imbottitura) nell icone di avvio per mantenere un peso costante visivo con le icone adiacenti. Ad esempio, un’icona di avvio a 96 x 96 pixel xhdpi può contenere una forma 88x 88 pixel con 4 pixel su ogni lato per padding. Questa imbottitura o padding può essere utilizzata anche per fare spazio a un’ombra sottile, che può aiutare a garantire che le icone di avvio siano leggibili in tutto su qualsiasi colore di sfondo.
Icone delle applicazioni in Android Market
Se si pubblica l’applicazione su Android Market, è necessario fornire anche un icona artwork di 512 x 512 pixel ad alta risoluzione. Questa icona sarà utilizzata in Android Market e non sostituisce l’icona di avvio.

Per suggerimenti e raccomandazioni sulla creazione di icone ad alta risoluzione di avvio che può essere facilmente scalata fino a 512×512, si possono vedere Suggerimenti per Designer sul sito Android Developer (Tips for Designers).

Per informazioni e specifiche sulle icone ad alta risoluzione per l’applicazione in Android Market, vedere anche il seguente articolo:
Graphic Assets for your Application (Guida di Android Market)

Cosa fare e cosa non fare
Di seguito sono riportati alcuni esempi presi dalla guida Android developers su come “fare e non fare” , sono esempi da prendere in considerazione quando si creano le icone per l’applicazione.

Disegno Troppo complicato ? Semplificare le icone non dovrebbe essere eccessivamente complicato. Ricorda che le icone di avvio saranno utilizzate a dimensioni spesso piccole, quindi dovrebbero essere distinguibili a dimensioni ridotte.

Icona ritagliata e opaca (cropped and glossy) ? Le icone non devono essere tagliate. Utilizzare forme uniche, se del caso, ricordate che le icone di avvio dovrebbe differenziare la vostra applicazione. Inoltre, non usare troppo lucido (glossy) a meno che l’oggetto rappresentato è un materiale lucido.

Troppo sottile? Le icone non devono essere sottili. Dovrebbero avere un peso simile a quello altre icone. Le icone troppo sottili non si distinguono bene con tutti i background.

Full-frame oppure sottilmente arrotondati e trattati ?Le icone dovrebbero utilizzare il canale alfa, e non dovrebbe essere semplicemente delle immagini full-frame. Distinguere , quando possibile, la propria icona con un lieve ma accattivante trattamento visivo.

fonte: libera traduzione dalle Android Guidelines

Il display Retina permette di visualizzare versioni ad alta risoluzione della vostra grafica. Se ci si limita a scalare la grafica esistente si perde l’opportunità di fornirne immagini accattivanti che gli utenti si aspettano. Si dovrebbe quindi rielaborare le risorse esistenti per creare l’immagine di grandi dimensioni, versioni in qualità superiore che sono:

    Più ricche di texture. Per esempio, nella versioni ad alta risoluzione delle impostazioni e le icone Contatti, le texture di metallo e carta sono chiaramente visibili.

    Più dettagliate. Per esempio, nella versione ad alta risoluzione delle icone Safari e note, si possono vedere dettagli come i contorni precisi dei continenti dietro la bussola e la carta strappata lasciata dalla nota precedente.

 Più realistiche. Per esempio, l’versioni ad alta risoluzione della Bussola e icone foto combinare texture ricca e dettagli per creare rappresentazioni realistiche di una bussola e una fotografia.

Anche se sono più semplici icone della barra di applicazioni o icone dei documenti, si dovrebbe considerare l’aggiunta di dettagli come creare versioni ad alta risoluzione. Per esempio, l’icona della scheda artisti nella tapbar nell’applicazione è una silhouette snella di un cantante. La versione ad alta risoluzione di questa icona è riconoscibile la stessa icona, ma include maggiori dettagli.

Le seguenti tecniche, suggerite da Apple ,consentono di ottenere ottimi risultati;

Come si crea una versione ad alta risoluzione del disegno.
Innanzi tutto bisogna scalare la grafica originale a 200% con il “nearest neighbor” algoritmo di scala. Questo funziona bene se l’opera originale non è stata creata in vettoriale e non include gli effetti di livello. Il risultato è una grande immagine in pixel su cui è possibile disegnare ad alta risoluzione. Questo è un buon modo per iniziare, perché consente di mantenere il layout originale del vostro disegno.

Se l’opera originale è stata creata in vettoriale, oppure include gli effetti di livello, è possibile utilizzare l’algoritmo di ridimensionamento di default al posto dell’ algoritmo “nearest neighbor”.

Aggiungere dettagli e profondità.
Non esitate a disegnare elementi molto piccoli, perché la versione ad alta risoluzione del disegno permette molto più spazio per i dettagli. Ad esempio, un punto di 1 pixel nell’immagine originale diventa un 4-pixel punto (cioè 2 x 2 pixel) nella versione più grande.

Considerate l’ ammorbidimento degli elementi nella scala-up .
Se, per esempio, si ha 1-pixel linea di demarcazione nel disegno originale, potrebbe avere il bold che si desidera quando si  scala fino ad una linea di 2 pixel. Ma per alcune linee ed elementi si potrebbe desiderare di ammorbidire i risultati scalati da frange o addirittura lasciare l’elemento con le dimensioni più piccole.

Considerare l’aggiunta di una sfocatura per ottenere risultati migliori in effetti come text engravings e drop shadows.
Per esempio,l’effetto  text engraving è in genere fatto spostando un’immagine duplicato del testo di 1 pixel. Scalata, questo risultato si tradurrebbe in una larghezza incisione di 2 pixel, che rischia di sembrare molto nitido e realistico con una risoluzione più elevata. Per migliorare questo, è possibile lasciare così come sono (cioè al 1 pixel), ma aggiunge un 1-pixel sfocatura per ammorbidire l’engraving. Ciò si traduce ancora in un effetto 2-pixel wide engraving , ma il pixel esterno appare  più come è solo mezzo pixel di larghezza, che si traduce in un migliore senso della dimensionalità.

Suggerimenti per la Creazione di immagini ridimensionabili

È possibile creare un’immagine ridimensionabile per personalizzare lo sfondo di alcuni elementi dell’interfaccia utente standard, come popovers, pulsanti, barre di navigazione, le barre sulla scheda, e barre degli strumenti (incluse le voci su queste barre). Fornire immagini ridimensionabili per questi elementi può portare a prestazioni migliori per la vostra app.

Per molti elementi dell’interfaccia utente, è anche possibile specificare end caps terminali in aggiunta a un aspetto di sfondo. Una testata definisce un’area dell’immagine che non deve essere ridimensionata. Per esempio, è possibile creare un’immagine ridimensionabile che include quattro end caps che definiscono i quattro angoli di un pulsante. Quando l’immagine viene ridimensionata per riempire area di sfondo del pulsante, le parti definite dalla end caps sono disegnati invariati.

A seconda delle dimensioni dell’immagine che avete preparato,  iOS la ridimensiona strecchiandola (stretch) per completare il background di un dell’interfaccia utente.Lo  stretchper scalare l’immagine viene efettuato senza riguardo per le proporzioni originali. Lo stretching è performante, ma di solito non è auspicabile per un’immagine multipixel che possono distorcere. Eì consigliabile ripetere l’immagine originale come numero di volte necessario per riempire l’area di destinazione. Il Tiling è meno efficiente di stretching, ma è l’unico modo per ottenere un effetto texture o fantasia.

Come regola generale, si dovrebbe fornire l’immagine più piccola (escluse le testate) che comporterà l’aspetto desiderato. Per esempio:

Se si vuole un colore solido, senza pendenza, creare un pixel 1×1  dell’immagine.

Se vuoi un gradiente verticale, creare un’immagine che ha una larghezza di 1 pixel e un’altezza che corrisponde all’altezza del background dell’elemento dell’interfaccia utente.

Se si desidera fornire un aspetto ripetizione texture, è necessario creare un’immagine con dimensioni che corrispondono alle dimensioni della porzione ripetizione della texture.

Se si desidera fornire un aspetto texture non ripetuto, è necessario creare un’immagine statica con dimensioni che corrispondono alle dimensioni della zona sfondo l’elemento dell’interfaccia utente.

Nota: Se si creano immagini ridimensionabile per disegnare su un display Retina, è inoltre necessario fornire versioni ad alta risoluzione delle immagini. Ad esempio, si potrebbe anche fornire una tinta unita 2 x 2 pixel dell’immagine, o di una immagine gradiente che ha una larghezza di 2 pixel.

Le icone e le immagini sono una parte fondamentale l’esperienza degli utenti iOS.
Lungi dall’essere un’elemento puramente decorativo, le icone e le immagini nelle nostre applicazioni svolgono un ruolo essenziale nel comunicare con gli utenti.

Per ottenere i migliori risultati, possiamo arruolare un grafico professionista. Un progettista ed esperto grafico può aiutare a sviluppare uno stile visivo integrato per la vostra applicazione e applicare tale stile a tutte le icone e le immagini del caso.

Apple consiglia di utilizzare le immagini in stile universale in modo che la gente possa facilmente riconoscerle. Eviteremo quindi di concentrarsi su  aspetti secondari o poco visibili.

I tecnici Apple abbracciano la semplicità. In particolare, di consiglia di evitare di stipare un sacco di immagini diverse nella vostra icona. Provate a utilizzare un singolo oggetto che esprime l’essenza della vostra applicazione. Si inizia con una forma di base per poi aggiungere i dettagli con cautela. Se il contenuto di un’icona o la forma è eccessivamente complesso, i dettagli possono diventare confusi e può sembrare sfocato quando ridotto in piccole dimensioni.

L’ utilizzo dei colori e ombre leggere possono aiutare l’icona a esprimere meglio il suo ruolo. Non aggiungeremo quindi il colore solo per fare l’icona più colorata. Inoltre, graduienti regolari di solito funzionano meglio della colore diffusion

In generale, bisogna evitare di utilizzare il testo “greco” o linee ondulate per sottolineare il testo. Se si desidera visualizzare del testo nell’icona, ma non volete attirare l’attenzione sulle parole stesse, iniziare con un testo  poi renderlo piu’ leggibile con lo shirnk e/o raddoppiando i layer .

In generale, creare una versione stilizzata del soggetto piuttosto che utilizzare una foto, anche se a volte può essere opportuno utilizzare una foto (o uno screenshot) per un icona.

Se la vostra applicazione ha un’interfaccia utente molto riconoscibile, è consigliabile creare una rappresentazione di essa invece di utilizzare un immagine del software nell’icona dell’applicazione. La creazione di una versione migliorata dell’interfaccia utente è particolarmente importante in quanto gli utenti potrebbero confondere una versione più grande dell’icona con l’interfaccia stessa del app.

Evitare di utilizzare elementi di interfaccia iOS nel disegno. Non si vuole che gli utenti possano confondere le icone o immagini con l’interfaccia utente iOS.

Non usare le repliche di prodotti hardware di Apple nel disegno. I simboli che rappresentano i prodotti Apple sono protetti da copyright e non possono essere riprodotti in icone o immagini. In generale, è una buona idea per evitare repliche di tutti i dispositivi specifici nel disegno, perché questi disegni cambiano di frequente e le icone o immagini che si basano su di esse può apparire datato.

Non riutilizzare iOS icone delle applicazioni nella vostra interfaccia. Può essere fonte di confusione per gli utenti di vedere la stessa icona utilizzata per indicare cose leggermente diverse in luoghi diversi in tutto il sistema.

Ritrarre sostanze reali con precisione. Le icone che rappresentano gli oggetti reali dovrebbero apparire come se fossero fatti di materiali reali e con massa reale. Icone realistiche replicano con precisione le caratteristiche delle sostanze come tessuto, vetro, carta e metallo, e dovranno trasmettere l’idea del peso di un oggetto.

Utilizzare la trasparenza solo quando ha senso. La Trasparenza in un’immagine può aiutare a descrivere materiali come il vetro o la plastica, ma può essere complicato da usare in maniera convincente. Si consiglia quindi di non utilizzare la trasparenza nella vostra icona dell’applicazione.

Prendendo spundo dall’articolo dal sito Neven Mrgan’s Tumbl :

Immaginiamo di voler disegnare l’icona per un’applicazione IOS. L’applicazione è universale, così dovrebbe funzionare su tutti gli iPhone (e iPod Touch), e su iPad.

I designer sono abituati a progettare icone in varie dimensioni.

Ecco un tipico file PSD per un’icona IOS:

Questa immagine è basata sul file icone in PSD iPhone di Sebastiaan de With, un documento che viene spesso aggiornato.
Si noti che le icone avranno una maschera arrotondata.

Riassumiamo tutte le diverse dimensioni delle icone e come vengono utilizzate:

1). 57 px, iPhone – il classico.
2). 72 px, iPad
3). 114 px, iPhone 4 – assicurarsi che la propria icona risplenda sul Retina Display.
4). 512 px, iTunes – Usato in iTunes e App Store, dove è mostrato in dimensioni fino a 175 px. Purtroppo, non è possibile fornire direttamente la versione 175 px .
5). 29 px, Impostazioni iPhone / Spotlight, Impostazioni iPad – utilizzati in queste visualizzazioni tabella. Minore, ma pur sempre importante!
6). 48 px, Spotlight iPad – Yup, il dispositivo iPad utilizza una dimensione diversa per Spotlight e Impostazioni. Questa dimensione è controversa! Apple docs effettivamente sostiene che l’icona è di 50 px, ma poi c’è questa nota: la dimensione visiva finale di questa icona è di 48 x 48 pixel. iPhone OS trim 1 pixel da ogni lato del disegno e aggiunge un’ombra. Assicurati di tener conto di questo, come si progetta la propria icona.
7). 58 px, iPhone 4 Impostazioni / Spotlight – necessario preparare entrambe le versioni 57 e 58 px , sara’ complicato allineare tale icone se c’è una linea che nel mezzo…
8). 64 px icona del documento – per applicazioni IOS in grado di fornire le icone dei documenti. Benche’ non sia ancora ben chiaro come utilizzare questa ma viene segnalata da apple e non è una cattiva idea iniziare a pianificare subito il suo utilizzo.
9). 320 px icona del documento.
10. Apple consiglia almeno 2 nuovi formati per iPad futuri, 144 px e 96 px.

La tabella riepilogativa ufficiale Apple, contiente i requisiti da rispettare:

Splashscreen (richiesta)320 x 480
640 x 960 (alta risoluzione)Modalità portrait: 768 x 1004
Modalità landscape: 1024 x 748

Descrizione	Dimensioni per iPhone e iPod touch (in pixels)	Dimensioni per iPad (in pixels)
Icona Applicazione (richiesta)	57 x 57 114 x 114 (alta risoluzione retina)	72 x 72
Icona per App Store (richiesta)	512 x 512	512 x 512
Icona per risultati ricerche Spotlight e Impostazioni (raccomandata)	29 x 29 58 x 58 (alta risoluzione)	50 x 50 per i risultati Spotlight 29 x 29 per le Impostazioni
Icona Documenti personalizzati dell’app (raccomandata)	22 x 29 44 x 58 (alta risoluzione)	64 x 64 320 x 320
Icone per WebApp e siti web (raccomandata per i custom document types)	57 x 57 114 x 114 (alta risoluzione)	72 x 72
Icone per Toolbar e Navigation Bar (opzionale)	circa 20 x 20 circa 40 x 40 (alta risoluzione)	circa 20 x 20
Icone TabBar (opzionale)	circa 30 x 30 circa 60 x 60 (alta risoluzione)	circa 30 x 30
Icona Newsstand per App Store (richiesta per Newsstand apps)	Almeno 512 pixel sul lato più lungo	Almeno 512 pixel sul lato più lungo

Nota Apple: Per tutte le immagini e le icone, il formato PNG è raccomandato.
La profondità di bit standard per le icone e le immagini è di 24 bit (8 bit ciascuno per rosso, verde e blu), più un 8-bit canale alfa.
Non è necessario vincolare la palette di colori web-safe. Sebbene sia possibile utilizzare la trasparenza alfa nelle icone create per barre di navigazione, barre degli strumenti e le barre sulla scheda, non usare in icone delle applicazioni.

Nota: e si sta lavorando su un icona webapp, Apple sembra fornire una singola immagine a 128 px che poi viene ridotta.

Solitamente le icone sono progettate con un obiettivo in mente.
Le piccole icone sono normalmente delle caricature, anche se tutte le icone potrebbero essere disegnate in vettoriale, la dimensione maggiore non sarebbe mai “scalata” bene.

Ecco l’icona per la cartella Immagini in Mac OS X:

Si noti che il ridimensionamento lavora per circa 64 px, dopo di che, le forme devono essere ridisegnate, più semplici e chiare, in modo che si possano leggere.
Creare l’icona grande come vettoriale non aiuta nelle dimensioni più piccole. Con un display ad alta risoluzione, infatti, fanno di questo problema è ancora più evidente perché un 64 px di oggi domani sara’ 128 px.

Quindi le icone he dovrebbe essere disegnate più grandi, e in vettoriale – in Illustrator o shape layers di Photoshop. Notiamo he l’utilizzo di Texture puo’ risultare frustrante dato che gli adeguamenti pixel devono essere fatti a manualmente. Il designer fondamentalmente desidera avere una versione dell’icona scalabile all’infinito.

Icona Applicazione

L’icona dell’applicazione è quella che appare nella schermata home di iPhone, iPod o iPad ed è quella che premiamo  per avviare l’ applicazione.

E’ necessario creare differenti versioni dell’ icona applcazione  per essere visibile sul device:

• 57 x 57 pixels (Iphone3)
• 114 x 114 pixels (alta risoluzione per device con retina display iPhone4)
• 72 x 72 pixels (per iPad)

Nel realizzare questo tipo di icona dovremo tener presente che iOS aggiungerà per noi:

• Angoli arrotondati
• Ombra
• Effetto riflesso (puo’ essere rimosso inserendo la chiave “Icon already includes gloss and bevel effects” nel file “…Info.plist” della nostra applicazione)

Icona App Store o Artwork

Per l’Artwork l’icona ha dimensioni 512 x 512 pixel e verrà mostrata nell’App Store. Questa icona, non deve essere necessariamente identica all’icona dell’applicazione, e, viste le dimensioni si puo’  arricchire con maggiori dettagli, tenendo però conto che questra dovrà richiamare lo stile e i colori si quella dell’applicazione stessa.

Questa icona sarà mostrata nella libreria iTunes, insieme a tutte le altre applicazioni scaricate, installate e sincronizzate con i dispositivi Apple interessati, e’ quindi necessaria anche per le distribuzioni Ad-Hoc (in-house -  fuori dall’App Store)

Inoltre questo tipo di icona, puo’ essere utilizzato da iOS quando nella vostra app avete documenti personalizzati e non avete implementato l’apposita icona dedicata a questo scopo.

Icona per risultati ricerche Spotlight e Impostazioni

In assenza di queste icone  iOS modificherà direttamente l’icona della vostra app riducendola e mostrandola, e quindi disegnarle può rendere tutto più gradevole e visibile.

Per iPhone e iPod Touch l’icona sarà la stessa, sia per i risultati delle ricerche spotlight che per le impostazioni:

• 29 x 29 pixels
• 58 x 58 pixels (alta risoluzione retina display iPhone 4)

Per iPad bisogna prevedere sempre due icone diverse, poiche’ le dimensioni cambiano per icona risultati ricerche e icona nelle impostazioni:

• 29 x 29 pixels (per le impostazioni)
• 50 x 50 pixels (per i risultati delle ricerche fatte con spotlight)

Attenzione, la dimensione reale visualizzata di quest’ultima icona sarà 48×48 pixel.  poiche’ iOS taglierà 1 pixel per lato dalla nostra realizzazione grafica per aggiungere l’ombra.

Icona Documenti personalizzati dell’applicazione

Apple prevede di utilizzare l’icona dell’applicazione , modificandola automaticamente, da destinare a questo tipo di uso quando non e’ presente una versione apposita.

Di seguito le dimesioni per le Versioni per iPhone e iPod Touch:

• 22 x 29 pixels
• 44 x 58 pixels (alta risoluzione)

Ovviamene anche in questo caso le icone sono  in formato .PNG  e iOS aggiungerà la tipica ombra.

Versioni per iPad:

• 64 x 64 pixel
• 320 x 320 pixel

Ricordiamo che e’ necessario lasciare dello spazio per gli effetti grafici che inserirà automaticamente iOS.

Per creare l’icona 64 x 64 pixel Apple suggerisce questi 4 passi:

• Creare un’immagine di dimensioni 64 x 64 pixel in formato PNG
• Inserire (tramite ad esempio le linee guida) un margine superiore di 1 pixel nella parte superiore
• Inserire un margine inferiore di 4 pixel
• Inserire un margine di 10 pixel a sinistra e a destra nell’immagine

L’area utile ottenuta sarà di 44×59 pixel. iOS inserirà l’effetto “page curl” in alto a destra e la sfumatura.

Per la versione iPhone 3 da 320 x 320 pixel dovrete lasciare:

• 5 pixels di margine nella parte superiore
• 20 pixels di margine nella parte inferiore
• 50 pixels di margine nei lati dell’immagine

In questo caso l’area utile è inferiore e sarà pari a 220 x 295 pixel e c’e’ da considere che l’effetto “page curl” oscurerà parte della grafica.

Icone per WebApp e siti web

Vale quanto scritto per l’icona dell’applicazione stessa. La differenza sta nel fatto che potrete disattivare tutti gli effetti automatici aggiunti da iOS semplicemente rinominando il file in “apple-touch-icon-precomposed.png” prima di pubblicarlo online (procedura compatibile da iOS 2.0 in poi).

Icone per Navigation Bars, Toolbars, e Tab Bars

Apple raccomanda  e suggerisce di utilizzare bottoni e icone standard all’interno delle proprie applicazioni iOS. E’ possibile comunque disegnare le proprie icone anche per questo tipo di uso quando  le funzionalità della nostra app non sono standard.

Nel caso in cui decidessimo di realizzare delle nostre icone dobbiamo tener presente che:

• L’ icona deve essere semplice, troppi dettagli potrebbero rendere la rappresentazione irriconoscibile e l’uso dell’app risulterebbe meno intuitivo.
• Le icone non devono poter essere troppo simili a quelle standard, nel caso usate quelle già realizzate e fornite da Apple.
• Le icone devono essere fortemente riconoscibili e in nessun caso devono essere offensivi per gli utenti internazionali delle vostre app.
• Non rappresentare icone di prodotti Apple protetti da copyright. I diritti di autore faranno in modo che la vostra app non venga accettata nello store.

• Utilizzare come colore il bianco unito alla corretta trasparenza
• Non includere ombre
• Usare l’anti-aliasing
• Gli angoli smussati devono essere di 90°

Le dimensioni delle icone per toolbar e navigation bar sono:

Per iPhone e iPod Touch:

• Circa 20 x 20 pixels
• Circa 40 x 40 pixels (in alta risoluzione – Retina display iPhone 4)

Per iPad:

• Circa 20 x 20 pixels

Le dimensioni delle icone per le Tab Bar:

Per iPhone e iPod touch:

• Circa 30 x 30 pixels
• Circa 60 x 60 pixels (in alta risoluzione – Retina display iPhone 4)

Per iPad:

• Circa 30 x 30 pixels

Nota: Non è necessario creare questo tipo di icone utilizzando i colori. Non è necessario studiare una versione dell’icona standard a item premuto, iOS aggiungerà l’effetto autonomamente. Gli effetti aggiunti saranno automatici e non e’ possibile cambiare il loro aspetto.

ICONE STANDARD PER LE TabBar

Icona	Nome	Significato
	Bookmarks	Mostra i “segnalibri” dell’applicazione
	Contacts	Mostra i contatti
	Downloads	Mostra i download
	Preferiti	Mostra i preferiti
	Featured	Mostra contenuto in evidenza dell’applicazione
	History	Mostra la storia delle azioni degli utenti
	More	Mostra ulteriori Tab Bar Item
	MostRecent	Mostra gli oggetti recenti
	MostViewed	Mostra gli oggetti più popolari
	Recents	Mostra gli oggetti recenti visualizzati in un periodo definito
	Search	Entra in modalità ricerca
	TopRated	Mostra gli elementi più votati dagli utenti

 

Nomi dei file di icona

Di seguito un elenco per  nominare tutti i file di icona, basterà utilizzare questi nome file per far in modo che iOS riconosca quale mostrare. Il nome e’ case sensitive, quindi fare attenzione a maiuscole e minuscole:

• Icon.png – Icona applicazione iPhone e iPod Touch
• Icon@2x.png – Icona applicazione iPhone e iPod Touch in alta risoluzione
• Icon-72.png – Icona applicazione iPad
• Icon-Small.png – Icona risultati ricerche spotlight (in iPhone e iPod) e Impostazioni (tutti i dispositivi).
• Icon-Small@2x.png – Icona risultati ricerche spotlight (in iPhone e iPod) e Impostazioni (tutti i dispositivi) in alta risoluzione
• Icon-Small-50.png – Icona risultati ricerche spotlight in iPad

Splash

Apple suggerisce che per migliorare l’esperienza dell’utente è utile nella fase di lancio dell’applicazione stessa mostrare una splashscreen. La splash screen dovrebbe essere sempre un’immagine simile alla schermata che apparirà a caricamento avvenuto.

Molti inseriscono il proprio logo o un’immagine di presentazione e Apple approva spesso queste app, ma bisogna tener conto delle sue linee guida per non rischiare imbarazzanti rifiuti in fase di review.
In linea di massima, se il  logo fa parte della grafica della prima schermata che verrà visualizzata  è consigliato inserirlo anche nella splashscreen.

Per la splashscreen di iPhone e iPod touch le dimensioni , che includono l’area di 20 px (40px per retina display) dedicata alla Status Bar:

• 320 x 480 pixels
• 640 x 960 pixels (alta risoluzione)

Le dimensioni della splashscreen per  applicazioni iPad non includono l’area occupata dalla Status Bar e le dimensioni sono:

• 768 x 1004 pixels (modalità portrait)
• 1024 x 748 pixels (modalità landscape)

Eì necessario sempre inserire una splashscreen per ogni tipo di orientamento previsto  (portrait e landscape) .

Apple Developer Reference

•  iOS UI Element Usage Guidelines

• Custom Icon and Image Creation Guidelines