Mobile Apps Development – Graphics Slicing & Cropping Tips (2)

By    Torin Nguyen

 

Tabbar

All buttons that belong to the same tabbar should have the same width & height.

 

Toolbar

All icons that belong to a toolbar should be padded to the same height and optionally width

 

Custom Tabbar / Toolbar

For tabbars that really need custom positions and/or sizes of individual items, the items should have at least 1 common alignment for easy placement. Usually this is the bottom edge or top edge.

 

Pressed buttons

iOS and Android system will automatically dims a button’s brightness on pressed or disabled (when a custom image is not specified). It is not necessary to create such asset unless the button’s color/hue/content changes on pressed/disabled.

 

Same-kind items

A group of same-kind or same-context items should have the exact same size. This is more general than the rules for toolbar and tabbar.

 

Smooth gradients

Although capable of displaying 16 millions different colors, LCD screen in general are not capable of displaying smooth gradient between 2 very similar colors as illustrated below, on the left. This is due to integer interpolation between the start & end colors.

Use Dither option in Photoshop’s Gradient tool to get rid of this artifact.

 

Near edge graphics

When a graphic is near to the edge(s) of the screen or edge(s) of another element, crop it all the way to the edge(s) to avoid having a hard-coded margin when placing it in the app.

 

Near edge(s)

When a graphic is near to the edge(s) of the screen or edge(s) of another element, crop it all the way to the edge(s) to avoid having a hard-coded margin when placing it in the app.

 

Smart slicing

Large graphic asset that cannot be sliced & optimized as 1 piece using any tricks above can be broken down and optimized using a combination of rules. Programmer needs to divide 1 original UI element into smaller UI elements.

 

Static elements

Combine as many static elements into 1 graphic asset as possible. This will reduce the number of margins, assets, fonts, etc that programmer needs to consider

 

Bad cropping

These are simply bad, avoid at all cost.

Below are samples that has shadow being cut-off. Most programmers & clients can’t even tell the difference, but this differentiates the average designers from the better ones.

 

Dimension Reference File

It is very tedious for designers to extract dimensions from a graphic file. Designers should spend more time perfecting the graphics & UI designs rather than doing the reference file.

Applying the above rules will reduce, if not completely eliminate, the need for reference file. Moreover, non-stretchable graphics should always be kept to their original size and should never be stretched. Therefore, dimensions of such graphics should be obtained directly from the assets themselves & not from another reference source.

However, when dimensions are really needed, the built-in Preview app in Mac OS or MsPaint in Windows is good enough to extract basic dimensions from a graphic screen. Programmers, please use them to measure your own dimensions as needed. There are better tools available you can find them according to your own preference. After all, the final app will be evaluated based on the graphic screens provided and not from designers’ dimension reference files.

Auto Rotation (iOS only)

iOS has a built in feature to automatically reposition & resize UI elements (any UIView-derived class) upon device rotation according to some defined constraints. Eg: align to middle; or align 10px to the top & stretch the height; or stretch the width while leaving 20px gap on each side, etc.

Programmers should NOT write the  code to handle rotation manually. This is because when position/size of a UI element needs to be fixed/changed, this has to be changed in many places in the code. Moreover, iOS automatically interpolates the positions/sizes from one position/size to another during transition. It is much smoother to let the OS handle this rather than using the code to create manual animations.

This can be done either using code during setup phase or in Interface Builder depends on the project nature. However, note that they are opposite of each other.

-       Using code, we specify the variable margin(s)

-       Using IB, we specify the fixed margin(s)