Creating Icons for the Precision Theme

RIM has several guides on creating icons for the precision theme. This is useful if we create separate icons for an application based on themes. The guide for the Bold and the Kickstart are attached.

Table of Contents

General Screen

  1. 480x320
  2. 16 bit color depth
  3. Overlays are at 70% opacity

Fonts

These appear to be BBClarity, but I'm not sure. Narrow ones are perhaps BBCondensed.

Icons - General

  1. Maintain 2 line weights, one approximately three times larger than the other
  2. Heavier weight is approx. 3 pixels thick
  3. Use heavier weight to provide a strong recognizable silhouette
  4. Use lighter weight to add detail
  5. As much as possible, maintain a front-on orthographic view and avoid adding a third dimension

Rounded Corners

  1. Rounded corner radius is 1/16 the size of the entire image dimensions for larger objects (80 px/ 16 = 5 px)
  2. Smaller objects should get a proportionately smaller rounded corner radius

Complex Icons

  1. Multiple objects can be used in a single icon
  2. When two substantial objects overlap in an icon, a vertical gap, or space should be used to separate the objects 2px 3px

Opacity

Each icon uses a vertical opacity gradient for the white portions. The Normal or
unhighlighted state has a maximum opacity of 80% at the top of the opacity gradient and a
minimum opacity of 60% at the bottom.

Color

Color accents do not use opacity gradients -they are a solid RGB color

Highlight State

Layer Style settings used in Adobe Photoshop for the glow effect on the whiteportions of a highlighted icon:

Outer Glow: RGB -R:52 G:124 B:255,  Opacity -75%,  Size - 9 px

Layer Style settings used in Adobe Photoshop for the glow effect on the coloredportion of a highlighted icon: 

Outer Glow: RGB -accent color,  Opacity -40%,  Size -10 px

Highlighted icons use a solid, full opacity. i.e. No opacity gradient

Note: The black rounded square is placed behind the icon by the theme and must not be included in the final icon output for either the Normal or the Highlighted state. It should only be used as a reference for icon design.

Final Output

Final icon output must be saved as 16-bit PNG files.
The final PNG files should look similar to these examples when placed on various background colors.
Notice how the white portions of the Normal state are actually not visible on a white background. This is expected and is resolved in the theme with a 70% opaque black rounded square being placed behind each icon.

Kickstart Notes

Name Size Creator Creation Date Comment  
PDF File BlackBerry_Style_Guide_-_Precision_... 207 kB Kurt Zettel Aug 05, 2008 11:06  
PDF File BlackBerry_Precision_UI_-_Style_Gui... 225 kB Kurt Zettel Aug 05, 2008 11:09  
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© 2011 Metova, Inc.