Master Mobile Asset Slicing: From iPhone to Android with Simple Tools

Learn the essential knowledge for slicing graphics for mobile apps, specially prepared for beginner designers, with clear illustrations and practical tips.

How to slice?

Understanding iPhone screen sizes

The smallest resolution is 320×480, which we set as the baseline (1x).

In practice, designers use the device’s highest resolution as the original design size. For iPhone, this is typically iPhone 5/5s at 640×1136 (or iPhone 4/4s at 640×960, both 640 px wide). The baseline 1x icons (320 px wide) become 2x icons (640 px wide) in the design.

Why not use 320 px as the original size? Because enlarging a 1x image to 2x produces more blur than reducing a 2x image to 1x.

Thus, without considering iPhone 6/6 Plus, each icon needs two versions for iPhone.

Android – a wider range of screen sizes

Android’s openness leads to many device specifications. To support various resolutions, the same icon must be exported in multiple sizes, each matching a specific density bucket.

Android uses dp (density‑independent pixels) for layout dimensions and sp for font sizes, not px.

Google groups devices into four DPI modes: MDPI, HDPI, XHDPI, and XXHDPI (a fifth XXXHDPI may appear in the future).

Web front‑end developers may be confused: iPhone uses px, Android uses dp, while design drafts are usually in px. Converting between px and dp is necessary.

px and dp conversion

Generally, the screen resolution matches the DPI mode. For an HVGA (320×480) screen (~3.5 inches) running in MDPI, 1 dp = 1 px. So a 48 px high item in Photoshop corresponds to 48 dp in code, and a 14 px font becomes 14 sp.

For a WVGA (480×800) screen (e.g., G7, N1, NS) running in HDPI, 1 dp = 1.5 px. Thus a 72 px high item in Photoshop maps to 48 dp, and a 21 px font maps to 14 sp.

For more details, see the referenced article.

Correspondence between iPhone and Android slice sizes

In Android, MDPI matches the iPhone baseline (320×480) and uses the 1x icons. XHDPI matches the 2x icons, while HDPI and XXHDPI follow accordingly.

To minimize design effort, use a single design size of 640×960 px. This size covers iPhone 3‑5 resolutions and Android MDPI, HDPI, and XHDPI; the XXHDPI mode will upscale the XHDPI assets automatically.

Let tools handle the slicing

Manually slicing every asset is tedious and error‑prone. Fortunately, several slicing tools can automate the process. Below are some recommended tools (note: some are paid):

Tool: SLICY – “The must‑have slicing tool that saves time and effort.”

Tool: cut&slice me

Tool: cutterman

Tool: devRocket (recommended by the author, but it is a paid service).

Refer to each tool’s official tutorial for detailed usage.