2359 Media: Mobile Application Development

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

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

9-patch

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

7 replies
  1. Battleship Ipad
    Battleship Ipad says:

    You could certainly see your expertise within the paintings you write. The arena hopes for more passionate writers such as you who aren’t afraid to say how they believe. Always follow your heart.

  2. Internet Marketing Company | Ruby on Rails Contractor, RoR Company | Web Development
    Internet Marketing Company | Ruby on Rails Contractor, RoR Company | Web Development says:

    Hello there, I discovered your website by the use of Google whilst searching for a similar subject, your website came up, it looks good. I’ve bookmarked to my favourites|added to bookmarks.

  3. Pozycjonowanie
    Pozycjonowanie says:

    You can certainly see your skills in the work you write. The world hopes for even more passionate writers like you who aren’t afraid to say how they believe. Always follow your heart.

  4. Marlena
    Marlena says:

    I don’t even know how I ended up here, but I thought this post was good. I do not know who you are but certainly you’re going to a famous blogger if you aren’t already 😉 Cheers!

  5. więcej
    więcej says:

    Very nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts. After all I will be subscribing to your feed and I hope you write again very soon!

  6. apps for ipad 2
    apps for ipad 2 says:

    This web site is mostly a stroll-by way of for the entire information you wished about this and didn’t know who to ask. Glimpse right here, and you’ll definitely uncover it.

Trackbacks & Pingbacks

Comments are closed.