i3Factory World

Your Iphone, iPad & Android Application Factory

Browsing Posts in App Design

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 Pointbaseed 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

In an interesting article Matthew Panzarino asks, “’cause the look of the design iOS7 is so’ different from the previous” (Source: http://cdn.theapplelounge.com/wp-content/uploads/2013/06/iOS6vsiOS7_icons.png ).

After seeing the presentation of Apple iOS 7 now you know that the icons on the home screen (springboard cd) will change slightly.
Many of the new icons were designed mainly by members of the marketing and communications department at Apple, no more ‘by the development team of app. Jony Ive (now head of Human Interaction Apple) has guided step by step the design team to set the look and the color palette of the icons of the so-called stock app.

 

 

iOS7 Springboard

 

As has really changed the appearance of the icons of apps compared to iOS 6?
Let us see the comparison image created by @ pawsupforu:

ios6-iOS7_icone-confronto_icons-comparison
Note that some icons have been taken directly from OS X (Safari), while others have been completely redesigned (Calendar)

ICONS DIMENSION , from 114px to 120px

iOS7 icone
IOS 7 Guide Freebie PSD

One of the major changes (over the design “flat”) is the change of size of the icons.
The application icons are now 120px iOS 7 (compared to the previous format of 114px) and the radius (Border Radius) is now 27px (20px compared to previous year). With this change comes the need to change the icon size of our app.
Fortunately, the designers Seevi Kargwal he designed the aforementioned iOS icon 7 in PSD format to help facilitate the process of redesign. You can check out more of the work.

Following the link to this web page http://dribbble.com/shots/1111211-IOS-7-Guide-Freebie-PSD you will find 2 ATTACHMENTS:
IOS_7_Guide_freebie_PSD.psd 900 KB
IOS-7-Guide-Full-Size.jpg 300 KB

iOS 7 Icon Rounded Corner Radius

The web site “Cult of Mac” argues that Jony Ive has given to the icons of iOS7 the same rounded corners iMac.

icone iOS7
icone Home – OS7 (Source)

Cult of Mac in his article argues that the new Director of Human Interface, Jony Ive, has redesigned iOS operating system as a multi-layered Parallax.
Ive qindi migrated its design philosophies and the hardware on iOS Messages app icon shows how you can get fecendo so that the corners of the icon messages have the same tapered edges that lie on the products Apple iMac.
The difference is only a small number of pixels that most users will probably never noticed, so Brad Ellis, who first discovered it, he created his own GIF comparison so you can actually see the changes:

Le icone di iOS7 hanno la stessa curvatura degli angoli dell'iMac
The icons of iOS7 have the same curvature of the corners of the iMac Brat Ellis.

In his blog Joel Page detailing the best corner of the icon as you can ‘see in the image below:

icona_ios7_bordo_domensione_radiusSource

The new icon looks like a square with iOS7 dimesioni 120×120 px.

We conclude by considering the fact that the design changes with iOS 7 there sobno important innovations in the design of the icon.

The icons on the iPhone home screen received a slight increase in size to 114px by 57px and 60px and 120 px respectively.

 

template
We have introduced a new golden ratio grid and a new color scheme, much more ‘bright, that you will find included in the PSD file icon App Template This segiuendo link to this page:http://appicontemplate.com/ios7.
App icon Template , a Free Photoshop template is a resource that makes you more faciledisegnare icons. By changing a single object automatically returns you all the different formats required on iOS and Android.

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!

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close