Center for Instruction and Technology Updated: August 3, 2015

1  

In Design and Fixed Layout EPUB

Training Objectives

To understand the EPUB format, and use InDesign to create a rich media publication. Class focus is learning the basic concept of fixed layout EPUB to be viewed in iBooks.

• Overview of EPUB as a eBook format • Compare Fixed-Layout EPUB and Reflowable EPUB format • Learn about how to add basic interactivities such as video, audio, buttons,

hyperlinks, multi-state objects in a fixed layout EPUB • Preview on iPad and export

Prerequisite: This is not a beginner’s class. You should be familiar with the InDesign workspace and panels; how to create mutliple pages and object frames; place images; import and format text and create styles; create swatches and apply strokes; and using basic tools including text wrap, rectangle tool, and align tools.

 • iBooks app (iOS device with iOS10.8 and on your Mac OS X Yosemite) • Adobe Digital Editions 4.0

InDesign CC2014

For ebooks that are heavily relying on graphics like children book, cookbook, artbooks, and complex layout publications, InDesign CC2014 has made rich media eBooks as easy to create as print publications. Before CC2014, EPUBs have to be created with HTML and CSS editors which is quite a daunting experience.

In this workshop, you are going to see how we can add graphics, preserve live text and add interactive options like animation, audio, video, slideshows using multistate objects and buttons, and hyperlinks to fixed layout EPUBs. The new EPUB Interactivity panel in CC2014 allows you to preview how the interactivities work before you export your publication. Also, you will be able to not only read your publication in iBooks, but also in e-readers such as Adobe Digital Editions and Readium.  

What is EPUB? EPUB stands for electronic publication, which is an open standard format for the digital books industry. It is widely supported across all platforms, and can be read by e-readers like Apple’s iBooks, Barnes & Noble’s Nook, Adobe Digital Editions, Aldiko on Android and many others. So far, Amazon Kindle does not support .epub format, and it uses the open standard Mobipocket ebook format with a .mobi extension. The EPUB standard is

Center for Instruction and Technology Updated: August 3, 2015

2  

maintained by the International Digital Publishing Forum (IDPF), a global trade and standards organization. EPUB can display reflowable content and also fixed width layout. It is very similar in appearance to HTML rendered pages with images. Two kinds of EPUBs

Flowable EPUB

1. You have the ability to change font size while reading 2. Text flows as you scale your fonts 3. Don’t have a thumbnail on the Table of content at bottom of page

Fixed Layout EPUB  

1. Complete control on text, page design and image positioning on every page 2. Don’t’ have a command to increase or decrease font size; double tap to zoom in 3. Can create full spread layout (two pictures on a spread) 4. Text is live and is laying on top of images 5. Users can select text or search for text 6. Table of Content is automatically generated at bottom of page 7. Support read-aloud function, audio track and basic java-scripts interactivities 8. Can sell in Apple iBookstore (the alternate choice of a PDF-formated ebook cannot

be sold in iBookstore although you can open PDFs in iBooks.) 9. Support Open type, Trued type, and all Typekit fonts.

Center for Instruction and Technology Updated: August 3, 2015

3  

Challenges of fixed layout EPUB:

• Lots of work • iBooks store does not have ‘Fixed Layout EPUB’ category for marketing • There are fewer readers that support fixed layout EPUBs format than

reflowable EPUBs

Fixed Layout EPUB Readers:

• Apple iBooks • Adobe Digital Edition 4.0 • Readium (Chrome browser extension)

Class Project Step 1 – Create New Document

1. Choose File > New Document. 2. For Intent > choose Digital Publishing. 3. Check Facing Pages. 4. Uncheck the box next to ‘Primary text frame’ 5. Choose 7 pages. 6. Choose Page Size > choose iPad. 7. Choose Orientation > choose Landscape. 8. Choose one column.

Table of Content

Center for Instruction and Technology Updated: August 3, 2015

4  

9. Click OK. Step 2 – Create Page 1 Content

1. On Page 1 of your document, choose File > Place image for the cover. 2. Use the Type tool and draw a Text frame – type ‘University of San Francisco’.

   

Step 3 – Create Page 2 Content

1. Go to page 2-3. 2. Draw a Text frame in the size of 950px by 165px” on the top of the document.

Center for Instruction and Technology Updated: August 3, 2015

5  

3. Fill with placeholder text of 1 column. 4. Below the text frame, add 4 images in 2 rows and 2 columns.

Select, Place and Align Multiple Images  

5. Choose File > Place and select 4 images using Cmd+Shift+click. 6. Cycle through the images by holding down the Up arrow. Pick a top image. 7. Draw an image frame and continue holding down your mouse while clicking the

Up arrow twice, and continue stretching your frame to add two additional rows to the page.

8. Release your mouse when you’re done. 9. Then, choose Fill frame proportionally.

Create a Hyperlink

10. Select the Type tool and select text - ‘Visit our web site for more information’. 11. Choose Window > Interactive > Hyperlinks panel. 12. From Option Menu, choose New Hyperlink. 13. Choose Link to: URL. 14. Enter the URL under Destination. 15. Keep other defaults. 16. Click OK.

17. Repeat process and select text - ‘Email us for questions’. 18. Set another hyperlink and choose Link to: Email. 19. Type in your email address and click OK.

Center for Instruction and Technology Updated: August 3, 2015

6  

Preview To preview spread in InDesign CC2014, you can use the EPUB Interactivity panel (Window > Interactive > EPUB Interactivity Preview). You will need to first select the page you want to preview. For other preview options, you can preview your eBook using iBooks or Adobe Digital Editions.

Center for Instruction and Technology Updated: August 3, 2015

7  

Step 4 – Create Page 3 Content

1. Choose File > Place image. 2. Use the Type tool and draw a Text frame – type “The best experience you can

find here.” 3. Make adjustment to your font and font size as needed. Reposition your text frame. 4. Right-align text.

Step 5 – Create Page 4-5 Content

1. Choose File > Place image. Place the image covering 2/3 of the top spread.

Center for Instruction and Technology Updated: August 3, 2015

8  

Add Audio (MP3) – fly from right (animation)  

2. (optional) Choose the Rectangle tool and draw and shaded box.

3. (optional) Align to right bottom edge of the spread.

4. (optional) Choose the Type tool and type ‘Audio Vibes’.

5. Choose File > Place, and select an mp3 audio file.

6. Click and drag out an audio frame. (Make sure it’s a big enough for the controller bar to show.)

7. Choose Window > Interactive > Media panel. 8. Choose standard for Poster. 9. Set Animation: Select all elements and Group

them first.

10. Choose Window > open Animation panel. 11. Choose Fly in from Right.

Center for Instruction and Technology Updated: August 3, 2015

9  

Add a Facebook Button

12. Choose File > Place the Facebook icon. 13. Select it and open the Buttons and Forms panel. 14. Click on ‘Convert to Object’ icon. 15. Choose Type: Button and enter a Name. 16. Choose Event: On Click or On Release and tap. 17. Click on + sign next to Action > choose Go to URL and type www.facebook.com. 18. Choose EPUB Interactivity panel to preview.

Center for Instruction and Technology Updated: August 3, 2015

10  

 

Convert to Object

Preview Spread: EPUB

Delete Action

Add Action

Center for Instruction and Technology Updated: August 3, 2015

11  

Step 6 – Create Page 6 Content

1. Add a text frame and fill it with placeholder text on the right (1/3 of the page). 2. Add another text frame and create some bold text at bottom left of the page.

Add Video (MP4) 3. Choose File > Place and choose a video mp4. 4. Click and drag out an audio frame for the video up on top left area. 5. Select the video and open the Media panel. 6. Select ‘Play on page load’. 7. Select Poster: From current frame 8. Select Controller type. 9. Select ‘Show Controller on Rollover’. 10. Choose EPUB Interactivity panel to preview.

Center for Instruction and Technology Updated: August 3, 2015

12  

Step 7 – Create Page 7 Content Multi-state Objects (Slideshow)

1. Add a text frame and fill it with placeholder text on the top (1/3 of the page). 2. (optional) Add group graphic using the Rectangle tool.

Center for Instruction and Technology Updated: August 3, 2015

13  

Creating Slideshows with Object States

A multi-state object (MSO) allows you to stack multiple images and display them like a slideshow. You can have different objects for each state such as an image in the first state, a movie on the second state, and text on the third state. You use the Object States panel to create one.

Center for Instruction and Technology Updated: August 3, 2015

14  

3. Choose Window > Interactive > Object States to open the Object States panel. 4. File > New. 5. File > Place > 3 images of the same size. (You can use images or

video.) 6. Stack them loosely. 7. Then, select all objects. 8. Choose Window > Objects and Layout> open Align panel >

choose Align Centers and Align Top. 9. Click the Convert selection to multi-state object button in the

Object States panel. After you have created a multi-state object, you can still add states, change the entire object, or make changes to each state.

Delete State

Convert selection to multi-state object

Paste copied object into selected state

Preview Spread: EPUB

Indicate that the whole multi-state object is selected.

Center for Instruction and Technology Updated: August 3, 2015

15  

To release states from objects, choose from the Option menu in the Object State panel, you can choose to Release State to Objects, Release All states to Objects, or Delete State. Create buttons for slideshow

10. Use the Rectangle tool and draw a small rectangle and fill with a color (right button).

11. Duplicate and fill with another color. Reposition to the opposite side (left button). 12. Select the first button and open the Button and Forms panel. 13. Choose the Convert to button icon and setup button to Go to Next State. 14. Select the second button and repeat the process. Setup button to Go to Previous

State. 15. Choose EPUB Interactivity panel to preview. (Optional) If you want to make arrows instead of two little graphics: 1. Choose the Line tool and draw a line. 2. Make the line Stroke = 10 points. 3. In the Stroke panel, choose End > Triangle. 4. Make the Reference Point of the right pointing arrow on the

left. 5. Hold down Alt/Option + choose Flip Horizontal to make the

left pointing arrow. 6. Follow Step 13 and 14 above to finish.

Paste copied objects into selected state

Indicates the individual state is selected

Option Menu

Click to select multi-state object

Center for Instruction and Technology Updated: August 3, 2015

16  

Center for Instruction and Technology Updated: August 3, 2015

17  

Export your Fixed Layout EPUB Checkpoint: Choose Type > Find Fonts and make sure that all fonts used are Open Type, True Type or Typekit fonts.

1. Choose File > Export > choose EPUB (Fixed Layout). 2. Click Save.

Center for Instruction and Technology Updated: August 3, 2015

18  

Center for Instruction and Technology Updated: August 3, 2015

19  

Adobe Digital Editions 4.0 supports Fixed Layout EPUBs. You can also choose Add Application and download the free iBooks app from Apple store as another viewing app. Once you are done with the export process, ADE or iBooks app will open up the eBook for your preview.

To share your EPUB with others, you can upload your EPUB to a Public/Shared Folder in Dropbox, and let your audience download it to their iPads/Mac where they can use iBooks to view it.

 

Center for Instruction and Technology Updated: August 3, 2015

20  

Resources: Reflowable and Fixed-layout EPUBS https://helpx.adobe.com/indesign/how-to/ebook-fixed-layout.html?set=indesign--whats-new--2014-06 Add Interactivities https://helpx.adobe.com/indesign/how-to/interactivity-fixed-layout-epub.html?set=indesign--whats-new--2014-10 Difference between epub, mobi, azw and pdf ebooks formats http://www.guidingtech.com/9661/difference-between-epub-mobi-azw-pdf-ebook-formats/ Online Training: lynda.com (via myusf.usfca.edu > Fav Apps > Learning Technologies tab ) Readium extension on Chrome: Readium is an open source Chrome web broswer plug-in that reads EPUB ebboks. Download - https://chrome.google.com/webstore/detail/readium/fepbnnnkkadjhjahcafoaglimekefifl/related