Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 1 | page.title=Status Bar Icons |
Scott Main | 6afeb0e | 2013-04-16 21:05:51 -0700 | [diff] [blame] | 2 | excludeFromSuggestions=true |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 3 | parent.title=Icon Design Guidelines |
| 4 | parent.link=icon_design.html |
| 5 | @jd:body |
| 6 | |
| 7 | <div id="qv-wrapper"> |
| 8 | <div id="qv"> |
| 9 | |
| 10 | <h2>In this document</h2> |
| 11 | |
| 12 | <ol> |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 13 | <li><a href="#icon11">Android 3.0 and Later</a> |
| 14 | <ol> |
| 15 | <li><a href="#overview11">Overview of changes</a></li> |
| 16 | <li><a href="#size11">Size and format</a></li> |
| 17 | <li><a href="#style11">Style, colors, and effects</a></li> |
| 18 | <li><a href="#dimming11">Automatic dimming</a></li> |
| 19 | <li><a href="#examples11">Example icons</a></li> |
| 20 | </ol> |
| 21 | </li> |
| 22 | <li><a href="#icon9">Android 2.3</a> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 23 | <ol> |
| 24 | <li><a href="#size9">Size</a></li> |
| 25 | <li><a href="#style9">Style, color, and effects</a></li> |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 26 | <li><a href="#dosdonts9">Do's and don'ts</a></li> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 27 | <li><a href="#examples9">Example icons</a></li> |
| 28 | </ol> |
| 29 | </li> |
| 30 | <li><a href="#icon1">Android 2.2 and Earlier</a></li> |
| 31 | </ol> |
| 32 | |
| 33 | <h2>See also</h2> |
| 34 | |
| 35 | <ol> |
| 36 | <li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple |
| 37 | Screens</a></li> |
| 38 | </ol> |
| 39 | |
| 40 | </div> |
| 41 | </div> |
| 42 | |
| 43 | |
Scott Main | 91b5ecc | 2012-06-22 13:26:08 -0700 | [diff] [blame] | 44 | <div class="note design"> |
Scott Main | eb5dacd | 2012-01-09 17:36:46 -0800 | [diff] [blame] | 45 | <p><strong>New Guides for App Designers!</strong></p> |
| 46 | <p>Check out the new documents for designers at <strong><a |
| 47 | href="{@docRoot}design/index.html">Android Design</a></strong>, including more guidelines |
| 48 | for <a href="{@docRoot}design/style/iconography.html">Iconography</a>.</p> |
| 49 | </div> |
| 50 | |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 51 | |
| 52 | <p>Status bar icons are used to represent notifications from your application in |
| 53 | the status bar.</p> |
| 54 | |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 55 | <p>As described in <a |
| 56 | href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#icon-sets">Providing Density-Specific |
| 57 | Icon Sets</a> and <a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple |
| 58 | Screens</a>, you should create separate icons for all generalized screen densities, including low-, |
| 59 | medium-, high-, and extra-high-density screens. This ensures that your icons will display properly |
| 60 | across the range of devices on which your application can be installed. See <a |
| 61 | href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips">Tips for Designers</a> |
| 62 | for suggestions on how to work with multiple sets of icons.</p> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 63 | |
| 64 | <p>Templates for creating icons in Adobe Photoshop are available in the <a |
| 65 | href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon |
| 66 | Templates Pack</a>.</p> |
| 67 | |
| 68 | |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 69 | <div class="warning"> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 70 | |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 71 | <p><strong>Warning:</strong>The style and dimensions of status bar icons have changed dramatically |
| 72 | in Android 3.0 and 2.3 compared to <a href="#icon1">previous versions</a>. <strong>To |
| 73 | provide support for all Android versions</strong>, developers should:</p> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 74 | |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 75 | <ol> |
| 76 | <li>Place status bar icons for Android 3.0 and later in the |
| 77 | <code>drawable-xhdpi-v11</code>, <code>drawable-hdpi-v11</code>,<code>drawable-mdpi-v11</code>, |
| 78 | and <code>drawable-ldpi-v11</code> directories.</li> |
| 79 | <li>Place status bar icons for Android 2.3 in the |
| 80 | <code>drawable-xhdpi-v9</code>, <code>drawable-hdpi-v9</code>, <code>drawable-mdpi-v9</code>, |
| 81 | and <code>drawable-ldpi-v9</code> directories.</li> |
| 82 | <li>Place status bar icons for previous versions in |
| 83 | <code>drawable-xhdpi</code>, <code>drawable-hdpi</code>, <code>drawable-mdpi</code>, |
| 84 | and <code>drawable-ldpi</code> directories.</li> |
| 85 | </ol> |
| 86 | |
| 87 | </div> |
| 88 | |
| 89 | |
| 90 | |
| 91 | |
| 92 | <h2 id="icon11">Android 3.0 and Later</h2> |
| 93 | |
| 94 | <p>The following guidelines describe how to design status bar icons for Android |
| 95 | 3.0 (API Level 11) and later.</p> |
| 96 | |
| 97 | |
| 98 | <h3 id="overview11">Overview of changes</h3> |
| 99 | |
| 100 | <p>The design for status bar (notification) icons has been revised in Android 3.0. Status bar icons |
| 101 | used in Android 3.0 and later are easier to create, and they allow for more flexible presentation |
| 102 | in a variety of situations:</p> |
| 103 | |
| 104 | <ul> |
| 105 | <li>Status bar icons are composed simply of <strong>white pixels on a transparent |
| 106 | backdrop</strong>, with alpha blending used for smooth edges and internal texture where |
| 107 | appropriate.</li> |
| 108 | <li>Icons are square icon contents should <strong>fill the available space</strong>, although a |
| 109 | small amount of internal padding can help maintain balance across status bar icons. See |
| 110 | <a href="#size11">Size and format</a> below for details.</li> |
| 111 | </ul> |
| 112 | |
| 113 | <p>These larger and brighter icons, while highly legible, are too intense for use on dark phone |
| 114 | status bars. These icons would be too distracting if used directly in the status bar. Therefore: |
| 115 | </p> |
| 116 | |
| 117 | <ul> |
| 118 | <li><strong>The system automatically resizes and dims</strong> these icons in such situations and |
| 119 | developers do not need to supply a separate icon for this purpose. See |
| 120 | <a href="#dimming11">Automatic dimming</a> below for more on this behavior.</li> |
| 121 | </ul> |
| 122 | |
| 123 | |
| 124 | <h3 id="size11">Size and format</h2> |
| 125 | |
| 126 | <p>Status bar icons should be 32-bit PNGs with an alpha channel for transparency. The finished |
| 127 | status bar icon dimensions corresponding to a given generalized screen density are shown in the |
| 128 | table below.</p> |
| 129 | |
| 130 | <p class="note"><strong>Note:</strong> The system will shrink and dim status bar icons to minimize |
| 131 | distractions, allowing users to focus on the foreground activity.</p> |
| 132 | |
| 133 | |
| 134 | <p class="table-caption" id="screens_table"><strong>Table 1.</strong> Summary of |
| 135 | finished icon dimensions for each generalized screen density.</p> |
| 136 | |
| 137 | <table> |
| 138 | <tbody> |
| 139 | <tr> |
| 140 | <th></th> |
| 141 | <th> |
| 142 | <code>ldpi</code> (120 dpi)<br> |
| 143 | <small style="font-weight: normal">(Low density screen)</small> |
| 144 | </th> |
| 145 | <th> |
| 146 | <code>mdpi</code> (160 dpi)<br> |
| 147 | <small style="font-weight: normal">(Medium density screen)</small> |
| 148 | </th> |
| 149 | <th> |
| 150 | <code>hdpi</code> (240 dpi)<br> |
| 151 | <small style="font-weight: normal">(High density screen)</small> |
| 152 | </th> |
| 153 | <th> |
| 154 | <code>xhdpi</code> (320 dpi)<br> |
| 155 | <small style="font-weight: normal">(Extra-high density screen)</small> |
| 156 | </th> |
| 157 | </tr> |
| 158 | <tr> |
Scott Kennedy | a839668 | 2013-01-16 08:39:47 -0800 | [diff] [blame] | 159 | <th> |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 160 | Status Bar Icon Size<br><small>(Android 3.0 and Later)</small> |
| 161 | </th> |
| 162 | <td> |
| 163 | 18 x 18 px |
| 164 | </td> |
| 165 | <td> |
| 166 | 24 x 24 px |
| 167 | </td> |
| 168 | <td> |
| 169 | 36 x 36 px |
| 170 | </td> |
| 171 | <td> |
| 172 | 48 x 48 px |
| 173 | </td> |
| 174 | </tr> |
| 175 | </tbody> |
| 176 | </table> |
| 177 | |
| 178 | <p>You can also include a few pixels of padding in status bar icons to maintain a |
| 179 | consistent visual weight with adjacent icons. For example, a 48 x 48 pixel <code>xhdpi</code> |
| 180 | status bar icon can contain a 44 x 44 pixel shape with 2 pixels on each side for padding.</p> |
| 181 | |
| 182 | |
| 183 | <h3 id="style11">Style, colors, and effects</h3> |
| 184 | |
| 185 | <p>Status bar icons are flat, pictured face on, and must be white on a transparent background.</p> |
| 186 | |
| 187 | <p>In order to maintain consistency across all status bar notifications, status bar icons should |
| 188 | use the styling shown in Figure 1.</p> |
| 189 | |
| 190 | |
| 191 | |
| 192 | <table class="image-caption"> |
| 193 | <tr> |
| 194 | <td class="image-caption-i"> |
| 195 | <img src="{@docRoot}images/icon_design/status_bar_honeycomb_style.png" |
| 196 | alt="A view of effects for status bar icons."> |
| 197 | </td> |
| 198 | <td class="image-caption-c"> |
| 199 | <div class="caption grad-rule-top"> |
| 200 | <p><strong>Figure 1. </strong>Style for status bar icons.</p> |
| 201 | <div class="image-caption-nested"> |
| 202 | <table> |
| 203 | <tr><td><em>1.</em></td><td nowrap>Fill color:</td><td><code>#ffffff</code><br><br></td></tr> |
| 204 | <tr><td><em>2.</em></td><td nowrap>Inner content:</td><td>Inner content should subtract from |
| 205 | the outer shape and consist purely of transparent pixels.</td></tr> |
| 206 | </table> |
| 207 | </div> |
| 208 | </div> |
| 209 | </td> |
| 210 | </tr> |
| 211 | </table> |
| 212 | |
| 213 | |
| 214 | <h3 id="dimming11">Automatic dimming</h3> |
| 215 | |
| 216 | <p>The system may dim and shrink status bar icons to allow users to focus on the foreground |
| 217 | activity. For example, in Android 4.0, the platform-standard status bar for handset-size devices |
| 218 | reduces icons to 18 x 18 dip and 40% opacity in the status bar, while drawing them full-size and at |
| 219 | full intensity in the expanded notification panel. An example of what this looks like is shown below |
| 220 | in Figure 2.</p> |
| 221 | |
| 222 | |
| 223 | <img src="{@docRoot}images/icon_design/status_bar_honeycomb_dimming.png" |
| 224 | alt="Automatic shrinking and dimming behavior in Android 3.0 and later"> |
| 225 | <p class="img-caption"> |
| 226 | <strong>Figure 2.</strong> Automatic shrinking and dimming behavior in Android 3.0 and later. |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 227 | </p> |
| 228 | |
| 229 | |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 230 | <h3 id="examples11">Example icons</h3> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 231 | |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 232 | <p>Shown below are example extra-high-density status bar icons that are used throughout Android |
| 233 | system applications.</p> |
| 234 | |
| 235 | <p class="warning"><strong>Warning:</strong> Because resources can change between platform versions, |
| 236 | you should not reference built-in icons using the Android platform resource IDs (i.e. status bar |
| 237 | icons under <code>android.R.drawable</code>). If you want to use any icons or other internal |
| 238 | drawable resources, you should store a local copy of those icons or drawables in your application |
| 239 | resources, then reference the local copy from your application code. In that way, you can maintain |
| 240 | control over the appearance of your icons, even if the system's copy changes. Note that the grid |
| 241 | below is not intended to be complete.</p> |
| 242 | |
| 243 | <img src="{@docRoot}images/icon_design/status_bar_honeycomb_examples.png" /> |
| 244 | |
| 245 | |
| 246 | |
| 247 | |
| 248 | |
| 249 | <h2 id="icon9">Android 2.3</h2> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 250 | |
| 251 | <p>The following guidelines describe how to design status bar icons for Android |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 252 | 2.3 (API Levels 9 and 10).</p> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 253 | |
| 254 | <h3 id="size9">Size and positioning</h3> |
| 255 | |
| 256 | <p>Status bar icons should use simple shapes and forms and those must be |
| 257 | scaled and positioned inside the final asset.</p> |
| 258 | |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 259 | <p>Figure 3 illustrates various ways of positioning the icon inside the |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 260 | asset. You should size the icons <em>smaller than the actual bounds of the |
| 261 | asset</em>. <strong>Status bar icons may vary in width, but only |
| 262 | minimally.</strong></p> |
| 263 | |
| 264 | <p>In order to indicate the recommended size for the icon, each example in |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 265 | Figure 3 includes two different guide rectangles:</p> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 266 | |
| 267 | <ul> |
| 268 | <li>The red box is the bounding box for the full asset.</li> |
| 269 | <li>The blue box is the recommended bounding box for the actual icon. |
| 270 | The icon box is sized smaller vertically than the full asset box to allow for |
| 271 | varying icon shapes while maintaining a consistent visual weight.</li> |
| 272 | </ul> |
| 273 | |
| 274 | <table> |
| 275 | <tr> |
| 276 | |
| 277 | <td style="border:0;"> |
| 278 | <ol class="nolist"> |
| 279 | <li>Status bar icon dimensions for high-density (<code>hdpi</code>) screens:</li> |
| 280 | <ol class="nolist"> |
| 281 | <li>Full Asset: 24w x 38h px (preferred, width may vary)</li> |
| 282 | <li>Icon: 24w x 24h px (preferred, width may vary)</li> |
| 283 | </ol> |
| 284 | </li> |
| 285 | </ol> |
| 286 | </td> |
| 287 | <td style="border:0;"> |
| 288 | <img src="{@docRoot}images/icon_design/statusbar_size_hdpi.png" width="318"> |
| 289 | </td> |
| 290 | </tr> |
| 291 | <tr> |
| 292 | <td style="border:0;"> |
| 293 | <ol class="nolist"> |
| 294 | <li>Status bar icon dimensions for medium-density (<code>mdpi</code>) screens:</li> |
| 295 | <ol class="nolist"> |
| 296 | <li>Full Asset: 16w x 25 px (preferred, width may vary)</li> |
| 297 | <li>Icon: 16w x 16w px (preferred, width may vary)</li> |
| 298 | </ol> |
| 299 | </li> |
| 300 | </ol> |
| 301 | </td> |
| 302 | |
| 303 | <td style="border:0;"> |
| 304 | <img src="{@docRoot}images/icon_design/statusbar_size_mdpi.png" width="318"> |
| 305 | </td> |
| 306 | </tr> |
| 307 | <tr> |
| 308 | <td style="border:0;"> |
| 309 | <ol class="nolist"> |
| 310 | <li>Status bar icon dimensions for low-density (<code>ldpi</code>) screens:</li> |
| 311 | <ol class="nolist"> |
| 312 | <li>Full Asset: 12w x 19h px (preferred, width may vary)</li> |
| 313 | <li>Icon: 12w x 12h px (preferred, width may vary)</li> |
| 314 | </ol> |
| 315 | </li> |
| 316 | </ol> |
| 317 | </td> |
| 318 | |
| 319 | <td style="border:0;"> |
| 320 | <img src="{@docRoot}images/icon_design/statusbar_size_ldpi.png" width="318"> |
| 321 | </td> |
| 322 | </tr> |
| 323 | |
| 324 | <tr> |
| 325 | <td style="border:0;"></td> |
| 326 | <td style="border:0;"> |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 327 | <p class="table-caption"><strong>Figure 3.</strong> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 328 | Status bar icon sizing and positioning inside the bounds of the |
| 329 | icon asset.</p> |
| 330 | </td> |
| 331 | </tr> |
| 332 | |
| 333 | </table> |
| 334 | |
| 335 | |
| 336 | |
| 337 | |
| 338 | <h3 id="style9">Style, colors, and effects</h3> |
| 339 | |
| 340 | <p>Status bar icons are flat, matte, and pictured face-on.</p> |
| 341 | |
| 342 | |
| 343 | <table class="image-caption"> |
| 344 | <tr> |
| 345 | <td class="image-caption-i"> |
| 346 | <img src="{@docRoot}images/icon_design/statusbar_style.png" alt="A view of effects for status bar icons."/> |
| 347 | </td> |
| 348 | <td class="image-caption-c"> |
| 349 | <div class="caption grad-rule-top"> |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 350 | <p><strong>Figure 4. </strong>Style and effects for status icons.</p> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 351 | <div class="image-caption-nested"> |
| 352 | <p><em>Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.</em></p> |
| 353 | <table> |
| 354 | <tr><td><em>1.</em></td><td nowrap>Fill gradient:</td><td>90°, from <code>#828282</code> to <code>#919191</code><br><br></td></tr> |
| 355 | <tr><td><em>2.</em></td><td nowrap>Inner shadow:</td><td><code>#FFFFFF</code>, 10% opacity<br>angle 90°<br>distance 1px<br>size 0px<br><br></td></tr> |
| 356 | <tr><td><em>3.</em></td><td nowrap>Inner content:</td><td>Inner content should subtract from the outer shape and consist purely of transparent pixels.</td></tr> |
| 357 | </table> |
| 358 | </div> |
| 359 | </div> |
| 360 | </td> |
| 361 | </tr> |
| 362 | </table> |
| 363 | |
| 364 | |
| 365 | |
| 366 | |
| 367 | <h3 id="dosdonts9">Do's and don'ts</h3> |
| 368 | |
| 369 | <p>Below are some "do and don't" examples to consider when creating status bar icons for |
| 370 | your application. </p> |
| 371 | |
| 372 | |
| 373 | <img src="{@docRoot}images/icon_design/do_dont_statusicons.png"> |
| 374 | |
| 375 | |
| 376 | |
| 377 | |
| 378 | <h3 id="examples9">Example icons</h3> |
| 379 | |
| 380 | <p>Shown below are standard high-density status bar icons that are used in |
| 381 | the Android platform.</p> |
| 382 | |
| 383 | <p class="warning"><strong>Warning:</strong> Because these resources can change |
| 384 | between platform versions, you should not reference these icons using the |
| 385 | Android platform resource IDs (i.e. status bar icons under |
| 386 | <code>android.R.drawable</code>). If you want to use any icons or other internal |
| 387 | drawable resources, you should store a local copy of those icons or drawables in |
| 388 | your application resources, then reference the local copy from your application |
| 389 | code. In that way, you can maintain control over the appearance of your icons, |
| 390 | even if the system's copy changes. Note that the grid below is not intended to |
| 391 | be complete.</p> |
| 392 | |
| 393 | <img src="{@docRoot}images/icon_design/statusbar_standard.png" /> |
| 394 | |
| 395 | |
| 396 | |
| 397 | <h2 id="icon1">Android 2.2 and Earlier</h2> |
| 398 | |
| 399 | <p>The following guidelines describe how to design status bar icons for Android |
| 400 | 2.2 (API Level 8) and earlier.</p> |
| 401 | |
| 402 | <h3 id="structure1">Structure</h3> |
| 403 | |
| 404 | <ul> |
| 405 | <li>Rounded corners must always be applied to the base shape and to the details |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 406 | of a status bar icon shown Figure 5.</li> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 407 | |
| 408 | <li>All dimensions specified are based on a 25x25 pixel artboard size with a 2 |
| 409 | pixel safeframe.</li> |
| 410 | |
| 411 | <li>Status bar icons can overlap the safeframe to the left and right when |
| 412 | necessary, but must not overlap the safeframe at the top and bottom.</li> |
| 413 | |
| 414 | <li><strong>Final art must be exported as a transparent PNG file.</strong></li> |
| 415 | |
| 416 | <li>Templates for creating status bar icons using Adobe Photoshop are available |
| 417 | in the Icon Templates Pack.</li> |
| 418 | </ul> |
| 419 | |
| 420 | <table class="image-caption"> |
| 421 | <tr> |
| 422 | <td class="image-caption-i"> |
| 423 | <img src="{@docRoot}images/icon_design/statusbar_structure.png" alt="A view of |
| 424 | status bar icon structure." /> |
| 425 | </td> |
| 426 | <td class="image-caption-c"> |
| 427 | <div class="caption grad-rule-top"> |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 428 | <p><strong>Figure 5. </strong>Safeframe and corner-rounding for status bar |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 429 | icons. Icon size is 25x25.</p> |
| 430 | </div> |
| 431 | </td> |
| 432 | </tr> |
| 433 | </table> |
| 434 | |
| 435 | |
| 436 | <h3 id="style1">Light, effects, and shadows</h3> |
| 437 | |
| 438 | <p>Status bar icons are slightly debossed, high in contrast, and pictured |
| 439 | face-on to enhance clarity at small sizes.</p> |
| 440 | |
| 441 | <table class="image-caption"> |
| 442 | <tr> |
| 443 | <td class="image-caption-i"> |
| 444 | <img src="{@docRoot}images/icon_design/statusbar_light.png"/> |
| 445 | </td> |
| 446 | <td class="image-caption-c"> |
| 447 | <div class="caption grad-rule-top"> |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 448 | <p><strong>Figure 6. </strong>Light, effects, and shadows for status bar icons.</p> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 449 | <div class="image-caption-nested"> |
| 450 | <table> |
| 451 | <tr><td><em>1.</em></td><td>Front part:</td><td>Use fill gradient from primary color palette</td></tr> |
| 452 | <tr><td><em>2.</em></td><td>Inner bevel:</td><td>depth 100% | direction down<br>size 0px | angle 90° |<br>altitude 30°<br>highlight white 75% opacity<br>shadow black 75% opacity</td></tr> |
| 453 | <tr><td><em>3.</em></td><td>Detail:</td><td>white</td></tr> |
| 454 | <tr><td><em>4.</em></td><td>Disabled detail:</td><td>grey gradient from palette<br>+ inner bevel: smooth | depth 1% | direction down | size 0px | angle 117° | <br>altitude 42° | highlight white 70% | no shadow</td></tr> |
| 455 | </table> |
| 456 | </div> |
| 457 | </div> |
| 458 | </td> |
| 459 | </tr> |
| 460 | </table> |
| 461 | |
| 462 | <table> |
| 463 | <tr> |
| 464 | <td style="border:0"> |
| 465 | |
| 466 | <h4 id="palette1">Color palette</h4> |
| 467 | |
| 468 | <p>Only status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic.</p> |
| 469 | |
| 470 | <table> |
| 471 | <tr> |
| 472 | <td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_white.png"/></td> |
| 473 | <td class="image-caption-c">White<br>r 255 | g 255 | b 255<br>Used for details within the icons and bevel highlight.</td> |
| 474 | </tr> |
| 475 | |
| 476 | <tr> |
| 477 | <td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_grey.png"/></td> |
| 478 | <td class="image-caption-c">Grey gradient<br><em>1: </em>r 169 | g 169 | b 169<br><em>2: </em>r 126 | g 126 | b 126<br>Used for disabled details within the icon.</td> |
| 479 | </tr> |
| 480 | |
| 481 | <tr> |
| 482 | <td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_fill.png"/></td> |
| 483 | <td class="image-caption-c">Fill gradient<br><em>1: </em>1 r 105 | g 105 | b 105<br><em>2: </em>r 10 | g 10 | b 10<br>Used as color fill.</td> |
| 484 | </tr> |
| 485 | |
| 486 | <tr> |
| 487 | <td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_black.png"/></td> |
| 488 | <td class="image-caption-c">Black<br>r 0 | g 0 | b 0<br>Used for bevel shadow.</td> |
| 489 | </tr> |
| 490 | |
| 491 | </table> |
| 492 | |
| 493 | </td> |
| 494 | |
| 495 | <td style="border:0"> |
| 496 | |
| 497 | <h4 id="steps1">Step by step</h4> |
| 498 | |
| 499 | <ol> |
| 500 | <li>In a tool like Adobe Photoshop, create the base shape within a 25x25 px |
| 501 | image on a transparent background. Mind the safeframe, and keep the upper and |
| 502 | lower 2 pixels free.</li> |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 503 | <li>Add rounded corners as specified in Figure 5.</li> |
| 504 | <li>Add light, effects, and shadows as specified in Figure 6.</li> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 505 | <li>Export the icon at 25x25 as a PNG file with transparency enabled.</li> |
| 506 | </ol> |
| 507 | |
| 508 | </td> |
| 509 | </tr> |
| 510 | </table> |