Design Slicing for phones

9-patch guides
9-patch guides

Introduction to design slicing – After creating a design mockup in photo-shop i.e. psd file and before the coding of the layout, we need to decide that which part of the page can contain images/graphics and which part can be coded. Due to which we need to slice our design layout, so that we can export all the assets from the design layout and can code the rest of the page. Sliced assets can be exported in jpg, jpeg, or png format by using any slicing tool like photoshop. After this these images get used up to create the full layout of the application or website using exported assets and code.

For IOS:

The design sliced assets can be of 3 sizes – 1x, 2x, & 3x in which 1x is the default one and 3x means the bigger asset as compared to 1x or 2x. But as you know that the future is high resolution so better to have the 1x, 2x, and 3x assets. If you have created the design document properly then you do not have to worry about the precision control over all the sizes. You can switch between 1x, 2x, or 3x without any effort if design document is properly created.

In iOS there are 2 kinds of displays:

  1. Retina
  2. Non-Retina

Retina displays are double the size of non retina displays. Remember to have the size of retina displays double the size of non-retina displays.

Note – If you are designing in a retina display then do remember to down-scale your images to 50%.

For Android:

In android there are lots of devices with different resolutions. So you have to export all the assets for all the resolutions, so that your design would work absolutely fine for all the devices and resolutions.

Most commonly used resolutions are as follows:

Android Tablet

  • 1280 x 800
  • 1024 x 600

Android Phone

  • 320 x 480
  • 480 x 800
  • 480 x 854
  • 540 x 960
  • 1280 x 720

You must have to export assets for all the resolutions separately but you do not have any need to do this for 9 patch assets.

9 Patch Scaling:

In some of the applications it happens that you have assets that you used more than once and are scalable, so you can use 9-patch images for that condition. For the scalable assets like button backgrounds you can use 9-patch images because things like icons may not scale properly, so you may have to scale them manually in all the directions. You have to deliver the 9-patch images at the smallest possible size because you can not downscale the 9-patch images.

9-patch guides

9-patch guides

For reference just go through an article on 9-patch images –

http://radleymarx.com/blog/simple-guide-to-9-patch/

You may also like...

Leave a Reply