Suggerimenti per la creazione di Icone e Artworks per il Retina Display

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.

Icone ricche di textures

    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.

Icone Dettagliate

 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.
Icone Realistiche

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.
Icon Tab dettagliata

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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*