g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Low Carb: 8:00 PM

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


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.

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


Add Building+Cover+Page+for+Kwik+Book+App to Twitter Add Building+Cover+Page+for+Kwik+Book+App to Facebook Add Building+Cover+Page+for+Kwik+Book+App to MySpace Add Building+Cover+Page+for+Kwik+Book+App to Del.icio.us Digg Building+Cover+Page+for+Kwik+Book+App Add Building+Cover+Page+for+Kwik+Book+App to Yahoo My Web Add Building+Cover+Page+for+Kwik+Book+App to Google Bookmarks Add Building+Cover+Page+for+Kwik+Book+App to Stumbleupon Add Building+Cover+Page+for+Kwik+Book+App to Reddit


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

For FREE email updates, subscribe to the Digital Art and Design Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

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


g features
How to Create Patterns in Illustrator

Multiple Artboard Template in Photoshop CC

Design & Bind Your Creative Portfolio - Skillshare

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor