2359 Media: Mobile Application Development

By Torin Nguyen

Slicing graphics for mobile app is not just about using Photoshop to crop out the desired parts, it requires an entirely different set of knowledge for both the designer & programmer. Being a designer as well as a programmer myself, I’ve learnt a few tricks to make development work easier for both worlds, and at the same time, accelerate & optimize development right from the graphic phase.
Below are some of the tips which may be of help to you:
@2x -> @1x graphics

All graphics for iOS are usually designed at @2x resolution for obvious reason. It is necessary to resize the assets to @1x using Photoshop rather than simply dump @2x graphics directly into @1x devices. This is because Photoshop’s bicubic interpolation is much better than iOS’s on-the-fly nearest-neighbor interpolation, especially for graphics with some textual content and/or finer details. Besides, when using native @1x graphics, iOS doesn’t need to do on-the-fly resizing, hence it gives better performance.

iOS Android Apps 2x->1x graphics

iOS & Android Apps 2x->1x Graphics


Cropping @2x Graphics

When cropping @2x graphics, always produce even dimensions images. This is because coordinates in iOS is coded and/or operates at @1x resolution integer numbers. It is better to have exact match between @1x and @2x resolution asset to avoid auto-resizing by iOS, hence improve on performance.

For example, after cropping, an @2x image is 123 x 40. If we stop here and resize to @1x resolution, the dilemma now is that should it be 61 x 20 or 62 x 20 (integer only)? Therefore, do take an extra step and expand the Canvas Size in Photoshop to 124 x 40 in whichever direction that makes sense. After that, down scale the image to @1x resolution.

Programmer’s note: it is possible (by default) to use float/double number while coding, but it doesn’t make sense to have a 0.5 pixel. As a side effect, using non-integer frames on textboxes/labels causes the text to be blurry. Furthermore, using integer numbers generally gives better performance. This is a hard rule which should be followed all the time.

Button states

Different states of a buttons (normal, pressed, selected, disabled) should have the exact same size & matching position of the main graphic content. This is to avoid the graphic to ‘jump’ when pressed due to the main element in the content and shift away from the original position.

iOS & Android Apps Button States

Mobile Apps Button States

Shadow compensation

Adding drop-shadow to an element causes its overall size to increase and the center position of the main graphic content to shift. When cropping, designer should add extra padding to bring the center of the content back to its original center.

iOS & Android Mobile Apps Shadow compensation

Mobile Apps Shadow compensation

Margin compensation

This is a generalization of the previous Shadow Compensation rule.

iOS & Android Mobile Apps Graphic Margin compensation

Mobile Apps Graphic Margin compensation

Uniform gradient

Most mobile app platform should have the ability to stretch a uniform gradient image to a desired size without affecting quality. Therefore, it is not necessary to keep a uniform gradient at its original full size. Note: this is totally different from 9-patch technique.

iOS & Android Mobile Apps Graphics Uniform Gradient

Mobile Apps Graphics Uniform Gradient


Large, uniform and mostly rectangular graphic asset can be scaled down by a big factor by using 9-patch technique natively supported on both iOS and Android platforms.

iOS & Android Mobile Apps Graphics 9-patch

Mobile Apps Graphics 9-patch

Stretchable graphics

All variable-size buttons can share the same graphic asset instead of using separate asset for each button. Note: this is just a special case of the 9-patch technique.

iOS & Android Mobile Apps Graphics - Stretchable graphics | Mobile Consultancy, Mobile Advertising, Mobile Development, iOS development, Android Development

Mobile Apps Graphics – Stretchable graphics