By Torin Nguyen
@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.
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.
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.
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.
This is a generalization of the previous Shadow Compensation rule.
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.
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.
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.