Getting started with Adobe Flash Catalyst beta 2

Designing user interfaces in Photoshop

If you haven't done so already, download and unzip the sample files that accompany this tutorial. Open the ecotours_ui.psd file. Note the structure (or order) of the layers in this file (see Figure 1). Use these best practices as you design and build your own user interfaces for Flash Catalyst beta.

Figure 1. The structure of the ecotours_ui.PSD file

The background layer contains elements common to all pages or states in the design. Some of the graphic elements that you won't be building out in this tutorial have been flattened for simplicity's sake.

• The navigation layer contains the text and graphics for the buttons. These elements will be converted into functional buttons when imported into Flash Catalyst beta.
• The page layers contain the content specific to each page.
• The header layers can be seen at the top of the layers panel.

As you create your own Photoshop PSD file, organize your elements into logical groups such as background, navigation, header, and individual page content.

The folder and layer structure of this PSD sample file is simple (see Figure 2).

Figure 2. The EcoTours user interface in Photoshop.

As you create Photoshop interfaces, your layer folders and subfolders will likely contain artwork at a more granular level. Consider grouping artwork that will eventually become individual Flash Catalyst components such as scroll bars, drop-down menus, and buttons. This will make your PSD file much easier to work with when imported into Flash Catalyst beta. As you create different interactive states in Flash Catalyst beta you will turn on and off these different layers.

Page 2 of 7

Previous Page

Next Page