i3Factory World

Your Iphone, iPad & Android Application Factory

Browsing Posts tagged Retina display

iPhone-6-plus_iPhone6_iPhone-5sIn conjunction with iOS 8 Apple unveiled the new iPhone 6 including the Plus version which show, respectively, with a screen of 4.7 “and 5.5″ inches. The new iPhone fundamentally change the screen resolution and retina display than previous models. With full compatibility with standard sRGB we have a better contrast, brightness and white balance improved.
Retina display HD resolution:

  • iPhone 6 1334×750 pixels with 326 ppi
  • iPhone 6 Plus 1920×1080 pixels with 401 ppi

Points

 Initially, the coordinates of all the images were specified in points, these are abstract units and only make sense in this particular coordinate space.
In the original iPhone, the points correspond perfectly to the actual pixels on the screen, but now this is no longer true.
Risoluzione_dimensione_punti_pixel_iPhone6-iPhone-6-plus_iPhone6Plus

Diagrams Source PixelCut: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

Rendered Pixels
The drawings Point-baseed are rendered in pixels. This process is known as “rasterization”.
The point coordinates are multiplied by scaling factors to obtain the coordinates of the pixels. Scale factors produce more for a higher level of detail. Scale factors are typical for iOS × 1, 2 × and 3 ×.

iPhone6-iPhone-6-plus_iPhone6Plus_Dimensione_punti_pixel_risoluzione

Diagrams Source PixelCut: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

The content is made to the pixels with the scale factor. This process is called rasterization.

The content is defined mathematically by using the coordinates of the point.

iPhone6-iPhone-6-plus_iPhone6Plus_render_pixel_pollici_ppi

Diagrams Source PixelCut: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

Physical Pixels
The new iPhone 6 Plus has a screen with pixels of lower resolution than the raster image that is shown in the previous step. Before the image is displayed on the screen, you need to downsampling (resized) per pixel of lower resolution.

iPhone6-iPhone-6-plus_iPhone6Plus_pollici_ppi

Diagrams Source PixelCut: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

iPhone-6-Plus-resize_downsampling_pixeliPhone-6-plus_iPhone6Plus_downsamplingPhysical Device
The last step is to show the pixels calculated on the physical screen. Each screen is characterized by a density of pixels per inch (PPI). This number indicates the number of pixels covered by a thumb, and then how big the pixels appear in reality.
Line rendering

To demonstrate different pixel rendering on different devices, we compare as a broad line 1 point is given on the different iPhone models:

Original iPhone - without the Retina Display. Scale factor is 1 (1x).
iPhone 5 - with Retina Display, the scale factor is 2 (2x).
iPhone 6 Plus - with Retina Display HD. Scale factor is 3 (3x), and the image is then scaled by the rendered 2208 × 1242 pixels to 1920 × 1080 pixels.

The reduction ratio is 1920/2208 = 1080/1242 = 20 / 23. This means that every 23 pixels from the original render must be mapped to 20 physical pixels. In other words, the image is reduced by approximately 87% of its original size.

 

iPhone-6-plus_iPhone6Plus_physical-pixels

Diagrams Source PixelCut: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

iOS iPHONE‘S RESOLUTIONS GUIDE

iPhone2g-3g-3gs_iPhone4_iPhone6-plus_iPhone6Plus_dimensioni

Diagrams Source PixelCut: http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

We often have to update our application with the necessary high-resolution images needed for the new iPad (iPad 3 or iPad 4). Fortunately, the new iPad Mini has maintained the same resolution as the first iPad is 1024 × 768 pixels.
Since it is not always easy to find the documents ufficali Apple, in this article I have again gathered all the information we need to update the icons, the intro, and so on.

First of all let’s start with this handy table:

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

Remember that with the transition from iOS 5 to iOS 6 is where the new iPhone 5, along with the iPod touch 5th generation.
These new Apple devices have only one big change in terms of the development of the App: The resolution of the screen. These devices have a large 4 “screen, WDVGA (Wide VGA Double) 640 × 1136 pixels, 326 DPI Retina display. These devices have the same width but more iPhone 4/4S height of 176 pixels in portrait mode.

App Icon Template

Point out again, as I have done in another article, this useful tool downloaded from the site “appicontemplate.com

By downloading the file you will get a PSD of the ‘icon of the app that, through Smart Objects in Photoshop, allows you to automate the process of exporting various dimensions of the icon.png file that must be included in the bundle of all iOS App

Through this model Photoshop we can only change the icon size bigger and it will automatically render that allow you to have icons of smaller size through a fast workflow.
This model has been created and maintained by the Danish designer Michael Flarup.

How to use (How to) App Icon Template?
The model works with Photoshop CS2 or later. Just open the PSD file with your version of Photoshop and then “right click” on the LAYER  called “SMART EDIT THIS OBJECT” (EDIT THIS SUBJECT SMART) and click on ‘Edit Contents’.
This will open the file Icon.psb and you can create your artwork in this canvas (painting). After saving the Icon.psb should be automatically rendered for the various sizes of main PSD file. And is possible to use the Actions (automated actions) of Photoshop that are bundled with the resource to export icon file versions squared and rounded corners.

Good Design!

iPhone5 has a larger screen than its predecessors. Developers iOS6 must support resolutions of 640 x 1136 px instead of 640 x 960 px pf iPhone4.
But even in this case if you follow the logic Apple work to be done is not at all complicated.

The blog   http://blog.mugunthkumar.com/coding/supporting-the-iphone-5/ proposes to follow four phases:

Phase 1:

iPhone 5 requires a new set of instructions, armv7s. Only in the last version of Xcode (4.5) supports the generation instruction set armv7s. Doa note that Xcode 4.5 no longer supports armv6 and deplores iPhone 3G and older devices. So we must now develop our application using Xcode 4.5

Phase 2:

The next step is to add a picture to launch (Default-568h@2x.png). When you build the project with Xcode 4.5, you receive a warning, “Missing 4 Retina launch image”. Click “Add” to add a default image to the project.

 

Step 3:

However, most of the nib file still will not be scaled correctly. The next step is to check the mask to automatically resize (auto resizing mask) of all the nib file and make sure that the view (view) in the nib file is automatically sized according to the new height of the view.

 

The properties that are used are:

UIViewAutoresizingFlexibleTopMargin,
UIViewAutoresizingFlexibleBottomMargin,
UIViewAutoresizingFlexibleHeight.

It uses UIViewAutoresizingFlexibleHeight for display on top so that car size with the main window. It uses the UIViewAutoresizingFlexibleTopMargin and / or UIViewAutoresizingFlexibleBottomMargin for subviews.

UIViewAutoresizingFlexibleTopMargin is used if you want the subview eimanga “nailed” to the bottom (top edge is flexible) and UIViewAutoresizingFlexibleBottomMargin is used if you want the secondary display is “pinned” to the top (I bottom is flexible).

If you are using Cocoa Auto Layout, this step becomes optional. However, self Layout is not supported on iOS 5.

 

Finally, any Layer that you have added to the view must be manually resized. The following code shows how to do this. We use patternLayer to add a pattern for all view controllers. You need to resize the method viewWillLayoutSubviews.

 

-(void)viewWillLayoutSubviews {

self.patternLayer.frame = self.view.bounds;
[super viewWillLayoutSubviews];
}Step 5 (if you were a messy coder):

 

step 5

If the height of the view was encoded at 460 or 480, you may need to change all iinsrendo bounds. For example,

 

self.window = [[UIWindow alloc] initWithFrame: [[mainScreen UIScreen] bounds]];

instead of

self.window = [[UIWindow alloc] initWithFrame: CGRectMake (0, 0, 320, 480)];

 

Create images with the new dimensions

As I could see on the blog http://redth.info/get-your-monotouch-apps-ready-for-iphone-5-ios-6-today/ Unfortunately, the naming convention of image-568h @ 2x. png only seems to be used for the image by default, but does not apply to other images of ‘application. This means that if you are using a custom background image for display (eg UITableView background), you may need to create a new background image at the correct resolution, and the application to determine when to use each image.
It would be nice if Apple had extended into the new SDK support for the new screen using the method:
[UIImage imageNamed:@"my-image"]

Currently I can point to “my-image” the name of my image (without extension) and the operating system looks for the image in the application bundle according to this criterion: if the screen is an image with the search type retina @ 2x suffix in the name, if not found looks for the image without suffix. We would have expected from Apple to extend the algorithm to include the ability to search for the suffix-568h @ 2x in the case of screen sizes 4 “. Unfortunately it is not and that is why we encode it explicitly in our code.

For example, in our non-4inch compatible app, I have two images:

Images / TableViewBackground.png – 320×358
Images / TableViewBackground@2x.png – 640×716

With the new resolution, I need to create a third image (we decided to use the option-568h @ 2x.png naming convention, even if it is not processed by Apple):

Images/TableViewBackground-568h@2x.png

An elegant approach is to create a new category for UIImage class (with a little imagination we call UIImage + Retina4), and perform at runtime within the category of a substitution method “imageNamed:” with one that can handle the new Convention:


// inside UIImage+Retina4.h
#import

@interface UIImage (Retina4)

@end

// all’interno di UIImage+Retina4.m
#import “UIImage+Retina4.h”
#ifdef TARGET_MAC_OS
#import
#else
#import
#endif

static Method origImageNamedMethod = nil;

@implementation UIImage (Retina4)

+ (void)initialize {
origImageNamedMethod = class_getClassMethod(self, @selector(imageNamed:));
method_exchangeImplementations(origImageNamedMethod,
class_getClassMethod(self, @selector(retina4ImageNamed:)));
}

+ (UIImage *)retina4ImageNamed:(NSString *)imageName {
NSMutableString *imageNameMutable = [imageName mutableCopy];
NSRange retinaAtSymbol = [imageName rangeOfString:@”@”];
if (retinaAtSymbol.location != NSNotFound) {
[imageNameMutable insertString:@”-568h” atIndex:retinaAtSymbol.location];
} else {
CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
if ([UIScreen mainScreen].scale == 2.f && screenHeight == 568.0f) {
NSRange dot = [imageName rangeOfString:@”.”];
if (dot.location != NSNotFound) {
[imageNameMutable insertString:@”-568h@2x” atIndex:dot.location];
} else {
[imageNameMutable appendString:@”-568h@2x”];
}
}
}
NSString *imagePath = [[NSBundle mainBundle] pathForResource:imageNameMutable ofType:@”png”];
if (imagePath) {
return [UIImage retina4ImageNamed:imageNameMutable];
} else {
return [UIImage retina4ImageNamed:imageName];
}
return nil;
}

@end

What this code does is initializing replace Apple’s implementation of “imageNamed:” with our “retina4ImageNamed:” (and vice versa). At the very moment when the runtime calls “imageNamed:” actually going to call our function that will load the image optimized for the screen to 4 “on condition that it exists and that we are running the app on a device with this screen (including the simulator). If the image is not present or the screen is the traditional 3.5 “would then call the original function (renamed due to the initial exchange).
Obviously, this implementation can not be used in case the loading of images occurs explicitly by means of calls of the type
[UIImage imageWithContentsOfFile …]
in which the name of the file to be constructed explicitly.

Retina display per iPad 3, risoluzione 2048 x 1536

According to various rumors and mainly based on the statements of Richard Shim (DisplaySearch), the leading provider of display and LG, Samsung and Sharp would started production of Retinal Display for iPad3 with twice the resolution of 2048 × 1536 pixels. The screen will appear the same size as the iPad, 10-inch LCD (not AMOLED) with aspect ratio of 4:3.
Apple could  start the commercialization of iPad 3 new generation in the first quarter of , 2012.

We usually advise designers to create graphics for applications with very high resolution so its can, in future, be easily adapted to all IOS devices. For example, if the design of an icon or a splash page, what I continue to report to the graphics is that developers should never from low-resolution icons, which may be grainy on devices with higher resolution.
Experience teaches us about Apple aims high-quality graphics and is therefore expected that in future models screens are installed at more high density of pixels (dpi). But often the graphics and agencies prefer not to hand over files with these features in order to minimize the workload, a practice that will never be in line with the philosophy of i3Factory whose guidelines on the development are always trying to predict the next market moves.

As we know the images used for applications for the Apple devices are distinguished by a convention on the same file names of images, which provides that all images intended for Retinal Display your name must end with the characters @2x.
This agreement indicates just an image file to double the resolution, which in the case dell’iPhone4 is 960 x 640 pixels, while in the case of the iPad3 will be 2048 x 1536 pixels.
We note, for example, the file “image.png” iPad will have a canvas in any size 1024 x 768 pixels while the same file for retina display “image@2x.png”, for iPad 3 will have a canvas of resolution 2048 x 1536 pixels.

 

Taking up an article of melabog they discover that among the files of the new app iBooks  2 (Presented during the Apple event on January 19, 2012) have been found some graphics designed for a resolution of 2048 x 1536 pixels, as in the previous version of iBooks .

One of the reasons why some were already long on the production of a device with iPad Retinal Display it was the discovery of these high-resolution images already in the first version of iBooks, and also the same as Apple recommends developers to work with images high resolution, we can be sure that the following images unearthed by melabog in iBooks 2 as a confirmation of the presence of Retinal Display for iPad-3.

 

Accordatore i3F: Nuova grafica Retina per Iphone 4

Guitar Tuner i3F è disponibile in Apple Store al link: http://itunes.apple.com/us/app/guitar-tuner-i3f/id359208061?mt=8

Questa la nuova versione del più semplice e utile Accordatore per Chitarra (Guitar Tuner)
Retina Supporto dei display
Graphic modifiche
Aggiunto centesimi
Mostra la nota per adattarsi
Testato su OS 4.x

Metronomo i3F Nuova grafica per Retina Display iPhone 4

Il Metronomo i3F è disponibile in Apple Store al link: http://itunes.apple.com/us/app/metronome-i3f/id368200682?mt=8

Aggiunto iPhone 4 Retina display grafica
Nuovo stile grafico
Aggiunto gamma di BPM 5-250
Aggiunto fine impostazione BPM

Leggendo un’interessantissimo articolo di Marc Edwards su Smashing Magazine ho deciso di citarne e tradurne le parti piu’ significative dato che spesso mi trovo a dover parlare con i clienti della effettiva necessità di progettare le proprie app tenendo conto che le tecnologie audiovisive sono in costante evoluzione.
L’iPhone 4 dispone di una risoluzione di gran lunga superiore (614.400 pixel) rispetto ai modelli iPhone precedenti e ha di fatto un display quadruplicato di 153.600-pixel  anche se lo schermo ha le stesse dimensioni fisiche, così quei punti in più sono utili per ulteriori dettagli – due volte il dettaglio in orizzontale, e due volte in verticale.

Lo Scaling dell’interfaccia utente (UI) per i display a  maggiore dettaglio – o piu’ spesso un aumento della dimensione display – non è un problema nuovo. Le interfacce che sono in grado di scalare sono dette: ” indipendenti dalla risoluzione” (resolution independence).

In un recente articolo, Neven Mrgan ha descritto l’ indipendenza dalla risoluzione: “RI [risoluzione indipendente] come obiettivo, e non come una tecnica. Significa avere contenuti e risorse che potranno essere significative in dimensioni diverse. “Se è un obiettivo, non una tecnica specifica, quindi quali tecniche esistono? Come Apple ha risolto il problema di Ios?

Layout Fluidi (Fluid Layout)

Mentre le applicazioni che sfruttano elementi  nativi dell’interfaccia utente di Apple richiedono molto meno lavoro quando le si progetta per la visualizzazione Retina, ciò che ci interessa altamente personalizzati, applicazioni grafiche-driven che necessitano di una buona dose di lavoro per sfruttare al massimo le Retina display.

Sebbene non sia strettamente indipendente dalla risoluzione, l’utilizzo di un layout liquido può aiutare a gestire un app per approfittare di uno schermo più grande  operando sul padding o modificando il layout dinamico. Moltissime applicazioni Mac, Windows e  per Linux utilizzano questo metodo, cosi’ come fanno alcuni siti web.

Questo è parzialmente cio’ che Apple ha gestito con la differenza di risoluzione da iPhone a iPad – molti elementi dell’interfaccia utente hanno la stessa dimensione in pixel, ma “padded” in modo da utilizzare la parte reale dello schermo. La barra di stato è un buon esempio di questo metodo. Funziona perché la densità dei pixel del 3GS iPhone e iPad sono simili (163ppi vs 132  ppi).

Layout fluido e’ utile o quando il cambiamento di densità di pixel è minore, ma non sono di aiuto quando si passa da un display iOS non-Retina ad uno Retina (163 ppi a 326 ppi). L’immagine seguente mostra cosa sarebbe successo se una applicazione per iPhone è stata semplicemente ridimensionata per soddisfare i display ad alta risoluzione di iPhone 4. Pulsanti e zone di touch sarebbero della stessa dimensione in pixel, ma la metà in termini di dimensioni fisiche a causa della maggiore densità di pixel, rendendo le cose più difficili da leggere e da toccare.

Just-in-time Resolution Independence

Un altro approccio per la gestione di differenti risoluzioni e densità dei pixel è di disegnare tutto utilizzando il codice o le immagini vettoriali (come i PDF), in fase di runtime. L’utilizzo del vettoriale Ti permette di designare o scrivere codice una sola volta, e per display a qualsiasi risoluzione, anche a scala frazionata.

Purtroppo, utilizzando immagini vettoriali si tende ad essere più avidi di risorse e mancanza di controllo livello di pixel. L’aumento delle risorse non può essere un problema per un desktop, ma è un problema rilevante per un sistema operativo mobile. La mancanza di controllo del livello di pixel è un vero e proprio problema per gli elementi più piccoli . Modificando delle dimensioni di un’icona di un solo pixel  si perde chiarezza.

Neven Mrgan sottolinea in suo famoso articolo che abbiamo gia citato  che:

“… Semplicemente non è possibile creare ottimi, icone dettagliate che possono essere arbitrariamente ridotte a dimensioni molto piccole, mantenendo la chiarezza. Piccole icone sono delle caricature: esagerano alcune caratteristiche, basta allineare le forme su una griglia. Anche se tutte le icone possono essere eseguite come vettori, la dimensione più grande non sarebbe mai scalata in basso bene “.

Anche se qui si sta parlando esclusivamente di icone, descrizione di Neven Mrgan è adatta per la maggior parte degli elementi dell’interfaccia utente. Le decisioni di immagini in scala sono un lavoro da creativo, non da meccanico. Gli elementi vettoriali non sono adatti per tutte le risoluzioni, se si da valore alla qualità del risultato.

Ahead-of-time Resolution Independence

I migliori risultati di qualità – e il metodo che Apple ha scelto per la transizione dal iPhone 3G a iPhone 4  – proviene da immagini pre-renderizzate, costruite per i dispositivi particolari, su risoluzioni specifiche: sviluppate  progetti su misura per ogni formato richiesto, se volete. E ‘più lavoro, ma le immagini in pre-rendering assicurno sempre il miglior risultato possibile.

Apple ha scelto di raddoppiare esattamente la risoluzione del iPhone 3GS  per l’iPhone 4, rendendo il fattore scala ancora più semplice (diverso dall’ approccio di Google e Microsoft – si noti che questo articolo non è rilevante per l’ultima versione di Microsoft sistema operativo mobile – dimostrando ancora una volta che controllare l’intero stack ha dei vantaggi enormi).


Attualmente, ci sono tre risoluzioni IOS:

* 320 × 480 (iPhone / iPod touch)
* 640 × 960 (4 iPhone e iPod con display a Retina)
* 768 × 1024 / 1024 × 768 (iPad)

In pochi anni, sembra altamente probabile che la line-up saranno:

* 640 × 960 (iPhone / iPod touch con display retina)
* 1536 × 2048 / 2048 × 1536 (iPad con display retina)
* Qualche tipo di periferica IOS desktop iMac dimensioni con un display Retina

Ci sono differenze significative tra la progettazione di applicazioni per iPhone  e per iPad, il layout delle app deve essere in parte o completamente rielaborato  in ogni caso – non si può semplicemente scalare per  iPad la vostra app per iPhone , e aspettarsi che tutto funzioni bene o sche abbia un usabiliyà su iPad. La differenza di dimensione dello schermo e il fattore di forma significano che ogni dispositivo dovrebbe essere trattato separatamente. La dimensione del dell’iPad permette di visualizzare più informazioni sullo schermo, mentre le applicazioni per iPhone in genere hanno bisogno di essere più profonde, con diversi livelli per poter fruire bene di tutte le informazioni.

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.

Steve Jobs presenta al Keynote l' iPhone 4's Retina Display

Steve Jobs durante il Keynote ha presentato il  display dei nuovi dispositivi Apple.
L’iPhone 4 utilizza il Retina display, ovvero uno schermo che ha come caratteristica quella di aver diviso il pixel in 4, questo  significa che  per ogni pixel presente sul 3GS o sul 3G ora ne avremo 4.  Quindi l’iPhone 4, come anche il nuovo Ipod Touch (4a generazione) ha una densità di pixel maggiori rispetto a quelli dei modelli precedenti che hanno sempre avuto lo schermo da 3,5 pollici e 320×480 pixel.

Il nuovo telefono cellulare iPhone 4 raddoppia la risoluzione di 640×960 pixel.

Improvvisamente tutti i progettisto hanno dovuto pensare a 3 display diversi:

1) iPhone e Ipod Touch
2) IPhone 4 e iPod Touch 4a generazione
3) Ipad

Nota: sempre meglio che la progettazione per i telefoni Android, che conterà circa 60 diversi dispositivi e fattori di forma

Notiamo che a partire dal iOS 4, le dimensioni sono misurate in “punti” (points)  invece di “pixel”.
Lo schermo iPhone è 320×480 punti. Le applicazioni esistenti funzioneranno allo stesso modo su dispositivi  con Ios 4, cosi’ come per sistemi operativi precedenti. Nei sistemi precedenti un pixel è un punto, un one-to-one match.
In altre parole, le dimensioni per tutti i vari elementi di IOS 4 rimangono le stesse, ma le loro unit sono cambiate: basta sostituire i punti in pixel.

Su iPhone 4, un punto è di due pixel; se si traccia una linea da un punto,  si vede su due pixel di larghezza. Quindi: basta specificare le misure in punti per tutti i dispositivi, e Ios disegna automaticamente tutto alla parte destra dello schermo. Testo e le immagini rimangono delle stesse dimensioni fisiche su entrambi i telefoni , vecchi e nuovi. Questo vale per le immagini bitmap in applicazioni legacy, anche;  iOS 4  raddoppia automaticamente i pixel per adattarsi alla risoluzione del nuovo device.

Naturalmente, raddoppiare i pixel non fara’ visualizzare  sul display un’immagina molto nitida.

Per avere delle immagini nitide che sfruttino a pieno il Retina display, è necessario includere un secondo insieme di tutti i file grafici.
Per ogni immagine nella nostra applicazione dovremo aggiungere una seconda versione che è due volte più grande, aggiungendo @ 2x al nome. A esempio, per un’immagine a bassa risoluzione di nome image.png,  si dovrebbe aggiungere un secondo file denominato image@2x.png.
La nuova immagine verrà prelevata automaticamente dall’ iPhone 4.
NB: Ovunque il codice richiede in file image.png , se presente il file image@2x.png verrà utilizzato al suo posto se si sta utilizzando un Retina display.

1. Fare sempre 2 Versioni delle immagini;
Da quello che abbiamo detto quindi dovremo fare sempre due versioni delle immagini. Ifatti iOS 4 fa scaling up di immagini a bassa risoluzione per iPhone 4 ma non funziona il contrario.

Quindi Progettare per i nuovi dispositivi potrebbe essere un lavoro extra per creare due set di immagini per entrambi i dispositivi vecchi e nuovi. Sembra non esistano altre soluzioni  e questa è la strada  da percorrere.

In termini pratici , cio’ significa che chi usa solamente Photoshop dovrebbe imparare a prendere confidenza con Illustrator o un qualsiasi altro programma di grafica vettoriale.
Infatti, costruendo la nostra applicazione  in formato grafica vettoriale, è possibile esportare in qualsiasi formato senza problemi di “sfocatura” delle immagini.

Tutto questo ci fa pensare che non sarà l’ultima volta che vedremo una nuova risoluzione dello schermo di un device Apple, e utilizzando la grafica Vettoriale si potrà essere pronti per la prossima volta.

2. Eccezione: app icon.

Abbiamo sempre bisogno di solo tre dimensioni delle icone:

1) un grande 512px icona per l’App Store
2) una icona 57px per la schermata iniziale
3) l’icona di un 29px per i risultati della ricerca.

Ora, se si sta costruendo una applicazione universale per iPhone, iPhone 4, e iPad, devi creare 11 – undici! – Icone separate. Il mix comprende anche due 57×57 e 58×58 versioni.

a) App Store Icon

* 512×512 (ridotta a 175×175 per la visualizzazione nello store)

b) Icona applicazione

* 114×114 (iPhone 4)
* 57×57 (vecchio iPhone)
* 72×72 (iPad)

c) Risultati della ricerca Spotlight e Impostazioni icona

* 58×58 (iPhone 4)
* 50×50 (per i risultati di Spotlight iPad)
* 29×29 (le impostazioni per iPhone iPad piu’ vecchi)

d) Document Icon

Questo è un tipo di nuova icona di Ios 4. E ‘usata se la vostra applicazione crea un tipo di documento.
L’ iPad utilizza l’icona del documento in due formati differenti.

* 320×320 (iPad)
* 64×64 (iPad)
* 44×58 (iPhone 4)
* 22×29 (vecchio iPhone)

3. Neven Mrgan Photoshop template

Abbiamo gia parlato in passato di questa utilissima risorsa:
Il famoso Icon Photoshoppery. L’inimitabile Neven Mrgan ha costruito insieme un modello di Photoshop per contribuire a rendere il lavoro rapido. Trovate tutto sul web a questo link.

4. CSS3 per iPhone4
Segnaliamo inoltre WaltPadper  tutti i dettagli su come usare CSS3 per l’ iPhone 4 (e altri dispositivi high-res).
Trovate qui un’interessante articolo in inglese:  Targeting the iPhone 4 Retina Display with CSS3 Media Queries

Con questo articolo  mostiamo la differenza di risoluzione dei diversi modelli di Iphone a seguito del lancio del rivoluzionario display Retina sia per iPhone 4 che per l’ultima generazione degli iPod Touch.

La dimesione del Retina display non differisce da quello presente sui dispositivi iPhone 3GS che sonorimaste immutate a 3,5 pollici di diagonale.

Il retina Display differisce per risoluzione.

Lo schermo dell’iPhone 3GS , come quello del 3G, offre una risoluzione di 480×320 pixel a 163ppi (pixel per pollice).

Il nuovo display Retina ha una risoluzione doppia, 960×640 pixel a 326 ppi (pixel per pollice).
La qualità è quindi garantita da un numero di pixel totali pari al quadruplo di quelli dell’iPhone 3GS, 3G e gli Ipod Touch (di 3a generazione).

Segnaliamo inoltre che il  Retina display è in grado di offrire un contrasto di 800:1, e ottenere sullo schermo colori molto profondi e vicini alla realtà (Maggiore è il contrasto epiu’ alto  sarà il rapporto fra la luminosità del bianco e la luminosità del nero).