Building Cover Page for Kwik Book App
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.
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.
Kwik product, the Kwik logo and Kwiksher are properties of Kwiksher.com - Copyright 2011. Screen shots used by permission.
These tutorials are for the older version of Kwik 2 and may not be much help when using Kwik 3 and above. If you are having trouble, please use the Kwik forum.
Editor's Picks Articles
Top Ten Articles
Content copyright © 2018 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.