To talk about the native app map, those things.

How do I cut a picture?

Understand the size of the iphone interface

The minimum resolution is 320x480, we set this dimension to the Datum interface size (baseline), and the base size is set to 1 time times the figure (1x).

In the actual design process, in order to reduce the design cost, generally take the highest resolution of the equipment as the original design manuscript size, with the iphone is iphone5 or 5s 640x1136, of course, can also use iphone4 or 4s 640x960, because the width is 640px, They cut the chart in the same standard. Obviously, the base size of 1 time times the chart (width 320px) for the relative reference, a wide 640px design, the original size cut out the icon called twice times the figure (2x).

One might ask: why not take 320px as the original size of the design? Because 1 time times the figure magnification becomes twice times the chart to be twice times the figure to reduce to 1 time times the picture to be blurred!

So, without considering the iphone 6 and iphone 6 Plus, each icon needs to be cut two to fit the iphone.

android--a wider range of interface sizes

Android Open source Freedom is the price of the device is not controllable, the market is full of various brands of Android phones, with a variety of sizes and resolutions, in order to fit a variety of different resolution of the equipment, the same icon needs to cut n, each corresponding to a size.

Also note that the size of Android development is the DP or SP (DP is the element performance size, SP is the font size) instead of the PX in the iphone ...

For a wide range of Android devices, Google divides them into 4-medium mode (MDPI, hdpi, xhdpi, and xxhdpi) at the DPI size, in order to facilitate the interface adaptation of native applications, which may one day add a fifth xxxhdpi, who knows?

See here, the traditional Web front-end classmate may have been messy, the iphone with Px,android DP, and visual design of the unified PX, how to use PX as a unit of PSD to use DP as a unit of the Android app Chettu Ah???

Obviously, we have to spend some brain cells to figure out the conversion relationship between PX and DP.

The conversion relationship between PX and DP

Typically, the mobile resolution is matched to the DPI mode that is running, such as HVGA (320x480 pixel), which is typically 3.5 inches wide and runs in MDPI mode. When running under the MDPI, 1dp=1px: That is to say, the designer to 320x480 as the size of the design manuscript, in the PS definition of an item high 48px, development will define the item high 48DP; 14px large font in Photoshop, development will be defined as 14SP.

For a WVGA (480x800 pixel) cell phone (G7, N1, NS), it is generally run in hdpi mode. When running in hdpi mode, 1dp=1.5px: That is to say that the designer to 480x800 as the size of the design manuscript, in the PS definition of a high 72px item, development will define the item high 48DP; 21px large font in Photoshop, development will be defined as 14SP.

iphone application slice size and Android application map size of the corresponding relationship

In Android apps, the MDPI is the benchmark interface size, which corresponds to the reference size (320x480) of the iphone application mentioned above, and the required Chetutu is labeled 1 time times the corresponding figure in the iphone. XHDPI corresponds to twice times the graph, hdpi and xxhdpi can and so on.

To put it another way: if you want to do a App,iphone and Android version of the same design with the lowest design cost, then the design draft size is best 640x960 pixel. Because the size of the cut out of the icon size covers the iphone 3 ~ 5 resolution, as well as Android mdpi, hdpi, xhdpi mode. The XXHDPI mode automatically uses the lower-level xhdpi icon to magnify the display.

Give the cutting diagram to the tool

See the above mentioned a variety of interface sizes, if all hand-cut, once cut you can endure. If you cut the number of icons to increase, modify, not a few times you will probably collapse blood spray screen ~

Fortunately we have some good Chettu tools available, the specific use of the method can refer to their official website tutorials.

Direct to excellent set, there are specific artifacts and tutorials yo!

Artifact recommended: "Without it I will not Chettu!" Save time and effort Chettu artifact slicy Download "

Artifact Tutorial: "Mac under the Chettu artifact!" Instructions for use of Slicy

Cut&slice Me

Cutterman

Devrocket

Note: Damao recommended, see the official website seems very tough appearance, but the charge Oh.

Summary

With tools, the Chettu in native app becomes easy, but the question of "one icon to cut multiple dimensions" remains unchanged, is there a better icon solution? for example, apply the icon font in Web application?