Resources | Resources |



Creating visual assets

This section provides an overview of creating visual assets used in the device skin using Adobe Illustrator. A similar procedure can be used in Adobe Photoshop or Flash CS4 to create visual assets.

If only a small amount of device features need to be modified or you would like to customize a profile starting with a profile included in the SDK, the visual assets (Adobe Illustrator .ai files ) are located in Brew MP SDK Pro kits, at the following location: /sck/profiles/src/....

Visual assets are items such as customized keys to add to the device skin. Once these visual assets have been created, Adobe Catalyst can be used to set up states for the newly created assets. For example, using Adobe Catalyst to convert vector graphics to button controls, including button view states.

Do not rely on the stack of layers to hide artwork behind other artwork. Ensure that your artwork contains only what you intend to be visible, and that no artwork is hidden behind other layers. Artwork hidden behind other layers may cause undesirable results in Adobe Catalyst when creating buttons or other interactive components.

  1. Using Adobe Illustrator, create your artwork on a separate layer for each physical piece of the device that has a grouping of components (button) that need to move together. An example of a group of components is the device slide-out keyboard. The top of the device is one layer, and the slide-out keyboard is a separate layer.

  2. Create an additional layer for buttons that control the device in the Simulator, such as open, close, rotate. The following image shows the three layers.

  3. Within the layers, create separate groups for all of your buttons and the body of the device. Leave the path for the screen ungrouped so that it is only nested one level down in its layer. Keeping the screen ungrouped will simplify development later in Catalyst and Flash Builder. The screen dimensions are the same number of pixels as the actual device screen. So if the device screen is 320x240, the screen size in the .ai file must be 320x240. The following image demonstrates what should be contained in a layer. The layer is represented by the blue square, containing everything inside the layer.

  4. One level down in your layer, your layers panel should look like the following image:

  5. Within each button group, create artwork for each state of that button, for example, static, hover, pressed, and disabled. If your button is made up of several pieces, make sure each state is grouped.
  6. When all states have been created, turn off the visibility of all states except the static state. Your layers panel should look like the following image, where the home and back buttons are expanded.

  7. Save your .ai file and close Adobe Illustrator.