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:

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!

Recently in some app, we have significantly reduced the size of the IPA file that we send to Apple.
We develope an app with a lot of graphic content an we have reduced about 60% the size of the packet  sent to Apple, the so-called bundle file.

When you develop a universal iPad / iPhone app, and, above all, if you want to add support for viewing the retina to the new iPad 3, we can rest with the Size of the package rather excessive.
Many apps are designed for a multitude of textures in full screen, this is because many designers prefer to illustrate their ideas as better. These images, if you think iPad 3, for the dimesion of 2048 x 1536, yhe PNGs can be very heavy. The conversion of some of these images in JPEG format will save a lot of space.
It ‘a shame that the jpeg does not load faster, but some NPCs may also be more than 10MB, when they are in jpeg converted tha weigh is about ~ 200Kb.
This is a good first step, but you have to be very careful to avoid damaging the quality.

The conversion from png to jpg is not enough: after you convert as many great texture, the weight of the bundle IPA can still be consistent.
Our goal is to be almost always under 20 MB so  the old devices can download the app even without the WiFi.

ImageOptim: Basterà lanciare al suo interno la singola immagine o anche un gruppo, e saranno immediatamente compressi senza ridurre la qualità . Si riduce in media di circa il 15–35 %

Reading between the different sites I found some useful tips in the blog of Sam Soffes (http://samsoff.es/posts/image-optimization-on-ios) in his article recommends the use of ImageOptim, a small program that optimizes images. With this app for the Mac osx Tiflis are processed so as to occupy less disk space and so they can be loaded more quickly,” through the use of providing the best compression parameters to remove unnecessary comments and color profiles. The software handles PNG, JPEG and GIF animation.
ImageOptim integrates the various optimization tools: PNGOUT, AdvPNG, pngcrush, extended OptiPNG, jpegoptim, jpegrescan, and jpegtran Gifsicle.
Particularly suitable for publishing images on the web (shrinks images easily “saved” for the Web in Photoshop) is useful for creating applications rivelto Mac and iPhone / iPad ever read.

Also you can convert many images as PNG8, Photoshop, under File> Save for Web & ‘can export as PNG24 PNG8 instead of those images that are fine as GIF. Even if it does not support alpha variable, is ideal for simple images.
Sam considers ImageOptim even fantastic, processes the images through a series of tools squeezing as much as possible and without reducing quality. Even if you saved “for-web” all images, ImageOptim is able to compress more than 50%. Some files have a dramatic reduction up to 90%.

Sam has processed all the images through ImageOptim twice. The second time it was able to compress some images even more in depth.
It ‘important to note that this is all done in lossless compression.

It is possible to make the images even more read ImageAlpha (from the creators of ImageOptim). It is a tool that allows you to create PNG8 images with alpha variable.
This will save a lot of space. This is a more manual process than ImageOptim, but it works well to enlarge the images with alpha that does not have a lot of colors.

Note: Be sure to turn off image optimization Xcode or you will undo all your hard work when crerete your bundle.

Conclusion

We have heard mixed reviews on these products. Some claim to have had problems with these instruments, while others are fully satisfied.
In our experience it works quite well;
if you are trying to reduce the size of the app (bundle), then we recommend that you use these tools.

For the most ‘experts:
If you want to try to make an even higher compression, you can try to use the fork di Scribd del AdvanceCOMP John Englehart (the creator of JSONKit);
it is a product a little too hardcore, but we would recommend to most people-‘-geeks give it a try.

Normally developers do not have Photoshop and aren’t design guru and, in general, certainly hate to redo their work to meet the needs of the expert designers.
So we decided to report a infographic guide designed for designers who want to make App for IOS and help send the correct files for the developer.

The infographic style explain everything with an image, we propose that vo below:

Source

First of all, as we see in the image needs to remember the size of different device from Apple.

Iphone and ipod touch until the third generation: 320 x 480 px / 163 PPI
Iphone4 and ipod tpuch generation: 640 x 960 px / 326 PPI
iPad & iPad2: 1024 x 768 px / 132 PPI
iPad 3: 2048 x 1536 px / 264 PPI

Apple recommends into using icons:

44×44 px for control buttons

Another suggestion, you have to prepare the icons starting from size 512 x 512 px and 1024×1024 px in case of iPad with retinal display, always paying attention to visonare design when they are so much smaller.

The rest of the tips are much more clear if you read carefully what is reported in the picture posted above.

Source: infographic post, that all summed up by an image inserted in the FSM blog (http://www.funkyspacemonkey.com/ios-app-designers-guide-infographic)

When you decide to design an app you must always follow the basic principles of industrial design.
Many people think of this commissioning an app, but when you are describing the application and then how their idea can be translated by the user experience and graphic interface (User Interface & User Experience), they are unprepared and very often they hide behind phrases like “I do not know this is a job for engineers, lets see this to the technicians …see ye.”

Needless to say,  when the  “technicians” get to work these people, who have no concept to delegate, will begin to demand substantive changes giving advice and information of any kind and almost always only after the app came to final stage of its development.
And the well-known concept that the “technical”, and engineers, first build the core of the application and then they adapt the design and  they do the opposite, in spite of themselves, only if the commitment are valid and convincing, especially when this is decided right from beginning of the design.
In accordance with the approach of “you do that then we see”, wanted by professionals distracted and ill prepared, the final aesthetic result can be poor which seem as every engineer knows that, before starting to write code, you need to have clear UI principles with a description of the functions related to the experience of the user.

Some sophists can criticize me for using the word “user”, which sometimes is not very appealing if you think that the end users are just people, or individuals users. This difference in meaning of words is very clear to me, but for ease of communication and especially for translation needs prefer to use the word “user” or “users” instead of ‘”individual”.

10 principles for a good design of an app and for a product

First of all, to quote Steve Jobs, I propose a definition of design that has convinced me more:
“Design is the fundamental soul of a man-made creation that ends up expressing itself in successive outer layers of the product or service.”

Of course, the same principles Jobs was inspired by Dieter Rams, former Braun’s designers, who enumerated his 10 principles for good design of a product:

Dieter Rams e i suoi prodotti di design

• Dieter Rams Ten Principles of “Good Design”
  1. Good Design Is Innovative : The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.
  2. Good Design Makes a Product Useful : A product is bought to be used. It has to satisfy certain criteria, not only functional but also psychological and aesthetic. Good design emphasizes the usefulness of a product while disregarding anything that could possibly detract from it.
  3. Good Design Is Aesthetic : The aesthetic quality of a product is integral to its usefulness because products are used every day and have an effect on people and their well-being. Only well-executed objects can be beautiful.
  4. Good Design Makes A Product Understandable : It clarifies the product’s structure. Better still, it can make the product clearly express its function by making use of the user’s intuition. At best, it is self-explanatory.
  5. Good Design Is Unobtrusive : Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.
  6. Good Design Is Honest : It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept
  7. Good Design Is Long-lasting : It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.
  8. Good Design Is Thorough Down to the Last Detail : Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the consumer.
  9. Good Design Is Environmentally Friendly : Design makes an important contribution to the preservation of the environment. It conserves resources and minimises physical and visual pollution throughout the lifecycle of the product.
  10. Good Design Is as Little Design as Possible : Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.

Of course it is easy to see that these principles will be adapted to the design of industrial products, but also for the design of applications, especially if they will be used on products that were built precisely according to the principles of good industrial design, as are all products Apple.

Design better, work less

Dieter Rams, creator of the 10 principles, has always expressed his approach to design with the phrase: “Weniger, aber besser” or “Less, but better.”
Minimalism, as well as being very elegant, is certainly the best way to allow all users-users to understand instinctively the product and its functionality and it makes the product itself, or the App, friendly to use (user friendly) and “pure”.

Heuristic evaluation

At this point I can only describe even the so-called heuristic evaluation.
The Heuristic Evaluation is a method of inspection that is performed exclusively by the experts of usability and allows to evaluate whether a set of general design principles have been applied correctly in the UI.
The guidelines (“Ten Usability Heuristics“) upon which this sort of evaluation were developed in 1990 by Jakob Nielsen and Rolf Molich and are designed for desktop software, but in this case, these principles are still valid for designed for touchscreen applications, such as the iPhone OS App for iPhone and iPad app for Android and Windows Mobile.

A “mock up” is a non-working prototype of a product under development, is used to define the design and normally use it to pass to the customer before starting the product development phase.

MockApp, is a free Osx software downloadable from this web site where it is possibile to obtain a collection of files and images that will allow you to make a presentation in PowerPoint or Keynote presentation and export directly to PDF format.

Here are some videos on Youtube that shows its use:

MockApp Trailer

MockApp Demo – Part 1

MockApp Demo – Part 2

Quando disegno un’applicazione per iPhone e  iPad, uno degli aspetti piu’ importanti per un App graphic designer è quello di disegnare icone, loghi, immagini di sfondo e di lancio (splash).
Rilevo, sopratutto confrontandomi con sviluppatori e creativi che c’e’ una grande confusione tra iPhone 3G, iPhone 3GS, iPod Touch 3, iPod Touch 4, iPhone 4 e iPad.
Esistono quindi delle differenze tra le dimensioni e il tipo di immagini che devo creare per un’applicazione o un progetto che possa essere ottimizzato per tutti i dispositivi sopra citati.

Cercando in rete ho trovato quindi una utile tabella per il nostri progetti iPhone /  iPad il cui “OS target” sia 3.2 o superiore:

Normalmente le icone  sono file in formato PNG con angoli a 90 gradi,  senza la trasparenza, senza livelli, e impostati a 72 PPI. iPhone OS arrotonda atomaticamente gli angoli, aggiunge un facoltativo effetto glossy e altri effetti.  Se non si vuole lasciare che l’iPhone / iPad OS applichi l’effetto gloss per le icone, gli sviluppatori dovranno aggiungere una chiave al info.plist chiamata UIPrerenderedIcon ed effettuare un controllo. La profondità di bit standard è di 24 bit + 8 bit alpha channel.

I progettisti e programmatori comprendono che le dimensioni degli elementi su schermi iPhone e  iPad non sono costanti. La differenza nelle dimensioni dello schermo e la funzionalità dello zoom sono un luogo comune, ma il formato PNG e 72 PPI è ancora il default.
Si noti che il formato PNG rigetta la Densità di pixel. La maggior parte degli editor di immagini, tra cui Adobe Photoshop, assumono che la densità dei pixel di un’immagine è di 72 se tale informazione non viene modificata.)

Disegnare icone per iPad può essere piu’ difficile. Alcuni progettisti rilasciano solo le icone standard per iPad poichè non riescono a comprendere che è meglio inserire anche alcune icone  di piccola dimensione, che sono comunque opzionali. Quindi è sempre meglio aggiungere delle piccole icone al progetto iPad,  nei formati di 64 × 64, 32x32px, e 24x24px 16x16px. I programmatori sapranno poi come includere questi file.

Si deve sapere che quando l’utente seleziona l’icona dell’applicazione principale l’applicazione inizia subito a caricarsi. E ‘importante rendere il tempo di lancio più breve possibile. Ogni app  iPhone e iPad puo’ avere una propria immagine di lancio (splash), che imita l’interfaccia utilizzando un’immagine statica. La splash page dovrebbe essere la più piccola possibile in modo da garantire un rapido caricamento del file. E’ quindi sempre sconsigliabile creare file di dimensioni vicine al megabyte.

Impostazione file Info.plist

Nel file Info.plist gli sviluppatori precisano gli orientamenti dell’applicazione assieme alle immagini di lancio correlate. Se manca, devono aggiungere queste righe:

Gli sviluppatori possono modificare precedenti convenzioni di naming , come spesso facciamo e possono usare il loro nome personalizzato per  icone e per lanciare i file di immagine.
Noi di norma siamo abituati a configurare le nostre applicazioni iPad in maniera diversa rispetto alle versioni iPhone, in modo da specificare i valori specifici del dispositivo per le chiavi Info.plist.
Ad esempio:

Esempio di icona e le impostazioni di immagine lancio in Info.plist per applicazioni universali. Piattaforma: iPhone OS 3.2 +

Note per gli sviluppatori:

Se l’applicazione supporta l’esecuzione di iPhone in iPhone OS 3.1.x o versioni precedenti, non è possibile utilizzare la chiave CFBundleIconFiles per specificare i file icona. È necessario creare le icone delle stesse dimensioni come indicato nella nostra tabella, ma ogni immagine deve essere chiamate come segue:

Icon.png – Icona per applicazioni per iPhone or iPod touch
Icon-72.png – Icona per applicazioni per iPad in un’applicazione Universale
Icon-Small.png – Risultati della ricerca e l’icona delle impostazioni su iPhone e iPod touch
Icon-Small-50.png – Risultati della ricerca in applicazioni iPad

Dalla versione 3.2 se si specifica un-Icon small.png o file Icon-Small-50.png nel bundle, il sistema preferisce quei file icona rispetto a quelle nella chiave CFBundleIconFiles e il sistema operativo preferisce il defination icon dell’applicazione nella chiave CFBundleIconFiles più di qualunque altra.

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.

The teehan+lax guys

We report a very important resource that will allow all designers and developers to build layot ​​using the graphical components that will be used for your project iPhone and / or iPad.

The developers, often , come from “mount” graphic files  in the app that is planning, it is not uncommon that the developer receives files whose size in pixels, as well as the resolution, the result is not in line with the standards set by Apple.

Searching on the web I came across several files or information, and reading the  Teenah + Lax blog finally I’ve found what I need:
the teehanlax.com guys (you can see them nicely pictured) have outdone themselves by making available to the public files in Photoshop format, freely downloadable from the blog,  containing the GUI components for the iPhone and iPad.

The files are updated periodically retch, below are the links to this resource:

iPad GUI PSD dimensions 768 × 1024: Follow  this link
iPhone GUI psd format for standard iPhone (480×320) and Retina Display (960×640): Follow this link

Thanks to Teenah+lax guys