A High Tech Way To Make Your eBook Go Viral

Any good salesperson will tell you that the very best time to get an enthusiastic customer recommendation is immediately after a customer has just had a great experience with your product.

If you could provide your reader with a way to send a personal recommendation directly to a friend along with a link to your ebook’s Amazon sales page while your customer has just finished your ebook and is still holding the e-reader is his or her hand, would you do it?  Who wouldn’t want to do that?

Here is one very effective way to do just that. In summary, the technique is as follows.

The e-reader needs to have connectivity with the Internet for this to work. Your ebook will provide a hyperlink to a web page on one of your web sites.

When customer clicks on the hyperlink and the web page opens up in the e-reader, the customer simply types in a personal message along with friend’s email address into a form on that web page and then hits “Send.” That’s it. An email is then sent immediately to the friend with the message and a link to the ebook’s Amazon sales page.

The web page is created with PHP and I will provide the code. PHP sends the email directly from the server that hosts the web page. Nothing happens on your customer’s computer or e-reader. No email functionality is needed on your customer’s end, just Internet connectivity.

Before I get into the details and the code behind all this, let me show you what it looks like. I have written several children’s educational books that do some interactive stuff using KF8. Here is what a reader of one of these books would see and experience when going through this process.

First, the customer would arrive at a page in the ebook that contains a link to the web page on my site. Below is a page in one my kids’ books that does that (Yes, that’s me in a clown suit).

Email-to-a-Friend_eBook_Page

Email-to-a-Friend_eBook_Page

If the e-reader is connected to the Internet, the hyperlink shown on this ebook page, http://bit.ly/sendhappy2 , links to the following page on my web site that is shown below.

It is always a good idea to shorten your URLs with a URL shortening service like bit.ly as I am doing here. If your customer’s e-reader is not connected to the Internet, your customer will have a much easier time remembering the shortened URL than the actual URL.

If you click on that link in the ebook, you will be taken to the web page below.

Here is the top half of the landing web page on my web site and directly below is the bottom half of the web page:

Send-To-A-Friend Web Page On My Site

Send-To-A-Friend Web Page On My Site

I will provide the code to create this web page with PHP shortly.

You can fill out the form as shown below and hit “Send.”

Filled-In Send-To-A-Friend Form

Filled-In Send-To-A-Friend Form

This page is written with PHP (I’ll present the code). Hitting the send button activates the php email function located at the server hosting my site. No email functionality is required on the customer’s end. Everything is done from the server hosting this web page.

Hitting the “Send” button will send an email message to the email address: mark@epubandebookhelp.com that appears to come from this sender:

DonaldDuck@Disney.com

with the following Subject Line:

Donald Duck Sends a Link About an eBook Your Child Will Like

Open up the email and the body of the email will be a text message as follows:

Your friend Donald Duck recommends this eBook – Happy’s the Clown’s TAP-N-SPELL 145 Fun Animals Flashcard eBook:

http://www.amazon.com/TAP-N-SPELL-Kids-Reading-Fun-ebook/dp/B008NWZFJ8/

Donald Duck thought you and your child might really enjoy it.

Donald Duck also had this to say about this fun and educational ebook:

“Hi Mark, Your son or daughter will really like this fun ebook. It\’s full of great jokes and very educational! Cheers, Donald Duck”

There it is.  The friend can just click on the link right from the email and be sent directly to the Amazon sales page for the book.

Here is the code for the web page. This page uses PHP version 5.5. The coding language PHP is more difficult to master than HTML. If you wish to create a web page like this and you are not strong with PHP, you’ll need to find someone who is.

I’ve removed all PHP security measures from the code below to keep it simple.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type” />
<title>Send a Link To a Friend</title>
<link href=”../CSS_Style_Sheets/excel_book.css” rel=”stylesheet” type=”text/css” />
</head>
<body style=”background-color: #000080″>
<div align=”center”>
<p></p>
<div>
<div style=”background-color: #FFFFFF;      border: medium solid #FF0000; padding: 10px; margin: 10px; width: 500px”>
<?php  #  Script email.php
//          Check for form submission
if (isset($_POST['submitted']))
{          //          Minimal form validation
if (!empty($_POST['name']) &&
!empty($_POST['email']) &&
!empty($_POST['youremail']) &&
!empty($_POST['comments']) )
{          //          Create the body
$name = $_POST['name'];
$comments = $_POST['comments'];
$subject = “{$name} Sends a Link About an eBook Your Child Will Like”;
$body = “Your friend {$name} recommends this eBook – Happy’s the Clown’s TAP-N-SPELL 145 Fun Animals Flashcard eBook:\n\n http://www.amazon.com/TAP-N-SPELL-Kids-Reading-Fun-ebook/dp/B008NWZFJ8/ \n\n{$_POST['name']} thought you and your child might really enjoy it.\n\n{$name} also had this to say about this fun and educational ebook:\n\n\”{$comments}\””;
//          Limit length to 200 characters
$body = wordwrap($body, 200);
//          Send the email
$email2 = $_POST['email'] ;
$youremail = $_POST['youremail'] ;
mail($email2,
$subject, $body,
“From: {$youremail}”);
//          Print a message
echo ‘<p></p><p><em><strong><span style=”background-color:#FFFF00″>Thank you for emailing the link to your friend.<br />
Your friend and child will really appreciate it.</span></strong></em><br /><br/>
f you would like to send this link to another friend, go right ahead below.<br/><br />
</p>';
//          Clear $_POST so that the form is not sticky
$_POST = array();
}
else
{
echo ‘<p style=”font-weight: bold;
color:#C00″>Please fill out the
form completely.<br />
Sorry but something was missing.</p>';
}
}          //          End of main isset() IF
//          Create the HTML form
?>
<p>
<img alt=”Happy the Clown’s TAP-N-SPELL Flashcard eBook” height=”200″ longdesc=”Happy the Clown’s TAP-N-SPELL Flashcard eBook”
src=”../Images/Email_Pages/Clown_5_Bending_Right_White_Background_149_200.jpg” width=”149″ /></p>
<p style=”color:blue; font-size:x-large” > You enjoyed Happy the Clown’s<br />TAP-N-SPELL Flashcard E-book.<br />
Why not send a link to the Amazon page to your<br />
friend with children so they can enjoy it too?<br />
<br />Send the link right from here:</p>
<p style=”font-family:arial” ><strong>Fill In Your Name, Your Friend’s Email Address and Yours,<br />
Add a Comment, and Send the Link.<br />Your Friend Will<br />
Really Appreciate It.</strong></p>
<form action=”” method=”post”>
<p>Your Name:<br />
<input type=”text” name=”name” size=”30″
maxlength=”60″ value=”<?php if (isset($_POST['name']))
echo $_POST['name']; ?>” />
</p>
<p>Your Friend’s Email Address:<br />
<input type=”text” name=”email” size=”30″
maxlength=”60″ value=”<?php if (isset($_POST['email']))
echo $_POST['email']; ?>” />
</p>
<p>Your Email Address:<br />
<input type=”text” name=”youremail” size=”30″
maxlength=”60″ value=”<?php if (isset($_POST['youremail']))
echo $_POST['youremail']; ?>” />
</p>
<p style=”color: navy; font-size: 1em; font-weight: bold; text-align: center; font-style: italic”>We respect your email privacy.</p>
<p>Your Comments:<br />
<textarea name=”comments” rows=”5″
cols=”30″><?php if (isset($_POST['comments']))
echo $_POST['comments']; ?>
</textarea>
</p>
<p>
<input type=”submit” name=”submit” value=”Send!” />
</p>
<p>
<input type=”hidden” name=”submitted” value=”TRUE” />
</p>
</form>
</div>
</div>
</body>
</html>

I definitely recommend using bit.ly–shortened links whenever possible. In addition to being easier to remember if a person needs to go somewhere else to use the Internet, bit.ly also tracks how many people have clicked on the shortened link so you’ll know very quickly if you’re getting a lot of click-throughs.

The above adds just one extra page to your ebook, but what a worthwhile page !

How To Expand Text in Speech Bubbles With KF8

Most comic book and illustrated childrens’ book creators write for a relatively large printed page and not for the hand-held screen. Small details and text that are easily visible on 7×10 or 8.5×11 inch paper can shrink beyond recognition on the 600×1024 px screen of a hand-held Kindle device such as the Fire. Comic book and childrens’ book creators are some of today’s most incredible artists. Many of these talented graphic novel illustrators draw their works on 17 x 11 inch paper. Lots of childrens’ book illustrators actually paint on big canvasses and then take pictures.

Instead of redrawing the entire book for the small screen, there are several great alternatives that make it possible for a Kindle viewer to expand parts of an image such as speech bubbles by just tapping on them.

These techniques utilize Kindle’s new KF8 formatting. They work on all hand-held Kindles and also on Kindle for PC. They are as follows:

1)      Panel magnification – A viewer taps on a single panel of a multi-panel image. That panel expands and the rest of the image is greyed out. This technique is known as panel magnification with a lightbox. My most recent blog article covers in detail how to create the KF8 code for this effect. Here is a link to that article:

http://blog.epubandebookhelp.com/2012/05/16/kf8-panel-magnification/

Here is how KF8 panel magnification with a lightbox looks in action:

KF8 Panel Magnification Before Before Activation

KF8 Panel Magnification Before Before Activation

To expand the top frame, click on it and here is the result:

KF8 Panel Magnification After Activation

KF8 Panel Magnification After Activation

2)      Covering a speech bubble with a larger, filled frame containing expanded text – The speech bubble is still there, but is no longer visible because larger text inside a filled border is been placed on top of it. The viewer simply taps on the speech bubble to activate the visibility of thelarger text, which was invisible until then. This blog article will show how to write the KF8 code to create this effect, which is shown as follows:

KF8 Speech Bubble Text Expansion Before Activation

KF8 Speech Bubble Text Expansion Before Activation

Just tap on the speech bubble and the following text surrounded by a filled border appears on top of the speech bubble and covers it up completely:

KF8 Speech Bubble Text Expansion After Activation

KF8 Speech Bubble Text Expansion After Activation

3)      Swapping text with different text – This effect enables a viewer to tap on a screen and swap one set of text with a new set of text that can have totally different formatting and screen position.  This KF8 effect makes the initial text invisible and makes the new text visible. This blog article will also show how to write the KF8 code to achieve this effect, which is shown below:

KF8 Text Swapping Before Activation

KF8 Text Swapping Before Activation

A quick tap on “This is the original text” produces the following result:

KF8 Text Swapping After Activation

KF8 Text Swapping After Activation

This blog article will show in detail how to write the code for KF8 effects numbers 2 and 3 above.


General Explanation of Replacing Speech Bubbles or Text With Larger Text

1)      A Tap Target is created. The Tap Target is a region on the viewing screen that the viewer taps (in hand-held Kindles) or clicks (in Kindle for PC) to activate the text swap. The Tap Target is a <div> container that either provides the location of the speech bubble within the image or actually contains the initial text that will be swapped out.

2)      A Parent Container is created. The Parent Container is also a <div> container that holds the text that will cover up the contents of the Tap Target, whether that is a speech bubble or just regular text. The Parent Container is configured to be invisible because its CSS attribute “display” is set to “none.” The KF8 effect makes the Parent Container and its contents visible. This effect either covers up what was under the Tap Target (in the case of a speech bubble) or replaces the contents of the Tap Target <div> container (in the case of a text swap).

3)      Next we use KindleGen to convert the .epub file to .mobi. KindleGen has to be used to create any .mobi file that employs KF8 formatting. KindleGen can be downloaded from Amazon and currently runs only from the command prompt on your computer.

4)      Finally we are ready to view the .mobi file in a real Kindle e-reader. The Kindle Previewer isn’t capable of performing KF8 effects such as panel magnification or text swapping. You’ll need to load the .mobi file on an actual Kindle e-reader such as Kindle for PC or the Kindle Fire to view the KF8 effects in action. A regular ol’ Kindle will work just fine as well.

To load the .mobi file on your Kindle For PC, just paste the .mobi file into your My Kindle Content directory, which will be located in your My Documents directory. The My Kindle Contents directory is created when Kindle for PC is installed on your PC. When you open up Kindle For PC, you’ll see the new .mobi file sitting on the bookshelf.

To load the .mobi file into a Kindle hand-held device such as a Fire, connect the device to your computer with a USB cable. The Kindle will appear as another directory in your computer. Paste the new .mobi file into the Books directory of this Kindle device. When you go back into your Kindle, you’ll find the new .mobi file sitting on the bookshelf of the Docs directory, not the Books directory.

5)      Once the viewer has opened up the .mobi file in their Kindle, the viewer can click (in Kindle for PC) or tap (in a hand-held Kindle) on the Tap Target to activate the swap. The KF8 coding that will be shown here controls that swap. The contents of the Parent Container are made visible and brought to the top. The contents of the Parent Container either cover up what is under the Tap Target (in the case of a speech bubble) or replace what was in the Tap Target (in the case of swapping text).

******************************************************************

Before I present the HTML and CSS for this effect, let me provide some tips to make it easy to edit an .epub file. Keep in mind that you do all of the editing to an .epub file. The very last step is to convert the .epub file to a .mobi file and then load it into the Kindle e-reader. You never do any editing directly to a .mobi file.

I usually start building my .epub files from scratch by opening up a brand-new blank .epub file in the free epub editor Sigil. First I create and name all of the blank HTML and CSS pages that I’ll be pasting content into.

In this case, it only necessary to create a single, blank HTML page in the Text directory and name it SwapText.xhtml and a single, blank CSS page named SwapText.css in the Styles directory. The Text and Styles directories are default directories that appear in a new, blank epub file created in Sigil.

Following that, while you still have Sigil open, insert the 600×1024 image shown below into the default Images directory of the brand-new .epub file. This image should be named TextSwap.jpg.

TextSwap.jpg - Drawn By Fantastic Comic Book Artist Kris Aquino in His Comic Book Series "Dimensions" That I'm Preparing For Upload To Amazon Kindle At The Time Of This Writing

TextSwap.jpg – Drawn By Fantastic Comic Book Artist Kris Aquino in His Comic Book Series “Dimensions” That I’m Preparing For Upload To Amazon Kindle At The Time Of This Writing

I then add some basic meta data such as author name and book title to the file while it is still open in Sigil. I now save the file and close Sigil. Sigil will save the file as an .epub file. The filename that you save this .epub file will not be the ebook’s name when you see it on the book shelf of your Kindle e-reader. The ebook’s name as it will appear when on the book shelf is set as a meta tag in the .epub’s content.opf file. You can directly edit the content.opf file as explained later or simply use Sigil’s Meta Tools to set this title along with the author’s name.

You’ll want to do all of your editing to this .epub file using a free text-editing program such as Notepad++, or something similar which has numbered lines and search/replace functions. If you have a Mac, you’ll want to  use a free program called TextWrangler instead of Notepad++. Don’t use Windows Notepad as it doesn’t have the numbered-lines feature. Some of the files you’ll be editing here will looks like a dog’s breakfast if you open them up in Windows Notepad.

I recommend using Notepad++  and not Sigil to edit the HTML, especially in this case. I noticed that Sigil would do funny things to the JSON object (discussed below) that I had to undo every time I opened the .epub file up in Sigil. This didn’t happen with Notepad++.

I can now work the epub’s component files directly by changing the .epub extension to .zip and then opening this .zip file with WinZip. Once you have unzipped the .zip file,  use the free text editor Notepad++ to edit all of the component files inside the .zip file from here on out.

Now we’re ready to edit.

With that, let’s get right into it. I’ve placed both effects on the same page of the .epub/.mobi file so that all of the HTML and all of the CSS for both effects will be seen on a single .xhtml page and a single .css page. Initially I will present all of that HTML and all of that CSS for both effects.

I will then separate the effects and show how the HTML and CSS interact to create each of the two effects individually.

I will also show what lines of code have to be added to the .epub’s content.opf file to enable KF8 effects on your Kindle devices.

First, let’s start with the combined HTML for both effects. Here it is:

<?xml version=”1.0″ encoding=”utf-8″ standalone=”no”?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”  “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”&gt; 

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title></title>
<link href=”../Styles/SwapText.css” rel=”stylesheet” type=”text/css” />
</head>

<body> 

<!—Configuring overall screen and image size for both KF8 effects –>
<!– Defines page size (600 X 1024) and contains everything –> 
<div class=”fillScreen”>
   

<!– Defines image size (600 X 1024) and positioning – absolute –>

<div><img alt=””
class=”image”
src=”../Images/Text_Swap.jpg” />
</div>          

<!—Effect A – Replacing a Speech Bubble In An Image With Larger Text –>           

<!– Creates the Tap Target –>
<div id=”tapTarget_A”> 

<!—The JSON object that controls panel magnification –>  
<a class=”app-amzn-magnify”
data-app-amzn-magnify=
‘{“targetId”:”parentContainerPosition_A“, “ordinal”:1}’>
</a>   

</div>           

<!– Here is bordered container with new text –>
<div id=”parentContainerPosition_A
class=”parentContainerBorder_A“>
<p class=”finalTextFormatting_A”>
I’m Gonna Kill Him! WISHMASTER IS DEAD!!
</p>

</div>
          

<!—Effect B – Replacing Text With Different Text –>                        

<!—The original text to be replaced is contained within the Tap Target –>               

<!– Creates the Tap Target –>
<div class=”tapTarget_B”>

<!—The JSON object that controls panel magnification –>
<a class=”app-amzn-magnify”
d
ata-app-amzn-magnify=
‘{“targetId”:”parentContainerPosition_B“,
“ordinal”:2}’>

<p class=”tapTargetFormatting_B”>
This is the original text
</p>
</a>
</div>              

<!—The Parent Container contains the replacement text –>
<div id=”parentContainerPosition_B” class=”targetMagnifier_B”>
<p class=”finalTextFormatting_B”>
And here is the replacement text
</p>
</div>
</div>
</body>
</html>


Now here is the combined CSS for both effects:

/* This first section of the stylesheet is called a CSS Reset.  */
/* A CSS Reset removes inconsistent formatting that browsers often apply  */

html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:”;}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

/* This section configures the whole screen and the image that will be used for both effects.  */

div.fillScreen {
height: 1024px;
width: 600px;
position: relative;
}

div.fillScreen div {
position: absolute;
}

div.fillScreen a {
display: block;
width : 100%;
height: 100%;
}

.image {
position: absolute;
height: 1024px;
width: 600px;
}
/* Effect A – This section replaces a speech bubble with text that is surrounded by a border and solid background */ 

#tapTarget_A {
top: 21%;
left: 60%;
height: 20%;
width: 25%;
}

#parentContainerPosition_A {
top: 20%;
left: 25%;
width: 70%;
}

div.parentContainerBorder_A {
position: absolute;
display: none;
font-size: 150%;
font-weight: bold;
padding: 10px;
border: 7px solid red;
background-color: yellow;
}

p.finalTextFormatting_A {
text-align: left;
color: blue;
font-family: “Times”;
}
/* Effect B – This section swaps text with different text that is formatted differently. */

.tapTarget_B {
position: absolute;
top: 65%;
left: 15%;
}

p.tapTargetFormatting_B {
text-align: left;
font-family: “Times”;
}

p {
margin: 0%;
padding: 0%;
color: white;
font-size: 2em;
}

#parentContainerPosition_B {
top: 60%;
left: 15%;
width: 85%;
}

div.targetMagnifier_B {
position: absolute;
display: none;
font-size: 125%;
}

p.finalTextFormatting_B {
text-align: left;
color: yellow;
font-weight: bold;
font-family: “Arial”;
}

**************************************************************

And that’s it for the CSS.

Before I go through each section of HTML and show how it interacts with the CSS to produce the text swap effect. we’ll add the following lines of code to the content.opf file. This code must be added to the content.opf file to enable KF8 functionality in Kindle devices.

Once again, to edit the content.opf file, change the .epub extension to .zip and open the file in WinZip. Open up the individual files inside the zipped file using Notepad++ and then do your editing. When you finish editing, change the .zip extension back to .epub.

Below are the lines that should be added to the meta data section of the .epub’s content.opf file in order to enable KF8 effects:

<meta name=”fixed-layout” content=”true”/>
<meta name=”orientation-lock” content=”none”/>
<meta name=”RegionMagnification” content=”true”/>
<meta name=”original-resolution” content=”600×1024″/>
<meta name=”zero-gutter” content=”true”/>
<meta name=”zero-margin” content=”true”/>

Here is what each of the above lines added to the content.opf file do:

<meta name=”fixed-layout” content=”true”/>
The above tag that tells the Kindle e-reader to use fixed-layout properties.

<meta name=”orientation-lock” content=”none”/>
This tag can be set to the following choices: portrait-only/landscape-only/none. You might pick portrait-only, for example if you wanted your file viewable only  as portrait in smaller devices such handhelds. That is not the case here. If you are viewing this file on a Kindle Fire, it will be viewable in both portrait (if you’re holding the Kindle Fire upright) or in landscape (if you’re holding the Kindle Fire sideways).

<meta name=”RegionMagnification” content=”true”/>
The above line enables panel magnification in KF8.

<meta name=”original-resolution” content=”600×1024″/>
This identifies the original display size that the content was designed for. This content was originally designed to function in a Kindle Fire, which has a screen size of 600×1024 px.

<meta name=”zero-gutter” content=”true”/>
<meta name=”zero-margin” content=”true”/>

These allow the whole screen to be filled out.

Amazon also states that one of the following book-types should be added to the meta-data section of the content.opf file:

<meta name=”book-type” content=”children”/>
<meta name=”book-type” content=”comic”/>

This is an optional entry. You should leave it out.  Text swapping will function perfectly without it.  Including a book-type value will disable some of the live-text functions in a fixed-layout KF8 ebook, such as bookmarks, highlights and annotations, full search, and dictionary. Background image pinch-and-zoom using double-tap won’t work if the “comic” book-type is selected.

I don’t know of any reason to include a book-type value in the meta-data section of the content.opf file. Amazon’s documentation doesn’t currently list any reason either.

Here is one more useful tip regarding the content.opf file: When you create a new .epub, one of the first things you should do is to update the title in the meta-data section of the content.opf file. The Kindle reader will show the title of a .mobi file that listed in the content.opf file, the name of the .mobi file that you have saved it as. If you forget to update the title in the content.opf file when you create a  new file (especially if you created the new .epub by copying and existing .epub file), you might open up your Kindle device and find that  two .mobi files sitting on the bookshelf have the same name.

And finally, here is how the HTML interacts with the CSS to create the text swap effects shown above.

*****************************************************************

<!—Effect A – Swapping a Speech Bubble In An Image With Larger Text –>
<!– Creates the Tap Target –>   
<div id=”tapTarget_A”> 

#tapTarget_A {
top: 21%;
left: 60%;
height: 20%;
width: 25%;
}

This CSS code indicates that the Tap Target starts on the screen with its upper left corner 21% of the screen’s height down from the top and 60% of the screen’s width from the left. The height of the rectangular Tap Target takes up 20% of the screen’s height. The Tap Target’s width takes up 25% of the screen’s width.

These dimensions can be determined by dropping the image into Photoshop and viewing the measurement ruler that will appear on the image’s edges.

When the image is opened up in Photoshop, enable the Rulers (View / Rulers) and set the Ruler to show increments of height and width as percents of the image’s height and width  (Edit / Preferences / Units & Rulers / Rulers : Percent).

A screen shot of this Photoshop work is shown below. It doesn’t matter how large or small you’ve sized the image before opening it in Photoshop. The height and width will always measure 100%. You simply have to figure out where you want your Tap Target to be in the image and where the image’s edges line up on the percent rulers. Do it as follows:

Using Photoshop To Determine the Tap Target Position

Using Photoshop To Determine the Tap Target Position

*****************************************************************

Below we create the JSON object that controls the text/speech bubble swap 

<!—The JSON object that controls the text/speech bubble swap –> 
<a class=”app-amzon-magnify” data-app-amzn-magnify=
‘{“targetId”:”parentContainerPosition_A“, “ordinal”:1}’>
</a>   

</div>

Inside this div container is a JSON object, shown once again below:

<a class=”app-amzon-magnify”
data-app-amzn-magnify= ‘{“targetId”:” parentContainerPosition_A “,
“ordinal”:1}’>

</a>

A JSON (JavaScript Object Notation) object is a convention used to transfer collections of name/value pairs. This JSON element app-amzn-magnify is specific to Amazon products and is not listed anywhere else in CSS. It controls the text swapping process.

Here is what each part of the JSON element does:

<a class=”app-amzon-magnify”  This anchor contains the JSON element which controls the text swapping process)

“targetId”:” parentContainerPosition_A ”  This identifies the region that will be expanded. This must match the id of the parent container for the replacement text, window, and the larger image. This parent container label appears in the next line of HTML code after the JSON object as follows:

<div id=”parentContainerPosition_A” class=”parentContainerBorder_A”>

“ordinal”:1 The ordinal states the order that the JSON object will appear on the page. There is only one JSON object on this page so the ordinal = 1. The next KF8 effect on this page will have the ordinal set to  2.

“SourceId”  This is a tag that is listed in Amazon’s Kindle Publishing Manual but is not needed for this effect.

The CSS id #parentContainerPosition_A also provides the location of the replacement text that will cover the speech bubble. The upper-left corner of this text will start 20% down from the top, 25% from the left of the screen, and extend 70% of the width of the screen.

#parentContainerPosition_A {
top: 20%;
left: 25%;
width: 70%;
}

The speech bubble is completed covered because the text is enclosed within a large border that contains a solid background. The border’s size is larger than the speech bubble and therefore completely covers up the speech bubble. The div class parentContainerBorder_A configures the border and background.

Everything within this <div> container is invisible because the div’s CSS display attribute is set to “none.” Everything within this <div> container will be invisible until the KF8 effect is activated by a click or tap on the Tap Target. The KF8 effect sets the contents of this <div> container to be visible and on the top layer.

div.parentContainerBorder_A {
position: absolute;
display: none;
            font-size: 150%;
font-weight: bold;
padding: 10px;
border: 7px solid red;
background-color: yellow;
}

***********************************************************************

This HTML creates the Parent Container, which contains the replacement text, the text’s formatting, the border, and the solid background. All of these will cover up the speech bubble when they are set to be visible and on the top layer.           

<!– Here is bordered container with new text –>
<div id=”parentContainerPosition_A”
class=”parentContainerBorder_A“>
<p>
I’m Gonna Kill Him! WISHMASTER IS DEAD!!
</p>
</div>

The CSS id #parentContainerPosition_A provides the location of the replacement text that will cover the speech bubble. The upper-left corner of this text will start 20% down from the top, 25% from the left of the screen, and extend 70% of the width of the screen.

#parentContainerPosition_A {
top: 20%;
left: 25%;
width: 70%;
}

The speech bubble is completely covered because the text is enclosed within a border that has a solid background. The div class parentContainerBorder_A configures this border and background. Its CSS display attribute is set to “none” so that anything in this <div> container will not be visible until the KF8 effect is activated.

div.parentContainerBorder_A {
position: absolute;
display: none;
            font-size: 150%;
font-weight: bold;
padding: 10px;
border: 7px solid red;
background-color: yellow;
}

The replacement text formatted by the following CSS:

p.finalTextFormatting_A {
text-align: left;
color: blue;
font-family: “Times”;
}

The above style is the inner-most CSS style and will therefore over-ride all other CSS parent styles that are applied to it.

***********************************************************************

<!—Effect B – Replacing Text With Other Text That Can Be Formatted and Positioned Differently –>                                

<!– Here is original text to be replaced –>
<!– Creates the Tap Target –>
<div class=”tapTarget_B”>

The location of the Tap Target is configured by the following CSS:  

.tapTarget_B {
position: absolute;
top: 65%;
left: 15%;
}

This states that the Tap Target has its upper left corner 65% down the screen from the top and 15% of the screen from the left.

Using Photoshop To Determine the Location of the Tap Target

Using Photoshop To Determine the Location of the Tap Target

<!—The JSON object that controls panel magnification –>
<
a class=”app-amzn-magnify” data-app-amzn-magnify=
‘{“targetId”:”parentContainerPosition_B“, “ordinal”:2}’>

<p>
This is the original text
</p>

</a>
</div>

This initial text to be replaced is within the above <div> container. This text is formatted by the following two CSS classes:

p.tapTargetFormatting_B {
text-align: left;
font-family: “Times”;
}

p {
margin: 0%;
padding: 0%;
color: white;
font-size: 2em;
}              

<!– Here is the Parent Container with the replacement text that has new formatting and positioning –>                       

<div id=”parentContainerPosition_B” class=”targetMagnifier_B”>

<p>
And here is the replacement text
</p>

</div>

This Parent Container is positioned by the following CSS class:

#parentContainerPosition_B {
top: 60%;
left: 15%;
width: 85%;
}

Note that the Parent Container is positioned 5 % above the Tap Target, whose position is shown once again in Photoshop below:

Positioning of the Tap Target in Photoshop

Positioning of the Tap Target in Photoshop

The magnification factor within the Parent Container and also the initial attribute of invisibility is set by the following CSS class:

div.targetMagnifier_B {
position: absolute;
display: none;
font-size: 125%;
}

The general formatting of any text tagged as a paragraph on this page is set by the following CSS class:

p {
margin: 0%;
padding: 0%;
color: white;
font-size: 2em;
}

And finally, the formatting of text inside any paragraph within this Parent Container is set by the following CSS class:

p.finalTextFormatting_B {
text-align: left;
color: yellow;
font-weight: bold;
font-family: “Arial”;
}

So, that’s how to create text swapping with KF8. It is a much quicker process than KF8 panel magnification, which requires lining up panel exactly with CSS. This technique of text swapping will work on all hand-held Kindle devices and also on Kindle for PC.

If you are interested in adding any of the above KF8 techniques to your comic book or children’s book, feel free to contact me at:

mark@ePubandeBookHelp.com

How To Create KF8 Panel Magnification

Many people may not know it but KF8 panel magnification works in other Kindle devices besides just the Kindle Fire. This blog article will provide the minimum and simplest code necessary to exactly recreate the following example of KF8 panel magnification.

This example shows screen shots of KF8 panel magnification functioning on my Kindle for PC. Panel magnification is a technology that allows a user to tap or click on a panel of an image and view an expanded replica of that panel. Comic books, childrens’ books, and cook books are the most likely candidates for panel magnification. Amazon’s documentation calls this technique Regional Magnification.

You will be able to exactly replicate the following panel magnification example by following this article:

First, I bring up a page of a .mobi comic book sitting on the bookshelf of Kindle for PC on my desktop:

Image Before KF8 Panel Magnification Viewed on Kindle for PC

Image Before KF8 Panel Magnification Viewed on Kindle for PC

If I click on the top panel, the expanded 150% magnified view of that panel appears as shown below. If you were using a Kindle Fire, you would double-tap the panel to activate panel magnification for the same effect.

All of the unzoomed areas  in the image below are shaded grey. This is called the lightbox effect. This expanded panel magnification view with the lightbox effect is what you will be able to create with code and tips provided by this article.

Here is the screen shot of the panel magnification/lightbox effect:

KF8 Panel Magnification Activated on Kindle for PC

KF8 Panel Magnification Activated on Kindle for PC

This blog article will show the minimum code needed to produce exactly the result as shown above. You will be surprised by how compact and simple this code is. You will be especially astonished if you have ever tried to figure this all out from Amazon’s incomprehensible Kindle Publishing Guidelines.

Here is a summary of the panel magnification process. This description isn’t 100% correct but it provides an easy-to-understand way to grasp panel magnification.

Imagine that you have two identical  images. Both of these identical images are sized at 600×1024 pixels. This is the screen size of the Kindle Fire. Now, imagine that you expand one of those images by 50%. This expanded image would now be sized at 900×1536 px and would be 150% larger than the other image.

Suppose that you placed both of those images in a Kindle Fire with the smaller image on top. The smaller, visible 600×1024 image on top fills up the entire screen of the Kindle Fire and covers up the larger 900×1536 image underneath.

With a magical double-tap on the Kindle Fire’s screen, a window opens in the upper 600×1024 image. Through this window now appears a section of the larger 900×1536 image below. If the larger image underneath has been shifted to just the right position, the window will open up to present an expanded view of exactly what was showing where the window was before it opened. The illusion of magnifying a panel has been created.

This entire effect can be created from just one image. In this case we are using the following 900 x 1536 px image:

ComicBook.jpg   900px Wide X 1536 px Tall  Drawn by Kris Aquino

ComicBook.jpg 900px Wide X 1536 px Tall Drawn by Kris Aquino

The embedded three-frame comic book page was drawn by a fantastic comic book creator and artist named Kris Aquino. At the time of this writing I am converting a series of his comic books entitled Dimensions into .epub/.mobi to be sold on Amazon, Barnes and Noble, and the iBookstore. I gotta tell ya that I’m really enjoying this project. I liked comic books when I was a kid and still do to this day.

**************************************************************

Before we go into deep details, let me provide an overview of the general steps we will take to recreate the panel magnification/lightbox effect shown above:

1st –  We start with the above 900×1536 image and size it with HTML/CSS formatting so it can be fully viewed in a smaller 600×1024 screen such as the Kindle Fire’s. It is important to keep in mind that an .epub/.mobi is a mini web site with its content stored as pages of HTML and its formatting controlled by CSS stylesheets.

2nd – We create a Tap Target. The Tap Target is a section on the 600×1024 image that will be tapped or clicked to activate the KF8 panel magnification effect. When the Tap Target is tapped or clicked, a window will open up in the upper 600×1024 image. Through that window a section of the larger 900×1536 image underneath can be viewed.

3rd – We create a lightbox effect. Here we are creating a grey, semi-opaque image that will cover everything on the screen except the magnified area showing through the window. The lightbox effect can be seen in the image above.

4th – We then create the window in the upper 600-x1024 image that will open up to show a section of the larger 900×1536 image below. It is not 100% correct to say that we are creating a window, but it is easiest way to understand the general idea.

5th – We then shift the larger 900×1536 lower image to just the right position so that when the window opens up, the correct section of this larger image underneath will be showing through the open window. We now save our file in the .epub format.

6th – Next. we use KindleGen to convert the .epub file to .mobi. KindleGen has to be used to create any .mobi file that employs KF8 formatting. KindleGen can be downloaded from Amazon and currently runs only from the command prompt on your computer.

7th – Finally we are ready to view the .mobi file in a real Kindle e-reader.

The Kindle Previewer isn’t capable of performing panel magnification. You’ll need to load the .mobi file on an actual Kindle e-reader view the panel magnification/lightbox effect in action.

To load the .mobi file on your Kindle For PC, just paste the .mobi file into your My Kindle Content directory, which will be located in your My Documents directory. When you open up Kindle For PC, you’ll see the new .mobi file on the bookshelf.

To load the .mobi file into a Kindle Fire, connect the Fire to your computer with a USB cable. The Fire will open up in your computer as another directory. Paste the new .mobi file into the Books directory of the Fire. When you go back into your Kindle Fire, you’ll find the new .mobi file sitting on the bookshelf of the Fire’s Docs directory, not the Books directory.

**************************************************************

Before I present the HTML and CSS for this effect, let me provide some tips to make it easy to edit an .epub file. Keep in mind that you do all of the editing to an .epub file. The very last step is to convert the .epub file to a .mobi file and then load it into the Kindle e-reader. You never do any editing to a .mobi file.

I usually start building my .epub files from scratch by opening up a brand-new blank .epub file in the free epub editor Sigil. First I create and name all of the blank HTML and CSS pages that I’ll be pasting content into.

In this case, it only necessary to create a single, blank HTML page in the Text directory and name it ComicPage.xhtml and a single, blank CSS page named ComicPage.css in the Styles folder.

Following that while you have Sigil open, insert the 900×1536 image shown above into the Images directory of the new .epub file. The image should be named ComicPage.jpg.

I then add some basic meta data such as author name and book title to the file while it is still open in Sigil. I now save the file and close Sigil. Sigil will save the file as an .epub file.

You’ll want to do all of your editing to this .epub file using a free text-editing program such as Notepad++, or something similar which has numbered lines and search/replace functions. If you have a Mac, you’ll want to  use a free program called TextWrangler instead of Notepad++. Don’t use Windows Notepad as it doesn’t have the numbered-lines feature. Some of the files you’ll be editing here will looks like a dog’s breakfast if you open them up in Windows Notepad.

I recommend using Nortepad++  and not Sigil to edit the HTML, especially in this case. I noticed that Sigil would do funny things to the JSON object (discussed below) that I had to undo every time I opened the .epub file up in Sigil. This didn’t happen with Notepad++.

I can now work the epub’s component files directly by changing the .epub extension to .zip and open up this .zip file with WinZip. I like to use the free text editor Notepad++ to edit all of the component files inside the .zip file from here on out.

To create the above panel magnification effect with a lightbox as shown above, you’ll only have to edit one page of XHTML (ComicBook.xhtml), one page of CSS (ComicBook.css), and the content.opx file. That’s it. These are files that you will see when you use WinZip to open your .zip file.

Now we’re ready to edit.

First I will show the HTML as it should be placed on ComicPage.xhtml  and then I will show the CSS as it should be placed on style sheet ComicBook.css. Following that I will show how the HTML code interacts with the CSS to create the panel magnification/lightbox effect. I will also show what has to be added to the content.opf file within the epub. That’s all the editing you need to do.

**************************************************************

Here is the HTML that will be pasted into ComicPage.xhtml by using Notepad++:

<?xml version=”1.0″ encoding=”utf-8″ standalone=”no”?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”  “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
  <title>KF8 Panel Magnification Demo</title>
  <link href=”../Styles/ComicPage.css” rel=”stylesheet” type=”text/css” />
</head> 

<body>

  <!– Defines page size (600 X 1024) and contains everything –>
  <div class=”fillScreen”>

 <!– Defines image size (600 X 1024) and positioning – absolute –>
           <div><img alt=””
            src=”../Images/ComicPage.jpg” />
            </div>

  <!– Creates the Tap Target –>
    <div id=”tapTarget”>

         <!—The JSON object that controls panel magnification –>
         <a class=”app-amzn-magnify”
         data-app-amzn-magnify='{“targetId”:”parentContainer“,
“ordinal”:1}’>
         </a>

    </div>

 <!– Creates the parent container for the lightbox, window, and image –>
    <!—Also provides parent container’s size and hides it until activation –>                 

 <div class=parentContainer_Size_Activation” id=”parentContainer“>

<!– Creates full-size grey background which is the lightbox –>
              <div class=”lightbox”>
              </div>

  <!– Positions and formats the Window –>
      <!– This is a window in the 600 X 1024 image above –>
      <!– through which a part of the 900 X 1536 image will show –> 
    <div class=”windowFormat” id=”windowPosition”>

  <!– Formats the underlying 900 X 1536 image and provides the offset –>
             <!– The offset tells how much to move the underlying image –>
             <!– so that the correct part shows through the window –>                     
<img class=”imageOffset” src=”../Images/ComicPage.jpg” alt=””/>
              </div>             

    </div>
  </div>
</body>
</html>

 **************************************************************

I bet you are a little surprised to learn that this is all of the HTML code needed to produce panel magnification/lightbox effect shown above. Lots more bells and whistles can be added but I am just showing the bare minimum code you’ll need.

 **************************************************************

Now here is the CSS that will be pasted on style sheet ComicPage.css that is in the .epub’s Styles directory:

/* This first section of the stylesheet is called a CSS Reset.  */
/* A CSS Reset removes inconsistent formatting that browsers often apply  */

html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:”;}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

div.fillScreen {
height: 1024px;
width: 600px;
position: relative;
}

div.fillScreen div {
position: absolute;
}

div.fillScreen a {
display: block;
width : 100%;
height: 100%;
}

.image {
position: absolute;
height: 1024px;
width: 600px;
}

div.windowFormat {
position: absolute;
display: block;
overflow: hidden;
}

div.parentContainer_Size_Activation {
width:100%;
height:100%;
display:none;
}

div.lightBox {
height: 100%;
width: 100%;
background: #333333;
opacity:.75;
}

div.windowFormat img {
position: absolute;
height: 1536px;
width: 900px;
}

/* Tap Target Zone Size & Position */
#tapTarget {
top: 26%;
left: 19%;
height: 23%;
width: 63%;
}

/* Window Size & Position */
#windowPosition {
top: 20%;
left: 4%;
height: 34%;
width: 93%;
}

/* Full-Size (900 X 1536) Image Offset */
.imageOffset {
top: -116%;
left: -32%;
}

**************************************************************

And that’s it for the CSS.

Before I go through each section of HTML and show how it interacts with the CSS to produce the panel magnification/lightbox.effect. we’ll add the following code to the content.opf file.

Once again, to edit the content.opf file, change the .epub extension to .zip and open the file in WinZip. Open up the individual files using Notepad++ and do your editing. When you finish editing, change the .zip extension back to .epub.

Here are the lines to be added to the meta data section of the .epub’s content.opf file:

<meta name=”fixed-layout” content=”true”/>
<meta name=”orientation-lock” content=”none”/>
<meta name=”RegionMagnification” content=”true”/>
<meta name=”original-resolution” content=”600×1024″/>
<meta name=”zero-gutter” content=”true”/>
<meta name=”zero-margin” content=”true”/>

**************************************************************

Here is what each of the above lines added to the content.opf file do:

<meta name=”fixed-layout” content=”true”/>
The above tag that tells the Kindle e-reader to use fixed-layout properties.

<meta name=”orientation-lock” content=”none”/>
This tag can be set to the following choices: portrait-only/landscape-only/none. You might pick portrait-only, for example if you wanted your file viewable only  as portrait in smaller devices such handhelds. That is not the case here. If you are viewing this file on a Kindle Fire, it will be viewable in both portrait (if you’re holding the Kindle Fire upright) or in landscape (if you’re holding the Kindle Fire sideways).

<meta name=”RegionMagnification” content=”true”/>
The above line enables panel magnification in KF8.

<meta name=”original-resolution” content=”600×1024″/>
This identifies the original display size that the content was designed for. This content was originally designed to function in a Kindle Fire, which has a screen size of 600×1024 px.

<meta name=”zero-gutter” content=”true”/>
<meta name=”zero-margin” content=”true”/>
These allow the whole screen to be filled out.

Amazon also states that one of the following book-types should be added to the meta-data section of the content.opf file:

<meta name=”book-type” content=”children”/>
<meta name=”book-type” content=”comic”/>

This is an optional entry. You should leave it out.  Panel magnification will function perfectly without it.  Including a book-type value will disable some of the live-text functions in a fixed-layout KF8 ebook, such as bookmarks, highlights and annotations, full search, and dictionary. Background image pinch-and-zoom using double-tap won’t work if the “comic” book-type is selected.

I don’t know of any reason to include a book-type value in the meta-data section of the content.opf file. Amazon’s documentation doesn’t currently list any reason either. Go figure?

Here is one more useful tip regarding the content.opf file: When you create a new .epub, one of the first things you should do is to update the title in the meta-data section of the content.opf file. The Kindle reader will show the title of a .mobi file based upon the title that listed in the content.opf file. If you forget to update the title in the content.opf file when you create a  new file (especially if you created the new .epub by copying and existing .epub file), you might open up your Kindle device and find that  two .mobi files sitting on the bookshelf have the same name.

 **************************************************************

And finally, here is how the HTML interacts with the CSS to create the above panel magnification/lightbox effect.  The HTML code will be displayed in black bold and the CSS code will be displayed in blue bold.

 **************************************************************

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”  “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”&gt; 

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
  <title>KF8 Panel Magnification Demo</title>

 **************************************************************

Below is the location of your stylesheet in the .epub file. The style sheet is named ComicPage.css and is located in the Styles directory.

**************************************************************

<link href=”../Styles/ComicPage.css” rel=”stylesheet” type=”text/css” />
</head>
<body>

 <div class=”fillScreen”>

 **************************************************************

This div container defines the page size (600×1024 px) and is sized by the following CSS:

div.fillScreen {
  height: 1024px;
  width: 600px;
  position: relative;
}
 

One helpful way to grasp KF8 panel magnification code is to view the <div> containers as a series of boxes within boxes. Each one is formatted separately and visible when activated or uncovered by deactivating the one on top.

***************************************************************

<div><img alt=””
            class=”image” src=”../Images/ComicPage.jpg” />
            </div>

 **************************************************************

The above defines the image size (600×1024) and positioning (absolute) and is affected by the following CSS: 

div.fillScreen div {
  position: absolute;
}

(the above formats any <div> inside a <div> of class = “fillScreen”)

and

.image {
  position: absolute;
  height: 1024px;
  width: 600px;
} 

**************************************************************

      <div id=”tapTarget”>
      <a class=”app-amzn-magnify”
              data-app-amzn-magnify='{“targetId”:”parentContainer”, “ordinal”:1}’>
      </a>
    </div>

 **************************************************************

The above HTML code, <div id=”tapTarget”>, creates the Tap Target.  The Tap Target is sized and positioned by the following CSS:

#tapTarget {
            top: 26%;
            left: 19%;
            height: 23%;
            width: 63%;
}

This CSS code indicates that the Tap Target starts on the screen with its upper left corner 26% of the screen’s height down from the top and 19% of the screen’s width from the left. The height of the rectangular Tap Target takes up 23% of the screen’s height. The Tap Target’s width takes up 63% of the screen’s width.

These dimensions can be determined by dropping the following image into Photoshop:

ComicPage.jpg  900x1536 px  drawn by Kris Aquino

ComicPage.jpg 900×1536 px drawn by Kris Aquino

When the image is opened up in Photoshop, enable the Rulers (View / Rulers) and set the Ruler to show increments of height and width as percents of the image height and width  (Edit / Preferences / Units & Rulers / Rulers : Percent).

This is shown in the following image, but the rulers showing height and width as percents may be difficult to see. It doesn’t matter how large or small you’ve sized the image before opening it in Photoshop. The height and width will always measure 100%. You simply have to figure out where you want your Tap Target to be in the image and where the image’s edges line up on the percent rulers. This process is shown in the image below:

KF8 Panel Magnification Tap Target Positioning Determined Using Photoshop With Rulers Configured To Show Percent

KF8 Panel Magnification Tap Target Positioning Determined Using Photoshop With Rulers Configured To Show Percent

Now you can see how we got the following Tap Target dimensions:

#tapTarget {
            top: 26%;
            left: 19%;
            height: 23%;
            width: 63%;
}

Inside this div container is a JSON object, shown once again below:

<a class=”app-amzn-magnify”
              data-app-amzn-magnify='{“targetId”:”parentContainer“, “ordinal”:1}’>
              </a>

A JSON (JavaScript Object Notation) object is a convention used to transfer collections of name/value pairs. This JSON element app-amzn-magnify is specific to Amazon products and is not listed anywhere else in CSS. It controls that panel magnification process.

Here is what each part of the JSON element does:

<a class=”app-amzn-magnify” This anchor contains the JSON element which controls the panel magnification process)

“targetId”:”parentContainer”  This identifies the region that will be expanded. This must match the id of the parent container for the lightbox, window, and the larger image. This parent container label appears in the next line of HTML code after the JSON object as follows:

 <div class=”‘parentContainer_Size_Activation” id=”parentContainer“>

“ordinal”:1 The ordinal states the order that the JSON object will appear on the page. There is only one JSON object on this page so the ordinal = 1.

“SourceId”  This is a tag that Amazon’s Kindle Publishing Manual states is needed within the JSON object. On the very next page of the manual, Amazon states that the SourceId is not needed for this JSON object.

I didn’t include the SourceId tag and panel magnification worked fine.

**************************************************************

    class=”‘parentContainer_Size_Activation” id=”parentContainer“>

**************************************************************

The above <div> creates the parent container which will hide the lightbox and the 900 x 1536 image which will show through the window as the enlarged view.

This parent container is sized and prevent from showing until activation (double-tapping on the view screen in  the Kindle Fire or clicking on the Tap Target in Kindle for PC)  by the following CSS: 

div.parentContainer_Size_Activation {
            width:100%;
            height:100%;
            display:none;
}

The <div>’s id=”parentContainer” is not listed on the CSS style sheet. This id must match the targetId listed in the JSON object, which is shown here:

<a class=”app-amzn-magnify”
              data-app-amzn-magnify='{“targetId”:”parentContainer“, “ordinal”:1}’>
 </a>

**************************************************************

              <div class=”lightBox”>
              </div>

 **************************************************************

This HTML creates the lightbox effect with the following CSS, which ensures that the whole screen under the magnified image is covered with a grey (#333333) image that has 75% opacity when panel magnification is activated. Taking a look at the panel magnification/ lightbox effect in action in the image up top probably provides the most intuitive presentation of the lightbox’s functionality, which is shading all unzoomed areas when panel magnification is activated.

div.lightBox {
            height: 100%;
            width: 100%;
            background: #333333;
            opacity:.75;
}

 **************************************************************

      <div class=”windowFormat” id=”windowPosition”>

 *****************************************************************

The above HTML code positions and formats the Window. The Window is the portal through which a section of the larger 900×1536 image underneath can be seen. The HTML code interacts with the following CSS to create that positioning and formatting:

div.windowFormat img {
  position: absolute;
  height: 1536px;
  width: 900px;
} 

#windowPosition {
            top: 20%;
            left: 4%;
            height: 34%;
            width: 93%;
} 

The above dimensions can be determined by dropping the image into Photoshop and viewing the rulers, once again configured as percent of height and width.

The image below has the window region blacked out. If we drop this image into Photoshop, it is easier to see how #windowPositioning’s dimensions were calculated. Once again, the ruler, which is dimensioned as percent of the image’s height and width, is somewhat difficult to see in the image below.

600x1024 Image With Window Blacked Out

600×1024 Image With Window Blacked Out

After dropping the above image into Photoshop and configuring the rulers as percent, this is what appears:

Determining the KF8 Window Dimensions Using Photoshop With Rulers Configured To Show Percent of Height and Width

Determining the KF8 Window Dimensions Using Photoshop With Rulers Configured To Show Percent of Height and Width

It is better to state dimensions in percent. Percent will keep your .epub file semi-independent from changes in viewing screen size in the future. The file will be much easier to update for larger viewing screens in the future.

If viewing screens become bigger in the future (very likely) and you want to replace the 900 x 1536 with a larger image with the same height-to-width ratio, you can use the same Tap Target placement percent measurement (shown above) and the same window placement percent measurements (shown here). You will have to recalculate only the offsets (discussed below).

**************************************************************

              <img class=”imageOffset” src=”../Images/ComicPage.jpg” alt=””/>
              </div>

 **************************************************************

The above <div> contains the image in its actual size (900 x 1536) and tells how much this image much be shifted (offset) right and down so that the correct part of  this image will show through the window when it opens. Here is the CSS which configures the offset of the image:

.imageOffset {
            top: -116%;
            left: -32%;
( 

These numbers have to be calculated in a somewhat round-about way. Imagine that you were looking at the 600×1024 version of the original 900×1536 image. The 600×1024 image entirely fill up the 600×1024 viewing screen. This image has a window in the middle of it whose upper left corner is 4% from the screen’s left edge and 20% down from the screen’s top edge.

Imagine that the full-size (900×1536) version of the image is directly underneath the 600×1024 image that contains the window.

If you lined up the upper-left corner of that window with the upper-left corner of the full-size (900×1536) image below, you would have to shift (offset) the larger image below 178 px right and 403 px down for the correct section of the larger image below to exactly show through when the window opens up.

KF8 Panel Magnification/Lightbox Effect On Kindle for PC

KF8 Panel Magnification/Lightbox Effect On Kindle for PC

The offsets are expressed as percentages and are calculated as follows:

Offest from top (up-or-down movement of image) =

= (Pixels that the image had to be moved down) / (Height in pixels of the window)

=  -403 px / 348 px = -1.16 = -116%

Offset to the left (sideways movement of the image) =

= (Pixels that the image had to be moved left) / (Width in pixels of the window)

=  -178 px / 545 px = -0.32 = -32%

The pixel height and width of the window can be determined by multiplying the image’s dimension (600×1024 px) by the window’s height and width percents as follows:

Height of window = 1024 ps x 34% = 348 px

Width of window = 600 px x 93% = 558 px

You can also drop the 600×1024 back into Photoshop and reconfigure the ruler to show pixels in order to get the above pixel measurements quickly.

The offset percentages will always require lots of trial-and-error. This is probably the most time-consuming part of the entire process. Nailing these percentages correctly on the first attempt is like hitting a hole-in-one: probably a once-in-a-lifetime event.

************************************************************

And the final <div>s to close out the HTML page. Once again it is a good idea to look at a KF8 panel magnification file as a series of <div>s inside of <div>s, or boxes within boxes. Each inner container is activated with the outer container is deactivated.

  </div>
  </div>
</body>
</html>

*****************************************************************

A couple of tips to comic books writers who want the KF8 panel magnification capability added to their comic books:

-  Make all of the frames on every page (full-page image) rectangular. KF8 currently only provides panel magnification to rectangular regions.

-  Place all of your frames in the same spot and sized the same on every page. Doing so enables the same CSS style sheet to be used for every HTML page in the .epub file. If the frames on every page (full-page image) are different sizes or in different places, a new style sheet must be written up for each HTML page. The CSS styles that control the placement of the tap target region, the size and placement of the window, and the offset will all have to be recalculated, unless frames are the same size and in the same place on every image.

If you would like to have an all-image book such as a comic book, a childrens book, or a cookbook formatted with without any KF8 capability, feel free to send me some details about your book to:

mark@ePubandeBookHelp.com
www.ePubandeBookHelp.com

I look forward to hearing from you.

Hope this article was helpful.

ePub Author Question – How Do I Convert My Color Book to Black and White and Make a LOT More Money?

If you are self-publishing hardcopy books with color images, you may want to take a long, hard look at converting your book to black-and-white. The printing cost of a black-and-white book is just a fraction of that of a color book, which means you’ll be able to price your B&W book much cheaper and sell a lot more copies.

If you haven’t priced out the difference between color printing and B&W, you’ll be surprised. I’ll give you the numbers from one of my books as an example. 

My best-selling book is a 478-page book called Practical and Clear Graduate Statistics in Excel. I originally published the hardcopy version in color using Print-On-Demand from Lightning Source. The printing charge from Lightning Source was $44.02. At a retail price of $79.95 with a 20% wholesale discount (meaning that Amazon would get 20% of the sale price), I earned $19.94 per sale.

Introducing Lightning Source’s Convenient Publisher Compensation Calculator

Lightning Source has a convenient Publisher Compensation calculator on their web site. Below is a screen shot of the LS Publisher Compensation calculators running the numbers above: 

Lightning Source POD Publisher Compensation Calculator - Color Book

Lightning Source POD Publisher Compensation Calculator - Color Book

Now let’s take a look at the numbers after the same book is converted to B&W. The printing charge from Lightning Source was reduced to $9.90. At a retail price of $39.95 with a 20% wholesale discount, I earned $22.06 per sale. Cutting the retail price in half greatly increases sales and I even earn a few dollars more per sale. Below is a screen shot of the LS Publisher Compensation calculators running the numbers above: 

Lightning Source POD Publisher Compensation Calculator - Black-and-White

Lightning Source POD Publisher Compensation Calculator - Black-and-White

Not every color book will work as a B&W, but many will. Yours might.

Converting a book from color to black-and-white for the most part involves converting all images from color to grayscale. You will also need to create a new cover artwork file because the spine of a B&W POD book is thinner than a color POD book. This requires a whole new cover artwork .pdf file to be created and then uploaded to Lightning Source. Let’s do that first.

First step – Create the New Cover Artwork File

There are two files that must be created when submitted a book to Lightning Source for Print-On-Demand. Both files are .pdf files that must meet rigid, professional-quality printing standards defined by Lightning Source. The first .pdf file contains the book’s contents. The second .pdf file contains the cover artwork.

We have to create a new cover art .pdf when converting from color to B&W because of the thinner spine of the B&W version. B&W POD pages are slightly thinner than the pages in a color POD book. The spine of the B&W version of a book is therefore thinner than the color version. A thinner spine means that a whole new .pdf cover artwork file must be generated.

Introducing Lightning Source’s Convenient Cover Artwork Template Generator

Lightning Source provides a custom cover art template based upon the book’s dimensions, selection of color vs. B&W, binding type, and number of pages. Here are the inputs for Lightning Source’s cover template generator: 

Lightning Source Cover Artwork Template Generator

Lightning Source Cover Artwork Template Generator

The above inputs are for a B&W, 8.5 X 11 inch, perfect bound book, white paper with gloss laminate having 478 pages. I am choosing to have this template emailed to me as a .pdf file that I will open up in Photoshop. Note that the bar code will not include price information. This is nearly always the correct choice if your POD book will be sold in online retail bookstores such as Amazon. I do a lot of experimenting with pricing for all of my hardcopy POD books. That would not be possible at all if the barcodes on my POD books contained fixed prices.

Below is a blank Lightning Source’s .pdf art cover template based on the preceding inputs:

Lightning Source Blank Artwork Cover Template

Lightning Source Blank Artwork Cover Template

 

This file then should be opened in Photoshop and the work begins. A specific procedure must be followed when opening Lightning Source’s .pdf template in Photoshop to ensure that bar code will contain only black and white without adding any color. If the bar code contains any color, the cover artwork .pdf file will be rejected by Lightning Source. Opening the .pdf template incorrectly in Photoshop is one major cause of color appearing in the bar code. Here is the correct procedure for opening the .pdf from within Photoshop:

- File / Open / browse and select the blank .pdf template saved on your computer that Lightning Source has emailed to you.
- The “Import PDF” dialogue box will appear. Enter the input choices as follows:
- Crop To:  Media Box
- Uncheck: Anti-aliased
- The Width and Height dimensions sent by Lightning Source of the blank template should be correct
- Check:  Constrain Proportions
- Resolution:  300 Pixels/inch
- Mode:   CMYK Color
- Bit-Depth:   8 bit

After you have correctly opened the template in Photoshop, you can begin creating the front and back covers along with the spine. Red dotted lines in the blank template define the edges of the Safety Region for the covers and spine. No artwork or printing should extend past the Safety Region. The blue dotted lines on the blank template define the edges of the Bleed Region. Background color should extend to the edges of the Bleed Region, but not past it.

The bar code on the back cover can be placed anywhere on the back cover. It does not have to remain in its original position in the blank template

The final cover artwork .pdf that will be submitted to Lightning Source must have the red Safety Region lines and blue Bleed Region lines removed. Everything else in the blank template can remain. When you are ready to save it in Photoshop as the final .pdf, follow this procedure:

- File / Save As
- Name the file:   13-Digit_ISBN_cov.pdf    For example:  9781937159139_cov.pdf
- Format:  Photoshop PDF
- As a Copy:  checked
- Alpha Channels:   unchecked
- Layers:   Unchecked
- Use Proof Setup:   Unchecked
- Embed Color Profile:   Unchecked
- Save
- Adobe PDF Preset:   [PDF/X-1a:2001]
- Standard:   PDF/X-1a:2001

Saving the .pdf at the PDF/X-1a:2001 standard causes all colors to be converted to CMYK and ensures that the resolution is at least 300 ppi, which are two of the main Lightning Source requirements for the uploaded file. Here is what the final cover artwork .pdf in this case looked like: 

Final Cover Artwork .pdf File Ready for Upload to Lightning Source

Final Cover Artwork .pdf File Ready for Upload to Lightning Source

This cover artwork file is now ready for upload to Lightning Source. It will be a large file because of the 300 ppi resolution throughout. This particular file was 10.9 MB. Let’s move on to creating the black-and-white content file.

Second step – Create the New B&W Content File

The only difference between a color POD book and a Black-and-White POD book is the color of the text and images. The B&W book must have all images in gray scale and all text in black.

Converting all text to black is simply a matter of all selecting all of the text in the entire document (In MS Word click Edit / Select All) and setting the Font Color of the entire selection to black.

Converting all of the images to gray scale will take a bit more work.

 

How To Convert Color Images To Grayscale

To summarize the process, you’ll need to open each image in Photoshop, set the image’s color mode to grayscale, and ensure that the image is sized properly. After each grayscale image is inserted into the document properly, the document must be saved as a .pdf file that meets the PDF/X-1a:2001 standard, just like the cover. The final step is to run a check called the Preflight check in order to ensure that the entire .pdf file conforms to the same PDF/X-1a:2001 standard that the cover artwork .pdf file conforms must conform to.

The first thing to do is open each image file in Photoshop. The best and safest way to resize and transform an image in Photoshop is to first open it as a “Smart Object.” A Smart Object is a container-like layer that almost anything can be opened up in. No matter what you do to an image opened up as a Smart Object, Photoshop remembers all of the information about the original image and places that information back into the file.  To open an image as a Smart Object, click File / Open As Smart Object as shown below: 

Photoshop Opening an Image As Smart Object

Photoshop Opening an Image As Smart Object

Once the image is opened as a Smart Object in Photoshop, set the image’s size and resolution properly. Click Image / Image Size / and then set the correct setting in the Image Size dialogue box as shown below. The resolution for an image in a POD book should be set to 300 ppi (pixels per inch). Images that consist of line art should be saved at 600 ppi resolution.

The Width and Height dimensions in the Document Size box are the other two measurements to be set. For an 8.5 X 11 inch POD book, I try to make sure that an image’s width never exceeds 5.5 inches and its height does not exceed 8 inches.

The Pixel Dimension setting of width and height would be the dimension to be set if the images were going to be viewed onscreen, such as in an .epub eBook. For an .epub file, I try to ensure that all images are 72 ppi and no more than 500 pixels in width or height. Note that convention is to state the width dimension before the height dimension. Below is the Image Size dialogue box:

Setting Image Size and Resolution in Photoshop
Setting Image Size and Resolution in Photoshop

After setting the size and resolution of the image correctly, change the color mode to grayscale. Do this by clicking Image / Mode / Grayscale. If the image was not originally in CMYK mode, select CMYK mode first, and then select Grayscale. When you select the color mode (CMYK or Grayscale) you will be asked if you want to rasterize the image. You do want to allow Photoshop to rasterize your image at this point. Below is the menu selection of Grayscale.

Setting Image Color Mode To Grayscale in Photoshop

Setting Image Color Mode To Grayscale in Photoshop

Now that your image is properly sized and in grayscale, you can go ahead and swap out the old CMYK color image with the new grayscale version that you just created.

I like to create my content files using MS Word because it is so convenient to make changes. Another big reason that I usually create my content files in Word and not Adobe InDesign is that all of my clients will have MS Word on their computers. I can send my file to them as I am working on it to get their immediate feedback. I couldn’t do that if I did my content files in InDesign because most of my client don’t use InDesign. I don’t dislike InDesign. In fact, it is really a much more capable publishing program than Word. It’s just that my client don’t use it very often.

I am assuming that you have created your content file in MS Word. If you have swapped out all of the color images with grayscale CMYK images, you can now convert the Word document to the final .pdf content file that will be uploaded to Lightning Source.

The best tool to have on your computer for this is Adobe Acrobat. If Adobe Acrobat is loaded on your computer, you will have an Adobe PDF menu item in Word (this is the 2003 version) as shown below.

You’ll need to ensure that the .pdf file will conform to the PDF/X-1a:2001 standard required by Lightning Source. To do this, click MS Word drop-down menu item Adobe PDF / Change Conversion Settings as shown below:

 

Adobe Acrobat Change .pdf Conversion Setting

Adobe Acrobat Change .pdf Conversion Setting

 

The following Acrobat PDFMaker dialogue box will appear. Set Conversion Settings to PDF/X-1a:2001 and make sure Create Bookmarks and Add Links is unchecked. The PDF/X-1a:2001 setting will, by default, set all colors to CMYK. Leave security defaulted to none. Make sure that the page size is set correctly by clicking Advanced Setting / General /  Default Page Size. An 8.5 X 11 inch book should have the width and height settings at 8.5 and 11 inches. All other settings should be defaulted correctly.

Adobe PDF Maker - Correct Settings

Adobe PDF Maker - Correct Settings

After setting the Acrobat PDFMaker dialogue box correctly, convert the Word document to the final .pdf by clicking Adobe PDF / Convert to Adobe PDF.  It can take a little while for your computer to complete this process because the final .pdf file can be very large, particularly if there are lots of images. Images at 300 ppi are large files. The content .pdf file of the book shown here, Practical and Clear Graduate Statistics in Excel, was 101 MB.

After this .pdf file is created, it needs to be checked to ensure that it meets the PDF/X-1a:2001 standard required by Lightning Source for POD input files. The test to ensure that the PDF/X-1a:2001 standard is met is called a Preflight check. This is named after the check that pilots perform on the place before take-off.

Open the .pdf file in Adobe Acrobat. I use Acrobat Professional Pro Extended version 9.0. It is expensive software but worth every penny if you do lots of work with .pdf files.

To bring up the Preflight check on the .pdf content file loaded in Adobe Acrobat, click drop-down menu item Advanced / Preflight as shown below: 

Selecting the Preflight Check In Adobe Acrobat

Selecting the Preflight Check In Adobe Acrobat

ThePreflight dialogue box will come as shown below. Select PDF Analysis and then select “List page objects, grouped by type of object” as shown below:

Specific Preflight Check Selection

Specific Preflight Check Selection

 

You are most concerned that all images are at least 300 ppi and CMYK. 

Preflight Check Output

Preflight Check Output

Below we are expanding the image section of this report to view resolution and color mode of all images.

Specific Preflight Check Output

Specific Preflight Check Output

 

After you have uploaded the cover artwork and content .pdf files to Lightning Source from their web site, you will find out within usually 24 hours whether you have created both files correctly. If both files have been created correctly, you will see the following.

BOOKBLK Accepted  (BOOKBLK is the content .pdf file)
COVER Accepted

I have ordered a proof to be made and shipped to me. Below shows that this proof has been generated, but has not yet been shipped to me. 

Lightning Source Title Status - Cover and Content Files Accepts & Proof Generated

Lightning Source Title Status - Cover and Content Files Accepts & Proof Generated

I received the proof of this B&W version of the book and it looked great. Once again, great job by Lightning Source and now I should be able to make a lot more money selling this book in B&W than in color.

ePub Author Question – Should My Book Be in Color or Black and White?

Color printing is great but it will really jack up the retail price of your book’s hardcopy version.  I’ll show you the figures for one of my books printed in both B&W and color. The difference between the retail prices of each print type needed to provide the same royalty per sale is almost astonishing.

Clarify the Question

Before we break out the numbers, let’s clarify the opening question. What we are really asking is whether the hardcopy version of your book (the Print-On-Demand version if you are self-publishing) should have color images or black-and-white images. A book’s images are the only difference between the color book and a black-and-white versions of the same book. Both versions can have the same full-color cover and same B&W text. The difference between the two is whether the book’s images are printed in color or in gray scale. The images that appear in a B&W book have been printed in gray scale using only black ink. The images in a color hardcopy book have been printed in a color mode called CMYK.

The question of whether to use color or gray scale images is relevant only to printed, hardcopy books. An eBook’s price is not affected by the amount of color contained in the images. eBook images are displayed on the screen of an e-reader. Adding color to an eBook’s images doesn’t add cost to creating the .epub file or displaying the images. Printing a colored image on paper, on the other hand, is way more expensive than printing a gray scale image.

How much more expensive? Here are the numbers for one of my books.

If you are self-publishing, you’ll be using a print-on-demand (POD) company to print and ship your hardcopy books. The POD company partners directly with all online bookstores. When an Amazon customer purchases a hardcopy book, the order is sent to the POD company, who then prints and ships the book to the customer.  The only involvement that you the self-publisher have in this whole sales process is to receive royalty payments at the end of the day. Not bad.

Lightning Source as a POD Company

I use Lightning Source is my POD company for one simple reason. They allow me to make the most money. Lightning Source is the largest POD company with the most retail partners in the world. Lightning Source’s clout makes them the only POD company that can dictate to Amazon what Amazon’s wholesale discount will be. I set my wholesale discount for all of my POD books at 20%. That means that Amazon will receive only 20% of the sale price of one of my POD books. That is significant considering that Amazon keeps a full 65% of sale price of most of my Kindle eBooks.

Lightning Source also gets paid during the sale of each hardcopy book. Lightning Source is the printer and charges a fixed fee for printing each book during each sale. Lightning Source’s fixed printing fee depends on the type of printing, the binding type, and the number of pages in the book.

Lightning Source’s Publisher Compansation Calculator

Lightning Source has a convenient Publisher’s Compensation calculator on their web site that enables you to determine the retail price of your book that will provide a specific royalty payment. Simply input the following information into Lightning Source’s Publisher Compensation calculator:

- Type of book (color or black-and-white)

- Binding type from Lightning Source’s available choice of bindings

- Page color (white or creme)

- Number of pages

- Wholesale discount (the percent of the sale price that you allow the retailer such as Amazon to keep)

- Retail price of your book

The Publisher Compensation calculator then displays Lightning Source’s print charge and your publisher’s compensation.

Here Are the Actual Numbers

Here are the number for one of my books, just to illustrate the difference in pricing between the color and black-and-white versions of the same book.

One of my better-selling books is a 478-page manual entitled Practical and Clear Graduate Statistics in Excel. I originally printed the book in color and was selling it in hardcopy from Amazon at a retail price of $79.95. My royalty from each of these sales was $19.94. Here are the inputs and output of Lightning Source’s Publisher Compensation calculator in this case:

Numbers for the Color Book

- Color, 8.5 X 11 inches, Perfect Bound on White Pages with Gloss Laminate

- 478 Pages

- $79.95 List Price

- 20% Wholesale Discount

Outputs

- $44.02 Print Charge

- $19.94 Publisher Compensation

If I simply convert all of the book’s images from color to gray scale and sell the book as a black-and-white book, here are the new figures (make sure you are sitting down when you read these):

Numbers for the Black-and-White Book

- B&W, 8.5 X 11 inches, Perfect Bound on White Pages with Gloss Laminate

- 478 Pages

- $39.95 List Price

- 20% Wholesale Discount

Outputs

- $9.90 Print Charge

- $22.06 Publisher Compensation

By merely converting all images to gray scale, I was able to cut the book’s retail price in half and increase my profit from each sale. The difference is that the black-and-white print charge is only $9.90 compared to $44.02 for color.

Conclusion

If you want to earn the most money from the sale your books in hard copy, use Lightning Source is your POD company and sell your books in black-and-white.

ePub Author Question – How To Create a Great Amazon Cover Image That Will Sell Lots of Books

A book’s cover and its Amazon cover image are often very different but guess which one is more important?  Outside of brick-and-mortar book stores, a book’s cover won’t help sell at all. But who cares? Independent authors sell almost exclusively online. The Amazon cover image, on the other hand, is the second most important factor in getting a book sold online.

The book’s cover needs to be attractive when held in the hand but it’s the Amazon cover image that sells books. Well, not sell exactly. More like set the appointment for the closer. Amazon sales are closed by the book’s description, reviews, and Amazon’s “Look Inside” feature. The Amazon cover image and its partner in crime, the title, need to hijack and overwhelm the curiosity of a casual Amazon browser in a split second. The Amazon cover image is lethal if it is loaded with the following three bullets:

1) Instantly legible title

2) Striking

3) Simple

First, contrary to popular belief, the book’s cover and the Amazon cover image do not have to be the same. They need to be similar not necessarily identical. Both need to have the same theme but the Amazon cover image is often most effective when it is a simplified version of the book’s cover.

How To Simplify a Book Cover Down To a Great Amazon Cover Image

Simplifying the book cover down to an effective Amazon cover image means doing the following:

1) Remove all text except the title and subtitle. Keep the subtitle only if it is brief.

2) Ensure that the title is instantly readable. It should be near the top, stand-alone, highly contrasted from its background, and large. Chose a font for the title that fits the theme and genre but remains easy-to-read when shrunk.

3) Use only one graphic. More than one graphic makes the postage-stamp-sized Amazon cover image too busy to stop a casual Amazon browser. That one graphic needs to be a grabber.

4) Ensure that each item, whether text or an image, is in its own space. Nothing should overlap.

5) Use only a few colors. The background should be only one color.

6) There should be only one focus. Anything else makes the Amazon cover image too busy.

7) Contrasts between elements and the background should be strong.

8) Your book’s genre should be instantly conveyed by the Amazon cover image.

9) The Amazon cover image should have similarities to others in its genre but must stand out in a noticeable way.

The Amazon cover image needs to have an outer edge to contrast it from the white background of its placeholder. If your Amazon cover image is white on its edges, you are allowed to outline it with a thin, black outline. An Amazon cover image that has white edges will fade into the placeholder background and not look like a book at all. Any momentary confusion generated by your Amazon cover image will prompt Amazon browsers to simply continue browsing.

Characteristics of an Ineffective Amazon Cover Image

You will lose sales if your Amazon cover has any of the following:

1) Hard-to-read title

2) Too many elements

3) Too much to read

4) A main image that doesn’t grab attention

5) No outside edge

6) Elements overlapping each other

7) Too many colors

8) Not enough contrast between elements and the background

9) More than one focus or focal point.

10) Doesn’t stand out from others in its genre

The Postage Stamp Rule

Pretend that you are creating a postage stamp. An Amazon cover image is just about the same size so this technique is very applicable. Postage stamps have only a single, striking image. The text on a postage stamp is stand-alone and easy-to-read. Nothing overlaps on a postage stamp. Postage stamps have only one background color. Postage stamps are always simple, never busy. Of course you can create a much more striking Amazon cover image than a postage stamp because of the fonts, images, and background colors that you have at your disposal. The important point is that your Amazon cover image needs the simplicity, contrast, a single focus, and legibility of a postage stamp.

View your Amazon cover image as it would be seen on Amazon by sizing it to approximately 1.5 inches in height and then save it as a jpeg at 72 ppi with 50% resolution. How’s it look?

The Billboard Rule

Imagine the you’re speeding down the highway and a billboard briefly catches your eye. What did you briefly notice? The billboard’s headline and one image if it was large enough….Anything else? Nope. But…what about all that great advertising text and artwork all over the rest of the billboard? Of course not. And why would any of that stuff be on a billboard anyway? The drivers are speeding along and the faraway billboards look tiny from the road.

You probably see where this is going. You’ll do well to create your cover image for the Amazon catalog is as you were designing a billboard to place beside a highway a ways back from the road. Place only enough on that billboard to catch your potential customers eyes as they are speeding along Amazon Highway. Just like on a highway billboard, anything beyond just a few main items will clutter, crowd, and confuse your book’s billboard on the side of Amazon Highway and your customers will just keep speeding along until a more focused billboard grabs their limited attention.

How To Know That You Have Created an Effective Amazon Cover Image

You’ve probably created an effective Amazon cover image if you are happy with your answers to the following questions:

1) How conspicuous and legible is the title?

2) Is your Amazon cover image busy or is it simple and focused?

3) If you have an image, will the image stop casual Amazon browsers in their tracks?

4) Is the overall contrast sufficient to make every element on the image stand out?

5) Is each element in its own space or is there any confusing overlap among elements in the image?

6) Does the Amazon cover image make the book’s genre instantly clear?

7) Does this Amazon cover image stand out from others in the genre?

ePub Author Question – How To Work With a Cover Artist To Create a Great Cover

How Important Is Your Cover?

A great cover will sell a lot more books than a mediocre cover. Your cover, particularly the thumbnail image, has to grab the casual Amazon browser who is skimming through rows of thumbnails in your genre. The book market is becoming crowded FAST – over 1,000 new books go on sale every day. You need to put your best foot forward and that best foot is a strong cover image.
 

Should You Create Your Own Cover Or Hire a Cover Artist?

Unless you are an experienced cover artist with demonstrated success, you should hire a freelance cover artist to do your cover. It will cost you at least several hundred dollars but will be one of the wisest investments you’ll ever make in your book.  If you have written a good book, the increased sales from a great cover will recoup your investment quickly. Paying a cover designer should not be thought of as a cost but as an investment that will pay for itself many times over.
 

Where Do You Find a Good Cover Artist?

1) Look at the web sites of a number of graphic designers and find several whose style you like the best. Make sure that the graphic designers who make your short list have experience doing book cover design. There is a learning curve, particularly when creating the cover artwork .pdf file for Print-On-Demand. Files submitted to a POD company such as Lightning Source have to meet a number of technical specifications exactly because these files go right into production. The cover artist needs to be experienced in creating these files.

2) Join author groups. Author groups are great sources for locating every type of professional help that a writer might need.

3) Graphic design schools have lots of talent that should not be too expensive. If you opt to employ a graphic design student, make sure that the student has the experience you need and is willing to work with a contract and meet deadlines.

4) Look on the covers of hardcopies and ebooks in your genre. The artists are sometimes listed on the cover.
 

What Are Important Questions To Ask the Cover Designer Before You Hire Him or Her?

1) The most important aspect of working with a cover artist is that you feel comfortable working with him or her. If you are a bit uncomfortable with an artist after one or two communications, you probably should continue your search.

2) Pay attention to the number of questions that the artist asks you. The more questions that the artist asks about your book, your concept, and your goals, the more likely you are to get a final product that is inline with what you want.

3) Ranking right up at the top of the list is the designer’s experience in creating book covers. How many did the artist do? How many in your genre? Take a look at them.

4) You should request a contract with your artist. If the artist doesn’t do a contract, he or she may not bring the professionalism to the table that you’ll want.

5) You need to have the right to use the artwork forever. If you have to renew a license in order to continue to use the cover artwork, you are taking a big risk. Your artist could move, raise licensing prices, or even refuse to relicense because of disagreement. The worse-case scenario would to lose a license for cover artwork used on a series of books. In this case you would have to redo all of the covers. Any brand equity that had been built as a result of cover recognition for your series is instantly gone. You never want to license cover artwork temporarily.

6) You need to get everything clearly spelled out regarding what you will be billed for. Cover artists often bill hourly. Find out what tasks are considered billable. You want to be paying your artist for creative artistic and design work. You don’t want to pay the artist for tasks that you could do yourself. If, for example, the artist bills for image searches, you might consider providing the images yourself. There are also lots of sites that you can find royalty-free images on. There are also plenty of well-known sites that sell the right to use images.

7) Related to the above point is a payment schedule. Make sure that payment terms and schedule are clearly spelled out. The artist may also request a downpayment, sometimes up to 50%.

8) The total cost for creating your cover will be at least several hundred dollars, maybe even more depending on how unique you want your cover to be. Be wary of a cover designer whose price seems too good to be true. You may not get the experience, amount of interaction, or the effort that you would like from the artist.

9) You’ll want to get a production schedule from the artist, complete with deadlines.

10) Don’t expect your cover designer to create illustrations, perform photography, or to have to secure the rights for images for your cover. If you have provided the images, you have relieved the designer of liability for copyright infringement. You may have to provide extra money to the artist if you would like him or her to locate stock images for your cover.

11) Make sure that cover designer can create the proofs in the form and format that you need. For example, if you are creating a cover for a Print-On-Demand hardcopy for Lightning Source or CreateSpace, you’ll be provided a custom .pdf template by the POD company. It is best if your cover designer has created covers in the past for the specific POD company that you intend to use. Each POD company has its own set of specifications and templates. You would rather have your cover designer at the top of that learning curve than at the bottom looking up. I can recommend Lightning Source as a POD company and have used them for all of my POD books. I have not ever used CreateSpace so I can’t  provide first-hand information about them, although I’m sure they do a great job as well.

12) Ask how many cover ideas you will initially receive from the artist. It is not uncommon for a cover designer only to provide a single cover concept and work from there. In the past, cover designers often provided more than one cover concept.
 

How Do You Work With Your Cover Artist To Get the Best Result?

1) Provide the cover artist with a detailed brief about what you would like for your cover. Your brief should provide your ideas about what overall effect and mood you would like the cover to evoke. Provide your ideas about color schemes and any other ideas of artistic expression related to the cover that you have.

2) Make sure your brief contains all necessary factual information such as page count, ISBN, binding format, binding size, color or black-and-white printing on pages, color of pages (for example, crème or white), and the name of the POD company that will be printing your book. Each POD company has its own technical specifications and template. You’ll need to provide the cover artist with enough information so that the artist can download a custom template from your POD company.

3) Your input should important to the designer. Equally important from your end is  to respect and trust  the designer’s creative, artistic abilities. The designer hopefully has worked on many more books than you and should know a thing or two. If you have found a good cover artist, listen to him or her. Your cover artist is the expert in the field of cover design. After all, you are shelling out good money for that expertise. You might as well get your money’s worth.

4) Don’t expect your cover designer to take photographs or do illustrations, Cover designers combine and manipulate images and type face to create effective covers. If you wish the artist to locate images for use on your cover, you may have to pay extra.

5) Be open to an experienced designer’s suggestions of how to change the cover concept to appeal to a wider audience. Authors sometimes define a book’s  target market too tightly.

6) Always insist on a contract with deadlines, payment terms, definition of billable hours, artist’s deposit requirement, copyright retention terms for the cover design, definition and specifications of what the final product will be, how the final product will be uploaded to the POD and also included in an .epub/.mobi eBook file if this will be created.

7) Learn as much as possible in advance about the publishing process and what the specifications required by the POD company mean. Get the cover artist to define the publishing process and also explain all of the POD specifications including the custom template in detail to you. The more you know about the entire process at the beginning, the more likely that the final product will meet your satisfaction. Get the cover designer to go over the template with you and explain what the “bleed” and “trim” areas are. It’s not as complicated as it may sound. The cover artist should be able to explain all of the POD company’s specifications and template in simple, understandable terms.

8) Expect the artist to respect your wishes if you have very strong feelings about some aspect the cover design. On the other side of the coin, respect the artist’s experience and talent. Try to keep in mind that the artist probably has worked on quite a few more books than you have.

9) Request changes if you see something that you would like changed. Before you request any changes, try to clarify exactly why you want the change. Be prepared to listen to the artist’s reasoning on why he or she created and laid out the elements of the cover in that way.

10) If you ask for lots of changes, expect to pay more for the additional work.

11) At the end of the day, do you best to hire talent, provide as much information as you can, and then try as much as possible to trust the skill, creativity, experience, and judgement of your cover designer.