2359 Media: Mobile Application Development

Mobile Apps Development: Graphics Slicing & Cropping Tips (Part 2)

By Torin Nguyen

 

Tabbar

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

Mobile Apps Development_Tabbar | Mobile consultancy, Mobile Advertising, Mobile Development, iOS development, Android Development

Tabbar

 

Toolbar

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

Toolbar Tabbar

Toolbar Tabbar

 

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.

Custom Tabbar / Toolbar

Custom Tabbar / Toolbar

 

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.

Pressed Buttons | Mobile consultancy, Mobile Advertising, Mobile Development, iOS development, Android Development

Pressed Buttons

 

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.

Same Kind Items

Same Kind Items

 

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.

Smooth Gradients

Smooth Gradients

 

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 Graphics

Near Edge Graphics

 

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.

Near Edges

Near Edges

 

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.

Smart Slicing

Smart Slicing

 

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

Static Elements

Static Elements

 

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.

Mobile Apps Development

Mobile Apps Development

 

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)

6 replies
  1. html5 apps
    html5 apps says:

    Great blog right here! Additionally your site lots up fast! What web host are you the usage of? Can I get your associate hyperlink to your host? I want my site loaded up as fast as yours lol

  2. Battleship classic
    Battleship classic says:

    I’ll right away grasp your rss feed as I can’t find your email subscription link or newsletter service. Do you have any? Please let me know in order that I may just subscribe. Thanks.

Trackbacks & Pingbacks

Comments are closed.