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 introducingyou to the Fireworks application where it lives within the Creative Suite, what makes itunique, and why you would use it. You’ll be introduced to the bitmap and vector tools andlearn how to export your artwork to the Web.
Nội dung trích xuất từ tài liệu:
Foundation Fireworks CS4- P7 CREATING ADOBE AIR pROTOTYpESGallery tab: Width: 100 px Height: 44 px X: 471 px Y: 63 px Corner Roundness: 11, 11, 11, 11 Fill: Solid #484848Information 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 layoutWith the tab backgrounds in place, just add the foreground text, and you’re finished. We’ve selectedFutura Medium as the font, set the size to 14, and set the fill to #666666. 159ChApTER 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 page160 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 (www.adobe. com/cfusion/exchange/).Designing the gallery page The Gallery page consists of a number of thumbnails that each link to its own individual detail page. Again, start by creating a new page. We’ll now create a placeholder symbol that will serve as the thumbnail icon, and then duplicate it a few times to create a total of four thumbnail icons. Creating the thumbnail symbol We’ll start with our old friend the rounded rectangle. Create a new rounded rectangle with the following settings (or be creative and create your own look): Width: 246 Height: 217 Corner Roundness: 24 px Fill: Radial Gradient (#666666, #333333) Figure 9-5 shows the gradient handle positions used to create the soft radial fill. Figure 9‑5. Gradient handle positions Adding a highlight Create a copy of this base rectangle and paste it in the foreground. We’ll apply a linear, white-based gra- dient that adds a little more texture. Change the fill type to a Linear Gradient with the following values: Color Stops: White to White Opacity Stops: 100% to 0% Your final gradient settings should look like those shown in Figure 9-6. Figure 9‑6. Foreground gradient stops 161ChApTER 9 Figure 9-7 shows the position of the gradient handles on the design surface. By setting the last opacity stop to 0% and positioning the last handle in the middle of the rectangle, the base rectangle (with the radial gradient) is still visible beneath this new highlight. Adding a shadow You may have noticed a shadow in the previous figure. This shadow, which adds a little depth to the thumbnail icon, can be easily created by drawing ...