Questa secondo articolo dedicato alla progettazione del layout per il retina display proviene sempre dalla lettura e traduzione dell’interessante articolo articolo di Marc Edwards su su Smashing Magazine

Costruire progetti scalabili

Costruire applicazioni per l’iPhone 4 display Retina prevede la creazione di due serie di immagini, un a 163 ppi e un altr a 326 ppi. Le immagini A 326  ppi dovra’ includere @ 2x alla fine del nome del file, per indicare che essi, sono al doppio della risoluzione.

Quando si tratta di costruire elementi di un interfaccia utente in grado di scalare facilmente con Adobe Photoshop, le bitmap sono il tuo nemico, perché “pixelizzano” o si sfocano quando se ne modifica la scala. La soluzione è quella di creare un colore a tinta unita, modelli o layers con maschere vettoriali (solo assicurarsi di avere “snap to pixel” attivo quando possibile).  A volte, il passaggio a tutti i vettori non ha vantaggi significativi.

Prima che qualcuno ne parli non si stanno suggerendo dei metodi nuovi, e sicuamente molti progettisti di icone è lavorano in questo modo da anni.

Di norma e’ meglio disegnare elementi semplici direttamente in Photoshop utilizzando il Tool col Rettangolo arrotondato. Disegnare cerchi utilizzando il Rounded Rectangle Tool con un raggio d’angolo molto ampio, perché lo strumento ellisse non può fare lo snap  di pixel.
I gruppi di layer possono avere maschere vettoriali , e si utlizzano per il compositing complesso (opzione-trascinare una maschera da un altro livello per creare una maschera di gruppo).

oggetti più complessi vengono trascinati in Adobe Illustrator per l’esatta dimensione dei pixel, e poi incollate in Photoshop come un shape layer. Bisogna fare attenzione quando si incolla in Photoshop, il risultati non si allineano sempre come dovrebbero – è spesso un mezzo  pixel fuori l’asse x, asse y o entrambi. La soluzione è lo zoom, bisogna scorrere il documento con lo strumento Mano e incollare di nuovo. Ripetere l’operazione fino a quando si allinea tutto. E’ esasperante, e il metodo funziona dopo alcuni tentativi. Un’altra opzione è quella di ingrandire fino al 200%, selezionare il percorso con la selezione diretta di utensili, e spostarla di una volta, fino a che si muoverà tutto esattamente 0.5px.

Anche gli oggetti più complessi, che richiedono più colori vengono disegnati in Illustrator per l’esatta dimensione dei pixel, e quindi incollati in Photoshop come oggetto avanzato. E ‘l’ultima risorsa, anche se – gradienti non sono dithered, e la modifica successiva risulterà più difficile.

Se avete bisogno di usare un bitmap per una texture, ci sono tre opzioni: usare un pattern layer, un pattern layer style, o costruire un layer bitmap con le dimensioni 2 × e poi trasformarlo in un oggetto avanzato. E’ preferibile usare pattern layer styles, nella maggior parte dei casi, ma con attenzione: i patterns vengono scalati con l’interpolazione bicubica quando si scala l’intero documento, in modo che diventino “softer “.  La soluzione è creare due versioni di ogni pattern (modello), quindi modificare manualmente il “pattern layer styles “per il modello corretto dopo la scalatura – un poco noioso, ma del tutto pratico.


Scalare l’immagine (Scaling Up)

A questo punto, il progetto dovrebbe essere in grado di scalare al doppio esattamente e senza intoppi.

Normalmente si prepara prima  una Action di Photoshop che permette di fare uno snapshot della cronologia, poi la scala al 200%. Ciò significa, che si puo’ì avere la risoluzione al display retina con solo un clic. Se Vi senti sicuri e  avete costruito tutto bene, dovreste essere in grado di scalare, modificare, poi ri-scala verso il basso e continuare a modificare senza alcun tipo di degradazione. Se avete problemi, uno snapshot è lì pronta. Utilizzando un unico documento per entrambe le risoluzioni, significa non dover tenere due documenti in sincronia – un enorme vantaggio.

Una avvertimento: i “layer styles” possono contenere solo valori interi. Se si modifica un ombra offset da 1 px con il documento a 2 × dimensioni, e poi scala verso il basso, il valore finirà come 1 px, perché non può essere pari allo 0,5 px (un valore non intero). Se si richiede modifiche specifiche per la versione 2 × del file di Photoshop, dovrete salvare quella versione in un file separato.

Esportazione, exporting.

Ora,  qualche brutta notizia: il processo di esportazione di tutte le immagini per costruire un’applicazione può essere estremamente noioso, e non ci sono molti consigli in questa fase che possano aiutarvi.

Il miglior metodo di esportazione sembra essere: attivare il layer che si desidera visibile, fare un perimetro di selezione dell’elemento, quindi utilizzare Copia elementi uniti e incollare la selezione in un nuovo documento – non è molto divertente quando si hanno centinaia di immagini da esportare.

Il problema è amplificato quando si salva per l’esposizione Retina, dove ci sonoil doppio delle immagini ; ad ogni immagine a 1 × deve corrispondere un  immagini 2 ×  con massima precisione.

La soluzione migliore sembra essere la seguente:

* Crea il tuo design a 1 ×
* Utilizzare Copia elementi uniti per salvare tutte le 1 × immagini
* Duplicare l’intera cartella contenente le immagini a 1 ×
* Utilizzare Automator per aggiungere @ 2x a tutti i nomi dei file
* Aprire ogni @ 2x immagine ed eseguire la “Scala del 200%” azione di Photoshop. Questo ti dà un file con il corretto nome del file e dimensione, ma con contenuti upscaled
* Scala il tuo  documento di progettazione principale Photoshop del 200%
* Utilizzare Copia elementi uniti (Copy Merged) per incollare gli elementi di qualità superiore in ogni @ 2x documento, disattivare il livello di qualità inferiore, quindi salvare per il Web, sovrascrivendo il file.

In alcuni casi, l’opzione di Photoshop “Esporta i livelli per i file” (Export Layers To Files) può aiutare. Lo script può essere trovato nel menu File.