Building Cover Page for Kwik Book App - Digital Art and Design

As we start our new book app project, we have only the default page called page1 which has only one layer named Layer 1. We also have an empty Photoshop image named page1.psd. It's time to replace this page1 with the cover page for our book app. There is no reason why we could not use page1 as the cover page except for the fact that we can't rename it from "page1" to "cover". So it's easier to start with a new page and name it "cover". Also, it gives us a good opportunity to demonstrate how to delete any page from the project. The only rule is that a project must contain at least one page. So we will first add a new cover page to our project and then delete the page1 page. Close the empty page1.psd file.

Besides the Storyboards for each page, I have also created a mockup for each page of my book. Each mockup is a Photosjop .psd file and each design element on that page is on a separate layer in the Photoshop file. By making a complete set of mockups for all the pages in the book app, we will be able to fix any problems before we add the pages to our app. This process also forces us to "walk through" the process of building the pages for our app and consider what is needed for the animations and other features we will be including on each page.

If you have all the page mockups finalized before you start building your app, all you need to do is open each mockup .psd file into Photoshop and copy/paste its contents into the page template which we will create from the first page of the app. By using a template at the start of each page, we only need to create the buttons, animations and interactive actions once and then use them again on every page. It also guarantees constancy through all pages of the book.

The only exception is the Cover page. We will not be using a template to build this page because it is unique from the other pages. But we can still use the mockup for the cover page to make our job easier. At this point, you should only have one psd file open in Photoshop, the mockup for the cover page. Kwik will automatically ask if you wish to use the current open file and its contents to create this new page.

Click on the Project and Pages icon in the Categories row.
To add a new page to the book app, click the Add New Page icon (first icon in the second row of tools under the category icons).
In the Add Page dialog box, set the Title of the page to "cover".
Place a check in the checkbox to tell Kwik to use our mockup file for the new page.

Kwik will add the new cover page to the list of pages in the Kwik panel and rename the mockup psd file to "cover.psd", as it saves a copy of this psd file in the Template project folder.

If we look at the Layers panel, we can see that the layers in the mockup file are copied to the new cover page. We have also retained the layer names, layer contents and the order of the layers in the Layers panel.

Each button is on its own layer. The only other layer in the mockup for the cover is the background graphic, which also contains the title text.

infobtn
pagesbtn
enterbtn
musicbtn
bg_cover

You must have at least one page in your Kwik project. Now that we have our cover page, we can delete the page1 page from the project.
Select the 001 page1 from the list of pages in the kwik panel. Click on the Trash Can icon to delete this page.

The page1 has been removed from the list. However, we still have the page1.psd in the project folder. Let's delete the psd file from the Template folder, leaving us with only the cover.psd and Template.kwk files.

Join us in the Flash forum. | Join us in the Digital Art and Design forum.

|