tailieunhanh - Foundation Fireworks CS4- P7

Foundation Fireworks CS4- P7: The chapters in this book are divided into three parts: “Part 1: Learning Fireworks,” “Part 2: Using Fireworks,” and “Part 3: Fireworks in Action.” In this first part, we start by introducing you to the Fireworks application where it lives within the Creative Suite, what makes it unique, and why you would use it. You’ll be introduced to the bitmap and vector tools and learn how to export your artwork to the Web. | CREATING ADOBE AIR PROTOTYPES Gallery tab Width 100 px Height 44 px X 471 px Y 63 px Corner Roundness 11 11 11 11 Fill Solid 484848 Information tab Width 100 px Height 44 px X 581 px Y 63 px Corner Roundness 11 11 11 11 Fill Solid 484848 Figure 9-3. Final master page layout With the tab backgrounds in place just add the foreground text and you re finished. We ve selected Futura Medium as the font set the size to 14 and set the fill to 666666. 159 CHAPTER 9 Adding the application title The final element of the master page layout is the application title. The title uses a heavier weight of Futura and its baseline is positioned slightly below the content rectangle. We ve applied the same color 666666 to the title as the background of the content rectangle to make it look as if these two elements are joined. With this final piece in place the master page now looks like Figure 9-3 and we re ready to move on to the additional pages of our application. Designing the information page The Information page of this application is like the Help About page of a traditional application. It contains some supplemental or background information about the portfolio. Start by creating a new page 1. Open the Pages panel. 2. Click the New Page icon. 3. Double-click the page and rename it Info. 4. Switch to the Layers panel. Your new page should look exactly like the master page you just created and you should see a layer named Master Page Layer in your Layers panel that contains all of the elements you defined in the master page. Now add a dummy title and description so your layout looks like that shown in Figure 9-4. Figure 9-4. Information page 160 CREATING ADOBE AIR PROTOTYPES Generate filler text quickly by using the Fireworks Lorem Ipsum command Commands Text Lorem Ipsum . This command will create a new text box on the canvas that you can then size position and style. For more advanced control over Lorem Ipsum check out Mayur Mundada s Lorem Ipsum panel on Fireworks Exchange .