2013年4月7日 星期日

[Android] Menu icon 製作

Android Menu icon 製作規則整理 

整理  Icon Design Guidelines

Highlight : 

1. Greyscales and flat-front  and PNG format

2. 版本 variant 

2.1 Android 3.0 以後要參考 Action Bar Icons 因為3.0 以後Action Bar取代了Menu
   2.1.1 PNG transparent no background 
   2.1.2 Size
          xhdpi 48x48  hdpi 36x36           mdpi 24x24           ldpi  18x18
   2.1.3 For 2 android theme
   2.1.3.1  Holo Light
   Color Fill :  #333333, 60% opacity
   Inner Content : Inner content should subtract from the outer shape and consist purely of transparent pixels.



   2.1.3.2 Holo Dark
  Color Fill : #ffffff, 80% opacity
   Inner Content : nner content should subtract from the outer shape and consist purely of transparent pixels.
         


2.2  Android 2.3 的 design


紅色 : 整個 assets 大小 / 藍色 icon 的大小 / 橘色如果 icon 是方型時 icon 的大小
hdpi  72x72 / 48x48 / 44x 44  (px)
mdpi  48x48 / 32 x 32 / 40 x 40
ldpi 36x36 / 24x24 /2 2x22

2.3 Android 2.3 以前的
   2.3.1 48x48 icon size , design 時記得要有 6px 的 safe-frame (padding)
   2.3.2  統一的 color platte

       2.3.2.1 White  (r 255 | g 255 | b 255) -  Used for outer glow and bevel highlight.
      2.3.2.2 Fill gradient ( 1:  r 163 |  163 | b 163  , 2:  r 120 | g 120 | b 120) -  Used as color fill.
      2.3.2.3 Black ( r 0 | g 0 | b 0) - Used for inner shadow and bevel shadow.


   2.3.3  PNG transparency format

Extra Notes  

Android 2.3 和之前的差別 
1. Icons have a larger safe frame; icon content is smaller within the full asset. Final asset sizes have not changed.
2. The color palette is slightly lighter.
3. No outer glow effects are applied.
4. Menu icons can now be rendered on either dark or light backgrounds.  

System Provide icon
如果要用 system provide icon, 請自行 copy 一份到自己的 drawable 。因為這些 icon 從版本到版本之間 R id 可能有變


Detail Guideline
Android 2.3 icon 的彎角, 漸層等都有規定, 要設計得很好請看  Icon Design Guidelines Fig. 2 。

Photoshop Template Download









沒有留言:

張貼留言