Learn about the types of icons that you can create, how to build and style your icons, and tips and tricks for getting the most from the icons in your application.
The high-level overview below outlines the main steps that you can follow when creating your icons.
| Step 1 |
Try to find an appropriate metaphor for the function or physical object that the icon should represent. Try out different variations and pick the one that is easiest to recognize. |
| Step 2 |
Create the icon shapes using the information in the Metaphors topic. Use a vector application (such as Adobe Illustrator) and apply the information from the Building blocks topic. Note where your icon appears in the UI and set up the artboard accordingly. Use pixel units and make sure to use pixel snapping. |
| Step 3 |
Import the shape to a pixel application (such as Adobe Photoshop) and keep it as a shape layer. Use snapping and make sure that straight edges are sharp and aligned. If you don't use snapping, nudge the shape points to avoid blurry edges. Make sure that the canvas is set to the correct width and height. Apply the treatment rules from the Building blocks topic and save the image as PNG-24 with transparency. |
| Step 4 |
Test the icon with other icons, comparing the weight and style. Put the icon in context and test it on a BlackBerry device. Try the blur test: Blur your icon by 3 to 4 pixels. Is the metaphor still recognizable? |
