Building Cover Page for Kwik Book App

Building Cover Page for Kwik Book App
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.

  1. Click on the Project and Pages icon in the Categories row.

  2. 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).

  3. In the Add Page dialog box, set the Title of the page to "cover".

  4. 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.

  5. 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.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
Kwik product, the Kwik logo and Kwiksher are properties of - 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.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2021 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.