Building EZ Picture Books for the Kindle. Copyright 2013 by Rob Smith All Right Reserved

Size: px

Start display at page:

Russell Andrews
5 years ago
Views:

2 Course Goals The student will be able to recognize HTML documents and understand their structure. The student will be able choose a working resolution for their project, know the limitations of the Kindle format, and understand how to handle image files. The student will understand correct project file structure and effectively use a template to create their own digital Children s Picture Book. The student will know how to have a Children s Picture Book project ready to upload to the Kindle Store.!2

3 Why use fixed layout for your Children s Picture Book? Fixed layout allows the art to viewed as created. Children s Picture Books typically do not need to rely on flowing text. The art will remain fixed in place as designed no matter what device is used to view it. A fixed format allows for layering of other items on top of the art.!3

4 What is HTML? HTML - Hyper Text Markup Language HTML is used as the structure for webpages that are viewed over the internet. HTML uses tags and plain text to build each page. Eg: <head>, </head> or <body>, </body>.!4

Doctype describes to the browser the type of document so it can display! the page of HTML correctly. Without a DOCTYPE description the browser! be left to guess at how the page should be displayed.

5 Doctype describes to the browser the type of document so it can display! the page of HTML correctly. Without a DOCTYPE description the browser! be left to guess at how the page should be displayed. Inside the style tags is the! Cascading Style Sheets (CSS) code.! We will cover CSS in the next section. The <div> tag describes a division or! section of the page to the browser.! In this piece of code the div is fullscreen.! This tells the browser that the it should! look to the image folder and find UT1.jpg.! 1280 x 800 pixels = fullscreen.!5

6 CSS - Cascading Style Sheets What is CSS? CSS is used to set a style for the page or a series of styles within each page. Fonts, background colors, image positioning, and other page attributes can be set using Cascading Style Sheets. Either external or internal CSS are used. External CSS - Lives outside of each HTML page. External CSS can control just one page or an entire website. Internal CSS - The code is embedded within each HTML page. When multiple style sheets are used within the site or page they are initiated in a cascading order.!6

7 Our project will use internal CSS! We want to keep our project simple. For a simple Children s Picture Book with a fix layout typically internal CSS included within each HTML file (page) works well. For a more complicated project an external CSS file would be a better choice.!7

8 Free Software You Will Need! Plain Text Editor - Notepad ++ (PC) or TextWrangler (Mac). Graphics Editor - GIMP (used to resize and compress images). File compressor/decompressor - 7-Zip (PC) or izip (Mac). Kindlegen (converts your HTML files into a Kindle format ready to upload). Kindle Previewer - allows you to preview your file on several devices.!8

9 Selecting a Resolution for Your Art Work There are too many devices! Which one should I design my book for? Kindle Fire HDX 2560x1600 pixels 339 PPI 8.9 in. 7 in. Kindle Fire 1024x600 pixels 169 ppi!9

10 Popular Readers Kindle e-ink [6 ] 800x ppi Kindle Paperwhite [6 ] (e-ink) 1024x ppi Kindle Fire [7 ] 1024x ppi Kindle Fire HD x ppi Kindle Fire HD x ppi Kindle Fire HD 7 (2nd gen.) 1280x ppi Kindle Fire HDX x ppi Kindle Fire HDX x ppi ipad 2 [9.7 ] 1024x ppi ipad Mini [7.9 ] 1024x ppi ipad 3 & 4 [9.7 ] 2048x ppi!10

11 File Size Considerations and Limitations! Kindle has image size restrictions for different types of books! Reflowable ebook KB Children s Book KB Comic Book KB For example - if the individual file size of the image from a page of your book is > 256 KB then the Kindle software will compress it to a size much less then the specified limit. You must also consider the final complete file size of your Picture Book project! 35 % royalty payment = no surcharge for delivery! 70 % royalty payment = $0.15 per/megabyte charge! *Varies with country!11

12 Saving Your Artwork We will be creating a Children s Picture Book. File size is limited to a maximum of 256 KB per image. Design for a specific display device. Every other device the book might be displayed on is a compromise! If your image size is larger than 256 KB on submission the Kindle conversion software will crunch that image down to a size much smaller than the 256 KB limit resulting in a lower quality image. Design the image so that when saved it is a close to the 256 KB limit as possible. JPEG is the preferred file type.!12

13 What was right or wrong about the resolution I chose for the Undead Ted project? I chose to make the resolution of my images 1280 x 800 (Kindle HD 7 in.). Right I created the digital artwork at exactly 1280 x 800 pixels but kept the resolution at a low 72 dpi to save file size. Right + Wrong I made each image a full-page spread and structured my story for a single page view at-a-time. Right I used the Save for Web option available in Photoshop. Right!13

14 Other Artwork Considerations PPI (pixels per inch) verses Resolution! Create your artwork larger than you need it! You may want to make a print copy of your Children s Picture Book in the future. Saving your artwork at 300 DPI or larger is a always a good idea! Decide on a display resolution and stick with it. You can t have it all!!14

15 This is how Undead Ted displays on my ipad using the Kindle APP.!15

16 Why Use a Template? Prebuilt basic project and project folder structure. The template has been already been tested and should work perfectly as-is. You only need to know how to view HTML and CSS files and understand their structure. The user will copy and/or paste items into the template. Only plain text entries will be needed to customized the EZ Picture Book template. Timesaver!!16

17 Types of Files Included in the EZ PB Template Content.OPF: Open Packaging Format - This is the file that defines the structure of your book. All items that belong to the project are contained within the OPF file. Toc.NCX: Table of Contents Navigation Control XML - The file created for our project is very simple. For a more complex ebook project the NCX acts as navigation center. HTML Folder: Inside this folder are located all of the HTML documents that will be included in our ebook project. Each page will require its own HTML file. Image Folder: A copy of each image used for our ebook project will need to located in this folder. Use a simple sequential naming system!!17

18 File Structure!18

19 Toc.NCX File Structure HTML Files Main Folder Images Content.OPF!19

20 In What Order Should the Project Be Built? Finished artwork or photos placed inside the Image Folder Using the template build each HTML page using a designated image/photo that can be found inside the Image Folder Modifying the Content.OPF template file by adding your own project information Modify the Toc.NCX template file to match your project.!20

21 A Closer Look at Content.OPF Content.OPF contains the following items MetaData! This section has modifiable descriptors specific to ebooks. Manifest! A list of all items that make up the ebook. Spine! Acts just like spine of a real book. Each page of the ebook is logged in this section. Now lets take a closer look at the actual files included with your template.!21

22 Come on lets build a book!!!22

23 Version must match the identifier found in the next section True or False Landscape/Vertical/None Resolution of your images change to match False Childrens/Comics/None Horizontal/Vertical Optional for our project leave unchanged Leave unchanged. Cover image must be named cover.jpeg!23

24 !24

25 Manifest Leave this unchanged. All HTML files listed in this section All image files listed in this section!25

26 Spine idref=each HTML page name The spine section is similar to the spine of a real book. Each page is represented in the spine section.!26

27 Toc.NCX!27

28 Changes made now what? Open the Kindle Previewer program and click the blue highlighted Open Book.!28

29 Select your project content.opf file. Kindlegen will parse the file and if no errors are detected you will receive this message. Click OK and your book will open in the Amazon Kindle Previewer. Yeah!!!29

30 A converted-content.opf file folder now is located inside your project. Inside the converted folder is a.mobi file ready to upload to the Kindle Store.!30

DOWNLOAD PDF WHAT IS OPEN EBOOK

DOWNLOAD PDF WHAT IS OPEN EBOOK Chapter 1 : Home Page Open the Books Open ebooks These ebooks can be read without checkouts or holds. The goal of Open ebooks is to encourage a love of reading and serve as a gateway to children reading