IntroductionWelcome| 00:03 | Hi, I'm Anne-Marie Concepcion, and this
is InDesign CS6 to EPUB, Kindle, and iPad.
| | 00:11 | This course covers the complete eBook
workflow for getting your InDesign contents into a
| | 00:16 | number of devices and EPUB reading software.
| | 00:20 | From determining which format you're planning
on using, then setting up the original InDesign
| | 00:25 | file to make it EPUB friendly to tinkering
with the final EPUB in a variety of utilities
| | 00:30 | like TextWrangler and Dreamweaver to putting
the final file out there for publication through
| | 00:35 | Amazon's Kindle, Apple's iBookstore, and
plenty of third-party sites and options,
| | 00:41 | I'll show you some specifics like setting
up the images, fonts, and video, for best
| | 00:46 | presentation in an EPUB, adding and editing
metadata and alt tags to your files, and building
| | 00:52 | custom table of contents and
coverage for your final presentation.
| | 00:56 | eBook Publishing is a great way to
get your work to your waiting audience.
| | 01:00 | So let's get started with
InDesign CS6 to EPUB, Kindle, and iPad.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a Premium Member of the lynda.com
online training library or if you are watching
| | 00:06 | this tutorial on a DVD-ROM then you have access
to the exercise files used throughout this title.
| | 00:12 | Each Chapter has its own folder and each
video in that Chapter, if it uses exercise files,
| | 00:20 | has its own sub-folder. The
exercise files are in these sub-folders.
| | 00:25 | Before you make any changes to them I suggest
you duplicate them on your Desktop or anywhere
| | 00:29 | on your hard drive.
| | 00:30 | Most of the exercise files are variations
on a few different publications created in
| | 00:35 | InDesign or EPUBs created from them.
| | 00:39 | All the original linked images are in the
Links folder and the main exercises folder,
| | 00:44 | right here, and I have also tried to gather
all the scripts from various videos into a
| | 00:49 | single Scripts folder, you might find them
duplicated, but here in the Scripts folder
| | 00:54 | they are all collected.
| | 00:56 | If you are a Monthly Member or an Annual
Member of lynda.com you don't have access to the
| | 01:01 | exercise files, I'm sorry.
| | 01:03 | But you can follow along from scratch
with your own InDesign files and images.
| | 01:08 | So let's get started.
| | Collapse this transcript |
| A word about software versions| 00:00 | The state of digital book publishing is a
whirlwind of new products, new versions, new
| | 00:05 | distribution channels, and even newly
discovered CSS tweaks and grep queries for doing what
| | 00:11 | you need to get done in your eBooks.
| | 00:14 | And although this course focuses on using
InDesign to create EPUBs and Kindle eBooks,
| | 00:20 | I'll be showing you how to use many other
software programs and web services that you'll
| | 00:24 | need to get the job done.
| | 00:26 | These programs are all on different tracks
for updating, so I hope you'll understand
| | 00:31 | when what I'm showing on screen might
differ somewhat from the same product you have just
| | 00:35 | downloaded and are working with.
| | 00:37 | Case in point, Adobe Digital Editions,
that's Adobe's free EPUB reader utility.
| | 00:43 | While I was recording this title Adobe
Digital Editions or ADE was at version 1.7, that was
| | 00:50 | the version you can
download from the Adobe website.
| | 00:53 | But as I mentioned in the videos I always
use their public beta version, which was at
| | 00:58 | 1.8, that I downloaded from Adobe Labs,
because it was slightly better, and I explain how
| | 01:03 | to find that version, actually both versions.
| | 01:07 | But soon after we wrapped up the recording
Adobe released a new version, Adobe Digital
| | 01:11 | Editions 2.0, and 1.7 and 1.8 are history.
| | 01:16 | Luckily, ADE 2.0 looks and
acts almost exactly as 1.8.
| | 01:21 | Well, I don't know if that's a good thing
since ADE 1.8 wasn't anything to write home
| | 01:26 | about either, but for our
purposes it worked out great.
| | 01:29 | You know, it's inevitable that this kind of
thing will happen again especially in view
| | 01:33 | of the volatility of the eBook Publishing
industry and a number of different web services
| | 01:38 | and programs that I take
for a spin in this course.
| | 01:41 | Since I can't record the course anew every
week, I hope that you can roll with any minor
| | 01:46 | differences that you may encounter between
what I am showing in the video and what you're
| | 01:50 | seeing on your own computer and eReaders.
| | 01:54 | The main thing to remember is that the
general process of creating a great looking eBook
| | 01:59 | and the hard one production and marketing
and business strategies that I'm going to
| | 02:03 | share with, you are going to remain the same
regardless of minor changes to software and hardware.
| | 02:09 | So thank you for your
understanding and enjoy the course.
| | Collapse this transcript |
|
|
1. Ebook OverviewWhat is an ebook?| 00:00 | I think the first thing that we need to
do is get our terms clear in our heads.
| | 00:05 | What is an eBook for the purposes of this
title, because eBook itself is a pretty generic
| | 00:11 | term, any kind of book that can
be read electronically, really.
| | 00:15 | But in this video title we are specifically
talking about EPUBs and MOBI files, which are
| | 00:22 | Kindle files, and we're going to be spending
a majority of our time talking about the EPUB
| | 00:27 | format specifically, because to create the
Kindle file we're going to start with a healthy
| | 00:33 | EPUB and then convert it to Kindle.
| | 00:35 | And I find that people who are not used to
working with EPUBs or creating their own eBooks
| | 00:40 | are confused on the concept.
| | 00:42 | So what I have done here is I have put up three
versions of the same title, Alice's Adventures
| | 00:46 | in Wonderland, in three different formats, and I have
an extra eBook as a PDF that we'll look at as well.
| | 00:53 | But first let's look at
Alice in Wonderland as a PDF.
| | 00:57 | I would say that most people who are familiar
with InDesign are familiar with PDFs, right.
| | 01:01 | We know that what we're looking at when we
look at a PDF is essentially exactly what
| | 01:05 | we designed in InDesign.
| | 01:08 | If I change the View to fit in window, Zoom to Page
Level is what they call it in Reader and Acrobat land.
| | 01:17 | What happens is the page gets
smaller, the text gets smaller.
| | 01:21 | If I press Command+Plus or Ctrl+Plus or
Minus to zoom in and out, the text gets larger or
| | 01:26 | the text gets smaller.
But the text never rewraps itself.
| | 01:31 | There's no control here for me to
change the size of the type, right.
| | 01:35 | It never actually reflows within the
document, it's essentially a page-based eBook.
| | 01:42 | Now let's look at the same book only
as in EPUB, that's this one right here.
| | 01:48 | I open it up, and it opens up huge because I
think there's something wrong with actually
| | 01:53 | with how the image was set up for the cover.
| | 01:56 | But we are using an EPUB reader called Adobe
Digital Editions that is a free utility for
| | 02:01 | looking at EPUBs that you can download from
the Adobe website if you don't already have it.
| | 02:05 | And on the left I have opened up the Table of
Contents, so we can click, and then we can
| | 02:09 | move through the document page by page.
| | 02:12 | So I am looking for page that
has just text and a graphic.
| | 02:18 | Let's just try it just this one with text,
and we can see that we're having some problems
| | 02:22 | with some special characters, and that will be
something we'll be talking about in this title.
| | 02:27 | But what I want you to see is that I
can change the size of the type here.
| | 02:32 | And what happens is the type rewraps.
| | 02:33 | If I go back to Medium it
goes back to a two-page spread.
| | 02:37 | If I resize the document,
watch the line endings.
| | 02:42 | See the text is flowing, and that is the
hallmark of an EPUB is that it is a flowable document.
| | 02:49 | The text flows, and it's like I am the
person who is governing how wide the river is.
| | 02:56 | What that means is that I can create one EPUB
and people can view that EPUB on their iPhone,
| | 03:02 | on their Android Reader, on their iPad, on
their Mac or PC and the text will always remain
| | 03:08 | the same size, they will just see more or
less of it depending on how big their monitor is.
| | 03:14 | A MOBI file, that's the extension that's used
by Amazon Kindle devices if you have ever purchased
| | 03:20 | a Kindle edition of an eBook, it may end with
something different like AZW or something like that.
| | 03:25 | But essentially they are MOBI inside
and AZW is what Amazon wraps it in.
| | 03:30 | I am going to open up this MOBI file in Kindle
Previewer, which I have already gotten queued up over here.
| | 03:36 | Kindle Previewer is a free utility that
you can download from the Amazon website, and
| | 03:41 | I'll show you where later on in this title.
| | 03:44 | What's cool about it is that it lets you preview what
a MOBI file would look like on various Kindle versions.
| | 03:51 | So the new Kindle Fire, for example, has
color, right, so we can see it in color.
| | 03:55 | But if we go back to Kindle that means the
traditional Kindle 1, 2 and 3, the E Ink devices
| | 04:02 | that are completely in grayscale.
| | 04:05 | So let me go ahead and fast
forward through a few pages here.
| | 04:10 | And here it is in a generic Kindle, but if
I say let me see this in Kindle for iPhone,
| | 04:17 | then it shows us the approximate size of a
screen for an iPhone, but the type is actually
| | 04:22 | just about the same, and we just see less of it.
| | 04:24 | So again and MOBI file
is also a reflowable book.
| | 04:28 | That's the essential difference between
EPUB and PDF and between MOBI and PDF.
| | 04:34 | Now there is not to say that you can't
create a book as a PDF, I mean we do on InDesign
| | 04:39 | Secrets, the blog and podcasts that I run
with David Blatner who is an author here at
| | 04:44 | lynda.com on a lot of InDesign titles.
| | 04:48 | So this is an eBook and in
fact it's a very good eBook.
| | 04:51 | If I go to one of the pages here you can see
we have some interactivity, Next and Previous
| | 04:56 | and so on and then there are some videos and
other things built into this eBook, and we
| | 05:00 | sell it on our website.
| | 05:02 | But we can't sell it where
EPUBs and MOBIs are sold.
| | 05:06 | That's the crucial thing why everybody is trying
to figure out how to create EPUBs and MOBI files.
| | 05:12 | Because though everybody knows how to create
a PDF, everybody who uses InDesign, and many
| | 05:17 | of those people can also create interactive
PDFs, with just a little interactivity like
| | 05:21 | I am doing here and can sell it.
| | 05:23 | The thing is that we don't have the distribution
of Amazon.com or Apple's iBookstore and neither
| | 05:29 | one of those places will sell PDFs,
they only sell EPUBs or MOBI files.
| | 05:35 | You might be able to open and read a PDF
in iBooks on the iPad or on your Kindle, but
| | 05:42 | you won't be able to purchase one.
| | 05:45 | And if you're in the business of publishing you really
like the kind of books that your customers purchase.
| | 05:49 | Okay, so in this title I am going to be
talking about how to create EPUBs and then in later
| | 05:54 | chapters how to create
MOBI files from those EPUBs.
| | 05:57 | So your task if you are a beginner in this
field is to locate EPUBs and start reading them.
| | 06:05 | You already have a few EPUBs in the exercise
files, they came with this video, or you probably
| | 06:10 | have already encountered
a few EPUBs on your own.
| | 06:13 | What are people using to read them?
| | 06:16 | Is the only place that you can read them on a
Kindle device or in an iPad or iPhone using iBooks?
| | 06:21 | No, there are lots of different software
programs that you can use to read EPUBs.
| | 06:27 | The one that I'm using in this
video is Adobe Digital Editions.
| | 06:32 | This is free for Macs and PCs.
| | 06:35 | And if you double-click an EPUB on your Desktop,
and it opens up in a program other than Adobe
| | 06:41 | Digital Editions, then you need to
associate using your operating systems, however you
| | 06:47 | do it for Windows or for the Macintosh, you
need to associate EPUBs with this program.
| | 06:54 | But Adobe Digital Editions is
not the final answer by any means.
| | 06:58 | There are many more ways to read EPUBs.
| | 07:00 | Unfortunately there are not that many ways
to read them on the Desktop, there are lots
| | 07:04 | of apps and utilities that you can
use for your Android and iOS devices.
| | 07:10 | But for the Desktop you can do something like,
you can go to the Barnes & Noble website and
| | 07:18 | download a Nook app that lets you read not
only Barnes & Noble eBooks and access the
| | 07:23 | store really fast, but also any kind of EPUB.
| | 07:28 | You can also get one for Kobo
readers and for the Sony eReaders.
| | 07:33 | If you have an Android device, this program
which I actually don't know how to pronounce,
| | 07:40 | I think it's Aldiko or Aldiko is the program
that most of the people that I have spoken with
| | 07:46 | say that it is the best one for
reading EPUBs on an Android device.
| | 07:51 | Now if you're on an iOS device, you might
be interested in a reader like the Bluefire
| | 07:56 | Reader, which not only is a wonderful EPUB
reader for a mobile device but also if you
| | 08:03 | want to brand your own EPUB reader and then
sell it as part of your own bookstore, you
| | 08:07 | want to become the next Amazon, you can contract
with the Bluefire people, they are pretty cool.
| | 08:13 | Another one that people use a
lot is Stanza from Lexcycle.
| | 08:17 | So Stanza used to be available as a
desktop reader app, but when Amazon bought them a
| | 08:22 | couple of years ago they
stopped all development.
| | 08:25 | Now it's only available for your iOS devices.
| | 08:29 | Another option if you want to read something on
actually any mobile device or on your computer
| | 08:34 | is to use an online EPUB reader.
| | 08:38 | For example, Ibis Reader is a wonderful
standards compliance free service, ibisreader.com where
| | 08:46 | you can read all of your EPUBs, and you can
choose to turn off the Chrome as well, meaning
| | 08:52 | turning off all of the controls and panels and
so on, so you can concentrate on the actual eBook.
| | 08:59 | The only problem with Ibis Reader is that
you have to upload your EPUBs first before
| | 09:02 | it can read them, so you can't just
say open up something on your desktop.
| | 09:06 | But once you do upload it then it's in your
library, so you can access this EPUB reader
| | 09:10 | and your library from any
device, from any computer.
| | 09:14 | Another one that I like only runs in Firefox,
it's called EPUBReader, it's a free extension,
| | 09:21 | and I started using this way back in version
4 of Firefox that was about eight months ago,
| | 09:26 | and now we're up to version 12.
| | 09:27 | Anyway, I am happy to say
that it's still updated.
| | 09:30 | And with this, once you install EPUBReader
in Firefox, I can just choose Open File and
| | 09:36 | navigate to my hard drive where I might
have an EPUB, and it opens up right in Firefox
| | 09:44 | with the Table of Contents here on the left,
and I can move page to page pretty nice.
| | 09:52 | There's lots of controls and things on the
bottom as well, and it keeps track of which
| | 09:57 | EPUBs you have read in its own
EPUB library that you can click on.
| | 10:01 | So like iTunes it copies the EPUB to a special
folder on your hard drive whenever you open it up.
| | 10:07 | Now if you want to read your Kindle books,
and of course you could read it on the Kindle
| | 10:11 | itself, but there is also
software that Amazon provides for free.
| | 10:16 | If you just go to the Free Kindle Apps
page and again you're going to get this URL in
| | 10:21 | PDF, then you can download any of their
reading apps for Smartphones, Computers, and Tablets,
| | 10:28 | but also you can read them in the Cloud.
| | 10:30 | So like ibis reader they have their
own eReader that's based on a browser.
| | 10:34 | Let's say that you want to actually read
it on your Mac, if you just click Kindle for
| | 10:38 | Mac then you can download it right here,
and I can open up that app right here and last
| | 10:43 | time I was using this I was reading
Alice in Wonderland, so there it is.
| | 10:52 | If you go to the Library, and you have logged
in with your Kindle account, which I haven't
| | 10:58 | yet, then it will sync to all the eBooks that
you have purchased at the Amazon Kindle store.
| | 11:04 | Just like your Kindle will sync, these
three books, Treasure Island, Aesop's Fables, and
| | 11:09 | Pride & Prejudice are currently being given
away for free whenever you install the software,
| | 11:14 | which is pretty nice.
Just a couple more apps I want to show you.
| | 11:18 | First of all, this could not be a video on
what can read EPUBs if I didn't show you Calibre.
| | 11:24 | Calibre, and that's the correct pronunciation,
not Calibre, by the way, I asked the developer.
| | 11:30 | Calibre is kind of like a
Swiss army knife of EPUB readers.
| | 11:33 | Not only is it a way for you to read EPUBs,
so I can just double-click Alice's Adventures
| | 11:39 | in Wonderland, and it opens up in a
separate eReader window, and I can read this, and I
| | 11:44 | can go to full screen, if I want I can
search and make bookmarks and all sorts of stuff,
| | 11:49 | but it also organizes your collection of EPUBs.
| | 11:53 | It can convert EPUBs to Kindle, it can
convert HTML files to EPUBs, it can do all sorts of
| | 12:00 | fun stuff over here.
| | 12:02 | But I personally don't use Calibre that often,
I started out using it, what I have found
| | 12:07 | personally is that some services that I'm
trying to upload my EPUBs and MOBI files to
| | 12:12 | sell don't accept it and they
specifically mention Calibre could be the issue.
| | 12:18 | And second I really don't use Calibre for
doing any kind of converting, I actually go
| | 12:23 | in there and edit it myself, and that's
what I'm going to be showing you in this video.
| | 12:28 | But Calibre is free, although of course Kovid
the wonderful developer does accept donations
| | 12:32 | on the website, and there's nothing stopping you
from going ahead and downloading it and trying it out.
| | 12:38 | And I want to mention that, of
course, Calibre is one of your options.
| | 12:42 | There is some development happening for EPUB
readers for the desktop, one of the more recent
| | 12:47 | ones is a program called Bookle, which I don't
think I have running right now, let me start it up.
| | 12:57 | This is from Adam Engst, who is
well-known in the Macintosh community.
| | 13:01 | This is a Mac only, a very
basic EPUB reader that he sells.
| | 13:06 | And it's at version 1.0, and
it does the job so that's one.
| | 13:11 | And then there's another one called
AZARDI that is going to be an EPUB 3 reader.
| | 13:18 | And right now it's a little clunky and
buggy in my testing, so it's not quite ready.
| | 13:23 | But it's something to keep an eye on.
| | 13:26 | So now I think we are all very clear on
what I'm talking about when I mention an eBook
| | 13:31 | in this title, I am
referring to EPUBs or MOBI files.
| | 13:34 | And you should get busy in downloading all
the different kinds of readers that are out
| | 13:38 | there for you to test your own eBooks with.
| | Collapse this transcript |
| How do I find and sell ebooks?| 00:00 | Now that you know what an EPUB is, and you
know what you can use to read it with, where
| | 00:04 | do you find these things?
| | 00:06 | And surprisingly a lot of people
are really in the dark about this.
| | 00:10 | Let's get the two big kahunas out of
the way first, that is Amazon and Apple.
| | 00:15 | So you can always find eBooks
very cheaply or expensive on Amazon.
| | 00:22 | Remember that these will download is MOBI
file so that you can only read them in a Kindle
| | 00:27 | or on one of those free Kindle Apps
that I showed you in the previous video.
| | 00:30 | Of course, there's a Kindle App for basically any
device or any desktop so that's not that big of a deal.
| | 00:36 | But if you go to Amazon and on the left over
here you go to Kindle you can go right over
| | 00:41 | here to Kindle Books or if you have a Kindle,
and you are a member of their prime club,
| | 00:48 | which will cost like, I don't know, $75 a year, you
have a Lending Library you can download these for free.
| | 00:53 | I am always a big fan of where to find
free EPUBs and eBooks, and this is the place.
| | 00:58 | So I'm not going to shell for Amazon, but I
just wanted to point it out to you. Otherwise,
| | 01:03 | you can go right to Kindle and then just go
towards this Kindle Books and, of course, search
| | 01:09 | here or basically if you just search in the
main bookstore, most the books have available
| | 01:14 | as a Kindle addition.
| | 01:15 | You can always download a free sample of most
Kindles, and that way you can make sure that
| | 01:20 | it's something that you want to read before
you actually purchase it, because there are
| | 01:24 | no returns in Kindle Land.
| | 01:27 | Now for Apple you need to use the iBookstore
to purchase eBooks, but if you go to iTunes,
| | 01:33 | and you go to iTunes Store and choose Books, this
is essentially what you would find in the iBookstore.
| | 01:38 | I like this interface a lot better than the
iBookstore on my iPad, because there's Categories
| | 01:44 | over here that you can quickly find, like
Read Aloud Kids' Books or Quick Reads or Enhanced
| | 01:48 | Books, which usually means
EPUBs with videos in them.
| | 01:52 | Now these are all EPUB, so they are much more
flexible in what kind of software you can use to read them.
| | 01:58 | You won't find a whole lot of
free EPUBs though on the iBookstore.
| | 02:03 | I would just want to also mention that a lot
of people get confused between the iBookstore
| | 02:07 | and the App Store, and I'll admit that we
are actually merging, you know, you can get
| | 02:13 | an enhanced eBook that looks like it was an
App, and maybe two years or five years from
| | 02:18 | now, they are going to merge,
and all books will be apps.
| | 02:22 | But for now EPUBs are sold through the
iBookstore and their read in iBooks on iOS devices or
| | 02:29 | third-party EPUB Reader
Software, like Stanza or Bluefire.
| | 02:34 | The App Store sells apps and these are stand-alone
apps, you don't read them through iBooks.
| | 02:40 | Now you can see that if you scroll down
here in the Apps area that there are books for
| | 02:45 | sale in the App Store, so there is
definitely a blurring of the lines, and it's going to
| | 02:50 | get more and more like that
as the months and years go on.
| | 02:54 | But for now, when we are talking about books
from Apple, we're talking about these books
| | 02:59 | that are available from the iBookstore,
and that you read in iBooks, these are EPUBs.
| | 03:04 | But let's turn our attention now to other
sources of EPUBs that are not one of the two
| | 03:08 | big kahunas, like one of my favorite locations,
Project Gutenberg, which was started many
| | 03:15 | years ago, and transcribing all books to
digital format, as PDFs, as HTML files as plaintext
| | 03:23 | documents and in recent years as EPUBs.
| | 03:26 | As you can see, the site offers over 38,000
free eBooks, these are all books in the public
| | 03:32 | domain, and this is a
great way to download EPUBs.
| | 03:35 | Now the production values of some of these
EPUBs are kind of iffy, some of them are great,
| | 03:41 | but some of them were done by machines or
computers or grad students who are on their
| | 03:45 | 12th pot of coffee, so sometimes they don't
work out really well as a beautiful work of
| | 03:50 | art, as in EPUB like what we're going to learn
how to do in this title, but just keep that in mind.
| | 03:55 | This is a great place to start downloading
some EPUBs and inspecting them to see what
| | 03:59 | works for you and what doesn't work.
| | 04:03 | One of the biggest sources for free EPUBs
is Feedbooks, and a lot of eReader software
| | 04:09 | have hooks into Feedbooks where you can actually
search the library and download books from Feedbooks.
| | 04:15 | These are all EPUBs eBooks.
| | 04:18 | They do sell a few, but
there's a ton of Free Books.
| | 04:20 | So if I click Free Original Books, there are a
lot of them, you can just go head and Download
| | 04:24 | and see what they look like.
| | 04:26 | And I'm going to quickly go through a whole
bunch of other sites, there is BooksOnBoard,
| | 04:30 | which has lots of books, as many of them are
free, I actually click the Under-five category,
| | 04:37 | but on the homepage they are really aren't all
that free, they're actually the normal standard price.
| | 04:45 | Fictionwise is also another great huge
website where their eBooks are often available as
| | 04:51 | PDFs as well as EPUBs.
| | 04:54 | ebooks.com is really great
place to search for more EPUBs.
| | 04:58 | Google has now there own cloud-based
eReader service, which they now call Google play,
| | 05:04 | and you can purchase books here and read
them in the browser, but you can also download
| | 05:08 | them and read them on your eReader
devices, these are all EPUB files.
| | 05:12 | This is the Sony Reader Store.
| | 05:15 | If you have a Sony Reader device, I usually
purchase eBooks from here and download them to that device.
| | 05:22 | The same thing is true for the NOOK Store,
so you can go to the NOOK Book Store and find
| | 05:26 | eBooks to download to your
NOOK and the Kobo Book Store.
| | 05:31 | Now later on in this title I am going to be
talking about how to sell the eBooks you create
| | 05:37 | and a couple of these stores have portals
or special websites were small publishers
| | 05:42 | or independent authors can go ahead
and upload their books to the store.
| | 05:46 | And a Kobo Store is one of them.
| | 05:48 | The Nook Store is another one, of course,
Apple and Amazon are the other two big ones
| | 05:53 | that I'll be talking about later on.
| | 05:55 | But while you're surfing some of these websites,
if you think that you could do well by selling
| | 06:01 | your eBook on that website, then just look
in the footer or in any of the navigation
| | 06:06 | tabs for information on how to become a
publisher at their site, and as I said I will be talking
| | 06:11 | about that more in depth for a few of
these publishers later on in this title.
| | 06:16 | One of my very favorite websites is called
mobileread.com for anything having to do with
| | 06:21 | eBooks and EPUBs and they have a series of
Wikis, which are kind of like Wikipedia only
| | 06:27 | for a specific topic, and
this one is eBook Stores.
| | 06:32 | So if you want to see you many, many other
sources for eBook Stores and click through,
| | 06:37 | go head and go to this page, and of course, I
want to mention that you can sell them yourself,
| | 06:43 | and you can go to individual websites and
purchase from the publisher directly, the
| | 06:48 | eBooks that they may be selling.
| | 06:50 | So I mentioned in a previous video that Adam
Engst and his crew developed their own EPUB
| | 06:56 | Reader for the Macintosh called Bookle.
This is their own website, Take Control Ebooks.
| | 07:01 | Now all of their eBooks are
mainly for Macintosh users.
| | 07:04 | And they used to sell them only as PDFs, but lately
they have of course been selling them as PDFs and EPUBs.
| | 07:09 | In fact, I would venture that just about any
bookseller, large or small, who use to only
| | 07:15 | sell digital books as
HTML files or as PDF files.
| | 07:20 | Everybody is moving over to EPUB, well,
everybody except of course for Amazon.
| | 07:23 | Not yet, we're all hoping, but not yet.
| | 07:26 | So I think you can see that there is actually
a huge variety of places where you can download
| | 07:32 | all sorts and EPUBs that you pay for or for free, and
lots of different software programs to read them on.
| | 07:39 | It's a rich and vibrant new industry, and I am
really excited to help you get started with it.
| | Collapse this transcript |
|
|
2. EPUB Production BasicsExamining the EPUB file format| 00:00 | You're going to find it a lot easier to
understand the rest of this video title.
| | 00:05 | If you take a moment to come with me while I
give you a tour of what's inside of these EPUBs.
| | 00:12 | Because these EPUBs are not just a single
file, they're actually a collection of many
| | 00:16 | files, and the .epub extension
is essentially a .ZIP extension.
| | 00:22 | So you know about .ZIP, right?
| | 00:24 | You take a folder full of files or a whole
bunch of individual files, and you can compress
| | 00:28 | them into a Zip file on both the Mac and the PC.
| | 00:30 | Well, that's what these EPUBs are is that they are
Zip files except they end with .epub instead of .ZIP.
| | 00:37 | You can change the extension to .ZIP
and extract them easily on Windows.
| | 00:41 | On a Mac, you have to use third-party
software because it's built in unarchiving software,
| | 00:46 | it doesn't recognize those renamed Zips.
But I have already done that for you.
| | 00:52 | And of course, later on in this title, I'm
going to show you lots of ways that you can
| | 00:55 | unzip or what we call crack open the
EPUBs to start editing the contents.
| | 01:00 | But first, let me show you what
they look like as a complete EPUB.
| | 01:03 | You have seen either one of these before.
| | 01:06 | So, Dreamdays is an eBook about driving
through Tuscany, and it has many pictures, and it
| | 01:13 | has colored background, sidebars.
| | 01:16 | It has colored headings, and links,
and lots of different formatting.
| | 01:22 | So, it's kind of a complex eBook.
This is called Dreamdays.
| | 01:27 | Then the other one, I opened
up in Firefox's EPUB reader.
| | 01:30 | This is actually a file that is in the middle
of production that I used a lot in the previous
| | 01:35 | version of this video, InDesign CS5.5 to
EPUB called A Brief History of San Francisco.
| | 01:42 | This is a lot simpler
document, it's not that long.
| | 01:45 | It's probably only about 10 pages long.
| | 01:48 | But it also has colored headings and
pictures and some interesting formatting.
| | 01:52 | So, these are just regular EPUBs with tables of
content and text that you can see for yourself.
| | 02:00 | But once we unzip them--let's hide these so
we can concentrate on this--and let's open
| | 02:07 | up San Francisco History,
and I'll turn it this way.
| | 02:11 | So in SFHistory, we have two folders and a file.
| | 02:14 | I know a lot of these files and folder names
will be very mysterious to you, but you will
| | 02:19 | become intimately familiar with
them by the end of this video title.
| | 02:23 | I'll be talking about the anatomy of an EPUB and
what these files do in much more detail later on.
| | 02:29 | But I just wanted to give you a
peak as I said into what's inside here.
| | 02:33 | So we have some XML files, and we have
this strangely named folder that I refer to as
| | 02:39 | the book folder because it basically has
all of the text and images in the book itself.
| | 02:44 | These are more control files up here.
| | 02:47 | So you see that the book for San Francisco
History is essentially a series of HTML files
| | 02:53 | one right after the other, and then we have a
folder containing all the images that we are looking at.
| | 02:59 | So, there is the cover, and there's that
landscape photo, and we have a CSS file, which is a
| | 03:04 | text file that defines the
look of this text in the book.
| | 03:10 | The toc.ncx file is that table of contents that
appeared in the left-hand side of the Firefox browser.
| | 03:16 | Now, if we look at the other book Dreamdays, it too
has the same construction of two folders and a file.
| | 03:24 | And inside its book folder, we just have the
Cover.html file, and we have html
| | 03:31 | file for the entire chapter.
| | 03:34 | We do have the images folder with
all the images that the eBook contains.
| | 03:40 | Again, we have a CSS file, a text
file that defines the formatting.
| | 03:45 | We have a separate file that we have created,
that is a linked table of contents in addition
| | 03:51 | to that table of contents that
appeared in the left sidebar.
| | 03:55 | And then this eBook actually
uses some JavaScript as well.
| | 03:59 | But I want to show you that if we'd select
this Dreamdays1.html file, you can right-click
| | 04:04 | the HTML or XHTML files that you'll find
inside your EPUBs and then just open them up right
| | 04:10 | inside of a browser like I'm
going to open this up with Safari.
| | 04:14 | And apparently, this image was sized to take
up 100% or 80% of the size of the window--oh
| | 04:20 | that looks beautiful. Let's go there.
And there is the eBook.
| | 04:25 | So, let's actually go down to the middle here,
introduction to Chianti Day-One Itinerary,
| | 04:31 | those are the big sidebars and so on.
| | 04:34 | If you look at the source for this, if I go
to View > View Source, you'll see the text
| | 04:41 | and the tags as though
this were an actual web page.
| | 04:45 | It has a head section, the paragraphs are
delineated with the p tags for paragraph,
| | 04:51 | it has h1, h2, h3 header levels.
| | 04:55 | If you have ever done any kind of website
design, this should look very familiar to you.
| | 05:00 | The same is true if we go back to the
Finder, and look at the San Francisco book.
| | 05:06 | We go to SFHistory, and open
up one of these HTML files.
| | 05:14 | I'll open this up in Safari.
| | 05:16 | So, it looks like a regular web page, and if
we go to View Source, we see the same paragraph
| | 05:23 | tags with classes and divs and
the head and the body and so on.
| | 05:29 | So, are you getting in that what an
EPUB is is essentially a miniature website.
| | 05:36 | And EPUB readers, EPUB reader software, and
EPUB reader devices are essentially reading
| | 05:44 | the website into the eReader software.
| | 05:48 | Every chapter is like a separate
page in a website like a link to a page.
| | 05:54 | The images are JPEGs, or GIFs, or PNGs
just like in a website, and they're referenced
| | 05:59 | from the HTML file.
| | 06:01 | The HTML file also links to the CSS to govern how
the text looks when it's interpreted in an eReader.
| | 06:09 | So, when you open up an EPUB on your iPad
or your iPhone or in Stanza or in Firefox,
| | 06:16 | it's essentially reading a website.
| | 06:18 | Now that you understand that what you are
doing in InDesign is converting an InDesign
| | 06:22 | publication to a miniature website, you can
sort of see the challenge that lays before you.
| | 06:28 | But you know what, it's not that bad, and
you're lucky that you're watching this title
| | 06:32 | because by the end of this title, you're going
to be like second nature to create a beautiful
| | 06:37 | EPUB from an InDesign file.
| | Collapse this transcript |
| How does an INDD file become an EPUB?| 00:00 | So how does your InDesign layout get converted to an
eBook, to an EPUB, or to a MOBI file for the Kindle?
| | 00:08 | We all know how to
convert an InDesign file to PDF.
| | 00:11 | You just export to PDF, the end.
| | 00:14 | It's not so simple with EPUBs and MOBIs though
unfortunately, not yet, we are getting there though.
| | 00:20 | First of all, you start
with your InDesign layout.
| | 00:24 | You need to do some prep work to the InDesign
layout, and I will have a chapter on preparing
| | 00:28 | your files for the EPUB export.
| | 00:31 | But you need to do things like check out text
formatting, it's far better to make sure that
| | 00:36 | all of text is formatted with paragraph and
character styles and no overrides, no pluses
| | 00:42 | anywhere, and I will show you some
automated ways to help you reach that goal.
| | 00:47 | Often, you will need to adjust the layout,
the sequence of items or how they appear in
| | 00:53 | sequence because when you export your
InDesign layout to EPUB, an EPUB is one long flowable
| | 01:00 | document, imagine a Word document
that represents your entire book.
| | 01:05 | And sometimes exporting your entire InDesign
layout with all of its frames and tables and
| | 01:11 | things out to one flowable document doesn't
work quite right unless you do some prep work first.
| | 01:16 | So you need to do that kind of work.
| | 01:19 | Sometimes you need to adjust images or
convert existing text, that's not going to make it
| | 01:23 | through like display text,
convert that to an image.
| | 01:26 | And there is a few other things that
you need to do to the InDesign layout.
| | 01:29 | Now you can use the same
one that you use for Print.
| | 01:32 | If you have some foresight, there are some
publishers who create an InDesign template
| | 01:37 | that can be used for both print and EPUB export.
| | 01:41 | But I would say in most cases what you are
going to do is do a Save As to your InDesign
| | 01:44 | file, and that one, you are going to really
work through to prepare for the EPUB export.
| | 01:51 | At that point, you actually export it to EPUB.
| | 01:54 | EPUB is one of the formats in the Export dialog box,
we will be going through that in detail of course.
| | 02:00 | So, right after you have finished the EPUB export,
then you open it up in something like Adobe
| | 02:06 | Digital Editions or whatever you are using
for your rough proof, something that can quickly
| | 02:10 | open up in EPUB on your desktop.
| | 02:13 | All you're checking is making sure that all
the content appears that you wanted to appear,
| | 02:18 | you don't end up with just the cover and
nothing else, or just chapter titles and nothing else.
| | 02:22 | That all the content is there, that it's in the
right order, and that you have the navigational
| | 02:28 | TOC, that little panel that opens up, all
of the titles for the different chapters are
| | 02:32 | appearing there correctly.
So you are just doing a rough proof.
| | 02:35 | We are not going to worry about fine-tuning
the formatting or images and things like that
| | 02:39 | until further down.
At this point, you also want to validate it.
| | 02:44 | And validating is checking of the file against
the standards published by the idpf.org, that
| | 02:51 | is the organization that created the EPUB 2.0
standard and 3.0 standard, because what
| | 02:57 | you want to find out is you want to make sure
that the EPUB that you started with from InDesign
| | 03:02 | created a valid EPUB right there, because
in the next step you are going to tear it
| | 03:06 | apart, and you are going to edit it.
| | 03:08 | And if you then validate it afterwards, you
are not going to be sure if it's something
| | 03:12 | that you did to the EPUB that made it
invalid or was it something right out of InDesign
| | 03:16 | that made it invalid.
| | 03:18 | So validating your EPUB is something that
you do early, and you do often every time
| | 03:23 | you make some major changes to the file format.
| | 03:25 | And I will be showing you different ways to quickly
and easily validate your EPUBs right from your desktop.
| | 03:31 | Now, at this point, there are many things
that you might want to do to your EPUB file
| | 03:35 | that InDesign simply cannot do yet, because
this is all about the conversion to what is
| | 03:41 | essentially a website.
| | 03:43 | And print documents are
not set up like websites.
| | 03:46 | I would say that probably 80% to 90% of
your projects you're actually going to have to
| | 03:51 | crack open that EPUB file, to unzip it like
how I showed in an earlier video, and edit
| | 03:57 | the HTML and CSS files and some
of the other files inside there.
| | 04:02 | Which program or programs
you use to edit the EPUB file?
| | 04:05 | That's up to you, and I am going to be
showing a variety of them in this training video.
| | 04:11 | Once again though, when you are done editing
the EPUB file or at least the first pass of
| | 04:14 | the EPUB file, you want to run
it through the validation checker.
| | 04:19 | Then you preview it again, and you preview
it on all the different devises that you might
| | 04:23 | have, not just the Adobe digital editions
or the Firefox plug-in, but also, if it's an
| | 04:30 | EPUB that is going to be sold through the
iBookstore, you want to preview it in iBooks.
| | 04:34 | If you are going to upload it to Amazon,
then you would convert the EPUB to MOBI, which I
| | 04:39 | will be talking about, I have a whole chapter
about that and then preview it on your Kindle
| | 04:43 | or your Kindle Fire.
| | 04:44 | If it's something for the Nook, or the
Sony eReader, you preview it there as well.
| | 04:49 | There is no way that you can create a good
looking final EPUB without having an actual EPUB device.
| | 04:56 | I can't tell you how many times I have gone
on site to teach publishers how to create
| | 05:00 | EPUBs for the iBookstore, and I asked how
many people have an iPad and nobody has an iPad.
| | 05:05 | The software that you use to proof your
EPUBs on the desktop is just for rough proofing.
| | 05:10 | You really need the final
device to see how it's going to look.
| | 05:14 | Then when you're satisfied with how it looks
and how it works, then you do a final validation
| | 05:19 | because you will get it kicked back if you
upload it for sale, and it's not a valid EPUB.
| | 05:25 | So you run a final EPUB check
on it to make sure it's valid.
| | 05:28 | There's no errors or problems with it, and
finally then you upload it to the reseller,
| | 05:33 | to Apple or Amazon or Sony or wherever or
even to your own website and sell it, and
| | 05:38 | then you make a million dollars. Yes.
That's the goal.
| | 05:42 | That's the InDesign to eBook workflow, not
quite as simple as exporting to PDF, but it
| | 05:48 | definitely is doable.
| | 05:50 | And that's what we will be
covering in this video title.
| | Collapse this transcript |
| Understanding what can and can't be converted from INDD to EPUB| 00:00 | So let's get down and
actually start making some EPUBs.
| | 00:04 | I think one of the best ways of learning on
how to create an EPUB from InDesign, starts
| | 00:08 | with you just essentially taking your existing
print document or any document that you created
| | 00:14 | in InDesign and exporting it
to EPUB and seeing what happens.
| | 00:18 | So I have a couple of documents open, one
of them is called History of Art, which is
| | 00:24 | nicely designed book, a sample book, it's
very short that has a Table of Contents, and
| | 00:31 | it's got a spread with some artwork.
| | 00:33 | That says a little declaration here
that I created myself, I don't if can tell.
| | 00:38 | And it has things like hyperlinks and
footnotes and images in line, some with captions, some
| | 00:45 | are grouped, some aren't grouped, some of the
images have no captions, headers and footers
| | 00:51 | and folios, in other words, a
typical book for print, a long book.
| | 00:56 | I haven't done any special prep work on this
file at all, and what we are going to do is
| | 01:02 | just export it to EPUB.
| | 01:03 | So to do that go to File, down to Export,
and here in the Format dropdown menu you will
| | 01:11 | fine EPUB, so choose it there.
I am going save it right out on to the Desktop.
| | 01:17 | This was called History, it's remembering
last time that I did this, so we will just
| | 01:20 | call History-of-art sample. That's good.
| | 01:24 | The EPUB Export Options dialog box opens up,
and I have a chapter devoted to this dialog
| | 01:30 | box in each panel in here.
| | 01:32 | Right now, we can get away
with just expecting the defaults.
| | 01:35 | I think the only thing that you should pay attention
to is to make sure in case you have been experimenting.
| | 01:40 | Make sure the version is EPUB 2.01, there
is a couple of other versions here that we
| | 01:44 | will be talking about, and that
View EPUB after Exporting is turned on.
| | 01:51 | And then Image should be set at 150, Preserve
Appearance from Layout, and under Advanced the
| | 01:58 | document should not be Split and these are
all the regular settings that everything is
| | 02:02 | checked basically and then just say OK.
| | 02:05 | So Exports to EPUB, and then it should open
up in your default EPUB reader, which in my
| | 02:10 | case is Adobe Digital Editions, and I discussed
in the previous video how to associate a program
| | 02:16 | with the EPUB extension.
| | 02:18 | So we have the cover on the left that we are
missing some of the text and the cover image
| | 02:21 | looks a little big and on the
right we have A History of Art.
| | 02:27 | So it looks little different from the print
book, but you can see that it did maintain
| | 02:31 | a lot of the formatting and the text is
here and the same font, that looks nice.
| | 02:35 | It would be nice if I get Chapter
1 to start at the top of its page.
| | 02:40 | Here is the link to a URL and here is a footnote,
the leading looks a little strange, I am not
| | 02:47 | quite sure what's happening.
We are missing an image.
| | 02:50 | Jump back to the InDesign file, we can
compare it, so here, this must be an image here, and
| | 02:56 | wait a minute, what about my
Declaration, that's not there either.
| | 03:00 | So this is very typical.
| | 03:02 | What are you going to find is that the
text made it through, but the images appear to
| | 03:07 | be missing, and here is the tip.
| | 03:09 | If you just go all the way to the end of
the eBook, it's often where they get relegated
| | 03:16 | to, and this is just because of how InDesign exports
the content, the order that it exports the content.
| | 03:21 | It exports the first textframe it finds, and
if it's threaded to multiple pages, it exports
| | 03:26 | the whole story, and then it
starts exporting the images.
| | 03:29 | So unless the images are inline, or we use
the article's panel, you are frequently going
| | 03:34 | to end up with this kind of result, and we
will be talking about that in detail later,
| | 03:39 | it's pretty simple to do, but don't
be shocked if this happens to you.
| | 03:43 | Notice what is not here.
| | 03:44 | We don't have my beautiful
little blue squiggle, my artwork.
| | 03:48 | So artwork that you create in InDesign,
this guy right here that I created with the Pen
| | 03:53 | tool and applied a dotted stroke to it,
those kind of things do not get exported, neither
| | 04:00 | do things on the master page
that have not been overwritten.
| | 04:03 | So we are not seeing any folios or any of
the running headers, and that make sense,
| | 04:09 | because you don't want to see page numbers
on the pages of the EPUB that would be bad
| | 04:13 | if that happened, because page numbers
make little sense in a flowable eBook.
| | 04:20 | When you view this EPUB on an iPhone or
something else with the small screen, you might actually
| | 04:25 | only fit like this amount of text, and that
will be page 1, and if you are reviewing it
| | 04:29 | on a monitor, all this would be page 1,
so you don't want to have folios appear.
| | 04:35 | And you also usually do not want
to have running headers appear.
| | 04:39 | In most eReaders, they will put the name of
the chapter here at the top or to move from
| | 04:46 | chapter to chapter, users will just open up
the Table of Contents, which in this case,
| | 04:51 | because we didn't prep a Table of Content
for our Navigation Table of Contents just
| | 04:55 | has the name of the layout here,
which is the default setting.
| | 04:59 | Let's take a look at another kind of file,
here we have one that's more brochure like,
| | 05:04 | this is one page from a student catalog, so
we have pictures with separate captions, we
| | 05:11 | do have one story that gets
threaded from frame to frame.
| | 05:15 | Let's go and View > Extras > Show Text Threads,
so we can see that this story here, it's threaded,
| | 05:21 | and there are some overset, so let's
actually open this up in the Story Editor so we can
| | 05:27 | see which text is overset.
| | 05:28 | So we have a coupe of line that are overset, and I
am also going to apply a background to this frame.
| | 05:38 | Let's just give it a gray background, maybe
like that, so we can see what happens with
| | 05:44 | frame backgrounds, and we will give it a
stroke as well, let's say a 4 point stroke.
| | 05:51 | So this is what it's going to look like.
| | 05:53 | Okay, then just switch to
Preview mode, by pressing the W key.
| | 05:57 | Now let's export this to EPUB.
Catalog-1pg ran out to the Desktop.
| | 06:05 | Again, accept all the defaults, so just
don't go clicking anything else and say OK.
| | 06:12 | You can close this Table of Contents here.
| | 06:17 | So we have all the text came through and
the picture, and we have some of the pictures
| | 06:23 | and caption in the back, that's interesting.
| | 06:27 | I don't remember that picture, we will
investigate it in a second, but one thing that's interesting
| | 06:31 | is look here, we have got the type formatting.
| | 06:34 | We have the blue type, we have the italics
in his name, but we don't have the fact that
| | 06:39 | it was a frame that had a certain width or that
it had a background color or that it had a stroke.
| | 06:45 | So in general, text frame
attributes do not get exported to EPUB.
| | 06:52 | The one exception is when a text
frame is part of the flow of a story.
| | 06:56 | If you have anchored a text frame inside of a
story, then a lot of its attributes do get exported.
| | 07:02 | Let's jump back to InDesign and check that out.
| | 07:04 | I am going to take this frame, and I am
actually going to anchor it in the text flow, and
| | 07:09 | we can do that now by just dragging the
little anchor control up here on any text frame.
| | 07:14 | I am just going to drag this guy right here,
and it is custom anchored, so it's in the
| | 07:20 | same location, but it's actually part of the
text flow, and now let's export this again to EPUB.
| | 07:27 | We can Replace the one that's open, one of my
favorite parts about working with exporting
| | 07:31 | to EPUB from InDesign that you don't have to
worry about closing the document in Digital
| | 07:34 | Reader before you export another version of it.
| | 07:38 | So you see when a frame is actually anchored in
the text flow, then it does maintain its setting.
| | 07:46 | This is new in CS6.
| | 07:48 | This obviously look horrible, but I just
wanted to show you the general concept, that frames
| | 07:53 | that are not part of the text flow, that are
just sitting there by themselves, the attribute
| | 07:58 | to that frame don't get included in the EPUB.
| | 08:00 | But if they are anchored in the text flow,
they are an anchored object, or inline object,
| | 08:04 | then most of the attributes do get maintained.
| | 08:07 | Obviously, this needs a little bit more work
in the CSS to make the text formatting work
| | 08:11 | and make the framework.
Notice that the entire story got exported.
| | 08:15 | So even though this text does not appear on the page
in InDesign, the Roux Academy offers four campuses.
| | 08:23 | Let me zoom in here, so you see the text ends
here with Brower-based gaming is a huge industry
| | 08:30 | and developers are looking, and there's only
one page in this document so that's the end of it.
| | 08:36 | But if we look at this in the Story Editor,
you can see that there is actually more text
| | 08:42 | for animators that cannot only design, and
if we jump back to the EPUB, you can see that
| | 08:50 | that text appears there, for animators that
cannot only design, and so on, and it goes to the end.
| | 08:56 | Now then we have this last blur of the Roux
Academy offers 4 campuses, that wasn't in that story.
| | 09:03 | Let's check back in InDesign, close this up
and look at the entire page, and that story
| | 09:09 | is actually this caption.
| | 09:10 | I am going to click inside here and
zoom in with the Command+Plus or Ctrl+Plus.
| | 09:15 | The Roux Academy offers 4 campuses.
| | 09:17 | So we are running into an issue again of story
order that I will be talking about in the next chapter.
| | 09:23 | But do you remember that addition picture?
| | 09:24 | You can see if there are three images in
this file, but if we come back to here, we see
| | 09:29 | there is one and then two,
three, four, where is this guy?
| | 09:36 | Go back to InDesign, and if we search for him, I
did the search already, he is hiding behind here.
| | 09:43 | So any kind of boo-boos that you're trying
to mask out in your InDesign document, they
| | 09:47 | are probably going to come
back to haunt you in that EPUB.
| | 09:51 | It's not just what you see on the page, it
gets exported to EPUB, it is everything
| | 09:55 | on the page that gets exported to EPUB.
So keep that in mind.
| | 10:00 | Every time when I get a new project, and
that needs to be converted to EPUB, this is the
| | 10:03 | very first thing I do.
| | 10:05 | I export it as is to EPUB just to see what
it is that I have got to work with, and I
| | 10:10 | recommend that you do the same thing as well.
| | 10:12 | It's also really good way for you to get your
feet wet and learn what will make you through
| | 10:16 | to the EPUB Export and what's
going to need a little work from you.
| | Collapse this transcript |
| Setting up an EPUB workspace| 00:00 | One last thing that we want to do before we
dive into working with our layouts and prep
| | 00:04 | for Export to EPUB is to customize InDesign's
interface so that the tools that we use most
| | 00:11 | frequently when exporting
to EPUB are close at hand.
| | 00:15 | And if you're an InDesign user of any experience,
you know that I'm specifically talking about
| | 00:20 | workspaces, the saved collection of
panels that appear here on the right.
| | 00:24 | Now the workspace switcher is available in
two places in InDesign, from this dropdown
| | 00:30 | menu in the application bar and
also from the Window > Workspace menu.
| | 00:36 | If you are on a Macintosh, the first thing I
recommend is that you go to the Window menu,
| | 00:41 | and you turn on Application
Frame, if it's not already there.
| | 00:45 | It doesn't default to this view, it actually
defaults with the Application Frame disabled.
| | 00:51 | Because whenever you're doing this kind of
exporting over and over again to EPUB and
| | 00:56 | using many different programs and eReaders to check
out the EPUB, it can get quite confusing on the Desktop.
| | 01:02 | So I really recommend you go up to the Window
menu, choose Application Frame, and if necessary
| | 01:06 | maximize the window so that whatever else
is on your desktop is temporarily obscured.
| | 01:12 | This is the default way it works in Windows.
| | 01:15 | And then you want to actually
set up the workspace here on the right.
| | 01:19 | So the Workspace Switcher here is going to
remember the selection that you have chosen,
| | 01:26 | the problem with the Workspace Switcher is
that there's none for EPUB. Look at this.
| | 01:30 | I mean Adobe made one for when you are working
on Books, but that is not quite what we need,
| | 01:36 | it has a lot of things like Conditional
Text and so on, but nothing really specifically
| | 01:41 | for exporting to EPUB.
| | 01:44 | The Advanced one is the one
that I usually use by default.
| | 01:47 | They have one for Digital Publishing, and
you might think, oh, that's the one I used
| | 01:51 | for EPUB, but no, that's the one that you
used for creating tablets publications, apps.
| | 01:56 | They have taken the name Digital Publishing
and confined it to just tablet publishing,
| | 02:02 | which I don't think is right.
| | 02:03 | What I suggest is that you switch to
Advanced or if you already have a custom workspace
| | 02:07 | that you like, switch to that one, and then
we are going to modify it and then save it
| | 02:12 | as one specifically for EPUB.
| | 02:14 | Here is what I would do
with the Advanced workspace.
| | 02:16 | I hardly ever use Gradients, so I am going
to close that one and everything else is fine.
| | 02:24 | I guess I don't use stroke that often, but
often enough to apply different kinds of strokes
| | 02:28 | around frames that I will keep it here.
| | 02:30 | A panel that we will be using for many kinds
of publication when we export to EPUB is the
| | 02:36 | Articles panel which is the very first one
here under the Window menu, and I have a video
| | 02:41 | I am talking about the Articles
panel later on in this chapter.
| | 02:44 | We don't need liquid layout, so just separate
it out from there, and I usually add it right
| | 02:49 | underneath Links or maybe on top of Pages.
| | 02:53 | I also frequently use Text Wrap, because when
you are converting from Print to EPUB, sometimes
| | 02:58 | the Text Wraps that have been applied to
objects can bite you once you export to EPUB, because
| | 03:04 | they are supported in the CSS and
often you don't want them supported.
| | 03:08 | So I use the Text Wrap controls often
enough that I want to keep it out here.
| | 03:14 | I am going to add it to Effects and Object
Styles and all these I use often enough, of
| | 03:18 | course, I use Paragraph and Character Styles.
| | 03:20 | I might actually bring this up, because I
use them so much more often than the other
| | 03:26 | ones, so I am just doing them like that.
| | 03:29 | Another one that you definitely want to
add is the Scripts panel, because as you will
| | 03:33 | see in the upcoming videos, I use script a
lot to help automate some of the tedious work
| | 03:38 | that needs to be done to
InDesign files to prep them.
| | 03:41 | So Scripts are under the Window menu, go to
Utilities and choose Scripts and they're together
| | 03:47 | with a bunch of other ones that you
don't need, so just pull it out of there, close
| | 03:50 | that, and then add Script where ever
you might think it's most convenient.
| | 03:53 | I am going to put it right here at the bottom,
because that way it's easy to find quickly.
| | 03:58 | That's basically how I like to save it.
| | 04:00 | You might also want to add something like
Mini Bridge, if you are working with a lot
| | 04:05 | of images, that's the way they quickly locate and
organize the assets that are linked to the InDesign file.
| | 04:11 | If your document uses a lot of Hyperlinks, or Cross
References, you will definitely want to use this one.
| | 04:17 | I will probably add this right below
| | 04:19 | Character Styles. And finally, if you are
using a lot of tables, you want to add the Table
| | 04:25 | Styles and the Table Panels.
| | 04:26 | So Table Styles are here, and if you choose
Table Styles, it will come with self styles,
| | 04:30 | and I would keep them both together.
| | 04:32 | In the video where I talk about tables,
you will see that CS6 does a much better job
| | 04:36 | of supporting your table formatting, when
you export to EPUB, that I did in previous
| | 04:40 | versions, but it all depends on your use of
Tables Styles and the Table Panel itself is right here.
| | 04:46 | But mine is getting pretty long already,
and because of the resolution for this video I
| | 04:51 | don't have a lot of room but if I had a
better resolution or larger monitor then I would
| | 04:55 | probably add those.
| | 04:57 | So when you're done, go to the Workspace
Switcher or to the Window Workspace menu and choose
| | 05:03 | New Workspace and call
this something, like EPUB.
| | 05:06 | That's fine, you can leave these both checked,
and now we have all the tools that we need
| | 05:12 | close at hand.
| | Collapse this transcript |
| Installing scripts| 00:00 | I know I said in the last video one last thing,
you know, to create your own custom workspace, but
| | 00:04 | there is one more last thing, and that is I want
to show you how to install scripts in InDesign.
| | 00:11 | If you already know how to install
scripts then you can skip this video.
| | 00:14 | But I use Scripts a lot, when I am working
with InDesign files, and I am going to export
| | 00:19 | to EPUB, and I will be showing how to use
those scripts and showing where to download
| | 00:23 | them or, including them in the Exercise files.
And I want to make sure that you know how
| | 00:28 | to install the scripts yourself.
| | 00:30 | So if you have followed my last video, you
should have the Scripts panel as part of your
| | 00:34 | EPUB workspace right over here.
| | 00:37 | Otherwise Scripts in InDesign CS6 are
available here under Window > Utilities > Scripts.
| | 00:44 | When you choose Scripts, and I am going to
drag it out of the doc here just to bring
| | 00:47 | it front and center, so
it's a little easier to see.
| | 00:49 | You will see two folders, Application and User.
| | 00:53 | You can put scripts in either one of these
folders, but sometimes you will need Admin
| | 00:57 | Access to add them to the Application folder.
| | 01:00 | When you add them to the Application folder
that just means that anybody who logs onto
| | 01:04 | this computer will be able
to use those InDesign scripts.
| | 01:08 | If you add them to the User folder, that means
only you will be able to use those InDesign scripts.
| | 01:12 | If you are the only user for
your computer, it's immaterial.
| | 01:15 | We are just going to add
them to the User folder for now.
| | 01:18 | The easiest way to add scripts is to open
up the Scripts panel, find the User folder,
| | 01:24 | and then right-click, or Ctrl-click on it if
you have a one button mouse, and choose Reveal
| | 01:30 | in Finder if you are on the Mac or if you
are on the PC, it will say Reveal in Explorer,
| | 01:35 | or Windows Explorer.
| | 01:37 | When you choose that, it shows you where that
folder is on your hard drive, and if you work
| | 01:42 | with Scripts a lot, you might want to make
a shortcut to this folder on your desktop.
| | 01:46 | So inside your Scripts Panel here is where
you are going to putt scripts and scripts are
| | 01:50 | simply text files that end with that JSX
for JavaScript and those are the only kind of
| | 01:56 | scripts I deal with, because they are cross
platform, so I can use them no matter which
| | 02:00 | computer I am using.
| | 02:02 | Now I actually do on my production machine
have many scripts, probably a couple dozen,
| | 02:07 | almost all of them free from various
locations I found on the Internet, we talk a lot about
| | 02:11 | them on indesignscerects.com. But only some
of these are used for EPUB and to quickly
| | 02:16 | find those I actually create a folder
inside my Scripts Panel folder called EPUB.
| | 02:22 | So let's do that right now.
| | 02:23 | I am just going to right-click and choose
New Folder and call it EPUB and then inside
| | 02:29 | this EPUB folder is where you add a script.
| | 02:32 | Now I ready have a script that we are going to
install, and it is inside the Exercise Folder.
| | 02:38 | But if you want, I will show
you where you would download that.
| | 02:41 | In Safari, if you go to this website tomaxxi.com/
downloads, this guy Marijan Tompa is the leader of the
| | 02:49 | InDesign User Group in Serbia.
| | 02:50 | He is a wonderful guy and he has got many,
many free or low cost scripts that you can
| | 02:55 | download from his website.
| | 02:58 | And this one right here is the
one that we are going to use.
| | 03:00 | So if I downloaded this, let's
actually download it right from here.
| | 03:04 | And I download the script, and we will
open it up in the Finder, I am going to put it
| | 03:12 | on my Desktop to make it easier to find.
| | 03:16 | And then we just need to put this
file into our EPUBs Scripts folder.
| | 03:22 | So I can Copy and Paste, or drag and drop
it over there, I am just going to copy it
| | 03:26 | and select my EPUB folder and paste it.
| | 03:31 | That's all, so you just have to find this
script and put it into the right folder.
| | 03:36 | You don't need to quit InDesign first.
| | 03:37 | If you go back to InDesign, you will see that there
is a folder, and there is a script, ready to use.
| | 03:43 | I will be showing various scripts in this title and
not all of them have been expressly updated for CS6.
| | 03:49 | So what I would recommend is that if you are
using these scripts, whether you're downloading
| | 03:53 | them from their site or you are using them
from the exercise files that you may want
| | 03:57 | to go back to the original developer's
website to see if there have been any updates, in
| | 04:02 | case you're having problems with the script.
| | 04:04 | I'm not a scriptwriter myself, but I'm a
big script user, and I'm happy to show you the
| | 04:09 | ones that I think will save you
the most amount of time in InDesign.
| | Collapse this transcript |
|
|
3. Preparing an InDesign Publication for EPUB Export Naming files for EPUB compatibility| 00:00 | An EPUB is essentially a miniature website.
HTML files, CSS files, linked images all wrapped
| | 00:07 | up in a neat little EPUB wrapper.
| | 00:09 | For that reason the filenames that you use in
your InDesign file make a difference, because
| | 00:16 | InDesign when it exports your InDesign
file to EPUB is actually converting it to HTML
| | 00:21 | and making inter-document links.
| | 00:24 | And if the files have illegal characters in them,
illegal as far as a web server is concerned,
| | 00:30 | then it can cause problems down the road.
| | 00:32 | You may have seen this
yourself in some various websites.
| | 00:36 | If you have ever seen a URL you know a web
address that had weird percentage signs in it, like
| | 00:41 | %20, that is actually because the person
who created the website used spaces in a file
| | 00:48 | name, you're not supposed to use spaces, you're
supposed to use like a dash or an underscore instead.
| | 00:54 | But if somebody did use a space, like
linking to an image that have a space in its file
| | 00:58 | name, then on the web server it has to do
what's called escaping that illegal character,
| | 01:03 | it replaces it with the UNIX equivalent.
And the equivalent of a space character is %20.
| | 01:10 | Now InDesign when you export to EPUB will
do quite a good job in reformulating a lot
| | 01:15 | of the filenames so that they are legal.
| | 01:18 | But there are some things that you can do
to help it along, and there are some things
| | 01:22 | that InDesign just can't fix on its own.
Let me show you one example of that.
| | 01:26 | I have here a document that is the history
of art, a very short excerpt of it just 11
| | 01:32 | pages and six spreads.
And I'm going to export this to EPUB.
| | 01:37 | So I'll go to File > Export or
just press Command+E or Ctrl+E.
| | 01:42 | History of Art excerpt, and I'll use basically
the default settings with just a couple of tweaks.
| | 01:48 | I want to make sure that View
EPUB is turned after Exporting.
| | 01:52 | Image we're not doing anything special with,
under Advanced I usually turn off these last
| | 01:57 | two options just keep Include
Style Definitions turned on.
| | 02:00 | If your fields for Publisher and Unique ID
are empty, perfectly fine, it's just that
| | 02:05 | I have already used this in other videos, and
that's why it's remembering all this information,
| | 02:10 | don't worry about it. Click OK.
What's this?
| | 02:15 | Unable to open this file,
Errors were encountered in this item.
| | 02:19 | Digital Editions was not able to open the EPUB.
| | 02:21 | Now this is kind of a rare example but I'll
tell you what happened, and if you're an eagle
| | 02:26 | eye you would have noticed it yourself.
Let's go back to InDesign to take a look.
| | 02:31 | Look at the name of the file itself,
History of Art with a slash through it.
| | 02:36 | History of Art/excerpt.indd.
| | 02:37 | Now of course you would never do this, and
I would never do this, but there are other
| | 02:42 | people in the world who give their filenames
all sorts of crazy names because the computer
| | 02:46 | doesn't yell about it.
| | 02:48 | I have seen quotes and bullets and question
marks, parentheses, and I have seen many slashes.
| | 02:54 | Slashes especially are difficult because
slashes are used to denote directories or hierarchies
| | 02:59 | when you're talking about web files,
files within folders and so on.
| | 03:04 | You never ever want to use a slash mark in a
file name and InDesign can't do anything about that.
| | 03:10 | Here's the exact same file and the only
difference is that it doesn't have a slash mark in the
| | 03:17 | file name, we'll export this one to EPUB.
| | 03:19 | We'll call this History of Art-noslash,
save it, same settings, okay. Tada. Worked great.
| | 03:37 | Now that is not the only place where the
name of the actual InDesign file is important.
| | 03:44 | It's also important because InDesign CS6
will use the name of this file when it creates
| | 03:48 | its default CSS file.
| | 03:51 | CSS, Cascading Style Sheets, is something we'll
be talking about as we go on, but it essentially
| | 03:56 | controls the formatting of your EPUB and
every file that contains content of your book in
| | 04:00 | the EPUB is linked to that default CSS file.
Let's take a peek at this EPUB in TextWrangler.
| | 04:09 | Oh we don't want you, I don't want to get
confused, you're bad, you're the one who have
| | 04:14 | the slash, so I am moving you
to the Trash, it's this one.
| | 04:17 | And then I am just going to drag and drop
it right on top of TextWrangler just to take
| | 04:20 | a peek inside without having
to unzip it or anything special.
| | 04:27 | And inside this OEBPS folder, and if all
this is gobbledygook to you, don't worry about
| | 04:31 | it, I'll be covering this in quite a
bit of detail in an upcoming chapter.
| | 04:37 | So as you saw in a previous video all the
content is divvied up into a series of XHTML
| | 04:41 | files and here is the first one.
| | 04:45 | Notice here in the code at the top in the
head section there is a link to the CSS file,
| | 04:52 | HistoryofA and then _idstyles.css.
| | 04:55 | This is what InDesign CS6
now does with CSS filenames.
| | 05:00 | In previous versions it used to
just be called default or template.css.
| | 05:05 | Now it takes the name of your file.
| | 05:07 | Luckily it is smart enough to remove any spaces
there, and it just takes the first few characters
| | 05:14 | of the file name then it adds _idstyles.
| | 05:16 | And this is what it's
linked throughout the EPUB.
| | 05:19 | If I look at the CSS folder, you'll
see there is the HistoryofA_idstyles.
| | 05:25 | But this is what InDesign
knows how to do with spaces.
| | 05:28 | But if there are illegal characters,
sometimes InDesign let's those slide on through, and
| | 05:33 | that would also be bad.
Do you understand what I am trying to tell you?
| | 05:36 | You want to rename your InDesign files to
something short and using only the legal characters,
| | 05:44 | that's alphanumeric characters, numbers, the
underscore, and the hyphen, and nothing else.
| | 05:51 | If you're exporting a book to EPUB, and
you have multiple files in your InDesign book
| | 05:55 | file, then yes you should rename all
of those files in your InDesign book.
| | 06:00 | Let's keep this open because I want to talk
about a couple of other places where filenames
| | 06:03 | are important, one of them is Styles.
| | 06:07 | Your Paragraph Style names and Character Style
names are exported and converted to CSS Style names.
| | 06:14 | In this document I have a couple of style
groups which is very common to do, especially
| | 06:19 | with long complicated books.
| | 06:21 | You might have a style group that is a
folder containing other styles to organize things
| | 06:27 | and to make the Style panel a little
easier to deal with rather than having to scroll
| | 06:30 | forever, you can divvy things up into folders.
| | 06:34 | InDesign can handle these with no
problem, it converts them just fine.
| | 06:38 | So you can go ahead and
continue using your style groups.
| | 06:41 | Let me twirl open both of these style groups
here and notice that we have two styles that
| | 06:45 | are exactly the same name, which is a cool
kind of thing that you can do, I don't know
| | 06:49 | if it's really recommended, but definitely
possible to do when you're using style groups.
| | 06:55 | See, this is body first, this paragraph is
body, and then down here--let's zoom in a bit--
| | 07:04 | this is body nested.
| | 07:05 | So this user who created this document wanted to
gather all of her nested styles into one folder.
| | 07:13 | You might create a folder just for end matter,
or just for footnotes, just for table of contents
| | 07:18 | things, those are very common to find.
| | 07:21 | So is there going to be a conflict
between these two exact named styles?
| | 07:25 | No, let's take a look.
| | 07:26 | We'll go back to TextWrangler
and look at this one right here.
| | 07:32 | Here is body first that is being
applied to this first paragraph.
| | 07:38 | Here is body and then the next one was also
called body, but it was in a folder called Body-nested.
| | 07:47 | When you export to EPUB, InDesign will take
any style groups, those folders, and it will
| | 07:52 | just add a hyphen and prepend it to the name
of the styles that's actually being applied.
| | 07:58 | You can use this to your advantage by
naming your folder something really short.
| | 08:01 | Say that you have a folder that contains all the
styles you are using for things in a table, for example.
| | 08:08 | If you're familiar with HTML then you know
tables are denoted with the word table or
| | 08:13 | TD for a cell or TR for a row.
| | 08:17 | You could name your folder TD or TR or table,
and so when it gets converted, InDesign will
| | 08:24 | call it table-body, table-last row, or whatever it is
that you are using styles for in that table folder.
| | 08:33 | I have run into problems with
style names that InDesign can't solve.
| | 08:37 | By the way, if you ever begin the name of a
style with a hyphen or 2 hyphens in a row,
| | 08:43 | because those are actually
reserved for specific kinds of CSS tags.
| | 08:46 | And I have seen problems in EPUBs with the
styles not being picked up or being formatted
| | 08:51 | incorrectly or the EPUB not validating.
| | 08:54 | In other words while hyphens and
underscores are perfectly legal in filenames probably
| | 08:59 | not a good idea to begin names with the
underscore or a hyphen, use them inside.
| | 09:05 | And it's easy enough to rename a style.
| | 09:07 | If I want to rename this style, for example,
I could just do the old southern double-click,
| | 09:12 | which is you click once on
the name and then click again.
| | 09:16 | So you do a little pause between the two clicks,
and then you're in editing mode, and I could
| | 09:20 | go ahead and rename this.
| | 09:21 | I would caution you though to be careful about
where your cursor is before you rename a style.
| | 09:27 | If my cursor was here, and I decided I want to
rename this style down here, it would actually
| | 09:32 | apply body nested to that paragraph
while I was doing this southern double-click.
| | 09:36 | So I am going to undo and instead if you want
to rename styles to make them more legal for
| | 09:42 | your EPUB, right-click on top of the style
name, choose Edit, and then you can just go
| | 09:50 | ahead and rename it up
here in the Style Name field.
| | 09:54 | One final place where names make a
difference is in your links. Let's take a look at the
| | 09:58 | links in this document.
We have some crazy name links here.
| | 10:02 | No, I didn't create this file but we have some
things with quote marks and all sorts of craziness.
| | 10:08 | If we go back to the Finder, and we try to
validate this EPUB--and I'll be talking about
| | 10:14 | validating in an upcoming video in more detail--
but essentially it's just a little test that
| | 10:19 | make sure that the structure of the EPUB is
valid according to the rules of HTML and CSS,
| | 10:26 | and it's a required step before you're
allowed to upload it to a lot of resellers.
| | 10:31 | We validate this with a little, nice little
AppleScript that I have that will check it.
| | 10:36 | You see it's going to warn us if
we have any problems with filenames.
| | 10:40 | And it is finding a warning with the name
of the History of Art excerpt.html itself.
| | 10:47 | In both those places it's saying that it
contains a space, and that is remember up here.
| | 10:53 | These files right here, these
XHTML files have spaces in them.
| | 10:56 | InDesign does not
automatically add a hyphen there.
| | 10:59 | So I don't know why, what I suggest you do
is that you rename your actual InDesign files
| | 11:04 | with no spaces whatsoever.
| | 11:06 | It won't fail the EPUB
validation, but it gives you a warning.
| | 11:10 | And then the same thing we have a warning
here with one of the filenames, there is a
| | 11:14 | space in the file name.
So what is the pain about filenames?
| | 11:17 | Well, let's say that you are doing cross references,
if you're linking to text in one document
| | 11:22 | from another, it can't have
spaces in that cross reference.
| | 11:26 | So InDesign or you manually will
have to escape those spaces with %20.
| | 11:32 | If we look at the content.opf file, which is
the brains of an EPUB file, you'll see that
| | 11:37 | InDesign did do that correctly in the manifest,
this is a list of all the files included in
| | 11:42 | the EPUB file, it went ahead
and replaces spaces with %20.
| | 11:46 | Why doesn't it also do that to
the actual HTML files? I don't know.
| | 11:50 | But you'll get warnings about spaces in filenames
for both the InDesign document and any linked assets.
| | 11:56 | If we look at one of these HTML file that
it actually has some images in it, you can
| | 12:01 | see that InDesign did escape the spaces
and replace it with %20 in this file name and
| | 12:06 | what is this %27, that's
some other illegal character.
| | 12:10 | This just makes life difficult for you, and
it makes me EPUB a little bit more fragile.
| | 12:15 | If you're trying to embed another link to
the same image you might not realize that
| | 12:19 | you have to escape all these characters.
| | 12:21 | So it's just far easier to name
your images legally in the first place.
| | 12:25 | If we go back to InDesign, it would be nice
to be able to rename these with short names
| | 12:29 | without any illegal characters at all.
| | 12:31 | Now you probably know that after you have placed
images into InDesign, it is a huge pain to rename them.
| | 12:38 | Because, if I rename them in the Finder, if I
click here, here is the image, and I right-click,
| | 12:44 | and I choose Reveal in Finder, and I rename it
there, here it's going to end up as a missing
| | 12:49 | link, because it's still
looking for this original one.
| | 12:52 | And that's when you want to use this
wonderful script called tomaxxiLINKrename that I have
| | 12:59 | already installed in my Scripts panel in InDesign,
and I showed how to install scripts in a previous video.
| | 13:07 | tomaxxiLINKrename let's you select an
image and then double-click the script.
| | 13:14 | Oh I have to click the actual frame, not
the image itself, here we go and rename it, so
| | 13:23 | I'll call this monalisa,
one word, or maybe like this.
| | 13:28 | Rename, it renames it in the Finder,
and it renames it in the Links panel.
| | 13:34 | And I could go through all the other
images as well quickly renaming them.
| | 13:38 | The fast way if you're going to be using
this script is to assign a keyboard shortcut to
| | 13:41 | that script, so you can just go through your
document quickly, select an image, press the
| | 13:46 | keyboard shortcut to bring up tomaxxi script,
rename it, go on to the next image and so on.
| | 13:51 | But as you saw even with some of these crazy
named links, InDesign was able to take care
| | 13:57 | of it, it's just not the best
practice to keep them like this.
| | 14:01 | So those are three areas that you need to
keep an eye out for when you're dealing with
| | 14:05 | your InDesign files as far
as filenames are concerned.
| | 14:08 | The name of the InDesign file itself, that's
the most important and something that you'll
| | 14:12 | probably want to manually fix, the names
of the styles and the names of the links.
| | 14:17 | My guess is that the majority of you watching this video
are already naming your files legally, HTML wise legally.
| | 14:26 | But if you run into any problems, don't
forget to check the filenames of the InDesign file,
| | 14:31 | the links and the styles.
| | Collapse this transcript |
| Creating a navigation table of contents (TOC) with a TOC style| 00:00 | Now let's talk about the Navigational
Table of Contents. That's the list of links that
| | 00:05 | appears in any EPUB reader or device that lets
the person move from section to section in an EPUB.
| | 00:13 | Now if you just export a document to EPUB
from InDesign, you're not going to get that.
| | 00:17 | I have done that to our History of Art
document the one with the Mona Lisa on the cover and
| | 00:22 | here is what it would appear as
if you didn't do anything special.
| | 00:28 | History-of-Art-is-good.
Now that was actually the name of the layout.
| | 00:33 | So, if you don't do anything special to the
InDesign file and exported to EPUB the Navigational
| | 00:39 | Table of Contents, this section right here,
will just have the name of the layout, and
| | 00:44 | there won't be any links
to individual chapter names.
| | 00:47 | Now this is actually a valid EPUB, because
it does have something here, if you hide it
| | 00:53 | and show it again, you can see that there
is a link, it just brings you to the very
| | 00:57 | beginning of the book.
| | 00:58 | So InDesign will always create the special
file, it's actually an XML file that's part
| | 01:03 | of all of those component files that are wrapped up
in the EPUB wrapper. But this isn't very useful is it?
| | 01:10 | Instead, what you can do is use the Table
of Contents feature inside InDesign to turn
| | 01:17 | that into an actual Table of Contents in
your EPUB, so if I click Painting in Flanders,
| | 01:23 | Holland, and Germany, you might say, oh wait,
it's not working, but actually it does, there's
| | 01:27 | painting in Flanders, Holland, and Germany and
painting in Spain brings us here, and so on.
| | 01:34 | So this is like one long document and these
are sort of like bookmarks. Let me show you
| | 01:40 | how to do this in this movie and then in a
later movie I'll show you how to create it
| | 01:46 | not just with the correct names of the chapters
on the left, but when you click it, that chapter
| | 01:51 | starts at the top of the screen.
| | 01:55 | But first let's just try
to get this text into here.
| | 01:57 | So I'm going to close out of this
document and jump over to InDesign.
| | 02:01 | Now this was the History of Art, and it's
kind of a long book, it's about 30 pages long.
| | 02:08 | What I have done is I have extracted some of this
text, and I have placed it into a new file that
| | 02:14 | I'm going to be using a lot in this course,
it's something very simple so that we can
| | 02:17 | concentrate on the specific
lesson that I'm talking about.
| | 02:20 | So, in this lesson what I'm talking about
creating a Navigational Table of Contents,
| | 02:25 | let's zoom in a bit.
| | 02:27 | What we're going to assume is that your
InDesign document is one long document with sections
| | 02:32 | in it, which a lot of documents are, and
I made the sections into subheads here.
| | 02:37 | So Flemish Painting, Biographical background,
and so on. When I open up the paragraph styles,
| | 02:42 | you can see these are all subheads and the
other styles or body, let me zoom out so you
| | 02:47 | can see it's not that long of a
document, we just have a few sections.
| | 02:52 | When we export this file, Art-text.indd to
EPUB, let's see what we get, I'm going to
| | 02:57 | press Command+E or Ctrl+E which is the
keyboard shortcut for the Export dialog box, and it's
| | 03:02 | remembering what we last did in EPUB, so
you'll see me always use that keyboard shortcut from
| | 03:06 | now on to get to the Export to EPUB dialog
box, and on the Desktop, we'll save it as
| | 03:11 | Art-text-1, that's our first try and export
it out. We're going to just use the default
| | 03:18 | settings, which is EPUB 2.0.1, make sure
that View EPUB after Exporting is enabled.
| | 03:25 | Images at the default and Advanced is at the
default, click OK, and we see the same result
| | 03:32 | that we got from that first example of the Art
History book, we just have the name of the layout here.
| | 03:38 | All the contents are here, but we don't have
any kind of useful Navigational Table of Contents.
| | 03:45 | Let's jump back to InDesign, and as I said, you
need to use the built-in Table of Contents feature.
| | 03:51 | Now you don't need to actually add a Table
of Contents to your document, you don't even
| | 03:55 | need to fake it with one on the pasteboard
or anything, you just need to create a Table
| | 04:00 | of Contents' style, and you do that by
going to the Layout menu, and you can do it from
| | 04:06 | the Table of Contents dialog box, you can
go right to the Table of Contents' Styles,
| | 04:10 | which will then bring you to the
dialog box, let's just do it here.
| | 04:14 | Now this is not a video about how to create the
most beautiful Table of Contents in the world.
| | 04:18 | Table of Content is covered in more detail
in Mike Rankin's Long Documents with InDesign
| | 04:24 | video, here on the lynda.com, and also I
think that David Blatner's InDesign Essentials
| | 04:28 | talks about Table of Contents.
| | 04:31 | But what we need to do is we need to get
over here the names of the styles that stand for
| | 04:37 | the text that we want to appear in the
navigational Table of Contents, so we want subheads, right,
| | 04:42 | we want that text to appear in the
Navigational Table of Contents or what I call the nav TOC
| | 04:49 | for short, like Biographical
background and Flemish painting.
| | 04:53 | Now remember these are all subhead styles,
so all you need to do is find the subhead
| | 04:58 | style, and this only works for
paragraph styles, not character styles.
| | 05:02 | There it is at the bottom and click Add, you
don't need to turn on Create PDF Bookmarks--
| | 05:09 | and we'll be talking about book documents later--
so we don't need to worry about that either.
| | 05:13 | This is just one single document, I'll just
leave it turned on, it's not going to hurt anything.
| | 05:18 | But the one thing that you do want to do is
you want to save this as a style, and I usually
| | 05:23 | call it EPUB, meaning this is
the one I want to use for my EPUBs.
| | 05:26 | The word EPUB will never appear anywhere,
but save it as a TOC styles, it's kind of
| | 05:30 | like saving a paragraph style, only this is
a style for your Table of Contents. That's
| | 05:36 | all, then just click OK.
| | 05:37 | Now you're going to have the Table of
Contents loaded in your cursor, and if you don't want
| | 05:41 | to actually use it, you can just
click on any tool to get rid of it.
| | 05:46 | Now let's export it to EPUB again,
pressing my keyboard shortcut Command+E or Ctrl+E,
| | 05:51 | and we'll call this Art-text-2, click Save,
and here in the General section under TOC
| | 05:59 | Style, you choose the style that
you saved for your EPUB, that's all.
| | 06:03 | Let's go ahead and click OK, and there we go,
we have the actual text from the subheads
| | 06:10 | here, and you could click, and it
will jump to show you that text.
| | 06:15 | Now we're not doing the part where it
actually appears at the top of the page that in the
| | 06:18 | next video, but at least we have the text
here, and clicking it brings us to that text.
| | 06:24 | Now if you don't want this actual text, if
you'd rather have this say biography, rather
| | 06:28 | than the Biographical background, you could
either change it in the InDesign file before
| | 06:32 | you export it or once we crack open the EPUB,
you can actually easily edit this text that
| | 06:37 | appears here in the nav TOC.
So that was pretty simple, right?
| | 06:41 | We're using a common InDesign feature
to create something special for our EPUB.
| | Collapse this transcript |
| Creating chapter breaks based on a paragraph style| 00:00 | In the last video I showed how you can export
an InDesign documents to EPUB and have a certain
| | 00:07 | styles like the subheads styles
show up as the nav Table of Contents.
| | 00:12 | In this video I want to build on that and
show you how you can get these subheads to
| | 00:16 | start at the top of the page.
| | 00:18 | To review these subheads, I'm using this style,
subhead down here, and this document is just
| | 00:26 | is really short just four pages long, and we have
I think three or four instances of the subheads.
| | 00:32 | We have a TOC Style saved in this document
that I created in the last video, and you
| | 00:37 | can see for yourself, if you go to the
Layout menu and choose Table of Contents Styles,
| | 00:43 | it's called EPUB, and
essentially just has the subhead.
| | 00:48 | Let's go to the Export EPUB dialog box press
Command+E or Ctrl+E to get there really quickly.
| | 00:54 | I'm going to save this on the Desktop as Art-text
and then in this dialog box you want to make
| | 01:00 | sure that the menu next to TOC Style shows
the Table of Contents Style that you have created
| | 01:07 | in InDesign just for your Navigational TOC.
| | 01:10 | In other words, this one has the subheads,
but if you want the subheads to start at the
| | 01:16 | top of the page when somebody is flipping
through the EPUB, you need to do one more thing.
| | 01:20 | Go to the Advanced menu, and when it says
Split Document you want to choose the name
| | 01:25 | of that style subhead.
| | 01:27 | So what InDesign is going to do is it's actually
going to split up this document into separate HTML files.
| | 01:34 | And that is the one sure way to get text to
appear at the top of the screen, it's like
| | 01:40 | splitting up one long web page
into multiple smaller web pages.
| | 01:44 | When somebody clicks a link, it's going to open up
a whole new web page, rather than just scroll down.
| | 01:50 | Let's go ahead and export this to EPUB and let
me make this a little bit smaller so we can
| | 01:55 | see what's happening better.
| | 01:57 | So there's Flemish Painting, and you see the
text stopped here, but if you click Biographical
| | 02:02 | background, there it goes.
| | 02:03 | So now this has actually been split into
multiple HTML files, and when somebody is reading this
| | 02:10 | EPUB on any device, or software that reads
EPUBS, and then click on a link in your nav
| | 02:16 | TOC, it will be nice and
clear where they are in the EPUB.
| | 02:20 | But wait, that's not all.
| | 02:22 | Let's go back to InDesign. With InDesign CS6,
we can actually force InDesign to start multiple
| | 02:28 | styles at the top of the page,
whether or not they appear in the nav TOC.
| | 02:33 | For example, let's say that every time
that we have an image, we want it to appear at
| | 02:37 | the top of the page.
| | 02:39 | We want the actual image title like this one
right here, Paragraph Style Image title, to
| | 02:45 | always start at the top of the page.
| | 02:46 | We don't want it to be an entry in
the Table of Contents in the EPUB.
| | 02:50 | But when somebody is scrolling through,
we just want this to appear at the top.
| | 02:53 | Kind of like inserting a page break before it.
| | 02:57 | To do that you need to edit the
styles that you want InDesign to break at.
| | 03:02 | For Image title, I am just going to right-click
here and choose Edit "image title" and down
| | 03:07 | here in Export Tagging, click this check box,
which is new in CS6, Split Document (EPUB only).
| | 03:15 | And we are going to do it for subhead as well,
because your choices in the export to EPUB
| | 03:20 | dialog box are either choose one style or say
according to what you have said in export tags.
| | 03:26 | So we are going to say according to what we
have set in export tags, that means we had
| | 03:30 | to edit each of the styles that
we want InDesign to break up at.
| | 03:34 | So I am going to right-click on subhead,
and I always right-click to edit styles, that
| | 03:40 | way if I double-click it, I might
accidentally apply that style to wherever my text cursor
| | 03:44 | is in the document, that's just a little tip.
| | 03:47 | So I am right-clicking on edit subhead, which
does not affect anything in the document and
| | 03:52 | then go down to Export Tagging
and turn that guy on as well.
| | 03:57 | Nothing changes in the document itself, but
now when we Export to EPUB, Command+E or Ctrl+E,
| | 04:03 | and we will Save, we will
Replace the existing one.
| | 04:06 | Here in Advanced, change it from Split
Document at the subhead style, scroll all the way up
| | 04:12 | and choose Based on Paragraph Style Export Tags.
| | 04:17 | Click OK, and let's reduce
the size of our type a bit.
| | 04:22 | So now Flemish Painting stops here, there's
no entry here for the names of the images,
| | 04:28 | but if we click or we are reading an
eReader device, and we swipe with our fingers, it
| | 04:34 | would go to the next screen where
the image title and the image appears.
| | 04:38 | If I go to Biographical
background, other painters have notes.
| | 04:43 | Let's try this one, see if
there's any more, here we go.
| | 04:47 | So right there is Image
Number 2 at the top of the page.
| | 04:50 | There is no limit to the number of styles
you can add that tag to. And what that means
| | 04:55 | then is that when you are prepping your InDesign
file for Export to EPUB, think about any places
| | 05:01 | where you want a force the EPUB to have text
start at the top of the page and use a style
| | 05:08 | just for those areas.
| | 05:11 | In this case it worked out great, subheads
we always want to start at the top of the
| | 05:14 | page and the image titles, we
want to start at the top of the page.
| | 05:18 | So a little planning and tweaking will make
your EPUB really easy to navigate and read.
| | Collapse this transcript |
| Creating a navigation TOC with an InDesign book| 00:00 | Things are a little different if you are
exporting a book to EPUB as opposed to a single document
| | 00:06 | and by book I'm referring to that
specific type of InDesign file New > Book.
| | 00:12 | There is essentially a collection of
individual InDesign documents that you can export to
| | 00:18 | prints or PDF or EPUB all at once.
| | 00:23 | So here is our original one document book
that just has four different sections in it
| | 00:29 | divided by subheads, and I have gone ahead and
split that up into four separate documents.
| | 00:35 | If you look in the exercise files I have
just one document that's the Bio. Let's just go
| | 00:43 | a head and open this up.
| | 00:44 | So you see here is the Bio Biographical
background, and then I have collected them all into a Book.
| | 00:50 | So if I go to File > Open and then in the
exercise files go to book, I am going to open up the
| | 01:00 | INDB file which is InDesign book, and it
opens up as a Panel, and if I have this document
| | 01:07 | open, and then I modified it outside of the
book so I want to go a head and double-click
| | 01:12 | it and then now it's up to date.
| | 01:15 | So we have the Flemish InDesign document,
the Bio, Later-years and Other Painters.
| | 01:21 | If I want to export this to EPUB I just go to
the Book Panel menu and choose Export Book to EPUB.
| | 01:29 | Let's go ahead and do that. Where do you
want to save it? I'll save it right there in the
| | 01:33 | desktop just call it
z-ArtText, yeah that's fine.
| | 01:37 | We are going to accept the defaults and for Image and
for Advanced, everything is at the defaults click OK.
| | 01:47 | And notice what happens with the
Navigational Table of Contents that we have entries in
| | 01:51 | here and each one is the name of the
InDesign file and a div actually split them up, well
| | 01:58 | actually what it did was it left them alone.
| | 02:00 | When you export in InDesign book to EPUB
that special kind of book file it's made up of
| | 02:06 | multiple files each document becomes an HTML
file in the final EPUB and so each document
| | 02:14 | becomes its own entry in the
Navigational Table of Contents.
| | 02:17 | You may not like these titles that's it
using but you can easily edit this after we crack
| | 02:24 | open the EPUB you can go ahead and edit
what is the text that appears here, and I have
| | 02:27 | a video that shows you how to do that or
you could think ahead and rename your InDesign
| | 02:33 | document before you export them to EPUB.
| | 02:36 | And I did that in another version of the book.
Let's close this documents, and we will open
| | 02:43 | up the other one to the Exercise folder
called Art Text - named and again I must have open
| | 02:52 | up a document outside of the book.
| | 02:54 | If you see that when you open up the book
files just double-click on one of the triangle
| | 02:58 | that's all and notice how
I have renamed these files.
| | 03:02 | So 1 Flemish Painting, chapter 2 Biographical
background, then Dyck's later years and Other
| | 03:08 | Painters that are exactly how
they're named in the Finder.
| | 03:12 | Now one problem with this is then the XHTML
files have the spaces in filenames and may
| | 03:18 | be that was the first video I
talked about in this chapter.
| | 03:21 | And it's, I don't know, six of one
and half dozen of the other.
| | 03:23 | Personally what I would do would be to name them
safely and then edit the Nav TOC file down the line.
| | 03:30 | But I just want to show you,
that this way is possible as well.
| | 03:33 | So if I go ahead and export this to EPUB and
call it named everything is that the Default
| | 03:41 | setting, click OK, so we get nice-looking
entries here in our Table of Contents on the left
| | 03:49 | and clicking on them the text automatically
starts to the top of the page because it is
| | 03:53 | already split, it is
already a separate document.
| | 03:56 | I know that a great number of books that
you are trying to export to EPUB exist in this
| | 04:01 | kind of file format as InDesign book.
| | 04:03 | I just want to bring its your attention
that when you're dealing with a book you really
| | 04:07 | don't have to worry about using a TOC style
if you don't want to because you already get
| | 04:12 | a Navigational TOC created automatically from the
names of the individual InDesign files in your book.
| | Collapse this transcript |
| Using a TOC style in combination with an InDesign book| 00:00 | When you're working with an InDesign book, like
what I have open here, something that you have
| | 00:04 | created from File > New > Book and a
collection of separate stand-alone InDesign documents.
| | 00:10 | You are also able to use the techniques that
I described in previous videos for a single
| | 00:16 | InDesign document as far as manipulating what
happens with the nav TOC and how the document
| | 00:23 | gets split up into multiple documents.
| | 00:26 | Now, you already know that this document
will be split up into multiple documents because
| | 00:31 | it already is multiple documents.
| | 00:33 | So each one of these will be an entry in the
nav TOC. But what if you didn't want this text
| | 00:38 | to be the text in the nav TOC?
| | 00:41 | Perhaps you have named your InDesign files
according to your internal naming system,
| | 00:45 | you know series 5 G 2012, or something like that.
| | 00:50 | You can always use the TOC style technique
to force InDesign to create a nav TOC using
| | 00:57 | the text that's actually in your
documents rather than the name of your documents.
| | 01:02 | Let me show you how that works.
| | 01:04 | The first thing is that you need
to edit the style source document.
| | 01:09 | This one right here, the one with the icon
in front of it, the style source in the Book.
| | 01:13 | In an InDesign book one
document is always the style source.
| | 01:17 | So I'm going to double-click that and in this
document, you need to actually create a TOC style.
| | 01:23 | This document still has it from when I
created it as a single document, if we go down to
| | 01:28 | Layout > Table of Contents, you can see
that it still has the EPUB Style that I created
| | 01:35 | and the EPUB style simply includes the subhead
text that's what I want to appear in the nav TOC.
| | 01:41 | Now it's enough just to create a TOC, you
actually have to save it as a style, and this
| | 01:46 | has already have been saved as that style.
| | 01:48 | So I will click OK, you don't actually have
to place this, whether or not you place it
| | 01:53 | is up to you, you just to have a have one
saved with style source document and then
| | 01:57 | that's the end of the story.
| | 01:58 | You can go to the Book Panel menu, and choose
Export Books to EPUB, you don't use the normal
| | 02:04 | file export command here--you have to
remember that when you're exporting a book--and we'll
| | 02:10 | save this right on the Desktop, and just as
we did for the single InDesign document, you
| | 02:15 | need to go to TOC Style in the Setup area and
choose the name of the TOC style that you saved.
| | 02:22 | Everything else can remain at the default,
and we will click OK, and there you go.
| | 02:28 | We have the actual text from our subheads
appears at the left and clicking here automatically
| | 02:34 | jumps you to the top of that
document because it's a book.
| | 02:39 | So because the very first paragraph of each
of these individual InDesign files was the
| | 02:43 | subhead, it works out perfectly.
| | 02:46 | This is a great solution to have more control
over the text that appears the nav TOC without
| | 02:52 | you having to go in there later and edit it.
| | 02:54 | Now in the same way, you can force InDesign
to chunk up the document at certain styles
| | 03:01 | just as I described in a previous video.
| | 03:04 | So, for example, if we want InDesign to split
up each of these individual documents whenever
| | 03:10 | there is an instance of the style so that
we can force this text to also appear at the
| | 03:15 | top of the page just like this text is you
can do so using the paragraph style editing
| | 03:21 | method that I showed you.
So we can come here to Paragraph Styles.
| | 03:25 | So you want InDesign to split the document
whenever the Image title paragraph appears
| | 03:30 | so that it appears at the top of the screen.
| | 03:33 | So we're going to edit to this style by right-clicking
on the style name, going down to Export Tagging
| | 03:40 | and turning on Split Document, and we
could do that for multiple styles as well.
| | 03:46 | We don't need to do it for subhead because
that already is the first style at the top
| | 03:51 | of each of the separate InDesign documents.
| | 03:54 | Now when we go to Export Books to EPUB we
will replace the existing one. We still want
| | 04:01 | to use EPUB as our TOC Style because remember
this governs what the text is in the nav TOC,
| | 04:08 | this does not govern how
it chunks up the document.
| | 04:12 | And then in the Advanced section, we can choose
either in line Image if that is the only style
| | 04:18 | that we want InDesign to split at.
| | 04:21 | Or if there are multiple styles we want it
to split at, we can use Based on Paragraph
| | 04:26 | Style Export Text, which is the check box
that we just turned on for image title.
| | 04:31 | Let's go ahead and export this, there we go.
| | 04:35 | So we still have the TOC Style that manages
what the text is over here on the left, let's
| | 04:40 | actually get this smaller, so we can see it.
| | 04:43 | But the image title and the image it follows
it, will now always appear at the top of the
| | 04:47 | screen whenever the user
swipes to it or pages to it.
| | 04:52 | Because it actually is a separate HTML
document that InDesign Split based on our command.
| | 04:57 | I think you can see that when you're working
with an InDesign book, you have a little bit
| | 05:01 | more flexibility in regards to what happens
in the nav TOC and what happens in the actual
| | 05:07 | split HTML documents.
| | 05:10 | If your InDesign documents are already set
up as books, more power to you, and you might
| | 05:14 | want to think about creating future InDesign
documents as books as this one is on screen
| | 05:20 | because it makes it a little bit easier,
when you are trying to manage what happens when
| | 05:24 | you export your files to EPUB
| | Collapse this transcript |
| Managing the sequence of content| 00:00 | Let's work with another document for change
of pace, because you know it's not just long
| | 00:04 | books that get exported to EPUB, you
can export any InDesign documents to EPUB.
| | 00:09 | And, for example, here is one that's more
brochure like, this is just a single page
| | 00:13 | from a course catalog for Roux
Academy of Arts, Media & Design.
| | 00:19 | What I want to show you here is I wanted a
page that had a lot of frames on it because
| | 00:23 | it's something that you really need to
think about when you are prepping your InDesign
| | 00:28 | document for EPUB export. And that is what will
the order be of these frames in the resulting EPUB?
| | 00:33 | I said in an earlier video that when you export
from InDesign to EPUB, it's kind of like exporting
| | 00:39 | everything to a single word document with images
and all art elements that float along with the text.
| | 00:47 | But InDesign layouts are not,
you know single flowable documents.
| | 00:52 | Some frames might be anchored but many others
are just sitting there, you have frames that
| | 00:56 | are overlapping other frames, you have
frames with text wrap on them like this one of my
| | 01:01 | dog Zoe, pushing text out of the way.
| | 01:04 | How does InDesign decide what should be
exported first and what should be exported next?
| | 01:10 | It's got this tiny little
computer brain, don't forget.
| | 01:13 | And it can't really understand
what's happening on the page.
| | 01:16 | As always my favorite technique is simply
to just jump in, let's export this thing as
| | 01:20 | is to EPUB and see what we get.
| | 01:22 | So I'll go to File > Export and EPUB Roux
Catalog page we're going to create a 2.01
| | 01:32 | EPUB, we're going to use all of the default
settings. You can turn this on or leave this
| | 01:38 | off if you want, but we do want to include
style definitions, so we get some styling
| | 01:43 | and then just click OK. Whoa momma!
| | 01:50 | This doesn't look very much like that
layout, I know it's a flowable document.
| | 01:55 | We're starting out with Zoe's picture, and
then we have this nice dude working at his
| | 02:00 | graphics table and then his quote.
| | 02:03 | Even though here the quote
is obviously above the dude.
| | 02:08 | We have two captions, and I actually label
this for us Caption 2 and Caption 1, and we
| | 02:19 | come back here, and we see Caption 2 appears
first and then Caption 1, even though Caption 1
| | 02:25 | is here and Caption 2 there.
So how did all this happen?
| | 02:30 | Well, InDesign's default method for exporting
content to EPUB is to use a very linear left
| | 02:36 | or right top to bottom order
and what it looks for are frames.
| | 02:41 | So if we look at this document and here's a
tip that I like to do is take a ruler guide
| | 02:46 | and just sort of imagine that it's
like a bulldozer shoving things over.
| | 02:53 | What is the first thing it
hits as I move from left to right?
| | 02:56 | It's the picture of Zoe at
the bottom, do you see that?
| | 02:59 | And that's why Zoe appeared first.
What's the next thing that it hits?
| | 03:04 | It is actually, if we zoom in closer, and
I want to actually remove this guy because
| | 03:12 | it'll be a little easier to see.
| | 03:16 | This frame right here is a smidgen more to
the left than this frame up here, you could
| | 03:21 | look up here at the X and Y position, so the X
position for this one is 2P11.143, and this is 3P.
| | 03:31 | So 1 point, 172nd of an inch, that's
why this appeared first and then this.
| | 03:37 | Now after this guy let's jump back here, so
we found Zoe then we found this guy, then
| | 03:42 | we found this, then it found this text frame.
So this is at 3P0.8, and this is at 3P0.
| | 03:49 | And I believe that InDesign
rounds off to the nearest point.
| | 03:54 | So in InDesign's little brain these things
are exactly the same distance from the left.
| | 04:00 | So when you have two or more objects, two
or more frames, that are the same distance
| | 04:04 | from the left edge of the
page than it goes top to bottom.
| | 04:08 | So, this got exported first, this was
already exported, then this gets exported.
| | 04:14 | Now this is actually the first frame of a
threaded story I go to View > Extras > Show
| | 04:21 | Text Threads, you can see
that this is threaded throughout.
| | 04:24 | So as soon as InDesign hits the first frame of
a threaded story, it exports the entire story.
| | 04:32 | Let's take a look at them.
| | 04:33 | So it starts here, and then it exports the
entire story before it exports anything else.
| | 04:39 | And remember it also exports any overset text.
| | 04:42 | So over here I believe we had some overset
text if I click here and go to Edit > Edit
| | 04:48 | in Story Editor and scroll down to the bottom you
can see anything with the red line is overset text.
| | 04:55 | So creating a flash game, this whole section
here you can't see it in the InDesign document
| | 05:01 | and layout, you wouldn't see it
if we printed or export it to PDF.
| | 05:06 | But overset text will always appear in the
EPUB, keep that in mind if you don't want
| | 05:12 | it to appear you need to delete
it from the InDesign document.
| | 05:15 | After it was done exporting that entire story
then it continued in it's bulldozer like fashion.
| | 05:22 | We should probably fit the page in the window,
and I think you can see with your eyeballs
| | 05:26 | you don't need my sound effects anymore, that
this frame was the next thing that it hit upon.
| | 05:32 | Now Caption 2 appears right above this picture
because if we look at the paragraph formatting
| | 05:39 | it's actually been indented far to the right.
| | 05:42 | I know a lot of designers like to work with
frame edges off, so if I actually did that.
| | 05:47 | If I went to Extras and shows Hide Frame
Edges it would be really hard to tell, right.
| | 05:52 | Which frame would export first and then
which one next and which one after that.
| | 05:57 | Now good idea when you are prepping your
InDesign document for EPUB export is to please turn
| | 06:04 | your frame edges back on, so
you can see what's happening.
| | 06:08 | Let's go back here, and I think you can tell
better that after it exported the entire story
| | 06:13 | then it exported Caption 2 then Caption 1.
| | 06:16 | So there's Caption 2 it hit this frame edge
first, and then it hit this, and this which
| | 06:21 | I believe are the exact same distance from the
left, but then it goes remember top to bottom.
| | 06:26 | So this one came out first, and I would
guess the next thing would be the picture of this
| | 06:30 | model figure, and let's look at page 2.
| | 06:33 | And there it is and then the
smiling face, and that's it.
| | 06:36 | So if you want to manipulate this
you could just move things around.
| | 06:42 | This is why often you would do is save as
to your InDesign for print document, because
| | 06:47 | in your InDesign for EPUB document you're
going to force order by--I want this to
| | 06:52 | be the first thing--and then I want Zoe to
actually be after the story, so I'll put it
| | 06:59 | over here, and I'll fix my caption, so it's
like this, and I'll change the indent to 0, and so on.
| | 07:13 | Let's do the first paragraph
to 0, let's try this again.
| | 07:18 | Export to EPUB, we'll replace our existing
one, the exact same settings, click OK, and
| | 07:27 | there's our order a little better.
| | 07:31 | Starts out with the quote and then our guide,
then the actual story, then the picture of
| | 07:35 | Zoe, then Caption 1, and the first
model, and Caption 2, and then second model.
| | 07:41 | So just couple nudges, and we have
forced the order to what we want it to be.
| | 07:48 | I'm going to take a closer look at
manipulating the layout order in the next video and then
| | 07:53 | also in this chapter we have another way a
new way to be able to manage the order of
| | 07:59 | items that get exported without having
to mess around with the layout at all.
| | 08:03 | But the main thing is that you understand
the underlying way that InDesign thinks about
| | 08:07 | the layout and how it decides what
should get exported to EPUB, and when.
| | Collapse this transcript |
| Using the layout order to manage content flow| 00:00 | Let's delve a little more deeply into working
with the layout order when you are exporting
| | 00:05 | an InDesign file to EPUB.
| | 00:07 | I did show briefly in the previous video about
how you can manipulate the position of frames
| | 00:12 | on a page to force InDesign to export the
content in the order that you want. And let's
| | 00:17 | sort of expand on that with a
longer project, sort of a single page.
| | 00:23 | Here we have the History of Art sample
book that we have been working with, and let's
| | 00:29 | just refresh our memories about what this
looks like, I am going to zoom out a bit with
| | 00:32 | Command+Minus or Ctrl+Minus. So we have a
cover, we have a title page, Table of Contents
| | 00:38 | would normally go here but we haven't
placed one yet, and then we have text that flows
| | 00:44 | from page-to-page, and I can turn on View > Extras >
Show Text Threads, so we can see how that works.
| | 00:53 | And we have some images, are inside the text,
and basically it's about it, it goes all the
| | 00:58 | way to the end, we don't have an index or
anything like that, but just have a little
| | 01:02 | flourish at the bottom.
| | 01:04 | Let's go ahead and export
this to EPUB and see what we get.
| | 01:08 | I will press Command+E or Ctrl+E
and History-of-Art.epub is fine.
| | 01:12 | I am going to accept all the defaults.
| | 01:15 | So look right here under Content Order,
this is what we are going to be using, and this
| | 01:19 | is the default Based on Page Layout.
| | 01:22 | The other two choices here for Content
Order are XML Structure and Articles Panel.
| | 01:28 | Now we have not applied any XML tags to
this book, and in fact, I'm not even going to be
| | 01:33 | covering XML Structure in this title because
since Adobe added the Articles Panel, there
| | 01:39 | is really not that much of a
reason at all to use XML structure.
| | 01:43 | So unless you're actually using an XML-based
workflow then this is going to be just too
| | 01:48 | much work to bother with.
| | 01:50 | In the next video we are going to be
talking about using the Articles Panel.
| | 01:53 | But right now the Content Order is a
default Based on Page Layout. And everything under
| | 01:59 | Image is the default and under Advanced is
my default, I don't want to Preserve Local
| | 02:05 | Overrides, and then we just click OK.
| | 02:11 | This doesn't look too bad, you can see that
Chapter 1 is starting right here to the title
| | 02:15 | page so we would have to set this up so that
it starts at the top of the next page using
| | 02:20 | some of the techniques we have already
described, and then we go to the next page, and there
| | 02:26 | is Painting in Flanders, Holland, and
Germany with a picture, that's okay, but I think we
| | 02:31 | are missing something.
| | 02:32 | Let's jump back here to
InDesign, there is the title page.
| | 02:36 | What happened to this right here?
| | 02:38 | Let's zoom in, and so little imprint and
then the name of the publisher, that should be
| | 02:45 | right after the title page but instead right
from the title page and also miss this graphic
| | 02:51 | and went right to here, that's kind of strange.
| | 02:55 | And where is that big picture that's supposed to be
right here in the first paragraph? It's not there.
| | 03:00 | Just Figure 1 is there.
| | 03:02 | So this is often what you do when you are
working within InDesign document is that you
| | 03:07 | do the export first and just sort of puzzle out
what things should be here and why aren't they here.
| | 03:14 | If I scroll to the very end, because
obviously InDesign hit a frame that has this entire
| | 03:19 | story so it's flowing the entire story first.
| | 03:23 | We will probably find a whole bunch of stuff
at the end of the document and indeed we did.
| | 03:28 | Here is that Frederick A.
| | 03:29 | Stokes Company with that little piece of artwork,
and we have a footnote here, and that footnote
| | 03:34 | is here because footnotes by default appear at the
end of the HTML document in which they are referenced.
| | 03:41 | So this footnote was at the
very beginning of the document.
| | 03:43 | There is not much we can do about that
because this is actually part of the text flow.
| | 03:48 | If I made the page smaller,
you can sort of see it.
| | 03:52 | So it's part of the text flow here.
| | 03:54 | But these elements are appearing in a text
flow because they were floating, they weren't
| | 04:00 | really anchored in the main story at all and
so InDesign exported the main story and then
| | 04:05 | exported these things.
| | 04:08 | Still, when I export this to EPUB, I am curious
about this stuff because this appeared before
| | 04:14 | the beginning of the main story and InDesign
does go page-by-page, it doesn't jump to page
| | 04:20 | 5 and export the story, then go back to page 3
and export these graphics. So how did that happen?
| | 04:26 | Let's take another look at the file.
| | 04:28 | We are going to select the frame where the
story is, and we still have text threads turned out.
| | 04:33 | I am going to press Command+Minus or Ctrl+Minus
a bit. And it looks like this story here is
| | 04:42 | threaded to this story which is empty right
now, and we will bypass this, so I can sort
| | 04:46 | of see why this graphic was saved to the end.
This is all in the same story.
| | 04:52 | But this right here is a different
frame, and this is a different frame.
| | 04:55 | Do you see how this frame is not threaded
to anything, so what happened was InDesign
| | 05:00 | in its little software brain went to this
spread, and it hit this frame first, and it
| | 05:06 | exported the entire story and
any anchor graphics within it.
| | 05:10 | Then what was done, it came back to this
page and found this graphic, and this story.
| | 05:17 | Actually let me zoom in here.
It found this frame.
| | 05:21 | Remember it goes left to right,
and then it found this graphic.
| | 05:25 | So if you look here back at our book, indeed it
found the text first in that frame and then the graphic.
| | 05:33 | So how do we fix some of these items?
| | 05:35 | The secret is all in the
embedding, zoom out a little bit here.
| | 05:40 | We need to get these items part
of the main story, essentially.
| | 05:44 | So I am going to move this out,
and I am going to move this out.
| | 05:50 | There is a couple of ways we can do this,
we can either Copy or Cut this text and paste
| | 05:56 | it in here and format it or we can
actually embed the entire frame here.
| | 06:01 | Let's just cut and copy the text for this one.
| | 06:03 | So I am going to copy that text and then in
this frame I will hit Return, and I will Paste,
| | 06:09 | and now we want to add some space above here,
so let me go to Paragraph Styles, and we will
| | 06:16 | create a new style, call it publisher and
then under space above we will add some space.
| | 06:27 | I have Preview turned on so we can see the effects,
so let's just say, 10 picas, that looks good enough.
| | 06:33 | That's fine. So we have taken care of that, and now we need
to get the graphic in there as well and again
| | 06:39 | the graphic would need to
go in as an anchored graphic.
| | 06:42 | So if I hit Return again and then press the
Up Arrow key to get to this Carriage Return,
| | 06:51 | I want to anchor this graphic so it flows with the
text, so it appears here above the publisher name.
| | 06:58 | But this paragraph is still styled with our
publisher instead I'm going to change it to
| | 07:04 | be one for inline images, inline-image,
and we don't need to base it on publisher, we
| | 07:12 | will just base it on body or basic paragraph
and what we want for this one is we want the
| | 07:18 | Basic Character Format. First of all,
whenever you put an inline-image in, you want it to
| | 07:24 | be set to Auto Leading so that it
automatically makes enough room for the graphic, and we
| | 07:30 | don't want any indents but you might want
a Space Before or Space After. So I think
| | 07:38 | I'll add 1 pica Before and 1 pica After,
and that gives us a good starting point.
| | 07:46 | So we are going to take this graphic.
| | 07:49 | Now you can cut it with the Selection tool,
switch the Type tool, and paste it in as you
| | 07:55 | always could, but since CS 5.5, they have
added this wonderful little box up here that is
| | 08:01 | the Anchor Control.
| | 08:02 | So I could just drag this box right here,
and it would be anchored in the text flow
| | 08:07 | but the image would remain
sitting out here in the Pasteboard.
| | 08:10 | Now honestly for me it makes no difference
because I am going to export this think to EPUB anyway.
| | 08:15 | When you export it to EPUB it's not going
to be sitting out here in the Pasteboard,
| | 08:17 | this is just for print or for exporting a PDF.
| | 08:21 | Custom anchored objects like this, ones
that are placed manually elsewhere on the page,
| | 08:26 | apart from where it's actually linked to the
text flow are ignored when you export to EPUB.
| | 08:33 | That image will appear right in line.
| | 08:35 | But to get a better idea of what this is
going to look like, in the EPUB, I'm not going to
| | 08:38 | make it custom inlined, I am just going to
follow the tooltip instructions, hold down
| | 08:43 | the Shift key as I drag it
to create an inline object.
| | 08:46 | So I grab this and then hold down the Shift key
and put it here, and that will jump it over this way.
| | 08:52 | So now that's part of the text flow, and you
can see that if I hit Return, then it moves
| | 08:58 | with the text flow.
| | 09:00 | I should have made it centered, so let me
come back here and select that paragraph again.
| | 09:04 | I am going to edit this to make
it centered. That looks better.
| | 09:11 | Okay, and now this one is a little too much
so I have to edit this guy, and reduce the
| | 09:18 | Space Before, let's just see, 5p.
| | 09:24 | You would do the same thing for any
other images that need to be inline.
| | 09:28 | You need to anchor them in the text flow.
| | 09:30 | So going down, I am going to ignore this one
for now, we don't really care about it, but
| | 09:35 | this guy right here, this is just a regular
image that has been placed on top of the text,
| | 09:39 | and it's set to wrap.
| | 09:42 | I really don't want to have any kind of
wrapping which gets converted to a float CSS, it's
| | 09:48 | an extra CSS formatting, so let's remove
the text wrap, select the image, and then open
| | 09:53 | up the Text Wrap Panel--you see this is why I added
it to my EPUB workspace because this happens a lot.
| | 10:01 | Turn off the Text Wrap, and now we need to
make a little paragraph home for it, so I
| | 10:07 | will hit Return and select that Carriage Return,
change the style to inline-image, switch back
| | 10:16 | to the Selection tool, and then hold down the Shift
key and drag the Anchor Control right next to it.
| | 10:25 | You do the same thing anytime that you
found something that was floating like here, or
| | 10:29 | here. You could anchor both of these, even
if it's a group, you could anchor the group,
| | 10:34 | and they'll all appear in the right place.
| | 10:36 | Now I am not going to go through and do
every single image but that is that general idea.
| | 10:41 | So let's go ahead and export this to EPUB
again, we will replace our existing one, Based
| | 10:47 | on Page Layout, it's remembering all of
our settings from before, so you don't always
| | 10:51 | have to obsessively check every panel,
it will remember what you just did.
| | 10:56 | So there is our graphic,
and there is our publisher.
| | 10:58 | Again, we would need to fool around with
styles or splitting up the document to force us to
| | 11:03 | the top of the next page but at least it's
in the right order, and there is our image
| | 11:08 | followed by the name of
the figure right below that.
| | 11:11 | So the lesson here is that you can go ahead
and export your InDesign files directly to
| | 11:15 | EPUB, but you might need to spend a few minutes
maybe even a couple hours in embedding graphics,
| | 11:21 | anchoring graphics, setting space above for
text that used to float its own text-frame,
| | 11:26 | and so on in order to get
the results that you want.
| | Collapse this transcript |
| Using the Articles panel to manage content flow| 00:00 | Let's work with a document that is a little bit
more complex than what we have been working with so far.
| | 00:06 | This is the full Roux Academy of
Art Media & Design course catalog.
| | 00:10 | And I'll zoom out a bit and scroll through
so you can see what it's made up of, we have
| | 00:14 | the cover, we have a welcoming inside
spread there, and then we have a list of classes
| | 00:21 | along with pictures.
| | 00:22 | So this is the page that we have
been working with in a couple of videos.
| | 00:25 | But you can see that this story down here
continues as threaded into multiple frames,
| | 00:31 | and then we have some stand-alone
images and captions here.
| | 00:35 | And it continues for another spread.
| | 00:37 | And then here we have some stand-alone text
frames and finally a table and then that's
| | 00:42 | the end of the document.
| | 00:44 | Attempting to manage the order of all of
these individual objects in this document would
| | 00:49 | be a daunting task were it not for a new
addition to InDesign that was added in CS5.5 called
| | 00:56 | the Articles panel.
| | 00:58 | The Articles panel is part of my EPUB workspace, and
we put together this workspace in a previous video.
| | 01:05 | If you don't have this workspace you can get
to the Articles panel from the Window menu,
| | 01:09 | it's the very first item.
| | 01:11 | The Articles panel will let us drag and drop
the items that we want in the order that we
| | 01:16 | want them exported.
| | 01:18 | Without us having to move actual objects on
the layout itself, it's pretty cool how it works.
| | 01:25 | But before we do that I'm going to do my
usual routine whenever I'm working with any kind
| | 01:30 | of InDesign file is I just export it
according to the default settings using layout order
| | 01:35 | to see what we have got to work with and to
get an idea of what challenges there will
| | 01:39 | be and what I'm going to be using
the Articles panel to try and fix.
| | 01:44 | So let's just jump right in by going to
export to EPUB, I'd press Command+E or Ctrl+E, and
| | 01:51 | this is actually the Roux catalog.
We'll save it out on the desktop.
| | 01:56 | We want to use the default settings, so I am
going to make a check here, that's all right.
| | 02:01 | View EPUB after Exporting, that's fine and
all this is fine except I wanted to actually
| | 02:08 | Preserve Local Overrides, I haven't really
checked the style settings so I just want
| | 02:12 | to get an idea of what it looks
like when I export. So I'll say OK.
| | 02:17 | And there are more items in this layout than
previously, so it might take a little while
| | 02:22 | for it to actually get all the way out to EPUB.
There is our cover, yay.
| | 02:30 | And this is a little strange, we start out
with a list of courses and then Welcome to Roux.
| | 02:37 | All right, so this isn't quite
working out, over here this looks familiar.
| | 02:45 | And let's keep going, then we have this
problem that we ran into before with the pictures
| | 02:48 | and the captions at the end.
| | 02:52 | And then these are the final objects in the last
page and then the table and table came up pretty good.
| | 02:59 | So that's what we're working with, let's
close this up and jump back to InDesign.
| | 03:04 | To use the Articles panel I'm going to detach it, so
it's a little easier for you to see it in this video.
| | 03:11 | And it's nice because it gives you a little
bit of instructions here as you go. It says
| | 03:15 | that there's nothing in here that's why it's
empty, drag stories and objects here to create
| | 03:18 | a new article and add content to it or we
can hold on the Command or on a PC the Ctrl
| | 03:24 | key and click the Add button to add all
document content at once to a new or selected article.
| | 03:31 | All right, so let's go the manual way
first, and we'll just drag and drop.
| | 03:35 | Now this cover I have already grouped,
so everything is together as one item.
| | 03:41 | And I'm just going to drag and drop it right
on to the Articles panel just like it says.
| | 03:46 | Notice that I get a nice little hand with
a plus symbol when I get over the panel.
| | 03:52 | This is telling me that when I release this,
this is going to add it to the Articles panel.
| | 03:56 | It's not actually going to
move my selection in the layout.
| | 04:00 | I am dragging it where there is no existing
articles, so it's saying hey you want me to
| | 04:04 | be an article, I am going to say okay fine.
You can be the cover image.
| | 04:08 | The name that you attach here, the names
of the articles, these don't get exported at
| | 04:12 | all, these are not part of the CSS or your
HTML, so you can call it whatever you like.
| | 04:17 | And notice that because this is a group it
came through as a group, and when I click
| | 04:21 | the reveal triangle we can see
the individual items within it.
| | 04:25 | So I am going to flip that back up,
and now let's go on to the next spread.
| | 04:31 | This time I want to make a completely new
article, so I am going to click the Create
| | 04:35 | New Article button, and
we'll call this welcome spread.
| | 04:42 | And oh, look I attached the group.
| | 04:44 | So if you leave something selected, and
then you create a new article, it automatically
| | 04:48 | attaches it to that.
| | 04:50 | And it would actually export this twice,
which is a feature. Kind of one of those things
| | 04:54 | that is it a feature or
is it a bug? I don't know.
| | 04:57 | I wish that there is a preference that you
could tell InDesign to ignore selections when
| | 05:01 | creating a new article, or you know if you hold
down the Option or Command key when you click it.
| | 05:05 | Anyway this is not that big of a deal, you
can always select it here in the Articles
| | 05:08 | panel and click the trashcan that
will not delete it from the layout.
| | 05:13 | Now I want to drag this over and the point
here is the drag things over in the order
| | 05:17 | that you want InDesign to export them to EPUB.
| | 05:21 | So what's the first thing on
this spread that I want to export?
| | 05:24 | I think I'd like to export Welcome to Roux.
| | 05:27 | So I am going to drag this frame over, and
now I am going to put my cursor right underneath
| | 05:32 | the name of the article, so you see this black
horizontal line, and that will make sure that
| | 05:37 | it's added to that article.
| | 05:40 | Welcome to Roux, and then I'll put I think
the picture of the kids here and then this,
| | 05:49 | and you could make a multiple selection and drag
and drop them all at the same time if you'd like.
| | 05:53 | Now this here, it says
let's zoom in to it, it says.
| | 05:57 | It's a nice little art element
that is actually text on a path.
| | 06:00 | This would not look exactly like this when
I export it to EPUB, it would just be the
| | 06:04 | text itself with the text formatting.
| | 06:07 | I don't really need it so
I am going to ignore it.
| | 06:09 | See that's one of the other powerful features
of the Articles panel is that when we export
| | 06:14 | this to EPUB, the only things that are
going to be in the EPUB are what we have added to
| | 06:18 | the Articles panel.
| | 06:19 | So if there are some items that you just
want to leave there for the print version or the
| | 06:23 | PDF version, and you don't want it included
in the EPUB, then just don't bring it into
| | 06:27 | the Articles panel, I love that.
Let's go back to fit spread in window.
| | 06:33 | Now I think I'd like to bring this girl, and
this text, and then we'll do the Course list,
| | 06:45 | and now I'm going to click to deselect,
and let's go on to the next one, next spread.
| | 06:49 | I can create another article if I want, or I
can continue just adding all this, we could
| | 06:54 | just call it like catalog
and add all these items.
| | 06:57 | But one of the reasons that I like to use individual
articles is because that way I have more control.
| | 07:04 | If I only want to export the Welcome spread,
I could deselect any other articles and then
| | 07:09 | when I export to EPUB, only
this spread would be exported.
| | 07:13 | So when you export to EPUB in the dialog box,
there is no place where you can put in a page
| | 07:19 | range or a section range.
The whole thing gets exported.
| | 07:23 | That's unlike exporting to PDF or even
exporting to HTML, where you do get a choice of which
| | 07:28 | pages do you want to export.
| | 07:30 | To me that's an aggravating thing about
exporting to EPUB is that if I'm just testing a certain
| | 07:35 | page or a certain section to see how it's
going to look, I don't want to have to export
| | 07:40 | the entire project over and over
again, so use articles for that.
| | 07:43 | In fact, you could just use articles just
to test that one spread and then when you're
| | 07:48 | actually ready to export the thing to EPUB,
then you can just use the layout order.
| | 07:52 | In other words use the Articles
panel just for testing if you wanted to.
| | 07:55 | Anyway, so I am going to add another article,
and we'll call this main body and here I'm
| | 08:03 | going to start I think with
the list of courses, this story.
| | 08:08 | Now the Articles panel is great,
but it's not a miracle worker.
| | 08:12 | As usual when you select one frame to get
exported, like this frame right here, if the
| | 08:18 | frame contains a story that's threaded among multiple
frames, the entire story will get exported at once.
| | 08:25 | There's no way that we can use the Articles
panel to squeeze in a picture and a caption
| | 08:30 | in the middle of the story.
It would be nice but we can't.
| | 08:34 | So I'm going to go ahead and export this
story, I will just drag this one frame over, you
| | 08:37 | just need to bring one frame, you don't
need to bring them all if they're threaded.
| | 08:41 | And now the entire story is going to come over.
| | 08:43 | Let's make this a little a larger, I'll
just twirl this up to give us some more room.
| | 08:48 | Now if I wanted say this guy's picture, and
this caption to appear maybe above this headline,
| | 08:56 | Designing a Basic Digital Character,
you know something to break up the text.
| | 09:00 | Then I would need to anchor the caption and
the image in the story just as you would when
| | 09:06 | you're exporting through layout order.
| | 09:10 | So I am going to go ahead and do that here,
I am just going to select the image, and then
| | 09:15 | I'll just drag the Anchor Control button
here and drop it right in front of DESIGNING A
| | 09:21 | BASIC DIGITAL CHARACTER.
| | 09:24 | She said, all right let's
zoom in here and fix that.
| | 09:29 | Oh good, I did, I got it.
| | 09:31 | So I am looking to see where that little Y is
it's got to be before the D, right ED, perfect.
| | 09:37 | As long as you're showing nonprinting
characters, hidden characters then you'll see where the
| | 09:42 | anchor actually is.
| | 09:44 | If I turn that off under Type here Hide
Hidden Characters you wouldn't see it, so always
| | 09:49 | work with it on, it's a good idea.
| | 09:52 | That's a picture, and now we want the caption,
I'd like the caption to be right after that,
| | 09:56 | so I am going to drag--oops not the frame--
and when we drag the Anchor Control, right
| | 10:02 | here before the D, so we should have two Y's
in a row, and I believe that they're sitting
| | 10:08 | right on top of each other.
| | 10:11 | Okay, once you have anchored text into the
story, you won't see anything extra appear
| | 10:16 | here under the Articles panel.
| | 10:18 | I really wish that they would show maybe a
little bullet or something that shows where
| | 10:23 | items are anchored in here, but not yet.
| | 10:26 | Now the Articles panel is an easier way to
force the export order than its big brother
| | 10:33 | which would be tagging everything with XML tags
and then using the Structure panel to reorder things.
| | 10:40 | I covered that in my previous videos on
InDesign to EPUB for previous versions, but I'm not
| | 10:46 | doing it now because I don't know anybody
who really tags everything with XML just to
| | 10:51 | force layout order since the Articles
panel came along, it's far easier to use this.
| | 10:55 | And I want you to know that it did
not replace it, it's just a new feature.
| | 11:00 | If you really want to use XML tagging, you
can still get to the Tags panel here, and
| | 11:06 | you can still view the Structure panel here,
and if you had applied XML tags to everything
| | 11:14 | in your document, they would all appear here,
and then you can drag and drop pictures in
| | 11:18 | front of captions and move things to the
top of the stack and other things to the end.
| | 11:22 | And the powerful feature about using XML
is that every paragraph appears as an entry.
| | 11:28 | And we could drag the picture of the guy and
his caption in between a couple of paragraphs
| | 11:32 | here without having to anchor it here, just FYI.
| | 11:36 | But it is a lot of work and not really
necessary I think for our purposes to use the XML.
| | 11:44 | So I'm going to hide the Structure
panel just wanted to mention that.
| | 11:49 | And now let's add maybe this one, I'll put the caption
here and then the picture of the model underneath it.
| | 11:58 | Now if I thought you know what I would
rather in the EPUB that we have the model picture
| | 12:02 | appear first and then the caption, I could
just rearrange them here by dragging and dropping.
| | 12:08 | If I wanted this and its picture to be in
the Welcome spread, I could just drag and drop
| | 12:14 | them up there. They're not confined to the article
that they originally added to, very flexible that way.
| | 12:21 | One more thing I want to mention about the
Articles panel is that the names for every
| | 12:25 | object that you're bringing over
actually are coming from the Layers panel.
| | 12:29 | And the Layers panel uses the name from the
Links panel, so you don't have to rename a link.
| | 12:35 | If you're trying to remember what is this
picture of, you could rename this to wood
| | 12:40 | model if you renamed it
here in the Layers panel.
| | 12:43 | So I have got it selected, which
means it's selected in the Layers panel.
| | 12:48 | There it is right there, it ends with 730.
| | 12:51 | So here I am going to do the southern double-click
which is click once, then pause, then click
| | 12:55 | again, and I'll call this wooden model,
and then it updates over here, and it's a lot
| | 13:02 | easier to track what's
going to be exported where.
| | 13:05 | I love that feature of the Layers panel.
| | 13:09 | Now the link itself of course is its original name,
so we're not going to end up with any broken links.
| | 13:15 | And notice also that the Articles panel works like
the Layers panel in that it's kind of a navigation aid.
| | 13:21 | When you select something in the layout, if
it's been added to articles, you'll see the
| | 13:26 | little blue selection
icon appear next to it here.
| | 13:29 | Or if I double-click something in the Articles
panel, like let's say this, it will jump to
| | 13:35 | that item in the layout.
| | 13:36 | Now that we have got that covered,
let's go ahead and export this to EPUB.
| | 13:40 | I want to export everything so I am going to turn
on all of the articles that I have included so far.
| | 13:45 | It's not going to export stuff here or on
the last page because I did not add it to
| | 13:52 | the Articles panel, which is fine.
| | 13:54 | We'll go to File > Export to EPUB,
and we'll replace our existing one.
| | 14:02 | Now the most common mistake at this
point is to forget to change this menu.
| | 14:06 | You may have spent an hour getting the
Articles panel just right and then when you Export
| | 14:10 | to EPUB, none of your changes appear in the final
EPUB. And you're like what happened it didn't work?
| | 14:15 | It's because you probably left this at Based
on Page Layout, it's happened to me so many
| | 14:19 | times that I can't tell you.
So make sure and choose Same as Articles Panel.
| | 14:24 | It's enabled now because we actually
have something in the Articles panel.
| | 14:27 | We'll leave everything else as is, that looks
good, click OK, and now we have, here is the
| | 14:36 | cover, here is Welcome to Roux.
| | 14:39 | Now I am not really that concerned about formatting at
this point, I'm mainly looking at the order of the content.
| | 14:44 | I talk about formatting in
videos in a later chapter.
| | 14:48 | But we want to make sure there is the
caption and the girl and her caption and then the
| | 14:52 | courses, that's exactly the order that I wanted.
| | 14:55 | Now here you can see that the picture of the
student and his caption is in the text flow
| | 15:01 | of the main story because we anchored it there.
| | 15:05 | We have a little problem with the text, but
again that's something we can fix in the formatting
| | 15:09 | or in the actual CSS and HTML.
| | 15:13 | Now at the very end we have the wood model,
and we have the caption and nothing else,
| | 15:18 | because that's all that we
added to the Articles panel.
| | 15:20 | So I think the Articles panel is an
incredibly useful addition to InDesign.
| | 15:25 | And the next time that you're struggling with
an InDesign layout that has lots of different
| | 15:29 | image frames and text frames and other things,
consider using the Articles panel to manage
| | 15:34 | the content order.
| | Collapse this transcript |
|
|
4. Modifying Text and Images for EPUB Export Maintaining text frame spacing| 00:00 | One of the things that takes a lot of new
EPUB designers by surprise is what happens
| | 00:05 | with spacing in between text frames
when you export from InDesign to EPUB.
| | 00:11 | I have a document open, and we're just
going to take a quick peek at what happens when
| | 00:15 | we exported as is to EPUB.
| | 00:18 | Now if you're following along with the
exercise files note that this document actually has
| | 00:22 | two pages, and we're only going to export
page1 to EPUB. And if you were paying attention
| | 00:28 | the last chapter you know the way to
do that is with the Articles panels.
| | 00:32 | So I have already set that up, and we have
an article for page1 and an article for page2.
| | 00:37 | Make sure that only page 1 is checked,
that's what we're going to export.
| | 00:40 | So go to File > Export to EPUB, I'll press
Command+E or Ctrl+E, History-of-Art that's
| | 00:47 | fine on the desktop.
| | 00:49 | Make sure that Content Order is set to same
as Articles Panel, not this one, that way only
| | 00:55 | page 1 will be exported.
| | 00:57 | View EPUB after Exporting that's fine, that's
fine and here we'll go ahead and include Local
| | 01:03 | Overrides for now and click OK.
| | 01:06 | So, take a look at what happened to the spacing
of this text, let's jump back here to InDesign
| | 01:11 | we are supposed to have a whole lot of
space in between these two blurbs and here it's
| | 01:16 | really been pulled up and the same thing between
author of the handbook and the name of the publisher.
| | 01:22 | Well, it'll help us a lot in figuring out
what the problem is and how to fix it is to
| | 01:27 | first of all turn on frame edges, please.
| | 01:30 | I know a lot of designers hate working with
frame edges showing, but when you are trying
| | 01:35 | to get the formatting across from your
InDesign layout to EPUB you really need to work with
| | 01:41 | them on, and you'll see why in a minute.
| | 01:43 | When I go to View > Extras > Show Frame Edges
you can see that this was not all in one frame
| | 01:49 | these are actually three separate frames
and in this frame the text frame has been set,
| | 01:55 | and I'm going to go to Text
Frame Options to Align at the bottom.
| | 01:58 | So, Text Frame Options for Vertical
alignment that's ignored when you export to EPUB, so
| | 02:04 | is the amount of space in between text frames.
| | 02:07 | If you want to maintain this kind of spacing in your
EPUB you have do a little bit of work, not too much.
| | 02:12 | The first thing you want to do is get all
of these separate text frames into one single
| | 02:16 | text frame, because essentially that's what
going to happen in the EPUB document is that
| | 02:21 | all this will be in one text flow.
| | 02:24 | You could just cut and paste this text into
here and make this one larger but that could
| | 02:29 | get really tedious. I want show you nice
little tips to help you compile or concatenate all
| | 02:34 | these different text frames
into one larger text frame.
| | 02:37 | First, make sure that the last line of every
frame that you're going to combine ends with
| | 02:42 | a carriage return like this guy doesn't.
| | 02:44 | Not so much of a big deal,
but definitely in these.
| | 02:48 | Otherwise when we combine them you might find
that a paragraph gets combined with the previous
| | 02:52 | paragraph and then the styles get all messed up.
| | 02:54 | Then the next thing you do is with the
Selection tool click on the out port of the very first
| | 02:59 | text frame that's that white square lower
right, I know that it's empty, but go ahead
| | 03:03 | and click on it, see.
| | 03:04 | And we're going to thread
this frame to the other frames.
| | 03:08 | The fastest way is to hold down the Option
or Alt key and then click right inside the
| | 03:12 | frame anywhere you like.
| | 03:13 | So Option-click because I'm on a Mac and then
Option-click because I'm on a Mac, and because
| | 03:18 | I have turn on Show Text Threads
you see the blue line showing.
| | 03:22 | That's all you need to do.
I'm going to click to get rid of the extra text.
| | 03:26 | Now that these are threaded together it's
one story, and that means I can delete these
| | 03:31 | two frames. I have just dragged around them
and the text just get sucked into that one
| | 03:36 | frame, and there you go.
| | 03:39 | So this is actually what got
exported when you exported to EPUB.
| | 03:43 | Now what do you need to do is use the space
below to space these out, and it space below
| | 03:47 | specifically not space above.
| | 03:50 | When you export to EPUB InDesign CS6
ignores the space above measure it doesn't convert
| | 03:55 | that to a margin top measure, and I think
in previous versions it did, but there is
| | 04:00 | something arcane known as the box model
in CSS and something about boxes collapsing
| | 04:06 | if you have both a margin top and a margin
bottom. It's definitely for the CSS nerds
| | 04:11 | among us, but here is the gist of it don't rely on
space above to do your spacing, always use space below.
| | 04:18 | Here is what I would do is I would click inside this
paragraph, and I want this to be space down, right.
| | 04:23 | So I would go to the paragraph and go to
space below, and let's try 9 pica, so I'm going
| | 04:30 | to type 9p and instead of hitting Return I'm
going to hold Shift+Return which is another
| | 04:34 | little trick that keeps the focus in the field,
watch what I mean Shift+Return applies 9 picas.
| | 04:40 | But do you see how it still highlighted up here?
| | 04:44 | So I could type in 10 picas without having to
click in this field again, that's why keeping
| | 04:48 | the focus is so useful.
| | 04:49 | So if I thought you know what that's a little
too much that should be 8 picas, I don't have
| | 04:53 | to move my cursor at all I can just use the
keyboard 8p and then press Shift+Return instead
| | 04:58 | of Return or Shift+Enter,
well that's looks good.
| | 05:01 | All right, and let's do the same thing to
this one right here, so I'll come up here,
| | 05:05 | and I'll actually of course we don't want
space above right, we want to select this
| | 05:10 | paragraph and do space below.
So here it would say maybe 6p Shift+Return.
| | 05:16 | I think a little bit more, let's try 8p.
| | 05:19 | Well, that's good enough, and now we'll
export this to EPUB, and it's still going to only
| | 05:25 | export page 1, because we're going
to do it according to Articles Panel.
| | 05:28 | I'll click Save we can go ahead and override
the existing one, this time make sure to go
| | 05:33 | to the Advance panel and make sure that Preserve
Local Overrides is turned on, because we didn't
| | 05:38 | create styles for these, right.
| | 05:40 | So if you have this turned off it's going
to ignore our local overrides of space below.
| | 05:46 | And click OK, that's a little better
you see how it's getting pushed down.
| | 05:50 | And let's go to small so
we can see it little better.
| | 05:52 | Now it's spaced out.
| | 05:54 | Essentially that's what you're
going to have to do in your document.
| | 05:56 | Now the correct way to do this, and you'll
see as I talk in an upcoming video in this
| | 06:00 | chapter is you should never use local
override, you should always use styles.
| | 06:04 | So I have already done that to page2 here.
| | 06:07 | Now this is one frame and each one of these
is a style, if I open up the Paragraph Styles
| | 06:12 | panel you can see that I have given them
little names and they all have to do with the title
| | 06:15 | up here and these are all additional
title, so title, subtitle, and so on.
| | 06:19 | And all I did when I did this was after I
applied the local formatting, because these
| | 06:24 | are all body+ I just hold down the Option
or Alt key here and gave it a name, you know
| | 06:30 | like author name and so on.
| | 06:33 | So now it's a paragraph style, and when I
export to EPUB I can choose not to preserve
| | 06:40 | local overrides which will make my life a lot
easier when I'm editing the CSS and HTML files later.
| | 06:46 | But that means that there is nothing wrong
with using a local overrides to get the spacing
| | 06:49 | right as you're experimenting and don't
forget to use the Articles Panel to help you just
| | 06:53 | work with one page at a time, but after you
have it set convert these into actual styles
| | 06:59 | and save that in your final InDesign file.
| | Collapse this transcript |
| Cleaning up text with Find/Change and the FindChangeByList script| 00:00 | Now depending on the state of your
InDesign layout, you may have a lot of clean up to
| | 00:05 | do or maybe just very little.
| | 00:06 | There are two kinds of cleanups that I
want to address in this video, and I will show
| | 00:10 | you how to clean them up manually and also
automate some of your work with a free script
| | 00:15 | that gets included with InDesign.
| | 00:17 | So the first thing that we want to clean up
are runs of returns and spaces and tabs.
| | 00:22 | These are normally completely ignored by a
web browser, which as you know most EPUB readers
| | 00:27 | are essentially reading a website inside your
EPUB. And that's why it's a good idea to always
| | 00:31 | work with hidden characters showing as I have
here, so under Type, hidden characters are showing.
| | 00:36 | We have some paragraphs separated by double
returns, this one by triple return, and then
| | 00:41 | this gets a whole bunch of tabs
and then this is a bunch of spaces.
| | 00:45 | So you don't need to do anything with this
document, I am just showing you what's going
| | 00:48 | to happen when you export this to EPUB,
which I will go ahead and do right now.
| | 00:51 | I will just press Command+E or Ctrl+E, we
are going to export it out to the Desktop,
| | 00:56 | you don't even need to save your documents
before you export them to EPUB, I love that.
| | 01:00 | We will use all of the default settings.
| | 01:04 | Now we can turn that on, it makes
some difference really. Click OK.
| | 01:08 | So here is the result.
This is kind of interesting.
| | 01:10 | I believe this is slightly different
than previous versions of InDesign.
| | 01:14 | The empty carriage returns are
maintained, that is I believe different.
| | 01:18 | What is ignored are runs
of tabs and runs of spaces.
| | 01:22 | A run of tabs is converted to one space.
And a run of spaces is converted to one space.
| | 01:28 | That's normally what
happens with a web browsers.
| | 01:30 | Now I investigated this and found that in
InDesign CS6 when you have an empty Carriage
| | 01:35 | Return, it's converted to a non-breaking space,
and I think we are familiar with non-breaking
| | 01:40 | space characters in InDesign.
| | 01:41 | And non-breaking spaces are maintained and honored by
EPUB readers and browsers, so something to keep in mind.
| | 01:49 | But personally I think it's the wrong way to go.
| | 01:51 | You would never want to space things out
vertically with a bunch of empty carriage returns.
| | 01:55 | You want to get rid of those and instead
use styles with space below to find in them.
| | 02:00 | Remember I said space below, because above is
ignored when you export to CSS in InDesign CS6.
| | 02:05 | So let's close this up and take a look at
an actual document, and there is that text
| | 02:12 | that I copied and pasted.
| | 02:13 | So in this document, let's zoom in, this
is just four pages from that longer book.
| | 02:17 | We have a couple of instances of some
problems with spacing and runs, and the first thing
| | 02:22 | we need to do is turn on Show Hidden
Characters because I can see there is too many spaces
| | 02:28 | here, and over here we have some
instances of carriage returns and tab runs.
| | 02:35 | And so I would recommend the first thing
you do is clean up your document of all these
| | 02:39 | kind of things and other things like
double hyphens instead of em dashes and so on.
| | 02:43 | You can do this manually with Find/Change.
| | 02:46 | So you can go to Edit, choose Find/Change,
and you can search for a Period followed by
| | 02:54 | two Spaces and replace it with a Period followed
by one Space, and you want to search the document,
| | 03:00 | Find, it found that one, Change and so on.
You can do it that way, and you do the same
| | 03:06 | thing if you want to search for two
returns in a row and replace with one return.
| | 03:10 | You come here to the Find what field and from
the flyout menu just choose End of Paragraph
| | 03:15 | so it will put in the correct code for you.
| | 03:17 | You want to find two of those, and then
you want to replace it with them deleting our
| | 03:21 | previous Change to replace it with one.
| | 03:24 | Don't ever make the mistake of replacing with
none because you end up with no paragraphs. You
| | 03:28 | can always undo though.
| | 03:30 | And InDesign has some built-in Find/Changes
that can help you with this.
| | 03:33 | If you look under the Query menu, where
these are saved find changes, they already have
| | 03:38 | some of these filled in like, for example,
dash-dash to Em-dash. That would fix our problem
| | 03:43 | on Page 3, and you can move around in your
document while the Find/Change dialog box
| | 03:48 | is open and everybody realizes that.
| | 03:50 | I am holding down the Option or Alt key to pan my
page around so I can see it next to Find/Change.
| | 03:56 | So this Find/Change would fix this instance
here and throughout our document, which could
| | 04:00 | save a ton of time if we
have a 240-page document.
| | 04:03 | There is also this one here that's useful
Dash to En-dash, Multiple Return to Single
| | 04:09 | Return, all of these underneath the separator
bar are GREP Find/Changes which are much more
| | 04:14 | efficient than Text Find/Changes.
| | 04:15 | So if we choose Multiple Return to Single
Return, it's using this weird kind of Grep
| | 04:20 | code, but this would find every instance
of not just two in a row but also three in a
| | 04:24 | row or five in a row all in one shot
without having to repeat the Find/Change.
| | 04:28 | I am not actually going to run this right
now because I am going to show you an even
| | 04:31 | faster way in a minute, but I want to bring
up the fact that we have a few other kinds
| | 04:36 | of problems here, other than runs of white
space that you want to get rid of. And then
| | 04:40 | our characters that may have made sense for
your Print or PDF publication but don't make
| | 04:45 | sense for a flowable EPUB.
Let me zoom in to this paragraph a bit.
| | 04:50 | For example, we have this
interesting little character here.
| | 04:54 | This is a non-breaking space, and if this
document is being read on an iPhone, for example,
| | 05:00 | and the user increases the size of the type,
this could really mess up the line breaks.
| | 05:05 | You want to keep your document as flowable
as possible, readers understand that sometimes
| | 05:11 | names that are usually not broken at the
end of the line are not hyphenated, sometimes
| | 05:15 | need to be hyphenated
because of the nature of EPUBs.
| | 05:18 | So we have it happening here, and then we also
have it happening between every one of these words.
| | 05:24 | Another example of a character you might want to
get rid of are line breaks also known as soft returns.
| | 05:29 | So we have apparently the person did not
want the word compartments hyphenated, so they
| | 05:34 | inserted a line break right before the word to
force it to the next line, which you can get away with.
| | 05:39 | If you are printing or exporting to PDF but
this might make very little sense in EPUB.
| | 05:44 | Some of these characters might even
cause the EPUB to fail the validation check.
| | 05:49 | It's a good idea then to get
rid of these characters as well.
| | 05:52 | Now let me show you that automated way
that I mentioned of cleaning up your text.
| | 05:57 | InDesign comes with a free script called FindChangeByList,
that will automatically go through the active
| | 06:03 | story or the entire document and do
multiple kinds of Find/Changes in one swoop.
| | 06:09 | It'll find multiple returns and replace
with a single return, find multiple spaces in a
| | 06:13 | row and replace with a single space, all with
one double-click of the script, and this wonderful
| | 06:17 | little gem is called FindChangeByList.
| | 06:20 | Find/Change By List is inside your Scripts
Panel, which if you created your EPUB workspace
| | 06:25 | should be in here at some place, otherwise
go to the Window menu, down to Utilities and
| | 06:30 | choose Scripts, and I am
going to detach it from here.
| | 06:34 | Close this up a bit to show you that in the
Samples folder in Applications, if you open
| | 06:39 | up JavaScript folder, which both Windows and
Mac users, you'll see FindChangeByList.jsx
| | 06:47 | that means JavaScript.
| | 06:48 | FindChangeByList is a script that reads the
instructions in this text file and the beauty
| | 06:54 | of FindChangeByList is that you can
understand what this text file is all about, and you
| | 06:58 | can edit it, and you can customize it to
the things that you needed to find/change.
| | 07:01 | So the fastest way to open up this text file
is to right-click and choose Reveal in Finder,
| | 07:06 | or it will say Reveal in Windows Explorer,
and then double-click it to open it up in
| | 07:11 | your default text editor--and this is
actually unchanged from CS4 which I find interesting.
| | 07:19 | All this stuff in the beginning with two
slashes are comments so they are not actually run
| | 07:23 | by the script and essentially these are
instructions for you saying this is how this thing works.
| | 07:27 | And it's telling you that these
instructions here, the ones that are not commented out
| | 07:32 | are what FindChangeByList does.
So it does all of these different Find/Changes.
| | 07:37 | It does these grep Find/Changes, and then it
does these text Find/Changes, and the first
| | 07:42 | grep Find/Change that it does is it finds
this and changes it to this and then these
| | 07:47 | are the options that have been set, so it will
include footnotes it will include master pages and so on.
| | 07:53 | Then we have a little cheat sheet at the
end that says, what do these codes mean?
| | 07:56 | It finds all double spaces and
replaces them with a single space and so on.
| | 08:00 | So each one of these is a separate Find/Change,
the next one is it finds all returns followed
| | 08:05 | by a space and replaces
them with single returns.
| | 08:08 | All the way down to here, finds all space-dash-space,
replace with an en-dash. Find all dash-dash
| | 08:14 | and replace with an en-dash.
| | 08:15 | So you could just, back here in InDesign, double-click
FindChangeByList and all of those Find/Changes,
| | 08:21 | whether they are ton of them will be run
at once on the document, I love that, but we
| | 08:26 | are going to go even better.
| | 08:28 | In your exercise files, I have an edited
version of this for you that says put in your EPUB
| | 08:37 | scripts folder, so I had a video earlier in
this title that shows how to install scripts,
| | 08:41 | and I recommended that you add a folder called
EPUB scripts in your User folder for scripts.
| | 08:47 | And what I have for you is a FindChangeByList
for EPUB along with that text file that it
| | 08:53 | needs to go along with this.
| | 08:54 | And I have already installed
that in my copy of InDesign.
| | 08:58 | So here in InDesign, let's collapse application
and put them in User, there is our EPUB folder,
| | 09:06 | there is FindChangeByList-EPUB. So
what did I do, how did I edit this?
| | 09:10 | I am going to double-click it, I will just
right-click it, Revealing the Finder and then
| | 09:14 | double-click it, so there are my notes
up here, let's close that earlier one.
| | 09:21 | All I did was down here I added a few.
| | 09:23 | This is what you can do too, you just filed
the instructions and type them in yourself.
| | 09:26 | It's going to find all soft returns and
replaced with nothing, so it closes up the space, it
| | 09:31 | finds on non-breaking spaces and replaces
with a regular space and then if finds all
| | 09:36 | non-breaking spaces that are fixed with
different kind of non-breaking space and changes that
| | 09:41 | to a regular space. That's all.
| | 09:44 | If you want to edit that, and you want to
put it in a different location, if you edit
| | 09:48 | the one that comes with InDesign, you don't
have to do anything, you don't have to install
| | 09:52 | this, so you could just file those instructions and
edit the one that is up here in the Application folder.
| | 09:58 | But if you want to use mine, that's called
FindChangeList-EPUB then you have to use this
| | 10:02 | version of the script which has a slightly
different name and looks for this specific Find/Change list.
| | 10:07 | Anyway, let's go ahead and run that.
| | 10:09 | I will double-click and what's you know the
Document or the Selected Story we'll say the Document.
| | 10:15 | Boom. Love that, look at that. How fast is that?
| | 10:21 | So it got really of our non-breaking spaces,
it converted the dash-dash to an en-dash,
| | 10:25 | got rid of the runs of returns and
so on throughout the entire document.
| | 10:29 | Before you export to EPUB and run into
headaches with non-breaking spaces and runs of returns
| | 10:35 | and so on, make sure you clean it up in
InDesign first before you export, and you can do it
| | 10:40 | manually with Find/Change or
use this nifty little script.
| | Collapse this transcript |
| Converting local formatting to styles| 00:00 | Now let's talk about styling text.
| | 00:03 | I can tell you that probably one of the most
frustrating aspects of exporting from InDesign
| | 00:09 | to EPUB is managing the formatting of your text.
| | 00:13 | Now, we're going to start with
formatting 101 in this video.
| | 00:17 | But in upcoming videos, you'll see that I'll
be coming back to talking about working with
| | 00:21 | styles and formatting and workarounds.
| | 00:24 | The thing is that InDesign
is meant for print and PDF.
| | 00:28 | And the engineers are struggling and working as hard
as they can in getting it to comply with CSS as well.
| | 00:34 | But sometimes what works for print and what works
for InDesign doesn't work for CSS. What is CSS?
| | 00:41 | That is a Cascading Style Sheet.
| | 00:42 | That is formatting 101 as that all
of your formatting that you have applied to
| | 00:48 | text, whether it's local formatting or via
styles and paragraph styles and character
| | 00:53 | styles, can be converted to
styling information for the EPUB.
| | 00:57 | And since EPUBs are websites, websites
are formatted with cascading style sheet.
| | 01:03 | It's like a stylesheet document to which the
actual document, the document that contains
| | 01:08 | this text links to.
| | 01:10 | And the CSS, when it sees this
here, and I will say oh. Subhead.
| | 01:16 | And then it will look inside the subhead
style and say okay, well, it's Caslon Pro bold 14
| | 01:23 | and 15, and it will try to convert that into
what are called CSS attributes for a paragraph
| | 01:30 | class named subhead.
| | 01:32 | You'll be getting very
familiar with this from now on.
| | 01:35 | And anything that you can learn
about CSS will help you tremendously.
| | 01:39 | There are a number of CSS courses here at
lynda.com and wealth of free and low cost
| | 01:45 | CSS resources on the Internet.
But let's go back to the basics.
| | 01:50 | First, this story, and this is just a very
short like four page story, has been formatted
| | 01:55 | with a combination of actual
styles and local overrides.
| | 01:59 | So, for example, if I click inside this paragraph,
this is body-plain, and there are no character
| | 02:05 | styles applied here.
| | 02:07 | If I quadruple-click to select the entire
paragraph, suddenly this says Mixed because
| | 02:13 | apparently there is a character
style being applied here some place.
| | 02:16 | If we looked at paragraph styles, it
says body-plain with a plus-mixed override.
| | 02:21 | So, an override is when after applying a
paragraph style or a character style, you select some
| | 02:26 | of the text or you select the paragraph,
and you apply more formatting yourself from up
| | 02:32 | here in the Control Panel, or from the Character or
Paragraph Control Panels or from the Control Panel Menu.
| | 02:39 | In this second body paragraph, what I did
was create some italic text in both flavors,
| | 02:44 | one, as is with a Character Style.
| | 02:47 | So, if I come here to Character Style,
you can see that italic is highlighted.
| | 02:51 | I made a Character Style called italic and applied
it to this, and it says character style override.
| | 02:56 | I am going to double-click on Italics, you
can see it is simply Italics, that's all.
| | 03:01 | There is nothing else
specified here. It is just italic.
| | 03:05 | This text over here though has no Character
Style applied, it is a manually overridden
| | 03:09 | italic, like I just double-click the word and press
Command+Shift+I or Ctrl+Shift+I. I'm going to undo.
| | 03:15 | Couple other things of note in this document is
that we have a Paragraph Style that has a dropcap.
| | 03:21 | And if I select the dropcap, you can see
that it's actually using the dropcap, but it's
| | 03:25 | coming from the Paragraph Style.
| | 03:26 | I didn't actually select
the B and click dropcap.
| | 03:29 | This is the normal way that dropcaps are done.
| | 03:32 | Body First has been specified with a dropcap,
and it uses the character style called dropcap.
| | 03:39 | This paragraph also has space above, and so
does the subhead, so if I double-click subhead
| | 03:45 | and go to Indents and
Spacing, Space Before: 1 pica.
| | 03:50 | And while we're here, let's go
ahead and make a word bold too.
| | 03:52 | So, I'll say except and here you go.
Now, let's export this to EPUB.
| | 03:57 | Go to File > Export and choose EPUB or
press Command or Ctrl+E, the keyboard shortcut,
| | 04:04 | and save it out to the desktop.
Let's take a look at the settings.
| | 04:07 | We want EPUB 2.0.1, View the EPUB after exporting,
Image is fine, there are no images in this file.
| | 04:14 | Under Advanced I want you to make sure that
Include Style Definitions is turned on, and
| | 04:20 | Preserve Local Overrides.
| | 04:21 | So, that's going to actually maintain the
locally overridden formatting that we just applied.
| | 04:27 | Don't turn on Embeddable
Fonts yet and then click OK.
| | 04:30 | And there it is, it opens almost
immediately, it's a little file.
| | 04:33 | So, we have the large type of that first
subhead, we have the character style, application of
| | 04:38 | italic, and we have the manually
overridden application of italic as well as the bold.
| | 04:43 | Let me reduce the type size a little
bit, so you can see a little issue.
| | 04:47 | Both of these paragraphs had space
above, space before, specified for it.
| | 04:51 | And remember, InDesign CS6 ignores space before.
| | 04:54 | I talked about that in previous video because
it's trying to avoid any complications having
| | 04:58 | to do with what CSS does with the box model.
| | 05:02 | But don't be surprised if you lose
your space above or space befores.
| | 05:05 | You have to actually switch around your style
so that the paragraph above it has space below.
| | 05:10 | Space below is maintained in the CSS.
| | 05:12 | Now, the problem is that we normally do not
want to use manually overridden formatting,
| | 05:18 | even though it's maintained for the
most part in EPUB. Now, why is that?
| | 05:23 | Because let's take a look
at the innards of this EPUB.
| | 05:25 | I am going to switch over to the Finder, and here
on my desktop is the EPUB that we just exported.
| | 05:32 | We're going to take a peek inside this by
dragging and dropping it onto one of the programs
| | 05:37 | that I use to edit EPUBs called TextWrangler.
| | 05:40 | One of my favorite features of TextWrangler
is that it can look inside an EPUB without
| | 05:44 | you having to unzip it first.
TextWrangler is only for Mac.
| | 05:48 | If you're using a PC, then you might want
to use something like Notepad+Plus or any
| | 05:53 | other kind of program that can
open up what's called an archive.
| | 05:56 | That's what EPUB is it's an archive.
| | 05:58 | So, here are the two folders at the top,
and we're going to look at the actual HTML.
| | 06:03 | Let me make this a little larger.
| | 06:06 | The problem when you use locally formatted
text manual overrides is that InDesign needs
| | 06:11 | to make up what are called span classes,
character style override 3, there's a character style
| | 06:16 | override 2, and it surrounds this text, so
manual override italic, that's what looks
| | 06:23 | like italic in the EPUB.
It's surrounded by these CSS tags.
| | 06:28 | Every time that you apply locally
formatted text, it creates another class.
| | 06:33 | You can think of a class as a character style in
CSS ease, and this makes it very difficult to edit.
| | 06:39 | If you look at the CSS file, and go down past
the nice and neat ones for the paragraph style
| | 06:46 | names, we come to a list of all the overrides.
This was just in a four-page document.
| | 06:52 | You can imagine this can go on and on and
on forever, and if you're trying to do like
| | 06:55 | a book-wide Find/Change, you often have to
search for these character style overrides.
| | 07:00 | So, that's why most people who are
designing EPUBs from InDesign, the first thing they
| | 07:05 | do is get rid of all local
overrides by actually using Styles.
| | 07:10 | You can do that manually.
| | 07:11 | You can come over find, anytime that there
is a Plus symbol, and figure out what it is
| | 07:15 | that's causing the plus to appear, and
swipe over it and then create a character style
| | 07:21 | if necessary and apply it.
But you can also simply use Find/Change.
| | 07:25 | So, if I go to Find/Change from the Edit Menu,
I don't care about the text itself, I'm just
| | 07:30 | looking for the formatting.
| | 07:31 | I would search for any
kind of italic formatting.
| | 07:36 | I would make sure that it has the Character
Style called italic applied to it, and we'll
| | 07:45 | say Change All, found 3 hits.
Now, we don't have one for bold.
| | 07:51 | So, let's make one.
| | 07:53 | I'm going to double-click in this word and
then Option or Alt-click here to open up the
| | 07:57 | new Character Style dialog box.
| | 07:59 | We'll just call this bold, and it's just using
semi-bold, that's fine, and then we'll apply bold.
| | 08:05 | Now, let's export this to EPUB again.
| | 08:08 | But this time, we're going
to turn off Local Overrides.
| | 08:13 | So, we don't want to preserve Local Overrides.
We're going to make ourselves a cleaner file.
| | 08:19 | But we're going to maintain the formatting.
| | 08:22 | So, if we haven't had turned these into
styles, this formatting would be lost.
| | 08:26 | This text would be Roman instead of
italic, and we wouldn't see the bold here.
| | 08:30 | And if we take a peek at this in
TextWrangler, it is much cleaner. Look down here.
| | 08:37 | Now, it just says, this is italic,
and this is italic, and this is bold.
| | 08:41 | You don't have the big long
list of Character Style Overrides.
| | 08:44 | Now, you can imagine depending on the state
of your file, this could be a lot of work,
| | 08:49 | finding all instances of local
formatting and changing them to actual styles.
| | 08:55 | Not to worry, in the next video, I'm going
to show you how to use a free script to help
| | 08:59 | you automate this work.
| | Collapse this transcript |
| Using free scripts to automate text formatting| 00:00 | I'm a big fan of using free InDesign scripts
or even ones that I have paid for to help automate
| | 00:05 | a lot of tedious tasks. And definitely one of
the most tedious tasks in InDesign is prepping
| | 00:10 | an InDesign file for EPUB Export.
| | 00:13 | Big part of that is finding a locally formatted
text and creating a character style and applying
| | 00:18 | that so that we can choose the option when
we export to EPUB not to honor local formats.
| | 00:24 | And the reason for that I explained in the
previous video, because it makes for much
| | 00:27 | cleaner markup if you only use character
styles and paragraph styles and not local formats.
| | 00:33 | Now this sample document that I have
open has a ton of locally formatted text.
| | 00:38 | So, for example, if I click right here in this
italic text there's no character style called italic.
| | 00:44 | In Paragraph Styles you'll see the plus
symbol appear, and if I hover over it you'll see
| | 00:49 | that it says override it's italic.
| | 00:51 | And same is true for this bold italic, the same is
true for this small caps hover over this, small caps.
| | 00:59 | Now wouldn't it be nice if there was a way
that we could quickly get InDesign to put
| | 01:03 | like a glowing amber light behind every
instance of formatted text, so you don't have to keep
| | 01:07 | clicking in text and checking over here.
| | 01:10 | Well, not yet, but there is something that
comes close, and that is a free script by
| | 01:14 | the good people at in-tool.com, and
it's called show local formatting.
| | 01:20 | Now this is an interesting kind of script,
you actually need to install it and then restart
| | 01:24 | InDesign, so we're going to
just going to ahead and do that.
| | 01:27 | So I'm going to close this document, we'll
come back to it, go to your Scripts panel
| | 01:32 | it should be part of your EPUB workspace.
| | 01:34 | And if it's not there go to the Window
menu down to Utilities and choose Scripts.
| | 01:40 | We need to open up the Scripts panel,
because we are going to use it to navigate to where
| | 01:44 | we're going to put the script from in-tools.
| | 01:47 | It finds where it says application in your
Scripts panel and then right-click and choose
| | 01:52 | Reveal in Finder or Reveal in Explorer.
| | 01:55 | Now the Application scripts folder is actually in
the program folder, and this is the Script panel.
| | 02:01 | We want to put this script that I'm
including into startup scripts, which I have already
| | 02:05 | done, it's called ShowTextOverwrrides.jsx,
so just copy and paste or if you download
| | 02:10 | it from in-tool website, put it here and then
restart InDesign, so I'm going to quit and then restart.
| | 02:20 | We needed to restart because this script
adds a menu item, and if you look under the Type
| | 02:24 | menu, we will see, ah-ha!
Show Text Overrides, right.
| | 02:28 | So now you can open up a document and
choose this command, and you get this nonprinting
| | 02:33 | highlighting over
anything that is a text override.
| | 02:36 | So it's kind of like show hidden characters
and hide hidden characters, it's really great
| | 02:41 | to be able to quickly track
down where is the overset text.
| | 02:44 | Now you maybe wondering hey what about
this text down here, isn't this overridden?
| | 02:47 | But actually it's not, because if we go to
the Paragraph Style panel there's no plus
| | 02:52 | symbol, this is actually a nested
style inside the body list paragraph style.
| | 02:57 | If you look in the Character Styles panel,
you'll see that it uses bold leading as part
| | 03:01 | of the paragraph style.
| | 03:02 | So there is absolutely no problem with using
nested styles, GREP styles, nested line styles
| | 03:08 | because those all require the use of a character
style and all that is supported when you export
| | 03:13 | to EPUB those will all be marked up properly.
| | 03:16 | Now let's hide our text overrides, and we're
going to use another script to quickly create
| | 03:22 | the character styles and
apply them where necessary.
| | 03:25 | This script, I also include in the exercise
files in this folder, and you want to copy
| | 03:29 | and paste them into the good old EPUB folder.
| | 03:32 | There are actually three
scripts that I have added here.
| | 03:35 | The first one is called preptext.jsx, and
that PrepText is by this wonderful guy name
| | 03:40 | Jongware--that's his screen name of course--
he hangs out a lot on the indesignsecrets.com
| | 03:45 | forums, that's the log that I co-host.
| | 03:47 | And he wrote this a couple years ago in
response to somebody who said, I have all this locally
| | 03:52 | formatted text, and I need it to
automatically be character styles.
| | 03:57 | But the problem with running PrepText by
itself is that, well actually let's just do that.
| | 04:02 | I'm going to go ahead and double-click on PrepText,
and it's prepping the text, and now it's done.
| | 04:07 | So did it do anything new?
| | 04:08 | Well, let's see, let's go to the Type
menu and choose Show Text Overrides.
| | 04:13 | Nothing there buddy, let's Hide Text Overrides
and see what it'd do, I'm going to click here,
| | 04:18 | go to the Character Styles and look it added the
correct character styles, and it applied it as necessary.
| | 04:24 | So there it is it's actually bold italic this is
just I think a screen redraw problem there you go.
| | 04:31 | But what is the problem with
running PrepText by itself?
| | 04:35 | You'll see let's export this to EPUB, I'll
just press Command+E or Ctrl+E, put it right
| | 04:39 | on the desktop and just make sure that
you're using EPUB2 view EPUB after exporting and
| | 04:44 | in advanced you don't want to include local
overrides, of course it's a whole point of
| | 04:48 | this nor Embeddable Fonts for
now just Include Style Definitions.
| | 04:53 | Looks good, all the formatting is maintained,
but let's open this up in TextWrangler we
| | 04:58 | take a peek at some of the markup, so I'm
just dragging and dropping this over to the
| | 05:03 | TextWrangler which opens up archives
let's just peek inside and here is our file.
| | 05:08 | So what happened here is that we have a
paragraph style called subhead and subhead automatically
| | 05:13 | makes the paragraph bold.
| | 05:15 | But Jongware's PrepText script is actually
meant for when you first bring in a Word document,
| | 05:20 | for example, and it's all full of local overrides,
but you haven't applied paragraph styles yet.
| | 05:25 | So if this text is already have paragraph
styles applied to it and what it's done is
| | 05:29 | it's done a double hit, so this paragraph
style subhead for Flemish Painting, it said
| | 05:33 | oh that's bold, so let me apply the
character style called bold to it as well, and that
| | 05:38 | happens throughout here.
| | 05:39 | If you looking you're InDesign document
this was perfectly fine as the paragraph style,
| | 05:44 | it does not need a character style bold, you
may say oh let's hit plus symbol that's only
| | 05:49 | because they made the type larger I am
going to click the Clear overrides button to get
| | 05:52 | rid of overrides here.
| | 05:53 | Here we go just Option-click
or Alt-click here there.
| | 05:58 | So, there is subhead, we don't need bold.
| | 06:01 | If I change it to none it
would look exactly the same.
| | 06:04 | So that makes it little difficult to work
with, because these are superfluous tags,
| | 06:11 | so let's close this.
| | 06:12 | I presented this problem to a friend of mine
Peter Kahler who is a wonderful InDesign scripter,
| | 06:18 | and he didn't an add on for all of us that
works with Jongware's PrepText and what it does
| | 06:24 | is that it avoids the double hits.
| | 06:25 | I want to revert this file, and now we are as we
started with the local overrides are still here.
| | 06:33 | In the Scripts panel there are two versions
of what Peter wrote for us PerfectPrepText_Ask
| | 06:39 | and PerfectPrepText_Do.
| | 06:42 | If we double-click the do one it
automatically does what Jonware's script does, it actually
| | 06:49 | needs PrepText at the same level, so if you have it
installed it won't run, and it'll give you an alert.
| | 06:55 | And it applied and created the character
styles as before, but it did not apply the character
| | 07:00 | style to text that doesn't need it,
so we don't get that double hit.
| | 07:04 | So PrepText do, we'll just
go ahead and do all that.
| | 07:07 | Let's revert this and let
me show you PrepText ask.
| | 07:13 | What Peter did was he wrote this little
script that actually tears apart the document, it
| | 07:18 | removes all the paragraph styles that what
he calls neutralise, with an S in a European
| | 07:24 | fashion, and then you can run PrepText yourself
or any other kind of script that will automatically
| | 07:31 | find local formatting and create and apply
character styles, then you would come back
| | 07:35 | your run perfect PrepText ask again and say now
restore the text styles, that's kind of scary.
| | 07:40 | Now, I said you know can you just write me
one that does both of these automatically
| | 07:45 | that does the first thing, neutralizes the
styles then runs PrepText, then restores the
| | 07:50 | styles, and that what perfect PrepText does.
| | 07:52 | Anyway there are few scripts that took a
lot longer to explain than to actually run.
| | 07:57 | But I know you can see how useful these
scripts can be and helping you apply the right kind
| | 08:02 | of text formatting to your InDesign files.
| | Collapse this transcript |
| Mapping paragraph styles to CSS tags| 00:00 | I want to talk about a very cool feature that
InDesign CS6 has, it actually was added I believe in 5.5.
| | 00:07 | It's a little advanced for this title, but I
think that those of you who have been creating
| | 00:12 | EPUBs already from InDesign or who know a
bit about HTML or CSS or perhaps you're blessed
| | 00:18 | with a coworker who knows
a lot about HTML and CSS.
| | 00:22 | I think you'll be very
interested in this feature.
| | 00:24 | It's called mapping styles to CSS text.
| | 00:27 | Let's see what the problem is and why you
would use that feature to help solve the problem.
| | 00:32 | We have here very simple one-page document
or we don't have any local formatting, and
| | 00:36 | we have a few different paragraph
styles and character styles, okay.
| | 00:41 | Let's just go-ahead and export this to EPUB.
I'll press Command or Ctrl +E.
| | 00:45 | We'll going to export it right to the desktop.
| | 00:47 | I already have a file there that we're
going to replace that's perfectly fine.
| | 00:50 | We will leave everything at the default except here
we don't need a local overrides or embeddable fonts.
| | 00:56 | So just CSS, Include Style Definitions, okay.
| | 01:00 | And it opens up then there is our
EPUB, and that looks basically okay.
| | 01:03 | We have all the formatting that we had before.
But let's take a look inside, shall we?
| | 01:09 | I'm going to drag this and drop it
right on top of our friend TextWrangler.
| | 01:13 | So, we can peak at the files inside here.
| | 01:17 | The markup that InDesign applies
automatically works okay. It does work.
| | 01:24 | You saw how it worked in the EPUB.
And this would validate.
| | 01:27 | This is a perfectly valid
file that you could upload.
| | 01:29 | But if you ever need to crack it open and
start editing things like to add space above
| | 01:34 | or to do a fine change across all the
different chapters in a book to remove tags or add tags
| | 01:41 | or you know do anything to CSS or HTML,
then you'll find what the problem is.
| | 01:45 | And the problem is we have a lot
of markup that's not necessary.
| | 01:48 | Do you see how every paragraph is preceded
by not just the <p element tag meaning, this
| | 01:54 | is a paragraph, but also a class.
| | 01:57 | Your paragraph styles
become CSS styles called a class.
| | 02:02 | The thing is that a class in web design
is something more like a character style.
| | 02:07 | Usually, in the CSS file, the designer says
okay, anything that's called a P, a paragraph
| | 02:14 | would be defined as, and then they
would have some sort of listing here.
| | 02:17 | This here I call InDesign automatically
makes a default style for tables, a default style
| | 02:22 | for margin, and so on or like
here, here it's P right here.
| | 02:26 | These are just a bunch of
elements one after the other.
| | 02:28 | It's called a reset code, sort of
resets any defaults in the EPUB device.
| | 02:32 | And I'll be talking about that one later.
| | 02:34 | But essentially, each of
these are HTML elements.
| | 02:38 | And it's saying that whenever there's a
paragraph tag make sure that the margin and padding
| | 02:42 | and border-width are all 0, because apparently there
are some devices that add a margin or padding or zero.
| | 02:48 | Well, most people who do websites would
have a separate listing for the paragraph tag,
| | 02:52 | and I would say in my document all
paragraph tags have this level of first-line indent,
| | 02:57 | this size, this color, and so on.
| | 02:59 | But InDesign doesn't do that, instead it
copies what's in the definition for the paragraph
| | 03:05 | styles and makes a class for that paragraph.
| | 03:08 | So, we have one for basic paragraph, we
have one for body, we have one for subhead, we
| | 03:14 | have one for body plane.
This is called classitis.
| | 03:17 | I guess the closest equivalent to what an
InDesign user would be familiar with would
| | 03:21 | be is if you applied a paragraph style to
a paragraph, and then you made a character
| | 03:26 | style that had the same settings for font
and size and so on, and applied the character
| | 03:31 | style to the entire paragraph
on top of the paragraph style.
| | 03:34 | You know it's not really necessary,
and that makes things more cumbersome.
| | 03:38 | Ideally, we would have a
definition for paragraph in the CSS.
| | 03:42 | So that anything that's just a regular
paragraph doesn't need any of these classes.
| | 03:46 | When you do apply classes, it would be to
something like this, when there is a bit of
| | 03:50 | text inside of a paragraph
that's different from the rest.
| | 03:53 | So, you see this is like a
proper application of a class.
| | 03:56 | It's more like a character style.
| | 03:58 | Now, let's say that you do have a CSS file
where you have defined your default settings
| | 04:03 | for paragraphs, your default settings
for lists, for other kinds of things.
| | 04:08 | And you want InDesign to map your
paragraph styles to those settings.
| | 04:13 | That's what you can do in InDesign CS6.
So, let's take a look.
| | 04:18 | We'll just map one of these styles.
| | 04:20 | Let's say that this pull quote, I'll say that
we have a style in our external CSS that defines
| | 04:26 | a setting for whenever we have a Pull
Quote except it calls it a Block Quote.
| | 04:29 | So, what we want to do is we want to force
InDesign when it exports this file to EPUB
| | 04:34 | to tag this paragraph and any other paragraph
style with Pull Quote with the tag called Block Quote.
| | 04:41 | To do that, you edit the
Pull Quote style option.
| | 04:44 | So, I'll just come over here, right-click
and choose Edit "pull quote", and then you
| | 04:47 | go all the way down to Export Tagging.
| | 04:49 | You'll see the default, the Automatic for
EPUB and HTML exports is that it's going to
| | 04:55 | convert the Pull Quote to the Tag P with the class
Pull Quote and here is the definition for pull quote.
| | 05:01 | And it goes on and on and on.
| | 05:02 | There is a lot of information that
puts here that's really not necessary.
| | 05:05 | What you can do is overwrite this.
| | 05:07 | Just go to the Tag Field and
choose one of these Styles.
| | 05:11 | So, you may be thinking, but you
know I don't want it to be a header.
| | 05:14 | These are heading levels.
| | 05:16 | I don't want it to be plain paragraph, and so how
about all the other elements that are available to me?
| | 05:21 | Well, what you can do and what a lot people
don't realize is that, this is completely editable.
| | 05:25 | So, you can put in one element,
and we want it to be block quote.
| | 05:29 | Now, if you happened to have defined a class
for this particular kind of style, you could
| | 05:34 | say blockquote blue or blockquote yellow or
however you did it, but if we can just leave
| | 05:39 | it here as block quote, once you actually overwrite
the Automatic then all of the details get removed.
| | 05:45 | This means that when you export it in the
HTML file, the paragraph will be surrounded
| | 05:49 | by the blockquote tags.
| | 05:51 | But in the CSS file we won't have
any attributes defined for block quote.
| | 05:54 | So, this feature is designed to work in
tandem with a custom external CSS file.
| | 06:00 | Let's see what happens if we
don't have one of those guys.
| | 06:02 | I just went ahead and mapped the
style to the CSS tag blockquote, click Ok.
| | 06:07 | Let's Export this to EPUB, same
name is fine, same settings, click Ok.
| | 06:14 | And now we don't see the blue, italic and
indented, because it has been mapped to a
| | 06:18 | style for which we don't have a definition yet.
This was the text right here.
| | 06:22 | It was an immense work, so it
just looks like the rest the text.
| | 06:24 | In other words, it's the
default formatting for text.
| | 06:27 | And now, I have included in the
exercise files, a CSS file right here.
| | 06:37 | And let's open this one in TextWrangler.
| | 06:40 | So, it has a lot of the information from the
default InDesign file whatever InDesign exports.
| | 06:47 | But I also cleaned up some of
the formatting for paragraph tags.
| | 06:51 | I changed the color for subheads,
and I added space above, margin top.
| | 06:57 | And then here, I added a
definition for a block quote.
| | 07:00 | What we're going to do when we export this
to EPUB is tell InDesign to use this style
| | 07:04 | sheet not the one that it
usually creates on its own.
| | 07:08 | So, I'll go back to InDesign, we still have
this map to blockquote, go to Export to EPUB,
| | 07:14 | we'll save over the existing
one and then the Advanced section.
| | 07:17 | You want to turn off Includes Style
Definitions, and add your external style sheet.
| | 07:23 | So, I'll go ahead and click Add and locate the
external style this one right here, ourbasic I called it.
| | 07:31 | And let's export that one
to see what it looks like.
| | 07:33 | So, the text that was tagged with
blockquote is now taking on the attributes as defined
| | 07:38 | in our stylesheet, in our CSS file.
| | 07:41 | The subheads have regained their space
above and they are in different color.
| | 07:45 | The idea is that you might be publishing a
series of textbooks or regular books or whatever,
| | 07:50 | and you're going to be using the
same CSS and every one of those EPUBs.
| | 07:54 | Why not tweak the CSS to get it
looking exactly how you'd like.
| | 07:57 | And then use that CSS for every
one of your exports from InDesign.
| | 08:01 | You will probably need to map your
paragraph styles to those CSS tags that you and your
| | 08:07 | developer have created.
| | 08:09 | But doing so means a lot less work down
the line after you export this to EPUB.
| | 08:13 | It's a great new feature.
| | Collapse this transcript |
| Preparing tables for optimal conversion| 00:00 | The good news is that with InDesign CS6 you
get much more information in your tables when
| | 00:06 | you export to EPUB than you ever did before.
| | 00:08 | I have here a document with two versions of
the same table, except one has little bit more
| | 00:14 | formatting than the other. And also, this one
on page one has been formatted manually, so
| | 00:20 | this is all basic paragraph overrides, it
is using the Table setting. Let me select
| | 00:26 | the Table, and we zoom in a bit to
make a little easier to select.
| | 00:29 | I will just right-click and choose Select >
Table, and if we look up here under Table
| | 00:37 | Options, it has Alternating Fills, but it
has not been saved as a Table Style, there
| | 00:44 | is no cell styles. Let's actually open that
up, if you go to the Window menu and go down
| | 00:49 | to Type & Tables, choose Table, you get a
grouped panel that has Table settings that
| | 00:55 | you normally just use right up here in the
Control Panel when you have something in the
| | 00:59 | table selected but also a Table Styles and
Cell Styles. And if you work with a lot of
| | 01:02 | tables in your documents, you probably
want to add them to your EPUB workspace.
| | 01:07 | I talked about creating a custom workspace
for working with EPUBs in a previous video.
| | 01:11 | I don't, so they are not part of my workspace.
| | 01:14 | However, in this table here on page 2, it
is using a table style called my table and
| | 01:22 | inside the cells, if I click inside for some
data, and then I click Paragraph Style, you
| | 01:27 | can see, it's using table body, this is years,
this is table row label, someone it has a
| | 01:34 | header row, and if I look at Cell Styles and
click here and then press the Escape key which
| | 01:39 | toggles between selecting a cell and
selecting all the content of a cell, love that tip,
| | 01:44 | press the Escape key.
| | 01:45 | When the cell is selected, it may look
like there is no Cell Style applied to it, but
| | 01:49 | it kind of works like nested styles
does in paragraphs and character styles.
| | 01:54 | In other words, if there is a cell style
applied here because of the table style, it will say
| | 02:00 | None, here, but the name of the
cell style appears down here.
| | 02:03 | So yes, there are cell styles applied if they
are clicked here, press the Escape key, that's
| | 02:08 | first column and so on.
| | 02:09 | I am telling you this, because as you have
probably understood by now throughout all
| | 02:13 | these videos, you really don't want to use
local formatting, you want to use actual styles
| | 02:19 | not just for paragraphing characters but also for
tables and the tables and the cell styles themselves.
| | 02:24 | If you want to learn more about how to create
table styles, there are plenty of videos here
| | 02:28 | on lynda.com in the InDesign Essentials by
David Blatner of the InDesign Up and Running
| | 02:33 | and so on take a look at those.
| | 02:35 | But let's go ahead and export this to EPUB so
I will go to File > Export and simpletable-cs6,
| | 02:44 | save it out there on the desktop, I am going
to accept the defaults, for General, for Image,
| | 02:50 | for Advanced, I always turn off Preserve Local
Overrides, we don't need the Embeddable Fonts and click OK.
| | 02:56 | It immediately opens up in Adobe Digital
Additions which is my default EPUB reader on this Mac,
| | 03:01 | but ADE lies, so don't
freak out when you see this.
| | 03:04 | I suppose if somebody is actually going to
be using ADE to read your book, then it's
| | 03:08 | something that you need to be worried about,
but even though I am using the Labs version
| | 03:13 | of Adobe Digital Editions, the preview version,
it is not showing us colors for cells correctly.
| | 03:18 | The way that InDesign exports the CSS is not
a way that ADE understands for table cells.
| | 03:24 | So you need to really preview your tables
in a different eReader than ADE if you want
| | 03:29 | to get an accurate preview of
what it's going to look like.
| | 03:31 | I have mentioned a few different EPUB
readers that are available in an upcoming video, so
| | 03:35 | I will talk about a few more.
| | 03:37 | One of your convenient
proofing device is Firefox.
| | 03:40 | If you have loaded the EPUB reader extension
which I have already done, so let's jump over
| | 03:45 | there with that extension mode, and you
can go to Firefox's File > Open File command,
| | 03:52 | locate the EPUB and then it will
open up its own little reader here.
| | 03:57 | You can see now here is the table exported
without local overrides so, it looks like
| | 04:02 | a plain old table and here is
the one that has been styled.
| | 04:06 | I want you to note a few things in these tables.
| | 04:08 | First of all, it did support the merged columns, so
the header row is a merge columns and understood that.
| | 04:15 | If we look in the CSS, you could see that it
uses the HTML code for that which is called
| | 04:20 | Column span, so it uses a column span. So that's no
problem if you choose to merge cells in InDesign.
| | 04:26 | The width of the table and the width of the
columns are not carried trough to the EPUB,
| | 04:30 | they simply collapse.
| | 04:31 | Here, we will see a little bit more space
because we have defined insets for some of
| | 04:37 | the cells, and that is converted
to the equivalent CSS for tables.
| | 04:42 | Let's jump back to InDesign and take a look.
| | 04:44 | So we are on page 2 and the
cell style is first column.
| | 04:48 | If I right-click on first column and choose
Edit and go to Text, you can see that it has
| | 04:54 | a Cell Inset set for 6 points top
and bottom and one pica on the left.
| | 05:00 | The Vertical Justification is also
brought across so this is set to Align Centered.
| | 05:05 | Now InDesign the table data in new cells
looks quite different than it does in Firefox.
| | 05:10 | So what happen here?
| | 05:12 | Well, as a experienced InDesign user, I
know that when I am working with tables, and I
| | 05:17 | have numbers that I can automatically type
inside of a table row, let me make a new row
| | 05:23 | and just click right here and say more info
and tab, if I said hello, there appears to
| | 05:30 | be some sort of alignment happening.
| | 05:32 | If I said, 239.33 so you see there is a decimal
alignments happening, but it's not really set that way.
| | 05:41 | It's sort of like an automatic
thing that happens with tables.
| | 05:43 | Every table cell has one setting for an
automatic decimal alignment, and if I clicked here and
| | 05:49 | press Command+Shift+T to open up the Tabs
panel, you can see there is a special little
| | 05:53 | icon here indicating where the
decimal tab will align in this cell.
| | 05:57 | So again that's an InDesign specific kind of
setting, and it's not really carrying through.
| | 06:01 | Now CSS does have a facility to align data
within columns with align decimal, but it's
| | 06:08 | something you really need to be set up in
the CSS, it won't come through from InDesign.
| | 06:11 | But if I selected all of these cells, and
I got rid of the tab and then in the basic
| | 06:19 | cell style, I edited it to have--not in the
cell style in the Paragraph Style--well I
| | 06:26 | guess it could have done an inset, in the cell
style as well but let's say for the Paragraph
| | 06:31 | Style, I edit Table Body to have a Left
Indent of let's say 2 picas, and we want to make
| | 06:40 | sure that all of these are table body, good,
now let's go ahead and export this to EPUB
| | 06:45 | again. So I am going to replace the existing
one, and here it is in Adobe Digital Editions.
| | 06:53 | You can see that now we have
a little bit more space here.
| | 06:55 | If I switch over to Firefox to refresh, you
actually have to close this and then Refresh
| | 07:01 | the source right here.
Now we have more room.
| | 07:05 | So if you need to fiddle around with the
amount of spacing within your cells, there is some
| | 07:10 | kind of work that you can do in InDesign just
don't rely on the automatic decimal tab alignment
| | 07:14 | that comes with tables in InDesign.
| | 07:16 | You have to use Left or Right Indents or you
have to use Cell Insets in the Cell Styles.
| | 07:22 | For complicated tables like this one, this
is one big complicated table with the graphic,
| | 07:27 | I would not ever try to covert this to an EPUB.
| | 07:31 | If you have something like this, you are
going to run into all sorts of problems because
| | 07:34 | remember some people are
reading your EPUBs on an iPhone.
| | 07:37 | There is no way they are
going to able to see this.
| | 07:39 | In the case of a complicated table,
you do have a number of other options.
| | 07:43 | First, you can do what's
called linearizing the table.
| | 07:47 | That essentially means breaking it down and
reformatting as something that is much more
| | 07:51 | flowable EPUB friendly, a list of paragraphs
with bullets, you could take an eight column
| | 07:57 | table, break it down into four
separate tables with two columns each.
| | 08:01 | In other words, don't use this table, but convey
the same kind of information in a different way.
| | 08:05 | Now that's a lot of work but if especially
if you are going to be doing some mega table
| | 08:09 | for Kindle edition, they specifically recommend,
that's what you do with complicated or multiple
| | 08:15 | column tables, tables that have more than
three or four columns, that you linearize it.
| | 08:19 | Another thing you could do would be to
convert the table to a graphic, and you remember how
| | 08:22 | to do that from the previous video,
I could just select this whole thing.
| | 08:27 | if there is more than one item, which I do
have a graphic along with the table, I would
| | 08:31 | group it and then go to the Object menu,
Object Export Options and choose to Rasterize it
| | 08:38 | when I exported it.
| | 08:39 | And you want to keep the Size Relative
to Page Width, that way the whole thing will
| | 08:43 | fit even though it will be scaled down
tremendously in the EPUB, but when somebody double taps
| | 08:47 | it in iBook at least it will expand
to fill the screen as much as it can.
| | 08:52 | There is a similar way to handle this,
that's a little bit more advanced, and that's to
| | 08:55 | leave it as a table but to isolate it in
it's own document as it is here, right now this
| | 09:00 | is the only page in the entire document, export
this to HTML and then in the body of the EPUB,
| | 09:06 | you would add a link to that HTML file.
| | 09:12 | See more complicated table here and make that
into a link and then in the actual EPUB, you
| | 09:20 | would have to edit it to create
something called a non-linear link.
| | 09:23 | Again, it's a little bit more advanced, and
I'm going to try and cover it in an upcoming
| | 09:26 | chapter but essentially what that does is
lets people click that link or tap that link,
| | 09:31 | and it will open up that separate HTML file
as a different document overlaying the EPUB,
| | 09:37 | and when the person is done looking
at it, they can tap the done button.
| | 09:40 | Again, that only works with
iPad in the iBooks application.
| | 09:45 | And I know that the topic of this video is
Tables but everything I have said is for complex
| | 09:49 | tables, but it's also true that complex
illustrations like timelines and things like that you may
| | 09:53 | have created with the combination of graphics
and InDesign art and text. If it's too large
| | 09:57 | and too complicated to comfortably flow and
be readable in an EPUB reader, then you're
| | 10:02 | going to have to do something with it.
| | 10:04 | Make it simpler, turn it into
a graphic, one of those two.
| | 10:07 | But for the vast majority of your other
tables the main rule is to always use Table Styles,
| | 10:12 | cell styles, and Paragraph Styles, which make your
tables look much better in the resulting EPUB
| | 10:17 | and only need a little bit of
tweaking to look really great.
| | Collapse this transcript |
| Adding a custom TOC as the first page of an EPUB file| 00:00 | Here we're looking in our History of Art eBook
with a working navigational Table of Contents.
| | 00:05 | And if you remember from the previous video when I talked
about how to create this navigational Table of Contents.
| | 00:11 | I said that you use the Table of Contents
feature in InDesign and so if you want to
| | 00:16 | review that you can go and watch
that video and then come back here.
| | 00:19 | What I want to talk about in this video is how
to add an internal or HTML Table of Contents,
| | 00:25 | and maybe more than one.
| | 00:26 | So let's review what a
navigational Table of Contents is first.
| | 00:29 | It's something that you can show or hide in
the eReader software or in the eReader device.
| | 00:35 | Here in the Adobe Digital Editions, you
show and hide it from this icon up here.
| | 00:40 | So click it once to hide it,
click it again to show it.
| | 00:43 | In the navigational Table of Contents, you
can click on an entry, and that will jump you
| | 00:48 | to where that entry is in the eBook
that's like a linked Table of Contents.
| | 00:53 | But a lot of readers don't like to see all
of this chrome when they're concentrating
| | 00:57 | on reading a book so they hide
the navigational Table of Contents.
| | 01:02 | All right let's go to Medium so we can see
two-page spreads. The thing is that a lot
| | 01:06 | of times in readers want to quickly find
another entry in your book and so they'll immediately
| | 01:12 | drag to the left looking for the TOC this
happens all the time, and there is none.
| | 01:16 | There is no TOC within the eBook they have to
remember oh yeah I have to click this thing to open it up.
| | 01:22 | And if you are in an unfamiliar piece of
software or like you have never used iBooks
| | 01:27 | then finding the little icon which is usually
hidden to show the navigational Table of Contents
| | 01:32 | can be a challenge.
| | 01:33 | So I think it's always a kindness to
include an actual linked TOC within the HTML file.
| | 01:41 | And you do that in InDesign by
using our friend, yay, the TOC feature.
| | 01:47 | But this time, we are actually
going to place it in our document.
| | 01:49 | We are looking at a small section of History
of Arts, and we have an empty first spread,
| | 01:55 | and then it goes into the books, so here is a
place right here are just waiting for the TOC.
| | 02:00 | I'll go to the Layout menu, go down to
Table of Contents and the TOC Style that I want
| | 02:05 | is the same one that I use for the nav TOC in
this case, that I named EPUB, and it includes
| | 02:11 | the chapter title and any subtitle.
| | 02:14 | The paragraph style that is going to use one
I place this will be a Paragraph Style I have
| | 02:18 | already created called TOC 2, often you don't
want to use the same Paragraph Style for the
| | 02:23 | Table of Contents listing as those paragraphs
are actually being used throughout the books.
| | 02:28 | Like we don't want the chapter title formatting
to be used for the actual Table of Contents.
| | 02:33 | Click OK, and there it is.
| | 02:35 | Now it automatically includes numbers but
watch this when I export this to EPUB, we
| | 02:41 | will Replace the existing one, we still
have our nav TOC but when we move forward, ah-ha!
| | 02:48 | Look at that the numbers have disappeared.
| | 02:50 | Yeah so InDesign CS6 is smart enough to
remove the numbers in any tab leaders, and it just
| | 02:56 | includes the links to those chapters.
| | 02:59 | So if I'm in the middle of reading the
scintillating story, and I want to quickly jump to another
| | 03:03 | section I can just drag to the
front and to oh, yeah, there it is.
| | 03:07 | I don't have to remember
how to show and hide this guy.
| | 03:10 | Now it's very useful but not quite automated
as what I just showed you is the ability to
| | 03:15 | create two different TOCs, for example, one
TOC is the navigational TOC and another TOC
| | 03:22 | is the HTML TOC, here they're exactly the same.
| | 03:25 | But say that I wanted to add more sections
here or have a section called list of advertisers,
| | 03:31 | list of illustrations and list of charts
and tables something like that. How can you do
| | 03:35 | that? I'll show you what you can do in
InDesign but actually you'll probably have better luck
| | 03:41 | by actually hand editing this TOC in
whichever EPUB eReader you're going to be using later.
| | 03:47 | You can edit either the HTML TOC or you can
also edit the navigational TOC, and you will
| | 03:53 | learn how do both in an upcoming video, but
for now I have created a quick example of another
| | 03:58 | list that you might want.
| | 03:59 | So in this EPUB we have a bunch of nice
illustrations, and I created another TOC Style.
| | 04:06 | Let's comeback here under Layout, go to Table
of Contents, another TOC Style called Figures.
| | 04:12 | And all it does is it collects the location
of all of the Figures in the book using the
| | 04:18 | Paragraph Style that's used for
the captions of each of the figures.
| | 04:21 | Now I didn't go to the trouble of creating
a separate style just for how it's going to
| | 04:25 | look inside the eBook I'll
just use body for that for now on.
| | 04:29 | By clicking OK here that loads the TOC into
my cursor because I'm actually in that Table
| | 04:35 | of Contents command, not just the Table Of
Contents style, and I think that I'll put
| | 04:39 | it maybe right here.
| | 04:41 | Like there is another text frame back there
that I don't want, so I'm going to get rid of that.
| | 04:47 | This formatting and the heading might not
be to your test but let's see what happens
| | 04:51 | when I export this thing to EPUB.
| | 04:54 | So I'll press Command+E or Ctrl+E, we
still want to use TOC Style EPUB, we don't want
| | 04:59 | this to be in the navigational TOC, so
we're not choosing Figures, we're just going to
| | 05:03 | choose the one I created for the
EPUB, and so that came through fine.
| | 05:08 | Let's hide that So what happened is that
InDesign can only support one kind of linked internal
| | 05:16 | HTML TOC, and in this case, it's using our
EPUB one, the first one that we did that we
| | 05:21 | also specified for the navigational TOC.
| | 05:25 | This is actually a linked TOC but the
links were being ignored as is the text. So when
| | 05:30 | you have additional custom TOCs that you want
to add you're going to have to link them yourself.
| | 05:36 | Go back to InDesign.
| | 05:37 | Let's take a look at this frame inside the
story editor which gives us the clue as far
| | 05:42 | as the internal linking is concerned that
go to Edit and choose Edit in Story Editor.
| | 05:47 | You can see that these indeed are
linked to their locations in the document.
| | 05:52 | Just like in the regular TOC here I'll click
in our Contents one and go to Edit in Story
| | 05:57 | Editor looks the same.
| | 05:58 | Let's see when you export to EPUB InDesign only
supports one, and that would be a great feature request.
| | 06:03 | So the answer is that you're going
to have to link to stuff manually.
| | 06:07 | But first you're going have to clear out these
existing links because that will just confuse everything.
| | 06:12 | These links are coming from you know being
auto generated by TOC so it's still live,
| | 06:16 | I guess you'd call it, because if we changed
one of these Figure captions, we could update
| | 06:21 | this, and it would update
the TOC in the document.
| | 06:24 | But now we're going to break its link to the
document we're going to turn into plaintext
| | 06:28 | that we can then link.
| | 06:29 | There's lots way to do that one of the way
that I like simply to cut and paste this into
| | 06:34 | a text editor and then place that replacing
this, or I'll just take this story and export
| | 06:39 | it to RTF and then get rid of this and then
place the RTF file so with the exact same text maintaining
| | 06:51 | a lot of same formatting but if we look at
this in the story editor, all those links
| | 06:55 | are gone so we have cleaned it up.
| | 06:57 | Now from this point on, you would proceed by
just creating hyperlinks or cross references
| | 07:02 | to the correct locations.
| | 07:03 | Like if we want to do a cross reference and
open up my little Hyperlinks and cross references
| | 07:08 | panel here, I could select the first one
where I'm going to link to figure one landscape
| | 07:13 | with thunderstorm, create a new cross reference,
find the Figure, and there is Landscape of
| | 07:20 | Thunderstorm and link.
| | 07:23 | Now if you look at this back in the story editor,
we have now create a cross reference link to that.
| | 07:28 | If you want to learn more by creating cross
references and hyperlinks take a look at David Blatner's
| | 07:33 | InDesign CS6 Essentials but you can see the
you'd essentially be creating these by hand.
| | 07:38 | I know it's kind of tedious but now at
least when we export to EPUB, we should have at
| | 07:47 | least one link that's live, so let's take a look
there we go Figure Landscape with Thunderstorm,
| | 07:52 | and it brought us right there.
| | 07:54 | The lesson here is that it's quite easy to
include a linked Table of Contents within
| | 07:59 | the HTML file, simply place
the TOC right in the document.
| | 08:03 | If you want to do anything fancier than that
if you want to edit this if you want to create
| | 08:08 | additional Table of Contents that are linked,
you're going to have to break their link to
| | 08:12 | the document itself by exporting out to
RTF and placing back in and then hand linking
| | 08:17 | via Hyperlinks or cross references or you
could always edit the EPUB files themselves.
| | Collapse this transcript |
| Including fonts in an EPUB| 00:00 | If you want to embed the fonts that you're
using in your InDesign file in the final EPUB
| | 00:05 | it's actually quite a simple procedure,
but it goes from simple to suddenly this huge
| | 00:09 | drop-off to very complex in a matter of seconds.
So let me show you what is simple, and then
| | 00:15 | we'll talk a little about the complex part
in a few minutes, but before we even begin
| | 00:20 | talking about using your font in your EPUB
you have to make sure you have the right to
| | 00:23 | use them that they're embeddable.
| | 00:26 | Now when you export to EPUB, and you turn
on the option to Include Embeddable Fonts
| | 00:30 | then InDesign checks an internal flag in the
font just like when you export to PDF if there
| | 00:34 | is some problem with the fonts InDesign will say
sorry can't embed this it's not allowed to be embedded.
| | 00:40 | In this document the simple one-page
document I'm using a bunch of font's that can't be
| | 00:44 | embedded a few of them are from the Adobe
font folio the type library, so we have the
| | 00:50 | Myriad Pro and Garamond and one of them is
this font called Jacques Francois Shadow
| | 00:56 | that I downloaded from a website that
offers a whole bunch of great fonts that you can
| | 01:00 | download and use for free and embed
according to the license, and I'll show you a few of
| | 01:04 | those different websites we can
download these fonts later on in this video.
| | 01:08 | But so assuming that you do have the
right to embed the font then all you need to do
| | 01:12 | is export this thing to EPUB, so I'll press
Command+E or Ctrl+E, we're going to export
| | 01:17 | it to the desktop. It makes no difference if
it's EPUB2 or 3 just go right here to Advance
| | 01:23 | and make sure that Include Embeddable Fonts
is enabled and click OK. And here it is open
| | 01:30 | in Adobe Digital Editions, and you can
see it's using the same fonts that we use.
| | 01:34 | The second thing that you want to test is
to make sure that's the way that InDesign
| | 01:38 | embedded the fonts is
valid under the EPUB standards.
| | 01:42 | In earlier versions of InDesign you could
embed the fonts, but it wouldn't pass validation,
| | 01:46 | and I do talk about validation in more detail
later on in this title, but just briefly you
| | 01:51 | just need to drag and drop the EPUB one on
top of the validation checker that I have
| | 01:55 | here, and there you go no errors so that's good.
| | 02:00 | Now what so complicated about that?
| | 02:02 | Well, the problem is that in many cases
you're not going to be able to see these fonts on
| | 02:06 | the iPad or on the Nook or other
devices you really have to test.
| | 02:10 | I mean even here if I open up the same EPUB
with the EPUB reader extension in Firefox,
| | 02:18 | we loose at least this cool font up here,
and I believe this text is defaulting to the
| | 02:23 | generic serif and sans serif.
| | 02:26 | I can tell you though that it's very likely
that you will not be able to see these fonts
| | 02:30 | on the iPad, because it's missing one file,
and now this is getting a little technical
| | 02:34 | I might as well include it here, because
there is no better place to talk about this.
| | 02:38 | I'm going to unzip this EPUB and inside this
folder this META-INF folder, you can see that
| | 02:47 | InDesign has created an encryption file and
inside the OEBPS folder it is created a fonts
| | 02:55 | folder where it has put smaller subsets--
see this is only 21 K of the entire font this
| | 03:01 | font is actually huge.
| | 03:03 | So it's not their actual font but I
suppose somebody could grab this and use whatever
| | 03:07 | characters are in there, but it's
also encrypted from that encryption file.
| | 03:12 | The encryption file sometimes causes problems,
but that's not what I want to talk about at
| | 03:16 | this point just want to show you
what happens when you embed a font.
| | 03:19 | The META-INF folder needs one more file that
Apple requests, and if you get an iTunes connect
| | 03:25 | account to get all of there guidelines--and
I'll talking about that in the later chapter--
| | 03:29 | it tells you exactly what needs to be in here,
but it's open information, and I can tell
| | 03:33 | your in fact I have one in your exercise files.
Or you could just go ahead and create it yourself
| | 03:38 | in any text editor and save it with this
exact name com.apple.ibooks.display-options.xml,
| | 03:46 | it's a plain text file, you declare it as
an XML file, and then you create what are
| | 03:52 | called display options.
| | 03:54 | And any iOS device when it opens up this EPUB,
we will pay attention to the contents of this
| | 03:59 | file and all that we're saying is that no
matter what platform you could say iPad, iPhone,
| | 04:04 | and whatever other platforms Apple may
come up with the asterisk means any platform.
| | 04:09 | I am turning on the attribute for specified
fonts, so I am specifically calling on fonts
| | 04:14 | that I have embedded in this EPUB they're
different from the ones that are available
| | 04:18 | to everybody on the iOS device.
| | 04:21 | Specified fonts is true and then the code
closes the platform, close display options,
| | 04:25 | very simply you can just copy and paste this
if you want, and that file get saved in your
| | 04:33 | EPUB folder after it's been expanded right
here in the META-INF folder. So you need this
| | 04:39 | Apple options XML file in order for any iOS
device to recognize that you have fonts here.
| | 04:46 | Now when you open that up it should default
to showing your fonts, but remember any user
| | 04:51 | can tap that A symbol and choose any other
font that's loaded and switch fonts. And what
| | 04:56 | Apple recommends that if the user switches
fonts still like oh I prefer Palatino I don't
| | 05:00 | like this Myriad Pro than Apple will go ahead
and switch out all the fonts to whatever the
| | 05:05 | user said except for any specified fonts in
your headers, so H1, H2, H3 that kind of thing.
| | 05:13 | And that's why in this document if I want to
make sure that this font remains the special
| | 05:18 | looking font even if the user changes for
the body fonts I would go to this Paragraph
| | 05:22 | Style, go down to Export Tagging and say when
you export this to your InDesign please call
| | 05:28 | this header level 2 or
whatever H level you want to use.
| | 05:32 | Now I cover export tagging and editing CSS
files in great detail in other videos, but
| | 05:38 | instead of addressing this issue piecemeal
I want to gather all into this one video.
| | 05:43 | In fact, Apple really prefers that you're not specify
a font that other than the default for the body text.
| | 05:49 | They only wants you to specify a different
font if it really needs to be different font
| | 05:55 | like if you're showing a handwritten letter,
and you want to include a handwriting font
| | 05:59 | or a special treatment for headlines, but not
for the majority of all of the type in the book.
| | 06:05 | Where it gets really complicated that big
drop-off is if a device has problems with
| | 06:10 | the way that Adobe encrypts those fonts, and
that can happen. And if that happens you can
| | 06:14 | always choose to export the EPUB without
embedded fonts, and then you add them back in manually,
| | 06:21 | and that's beyond the scope of this video,
but essentially you are adding fonts back
| | 06:25 | into your own fonts folder, you're editing
the content.opf file to link to them, and
| | 06:30 | you are editing your own CSS files.
| | 06:33 | The fonts that you want to actually drag and
drop into that EPUB yourself without any encryption
| | 06:37 | have got to be free license for doing so sort
of fonts, and you can find those kind of fonts
| | 06:43 | like here in google.com/webfonts.
| | 06:46 | Over 500 font families and these are not
just for the web like let say that I really want
| | 06:51 | to use this typeface in my EPUB I can say Add
to Collection and then download the collection,
| | 06:57 | it saying hey if you just want to use this
in your website you don't need to download
| | 07:00 | it, but yes I actually do want to download
it, because I actually want to include it
| | 07:03 | in the EPUB itself.
| | 07:05 | I covered doing this and editing the CSS
file and adding that Apple com display options
| | 07:11 | file in great detail in
another video here in lynda.com.
| | 07:15 | My title called Creating a Fixed-Layout
EPUB is about creating a different kind of EPUB
| | 07:20 | using InDesign and other programs specifically
for Apple devices. And when it's a fixed layout
| | 07:25 | EPUB than Apple expects you to embed the
fonts and so I have a great video I want you to
| | 07:30 | check this out if you want
to learn more about this.
| | 07:32 | Go down to Chapter 6 and watch
the video on Embedding fonts.
| | 07:37 | Another great resource that goes into hand
editing fonts in your EPUBs is this wonderful
| | 07:42 | EPUB book from Elizabeth Castro.
| | 07:44 | EPUB straight to the point, I highly
recommend that you checkout this book if you want to
| | 07:48 | learn more about embedding fonts in your EPUBs.
| | 07:51 | So like I said, it can go from very simple,
turn on the embedding font the end to kind
| | 07:56 | of complex if it doesn't work on all the devices,
so if you're going to be embedding fonts make
| | 08:00 | sure that one you have the license to do so
and two that you check the EPUB on the devices
| | 08:06 | and the software that
your readers will be using.
| | Collapse this transcript |
| Adding metadata to the InDesign file or book| 00:00 | How do people find eBooks?
| | 00:02 | Do they go to the bookstore and
browse electrons? No of course not.
| | 00:07 | They go to Amazon or the iBook store or they
do searches on Google or some place and they
| | 00:12 | search for the book that they want. By the
title, by the subject, by the author, by the
| | 00:17 | publisher, they do searches, and
that is what Metadata is all about.
| | 00:22 | When your customers are searching for your
eBooks they're not searching the content
| | 00:26 | of the eBooks, not yet, that's not
possible yet, because all that is zipped up in that
| | 00:30 | zip file known as the EPUB.
But the EPUB itself can contain metadata.
| | 00:35 | In fact, it's requirement
for an EPUB to pass validation.
| | 00:40 | Now I will be talking about validation later
on in this video title, that it contains certain
| | 00:44 | bits of metadata and metadata is just
simply information about the file that you can't
| | 00:49 | see in the file itself.
| | 00:51 | For example, the date of publication or
let's say in a piece of artwork the name of the
| | 00:56 | file or the last date that it was modified.
| | 00:59 | You don't see that when you open up an
Illustrator, but you see it in the Finder or Explorer,
| | 01:03 | the same thing is true for this digital
publication that we're doing called an EPUB.
| | 01:07 | There are a bunch of different places to add
the required and optional metadata in InDesign
| | 01:13 | and other bits of metadata you'll have
to add outside by editing the EPUB itself.
| | 01:18 | When you first create an EPUB, unless you have
done something special, you have the bare minimum,
| | 01:22 | in fact, not even the
minimum of metadata required.
| | 01:26 | So, I have just created this document that
we have been working with, and I export it to EPUB,
| | 01:33 | and I have been playing around this
before, so I'm replacing an existing one.
| | 01:37 | In the Advance Panel in the EPUB Export Options
dialog box there is a place for EPUB Metadata.
| | 01:44 | And do you want to include it or not?
| | 01:45 | Normally you always want to
include the document metadata.
| | 01:48 | But let's not include it just to see what
happens, and I'll select this to this unique
| | 01:52 | ID and erase it and then if I click OK InDesign
yells at me, hey the unique identifier is empty.
| | 01:59 | Do you want to generate one and actually that I
guess would be the bare minimum bit of metadata.
| | 02:05 | This little bit of information this unique
number that InDesign is offering to generate
| | 02:09 | for us is what's going to help us
distinguish one eBook from another on our hard drive.
| | 02:14 | Normally in this field you would put a book's
ISBN and yes every eBook needs its own ISBN
| | 02:20 | separate from the print version.
| | 02:22 | What InDesign is saying is if you don't have
anything in here, and you could type in you
| | 02:26 | know ABC, 123 if you wanted to, it will
generate one for you and so it gets this unique ID.
| | 02:32 | Now let's click OK, and it opens in
digital editions, but we're just previewing it.
| | 02:38 | Let's actually add it to the
library in digital editions.
| | 02:40 | So I'm going to copy it to the library and
yes we want to copy it right there, and then
| | 02:45 | we'll look at the library, and look at how
sad it is Author Unknown, and instead of a
| | 02:51 | title of the book it's the
title of the InDesign file.
| | 02:55 | How can we fix that and how can
we fix other metadata properties?
| | 02:58 | Go back to InDesign, and
there are two different places.
| | 03:01 | First of all, go to the
File menu and choose File Info.
| | 03:06 | From the File Info dialog box this is
where you add metadata, this is not special for
| | 03:11 | EPUBs this is true for any InDesign
document that you would add to your metadata to the
| | 03:15 | Description panel over here.
| | 03:17 | So the Document Title is A History of Art and
the author is--you know what I can't remember
| | 03:25 | looking at this all this time--
Clement, Clara Clement I apologize Clara.
| | 03:30 | You know this is actually from
gutenberg.org so it's a public domain book.
| | 03:35 | You can add additional metadata here if you want
not everything will be carried through to the EPUB.
| | 03:39 | But copyright status will, so let say
copyrighted, and we'll say 2012, click OK.
| | 03:47 | And then let's export this to EPUB again,
we'll overwrite the existing one and here
| | 03:52 | in the Advance panel we'll say yes, please
Include Document Metadata, and let's type
| | 03:56 | in the publisher name as well,
and we'll call it Acme Press.
| | 04:02 | There's our book, and let's add it to our
library and then take a look at the library, that's
| | 04:09 | better, isn't it, A
History of Art by Clara Clement.
| | 04:12 | Now where do you see all that other metadata?
| | 04:14 | Well, you actually have to peek inside the
EPUB or use a different sort of EPUB reader
| | 04:19 | or software something other than ADE, not
all of them will show you all of the metadata.
| | 04:23 | But when you try to validate an EPUB if there's
a problem with the metadata it'll beep at you.
| | 04:28 | I have already extracted a couple EPUBs, and
I have opened up the important file that contains
| | 04:33 | all the metadata in Dreamweaver.
| | 04:35 | What I have done is I have exported that same
EPUB to both EPUB2 and EPUB3 that I'll talking
| | 04:41 | about in the next chapter, and you can see
that the metadata fields are almost exactly
| | 04:45 | the same, they all start with this dc
creator, dc subject, dc description, and so on.
| | 04:51 | And anything that you have entered in the
metadata fields it gets put through here.
| | 04:55 | So when you're validating the EPUB the
validator is going inside looking at this content.opf
| | 05:01 | file looking at all the metadata fields to
make sure that the minimum is satisfied and
| | 05:05 | the minimum is usually the unique
identifier, which here, InDesign generated on its own,
| | 05:11 | the language English US and the date
that it was published and the title.
| | 05:17 | Everything else is gravy, you can see that
if you want to add more, you could edit the
| | 05:20 | content.opf yourself here
source, relation, coverage.
| | 05:24 | If you're not sure what these things mean
let me give you a little clue, you can go
| | 05:27 | to the web and figure out what all the
terms mean I have already queued it up.
| | 05:32 | And that DC, for example, you know what that
means DC stands for Dublin Core Metadata Initiative
| | 05:37 | and whenever I come here when I want to read
it with an Irish brogue, but it has nothing
| | 05:40 | to do with Dublin Ireland actually, it's
Dublin Ohio a place where a bunch of publishers met
| | 05:46 | a number of years ago and decided what should be
the metadata that everybody uses in their books.
| | 05:51 | Now let me tell you that metadata is a very
hot topic and things are changing as I speak,
| | 05:55 | you should follow the book
industry study group bisg.org.
| | 05:59 | If you want to learn more about metadata
and how the entire industry is moving toward a
| | 06:03 | richer vocabulary of metadata and a more fluid
metadata that both library systems and software
| | 06:10 | companies and publishers can all understand.
| | 06:13 | But anyway we were talking about the
existing metadata called the DC core.
| | 06:18 | So here if you're wondering, for example,
what should I put under creator, I can go
| | 06:21 | under Creator click here, and it says creator is an
entity primarily responsible for making the resource.
| | 06:28 | And it shows me some examples, and it
gives me clues about what I can enter there.
| | 06:31 | But for our purposes we just need to enter
as much metadata as necessary to make this
| | 06:36 | EPUB valid, and you see that you can do all
of that in InDesign, you actually don't have
| | 06:41 | to edit that EPUB after you export it as long
as you have filled in the correct information
| | 06:45 | and file info and turned on include
metadata in your Export to EPUB options.
| | Collapse this transcript |
|
|
5. Optimizing Images for EPUB ExportAdding alt tags to images and objects| 00:00 | We're looking at the contents of this document exported
to EPUB, so it's a short version of this History of Art.
| | 00:09 | Now you have it open in TextWrangler we're
looking at the main text, I didn't chunk up
| | 00:14 | into separate HTML files.
| | 00:17 | What I want to call your attention to, and
I know it looks sort of gobbledygook to you
| | 00:20 | probably, you don't worry about it we'll be
discussing each of these elements in detail
| | 00:24 | in an upcoming chapter on
editing the CSS and HTML.
| | 00:28 | But right now I want to talk about
something that you're going to do in InDesign before
| | 00:31 | you export, and that is to add alt tags, and
I thought it would help for you to actually
| | 00:36 | see an alt tag in the wild.
| | 00:38 | So take a look at this line
that I have highlighted here.
| | 00:42 | Do you see it's an image? And the
source of the image is img53_format.jpg.
| | 00:51 | So this is telling you that there is
an image right after this paragraph.
| | 00:55 | This is in the file name for the image in
the EPUB and then following that on the next
| | 00:59 | line is an alt tag called img53.jpg.
Alt stands for alternate.
| | 01:06 | With the purpose of alternate tags next to
every image tag in an EPUB is for people with
| | 01:12 | visual handicaps who are using a screen reader to have
that screen reader be able to describe the image to them.
| | 01:20 | So the screen reader would read this
aloud and the outside also was painted.
| | 01:25 | And then it would say image, img53.jpg, and
it would go onto the next thing Figure 2 The
| | 01:31 | Anchorites, and that's not really useful.
| | 01:33 | It would be better if they would say image, and
then they would actually describe what this image is.
| | 01:39 | Like further up we actually have a good image alt
tag for the one the cover, image it's MonaLisa_fmt.jpg.
| | 01:47 | The alt tag is simply picture of
Mona Lisa, now that's a lot better.
| | 01:51 | It's not only good for people with visual
problems, but it can also, theoretically, help
| | 01:56 | you in your marketing, because search
engines do index the alt tags on web pages.
| | 02:02 | If you look at the source of any web page,
every image will have an alt tag, a dumb one
| | 02:07 | or a long and interesting one,
it's really up to the web designer.
| | 02:11 | But search engines include that text so that
when you're searching for a phrase, if there
| | 02:16 | is a web page that has that alternate text
attached to an image that will come up as a hit.
| | 02:21 | And I can certainly see search engines
indexing EPUBs in the future, so it's always a good
| | 02:26 | idea to include good alt tags in your documents.
| | 02:29 | Now this one was added manually the one
for img53 was one that InDesign added itself.
| | 02:35 | You will not be able to get invalid EPUB, it
won't path validation if you have no alt tags.
| | 02:41 | So InDesign makes sure to add an
alt tag to every image automatically.
| | 02:45 | But the one that it uses is the
actual name of the image img53.jpg.
| | 02:50 | Luckily since version CS5.5 there is a way
to add your own descriptive alt tags within
| | 02:55 | the InDesign interface.
| | 02:57 | You use this handy dandy new
dialog box called Object Export Options.
| | 03:03 | So like if you look at the Mona Lisa one, and
it's here it is selected, Do I have it selected?
| | 03:08 | Yeah, it's a group, and I'm going to double-click
it so I only have the Mona Lisa selected.
| | 03:12 | Go to Object > Object Export Options, and
you'll see here in the Alt Text field that
| | 03:18 | I have chosen custom, and I have
added picture of Mona Lisa here.
| | 03:22 | And let's look at that img53 one, we'll
jump right to it, it's this picture here. If I
| | 03:29 | select it and go to Object >
Object Export Options, its blank.
| | 03:34 | So this is the default setup for any image
in InDesign is that it's saying it's going
| | 03:39 | to pull the text for the
alt tag From the Structure.
| | 03:43 | And this is actually, we're referring to
XML structure, but this is not XML workflow.
| | 03:48 | So when it gets exported to EPUB, those files
are XML based and so it's just going to pull
| | 03:54 | the name of the file name
as the alternative text.
| | 03:58 | But what you could do is you could switch
to Custom and type your own descriptive text
| | 04:02 | right here, or you could poll
and choose one of these XMP fields.
| | 04:08 | So what are those about if I choose like XMP:Title,
it says it's not there, it's a Metadata property.
| | 04:14 | And ah-ha! If you have used Bridge at
all, then this should be familiar.
| | 04:19 | Let's take a look at how you would add it
in Bridge, and I'm going to click Done here
| | 04:23 | and then right-click on this
image and choose Reveal in Bridge.
| | 04:27 | Now bridge is the free program that comes
with every Creative Suite program, gets installed
| | 04:31 | by default, you can't turn it off.
| | 04:33 | All of the Creative Suite programs have
hooks into Bridge, you can see like the little Br
| | 04:38 | button up here that means start a bridge.
| | 04:39 | It's kind of like an alternative to the Finder
or Windows Explorer and in fact I have a really
| | 04:44 | good video here, if I say
so myself, on lynda.com.
| | 04:47 | 10 Things every designer should know
by Bridge, you should check it out.
| | 04:51 | And in Bridge we can add metadata,
we can add text to those XMP fields.
| | 04:55 | I wish that we could do so in Mini Bridge.
| | 04:58 | If you choose Reveal in Mini Bridge, InDesign will
go ahead and find you that image in Mini Bridge
| | 05:03 | but there's no way to add or even view the
keywords and metadata here in Mini Bridge
| | 05:08 | and a horribly missing feature in my opinion so.
| | 05:11 | Not useful to us right now, instead we'll just right-
click and choose Reveal in Bridge, and there it is.
| | 05:17 | So in Bridge we can come over here on the right
and these fields here are the XMP metadata fields.
| | 05:23 | Most people when are pulling information for alt tags
will use either the Headline or the Description field.
| | 05:30 | What you don't want to do is repeat within
the caption, because that would be really
| | 05:33 | stupid, right for someone who is using a
screen reader to have it repeated twice.
| | 05:38 | So if your workflow is pulling the actual
captions from the description field which
| | 05:43 | is pretty common, you might want to use
something else, like may be the headline and then use
| | 05:48 | that for your alt tags.
| | 05:50 | Unfortunately there is no alt tag
field here. Why there isn't? Don't ask me.
| | 05:55 | But let's say that under Headline I'm going
to add this is a--I'm looking up here at the larger
| | 05:59 | picture--grayscale image of a
group of spooky guys, there we go.
| | 06:06 | Then I click right in here, and I say
yes Apply that metadata to this image.
| | 06:12 | Now we jump back to InDesign, and you could
see that it is out of date because that metadata
| | 06:17 | is saved with the image itself.
| | 06:19 | So I'm going to update it, and now I can come
here and go to the Object Export Options and
| | 06:26 | choose pull this from the Headline, there it
is grayscale image of a group of spooky guys.
| | 06:33 | And now if I export this to EPUB, let's go
ahead and do that, and we'll replace the existing
| | 06:39 | one, we'll use the same default as before.
| | 06:44 | So there is our book, now you don't actually
see the alt text here. Where did that image go?
| | 06:51 | There it is. You don't see the alt tags here,
this is actually metadata that would only
| | 06:54 | reveal itself if you're looking at the source
code or if somebody is using a screen reader.
| | 07:00 | But we can peek at it, let's close the old one in
TextWrangler and drag the new one on to TextWrangler.
| | 07:08 | There is our file, so make this larger, and
we want to go down here to img53, there it
| | 07:18 | is source img53 alt grayscale image
of a group of spooky guys, there we go.
| | 07:24 | So you can go through your InDesign
documents image by image, assign a keyboard shortcut
| | 07:29 | to Object Export Options that would make
life a lot easier and then go ahead and type in
| | 07:34 | your own custom alt tags
or pull from an XMP field.
| | 07:38 | Now that last option, if your company is
organized enough to have a photo editor or somebody
| | 07:45 | in charge of corralling all the images and applying
keywords perhaps in an image database or something
| | 07:50 | like that, then you'll find this
free script that I found very useful.
| | 07:55 | Of course I have to show you script, and
I'll have a link to the script in the PDF that
| | 08:00 | anybody can download.
| | 08:01 | But if you have the exercise files it's in
the exercise folder for this video, and I
| | 08:06 | have already installed that my EPUB
folder, it's called ApplyALTfromXMP.jsx.
| | 08:13 | On here is one of those first key .DS_Store
files at the Mac always get, I'm just going
| | 08:18 | to right-click and choose Delete,
I can't stand looking at it.
| | 08:21 | Yes I want to delete that, okay.
| | 08:24 | ApplyALTfromXMP double-click it, and you'll
see that you can choose which XMP field your
| | 08:31 | company uses for it's alt text, Description,
Headline, or Title or if you're using XML
| | 08:36 | From Structure, let's say they we're using
Headline, and then you can choose if there's
| | 08:41 | any images that already have alt text if you
want to Overwrite them, I don't want to, and
| | 08:45 | then I'll just click OK, before that notice
that let's get a little add for InDesign Secrets
| | 08:50 | is because the guy who wrote this Marie
Antoinette budget it because I asked him to, and then
| | 08:54 | I wrote a post about it on InDesign Secrets,
so don't forget to check that out, and you
| | 08:59 | want to OK, and it says it found three
images that had XMP data in its headline, and it
| | 09:04 | went ahead and added those.
| | 09:06 | So if your publications have lots of images,
you probably do have somebody in charge of
| | 09:10 | adding these fields to every
image in an image database.
| | 09:14 | In that case, using the script will help you
tremendously in adding alt tags to your files and InDesign.
| | 09:20 | And even if you're not that organized or you
just have a few images, it is far easier to
| | 09:25 | add alt text to your images with the New
Object Export Options dialog box right in InDesign
| | 09:31 | rather than down the road and
searching for these things in your HTML files.
| | Collapse this transcript |
| Converting InDesign objects to images| 00:00 | Sometimes you need to convert the type that
you have set up in InDesign into images or
| | 00:07 | even any kind of artwork that you have drawn
with InDesign's tools like the Arrow Tools.
| | 00:12 | You would actually want to include in EPUB,
but they have to be images that you have placed.
| | 00:17 | The Object Export Options dialog box
that I talked about in the previous video.
| | 00:21 | That we used for adding all tags, actually has a
very useful function in its last tab EPUB and HTML.
| | 00:30 | In that it can custom rasterize any
object or any selection upon export to EPUB.
| | 00:36 | So that it's completely
editable in the InDesign document.
| | 00:40 | But when you export it, it turns into a JPEG.
It's just fantastic.
| | 00:45 | Let me show you a couple of
examples when you might use that.
| | 00:47 | Here, for example, is a cover image.
Now, we have it grouped.
| | 00:51 | So, if I drag it
everything moves together, Undo.
| | 00:56 | But the text is still editable.
| | 00:58 | And if I export this to EPUB, I will just
press Command+E or Ctrl+E, save it on the desktop.
| | 01:04 | I will just keep all the
existing defaults, and there it is.
| | 01:09 | Now, what happened?
A History of Art is on the right.
| | 01:13 | We're not seeing the actual title
superimposed on the painting of Mona Lisa.
| | 01:18 | So, even though it's grouped, when you
export to EPUB that really doesn't mean that it's
| | 01:23 | going to stay grouped with this
live text overlying the picture below.
| | 01:29 | You can do that in the flowable EPUB.
| | 01:31 | You can set this up in a Fixed Layout EPUB,
that I have a completely different title on
| | 01:35 | Linda.com, that I did recently called How
to Create Fixed Layout EPUBs, but that's not
| | 01:41 | what we're talking about here.
| | 01:42 | So, if you really wanted this text to appear
in top of this image in a flowable EPUB you
| | 01:47 | need to burn it in.
You need to turn this into one complete image.
| | 01:51 | Now, before CS5.5 when that Object Export
Options dialog box was first added, what we
| | 01:58 | would have to do is take a screenshot of
this or maybe select it all, export it to JPEG.
| | 02:03 | And then place the JPEG and
move this guy over to the right.
| | 02:07 | And I showed how to do that in some of my
InDesign CS4 and CS5 to EPUB videos here.
| | 02:13 | But now what we can do is select it all, group
it as I have already done, and then go to Object
| | 02:19 | Export Options, and we're going
to choose Custom Rasterization.
| | 02:23 | So, now this is enabled, because I
actually have something selected in my layout.
| | 02:28 | What we're saying is with this selection I want you
to rasterize it, and you have a choice of resolution.
| | 02:33 | I am going to say, I'll leave it at 96.
And we want to export it to JPEG.
| | 02:37 | This is the one format that you
should probably use 99% of the time.
| | 02:41 | You don't need to worry about any of this
stuff here, I'll just say done, that's all.
| | 02:46 | Now, this is still completely editable.
I could say An History if I wanted to.
| | 02:51 | I could move this frame around on here.
| | 02:54 | But I just don't want to ungroup it, because I
think that will break the object rasterization.
| | 02:59 | Let's go ahead and export this to EPUB, and
we'll overwrite our existing one, and except
| | 03:05 | the same default as before, and there it is.
| | 03:09 | We can't really see it on this monitor, because
of the resolution, but it is actually part of this.
| | 03:13 | Now, this is an image, it's not my text anymore.
| | 03:17 | I couldn't search in my EPUB
and find this word history.
| | 03:21 | So, you have to be
careful when you're doing this.
| | 03:23 | Because Apple and probably some of the other
resellers they don't really like you to turn
| | 03:28 | your live text into images.
| | 03:31 | You can imagine that a lot of designers seeking
complete control over the layout in a flowable
| | 03:36 | EPUB would be prone to
turning lots of things into images.
| | 03:40 | But that can actually get the book rejected by
Apple or Amazon or the NOOK people or Barnes & Noble.
| | 03:48 | But for covers it's usually okay and
for incidental artwork it's usually okay.
| | 03:53 | Like what is this painting in
1970s America? What's that about?
| | 03:56 | I was twirling around with this file.
Let me show you what I did.
| | 04:01 | Let's say that this is the font that
you use for painting in 1970s America.
| | 04:06 | And perhaps you don't want to embed
your fonts or maybe this font is not embeddable.
| | 04:11 | But you want to maintain this look.
| | 04:13 | What you can do is turn this
into artwork, when you export it.
| | 04:18 | So, we can convert this into an image or let's say
that you're dragged out some interesting looking line.
| | 04:24 | I'm just going to go ahead
and do one free hand here.
| | 04:28 | And I'll make it to 8 points with our
friend Japanese Dots, and we will just let's give
| | 04:38 | that a nice color here of red, there we go.
We want to include this as well.
| | 04:45 | Now, if we export this to EPUB this is just be
completely ignored as I showed in a previous video.
| | 04:50 | Your artwork that you with
InDesign tools is ignored.
| | 04:53 | But what we can do with out friend is to
select it and choose Object > Object Export Options.
| | 04:59 | We want that rasterized,
we'll just everything as it is.
| | 05:03 | And then we want this one as well.
| | 05:04 | So, you can see why I would want to assigned
keyboard shortcuts to this guy, Custom Rasterize.
| | 05:09 | We don't need a 300 just leave
it that. Oh. 96 is good.
| | 05:13 | Now, I'm not quite it's going
to happen with the layout order.
| | 05:16 | I think these things will work out okay.
| | 05:18 | I am going to nudge this to the left
just to make sure it comes before this text.
| | 05:22 | And that should come before this as well.
I think it'll be okay, let's check it out.
| | 05:27 | Export to EPUB, let's
overwrite the existing, click Ok.
| | 05:34 | Funky baby all right.
| | 05:36 | So, we have our cover working, and
we have our artwork and the headline.
| | 05:40 | Now again you want to be careful about
this and actually to be a really good citizen.
| | 05:45 | What you probably want to do before you export
would be to also assign alternative text especially
| | 05:51 | something like this.
| | 05:52 | I'm going to select painting
in 1970s America and copy it.
| | 05:57 | We want to assign and Alt Text markup
to this when it's exported to an image.
| | 06:02 | And if you're not sure what I mean
by Alt Text, watch the previous video.
| | 06:06 | So, up here in Object
Export Options, it's rasterize.
| | 06:09 | We go to at Alt Text > Custom, and then
I'll paste exactly what the text is right.
| | 06:16 | And we might as well do it for this
too, Object Export Options > Custom.
| | 06:23 | This is a red squiggly line.
| | 06:29 | And now when we export it to EPUB, these
images will have descriptive text which is exactly
| | 06:35 | what the resellers want to see if you
have converted some of your text into images.
| | 06:40 | I love this dialog box.
| | 06:42 | It's one of my favorite
features of InDesign CS5.5 and 6.0.
| | Collapse this transcript |
| Specifying image resolution and appearance| 00:00 | The good thing to know about dealing with
images when you export to EPUB from InDesign
| | 00:04 | is that you usually don't
have to do a dang thing.
| | 00:08 | Anything that appears in your Links panel or
anything that you have placed not just images
| | 00:12 | like this JPEG here, but if you have placed a
PDF or a layered Photoshop file or another
| | 00:16 | InDesign file, for that matter will become
rasterized and will be exported as a JPEG
| | 00:22 | in 90% or maybe 99% of the
instances in the resulting EPUB.
| | 00:28 | The EPUB file format supports JPEG, GIFs,
PNGs, and SVGs, but InDesign will only export
| | 00:34 | to JPEG, GIFF, or PNG.
| | 00:37 | And JPEG is what it uses
for basically everything.
| | 00:39 | In my experience the only time it
exports to GIFF is if you have placed a GIFF.
| | 00:43 | PNGs I am talking about in another video,
and that's mainly when you have a vector file
| | 00:48 | with transparency like a
placed Illustrator file.
| | 00:51 | It makes no difference really what
resolution the image was when you placed it.
| | 00:55 | In this case this image is pretty high
resolution, you can see that I have added another field
| | 01:00 | to my Links panel showing you the dimensions,
2200x3300 is a pretty high-resolution file,
| | 01:06 | that's the number of pixels in either dimension.
| | 01:08 | But when you export to EPUB as we will see
in the Image panel in the Exports to EPUB
| | 01:15 | dialog box you will be setting a
resolution to which all images that are currently at
| | 01:21 | that effective resolution or
higher will be down sampled. Got that?
| | 01:25 | So if you place an image that's 72 ppi, or
dpi, if you call it that, it's going to stay
| | 01:31 | at that resolution because that's the lowest
resolution that InDesign can export to when
| | 01:37 | it exports to EPUB.
| | 01:39 | If you set in your Export Options 150 or 96
or 300 it's still going to stay at 72 because
| | 01:46 | InDesign will never up sample.
| | 01:48 | If you need it to be a higher-res
you have to do that in Photoshop first.
| | 01:51 | But in most cases of the publications that
you'll be working with have been set up for
| | 01:56 | print, so they're likely going
to be much higher than 72 ppi.
| | 02:00 | And if you have scaled them smaller like
this one has been, and this ones is at 63%, and
| | 02:07 | it's going to be even higher than that.
| | 02:08 | So when I select this image here you can see that
the actual ppi was 350, now that it's scaled it's 556.
| | 02:16 | When I export to EPUB it's
going to be down sampled to 150.
| | 02:20 | You usually want to down sample to 150
that is the default in InDesign because that's
| | 02:26 | the best resolution for the vast majority
of different EPUB readers out there, even
| | 02:31 | the new iPad Retina.
| | 02:33 | Though the resolution is little higher than
hundred 50 ppi your images still look great.
| | 02:38 | If you want to you can set them at 300.
| | 02:41 | But then that makes your file kind
of large and the images kind of large.
| | 02:46 | By the way, if you ever need a resource to
learn what is the resolution and the dimensions
| | 02:51 | of all the different EPUB readers
out there, there is a great resource.
| | 02:55 | If you go to mobileread.com and then click
on the Wiki link at the top, Wiki is kind
| | 03:01 | of like an open-source encyclopedia.
| | 03:03 | They have these quick links, they have charts
that show eBook devices and mobile devices.
| | 03:09 | And I have already opened them up.
| | 03:10 | So, for example, here is
their matrix Epaper devices.
| | 03:15 | If I scroll down to 6" devices you will see
here are the settings for lot of the Amazon
| | 03:21 | Kindles showing their dimensions,
screen technology, levels of gray and so on.
| | 03:28 | And then the web Tablet 1 shows the iPads, looks
like they haven't updated it yet for the newest iPad.
| | 03:34 | But here, for example, it's showing you
that's 1024x768X132 pixels per inch and the iPad3
| | 03:41 | has somewhat higher.
| | 03:42 | So if you want to know that
information sources are out there for you.
| | 03:47 | One other thing I want to mention before leaving
this Links dialog box is that if at all possible,
| | 03:52 | you should be working with
RGB images like this one.
| | 03:56 | Now I know that a lot of your print
projects may be using CMYK images because that was
| | 04:01 | the old-school rules, you convert it to
CMYK in Photoshop before you place it InDesign.
| | 04:06 | But what that means is that when you ask
export to EPUB, InDesign will have to reconvert that
| | 04:10 | CMYK back to RGB because
eReaders don't support CMYK just RGB.
| | 04:17 | If you know anything about RGB versus CMYK
you know that RGB has millions of colors CMYK
| | 04:22 | does not, it's a much smaller gamut.
| | 04:25 | Which means that when it has to convert
from CMYK to RGB there's a much smaller pool of
| | 04:30 | different colors to choose from
and your image won't look as great.
| | 04:35 | If possible you should be using RGB images
even for your print projects because when
| | 04:39 | you export to a print ready PDF that also
gets converted to CMYK on the fly by InDesign,
| | 04:45 | you don't need to do it in
Photoshop first, that's the little lesson.
| | 04:49 | From now on if you were using CMYK for your
publications please, please try and convince
| | 04:54 | people to use RGB because that's the most flexible
way to go for print and for digital publications.
| | 05:02 | Let's close this up and look at the basics of
setting up image options when you export to EPUB.
| | 05:07 | This is just a simple one-page document, it
has two text frames and a rotated image that
| | 05:14 | has a drop shadow and the image is actually
cropped if I click right here, you can see
| | 05:19 | that there's a lot of the images not showing
let me pause for second, so you can see kind
| | 05:24 | of a cold looking image
what we centered on the A here.
| | 05:27 | And let's export this to EPUB I am
pressing Command+E or Ctrl+E and export right out,
| | 05:33 | I have done this before so I am
going to replace the existing EPUB.
| | 05:36 | In the general EPUB Export options, if
you're following along you should know that I have
| | 05:41 | changed a couple of the defaults, I have
turned the cover off because I really don't care
| | 05:45 | about seeing a rendered cover.
| | 05:47 | And I have turned on View EPUB after Exporting,
can't remember if that's on or off by default.
| | 05:52 | And here in the Image panel we have it set to
the defaults which is to preserve appearance
| | 05:57 | from the layout, down sample if necessary
to 150 ppi, your other choices are these.
| | 06:03 | And to keep the image size relative to the page.
| | 06:06 | Let's see what that means we are just
going to export this and take a look.
| | 06:10 | To preserve Appearance means that anything
that you did to that image in InDesign is
| | 06:15 | going to be what it exports to EPUB, the fact
that I cropped it, and I rotated it, and I applied
| | 06:21 | a stroke to it, and I added a
drop shadow is all maintained.
| | 06:25 | This only works, by the way, with
images, it doesn't work with text frames.
| | 06:30 | If I had a text frame that was rotated and had
a drop shadow that would be ignored.
| | 06:34 | This only works for images because I have turned on
Preserve Appearance, and it is the default setting.
| | 06:41 | Relative to page, remember that was turned on.
| | 06:43 | If I change the width of my window, notice
how the image gets large and small, even though
| | 06:52 | the type size is not changing, and that's a
good thing. The element is staying relative
| | 06:58 | to the width of the device at the user is
reading your EPUB on, whether it's an iPhone
| | 07:03 | or it's a huge tablet.
| | 07:06 | Let's go back to InDesign, and we will
export with somewhat different settings.
| | 07:09 | I am going to replace this, and this time in
image I am going to turn off Preserve Appearance
| | 07:16 | from Layout, click OK. Oops.
| | 07:20 | Look at that, it lost the crop, it lost the
drop shadow, lost the rotation, it is actually
| | 07:25 | sending the original image not the formatted
one through, its still downsampling it because
| | 07:31 | we did say 150 we didn't change that.
| | 07:34 | But it's using the original
image in the original dimensions.
| | 07:37 | I can't imagine why you'd ever want this,
to be this way usually you want to try to
| | 07:41 | get to what you see is what you get,
and you want it to maintain appearance.
| | 07:46 | One last thing I want to mention about resolution
is that the major eBook retailers have guidelines
| | 07:51 | that you can download, and I'll be
talking about that in a later chapter.
| | 07:54 | And in those guidelines they talk about
what kind of image resolution they require and
| | 07:58 | what their maximums and minimums are.
| | 08:01 | For example, the maximum image
resolution for the iPad is 2 million pixels.
| | 08:08 | You might think, 2 million pixels
my images will never be that large.
| | 08:12 | But let me calculator here and show you that
if one side of image is 1200 pixels and the
| | 08:18 | other side of the image is 1600 pixels
which would be about a postcard size image a 300
| | 08:24 | ppi, what is that equal?
1,920,000 pixels, so it's getting very close.
| | 08:31 | And I personally have had books rejected from
the Apple iBook store that I have uploaded for
| | 08:36 | sale because a couple the
images were over 2 million pixels.
| | 08:39 | I mean if you had a full-page image eight
and a half by 11, at a 150 pixels per inch
| | 08:44 | that would deftly put you
over the 2 million mark.
| | 08:46 | So you would either need to go through all
the images that InDesign exports and puts
| | 08:50 | them to that EPUB folder, that we will look
at in a couple of chapters and reduce them
| | 08:55 | manually in Photoshop or if you have a huge
image you could always change the resolution
| | 09:01 | by selecting it and going to the Object menu,
choosing Object Export Options and specify
| | 09:08 | a smaller resolution for a
particularly large image.
| | 09:12 | I don't want to change the custom layout for
this one so I am going to turn that off, but
| | 09:16 | right now we're just
looking at the rasterization.
| | 09:19 | When you select an image, and you make changes
in the Object Export Options dialog box, then
| | 09:24 | those changes are
specific to that selected image.
| | 09:27 | When you go to Export the File to
EPUB, let me to that one more time.
| | 09:32 | Notice here in the Image dialog box that
these settings apply to all your images except for
| | 09:38 | ones that you applied Object Export settings to.
We will accept for once that you have customized.
| | 09:44 | If you want to ignore those customizations that
you did, turn that on, it's not on by default.
| | 09:49 | So usually I want to keep it off.
| | 09:51 | I think this combination of a great set of
defaults and the ability to override those
| | 09:55 | defaults on an image by image basis, makes
InDesign one of the best programs, and I think
| | 10:01 | the only program around that gives you that
much control over your images in your EPUBs.
| | Collapse this transcript |
| Setting image position controls| 00:00 | When you have an image that's just floating
on the page, it's not anchored in any text
| | 00:05 | string like how this image is--just, you know,
all by itself floating on the page--and you're
| | 00:11 | exporting this thing to EPUB, how does
InDesign know where to put the image?
| | 00:15 | Now if you were watching any of the previous
chapters you know where in the text flow it
| | 00:20 | will appear. If you're exporting according to
layout order, it will go according to where
| | 00:24 | the frame in the left to right or top to
bottom on the page, or if you're exporting according
| | 00:29 | to the Articles panel, which I have
already set up for this document.
| | 00:33 | Mainly because I have two pages, we're
going to look at Page 2 in a second.
| | 00:37 | To be able to export to EPUB, just a
portion of the InDesign document is you see me do
| | 00:41 | in another videos a cool tip is to divvy
them up into articles so that you can turn off
| | 00:47 | Page 2 and turn on Page 1.
| | 00:49 | So here you can see that there is a text
frame and a text frame, and in the middle is our
| | 00:53 | friend, the letter A.
| | 00:55 | So that's going to be the order that it exports, but
what I'm talking about is the position of the item.
| | 01:00 | How does it know if it
should be left, center, or right?
| | 01:03 | It doesn't go according to where it is on
the page, it goes according to the settings
| | 01:09 | in Image Export options.
So let's take a look.
| | 01:11 | I'm going to export this to EPUB by pressing
Command+E or Ctrl+E, and I already have one
| | 01:17 | on my Desktop that will overwrite.
| | 01:19 | The only thing I have changed here in a
General pane is I have turned off the Cover.
| | 01:23 | I don't really need to see one.
| | 01:25 | And here in Image, all these settings are the
same on the top, but here under Image Alignment
| | 01:31 | and Spacing you can see I have been playing.
| | 01:33 | The default horizontal alignment for
floating images or stand-alone images is centered.
| | 01:40 | And let's take a look, let's go head and export that
right to EPUB, and there it is, you can see centered.
| | 01:45 | Let's come back here, and this time change it
to Right aligned, right here, right aligned,
| | 01:54 | Export, there we go.
| | 01:59 | Now it would be nice if InDesign could be
smart enough to pick up where something was
| | 02:02 | more or less aligned to, but it can't, not yet.
| | 02:07 | So in this Export dialog box, as I mentioned
in the previous video, this is where you would
| | 02:12 | set the settings for the majority
of the images in your publication.
| | 02:17 | If you want most of them to be
centered, then you set that as center here.
| | 02:21 | If you want to overwrite that for a
particular image, if you want a particular image to be
| | 02:24 | left aligned or right aligned, then you
would select that image in the InDesign document
| | 02:30 | and go to the Object menu, go down to
Object Export Options and turn on Custom Layout.
| | 02:37 | Custom Layout section of Object Export
Options let you set the alignment, the space above
| | 02:41 | and below, and if there's a page break, and
we're going to talk about these in a minute.
| | 02:45 | So you can see the last time that I used this
field, I actually set a space above for the
| | 02:50 | image to be 20 pixels and the only measure
that you're allowed to use here is pixels.
| | 02:55 | If you try to type in 3p or 4i for 4 inches, you get
yelled at. Invalid numeric value does not compute.
| | 03:04 | I would show, we would just convert it
to pixels, I don't know why it doesn't.
| | 03:08 | Let's go ahead and take a look at this one
then so I'm going to click Done, and when
| | 03:11 | we Export to EPUB, notice that in this dialog
box it to be right here, here it's set to zero,
| | 03:19 | Right aligned, but here Ignore Object Export
Settings is disabled, and that is the default.
| | 03:26 | That's usually what you want.
| | 03:27 | You want to honor any custom
settings you apply to individual images.
| | 03:32 | So you leave this disabled so that it
honors that and then click OK, and it added some
| | 03:39 | space above and centered it on the page.
| | 03:43 | Let's go back up to Object Export Options,
and we will turn off Custom Layout and export
| | 03:50 | it once again without changing anything, and now
it's using the default settings for all the images.
| | 03:58 | Let's come back here again, go to Object
Export Options to take a look at another setting,
| | 04:04 | we will leave this at Centered, we
don't need any space above or below.
| | 04:08 | Actually, I think I might
add a little bit of air below.
| | 04:11 | I'll put 20 pixels.
| | 04:13 | But this cool little thing here, Insert Page
Break. If you turn this on, then InDesign will
| | 04:18 | force the image to start at the top of the
page because it will insert a page break before
| | 04:23 | the image or it can be the
very last item on a page.
| | 04:27 | So if this thing is followed by a headline,
you could force the headline to be at the
| | 04:31 | top of the page or you could force an image to
be all by its lonesome on a page by inserting
| | 04:36 | a page break Before and After the Image.
| | 04:39 | Now this does not add anything to the
navigational table of contents, it doesn't split up the
| | 04:45 | document or chunk it up into individual HTML
files, all it does is it inserts the CSS code
| | 04:51 | that is honored by most eReaders to
Insert a Page Break Before or After or both.
| | 04:56 | So let's say we will insert
a Page Break Before. Oops.
| | 05:00 | What happened to the image? Here it is.
| | 05:05 | So there is plenty of room here, but the command
forced a page break to appear right before this image.
| | 05:12 | Now personally, I can't think of any
situation where I want every single image to have a
| | 05:16 | page break, so I would probably use the
Object Export Options to on occasion force a page
| | 05:23 | break before certain images.
| | 05:24 | Like say before a chapter
opener image or something like that.
| | 05:28 | I'm going to turn this off, because I want
to talk about one other thing having to do
| | 05:32 | with page breaks, and that is here on Page 2.
What is so special here about Page 2?
| | 05:38 | Let me turn off the Articles panel for Page 1,
because now we just want to export Page 2,
| | 05:43 | which has two text frames.
| | 05:46 | This is the continuation from the previous
one, and it has an image right in the middle.
| | 05:51 | This image has the magic size and the magic
proportions, meaning that it will force iBooks
| | 05:58 | to put it by itself on a page
without using any page break code.
| | 06:01 | It's in a ratio of 1.5, meaning
the height is 1.5 times the width.
| | 06:09 | If I select this, you can see under Width
it is 300 pixels wide by 450 pixels tall.
| | 06:15 | Now you know that the iPad has a much
greater resolution than 300x450, so this is only
| | 06:20 | going to work if your image is 150 pixels
per inch or larger, which this one certainly is.
| | 06:27 | But if you have an image in your eBook, and
you want it to be by itself stand-alone on
| | 06:32 | a page, you need to place it into an image
frame and then set its width and height in
| | 06:38 | pixels is what I did, but you can also set in
points, which is the same thing if I switch to Points.
| | 06:43 | If it's not exactly 300x450, no problem.
You could make it any measure that you want
| | 06:48 | as long as the scale is 1.5:1, and that the total
number of pixels is at least 600 pixels by 900 pixels.
| | 06:58 | If it's larger than that, don't worry about it,
iPad and all the other eReaders will always
| | 07:02 | scale the image to fit.
| | 07:04 | But these dimensions, by the
way, are specifically for iPads.
| | 07:08 | Let's go head and export this to
EPUB so you can see what I mean.
| | 07:11 | I hit Command+E or Ctrl+E.
Replace the existing one.
| | 07:18 | I want to make sure that 150 is set up
here, I don't need any Page Break Before.
| | 07:24 | Now it looks like it's not working but
that's because this is Adobe Digital Editions, let
| | 07:29 | me move it over to my
iPad so you can take a look.
| | 07:32 | I'm using a cool utility called Reflection
that I'll talk about in an upcoming video
| | 07:37 | that shows what's inside my iPad on screen.
| | 07:40 | So here is the eBook, let me
tap it open it up and scroll back.
| | 07:45 | So there is the text that was above that picture and then
the picture all by itself and then the following text.
| | 07:50 | So I didn't need to use any special page break
code, I just needed to size my image correctly,
| | 07:55 | and if I turn this to Portrait mode,
you can see it still works that way too.
| | 07:59 | So I get like a full bleed image.
I'm swiping to go page to page.
| | 08:04 | Now Apple is always tweaking iBooks, and it
may come out with nine more versions of the
| | 08:09 | iPad by the time you see this.
| | 08:10 | But if you follow along with the forums and the
a Twitter and Facebook groups that I mentioned
| | 08:15 | in the very last video in this title, then
you'll always be up to date with what would
| | 08:20 | be the magic resolution and the magic width and
height to create these cool full-page images.
| | Collapse this transcript |
| Working with PNG and transparency| 00:00 | Let's talk about a new kind of image file
format that InDesign CS6 now exports to the
| | 00:06 | PNG, or PNG format, properly pronounced ping.
| | 00:10 | It will only convert images that you have
placed into InDesign into PNG when it exports to
| | 00:15 | EPUB if the image is a
vector image with transparency.
| | 00:20 | I have just such an image open right now in
Illustrators CS6, and if I swipe over this
| | 00:25 | you can see all of its wonderful little
vector outlines and the text The Roux Academy of Art,
| | 00:30 | Media and Design is text on a path.
| | 00:34 | Let's jump over to InDesign and place that
logo on the page, so I'm going to File > Place
| | 00:41 | in my Links folder in the exercise folder I
have one. Here it is, roux academy logo_black,
| | 00:49 | and we'll just click right there.
It appears here in the Links panel.
| | 00:55 | Now it's an AI file, and it has transparency,
so it will be converted to PNG on export.
| | 01:01 | Let's check that out. Go to Export to EPUB
with Command+E or Ctrl+E, let's save it on
| | 01:06 | the desktop. I have done this a few
times, so we're going to overwrite one.
| | 01:09 | We have turned off the cover image,
really don't care about that for this test.
| | 01:13 | But under Image you want to make sure that
we have the default of preserve appearance,
| | 01:19 | Resolution is 150 ppi, and by the way, when
you have placed a vector image, InDesign will
| | 01:24 | rasterize it on export to PNG.
PNG is a raster file format.
| | 01:29 | And resolution is set at 150 ppi, which is
the resolution that InDesign will export this
| | 01:36 | placed vector graphic to when it exports it
to PNG, or to JPEG, whatever it is that you
| | 01:42 | set, it will rasterize it to this resolution.
| | 01:45 | But look down here under Image
Conversion. It's set to be Automatic.
| | 01:48 | Your choice is our GIF, JPEG, or PNG.
| | 01:52 | I can't think of any instance where you'd
ever want to actually select one of these
| | 01:55 | things and say export everything as a GIF.
| | 01:58 | Leave it at Automatic, and when you leave
it at the default of automatic, essentially
| | 02:02 | you're telling InDesign to export everything
as a JPEG except for your placed Illustrator
| | 02:06 | files, which it will export as PNGs.
| | 02:09 | PNGs is good because the PNG format does support
transparency. It's a paint image that support transparency.
| | 02:16 | I have very seldom seen InDesign export anything
as GIF unless you place the GIF in the first place.
| | 02:22 | So I don't even know why it still there.
| | 02:24 | Let's leave it at Automatic and let me
check that everything else is set up right, and
| | 02:29 | then we'll click OK, and
there is our lovely logo.
| | 02:34 | Now in the case of a vector illustration, you
might want to increase the resolution of this
| | 02:38 | a bit, so we can come back to InDesign and select
this in the Object > Object Export Options dialog box.
| | 02:47 | And for this one, we'll say we definitely
want 300, but keep it as a PNG file.
| | 02:53 | And now when we export to EPUB, everything
will be exported at the default resolution
| | 02:59 | of 150, except for that image because it is
going to honor those object export settings,
| | 03:05 | and it's somewhat better of a resolution.
| | 03:08 | And if you want to see what that PNG file
looks like, you could go into the EPUB and
| | 03:11 | extract it, which I have already done. It's inside the
exercise folder, and I have also put it on the desktop.
| | 03:17 | First, the interesting thing is that
InDesign will automatically name this according to
| | 03:21 | a number. Why it name these PNGs according
to number--each number of course is unique--
| | 03:25 | I have no clue. Maybe this is the 1,101st time
that it had to export as a PNG, I don't know.
| | 03:32 | Every other image format, the GIFs and the
JPEGs, the name is the same name as the file
| | 03:37 | name itself and then when we open this up
in Photoshop, you can see that it is indeed
| | 03:47 | transparent behind everything else,
so the file itself is transparent.
| | 03:51 | Now that is going to be inconsequential until the
user changes the background color of their eReader.
| | 03:58 | And that is possible to do in Kindles
and in iPads and in other eReaders.
| | 04:03 | So it's something that you should be aware of.
Let's take a look at this document on the iPad.
| | 04:08 | I have put it on my iPad, and we're looking
at what's on my iPad screen using this cool
| | 04:13 | utility called Reflection ,and let me open
it up, so you can see what it looks like.
| | 04:18 | Looks great, right there on the page.
| | 04:20 | But if I change the background color of
this book by tapping the little A and big A and
| | 04:26 | then tapping theme, right now we're looking
at in sepia which is beautiful, here is the
| | 04:31 | normal white, sepia is what we were
looking at, but look at it in night.
| | 04:37 | Oops, the black text drops out and in fact
this is called out in Apple's Guidelines for
| | 04:43 | Publishers, that if you are creating
transparent PNGs to make sure that any black elements
| | 04:49 | don't disappear in night mode, because a lot
of readers use night mode and they complained
| | 04:54 | to Apple that some of the important elements
of graphics or charts dropped out. Let's switch
| | 04:59 | back to InDesign see the fix for that.
| | 05:02 | One thing that you can do would be to actually
go to the original Illustrator file and change
| | 05:07 | the color of the type to something like gray
or tan so that it shows up both against the
| | 05:12 | white background, the sepia background and
a black background or you could add a white
| | 05:18 | rectangle behind it, you can do it right here
inside Illustrator or you can do it in InDesign
| | 05:23 | simply by choosing to rasterize this object.
Instead of saying Automatic, select these things
| | 05:30 | and change the Rasterization from PNG to JPEG.
| | 05:34 | I'm going to leave this at 300 ppi, and all
we do is change the rasterization format.
| | 05:41 | Let's export this one more time.
| | 05:45 | There might be other vector illustrations that
will be exported as PNG, because it automatic
| | 05:50 | but that one will be converted as a JPEG.
| | 05:53 | Looks the same in Adobe Digital edition,
let's take a look at it on the iPad. Ah-ha!
| | 05:58 | All right, so now it's got a white background.
| | 06:02 | And this is actually what it will look
like on a color Kindle Fire or any other color
| | 06:06 | Kindle device is that though the Kindle does
except the PNG files, it does not support transparency,
| | 06:12 | so it will always put a
white rectangle behind it.
| | 06:15 | So there is nothing wrong with using
vector illustrations with transparency, just make
| | 06:19 | sure that there are no really important
elements in there that are pure black that will be
| | 06:24 | dropped out--or pure sepia for that matter--
that will be dropped out when viewed on a
| | 06:28 | different colored background in the eReader.
| | 06:30 | And actually, there is a very convenient way to
test for that right here in InDesign, because
| | 06:35 | you can change the color of
the paper "The background color".
| | 06:39 | Just go to these Swatches panel and double-
click the Paper swatch, which is defined by default
| | 06:44 | as 0% of all the CMYK colors,
I'm going to make it 100% black.
| | 06:48 | And now every background turns black as though
you're looking at it in night view in the iPad.
| | 06:56 | Now on the iPad your black text will
automatically change to white, so don't worry about what's
| | 07:01 | inside these text frames, but look at any
graphics to see if there are important elements
| | 07:06 | that are disappearing or dropping out.
| | 07:08 | And if so just select them and then switch
the Paper back to white and fix it, you know,
| | 07:17 | rasterize it or fix in
Illustrator and bring it back.
| | 07:20 | You can even do the same thing if you wanted
to test against sepia. You could approximate
| | 07:24 | the sepia color, you could take a
screenshot of the iPad in sepia background, place it
| | 07:28 | in here, and pick up that way,
all sorts of different ways.
| | 07:30 | But sepia is usually like a mix of all the
colors to make a brownish color, something
| | 07:37 | like that, maybe not so heavy.
| | 07:43 | And then if you have like an important vector
illustration that have things colored in sepia,
| | 07:48 | you could see if it's going to show up or
not, or maybe just get a better contrast.
| | 07:52 | So use that cool little ability to change
the color of the paper itself, you do a quick
| | 07:58 | preview of your transparent
graphics before you export to EPUB.
| | Collapse this transcript |
| Creating a cover image| 00:00 | It's important to create a really great
cover for your eBook, because if you look at the
| | 00:05 | Amazon Kindle Store or at the NOOK Store or
the iBookstore, you can see that there are
| | 00:10 | a lot of really neat looking cover designs.
| | 00:13 | And even more so than going to a brick and
mortar bookstore, people often choose an eBook
| | 00:19 | based on its cover.
I know it's horrible.
| | 00:22 | So, you want to make sure that your cover stands out,
and also that it doesn't contain too many details.
| | 00:28 | There are specific guidelines that I'll be
covering in an upcoming video while I talk
| | 00:32 | about creating your eBook specifically
for Apple's iBookstore and the Kindle.
| | 00:36 | But for example, across the board, nobody
wants to see, you know, 20% off on your cover.
| | 00:42 | So, if you already have a cover that's been
designed for print, you probably want to do
| | 00:46 | a version of it just for the eBook.
You want to simplify it.
| | 00:50 | Remember, people are going to be seeing this
on screen and sizes as small as like 1 inch
| | 00:54 | across by 1 & 1/2 inches tall.
| | 00:57 | Now on the other hand, when people open up
the eBook on their eBook reader, they will
| | 01:01 | see it at full resolution, kind of large.
| | 01:04 | And the publisher guidelines do state that they want
your cover image to be high-resolution, meaning 300 ppi.
| | 01:10 | If you stick with the size that say, for example, 6x8,
or 6x9, at 300 ppi you should be in good stead.
| | 01:18 | It doesn't have to be those specific dimensions,
but the Kindle, for example, once it leaves
| | 01:23 | the 600x800 pixel image and actually with
the release of the higher displays in the
| | 01:28 | Kindle line, they prefer a book cover who
has their one side is at least 2500 pixels
| | 01:34 | tall, which works out to about
8 & 1/2 inches at 300 ppi.
| | 01:39 | So, it's kind of a large image.
| | 01:41 | Now, as far as InDesign is
concerned, it's very flexible.
| | 01:44 | You can use the first page in your document
as the cover, like we have here and our friend
| | 01:49 | Mona Lisa in front of her
book about the History of Art.
| | 01:52 | We could tell InDesign to convert this to a
cover image, or we could create a cover image
| | 01:57 | in another program and then link to it.
| | 01:59 | If you want to use the first page of your
InDesign document as the cover image, then
| | 02:03 | there is an extra step
that you probably want to do.
| | 02:06 | You don't want to just go ahead with this
one, for example, that is a background image
| | 02:10 | and then a text frame on top and to go
ahead and export this, because this is going to
| | 02:15 | be included in the eBook itself.
| | 02:17 | The cover image is a separate file that
various eReader devices use to show the reader.
| | 02:23 | Once they open up the eBook, they
are also going to see this version.
| | 02:27 | So, if you don't mind having a replica of
the cover inside the eBook as the very first
| | 02:32 | page--and in fact, lot of my clients
prefer that when you open up the eBook across in
| | 02:37 | a Table of Contents that they see the
cover image, then you keep it here as the first
| | 02:41 | page of the InDesign document,
but you want to rasterize this.
| | 02:45 | So, I'm going to select all the elements on
the first page, and I have shown this in a couple
| | 02:50 | other videos, but I will go through it one
more time, select everything on that page,
| | 02:56 | group it, then with the Group selected, go
to the Object Menu > Object Export Options
| | 03:01 | and Rasterize the group.
| | 03:03 | So, this will only get rasterized
when I export it to EPUB.
| | 03:07 | While it's in InDesign, it's completely editable,
which makes life so much easier than in previous
| | 03:12 | versions of InDesign.
| | 03:14 | As I said, you want to keep at 300 ppi, and
the format should be JPEG, not GIF, and not PNG.
| | 03:21 | Click Done, and now when we export it
to EPUB, I'll press Command+E or Ctrl+E.
| | 03:25 | We will get it out onto the Desktop.
| | 03:28 | Right here in the General Panel under Setup,
you can choose to Rasterize the First Page,
| | 03:33 | which is what we are going to do.
| | 03:35 | You could say None, which I have
done for bunch of other videos.
| | 03:37 | If you are just testing something, you really
don't care about the cover, then you can just
| | 03:41 | choose None, or you can choose an
external image, which I'll show you in second.
| | 03:45 | Right now, we are just going to rasterize the
first page, and everything else can remain as is.
| | 03:50 | I'll click Ok, and there it is opened in
Digital Editions, lovely Digital Editions.
| | 03:57 | Let's make this a little bit smaller.
| | 03:59 | So, there is our cover that is actually
replicated at the inside of this eBook.
| | 04:04 | We're not looking at the actual cover, technically
the cover of this eBook, we're looking inside it.
| | 04:08 | So this is the first page, but because we have
rasterized it in InDesign, it looks really nice.
| | 04:13 | Otherwise, this text would have
turned into text that appears up here.
| | 04:17 | To see the actual cover, you'll need to
use a different EPUB reader that can show you
| | 04:21 | the cover of the EPUB.
| | 04:22 | And you could do it with Digital
Editions if you added it to the library.
| | 04:25 | We're not really doing that here.
| | 04:27 | Instead I'm going to put it on my iPad,
and we'll see what it looks like on the iPad.
| | 04:31 | We're looking at my iPad at my iBooks
application using Reflection, the utility that shows you
| | 04:36 | what's on my iPad screen.
| | 04:38 | And you can see that there is the cover. I
know it's kind of small, but there's a cover
| | 04:41 | with History of Art, and it says Proof on it.
| | 04:44 | If I tap it, and it opens up, then oh I
didn't set anything to force Chapter 1 to start at
| | 04:50 | the top of its own page, but you
can see the cover is replicated.
| | 04:53 | If I tap this to show the Table of Contents,
in iBooks you will always see the replicated
| | 04:59 | cover across from the navigational TOC,
which I think is a nice touch. I like that.
| | 05:04 | Many times your InDesign document will not
have the cover as the first page, instead
| | 05:09 | you will have a cover that the Art Department created
in Photoshop or that an outside freelancer gave you.
| | 05:14 | And in that case, when you export
to EPUB, you choose to link to it.
| | 05:19 | So I'm going to go ahead and do that.
| | 05:20 | So, for the cover instead of rasterizing
the first page, I'm going to choose an image.
| | 05:25 | And I have a lovely work of
art here called bookcover.jpg.
| | 05:30 | And now we'll export to EPUB, and let's
look at this in the iPad, and now the cover is
| | 05:35 | that beautiful purple thing that says, My book.
| | 05:38 | As an extra little bonus, you probably don't
need it, but just in case, I created a Photoshop
| | 05:43 | template for your book cover.
| | 05:45 | Anybody who is ever used Photoshop before
knows how to do this already, but I'm thinking
| | 05:49 | that there might be some beginners
that would appreciate something like this.
| | 05:52 | Essentially, it's is a layered Photoshop file
that just has a background and then a couple
| | 05:56 | of text layers where I
wrote My book by AM Concepcion.
| | 05:59 | The main thing to keep an eye out for
here is the dimensions of this file.
| | 06:04 | It's 300 ppi, it's 6x8 inches, that
should work for basically any eBook reseller.
| | 06:10 | Then once you have created your own artwork
on this template, to turn it into a JPEG you
| | 06:15 | don't want to choose Save for Web, because
that would reduce the image resolution to 72.
| | 06:20 | Instead, you want to do a Save As and
save it as a JPEG from within Photoshop.
| | 06:26 | Let's put this on the Desktop and then here
under Image Options you want to keep an eye
| | 06:31 | out on the File Size, because if you left
it at large file, this is going to be a 433K
| | 06:37 | image, which is perfectly fine for iBooks.
| | 06:41 | But if this is going to be for Kindle all
images need to be below 127K, and so you can
| | 06:47 | see with the Preview box turned on as you
reduce the quality, and the file size gets
| | 06:52 | smaller what happens to your image.
| | 06:54 | So, this is a nice little feature
in Photoshop that you can tweak it.
| | 06:58 | Say for example, that I bring it down to
under 127K, and I got some really bad artifacts
| | 07:04 | happening here, I might cancel it and then
edit what my book design looked like so that
| | 07:09 | it looks really good for
the Amazon Kindle Store.
| | 07:11 | So you see, we're not reducing the resolution
or the dimensions, we are just increasing
| | 07:15 | the amount of compression
to get this file size down.
| | 07:20 | Whether you are linking to an external file, or
using the first page of your InDesign document
| | 07:25 | as your cover, InDesign has you covered.
| | Collapse this transcript |
| Adding video to the EPUB| 00:00 | Getting a video and audio for that matter
into your EPUB is quite simple with InDesign CS6.
| | 00:08 | Yay! You don't have to do anything special
to the exported EPUB in order for you to see
| | 00:14 | the video and hear the
audio in iBooks on the iPad.
| | 00:18 | For other devices, you might want to test it out.
| | 00:21 | For example, a lot of the Kindle solutions
don't support video, maybe the device shows
| | 00:26 | it, but the software does not or vice-versa, so
it's more of a crapshoot where that's concerned,
| | 00:31 | but if you're just trying to make rich media
EPUBs to give away or sell on the iBook store,
| | 00:37 | then you're in luck.
| | 00:39 | I have opened a one-page InDesign file,
and I want to place a video in here.
| | 00:44 | Now the one thing that you want to do is make
sure that your video is in the right format,
| | 00:48 | and that is H.264, that's the encoding,
save as an MP4 or MV, as in Victor 4.
| | 00:57 | Now if you're like me, your camera saves
videos as MOV files or maybe you have really old
| | 01:03 | other format videos. What do you do?
How you convert your video to H.264?
| | 01:07 | Well, if you have InDesign, then you also have the
Adobe Media Encoder, which I have queued up here.
| | 01:14 | This is quite an intimidating little
interface in my opinion, especially if you're not used
| | 01:18 | to working with video like me, but it's
actually quite simple for what you want to do.
| | 01:23 | First, you just need to bring your video
into this panel on the upper left. You can drag
| | 01:27 | and drop it from the Finder, or you can just
click the plus symbol, so I'm going to drag
| | 01:31 | and drop it right from the Finder I think.
| | 01:33 | I have this video that I took off of a boat of a
pelican flying right by us, so it's really cool.
| | 01:39 | So I'm going to drag and drop pelican.mov
there, and then once you have it in what's
| | 01:45 | called a queue, underneath where it says pelican.mov,
you choose H.264 from the dropdown menu, it
| | 01:53 | saying H.264 because that was the last time
that I used so that where I set it to, but
| | 01:57 | it might say AIFF or some other strange thing
here, choose this regular H.264, then there's
| | 02:03 | another dropdown where it says,
how do you like it optimized?
| | 02:07 | And I just choose a later
version Apple TV, iPad at 720.
| | 02:13 | If it's a high-def video, you can choose one
of the high-def options as well, but I have
| | 02:18 | had good luck with this one right here, and
then this says where it's going to output it for.
| | 02:23 | So you can see it's going to output as an MP4.
| | 02:25 | If I want to export it to some other location, I
can click here and choose a different location,
| | 02:30 | and I can also change the name, but I'll leave it at
that, and then you just click, go, do it, make it so.
| | 02:39 | Yay, I love that happy sound.
| | 02:42 | Right, so that's how you convert your videos
to the right format, and I already have one
| | 02:47 | that I want to use in this document that
we have used at lynda.com for other things, that's
| | 02:51 | called Glass_Blower_Master, it's a
really neat movie, so let's bring that in.
| | 02:56 | All you need to do in InDesign is place it
as they were another image, so I'm just going
| | 03:00 | to press Command+D or Ctrl+D, put it on my
Desktop, we want to bring in Glass_Blower_Master.
| | 03:05 | It's a good idea just to click it and let
it come into its full size, and then you want
| | 03:13 | to scale it to fit inside your text, so I'm
going to hold down the Command+Shift or Ctrl+Shift
| | 03:18 | on the PC and drag a corner, that's about right.
| | 03:22 | I am watching the Width field in the Control
panel, because usually a Width of 320 pixels
| | 03:28 | across is kind of standard, so I'm going to
go ahead and get there, that's close enough,
| | 03:33 | and now just like any other image,
you want to anchor it inside the text.
| | 03:37 | So I'm going to zoom in here, and
do I have a style for inline images?
| | 03:46 | So I'll make one really quick, inline, and all
I want to do is make sure that the first line
| | 03:56 | indent is 0 and the Leading is Auto, good.
| | 04:06 | Now I'm going to hold down the Shift key as I
drag the anchor control so that anchor is at inline.
| | 04:12 | Now before you export, you want to choose
what's called a poster image. You don't want somebody to
| | 04:16 | turn to this page in your eBook
and see a black square, right?
| | 04:19 | So you need to choose what's going to show
up before they start playing it, and you can
| | 04:23 | do that right here in InDesign.
| | 04:24 | There is another panel that we don't have
open right now in my EPUB workspace, if you
| | 04:30 | do I work with videos, you probably want to
add it to your EPUB workspace, that is the
| | 04:35 | Interactive panel. You want to
choose the one called the Media.
| | 04:39 | They added the Media panel back in
InDesign CS5, and it is so wonderfully useful.
| | 04:44 | When you have a video selected, you can preview it right
here in the Media panel, so I'm clicking the Play button.
| | 04:54 | And it goes on, and it's all
about this person that blows glass.
| | 04:57 | Now what I want to do here is now just make
sure that it's everything that I want in a
| | 05:00 | movie, there is the correct movie, but also I'm
going to choose a poster image from a frame.
| | 05:04 | So that's just called the poster image,
so I'm going to scrub through here, just drag
| | 05:09 | it around and kind of like that
one to use as the poster image.
| | 05:13 | So when you find the frame that you want to
use, when you have scrub to that right point,
| | 05:17 | click this little guy over here, and that turns it
into the poster image, wasn't that nice and easy?
| | 05:22 | I love that.
| | 05:23 | Now if you want to choose different
controllers as well, meaning controls for pausing and
| | 05:28 | fast forwarding the video, you can, but I
found that the iPad automatically adds the
| | 05:33 | controls that you need, so I think I might
just choose skin over all and leave it at
| | 05:37 | that, just in case they change something in
the iBook software, at least we have a fallback
| | 05:42 | of our own controls.
| | 05:45 | And I'll turn on Show Control on Rollover
so that it's not sitting on top of the video
| | 05:49 | while it's playing.
| | 05:50 | Let's export this to EPUB, I'll export it
right to the Desktop, nothing special really
| | 05:59 | that you need to do here, and I'm just going
to click OK, it opens in Adobe Digital editions,
| | 06:06 | which I does not know anything about video,
so you can't preview it here, unfortunately.
| | 06:10 | You can't preview it in the EPUB reader extension in
Firefox either, you actually have to put it on the device.
| | 06:17 | So I'm going to add it to my iPad.
All right, let's see how it looks.
| | 06:22 | I'll open up the proof, and there is our
eBook, let me just flip the page, there is our video,
| | 06:29 | and I tap the video, and it's playing.
| | 06:40 | The controls that we see here are
coming right from the iBook software.
| | 06:45 | If I wanted to look at it full-screen I
could tap this icon right here, and it would take
| | 06:49 | over the entire screen, then I could click
a Done button to come back here and watch
| | 06:53 | it inline. I can't really do that in this
cool software that I'm using, because it's
| | 06:58 | using Airplay, so you could use Airplay to
send it your TV, I guess, if you wanted to,
| | 07:03 | but it also plays if I turn this
portrait and start the video that way.
| | 07:08 | Now if I wanted this video to be centered
in the page, then I would edit the CSS.
| | 07:12 | I will be showing you how do
that later on in this video title.
| | 07:17 | I can tell you that in previous versions
of InDesign trying to get a video working in
| | 07:22 | an EPUB was a hit or miss operation, but I
think they have finally nailed it in InDesign CS6,
| | 07:26 | quite simple to do as long as you have
the video in the right format, you're good to go.
| | Collapse this transcript |
|
|
6. Exporting to EPUB2 and EPUB3 Choosing general export options| 00:00 | In this chapter, I want to go through each
of the three panels in the EPUB Export Options
| | 00:05 | dialog box so that there is one place in
this title where all of these items are
| | 00:11 | referred to or talked about.
So let's start with the General Panel.
| | 00:14 | We have been creating Version 2.0 EPUBs
throughout the title, and we will be.
| | 00:19 | That's currently the standard--well, currently
it's the real-life standard, the theoretical
| | 00:23 | standard is EPUB 3, which was ratified by the
idpf.org, the people in charge of this kind
| | 00:30 | of this thing about a year ago.
And EPUB 3 is the future for EPUBs.
| | 00:35 | It includes a lot more
interactivity and facilities for rich media.
| | 00:40 | Apple announced a few months ago that
the iBooks application does support EPUB 3.
| | 00:44 | And if you follow some of the blogs and
forums that I'll be recommending that you follow
| | 00:48 | in the very last video in this title, you
will see that EPUB 3 and who supports it and
| | 00:53 | who is doing stuff with
EPUB 3 is a very hot topic.
| | 00:56 | You can rest assured that any eBook that
you create in EPUB 2 will be supported by EPUB 3
| | 01:02 | readers anyway for the
next few years, I'm sure.
| | 01:05 | That's why the default is when you
export to EPUB, you export EPUB 2 or 1.
| | 01:09 | You could export to EPUB 3, that's a new
feature in InDesign CS6, and I'll be talking about
| | 01:14 | what's different in EPUB 3 in an upcoming video.
| | 01:17 | This last element is I don't even
know why it's there and nobody knows.
| | 01:21 | I think that they meant to do something,
but it's not ready yet, EPUB 3 with Layout.
| | 01:26 | You see it has a big X, a warning symbol,
and it's telling you it's an experimental
| | 01:30 | format that they are working on.
| | 01:32 | Hopefully, it will be something that's going to
be around by the time CS7 or maybe CS7.5 comes out.
| | 01:38 | And I believe it's going to include EPUB 3 and a lot of
really cool rich media and liquid layout kind of rules.
| | 01:45 | But for now, there's really, even if you
created an EPUB 3 with Layout, even if you exported
| | 01:50 | it to that, no EPUB reader could open it.
| | 01:52 | So, they haven't even updated Adobe Digital
Editions to support their own format, kind of crazy.
| | 01:59 | Keep it at EPUB 2.
| | 02:01 | Then going to Setup, we talked
about creating a cover for the EPUB.
| | 02:05 | You can choose to Rasterize the First
Page or to link to an external image.
| | 02:09 | If you want to create a nice navigational
Table of Contents that links to different
| | 02:14 | sections of your eBook then you would set
that up by creating a TOC Style, and here's
| | 02:19 | where you choose the TOC Style.
| | 02:21 | And then this is interesting, you
can create margins for your eBook.
| | 02:25 | Now, there are some eReaders like the
older NOOKs that really prefer that you added a
| | 02:29 | page margin of 20 pixels at the
bottom, and sometimes it was 40 pixels.
| | 02:35 | And that was normally something that
you could only do by editing the CSS file.
| | 02:39 | If a device manufacturer has set recommended
settings for margins, they will tell you, and
| | 02:44 | this is where you would input it here.
| | 02:46 | But in my experience, most eBook
devices already impose their own margins.
| | 02:50 | So there's really no reason for you to add them.
| | 02:53 | And then the last part under Setup is
Content Order, meaning as I export this EPUB,
| | 02:58 | Anne-Marie, in what order do you
want me to export all the content?
| | 03:01 | Based on Page Layout, which is go to the first
spread, take a look at what's on the far left
| | 03:05 | and export that first and then go left to right
and top down, or based on the Articles Panel or based
| | 03:12 | on the Structure of the XML file?
| | 03:14 | And all these I covered at
some point in this title.
| | 03:17 | Then under Text Options, what
should it do with footnotes?
| | 03:20 | Do you want it to place the Footnote After
the Paragraph or at the end of the story,
| | 03:24 | which is the HTML document?
| | 03:26 | So, if it's chunked up into multiple HTML
files, it will appear at the end of that HTML
| | 03:32 | file where the footnote was referenced.
| | 03:33 | In other words, when you use footnotes in your
documents, they appear as endnotes at the end.
| | 03:39 | They are linked, the reference in
the text does linked to the endnote.
| | 03:43 | If you think that's too far for somebody to
go and they never going to be able to find
| | 03:46 | the way back, you could choose
to put it after the paragraph.
| | 03:49 | So, the footnote appears
right after the paragraph.
| | 03:52 | And you can choose to have
InDesign Remove Forced Line Breaks.
| | 03:56 | And let's take a look at both of these.
| | 03:57 | Let me just click Cancel, so
we can see what we have here.
| | 04:01 | I'm going to zoom in a bit.
| | 04:02 | I added a footnote after this word platform, and if you
weren't familiar with the platform, we can tutor you.
| | 04:08 | Then I also added over here a line break.
| | 04:11 | So, a line break is when you hold down Shift,
and you tap the Return or Enter Key, and that
| | 04:17 | just forces a new line, it's like a soft return.
| | 04:20 | The thing is that some people do it only after a
space or some people add a line return without any space.
| | 04:26 | That is a kind of an issue.
| | 04:27 | So, if I had this sentence, from concept
development, I might hit a line break right here, looks
| | 04:33 | like this little Allen Wrench.
| | 04:35 | And now there is no space
in between from and concept.
| | 04:38 | Over here between the word through and
sketching and the person apparently added a line break
| | 04:42 | to prevent it from hyphenating--
I hate it when people do that.
| | 04:45 | People do this a lot for print, and this is
why you don't want to have it in the eBook.
| | 04:49 | That's why InDesign offers it as an option.
| | 04:52 | Because it is supported in EPUBs, and it will
look like a soft line break, and it look really
| | 04:56 | dumb, because you don't have
the same column width, right?
| | 04:59 | I'm showing you what it looks like if you
use a space, and if you don't use a space,
| | 05:03 | because what's new in InDesign CS6 is that it
always replaces that forced line break with a space.
| | 05:10 | In previous versions, it did not.
| | 05:12 | So let's do both of these, and let's take
a look at the EPUB after it exports.
| | 05:17 | And honestly, I don't know what order this stuff is
going to be in, but we'll take a look. All right.
| | 05:22 | So here it is. Let's see if we can make this smaller,
so we can get two pages, here we go.
| | 05:28 | Designing a Basic Digital Character, here
is our footnote, and the footnote was right
| | 05:33 | at the end of the paragraph, and we said to
put the footnote at the end of the paragraph,
| | 05:36 | so it's right there.
You don't even need that link.
| | 05:38 | But imagine, if this is a really long paragraph
and the reference was early in the first sentence,
| | 05:42 | it would be nice to have that footnote right
there after the paragraph rather than having
| | 05:46 | to go to the end of this chapter.
| | 05:48 | And we're not having any problems with
removing the line breaks over here, because word added
| | 05:54 | a space made sense, and if there are two
spaces in a row then HTML automatically ignores two
| | 05:59 | spaces and replaces it with one space.
| | 06:01 | So, it's a nice little additional feature in
InDesign CS6, to replace it with a space,
| | 06:06 | so you don't end up with two words concatenated
together, which is how it used to work in previous versions.
| | 06:11 | The only time that you're going to run into
a problem, though, is if you are using line
| | 06:14 | breaks to break up URLs.
| | 06:16 | So, it's going to add a space in that case,
and that space will be maintained, because
| | 06:21 | it's a single space.
So you have to watch out for that.
| | 06:23 | Let's look at the final two
options here, actually there is three.
| | 06:28 | Bullets and Numbers, this is normally--I
always want to keep this set at the default.
| | 06:33 | There is such an HTML entity known as an Unordered
Lists and an Ordered Lists, it works automatically
| | 06:38 | just like automatic bulleted lists and automatic
numbered list works in InDesign and in Word for that matter.
| | 06:45 | But if you don't want it to do that, if you
want it to be straight text, you can choose
| | 06:48 | to Convert it to Text, and this works just like how it
works in InDesign when you convert something to text.
| | 06:55 | Finally, you can choose to View the EPUB
after Exporting, or if you really don't care what
| | 06:59 | it looks like, you can turn that off.
| | 07:01 | And those are the settings for the
General Panel of EPUB Export Options.
| | Collapse this transcript |
| Choosing export options for images| 00:00 | I don't think I need to go into a whole lot of detail
with the Image Panel here in the EPUB Export options.
| | 00:06 | If you want to learn more detail, definitely
watch some of the videos in the previous chapter
| | 00:10 | where I talked about all sorts of cool things that you
can do with images and changing these settings around.
| | 00:15 | But just to recap, let's run through them.
| | 00:18 | First, the default is to preserve
appearance from layout, meaning that when you export
| | 00:22 | to EPUB, your images will look the same as
they did in the layout more or less, but they
| | 00:27 | will maintain the same crop, rotation if you
applied any special effects to them like drop
| | 00:31 | shadow, even Bevel and Emboss, all those
kind of fun things will be carried through.
| | 00:36 | If you turn it off, then it's going to ignore
anything you did to the image inside InDesign
| | 00:41 | and just export the entire image at the
resolution that you specify, which brings us to this.
| | 00:46 | Which resolution should
the images be at in the EPUB?
| | 00:49 | Any image that is currently over this
setting will be down-sampled internally in InDesign
| | 00:55 | when it exports to EPUB.
| | 00:57 | If you don't like the way that InDesign down-
samples images, that means reducing resolution, then
| | 01:02 | you should down-sample them yourself in
Photoshop, make them nice and sharp, get them exactly
| | 01:07 | how you want, and then replace those images
in InDesign with those, because if during
| | 01:12 | the export InDesign encounters an image that's already 150
pixels or lower than that in resolution, it won't touch it.
| | 01:20 | If it's 151 pixels or more in
resolution, it's going to resample it down.
| | 01:25 | 150 is a good number for most EPUB readers.
| | 01:29 | Do you want the image size to be fixed so
that no matter what dimensions the screen
| | 01:35 | reader is at, the image is the same dimensions, or
do you want it to change relative to the page width?
| | 01:40 | And the page width for the purposes of
eReaders is essentially the same as the screen width,
| | 01:45 | minus any margin settings.
| | 01:47 | For images that are floating in the document,
then in other words, they are not part of
| | 01:52 | a text flow, but of course they will get
exported anyway, how do you want InDesign to align
| | 01:56 | them and do you want InDesign
to add any spacing around it?
| | 02:00 | What you set here will be converted to
attributes for the div which is kind of like a block
| | 02:06 | or a section that each image goes into.
| | 02:10 | If you want all the images to be centered,
then choose Center Alignment, and if you want
| | 02:13 | space above or below, then you
can enter a number in pixels here.
| | 02:17 | You can also use InDesign to force an image
to be at the top of the page by turning on
| | 02:23 | Insert Page Break before image.
| | 02:25 | Now remember, everything that you're setting
here will apply to all the images in the eBook.
| | 02:31 | So, here is where you should set some defaults.
| | 02:33 | You probably don't want a page
break before every single image.
| | 02:37 | If you want certain images to have certain
resolutions or alignments or a page break,
| | 02:42 | you do that in Object Export
Options before you export to EPUB.
| | 02:46 | If you want your settings to also apply
to anchored objects, then turn that on.
| | 02:50 | Honestly, I have found iffy results with this.
| | 02:53 | Usually, when you anchor an object, the
alignment, for example, is governed by the paragraph
| | 02:58 | style that contains that image.
| | 03:01 | So, if the paragraph is left-aligned, then the
image will be left-aligned, even if you said centered.
| | 03:06 | I don't know if this is a bug or if I'm
doing something wrong or maybe there's an update
| | 03:10 | coming, but I would test
this little setting right here.
| | 03:13 | Image Conversion, you can place anything
that you want into an InDesign file just as you
| | 03:17 | would for print, all sorts of layered
Photoshop files, RGB, CMYK, EPS files, other InDesign
| | 03:24 | files, In Design will convert all placed
and linked files to an image and what format
| | 03:29 | should it export to.
Automatic is the one to leave it on.
| | 03:33 | And automatic means in real world that
almost everything is going to be exported to JPEG,
| | 03:37 | which is perfectly fine.
| | 03:39 | If it encounters any Illustrator or other
vector artwork that has transparency, then
| | 03:44 | it will convert that to a PNG file, and it
will rasterize that vector image according
| | 03:50 | to this resolution up here.
| | 03:52 | If you said for some reason that you want
everything rasterized to a GIF, then what
| | 03:57 | GIF options do you want honestly?
| | 03:59 | I think this is probably like the appendix
of the EPUB Export Options dialog box.
| | 04:04 | I don't know when this was ever used or
anybody who needs to change this, I guess leave it
| | 04:09 | at Adaptive is fine, and Interlace.
| | 04:11 | Interlace is just an old school setting for GIFs
that are really large over very slow connection.
| | 04:17 | Really does not make any sense for an EPUB
since you're not going to see an image until
| | 04:20 | the entire EPUB has been downloaded already.
So, what difference does that make?
| | 04:25 | If you say Automatic, then you can set
your GIF options and also JPEG options.
| | 04:29 | Now, this one does make a difference.
| | 04:31 | You usually want to set your
image quality at high or maximum.
| | 04:35 | If you have a book with many, many images,
you might want to reduce it just to keep the
| | 04:40 | file size of the entire
EPUB to a more manageable size.
| | 04:43 | Can you just export the entire thing?
| | 04:45 | Put it on your eBook device, see if the
images are acceptable or not, if not, you can mess
| | 04:50 | around with this a little bit more.
The Format Method is kind of like Interlace.
| | 04:54 | This just means that when the JPEG appears
on the screen, if you choose Baseline, you're
| | 04:59 | not going to see the JPEG until it's
fully loaded into your device's memory.
| | 05:04 | If you choose Progressive, you'll see a
few lines at a time appear as it draws.
| | 05:08 | In most cases, this is not
going to make any difference.
| | 05:11 | As soon as you flip to the page,
the JPEG is there, the end.
| | 05:14 | Now, if you have selected certain images in
your document and tweaked their settings via
| | 05:19 | the Object Export Options dialog box from the
Object Menu, then these settings will not apply.
| | 05:25 | The ones that you set in
Object Export Options will apply.
| | 05:28 | But if you want to override whatever
somebody did to all the individual images, you would
| | 05:33 | turn this on, Ignore Object Export Settings,
and it would apply all these attributes to
| | 05:38 | every single image.
| | 05:40 | This is off by default, and
it's normally what you want.
| | 05:42 | So, lots of different options here
for dealing with all your images.
| | 05:45 | Again, if you want more information, take
a look at some of the videos that I did in
| | 05:49 | the previous chapter where I talked
about working with all your images.
| | Collapse this transcript |
| Choosing advanced export options| 00:00 | I think it's interesting that in CS6, InDesign
renamed, or I guess Adobe renamed this InDesign
| | 00:06 | panel to Advanced, used to be called Content,
and some of this stuff over here was in the
| | 00:12 | end, because I don't think a lot of the
stuff is all that advanced, but anyway.
| | 00:15 | So here we are at the Advanced panel.
| | 00:18 | It's kind of just like a mish-mash
of various different settings.
| | 00:20 | But you definitely have to come
here for just about every EPUB.
| | 00:23 | For example, this is where you would
choose to chunk up a long document to split it.
| | 00:28 | And I talked about this in
great detail in a previous video.
| | 00:32 | But essentially, an EPUB
is a series of HTML files.
| | 00:36 | If you have one long InDesign document,
it's going to export as one long HTML document.
| | 00:41 | If inside that InDesign document, that one
single document, you have multiple chapters,
| | 00:46 | for example, or sections, you probably want
each one of those sections to be a separate
| | 00:51 | HTML file so that the first sentence or figure
in them appears at the top of a page, for example.
| | 00:56 | And here is how you can tell InDesign to go
ahead and split up this document according
| | 01:01 | to Export Tags that you added to a Paragraph
Style, or you can select one paragraph style,
| | 01:07 | for example, course name.
| | 01:08 | If I selected that, InDesign would create
a separate HTML file every time it hit on
| | 01:14 | a course name until I hit the next one.
| | 01:16 | But it would still end up as one EPUB, just
multiple HTML files, which makes it a lot more
| | 01:20 | powerful and flexible when
you are working with the EPUB.
| | 01:23 | But we're going to leave this at Do Not Split.
| | 01:27 | EPUB Metadata, I talked about in a previous
video that you really need to include a metadata
| | 01:32 | with you EPUBs in order for them to be valid
and also, of course, for people to be able to
| | 01:36 | find your EPUB because a lot of people will
search according to the metadata in your EPUB.
| | 01:41 | Some metadata you add in the File > File Info
dialog box over here, other metadata you add here.
| | 01:49 | The publisher is pretty obvious.
It's the name of the publishing company.
| | 01:53 | Then the Unique ID is an interesting field.
| | 01:57 | Every EPUB has to have a Unique ID in its
Metadata section, which is inside an XML file
| | 02:03 | contained in the EPUB called content.opf.
Normally, what goes here is your ISBN number.
| | 02:09 | If you have an ISBN number, and I'll be talking about
how to get one of those, you would put that in here.
| | 02:13 | That is the unique number just for your EPUB,
and you can use the same ISBN number every
| | 02:18 | time you export this to EPUB.
| | 02:19 | Of course, you would use a
different ISBN number for other EPUBs.
| | 02:23 | If you don't have one yet, then
InDesign will automatically create a unique ID.
| | 02:28 | And if I deleted this and choose to export,
it would yell at me, because it's empty.
| | 02:32 | Do you want to generate one?
I am like okay, go ahead and generate one.
| | 02:36 | In CSS options, now Include
Style Definitions is turned on.
| | 02:40 | If I turned it off, you
would still get a CSS file.
| | 02:43 | I'll show you this in an upcoming chapter
when I talk about editing CSS and HTML.
| | 02:48 | But in InDesign CS6, every EPUB
automatically gets a CSS file. That is new.
| | 02:54 | And the default CSS file that's generated
just is very short and has some basic settings.
| | 02:59 | Normally, you'd always want to include your
own style definitions so that your paragraph
| | 03:04 | and character styles are
converted to CSS styles.
| | 03:08 | Do you want to preserve local overrides?
That means manual formatting.
| | 03:12 | If you say yes, then you'll get a much closer
representation in your EPUB according to what
| | 03:17 | your book looks like, especially if
you have used a lot of manual overrides.
| | 03:22 | However, it will be quite difficult to edit just
because there's a lot of extraneous code in there.
| | 03:27 | Most professional eBook designers will remove
all local formatting in the InDesign document,
| | 03:33 | and only use styles, and so they
will turn off Preserve Local Overrides.
| | 03:37 | That's the best way to go for just about any kind
of publishing venture, whether it's digital or print.
| | 03:43 | Do you want to include any fonts that
you're using that are allowed to be embedded?
| | 03:47 | I talked about this in a previous video.
But if you want to, just turn it on.
| | 03:51 | And if you don't want to include those fonts,
and you want to use the EPUB's defaults which
| | 03:56 | the EPUB devices really prefer that
you do, then you can just turn that off.
| | 04:00 | Even if you do choose to include embeddable
fonts, there is no guarantee that the user
| | 04:05 | who is reading your EPUB will switch to a
different typeface, which is very easy for them to do.
| | 04:09 | Now, in addition to the default CSS that
InDesign creates, whether it's short because you did
| | 04:16 | this, you turned off Include Style
Definitions, or it's long because you said also add my
| | 04:21 | style definitions, you can attach
other CSS files, which is really cool.
| | 04:26 | I'll be talking about that
in more detail later as well.
| | 04:28 | But essentially, it just
allows you to add a style sheet.
| | 04:31 | So, if I click Add, and I have another
stylesheet that my client gave me or that I created or
| | 04:37 | that I'm using for a series of books.
| | 04:39 | I can select it here, and it will add it to
the EPUB, and every HTML file that gets exported
| | 04:45 | will link to this as well.
You can add multiple style sheets if you like.
| | 04:49 | Now, the JavaScript Option is grayed out only
because I'm currently set to create an EPUB 2 document.
| | 04:56 | EPUB 2 eBooks do not support JavaScript.
| | 04:59 | But if I switch to EPUB 3, it is one of the features
of EPUB 3 is that you can add a JavaScript as well.
| | 05:05 | Now, you can't really see what happens with
the JavaScript in InDesign, you have to test
| | 05:09 | it in an eBook reader, but here,
since I choose EPUB 3, I can grab this.
| | 05:14 | Now this is not a real JavaScript, so I'm not even
including anything like this in the exercise files.
| | 05:19 | This is just a file that ends
with .js, so it's JavaScript.
| | 05:23 | And like the CSS files, when you export
this to EPUB 3, InDesign will kindly link every
| | 05:28 | HTML file that it exports to this JavaScript
file so that as you add JavaScript tags later
| | 05:34 | when you're editing the EPUB, it will know
what to do because it will be linked to this
| | 05:39 | JavaScript file, and it will work perfectly,
of course, in all of your EPUB devices that
| | 05:43 | support EPUB 3 and JavaScript.
| | 05:45 | So, assuming that most of your EPUBs are
going to be EPUB 2, let's go back here to EPUB 2.
| | 05:51 | Most often, you'll be going to the Advanced
section to change some settings with CSS such
| | 05:55 | as turning local overrides on and off, and to
double check if a document is splitting or not.
| | 06:01 | And like all the other panels, the settings
that you make here are sticky, so the next
| | 06:04 | time you export the same document to
EPUB, these settings will be remembered.
| | 06:08 | So you don't have to keep coming back
here and resetting everything all the time.
| | 06:12 | There you have it, the Advanced settings.
| | Collapse this transcript |
|
|
7. Previewing and Validating EPUB FilesPreviewing EPUBs on your computer| 00:00 | Did you know that almost half of all eBook
readers read eBooks on their computer as opposed
| | 00:06 | to a dedicated eReader or
a Tablet or a smartphone?
| | 00:09 | Well, that's according to some recent research by the
Pew Research Centers Internet and the American life Project.
| | 00:16 | 42% of the respondents said that
they read eBooks on their computer.
| | 00:21 | So it's always a good idea when you are
creating EPUBs to preview them in a software program
| | 00:26 | that runs on your computer as opposed to
previewing them in iBooks or on the Kindle.
| | 00:31 | Now I will be talking about previewing for
iBooks in the next video and talking about
| | 00:37 | all the different apps that you can use to
preview for Kindle in the chapter where I
| | 00:41 | talk about Kindle and converting
your EPUB for other platforms.
| | 00:44 | But I want to run through some of the major
software programs that you can try and download
| | 00:50 | to your Mac or PC to check out the EPUBs
that you are creating, both for EPUB 2, and I'll
| | 00:55 | show you a couple that
will work for EPUB 3 as well.
| | 00:58 | The one that we have been working with in
most of the videos is this, what we're looking
| | 01:02 | at right here, Adobe Digital Editions.
| | 01:05 | Adobe Digital Editions is kind of ubiquitous because
it is the program that is tied into Adobe's Content Server.
| | 01:13 | If you have ever downloaded an eBook that has
DRM, Digital Rights Management, applied to
| | 01:18 | it like say you borrowed a book from the library
or you got something for a NOOK reader, they're
| | 01:23 | all using the Adobe Content Server DRM
technology and Adobe Digital Editions, the software is
| | 01:30 | basically where you check in your book.
| | 01:33 | If you downloaded something from the NOOK
Store on your computer, you would have to
| | 01:36 | open it up in Adobe Digital Editions first to check
it in before you could add it to your NOOK device.
| | 01:43 | If you go to adobe.com and just search for digital
editions, you are going to be brought to this page.
| | 01:48 | Making Reading an Engaging Experience,
Installed Digital Editions, so if you don't have ADE,
| | 01:55 | and I often encounter people who are creating
EPUBs, they are like I don't have ADE installed,
| | 01:59 | then this is where you
would get the default one.
| | 02:02 | I find that it does a better job of
accurately previewing on-screen what's going to appear
| | 02:07 | in most other EPUB readers, especially iBooks.
| | 02:10 | It's not perfect as you can recall from
some of the videos where I showed how different
| | 02:13 | some things look likely the
backgrounds of tables, for example.
| | 02:17 | After Adobe Digital Editions, probably the
program that I use most often, and that I
| | 02:21 | think a lot of end-users will be
using is Firefox's EPUB Reader plug-in.
| | 02:26 | I switched over to the Firefox browser and
with this plug-in installed, you can just go
| | 02:31 | to the File menu, choose Open File, and then
navigate to any EPUB that you have on your
| | 02:38 | hard drive, and it will open up, as you can see.
| | 02:40 | On the left is the navigational TOC, and then
you can use the buttons to scroll left and right.
| | 02:46 | It does quite a good job of previewing your EPUB, I think
even better in many ways than Adobe Digital Editions.
| | 02:53 | However, it is not a stand-alone program,
it's something that you have to install in
| | 02:57 | a browser and then open from that browser.
| | 02:59 | I have the home for
EPUBReader queued up here in Safari.
| | 03:03 | Essentially, if you just search for the EPUBReader
extension or plug-in for Firefox, you'll end up at this page.
| | 03:10 | 75 users give it 5 stars, that's pretty good.
| | 03:13 | A number of users who are early adapters
of the eBook reading experience are very
| | 03:19 | fond of Calibre, and it's not
pronounced Calibre, its Caliber.
| | 03:23 | So if you just search for Calibre on the net,
you'll see it is a free program that's available
| | 03:29 | for Mac, Windows and Linux, created by this
wonderful guy name Kovid Goyal, and it provides
| | 03:35 | a lot of support for Calibre users, by the way,
in couple of the forums that I'll be talking
| | 03:40 | about in the last video
in this title, Next Steps.
| | 03:43 | Essentially, you add your eBooks to the
Calibre library and then when you double-click one,
| | 03:48 | like I'll double-click on Alice's Adventures,
it opens up in a separate little sub-program
| | 03:53 | that is just for reading the EPUB.
| | 03:59 | And like a regular EPUB reader, it gives
you the impression that it's swiping left and
| | 04:03 | right or you can scroll down and up.
| | 04:08 | Now I know a lot of eBook producers and
designers also use Calibre to convert files from one
| | 04:13 | format to another, like you can use Calibre
to convert an EPUB document into an Amazon
| | 04:18 | document to a Kindle file, and it can convert
HTML files into EPUB files and all this will
| | 04:24 | work as long as there is no DRM applied to the
existing EPUB file that you're trying to convert.
| | 04:31 | But that's really not the focus of this
video or of this title. I really don't recommend
| | 04:35 | that you use Calibre as your eBook production
and editing tool only because there are many
| | 04:41 | times when the code that it adds will make
it invalid or if you try to upload a file
| | 04:47 | that's perfectly valid, sometimes it gets
kicked back and even on Amazon's Kindle site
| | 04:52 | it says please do not use
Calibre to convert for us.
| | 04:55 | I don't know why. I think as long as you
can open it up on the Kindle, works fine, but
| | 04:59 | they don't want you to sell it on the
Kindle Store if it's been converted with Calibre.
| | 05:04 | So it's great for personal use, but not really for
professional, getting an eBook ready for a reseller.
| | 05:10 | But because there are so many people who
are using Calibre to manage their own personal
| | 05:15 | library of eBooks, it's a good idea to check
out what your EPUB looks like in Calibre 2.
| | 05:20 | There is an online EPUB reader that has a
beautiful job called Ibis Reader, and if you just go
| | 05:26 | to ibisreader.com, it lets you upload all of
your EPUBs and then read them right here on-screen.
| | 05:33 | So that's really nice because it means no
matter where you are as long as you have Internet
| | 05:36 | access, you don't need to bring along
your eReader device or any of your eBooks.
| | 05:41 | They're stored in the cloud, and you can read them
using any browser by just going to ibisreader.com.
| | 05:47 | This is also a free service, and the only
aggravating part about it is that you'd have to upload
| | 05:51 | your eBook, if you already have it. You can't just
read it, view in your browser, you have to upload it.
| | 05:55 | Now if you are in a Mac, you're in luck because
there is a new app, not too expensive, called Bookle.
| | 06:02 | It's extremely simple and doesn't have a
lot of bells and whistles, but it works as a
| | 06:06 | stand-alone EPUB reader, Mac-only at this
point, and here I have queued it up, and I have opened
| | 06:11 | up Alice in Wonderland.
| | 06:14 | It does not do side-by-side pages, it
only lets you read an eBook by scrolling.
| | 06:22 | So here's The Pool of Tears.
| | 06:25 | It does a very good job of supporting the
EPUB 2.0.1 standard, not quite ready for the
| | 06:30 | EPUB 3 yet, though.
You can get Bookle by going to the app store.
| | 06:35 | None of these apps that I have showed you so
far though support EPUB 3, and if you are
| | 06:41 | venturing into EPUB 3 territory, and you want
to preview it on your computer, there is really
| | 06:46 | only one solution that I know of, and it's
not really for the general public, it's the
| | 06:50 | Chrome extension called Readium.
| | 06:53 | I'm switching over to Chrome, and you just
do a search for the Readium project, and you
| | 06:57 | can download Readium and install it.
It only works in Chrome.
| | 07:00 | It works both on the Mac and the PC.
| | 07:03 | Readium works with both EPUB 2 and EPUB 3, but
most people are using it to test out EPUB 3 eBooks.
| | 07:10 | It also works with fixed layout EPUBs.
| | 07:13 | If I add an item, and I'll choose it from my
local hard drive, here is Lost Highway,
| | 07:25 | this is a fixed layout EPUB and what it has
to do is it extracts, it sort of pulls apart
| | 07:30 | everything inside that EPUB and then
puts it back together for the eReader.
| | 07:36 | Using Readium, you can preview things like
video and sound, you can preview fixed layout EPUBs.
| | 07:43 | I believe that they have just released a new
update that lets you preview Read Aloud EPUBs,
| | 07:49 | and upcoming features will include the entire
pantheon of EPUB 3 features such as, you know,
| | 07:54 | JavaScript and MathML and so on.
| | 07:57 | But here is the fixed layout EPUB that I did
for another title here at lynda.com, and it
| | 08:04 | does a very nice job.
| | 08:06 | So ladies and gentlemen, there we have it.
It is a motley crew at best, I can say.
| | 08:12 | Mainly on the desktop, you're using ADE to
preview your EPUBs, and you might want to
| | 08:17 | check them out also in Firefox and in Calibre because
your customers might also be reading your EPUBs there.
| | 08:25 | But if you're creating EPUBs for sale in the
iBookstore or the NOOK Store or the Kobo Store
| | 08:31 | or the Amazon Kindle Store, then the best
place to preview your EPUBs as you are working
| | 08:36 | is on those devices.
| | 08:38 | Unfortunately, only a few of those device
manufacturers have software that runs on a desktop, and
| | 08:43 | I'll be talking about those in the chapter when I
talk about converting your EPUB for other eSellers.
| | 08:49 | In the meantime, it's a good idea to stay
up to date on what's happening with each of
| | 08:52 | these programs updates, and if you run
across any kind of EPUB reader that runs on a Mac
| | 08:58 | or Windows that I haven't shown you here, please by
all means contact me. I'd love to check it out.
| | Collapse this transcript |
| Previewing for the iBooks app| 00:00 | It's killing me that after all these years
of doing EPUBs for iBooks that Apple still
| | 00:05 | has not released any kind of software that
runs on the desktop for Mac or Windows that
| | 00:11 | lets you proof what your
eBook will look like in iBooks.
| | 00:15 | Kindle has that software, the Kindle app for
the Mac or Windows, and so does the NOOK, and
| | 00:20 | so does Kobo and many other devices,
even Sony has a reader, but iBooks does not.
| | 00:26 | If you go to the App store, and you type in
EPUB--which I do probably at least once a week
| | 00:31 | to see what's new from Apple regarding EPUBs
or any developers who are listing there--always
| | 00:36 | searching for one called iBook Preview or
iBook for Mac, but no, it's not there.
| | 00:41 | Lots of other very interesting ones that you
should take a look at when you get a chance.
| | 00:45 | The closest thing that we see that has iBooks in the
title is iBooks Author, which is another program entirely.
| | 00:51 | It's for creating eBooks in the iBooks format.
| | 00:54 | And I know that it gets very confusing, but
it has nothing to do with proofing your EPUBs
| | 01:00 | in the iBooks app for iOS.
| | 01:03 | lynda.com has a great title here, by
the way, on how to use iBooks Author.
| | 01:07 | So what are we left with?
| | 01:09 | If you want to proof your EPUB on the iPad,
you need to get it on the device, right now
| | 01:13 | there's no other solution.
| | 01:15 | I am going to show you four
different ways that you can do so.
| | 01:18 | Let's start with the way that's accessible to
anybody and costs nothing, and that is by using iTunes.
| | 01:23 | I guess you could call it the official way.
| | 01:26 | You download iTunes for the Mac or for Windows,
log in, and then you plug in your iPad and
| | 01:31 | your iPad will appear as a device here.
| | 01:34 | Then you take the EPUB that you have created,
and I have created a bunch of saved one on my
| | 01:38 | desktop, and you add it to your iTunes Library,
and then you'll be able to sync it with your iPad.
| | 01:44 | So if I go to the File menu, and I choose
Add to Library, and I locate an EPUB that
| | 01:50 | I have created that I want to preview, I select
it, click Open, it appears in my iTunes Library,
| | 01:58 | right here, here is one that
I was playing with earlier.
| | 02:01 | And then on the iPad, I would go to Books,
turn on Sync Books, and it's saying are you
| | 02:07 | sure you want to do that, of course, I don't
want to do that because this computer is not
| | 02:10 | my main computer, and I don't want to sync
this computer's collection of books with my iPad.
| | 02:15 | So I am going to click Cancel here.
| | 02:17 | But what you would do would be to turn on
Sync Books, and then you could choose which
| | 02:21 | books you want to sync, it would be History-of-
Art, and then you could switch to the iPad, see
| | 02:26 | the History-of-Art eBook.
Oh, I got something wrong.
| | 02:29 | And then you would start all over again.
| | 02:31 | You go back to InDesign Export, make your change,
export back out to EPUB, come back to iTunes,
| | 02:38 | add that new version to iTunes, sync
again, take another look at the iPad.
| | 02:44 | So it's possible to do. I would recommend,
though, that if you're going to use the iTunes
| | 02:47 | route, that every time that you export a
new version of your EPUB that you would change
| | 02:52 | something in the metadata because that
will help you to avoid any caching issues that
| | 02:57 | the iBooks app sometimes has where it
remembers a previous version and refuses to show you
| | 03:02 | the changes in the new version.
| | 03:04 | So change like the title or the
publication date or something like that.
| | 03:08 | As you can imagine, that takes a heck of a
long time to use iTunes, but it's doable.
| | 03:13 | What I vastly prefer, but it's not open to everybody
is to use the Apple secret application called Book Proofer.
| | 03:20 | You may have heard rumors of this. I am
here to tell you, it's true, it does exist.
| | 03:25 | But it's not available publicly.
| | 03:27 | The only way to get this free app is to
sign up for an account with Apple as an iTunes
| | 03:33 | Connect Publisher, and it can't be the free
kind of publisher where you can only upload
| | 03:37 | books that nobody has to pay for, it has to
be the paid publisher where you have to give
| | 03:42 | Apple some of your financial information
like your Social Security number or FEIN, your
| | 03:47 | bank account, that kind of stuff.
| | 03:50 | It is free to do to set this up,
and it only takes a few minutes.
| | 03:53 | I'll be talking about this in
more detail in an upcoming chapter.
| | 03:57 | But once you sign up for a paid iTunes
Connect Publisher account, this is one of the cool
| | 04:02 | tools that you get.
Let me show you how this works.
| | 04:04 | You plug in your iPad or any device, they
would all appear here, you start a Book Proofer.
| | 04:09 | And then you can just drag and drop from
your computer right on to Book Proofer, and you
| | 04:18 | say Sync that with my iPad.
And it is adding it to the iPad.
| | 04:25 | And now using Reflection, which is a cool utility
that shows you what's on my iPad, on the screen
| | 04:30 | you can see that there is the eBook right
there, so I can tap it and open it, and that's
| | 04:35 | really easy to be able to
proof the book that way.
| | 04:38 | Well, what happened to my text?
That looks kind of weird.
| | 04:41 | I am going to go back to the library. Let me show you
something else that's pretty neat with Reflection.
| | 04:47 | Here in InDesign, I am going to export this
very simple EPUB out to the desktop, testing.epub,
| | 04:57 | and it opened automatically
in Adobe Digital Editions.
| | 05:00 | But here I am going to go to Finder and
queue up Book Proofer and drag testing right
| | 05:05 | up here to this magic square, where it syncs
so you can see what it looks like, it's been
| | 05:11 | added automatically, I open it up, and it
says My Beautiful Test EPUB, then say, oh,
| | 05:17 | I didn't want to have the word Beautiful in
there, that was kind of silly, so I am going
| | 05:19 | to go back to InDesign, delete the word Beautiful,
export right to the same place to my Desktop,
| | 05:25 | overwriting the existing one, the thing is
that Book Proofer is remembering where this is.
| | 05:31 | So it's going to automatically sync again,
and if we switch back to Reflection, and I
| | 05:37 | tap the book, there it is.
Very slick, I love that.
| | 05:43 | So I do talk about signing up for a free
iTunes Connect account in an upcoming video, pay
| | 05:47 | attention because it's definitely worth it.
| | 05:50 | I have two utilities that are also very useful
for proofing EPUBs on the iPad, they are right
| | 05:55 | up here, Phone Disk, and Dropbox.
| | 05:58 | I think I could devote an
entire movie to each of these.
| | 06:01 | So I am just going to go over them briefly and leave it
up to you to download and experiment with them yourself.
| | 06:07 | But let me tell you about
Phone Disk first of all.
| | 06:09 | It is a free app that you
can get from macroplant.com.
| | 06:13 | They have recently discontinued it and
they're selling a new paid app instead, but as you
| | 06:20 | will see on their website, you can
still download it from their Downloads page.
| | 06:23 | It's for the Mac or Windows, and what it does is
it mounts your iPhone or iPad on your desktop.
| | 06:29 | Normally, they don't mount, but you
can see I have my iPad plugged-in.
| | 06:33 | And because that I have Phone Disk
running, I can see the contents, right here.
| | 06:37 | So I would still need to add the EPUB to my
iPad the normal way via iTunes, for example,
| | 06:43 | but once it's there I can locate it inside
this Books folder and then edit the contents
| | 06:49 | of the CSS file or the HTML file.
| | 06:54 | And then when I save my changes, it's
actually saving the changes to the iPad.
| | 06:58 | I can switch back to my iPad in iBooks and
close the book and open it again, and I will
| | 07:04 | see the new changes or quit out of iBooks.
Once in a while I found I have needed to do
| | 07:08 | that and open it again,
because I run into the caching issue.
| | 07:12 | The only problem here is trying to figure
out which of these coded EPUBs is the one
| | 07:17 | that you just added, because you can see that as soon
as you add an EPUB, internally the iPad expands them.
| | 07:24 | It's no longer a zipped EPUB,
and it gives them this code name.
| | 07:27 | But you can do things like change the view
to most recent so you can tell sometimes that
| | 07:32 | way which one is the most recent book you're
working with, or you can expand some of these
| | 07:38 | and look through images or you can actually
open up the PLIST file which gives you a text
| | 07:43 | listing of all of the codes
and the titles for the EPUBs.
| | 07:48 | Now the last way that I want
to mention is by using Dropbox.
| | 07:53 | Dropbox is a free utility.
| | 07:54 | Go to dropbox.com and install on your
computer, Mac or Windows, and on any iOS device.
| | 08:01 | And the idea is that you
sync an EPUB to Dropbox.
| | 08:04 | So, for example, here's my Dropbox folder
on the desktop, and then you make a folder
| | 08:10 | inside your Dropbox folder called EPUBs,
so you directly export from InDesign to that
| | 08:16 | Dropbox folder just for your EPUBs.
| | 08:19 | And the reason is that then on your iPad to
which you have already installed Dropbox, and
| | 08:25 | you switch your Dropbox, go to your EPUB folder--
now this is not the same Dropbox account that
| | 08:30 | I have on the lynda.com computer,
but I think you will get the idea.
| | 08:34 | Once you boot up Dropbox, you
see a list of all of your folders.
| | 08:38 | And you select the one that
you are using for your EPUBs.
| | 08:41 | It shows you a list of all the names, it doesn't
actually download the EPUB until you try to open it.
| | 08:45 | So you select it, and you can see
that Dropbox is telling you, hey.
| | 08:48 | I don't know how to open up this file.
| | 08:50 | And you tap a little icon up right,
and you say open this in iBooks.
| | 08:56 | And then it jumps over to
iBooks, and it opens it up.
| | 08:58 | So this is just some file that I was testing.
| | 09:00 | Of course this eBook looks perfect to me,
but assuming that there is a problem, I would
| | 09:04 | just go right back to InDesign, make my change,
re-export to that same Dropbox folder, right
| | 09:10 | to my EPUB folder and then back on the iPad,
unfortunately it's not as slick as Book Proofer.
| | 09:16 | It won't automatically
refresh right here in iBooks.
| | 09:20 | Instead, you just have to make a quick jump
back to Dropbox where it refreshes here and
| | 09:24 | the latest version will appear here, and then
you can once again say open that guy in iBooks.
| | 09:30 | So it's not quite as smooth as Book Proofer,
but it's free, and it doesn't require anybody
| | 09:34 | to register for any account.
| | 09:36 | So there you have it, four different ways
to get your EPUB onto the iPad for proofing.
| | 09:42 | And hopefully, one day Apple will release an
app that will run on a computer so that we
| | 09:47 | don't have to go through all this rigmarole.
| | Collapse this transcript |
| Validating EPUB2 and EPUB3 files| 00:00 | You may remember that in one of the first
movies in this title, I talked about the InDesign
| | 00:05 | to EPUB workflow, and we see these
little check marks all over the place.
| | 00:09 | Now, I mentioned back then that these
check marks stand for validating the EPUB.
| | 00:15 | And I suggested that you validate
throughout the proofing and editing process, and then
| | 00:20 | you do one final
validation before you upload it.
| | 00:23 | So, that's what I want to talk about in this video
in depth, what is validation, and how do you do that?
| | 00:29 | Validation is when you submit your EPUB to a
program that looks inside the EPUB and checks
| | 00:36 | to make sure that it's
following the rules. What rules?
| | 00:39 | The rules set forth by the
International Digital Publishing Forum, idpf.org.
| | 00:45 | They have created a set of rules or
standards for both the EPUB 2.0.1 format, that is the
| | 00:53 | format used by the vast majority of eBooks
out there now and in the near future, and
| | 00:58 | for the recently agreed upon standard of EPUB 3.
| | 01:01 | So, things like, if I open up OPF 2.0.1, and
I scroll down and then just tap one of these
| | 01:12 | rules, it explains to me, for example, that how the
title of a publication should be included in an EPUB.
| | 01:19 | Specifically, this part of the rule is
describing the contents.opf file, which is one of the
| | 01:25 | component files of an EPUB, in its section on
metadata, what are the required and optional elements?
| | 01:32 | And one of the required elements is a title.
| | 01:35 | The title has to be spelled
out in between these two tags.
| | 01:39 | So, there are many rules for all different
aspects of an EPUB, both for version 2 and
| | 01:44 | version 3 of the spec.
| | 01:46 | And any major reseller, like Apple and its
iBookstore, or Amazon and the Kindle Store,
| | 01:51 | or the Nook Store, or even an aggregator
like companies that help you to distribute your
| | 01:56 | EPUBs, will require if you're
submitting an EPUB that it be a valid EPUB.
| | 02:01 | They want to make sure that
it adheres to all these rules.
| | 02:03 | Now, I said it before that you submit your
EPUB to a program to validate it, and by program,
| | 02:09 | I mean the actual piece of software.
| | 02:11 | The software is called EpubCheck, and it's
currently stored as a project here at code.google.com.
| | 02:19 | It's called EpubCheck, and it checks both
2.0 and 3.0 specs, the same bit of code.
| | 02:26 | This code, as you can see, is not a nice little
program. It's something that you run in the command line.
| | 02:34 | So, that would be like in Terminal on Mac OS X.
It's not a nice graphical user interface.
| | 02:41 | It has to be run as a Java server-side
web application or used as a Java library.
| | 02:46 | Now, if you are a high-volume eBook
production and design house, you probably already have
| | 02:52 | a code geek who understands exactly
what this is about and can install it.
| | 02:56 | You can use that as your validation tool.
| | 02:58 | And if you know a little bit about
Terminal, you can figure this out as well.
| | 03:02 | If you don't want do with this,
there are a couple of other options.
| | 03:05 | First of all, there is a free online
validation tool called EPUB Validator that is hosted
| | 03:12 | by that same organization.
| | 03:14 | Go to validator.idpf.org, and you can upload a file,
and it will validate it or not validate it for you.
| | 03:22 | It says your file must be 10 MB or less.
It also doesn't want you to abuse the site.
| | 03:28 | So, as you see down here, if you're
creating commercial EPUBs in volume, please install
| | 03:32 | the EpubCheck program code
rather than using the site.
| | 03:36 | But essentially, you just
choose the EPUB, click Choose.
| | 03:38 | I have one on my desktop
called History-of-Art-test.
| | 03:41 | I will go ahead and upload it,
and then you click Validate.
| | 03:45 | And through the magic of video editing,
we're going to zip to the end, but this actually
| | 03:48 | just takes a minute or so. And uh-oh.
Our EPUB version 2 has a problem.
| | 03:54 | The following problems
were found in this document.
| | 03:57 | It's a warning. That means that we're
missing something that should be there.
| | 04:02 | If it was an error, that means that there
is something completely broken, and the file
| | 04:07 | that has the problem is content.opf which
is inside the OEBPS folder, and we're going
| | 04:13 | to take a look at that in a second.
| | 04:15 | On line 6 in position 24--is that exact enough
for you? Is missing a title, and that is one
| | 04:20 | of the requirements for a valid EPUB is
that you have to have the title metadata, and I
| | 04:24 | talked about this in the Metadata video.
| | 04:26 | Now, if you don't want to upload your files
to the validator, or if they're larger than
| | 04:31 | 10 MB, which can often happen, there is another
option, and that is to use one of these wonderful
| | 04:37 | AppleScripts that I found
on the mobileread.com/forums.
| | 04:41 | I'm including them in the
Scripts folder in the exercise files.
| | 04:48 | And the one I'm talking about
right here is called epubcheck_3.
| | 04:52 | It only runs on a Macintosh
because it's an AppleScript.
| | 04:55 | But assuming you have it, all you need to
do is drag and drop your EPUB right on top
| | 05:02 | of the EpubCheck app, and you see that we
also get the same warning here, this file
| | 05:08 | right here, content.opf, is
missing the title element, bother.
| | 05:12 | How do we fix that?
| | 05:14 | Well, you can fix that either by editing
the EPUB itself, or you can do it in InDesign.
| | 05:19 | Let's take a look at the EPUB
first because I already have it open.
| | 05:22 | I have already expanded this
into its component files.
| | 05:25 | So here, you see the OEBPS folder.
| | 05:28 | And if you're not sure what all these
files are, in the next chapter of this title, I
| | 05:33 | will be discussing all of these.
| | 05:35 | But here is our friend the content.opf file,
which I have open already in Dreamweaver in
| | 05:41 | Code View, content.opf.
| | 05:44 | You can see here that the title is empty.
Line 6, position 24 I suppose.
| | 05:49 | So, we can add the title here, History of
Art, and then save it and then recompile or
| | 05:57 | compress this back into an EPUB, or it
might be even easier just to do it in InDesign.
| | 06:02 | So, in InDesign, you add the title of
your publication in File > File Info.
| | 06:08 | So I will go to File Info, and I'll
say History of Art, just add the title.
| | 06:15 | Then I will export to the desktop.
We'll call this test2 and save.
| | 06:23 | Then in the Finder, I'll drag and drop History-of-Art-
test2 onto EPUB check app, no errors, so it's fixed.
| | 06:32 | The EpubCheck_3 app checks both version 2
and version 3 EPUB files that they conform
| | 06:39 | with the rules according to the idpf.org.
| | 06:43 | As I said in that earlier video, you want
to validate at numerous points during the
| | 06:48 | eBook production process.
| | 06:50 | Definitely, as soon as you export from InDesign,
run it through the Validation Checker either
| | 06:55 | online, through the Google Code, or with that
app, because you want to see if there is something
| | 06:59 | that you did wrong in InDesign.
| | 07:01 | InDesign is perfectly able to
create a valid EPUB for EPUB 2 or EPUB 3.
| | 07:07 | That way, when if you start tearing it apart
and editing it, like we're going to be doing
| | 07:11 | in the other videos in this title, you can
tell that if it's something that you did after
| | 07:16 | InDesign created it, broke the validation, or
was it something back in the InDesign land?
| | 07:20 | So, validate early and validate often, and
always as the last check before you upload
| | 07:25 | it for resale, do a final validation.
| | Collapse this transcript |
|
|
8. Editing EPUB Files for FunctionalityGetting inside an EPUB file| 00:00 | So you have done all you can in InDesign,
| | 00:03 | you have exported it to
EPUB, made sure it's valid,
| | 00:07 | but there's still something that you need to
change, there is something you want to edit.
| | 00:11 | You know you can open it up in ADE and proof it on
the iPad or whichever device you're going to be using.
| | 00:17 | And maybe you want to change something here in
the Table of Contents in the navigational TOC.
| | 00:22 | Maybe there is a link that
you want to add or remove.
| | 00:25 | Maybe you want to change the CSS.
| | 00:28 | There are something that you can do it
InDesign and some things that are just really difficult
| | 00:33 | or impossible to do in InDesign that you
can only do by editing the HTML, CSS files,
| | 00:38 | or other component files inside the EPUB.
| | 00:40 | So, the question that we're confronted with
is how do we get to the files inside an EPUB?
| | 00:46 | If you recall from an earlier video, I
mentioned that an EPUB is a collection of files, kind
| | 00:50 | of like a miniature website.
| | 00:52 | And they're all compressed into a zip
file that is masquerading as an EPUB.
| | 00:57 | And if you you're on Windows it's very simple
to extract those component files just as you
| | 01:02 | would extract any zip file.
| | 01:04 | You would just select the zip file, right-
click and choose Extract All with unzip, or dzip,
| | 01:09 | or 7zip or whichever kind
of utility that you have.
| | 01:12 | You can't do that on the Macintosh, though.
You can change the extension from .epub to zip.
| | 01:19 | I'm going to Use zip, and this is what you
will be doing on Windows and in that Windows
| | 01:22 | you can just right-click and decompress it.
| | 01:24 | But on the Mac if are accustom to double-
clicking this to unzip it, it doesn't quite work.
| | 01:29 | It just goes into this endless loop.
| | 01:31 | Now, there are UNIX command line commands that you
can use in Terminal on the Macintosh to unzip an EPUB.
| | 01:38 | Let me trash this and rename this back to EPUB.
| | 01:44 | Instead, I like to use this utility called
EPUB UnZip, and I have included this AppleScript
| | 01:50 | in the Scripts folder of the exercise files.
| | 01:53 | And it's freely available all around the
internets so you can just do a search for EPUB UnZip app.
| | 01:58 | It essentially writes all those
Command Line codes into an AppleScript.
| | 02:03 | And so to expand an EPUB, you simply drag
and drop right on top of the EPUB UnZip, and
| | 02:10 | it makes a folder with the exact
same name of the EPUB at the same level.
| | 02:15 | So, this script can be anywhere on your
hard drive, and as soon as you extract an EPUB,
| | 02:20 | using it, it'll put that folder
at the same level of the EPUB.
| | 02:25 | And now, we can come in here, and we can edit
the HTML files or we can edit the CSS files,
| | 02:30 | and all this other fun things that
we're going to be learning about.
| | 02:33 | Now, when you're done editing these files,
then the trick is how do you put Humpty Dumpty
| | 02:37 | back together again?
On a PC you essentially can simply rezip it.
| | 02:42 | You have everything inside the folder, right-
click, compress it into a zip file and then change
| | 02:48 | the .zip to .epub, and that should work.
| | 02:50 | But on the Mac, you can do that. Instead, you
have to use Command Line Tools in Terminal
| | 02:54 | or you can use our friend EPUB Zip.
| | 02:57 | So, when you're done editing
it, you'd just take this folder--
| | 03:00 | now, I'm actually going to rename it, because it's
going to say, hey, there's already a History-of-Art.epub,
| | 03:06 | should I overwrite it?
| | 03:07 | So, I'll call it History-of-Art2, drag and
drop at right on top of EPUB Zip, and there
| | 03:13 | we have our EPUB, double-click, it
opens just fine in Adobe Digital Editions.
| | 03:17 | Now, there are a number of programs that will
let you get to the inside of an EPUB without
| | 03:24 | having to crack it open.
| | 03:25 | For Example, on a Macintosh there is this program
called Springy, and I have an icon of it right here.
| | 03:31 | So, I can drag and drop this right on
to Springy, and it shows me the contents.
| | 03:37 | Now to have some cracked it open, but it
lets me see what's in here, and I could select
| | 03:41 | a file and get a preview of it.
| | 03:44 | In fact, I could right-click on a file, and I
could extract a single one, or I could actually
| | 03:49 | edit it while its sitting here.
| | 03:51 | So, for example, I can edit this file in TextWrangler,
change something here, like delete the word had,
| | 03:57 | close TextWrangler, save it, and then it says,
Are you sure you want to overwrite the existing item?
| | 04:03 | Yes please. And then that's it.
| | 04:05 | When I close it still History-of-Art.2,
but it's got my change saved there.
| | 04:11 | There are a few programs for both the
Macintosh and Windows that can do this kind of editing
| | 04:15 | of what are called archive files.
| | 04:17 | But very often, when you are editing an EPUB, you
want to make a change throughout all of the files.
| | 04:22 | You want to change all instances
of one thing to something else.
| | 04:25 | You want to do a Find and Replace across
multiple files or do more heavy-duty editing, you want
| | 04:30 | to make sure if you change the file name of an
image that all links to it or automatically updated.
| | 04:35 | So, in those cases you need something more
robust than this little peak and fix kind of utility.
| | 04:43 | And that's when your friends the AppleScripts
for unzipping and zipping EPUBs will come
| | 04:47 | into play on the Mac, and as I said, on
Windows you really don't have to worry about it.
| | Collapse this transcript |
| Understanding the anatomy of EPUB2 and EPUB3 files| 00:00 | When you expand or crack open an EPUB, all
the files that you see here are how the EPUB
| | 00:06 | reader or EPUB software creates this
beautiful eBook that you see in the background.
| | 00:12 | If you have been viewing the entire course so
far, then you probably recall us taking a peek
| | 00:16 | at what's inside an EPUB way back in Chapter 2.
| | 00:20 | But I think it's time to revisit these files,
especially now that you know how InDesign created them.
| | 00:26 | And I want to familiarize you with the contents
of some of these control files like the content.opf
| | 00:32 | and toc.ncx files which manage a lot of the
behind the scenes functions in your eBooks.
| | 00:37 | Now some of these files when you're editing
in EPUB you may never need to touch, others
| | 00:42 | you're going to become very familiar with.
| | 00:44 | And at this point you might say, well, if
I export from InDesign and it validates
| | 00:49 | and it looks decent in the eReader, then
why would I ever need to crack it open?
| | 00:53 | You are the lucky one, because 99% of the
time you're going to have to do something
| | 00:58 | inside the EPUB that is just not possible
to do in InDesign. You're going to have to
| | 01:02 | add some CSS that InDesign doesn't know anything
about, you might need to fix some kind of validation
| | 01:09 | error that InDesign can't do, maybe you need
to redo some cross references and the way that
| | 01:13 | InDesign exports them isn't right.
| | 01:15 | So let's take a wonderful trip
into the anatomy of this EPUB.
| | 01:20 | First, at the top level, you'll see two folders--
let me collapse them both--META.INF and OEBPS
| | 01:27 | and the mimetype file.
| | 01:29 | The mimetype file is a simple XML file. Let's
peek at it in TextWrangler. It tells the EPUB
| | 01:36 | reader this is an application,
it's an EPUB application.
| | 01:39 | You don't need to touch this. InDesign
creates it automatically. Leave it where it is.
| | 01:44 | Then in the META.INF folder has at least one
XML file called container.xml. You might see
| | 01:51 | other ones if you embedded fonts, for
example, you'll see an encryption file here.
| | 01:56 | If you are trying your hand to creating a
fixed layout EPUB you might see some special
| | 02:01 | Apple instructions here, but at the very least in
order for it to be valid it has a container.xml file.
| | 02:08 | What's so important about that?
| | 02:10 | Well, all it does is it tells the
EPUB reader where the important stuff is.
| | 02:14 | The brains of the entire EPUB is contained
in this one XML file called the OPF file.
| | 02:21 | InDesign calls it contents, other
programs call it something else.
| | 02:24 | It always ends with the extension .opf.
| | 02:27 | So all that the container.xml file is
telling the EPUB reader is that this is an XML file,
| | 02:33 | and here is the root file, the path to the
root file inside the OEBPS folder content.opf,
| | 02:40 | and it is an OEBPS package.
| | 02:42 | So, again, you don't need to edit this file,
you'll never need to tweak this, just leave it alone.
| | 02:48 | Inside the OEBPS folder is
where all the action happens.
| | 02:52 | OEBPS stands for Open eBook Publication
Structure, it's where all the good stuff is.
| | 02:58 | All of the content for your EPUB will appear
here as HTML files. They use the extension .xhtml,
| | 03:05 | that's what InDesign 6 is using.
| | 03:08 | And if you told InDesign to split your document
up at a certain point because of the paragraph
| | 03:14 | style, for example, then that's what
InDesign does is it creates a separate HTML file.
| | 03:19 | All of these HTML files conform to chapters
in your book or sections in your book.
| | 03:25 | The very first one is usually
the cover and the title page.
| | 03:28 | And then the very first instance where it
had to chunk it up is the same name with -1,
| | 03:35 | then -2, -3, and so on.
| | 03:38 | So if we take a peek at History-of-Art-good-1,
you can see it's just a regular HTML file just
| | 03:45 | like for any website, and at the bottom, here it is,
Chapter 1 Painting in Flanders, Holland, and Germany.
| | 03:51 | This is a simple text file that
you can edit in any text editor.
| | 03:56 | All of the image files get segregated
into their own image folder, and they're listed
| | 04:01 | along with the extensions.
| | 04:03 | When you see an _FMT, that just means that
you told InDesign to preserve the appearance
| | 04:10 | of the images. That's the default if you're
remember from the images video, so when it
| | 04:15 | is not exporting the original image,
it appends _FMT to the file name.
| | 04:22 | The CSS folder contains at least the default
CSS file that InDesign always creates, along
| | 04:28 | with any other CSS files that you might have
linked to in the Export to EPUB dialog box.
| | 04:34 | And the CSS file is simply a list of all of the
style specifications for text, boxes containing
| | 04:43 | images, tables, and so on, and we'll be
getting to know this quite well in upcoming videos.
| | 04:50 | Then we have two XML files,
content.opf, and toc.ncx.
| | 04:56 | Let's look at toc.ncx, that governs
the navigational table of contents.
| | 05:02 | So this part right here that you see is the toc.ncx,
and this is again a text file that completely editable.
| | 05:09 | InDesign created this for us
because we set this up in our TOC styles.
| | 05:14 | And if we didn't want, for example, all these
countries to appear here in the navigational
| | 05:18 | TOC, we could delete it and edit it as is.
| | 05:22 | So it's a lot easier to do this by editing
the TOC than having to figure out how to trick
| | 05:26 | InDesign into exporting different
text than what's in the TOC style.
| | 05:31 | I'm not going to save those changes.
| | 05:34 | And then finally, the brains of the operation,
this content.opf file, has the all important
| | 05:39 | metadata for the EPUB, so the title, the
publication date, the unique identifier, which is usually
| | 05:46 | the ISBN number--or InDesign creates its own.
| | 05:50 | Then it has a very important manifest
section sort of like bill of leading.
| | 05:56 | This tells the EPUB reader everything it's in the box,
shows all of the files contained in this EPUB, and
| | 06:01 | if you are going to get a validation error,
it's probably--if it's not something with the
| | 06:06 | metadata, it's going to be something wrong
with the manifest. That you changed the name
| | 06:10 | of the link, for example, but you
forgot to change the name of the link here.
| | 06:13 | So the manifest lists all of the different
files and images and fonts, if you included
| | 06:19 | fonts it has links to all of those
where they are in this EPUB folder.
| | 06:24 | And then at the bottom, this third section
is called the spine, it tells the eReader what
| | 06:29 | order it should open up the HTML files in.
| | 06:32 | So when somebody is done with the first one
and they swipe what should be the next HTML
| | 06:37 | file that gets loaded, then there is often
another section that you would add here.
| | 06:42 | InDesign doesn't do it, you have to do it by hand called
the guide section, and we'll be talking about
| | 06:46 | that in upcoming videos.
| | 06:49 | What we just ran through are all of the files in
an EPUB2 EPUB. I also have a version for EPUB3.
| | 06:57 | This is the exact same book that was
exported to EPUB3, and I just want to show
| | 07:03 | you that essentially it's
the same stuff inside.
| | 07:06 | What's different about EPUB3 is that you can
had more stuff, and InDesign doesn't add this
| | 07:10 | for you, you would do this on your own.
There are some extra things that InDesign can do
| | 07:14 | that we'll get into later.
| | 07:16 | But the one thing that's different as
far as a basic EPUB is concerned is the TOC.
| | 07:21 | So you see that InDesign created an HTML
version of the TOC, but this in the navigational TOC
| | 07:27 | here, but it also created the EPUB2 from the
version of the navigational TOC so that your
| | 07:33 | EPUB3 books that you export from
InDesign can be read on an EPUB2 reader.
| | Collapse this transcript |
| Choosing an EPUB editor| 00:00 | Now we need to consider what is the
best application for editing an EPUB?
| | 00:05 | I think one of the easiest ones to
use on the Mac side is TextWrangler.
| | 00:09 | Now, if you drag an EPUB on top of TextWrangler,
TextWrangler can show you the contents of
| | 00:16 | the EPUB, that's called the archive.
| | 00:17 | So it can show you the contents of an archive, and
you can see inside here, if you're checking something.
| | 00:23 | But notice that it's locked,
you can't really edit it.
| | 00:26 | TextWrangler is a free program from Bare
Bones Software, and if you go to their website,
| | 00:31 | you'll see that you can purchase the big
brother for TextWrangler, BBEdit, Mac only and then
| | 00:37 | that one you can edit the
contents of files in an archive.
| | 00:42 | But one of the reasons that I really like
TextWrangler is because I usually expand the EPUB anyway.
| | 00:47 | So here I have expanded it
with my friend EPUB UnZip.
| | 00:50 | Here is the contents of that EPUB folder.
| | 00:53 | And if I drag the folder on top of the TextWrangler
icon, then I see the same files, but now they are editable.
| | 01:00 | Now, here is what I like about
TextWrangler and these are the kind of things that you
| | 01:04 | should keep in mind when you are evaluating
any kind of Text Editor that you might be
| | 01:08 | using for editing EPUBs.
| | 01:10 | Usually, anything that's good for editing a
website is great for EPUB, so keep that in mind.
| | 01:15 | Because these kind of programs do not save
styling information there, everything is saved
| | 01:19 | as a plain text file which is what your
component files need to be in an EPUB.
| | 01:25 | But while they are opened in the program, they do
some formatting to make it easier to work with.
| | 01:29 | For example, I can change the size of the
type in preferences to make locating text
| | 01:34 | easier, also it color codes the markup.
| | 01:38 | So, element tags like head and body and P
are colored blue, and CSS things like class
| | 01:44 | and ID are colored magenta.
| | 01:47 | And things that I have entered myself for that
are being used within the tags are colored brown.
| | 01:52 | And then live text what the user sees is black,
and you can change all of this in preferences.
| | 01:57 | This makes it really easy for you to
quickly locate a tag versus live text.
| | 02:03 | I think one of the most important things
though about a Text Editor for editing EPUBs is its
| | 02:08 | ability to search and replace or find/change.
| | 02:11 | You see that TextWrangler
like BBEdit has a Search Menu.
| | 02:15 | I can find in the current file, or I can
do a multi-file search, and for me this is a
| | 02:19 | requirement when editing EPUBs.
| | 02:22 | Very often I'm dealing with 20 or 30 HTML files,
different chapters in a book, and I want to make the
| | 02:28 | same find/change throughout.
I don't want to have to do it one by one.
| | 02:32 | So your program must be able
to do a multiple file search.
| | 02:35 | If I select multiple file search, it gives me
a really good robust interface for choosing
| | 02:41 | which files to search.
| | 02:43 | The folders that I have recently looked at, the
current folders that are open, I can save sets, and so on.
| | 02:50 | And while I have multiple file search, this
Find and Replace is very important, and this
| | 02:54 | is true whether it's a
single file or multiple files.
| | 02:57 | You want to be able to do Grep searches.
| | 02:59 | If you have ever used that in InDesign, you know that
that's a very powerful way to do pattern-based searching.
| | 03:06 | Also known as regex, short for regular
expression, you can see the option right here, Grep.
| | 03:11 | So, if instead of searching for
straight text, I want to search for a pattern.
| | 03:16 | Say, for example, find me any class that's
body-first, and I don't care what the text
| | 03:22 | is inside there, but change body-first
to body second and leave the text as is.
| | 03:27 | Those kind of complicated search and
replaces can only be done with Grep.
| | 03:31 | And professional level text editors, especially
ones that programmers use or web developers use,
| | 03:35 | always have Grep or regex
as one of the features.
| | 03:39 | So make sure it has that.
| | 03:41 | I like about TextWrangler is that it also
saves frequently used queries, and you can
| | 03:47 | save your own as well as you work.
| | 03:49 | Now, there is a professional XML editing program
that comes at it in a different way, and that's
| | 03:54 | known as oXygenAuthor or oXygenEditor.
| | 03:58 | And what it lets you do is it lets you open
up an EPUB and do multiple find/changes with
| | 04:03 | Grep throughout without having to open up
the EPUB first, and it has built-in validation.
| | 04:09 | So I have the Archive Browser Panel
opened here, and I can choose Open Archive.
| | 04:15 | And on the Desktop I'll select
History-of-Art, and there is the content.
| | 04:19 | And if I want to edit something, I just double-
click it, and it opens up in this panel here.
| | 04:25 | You can see it's a very rich program.
You don't need to have all of these things.
| | 04:28 | But if you are a developer, I guess this would
be very useful to quickly jump from paragraph
| | 04:33 | to paragraph in the outline view.
| | 04:36 | Again, if you come up here under the Find menu, we have
the same kind of feature that we did in TextWrangler,
| | 04:42 | Find/Replace in the current file or in the
multiple files. Look at how robust that thing is.
| | 04:48 | Here's our check box that we
always look for regular expression.
| | 04:51 | If you want to do a Grep find/change, and then
there is dropdown menus that lists your most
| | 04:56 | recent find/changes. What I like is
that after you do a find/change,
| | 05:01 | oXygen will give you a little panel down
here that tells you how many find/changes it did
| | 05:05 | and where they are.
It's similar to the validation.
| | 05:07 | So like right here this little check box
right here is Validate and Check for Completeness,
| | 05:12 | and at the bottom down here
it says this is successful.
| | 05:15 | And it actually only checked this one HTML file.
| | 05:18 | So this HTML file is valid.
It didn't mess up any code.
| | 05:21 | It can also validate the entire
EPUB according to the EPUB check rules.
| | 05:26 | So that is OxygenAuthor. What it's lacking is
the same thing that TextWrangler is lacking,
| | 05:31 | which is the ability to preview what
this is look like in the EPUBReader.
| | 05:35 | If you want to see what it's going to look
like, you keep having to save your changes
| | 05:39 | and then opening up the EPUB in ADE or
iBook Proofer or something like that.
| | 05:45 | And that's one of the reasons why I like
Dreamweaver because Dreamweaver lets you do code
| | 05:48 | but also lets you get a preview within Dreamweaver
of what the page will look like in the eReader.
| | 05:54 | Now, there is a free program called Sigil
that is a dedicated EPUB editing program that
| | 06:00 | will let you do that.
| | 06:02 | If you go to File > Open, you can select an
EPUB, and it shows you the contents of it,
| | 06:10 | and then it also shows you a preview here.
| | 06:13 | And you can change the view from
Book View to Split View to Code View.
| | 06:18 | So here is the Code View, and here's the Split View.
| | 06:21 | And as you make changes in the Code View,
it automatically updates up here.
| | 06:25 | Because Sigil is dedicated to EPUBs, it has
dedicated panels for dealing with the navigational
| | 06:31 | table of contents, for adding
metadata, all sorts of cool things.
| | 06:35 | The one thing that I don't like about Sigil is
that it rearranges the contents of my valid EPUB file.
| | 06:41 | I don't know if you noticed, but it put all
my HTML files into a Text folder, and there
| | 06:46 | is no way of going back.
| | 06:48 | The EPUBs that it creates are valid, and in fact, it also
has a built-in validation checker right inside Sigil.
| | 06:56 | But I just don't like the fact
that it starts moving files around.
| | 06:59 | It needs to do that in order for its own
internal features to work like creating a table of
| | 07:04 | contents out of headings and things like that.
I have yet to find the perfect EPUB editor,
| | 07:11 | one that does everything that TextWrangler
and oXygen does but also has a preview for
| | 07:16 | iBooks preview, for Kindle preview,
for Nook all built into the same program.
| | 07:20 | But until that day comes, I think that any
of these programs will fit the bill quite nicely.
| | Collapse this transcript |
| Using Dreamweaver to edit EPUBs| 00:00 | I wanted to develop one movie--and this is new
for me in this series of InDesign to EPUB titles--
| | 00:06 | all about using Dreamweaver to edit your EPUBs,
because as a result of working with so many
| | 00:11 | EPUBs over the past two or three years, I
finally settled down with Dreamweaver as my main EPUB
| | 00:17 | editing app, and it's the closest
thing that Adobe has to an EPUB editor.
| | 00:22 | Any recent version of Dreamweaver
works great for this purpose.
| | 00:26 | First, the one thing that Dreamweaver
cannot do yet is open an archive, it cannot open
| | 00:32 | this, like how oXygen, Author, or Editor
can do, as I showed in a previous video.
| | 00:36 | In the meantime, you have to extract it
yourself, you have use the unzip tools or unzip it on
| | 00:42 | Windows so that you end up with the
contents open here, and now these files you can of
| | 00:47 | course edit in Dreamweaver because they're
essentially HTML files, so do that first.
| | 00:53 | Then jump over to Dreamweaver and to set it
up properly let me suggest that you actually
| | 00:59 | add that OEBPS folder as
though it were a website.
| | 01:04 | Go to the Site menu, create a New Site.
| | 01:07 | We'll call this History of Art Project, so
the name of your eBook, it wants to know
| | 01:13 | where is the folder containing all the goodies.
| | 01:16 | So browse on your hard drive to
that folder, and it's right here.
| | 01:22 | Now after you do this, you really can't move
or rename the OEBPS folder, then Dreamweaver
| | 01:26 | will get confused, and you'll
have to delete it and start over.
| | 01:30 | So put it in the semi permanent spot. If it's
already in your project folder, that's great.
| | 01:34 | So choose the OEBPS folder and then click
Save, and now it populates the Files panel,
| | 01:42 | and you don't have to keep jumping back to
the Finder to open things. Let me extract
| | 01:48 | this and make it larger
so you could see it better.
| | 01:51 | So if I wanted to open one of these files, I
can just double-click, and it opens right up.
| | 01:56 | So it's nice to be able to stay in one program.
| | 01:59 | When you open up an HTML file--let me put
this guy back--then you can edit the code view,
| | 02:05 | or if you want to look at the design
view you can click on the Design view.
| | 02:10 | The Design view is not quite like a live
preview. It shows some artifacts, like it'll put this
| | 02:15 | outline around divs and things like that.
If you want to see a really good design view,
| | 02:20 | click the Live button, and this is very close to
what it's going to look like in an EPUB reader.
| | 02:26 | You can split the view
between code and live in this way.
| | 02:31 | For example, instead of Painting in Spain
I want Painting in Portugal and then click
| | 02:37 | over here, and it
refreshes to show it immediately.
| | 02:41 | Another thing that I really like about using
Dreamweaver is that when you open up an HTML
| | 02:45 | file at the top of the window is a list of
all of the other files that this one links
| | 02:51 | to, like the CSS file.
| | 02:54 | If you're looking at this you're like, you
know what? I want all the drop caps to be red.
| | 02:57 | Well, you have to do that in the CSS file,
and you don't have to go rooting around in
| | 03:01 | files or in the Finder to find the CSS file. Just
click right here, and it opens up the CSS file.
| | 03:08 | And then you find the CSS for the drop cap
change the color to red, and you're done,
| | 03:13 | you can go back to the source code.
| | 03:16 | Now of course, because Dreamweaver is a web
developer's program it has a ton of information
| | 03:21 | for working with CSS over here, you can
create and edit your CSS very easily, it has a very
| | 03:27 | strong find and replace feature, so I just
chose it from the Edit menu, you can find
| | 03:33 | in the current document either source or text.
| | 03:37 | So, if you're searching, for example, the
word override but you didn't want to select
| | 03:42 | the code override just the word override you
can switch to text. You can't really get that
| | 03:47 | with oXygen or TextWrangler.
| | 03:50 | You can save your searches, of course you can
use regular expressions or GREP, you can search
| | 03:55 | the current document, you can search
multiple documents, the folder, all the files in the
| | 04:00 | site, or just the selected ones.
| | 04:03 | What drives me crazy about this Find and
Replace dialog box, though, is that there's no Close
| | 04:06 | button, you always have to
click the Close button down there.
| | 04:11 | Couple more tweaks I suggest that you use
for Dreamweaver is you might want to go to
| | 04:17 | its Preferences and add under File Types and
Editors a couple more file types that it can
| | 04:24 | open, especially ones for EPUB, so, for example, .opf and
.ncx and those to open those automatically in code view.
| | 04:36 | And you might want to clean up all of this
panel mess happening over here, like for example,
| | 04:40 | Business Catalyst I'm not going to use for
my EPUBs, and Adobe BrowserLab I'm not going
| | 04:46 | to use for my EPUBs.
| | 04:48 | So I went ahead and open and closed different
panels just like you would in InDesign, and
| | 04:52 | then I saved them as a workspace.
| | 04:55 | And in fact, I already did that, called AMC,
so I'll choose AMC. There is my workspace.
| | 05:00 | Oh, I guess I didn't have the one
for sites. I need to add that back in.
| | 05:04 | Dreamweaver does not open archives, and
it doesn't preview for actual EPUB devices.
| | 05:12 | If you want to get even closer than this, you
can choose the Preview in Safari and Safari
| | 05:18 | uses the same underlying code engine called
WebKit that iBooks does and many other EPUB readers.
| | 05:25 | It also doesn't have built-in validation
like sigil does and like oXygen Author, so you
| | 05:30 | would have to validate it outside.
But as it is now, we are 90% of the way there.
| | 05:35 | And I'm really liking
using Dreamweaver to edit EPUBs.
| | Collapse this transcript |
| Modifying the navigational TOC| 00:00 | This is a Navigational Table of Contents for
the EPUB that we have been working with quite
| | 00:05 | a bit in this title. You
can hide it and show it.
| | 00:09 | And my problem with this Navigational
Table of Contents is that this one is too long.
| | 00:13 | I know that it is there because
that is how InDesign created it.
| | 00:17 | InDesign spilt these out according to the TOC
style that I specified when I exported it to EPUB.
| | 00:24 | The TOC style pulled in this headline right here just
like it pulled in this nice and short headline here.
| | 00:30 | As the EPUB producer, you do not have the
ability to edit the text of your client's books, but
| | 00:37 | you do have some facility in
editing some of the navigational things.
| | 00:41 | So how would we fix this?
| | 00:43 | We need to edit the file called toc.ncx,
because we are working with an EPUB2 file here.
| | 00:50 | So here in the Finder here is the EPUB, and
here it is expanded, I am just going to go
| | 00:56 | a head and edit the toc.ncx
file from the expanded version.
| | 01:01 | I'll drag and drop that right onto TextWrangler.
| | 01:05 | Let's take a closer look at this, then
we hide all that other stuff behind you.
| | 01:10 | The toc.ncx is actually a really straightforward
file. You don't need to pay any attention to
| | 01:14 | all this gobbledygook at the top.
| | 01:17 | So I'll just skip right past where it
says /head, where it ends the head section.
| | 01:21 | Now this doc title and author, I don't believe
that most EPUB readers pull this. They usually
| | 01:28 | pull it from the metadata in the
content.opf file inside the EPUB file.
| | 01:34 | But perhaps there are a few of that use this
at the top of the navigational TOC, so I probably
| | 01:39 | would not change this.
| | 01:41 | The main business starts right
here where the navMap starts.
| | 01:45 | You can see there is a beginning of a
navMap, and at the bottom is the end of a navMap.
| | 01:50 | So inside the navMap are a series of navPoints.
Here is the first navPoint, and here is the
| | 01:57 | end of that navPoint.
| | 01:59 | If you have ever designed a website, this is
looking very familiar to you. If you have never
| | 02:03 | done it, all you know is that these things
are called tags, and this is an open tag and
| | 02:09 | then when you close the tag
you put a slash next to it.
| | 02:13 | Inside the navMap, the very first navPoint
says navpoint1, play this first, here is the
| | 02:20 | Text Label painting in Flanders, Holland,
and Germany, or it is at point2 it points
| | 02:26 | to History-of-Art-1.xhtml#toc_marker-1, what is that?
Let's open up that file.
| | 02:35 | We'll bring it right over to
TextWrangler, too, since we are sitting in there.
| | 02:38 | Can you find toc_marker-1? It's
right here at the very beginning.
| | 02:43 | I am showing this to you because if you are
editing the toc.ncx file, and you accidentally
| | 02:49 | delete this or you change this, it's not going to
be valid, and it's not going to work, so be careful.
| | 02:56 | If you for some reason need to change this, you
also need to change its partner in the HMTL file.
| | 03:02 | I have never needed to change it,
but I am just giving you a heads up.
| | 03:05 | So you normally do not want to change the
content source, the URL to the actual HTML
| | 03:10 | file that this TOC item links to, but the
text part you're perfectly free to change it.
| | 03:17 | I am going to say Painting in
General, let's leave it like that.
| | 03:21 | Painting in Spain, Painting in
France, so everything is three words.
| | 03:25 | Now you can do things here if you are a more
advanced HTML user like create nested TOCs.
| | 03:34 | Perhaps in the Painting in General we are going to add
three subsections, one for each of those countries.
| | 03:41 | As long as you have a toc_marker in that section, you
can go ahead and add it yourself and then link to it.
| | 03:47 | Or if you have accidentally exported at TOC
from InDesign that had everything at level
| | 03:53 | 1 instead of level 1 and then level 2
nested inside there, you can fix it yourself here
| | 03:58 | in the toc.ncx, though I think in that case it
would be easier just to do it right from InDesign.
| | 04:03 | Keep in mind, though, that this ncx file is a
special file, it's not a straight on XHTML
| | 04:09 | file, and that a lot of the device manufacturers
have their own rules for what can be included
| | 04:13 | here like the rule for Kindle devices is
different than the rule for Apple devices.
| | 04:19 | A very basic toc.ncx will work fine in all those places,
but some devices don't let you have nested TOCs.
| | 04:26 | And that's one of the reasons why you might
want to make a more detailed TOC inside the
| | 04:31 | eBook itself, as I showed in previous video.
| | 04:35 | Let's go ahead and save our changes to
this one. In the Finder, we'll go ahead and zip
| | 04:40 | it, give it a somewhat different name, new
TOC and check that out, here we go, Painting
| | 04:48 | in General links to painting in Flanders.
| | 04:51 | So it's quite easy to edit the toc.ncx,
and it gives very satisfying results.
| | Collapse this transcript |
| Adding and editing metadata| 00:00 | Let's say that you have finished your eBook
in InDesign, and you have exported it to EPUB,
| | 00:06 | as I have done over here, and then you have
expanded it, and you have done all sorts of
| | 00:12 | tweaking to the HTML and CSS files, the toc.ncx
files, and so on, and now you're just about
| | 00:18 | to ship it to your client or you're about
to upload it to the iBookstore or to the NUKE
| | 00:22 | store, you can always do one more validation.
| | 00:25 | So let's drag this guy up
over here to epubcheck_3.
| | 00:32 | The title element is empty. I could have fixed that
InDesign. You could have added that metadata
| | 00:40 | element in InDesign, and I talked about
adding metadata in a previous video, but just as a
| | 00:46 | quick refresher if you have the InDesign file
open, go to File > File Info, and you add
| | 00:52 | the Document Title right here. That's one
of the requirements to make a valid EPUB.
| | 00:55 | It has to have a title. How is anybody
going to find it without the title in it?
| | 01:01 | And there are ones like Author and
copyright that you can add as well.
| | 01:04 | But let's say the last time you worked in
this file in InDesign was weeks ago, and since
| | 01:10 | then you have been working in Dreamweaver or oXygen
or some other program editing the eBook file itself.
| | 01:16 | You're not going to want to go back to
InDesign add the title and re-export to EPUB and try
| | 01:22 | to remember all the tweaks you made, and
that's one reason why you should always validate
| | 01:26 | right after you export from InDesign.
| | 01:28 | But in this case, this is a very easy fix because
all you need to do is add that bit of information
| | 01:33 | to the metadata, and let's see how you do that.
| | 01:36 | If you're working with an editor that can
open up an archive, you can just open this
| | 01:40 | right up and edit in the program.
| | 01:42 | Here I have all ready expanded it, and
I'm just going to edit that one file.
| | 01:46 | It's inside the OEBPS folder, and if you
remember from one of the earlier videos in this chapter,
| | 01:52 | all of the metadata is included in the OPF file.
| | 01:57 | So let's go head and open up the OPF file, I'm
just double-clicking it, and it's automatically
| | 02:02 | opening up in Dreamweaver
because I set that to be the default.
| | 02:05 | Now this is an XML file, this is not an HTML
file, so you can't see a Design View of this
| | 02:11 | thing, all you can see is Code View, but
that's perfectly fine for our purposes.
| | 02:16 | Everything right here which says dc:title,
dc:source, this is the metadata section.
| | 02:20 | So all I need to do is click
right inside here and type the title.
| | 02:24 | So it is A History of Art.
| | 02:29 | If I wanted to add a subject, Art History,
a description I can go ahead and do it here.
| | 02:35 | I can tell you though that a lot of times when
you are uploading your books to the resellers,
| | 02:40 | they'll have their own form.
| | 02:41 | They'll give you an Excel file where you're
supposed to fill in all sorts of fields for
| | 02:45 | metadata that you have uploaded, and they
use that metadata in their own database.
| | 02:51 | So I wouldn't go crazy filling in
all these fields with information.
| | 02:55 | But I'd say it's at least
occasionally I do need to edit the section.
| | 02:59 | Like, for example, I finally got my ISBN
number for the books. I could replace the unique
| | 03:05 | ID with the actual ISBN number, 1-2-3-4-5-6-7,
whatever that is, or if I am putting successive versions
| | 03:14 | of this exact same EPUB onto my iPad
because I'm proofing--and I mentioned this earlier
| | 03:19 | when I was talking about iPad proofing--
the iPad has a memory like an elephant, iBook
| | 03:24 | does, and it caches each EPUB that you put there.
| | 03:28 | And to force it to refresh, sometimes you
have to edit something in the metadata.
| | 03:33 | Like edit the identifier, just add another
digit to the identifier helps, and also I heard
| | 03:38 | it helps if you changed the date, and I have
heard mixed results from changing the title.
| | 03:43 | You might say you know History Art version 1,
version 2, version 3, and sometimes that's
| | 03:47 | not enough to spur iBooks to refresh itself.
| | 03:52 | So editing the metadata is not something
you're going to be doing all the time, but you will
| | 03:56 | at least be doing it occasionally, and all you
have to remember is that it's in the content.opf file.
| | Collapse this transcript |
| Creating a guide section for iBooks| 00:00 | A guide section is an optional element that
you can add to the content.opf file in your EPUB.
| | 00:08 | The content.opf file is one of the
component files inside an EPUB that you have heard me
| | 00:13 | referred to as the brains of the operation.
| | 00:15 | And at the very bottom of the content.opf file, you
can add another section called the Guide section.
| | 00:22 | Apple's iBooks would prefer that you include
a Guide section, so does the Amazon Kindle.
| | 00:29 | They request that you include a Guide section,
and in their Publisher Guideline PDFs that
| | 00:34 | you can download from their websites, they tell
you what needs to be included in a Guide section.
| | 00:39 | So I thought I'd spend a little time in
explaining that, and also I'm giving you a Guide section
| | 00:44 | cheat sheet in your exercise files,
this document that I have open right here.
| | 00:49 | It shows you an example of the kind of code
that you want to end of that content.opf file.
| | 00:55 | So it starts out with the guide tag.
| | 00:59 | The Guide section essentially tells the
eReader about important elements in the structure
| | 01:04 | of this book, like is there a copyright page?
| | 01:08 | If so, what is the URL link of that
HTML file to their copyright page?
| | 01:14 | Is there an HTML Table of
Contents, what is the URL for that one?
| | 01:19 | It could be list of illustrations, a foreword,
a bibliography, and so on. Depending on the
| | 01:25 | eReader device and the eReader software, these
elements might be pulled out in the user interface
| | 01:30 | so that the user could quickly open up a Menu, for
example, and tap to see the list of illustrations
| | 01:37 | or the Table of Contents or the Copyright page.
| | 01:41 | These elements like cover, copyright, TOC, and many
others are listed in the idpf.org website right here.
| | 01:51 | So if you follow that link in the cheat
sheet, you'll see that all the different kinds of
| | 01:55 | types that you can
include in your Guide section.
| | 01:58 | Now eReaders that don't need the guide or that
don't support the guide section will just ignore this.
| | 02:03 | So it's not going to harm the EPUB at all,
but those devices that do support it can make
| | 02:09 | good use of this, as you can imagine.
| | 02:11 | You need to limit the type of the guide element
that's this part right here, type=cover, type=copyright,
| | 02:18 | to those listed in the idpf.org website
in order for you to validate the EPUB.
| | 02:25 | However, if you want to include your own
special section, the name has to begin with the string
| | 02:30 | other, as you can see up here.
| | 02:33 | And what I have noted from the Apple guidelines
they specifically state that if you want the
| | 02:38 | EPUB to open to a different page other than
the first text page, then you can include a
| | 02:45 | reference type of other.reader-start-page
within the guide section.
| | 02:52 | Now Apple's guidelines also state that they
strongly recommend that in the guide section,
| | 02:57 | first of all that you include a guide section,
second of all that the guide section called
| | 03:01 | text link to the first chapter or
first page of real body text in your eBook.
| | 03:09 | Let's grab this and look at
an actual content.opf file.
| | 03:13 | I am going to copy that, and in the Finder
I have extracted the contents of our friend
| | 03:19 | History-of-Art, and I'll go to the OEBPS folder
where we see our OPF file, and I'll double-click
| | 03:26 | it to open it in Dreamweaver.
| | 03:28 | The OPF file has metadata, the manifest, the
spine, and then this is the end of the package
| | 03:36 | information for the OPF file.
| | 03:38 | So you would put the guide section in between
the closing spine tag and the closing package tag.
| | 03:44 | So I am going to click right here and then
paste, and don't worry about the indents of this.
| | 03:51 | As long as it starts with an open guide and
closes with the close guide, then we are good.
| | 03:55 | So, for example, Apple would like the
Reference type text to be the first page of text,
| | 04:03 | which if you recall, is actually this page, it's
the first chapter, so I'm going to copy that
| | 04:09 | because this was the cover and the copyright
page of title page and that kind of thing.
| | 04:13 | So I'll copy that, and that is the href.
Now you can't just make up an href here.
| | 04:20 | An href is what I mean by URL.
| | 04:22 | You have to use one that's already listed
in the manifest, and that's not the cover
| | 04:27 | image, this is Chapter 1.
| | 04:30 | The title is really not seen
anywhere as far as I know in the EPUB.
| | 04:34 | Now even this leave it just like this if you
wanted to for Apple, and you'd be good to go.
| | 04:40 | It opened up the guide section, here we
have the text, and then you close the guide.
| | 04:45 | If you want to add other types of structural
elements to the guide section, you can.
| | 04:49 | Just use the cheat sheet.
| | 04:52 | Again, for more information on what kind of
things should go into a guide section, refer
| | 04:57 | to the device's publication guidelines.
| | 05:00 | But when they start talking about the guide
section, now at least you know what they are
| | 05:04 | talking about. It's an optional section
that goes at the end of the content.opf file.
| | Collapse this transcript |
|
|
9. Editing EPUB Files for FormattingEditing the XHTML files and using GREP| 00:00 | Now let's jump in and get our hands
dirty messing around with the HTML files.
| | 00:05 | We're working with our History-of-Art.
epub that we're all familiar with, nice
| | 00:10 | Mona and her friends, and I have
already expanded that EPUB file into a folder
| | 00:16 | of all of its component parts with
my friend the EPUB UnZip AppleScript.
| | 00:21 | If you're on Windows, and you're
falling along, you can always use the method
| | 00:25 | of renaming .epub to .zip and then
expanding the zip file, which I talked about
| | 00:30 | in a previous video.
| | 00:31 | All the HTML files are in the OEBPS folder.
| | 00:35 | You might have just one single XHTML
file or you might have multiple ones,
| | 00:40 | multiple ones would come about if you
split the document according to paragraph
| | 00:44 | styles, when you exported, or perhaps
you exported from a book and so each
| | 00:49 | individual document would
create at least one HTML file.
| | 00:53 | I think for this video I'll use
TextWrangler to edit these, and I could use any
| | 00:57 | number of other programs that I
talked about in a different video.
| | 01:00 | But I like TextWrangler when I just
want to do quick fine changes, which is
| | 01:04 | something that we're going to go through today.
| | 01:06 | So I will switch over to TextWrangler
and File > Open, Shift-click all these
| | 01:14 | HTML files and choose Open.
| | 01:19 | So they open up in a nice little
drawer on the left, and I can click each one
| | 01:23 | to see the contents.
| | 01:24 | Now if you're not familiar with HTML
at all, I'm going to give you a quick
| | 01:28 | Cook's tour of how an HTML file is
constructed, it's not going to take any
| | 01:31 | longer than 45 seconds.
| | 01:33 | So if you already know about it you
might want to fast forward and go get
| | 01:37 | yourself a quick cup of coffee.
| | 01:39 | If you want to learn much more about
HTML and CSS, which I highly recommend
| | 01:43 | for any EPUB designer, then you
should watch any number of lynda.com videos
| | 01:48 | all about HTML and CSS.
| | 01:50 | But for those of you who have never
really looked at the source of a web page,
| | 01:54 | this is going to be really interesting.
| | 01:56 | Essentially, the HTML file which is a
plain text file starts at the top with a
| | 02:01 | whole bunch of gobbledygook, that's
quite important that you don't need to worry
| | 02:04 | about, all right, that's
the first technical thing.
| | 02:07 | The second technical thing is that
an HTML file is divided into two main
| | 02:12 | sections, the head section and the body section.
| | 02:14 | So you can see the head section
starts here with that tag and then the head
| | 02:19 | section finishes with the closing tag.
| | 02:21 | Stuff in the head section is not
anything that the user sees when
| | 02:24 | they're reading your book.
| | 02:26 | It has maintenance or housekeeping files.
| | 02:28 | Like for example, it has a link to
the CSS file in the head section.
| | 02:32 | Then the body section starts and the
body starts here, and it ends, the closing
| | 02:36 | body tag is way at the bottom down here.
| | 02:40 | The body section is where you'll
actually find the content of what you saw
| | 02:44 | in InDesign.
| | 02:45 | So for example, here is
the headline for Chapter II.
| | 02:48 | InDesign adds the tags that
surround all of your live text.
| | 02:52 | Every paragraph is denoted with a P tag
for paragraph, so every paragraph starts
| | 02:58 | with the opening part of the
paragraph tag, and then it ends with the </p>,
| | 03:06 | which is the closing part of the paragraph tag.
| | 03:08 | The paragraph tag might just be all
by itself or it usually will also have
| | 03:13 | a class that is the equivalent of
the Paragraph Style that you applied to
| | 03:18 | that text in InDesign.
| | 03:20 | So this Paragraph Style was called body first.
| | 03:23 | When exported, InDesign changed it
to paragraph tag with the class of
| | 03:27 | body first.
| | 03:28 | There is a span class, the span class is
kind of like a Character Style, so it's
| | 03:33 | just going over a certain letter or
number of letters inside of a paragraph and
| | 03:38 | in this case it is the class
for the drop cap that appears.
| | 03:42 | Then there is another span class--
remember it's like a Character Style--that is
| | 03:46 | applying small caps to this text,
and then that paragraph closes.
| | 03:51 | And it goes on to the next paragraph.
| | 03:53 | So if you edit anything that's colored
black here, any of the live text, you
| | 03:57 | will not mess anything up.
| | 03:59 | If you don't touch any of the colored
text, any of the actual codes or markup,
| | 04:04 | then you're perfectly safe.
| | 04:05 | So let's go ahead and do that, we're
going to change some live text, let's say,
| | 04:09 | for example, you have exported this to
EPUB two weeks ago, you have done a whole
| | 04:14 | bunch of work inside the HTML and CSS
files and then your client says, oh my
| | 04:18 | goodness wherever it says country, it
should say region, sorry about that.
| | 04:22 | I mean that's happened to me where
clients have called me up and said, oh
| | 04:26 | well we misspelled the country's name
throughout the entire thing or you know
| | 04:29 | a city's name.
| | 04:30 | So to do a basic find/change
you just search for your program's
| | 04:33 | Find/Change command.
| | 04:34 | Here it's Search, under the
Search menu it's called Find.
| | 04:37 | So I am going to search for the word
country and replace with region, and
| | 04:44 | depending on the program that you're
using, you might need to turn on Wrap
| | 04:48 | around, because in TextWrangler by
default it will only search from the cursor
| | 04:52 | position to the end, and then we'll
click Next, and it found an instance, there
| | 04:57 | it is, and then we'll just say
Replace All, and it did it twice.
| | 05:02 | Now if I want to do that search and
replace in all these documents then I
| | 05:07 | choose a different command from the
Search menu here, and that's just how
| | 05:10 | TextWrangler works.
| | 05:11 | You know in InDesign you could just
choose from the Scope dropdown menu and
| | 05:14 | Find/Change you know the search the
story, this document, all documents.
| | 05:18 | But in this program you have
to use a different command.
| | 05:21 | And that's true I believe
for oXygen author as well.
| | 05:25 | At least it's remembering what I last
search for, and now in Search in I have to
| | 05:32 | specify that I wanted to search in these files.
| | 05:34 | It's remembering the recent folder
that it searched, but sometimes you know I
| | 05:38 | don't know if that's the same folder
because all the OEBPS folders are named
| | 05:41 | the same.
| | 05:42 | So what I usually like to do to make
sure it's going to search the right set
| | 05:45 | of files is I'll choose other, and
then I'll navigate and select the files
| | 05:50 | that I wanted to search.
| | 05:51 | Or if I have them all opened right
here in TextWrangler, I can just use this
| | 05:55 | command here, Open Text Documents.
| | 05:57 | So all of the open text documents, and
if I didn't want to search the cover one,
| | 06:02 | for example, I could
deselect that, so I love that.
| | 06:05 | And it's a very powerful feature of
TextWrangler and its big brother BBEdit.
| | 06:10 | Now I am just going to say Replace All,
and it asks you know do you want to be
| | 06:14 | really careful, like I could like not
save my changes leave them open, or I
| | 06:18 | could save them, or I could have it
confirmed before it saves, and I can have
| | 06:23 | it Show the results, so I'm going to
turn off Confirm, but I want to see the
| | 06:27 | results.
| | 06:28 | And I'll say Proceed, and it
found it in three different files.
| | 06:32 | So that saved me a ton of work.
| | 06:34 | Here is another example of an edit that
you might want to do to your HTML files,
| | 06:39 | and that is to clean out some of the
croft that InDesign exports to HTML.
| | 06:44 | I have done this title multiple times,
and I can tell you with each successive
| | 06:48 | version of InDesign it's
become less and less crofty.
| | 06:51 | InDesign is doing a much better job
these days of exporting clean HTML code.
| | 06:56 | But there are a couple of
things it just can't do, yet.
| | 06:58 | For example, you can't tell it to
ignore a style when you export to EPUB.
| | 07:03 | You can map a Paragraph or Character
Style to another style, but as I talked
| | 07:08 | about in a previous video but you
can't tell it to ignore a style.
| | 07:12 | Like, I wish I could have told
it to ignore this no-break style.
| | 07:15 | Do you notice that at the end of most
every paragraph we had this span class
| | 07:20 | no-break surrounding some letters.
| | 07:22 | That's because the designer who
created this for prints was extremely clever,
| | 07:26 | and as a Grep style in the body
Paragraph Style, they added the ability to
| | 07:33 | find the last word and then the last
letter of the penultimate word, select
| | 07:39 | all that and apply no-break.
| | 07:41 | The end result is that in the print
document we don't have any short lines of
| | 07:45 | the paragraphs, because they're
all set to no-break, it's wonderful.
| | 07:49 | But we don't need that in our HTML files.
| | 07:51 | In fact, it's completely ignored
by HTML and by the EPUB readers.
| | 07:56 | You don't even see this class in the CSS file.
| | 07:59 | Now it's not doing any harm because
it's just being ignored, but it might
| | 08:04 | interfere with other Find/Changes that
you need to do, and besides it just bugs
| | 08:07 | me to have superfluous code here,
so I'd like to get rid of this.
| | 08:11 | But of course you can't do this
with a straight Find/Change, right?
| | 08:14 | You can't do every single
paragraph and say find this and delete the
| | 08:19 | beginning tag and the closing tag
but leave this, because every single
| | 08:23 | paragraph is different.
| | 08:24 | And that's when Grep
change can come to the rescue.
| | 08:28 | With a Grep Find/Change, and I am going
to go back up to Multiple-File Search,
| | 08:33 | if you turn on Grep, then that let's you
do this kind of pattern-based searching
| | 08:37 | and in a second I'll show you some
resources to learn more about Grep.
| | 08:41 | You might be quite familiar with it
because InDesign has a Grep Find/Change
| | 08:45 | since CS3 I believe.
| | 08:47 | The coding that you use to create
your Grep expressions is almost exactly
| | 08:51 | the same.
| | 08:52 | What we want to search for here is--and
we want to find this, so I am just going
| | 08:59 | to select this, copy it, and paste it,
and then we want to find whatever
| | 09:03 | characters are in between that and this.
| | 09:06 | So I am going to copy that, put it here.
| | 09:09 | Now how do you say whatever characters?
| | 09:12 | I'm going to type a period and then a
plus and a question mark, that means any
| | 09:18 | character that's
repeated 0, 1, 2, or more times.
| | 09:22 | And because I want to recall this bit
of text, I'm going to surround it in
| | 09:26 | parentheses, the same kind of
thing that you do in InDesign.
| | 09:31 | Then to replace what it finds with just
what it found in between these tags, I
| | 09:37 | type a backslash and then the number one.
| | 09:41 | In InDesign this would be a
dollar bill sign and number one.
| | 09:44 | But in Dreamweaver, BBEdit,
TextWrangler, and probably lots of other
| | 09:47 | programs, it's a backslash.
| | 09:49 | And unfortunately, because we're doing
a find in multiple files, we can't say
| | 09:53 | find me the first instance, which I hate.
| | 09:55 | You can only do a Find All and then Replace All.
| | 09:57 | But just to see how it works, let's
actually just search this one file.
| | 10:01 | So I am going to deselect everything
else except for History-of-Art-3, and I'll
| | 10:08 | say Find All, and it found all of those
instances, 64 occurrences in this file
| | 10:15 | and replace them all.
| | 10:16 | Proceed, show the results, let's take a look.
| | 10:21 | Nice and clean, look at that.
| | 10:24 | All right, so that's how you
can use Grep Find/Change to do
| | 10:28 | pattern-based searching.
| | 10:29 | Grep is extremely popular with web
designers and programmers because you're
| | 10:33 | constantly doing this kind of search for
tags but leave the stuff in between the
| | 10:37 | tags intact and vice-versa.
| | 10:39 | To learn more about Grep on
indesignsecrets.com, if you just go to
| | 10:43 | indesignsecrets.com/tag/grep
then you'll see a list of all of our
| | 10:48 | favorite resources.
| | 10:49 | David has done a title at lynda.com
called 10 Things to Know About GREP.
| | 10:54 | There is a great PDF
that's all about using Grep.
| | 10:56 | Now almost all of these ways apply to
InDesign, but it's almost exactly the
| | 10:59 | same language that you'd use in any
other text editor that supports regular
| | 11:03 | expressions.
| | 11:04 | And then BBEdit also has a really well
-done Grep tutorial from back in 2004
| | 11:10 | that still applies.
| | 11:11 | And everything that I just showed you
here is covered here as well along with
| | 11:15 | many other cool codes.
| | 11:16 | So that's the kind of cleanup that you
might need to do to your HTML files, but
| | 11:21 | one thing that I would always
recommend is that after you do a bunch of
| | 11:24 | Find/Changes, that you preview it in an
EPUB reader to make sure that you didn't
| | 11:29 | mess up anything completely
and that you validate it as well.
| | 11:31 | That's a good practice to always do a
preview and a validation after any major
| | 11:36 | surgery to your HTML files.
| | Collapse this transcript |
| Editing the CSS file to tweak formatting| 00:00 | All the formatting for your EPUB content is being controlled
by one file, the CSS file, Cascading Style Sheets.
| | 00:09 | Let's take a look at what that CSS file
is comprised of and see how we can edit it.
| | 00:14 | I have opened in Dreamweaver one of the HTML
files from our friend, the Art History Book,
| | 00:20 | Painting in Spain, Chapter 2.
| | 00:22 | And here on the left, you can
see the code for the HTML file.
| | 00:26 | And we worked with the code in the previous
video on editing HTML files, so here you can
| | 00:30 | see, here is SPANISH PAINTING, and here is
where Spanish painting is in the HTML file.
| | 00:36 | But what is making these
letters capitals or small caps?
| | 00:43 | You can see here on the left that
there is a tag surrounding those letters.
| | 00:48 | It is a tag called span.
| | 00:50 | Meaning it's like a character style,
as I explained in the previous video.
| | 00:53 | And it's using something called
a class that is named small-caps.
| | 00:58 | The class small-caps is in the CSS file,
and it's applied to this text, and it appears
| | 01:04 | in the CSS file, because back in
InDesign we defined it as small-caps.
| | 01:10 | We used a nested style and maybe we went ahead and
swiped over this and called it the character style small-caps.
| | 01:16 | But InDesign has converted it
to CSS as best as it could.
| | 01:20 | The next paragraph here is
style with the class body.
| | 01:24 | It is a paragraph, that's what P stands for.
| | 01:27 | But then it has a particular kind of styling
that InDesign converts to a class called body.
| | 01:34 | To see the CSS style for body and to
edit it, we need to open up the CSS file.
| | 01:38 | And one of the reasons I love Dreamweaver
is that when you have an HTML file open, you
| | 01:43 | can easily get to any linked CSS
file simply by clicking up here.
| | 01:46 | So I'm going to click here, and now
let's take a look at the CSS file.
| | 01:51 | I'm going to switch to Code View so
we're only looking at the CSS file.
| | 01:56 | At the very top we're seeing
a series of font-face calls.
| | 01:58 | And that's because in this particular version
of History of Art, I chose to include the fonts,
| | 02:04 | I embedded the fonts when I exported it to EPUB.
| | 02:07 | So not only did InDesign include the fonts
inside the Fonts folder in my OEBPS folder,
| | 02:15 | but it also correctly added CSS to call those.
These are called @font-face tags.
| | 02:20 | And it has the name of the font-family
and the URL to where the font actually is.
| | 02:26 | Following that we have
what's called the CSS Reset.
| | 02:29 | And this is the default CSS that
InDesign will export with every single EPUB.
| | 02:34 | Even if you uncheck all of those check boxes
in the Export to EPUB dialog box under Styling
| | 02:41 | or under CSS, it will always export at least
one CSS file containing what's called a CSS Reset.
| | 02:47 | And that essentially is resetting the defaults.
| | 02:49 | In case the eReader or eReader software
has some weird proprietary settings, InDesign
| | 02:56 | is just resetting everything to 0 or to like
every table cell should have a 1 pixel stroke
| | 03:01 | or border is what it's saying here.
| | 03:03 | Now, you can't edit these within InDesign,
but of course when you export to EPUB, you
| | 03:09 | can open it up and remove these or
change these defaults if you want.
| | 03:13 | You could also attach a second CSS file to
your EPUB in that dialog box that defines
| | 03:20 | these differently, in effect canceling out
what InDesign said should be the defaults.
| | 03:25 | Then it goes on to what you
said in the EPUB document.
| | 03:29 | This is coming directly from the EPUB Export
Options dialog box where you set a page margin.
| | 03:35 | And then it goes thorough and defines
all of your paragraph and character styles.
| | 03:40 | You'll often find that the paragraph style
you created, which might be named body or
| | 03:45 | body-first, usually doesn't appear by
itself, instead it's defined as a class.
| | 03:51 | And it's saying here that when there is a
paragraph, that's the P tag, followed by the
| | 03:56 | class equals body, here is how
that paragraph should be formatted.
| | 04:00 | InDesign declares an attribute for almost
everything possible there is to be attributed
| | 04:06 | to a style, even things that you really don't
need, such as in normal CSS it's assumed that
| | 04:13 | if you want something other than normal,
then you should specify it, otherwise you don't
| | 04:17 | need to include this at all.
| | 04:18 | So all these stuff could be
deemed as superfluous code.
| | 04:23 | But the InDesign philosophy is not to
create the cleanest, leanest CSS and HTML code.
| | 04:28 | It's trying to do exactly what you want in
the EPUB from what you defined in InDesign.
| | 04:34 | And if it works, and if it validates, then
who cares if it's a few lines of extra code.
| | 04:39 | So that's debatable, but
that's where it's coming from.
| | 04:41 | If you're a professional web designer, this
might make you think, oh my goodness, look
| | 04:44 | at all this extra stuff, but
that's where it's coming from.
| | 04:47 | Now, let's say that you wanted to edit the CSS.
| | 04:50 | If we go to the Source Code
and Split, and let's look at CSS.
| | 04:56 | Let's say that we want to
change the size of the body type.
| | 04:59 | We would find where it says body, and
here under font-size, we'd change the signs.
| | 05:04 | In CSS font-size is defined as ems, meaning
1em is the default size for that EPUB Reader,
| | 05:11 | almost always at 16 points.
| | 05:13 | So if you define your type size at the default 12
points in InDesign, it will get converted to 1em.
| | 05:19 | If you said it should be 16 points in InDesign
or 20 points, this will be 1.5 or 1.8em and so on.
| | 05:26 | You can see that's what's
happening here with line-height.
| | 05:29 | But let's say that we want the font-size to
be 1.25em, not 125em, there we go, and click
| | 05:35 | over here, and you can
see it immediately increase.
| | 05:38 | Let's say that we want to increase the leading,
that's called line-height, let's make it 2.0,
| | 05:43 | or I think we can just say 2,
and now it increases the leading.
| | 05:48 | Then of course you'd want to go ahead and match
the settings for all these other paragraphs as well.
| | 05:54 | If you want to see a whole bunch of cool
stuff that you can do with CSS in InDesign, then
| | 05:59 | check out the EPUB Zen Garden, epubzengarden.com.
| | 06:03 | It lets you view an EPUB but change
the style sheet associated with it.
| | 06:08 | So designers went ahead and
contributed these different style sheets.
| | 06:13 | You can see the same exact content, but
with just different definitions and attributes
| | 06:18 | for heading levels, body levels, and so on.
| | 06:23 | If you want to experiment with the same CSS,
if you want to see what they did, then just
| | 06:28 | go to the Source View, find the link to
the CSS file, I'm going to copy that and then
| | 06:36 | back here, right after it says
epubzengarden.com/, paste that in.
| | 06:40 | You don't want two slashes in a row, so get rid
of that if that happens, and then there you go.
| | 06:45 | I hit Return, and it shows us the CSS file.
| | 06:47 | And you can just copy this whole thing and
paste it into your own plain text document,
| | 06:51 | and play around with it.
| | 06:52 | Now, you probably should not reuse this
as is, but it's a wonderful learning tool.
| | 06:56 | Now, assuming that you came up with your
own CSS for your eBook, then the way that you
| | 07:01 | would set that up in InDesign, first of all,
you would map all the paragraph and character
| | 07:04 | styles to your CSS styles.
| | 07:07 | So on the Paragraph Styles Panel Menu, I'm
going to choose Edit All Export Tags, and
| | 07:13 | here you can see that I have already been
working on this, you would go through all of your
| | 07:18 | styles, and you'd say, I want anything
that has a Style of Chapter title to be mapped
| | 07:22 | to h3, and Chapter Number, perhaps to h2.
| | 07:25 | And up here body should be P, body first should
be P, but with the class first, because you have
| | 07:31 | defined a first class and so on.
| | 07:34 | You would do that for all of your paragraph
styles and all of your text styles as well.
| | 07:40 | Then after you have mapped the
styles, go ahead and export to EPUB.
| | 07:44 | But in the Advanced section, you want to
turn off Include Style Definitions and Preserve
| | 07:50 | Local Overrides, and instead link to
an external CSS file, as I have done here.
| | 07:55 | I'll go ahead and do it again, let me Delete
that, choose Add Style Sheet, find your CSS file.
| | 08:01 | Here is zen2.css, for example, one that I
was messing around with from one of those
| | 08:06 | Zen files, click Open,
and then you'd export that.
| | 08:09 | So now you have bypassed the way that InDesign
converts your paragraph and character styles
| | 08:15 | and instead you're in charge of the CSS.
| | 08:18 | If you have a CSS maven around or you're a
CSS maven, this is a fantastic way to have
| | 08:23 | complete control over how your EPUBs look,
or at least get 90% of the control, or get
| | 08:29 | most of the way there without having to do
a whole lot of editing of the CSS files that
| | 08:33 | InDesign normally creates.
| | 08:35 | I think one of my favorite things about how
InDesign is working these days is what a great
| | 08:39 | job it does in creating good-to-go CSS files right
from your paragraph and character styles in InDesign.
| | 08:46 | But if you really want to take complete
control, it allows you to do that as well.
| | Collapse this transcript |
| Setting up line, margin, and paragraph spacing| 00:00 | I want to show you how simple it can be to
change some of the spacing in your EPUB, and
| | 00:05 | if you have never edited any kind of CSS or HTML
file, I think you'll find this very approachable.
| | 00:11 | In this video we're going to use this very
simple text document that has a lot of the
| | 00:15 | text from Art History, just a few pages long,
with a few paragraph and character styles.
| | 00:20 | I have already exported it to EPUB
and expanded that on my desktop.
| | 00:25 | It's just one file, I didn't split it up or
anything, and I'm going to open it up in Dreamweaver.
| | 00:31 | It opens up in Split view because this is
the last view that I used in Dreamweaver.
| | 00:35 | We see on the left the source code, the HTML
code, we see on the right a preview, it's
| | 00:40 | not the live preview, it's what's called the
Design preview, so we're still seeing some
| | 00:45 | elements that are Dreamweaver-specific.
| | 00:46 | If I click on Live, then we can get rid of
that, and it's a little closer to what an
| | 00:51 | EPUB would actually show us.
| | 00:53 | Now say, for example, that you export to EPUB,
you make some changes, you look at it on your
| | 00:58 | Nook or on your iPad, and you're like, you know
what? These first-line indents are not enough.
| | 01:03 | I want more first-line indent.
| | 01:05 | You change that in the CSS file.
| | 01:06 | I want to switch to the CSS file here and scroll
down to the body style, which I know that these use.
| | 01:15 | First line indent is controlled by text
indent, this little control right here.
| | 01:20 | So, if you want to increase the text
indent, then we would increase this.
| | 01:24 | The measure that InDesign
spit out is using pixels.
| | 01:27 | I'm not quite sure I would prefer to use ems.
| | 01:31 | Let's go ahead and keep it pixels right now.
| | 01:32 | Let's say a text-indent of 24 pixels,
click over here to see the results.
| | 01:38 | An em measure is usually much more flexible,
so I'm going to change the measurement unit
| | 01:43 | to ems and say 1.5em.
| | 01:46 | Now remember, one em is the default type size
for that eReader, usually about 16 points,
| | 01:54 | so 1.5em should be about 24 points, and
if I click over here, it doesn't change.
| | 01:59 | Let's say that we want the first line indent
to be 3ems, select this, and I'll type a 3,
| | 02:06 | come over here, and then it indents more.
| | 02:08 | Now let's say, well, you know what? I actually
don't want any indent, but I'd rather there
| | 02:11 | be some space in between the paragraphs, so
I'll change the text-indent to 0, and the
| | 02:17 | spacing between paragraphs is controlled by
margin-bottom or margin-top, space below or
| | 02:24 | space above, right? Right from InDesign, so
let's do a space below for all of our paragraphs,
| | 02:30 | we'll say margin-bottom and again I'm going
to switch this to ems, now let's do 1em, and
| | 02:36 | this must be very long
paragraph, it looks like it is.
| | 02:39 | Now of course you can also
change margin left, right, or top.
| | 02:43 | I can tell you that not all eReaders will
respect all of these left and right settings,
| | 02:48 | so it's important that you
test it on an actual device.
| | 02:52 | A spacing that I often like to change is the
subhead spacing, so I'm going to scroll down,
| | 02:57 | take a look at this subhead spacing,
and here is the CSS with the subhead.
| | 03:03 | The font size is a little larger than the
body size, the line height is a little smaller,
| | 03:09 | and it has a margin top of 12 px.
| | 03:12 | I think I'd like to add a little bit more
air on the bottom, so I'm going to change
| | 03:16 | this to .25em to add a little bit of air here,
but something you keep in mind if you're starting
| | 03:24 | to mess around with the spacing, there is no such
thing as locked to base line grid on an EPUB.
| | 03:29 | When somebody is looking at the EPUB and
they're looking at a two-page spread, which I happen
| | 03:34 | to have--let's actually open that, on the
desktop, we'll open this up in digital editions.
| | 03:41 | If you want the lines to align across a two-
page spread, then you'll have to do the math.
| | 03:46 | In other words, if your line spacing is 1em,
then you want a margin top of an even multiple
| | 03:53 | of that for your subheads, for example.
| | 03:56 | So something like 2ems, I know especially
for book designers it's really important to
| | 04:00 | get things to line up across.
| | 04:02 | I'm just letting you know that you have to be
careful with the measures that you're using
| | 04:06 | if you're editing any spacing in your EPUBs.
| | 04:09 | The problem here is that Adobe digital
editions can't show us the effects of our changes in
| | 04:14 | Dreamweaver because I have extracted these
files, right? Well, we're working on the cracked
| | 04:18 | open file, so this is one reason why you might
want to use something like BBEdit or oXygen
| | 04:23 | to make your edits, because that way you can simply
save your changes and then preview on your device.
| | 04:29 | You don't need to recompile this, but here
if I want to see my changes, I would have
| | 04:34 | to close this save my changes
and then re-zip into an EPUB.
| | 04:37 | You can get a little closer to what
something is going to look like on the iPad.
| | 04:41 | If you choose to preview this in Safari, which
uses very close to the same text engine that
| | 04:46 | iBooks does, but if you choose to preview
in Safari, Dreamweaver wants to save your
| | 04:51 | changes, and unlike InDesign, you can't undo
after a save, but if you're okay with the
| | 04:56 | changes you have made so far, go ahead and
click Yes, and then you can preview, and the
| | 05:01 | reason I have resized this a little bit is
because I want to resize the window to sort
| | 05:06 | of match the width of one page.
| | 05:09 | But notice we have a zero page margins set,
so the text is going to right up to the edge,
| | 05:15 | but in most eReader software, on eReader
devices they have a built-in margin for the page,
| | 05:19 | so that's why we have
little bit more space there.
| | 05:22 | It's quite simple then to add space above and
below paragraphs and to change first-line indents.
| | 05:28 | If you want to change space above and below
images or sidebars or tables, you would simply
| | 05:32 | do the same thing, locate where they're called
out in the CSS file and add a margin top or
| | 05:38 | margin bottom measure to the CSS.
| | Collapse this transcript |
| Creating pull quotes and text wraps| 00:00 | You have already learned how to
anchor images in the text stream.
| | 00:04 | But things get a little trickier when you
want to get a text frame in the middle of
| | 00:09 | the text flow, like this one right here, or
you want to the text to wrap around some
| | 00:15 | sort of image or graphic.
| | 00:16 | Here is a typical page in InDesign with two
items that are simply floating on top of the
| | 00:22 | main text frame. They are not anchored or anything,
and they're using text wrap to push the text away.
| | 00:28 | Now as you know, I always recommend that
before you start tearing your hair out, you simply
| | 00:32 | export what you have got to
EPUB and see what a looks like.
| | 00:35 | So let's go ahead and do that. I'm exporting
to EPUB, I'll save it to the Desktop. I have already
| | 00:41 | got one there, so I'm just going to overwrite it.
You can keep all the defaults under Advanced.
| | 00:47 | Just keep this first check box turned on,
and then click OK. Where's the images?
| | 00:54 | Well, because they're not part of the text stream,
even though they look like it, and even a little text is
| | 00:58 | wrapping around because it wraps, that's
not happening, they ended up at the end.
| | 01:03 | And look at the text here. We have lost the
square and the dotted line, and we have lost
| | 01:07 | the background color. We did retain the look
and color of the text, but that's mainly because
| | 01:13 | it's been formatted with a
paragraph style called pullquote.
| | 01:16 | Now, what you actually need to do is you need to
anchor all these floating images into the text stream.
| | 01:23 | So we know how to do that. I'm going to
grab my Selection tool, and for this first one,
| | 01:27 | I'm just simply going to--
let's zoom in a bit so we can see.
| | 01:31 | I'm going to drag the little control
handle here and just put it right here.
| | 01:35 | So it's not really changing anything except
this stupid InDesign bug that the first line
| | 01:41 | will not wrap to an anchor graphic. The
other lines will, but we don't worry about that
| | 01:45 | because I'm not using this for
print, I'm just anchoring it there.
| | 01:49 | And then we're going to do somewhat the same
thing here. I'm just going to anchor this guy
| | 01:54 | right in front of this paragraph.
| | 01:56 | The reason I'm doing that is because I want
this thing to be in its own paragraph.
| | 01:59 | I don't want this thing to be split between two lines,
and in InDesign CS6 when you anchor any object
| | 02:06 | in this way, InDesign will automatically
create a new paragraph for it.
| | 02:11 | So it's going to break what comes before it
and what comes after it into its own paragraph.
| | 02:15 | In other words, this would start out the word the as
a new line and indent it, which would be kind of dumb.
| | 02:21 | So now in CS6, you really don't have to always
create an empty return and format it as in-line
| | 02:27 | image, you can simply drag and drop that
wonderful square right in the text, but it helps a lot
| | 02:32 | if you drag it right after an existing paragraph,
or right before an existing paragraph as we have done.
| | 02:38 | Now let's export this to EPUB, and we'll
Replace the existing one, and so we have the graphic
| | 02:45 | anchored here, and we have
the text frame anchored here.
| | 02:49 | A couple of problems, these we are going
to have to mainly solve in the CSS file.
| | 02:56 | The first one is that apparently InDesign
only understands drop caps to be things that
| | 03:01 | are floating on the left with
stuff wrapping in the right.
| | 03:05 | Other than drop caps, any other object that
has been anchored in the middle of the text
| | 03:09 | stream breaks up the text, and
things wrap above and below it.
| | 03:13 | Well, we can easily fix that in the CSS.
| | 03:16 | The other problem down here is that it's
missing the fact we want this center-aligned, and also
| | 03:22 | look at how the text is
overwriting, that's an issue.
| | 03:25 | Now what we're seeing here, though, is far and above beyond
better than what we had in any other previous version.
| | 03:32 | If you watch any of the previous versions
of this video, you'll see that usually we
| | 03:36 | would lose the border, we would lose the
background color, we would lose everything,
| | 03:40 | it would just look like more text, and you
would have to reconstruct this in the CSS.
| | 03:44 | New in CS6 is that when you anchor text
frame, many of the attributes of that text frame
| | 03:49 | are retained when you export to EPUB.
| | 03:51 | So it's only when you anchor it--remember the
first that we did it and it wasn't anchored,
| | 03:54 | t lost all those text attributes?
| | 03:56 | There is still some attributes
that we can fix in the CSS.
| | 04:00 | So let's go ahead and do that.
| | 04:01 | In the Finder, I have already exported this fix
one to EPUB from the after file, and you have
| | 04:06 | that after InDesign file in your exercise
folder, and then I have expanded it so that
| | 04:11 | we can edit the contents.
| | 04:13 | So here is the XHTML file. Let's double-click
that to open it up in Dreamweaver.
| | 04:18 | You can edit all this in any text editor
that you want, it's just that I
| | 04:21 | like Dreamweaver because we can see the
results almost immediately on the right row.
| | 04:25 | We're not going to be doing anything
special to the HTML file. We're mainly going to be
| | 04:29 | editing the CSS file.
| | 04:31 | So I'm going to switch to Live view so we
get a better view, and I'm going to swipe
| | 04:36 | over here to see what's happening.
| | 04:38 | Now notice that when you anchor a graphic,
InDesign automatically gives it a div, standing
| | 04:44 | for division, gives it like a little block
of its own, and it assigns it a class, in
| | 04:49 | this case, it's called frame-2.
So it's div class frame-2 that we want to edit.
| | 04:54 | So we go to the CSS file and find div class="frame-2"
scroll, scroll, scroll, scroll, scroll, usually
| | 04:59 | all the divs are at the bottom, div.frame-2.
| | 05:03 | First thing that we want to do is
we want this to be floating left.
| | 05:06 | Now a text wrap on the right in InDesign,
which is what we had originally is called a float,
| | 05:13 | and it floats on the left, meaning
everything else is pushed to the right.
| | 05:16 | So we have to add that code, and in the CSS
all you do is hit a Return in this div, and
| | 05:22 | we want to say float, and then you put a
colon, no space, and then you say which side
| | 05:28 | should it float on, the left
or the right? We want it left.
| | 05:30 | You always have to end every one of these
attributes with a semicolon, so after you do that and
| | 05:35 | you click here, it jumps to the left, there
you go, right at the beginning of that paragraph.
| | 05:40 | We want to add a little but a space to the
right of it, so I'm going to hit Return in
| | 05:45 | the CSS file and say margin-right and enter an
amount like 1em, and do that in there, that's fixed.
| | 05:55 | Now let's fix this guy down here. I'm going
to switch back to Source Code so we can see
| | 05:59 | where it is and what the div is, okay.
InDesign called the Basic-Text-Frame frame-3, so we go
| | 06:06 | back to CSS and find Basic-
Text-Frame frame-3, this is it.
| | 06:11 | So you see it picked up the background
color and the border color, even the fact that it
| | 06:15 | was dotted. If we didn't want this to be
dotted, we could change it to solid or any one of
| | 06:19 | a dozen different line styles that you can look up
in any CSS book, and there is the border with 6.
| | 06:25 | Now I had set a text inset on this frame to
9 points all around, and so it converted to
| | 06:32 | 9 pixels all around, and the width of it is 234
pixels, which was the exact width in InDesign.
| | 06:38 | Now to fix the problem of the text over-running
the frame, I just need to set a height of
| | 06:44 | auto to this, height:auto, and that
should fix any of those problems.
| | 06:51 | If they wanted to change the background
color, I could choose a different hex color.
| | 06:54 | So one of my favorite hex color pickers is
in Photoshop--there is so many places where
| | 06:58 | you can find a hex color picker--but if you
just click the color picker and choose any
| | 07:03 | color they you want here, like let's say
that you wanted light blue, it shows you the hex
| | 07:08 | color right here, so you could copy it and
then jump back over Dreamweaver and replace
| | 07:14 | that, click over here, and it changes color.
| | 07:18 | The last thing we need to do is make this
centered horizontally, and it's weird in CSS
| | 07:23 | when you're dealing with an object like this
div, you can't just say center of the object,
| | 07:28 | you have to say that the left margin
and the right margin are set to auto.
| | 07:32 | So margin-left:auto, margin-right:
auto. There it goes, it's centered.
| | 07:42 | So you can see just by knowing a little bit
of CSS, you can make all sorts of beautiful
| | 07:46 | sidebars and pullquotes and
floating icons in your EPUBs.
| | Collapse this transcript |
| Creating internal and external links| 00:00 | Let's talk about adding links
after the fact in your EPUB.
| | 00:04 | Of course, it's very easy
to add links in InDesign.
| | 00:06 | You simply do it with the
Hyperlinks Panel which I have here.
| | 00:11 | And in this History of Art book that we have
been working with, there is already a link
| | 00:16 | in most of the versions
that we have been working with.
| | 00:18 | There is a hyperlink that leads
you to an external URL on Wikipedia.
| | 00:24 | You can double-click it and see it right there.
| | 00:27 | And for this one, I have also added a cross reference
link which you might find quite a bit in your books.
| | 00:32 | I have a cross reference
over here. Let's zoom in.
| | 00:37 | It says this paragraph has a cross
reference to the chapter called Painting in Spain.
| | 00:44 | And if I click here, it becomes highlighted
I can jump to Painting in Spain, and you see
| | 00:49 | the little icon indicating
that this is a cross reference.
| | 00:52 | And the cross reference is different from
a hyperlink, because I could change this to
| | 00:56 | painting in and around Spain
and then update the cross reference.
| | 01:04 | And when I go back to the source,
you can see that's been updated.
| | 01:08 | So that's what's cool about cross references.
But actually, I don't want to do that.
| | 01:11 | So, I'm going to delete this word
Painting in Spain and once again update it.
| | 01:21 | So okay, this document has a couple of links.
| | 01:25 | And I have exported that to EPUB, put
then on the desktop, expanded the EPUB.
| | 01:30 | And I have added the OEBPS folder to Dreamweaver
as a site file, which I explained in a previous
| | 01:36 | video when I talked about using
Dreamweaver to edit your EPUBs.
| | 01:40 | One of the reasons I'm choosing to do that
here--and here it is in Files--it's because
| | 01:46 | it comes in really handy when you
working with links. Let me show you.
| | 01:49 | I'm just going to open up this HTML file.
| | 01:52 | Now, you don't have to
use Dreamweaver, of course.
| | 01:54 | It's a very expensive program
if you don't own it already.
| | 01:57 | We're going to go through how URLs are constructed
manually, but then I'll show you some automated
| | 02:02 | ways that Dreamweaver can help you out.
So, here we have the link for West Flanders.
| | 02:07 | Remember that leads to the Wikipedia article
when I click here in the preview, and we see
| | 02:12 | the matching area in Code view.
Let's make this a little larger here.
| | 02:17 | So, if you want to add a link to an external
website, you just need to surround the text
| | 02:22 | that you want to link--like right
here it says West Flanders--with this code.
| | 02:26 | A href means make an
anchor to an external reference.
| | 02:30 | Let's say that we wanted to link the
word France to the Wikipedia French site.
| | 02:36 | You would click right in front of the word
France and start typing a href and notice
| | 02:41 | how Dreamweaver is coloring the text and
letting you know that you have not done with this code.
| | 02:47 | If you left it alone, there'd be something wrong.
Most other text editors will do the same thing.
| | 02:51 | Equals "http, and then you put the URL
that you can just copy from the website, slash
| | 02:58 | slash, we will say in, I'm just making this up
here. I'm going to guess it there is something
| | 03:03 | for France, and there we go.
| | 03:07 | And now we have to end the link; otherwise,
this whole big huge thing would be a big link.
| | 03:11 | So after the word France, and if you want
to include the period or not that's up to
| | 03:16 | you, you just type a slash A, and
automatically close it for us, and that's it.
| | 03:22 | So, I'm over here, and you can see
France leads to an external link.
| | 03:26 | And if I click it here, you can see
it previews where it's going to go.
| | 03:30 | Now, if I wanted this to go my own website, I actually,
I could just edit it right here. I could say, hey,
| | 03:35 | I don't want you to go there. I
want you to go to senecadesign.com.
| | 03:41 | And when I come over here, then it updates here.
| | 03:43 | So, that's one of the reasons I like
Dreamweaver as it's really easy to add these kind of URLs.
| | 03:49 | If I wanted to link to another file in this
document, then I would just make the same kind
| | 03:54 | of link, like let's say that Van Eyck or
Eyck, however you pronounce this person's name,
| | 03:59 | is mentioned in this section.
| | 04:02 | I would make an a href but the URL
would be just a History-of-Art-5.xhtml.
| | 04:10 | You wouldn't need to put in the http://,
you just need to put in this file name.
| | 04:15 | But what's even easier is that I could,
because I'm Dreamweaver say I want a link, and then
| | 04:20 | I could just point it at that file.
And it makes it for me. Isn't that sweet?
| | 04:27 | If I didn't load this as a site, and I couldn't
easily point to it on my desktop or something,
| | 04:31 | I could simply click the folder icon and
then locate the HTML file where I want it to go.
| | 04:37 | Let's find that cross reference link, and I think
that was here in 2, here we go, Painting in Spain.
| | 04:42 | Now, this link is a little bit different.
| | 04:45 | You see how it says this paragraph has a cross
reference to the chapter called, and InDesign added
| | 04:50 | <a href= with the URL, but it added
this a bit afterwards, Anchor-2.
| | 04:54 | Because, when you're linking not to just the
beginning of a file as we did before for the
| | 05:01 | Van Eyck reference, but you're linking to
specific words in that file, like here it's
| | 05:05 | linking to the specific title of the file
then you have to add an anchor ID to that file.
| | 05:11 | So, if you look at History-of-Art-3, you can
see that InDesign added the anchor ID right
| | 05:19 | there in front of that.
| | 05:20 | So, if you want to link to a specific
word from one place to another in your EPUB,
| | 05:25 | you're going to have to create an anchor
ID in front of the destination that's unique
| | 05:30 | and then in the source you link to the HTML
file followed by a hash symbol followed by
| | 05:38 | the name of the anchor that you added.
| | 05:40 | And that's where things could
go blooey, as you could imagine.
| | 05:43 | So, you have to be really careful when you're
doing that and make sure to always check in
| | 05:47 | your browser or in your EPUB that it worked.
| | 05:50 | One last thing I want to show that is so
cool about working in a program like Dreamweaver
| | 05:54 | that's taking into account the entire site
is that if I rename something really important,
| | 06:00 | like let's say I rename the CSS file--
| | 06:02 | I'm going to open this up and change the
CSS file to just My Styles and hit Return--
| | 06:12 | now, this would break the links in the entire
EPUB, because all of the different HTML files
| | 06:18 | are linking to that a history of CSS file.
| | 06:22 | But because of I have added this is a site in
Dreamweaver, Dreamweaver prompts me whenever
| | 06:26 | I'm about to change the name of something
that is linked to in other files and/or in
| | 06:31 | other places within the site, and it offers to
update all of those files. Isn't that sweet?
| | 06:36 | So, I'm going to say go ahead and
update, and it changed the link throughout.
| | 06:41 | If you are doing a lot of linking work in
your EPUB, obviously you want to use a program
| | 06:45 | like this one or another
robust web development program.
| | 06:49 | Otherwise, if you just need to make the
occasional external URL, then it's really simple to do
| | 06:53 | just by editing the HTML files.
| | Collapse this transcript |
|
|
10. Converting an EPUB to Other Ebook FormatsExploring the Kindle Direct Publishing (KDP) portal| 00:00 | If you're trying to distribute the eBook
that you just designed, you should know that you
| | 00:05 | cannot ignore the big kahuna, Amazon.
| | 00:07 | Ebooks are sold on Kindle devices or in
Kindle format at least through the Amazon Kindle
| | 00:13 | Bookstore, 80% of all eBooks are Kindle
books. The rest of them are divvied up among the
| | 00:18 | Apple iBooks, iBookstore, and the NOOK--Barnes & Noble
NOOK store--the Kobol store, the Sony store and so on.
| | 00:28 | So it behooves you to learn as much as you
can about getting your book ready for Kindle.
| | 00:32 | Unfortunately, it does not use the EPUB format.
Don't ask me why. It's a constant source of
| | 00:37 | frustration among eBook designers.
| | 00:39 | But there is. It uses a different format, and I'll be
talking about the formats in depth in upcoming videos.
| | 00:46 | For now, though, I want to show you that Amazon
does give a lot of support to people who want
| | 00:50 | to publish independently or small
publishers to the Kindle bookstore.
| | 00:54 | I am at the Amazon website right now just
looking at the current pantheon of Kindle devices.
| | 00:58 | There is the color line of Kindle
fire devices and then there are what they
| | 01:04 | call the eReader devices which are the grayscale
devices often known as the E Ink devices because
| | 01:09 | of the type of display they use.
| | 01:12 | One of the big issues these days, as you'll
soon find out as you watched the other videos
| | 01:16 | where I talk about Kindle format in this
chapter, is that essentially not only does the Kindle
| | 01:22 | format not use EPUB, but it's split into two
different formats, the ones for the E Ink devices
| | 01:27 | and the one's for the Kindle fire family.
This is called KF8, these are called Mobi7.
| | 01:35 | So there is a lot to learn, a lot of confusion.
Is it going to be nightmare? Actually, no.
| | 01:40 | Check this out, if you go to the portal the
Amazon makes available to us, it's called the
| | 01:44 | Kindle direct publishing portal.
| | 01:45 | You will get all sorts of support with free software
and publishing guides, even a plug-in for InDesign.
| | 01:52 | You heard me, you can publish directly to
the Kindle format from InDesign. It's really cool.
| | 01:57 | We'll take a look at
that later on in this chapter.
| | 01:59 | When we get to a kdp.amazon.com, the KDP
homepage, you can just sign in with your existing Amazon
| | 02:05 | account or perhaps you want to make a
different account just for your publishing ventures.
| | 02:10 | It's up to you. We are not actually going
to sign, but I do want to scroll down a bit
| | 02:13 | and show you this very
important page, the get started page.
| | 02:17 | So I am going to click here, and this is a
page that you should definitely bookmark,
| | 02:21 | Welcome to Kindle Direct Publishing,
with all sorts are help topics on the left.
| | 02:25 | They have guides for Do it Yourself, (Building
Your Book for Kindle), Print & Digital because
| | 02:30 | they have create space, and also they have
some conversion services that they recommend.
| | 02:35 | Now I can tell you obviously you don't want to use the
conversion services because you are watching this title.
| | 02:40 | Most of the information that you'll find on
the KDP website is for independent authors
| | 02:44 | who want to publish their own book to Kindle.
| | 02:47 | And most of those people are
using Microsoft Word or similar.
| | 02:50 | There is not that much information about
using InDesign to create Kindle eBooks, but there
| | 02:54 | is a certain amount, and there's more here
than you'll find anywhere else on the Internet.
| | 02:58 | Well, I am just getting a heads up, don't be
surprised or too disappointed if as you are
| | 03:04 | finding like the top 10 things you should
do to prepare your book for Kindle are all
| | 03:08 | top 10 things you should do with Microsoft Word.
| | 03:10 | When you get here, the first length that you
should click on is right here, tools and resources.
| | 03:15 | We'll be using the software in the next few videos,
but you want to download the stuff and install it.
| | 03:22 | For example, KindleGen is a
program that Amazon uses internally.
| | 03:26 | If you write a book in Microsoft Word or as
a website, you can upload that HTML file or
| | 03:32 | that Word document and Amazon will convert it to Kindle
format for you, and they use KindleGen internally.
| | 03:39 | But you can also do it yourself, and of
course that's what I recommend because you want to
| | 03:43 | see what it's going to look like before
you sell it, and you might want to try, you
| | 03:47 | know, a few different iterations tweaking things
before you actually upload your Kindle eBook for sale.
| | 03:53 | So definitely download KindleGen.
| | 03:55 | And then Kindle Previewer is a wonderful
application that lets you preview your Kindle book for
| | 04:01 | most of the different
devices that we just looked at.
| | 04:05 | So you don't have to own seven different
Kindle devices to get a good approximation of what
| | 04:09 | it would look like on an E ink device,
versus a Kindle Fire.
| | 04:13 | Of course, I do recommend that you have one
of each if you're going to be doing this for
| | 04:17 | a living because as intelligent as any
software can be, it is not the same as looking at it
| | 04:24 | on the actual device that
your end users will be using.
| | 04:28 | So you want to use the Kindle Previewer as
just a convenient way to quickly prove something
| | 04:32 | before you do a final
proof on the actual device.
| | 04:35 | Here is that plug-in that I mentioned that
you can download, and I have already downloaded
| | 04:39 | here and installed and have a video that
shows how it works and does a pretty good job.
| | 04:44 | And then the Kindle eReader for PCs and Macs,
this is just the regular software that anybody
| | 04:49 | can use to read Kindle
format books on their PC or Mac.
| | 04:54 | And of course, you can get the Kindle eReader as
well for your iOS device or for your Android device.
| | 04:59 | To download all that stuff, install what
you need to install, and then don't forget the
| | 05:04 | KDP community, this is very rich. Look at
how many people are viewing these posts, very
| | 05:10 | rich community of people who are
publishing on their own or as their small company to
| | 05:16 | the KDP portal to get their
eBooks published on Kindle eBookstore.
| | 05:21 | I'm on these forms at least once a day,
so look me up next time that you're here.
| | 05:25 | And you definitely want to bookmark the
Amazon KDP portal, which is your doorway into all
| | 05:32 | the support that Amazon has
for you as a Kindle Publisher.
| | Collapse this transcript |
| Designing for the Kindle MOBI and KF8 formats| 00:00 | Formatting your eBook for the Kindle
requires some knowledge that Amazon freely offers.
| | 00:05 | It's kind of hard to find, though, so I'm going
to show you where those resources are in this
| | 00:09 | video and then go over some of the
main things you need to keep in mind.
| | 00:13 | I know I talked about this in the previous
video about getting to know the KDP portal,
| | 00:18 | but let me review in case you jumped right
to here, but there are two formats that you
| | 00:22 | need to deal with when you are creating an
eBook for the Kindle Store, because you don't
| | 00:27 | know which of these wonderful devices
people will be using when they download it.
| | 00:32 | The ones that are black and white are called
according to Amazon's terminology, the Kindle e-readers.
| | 00:40 | You might also hear them referred to as E ink,
but that's actually the proprietary technology
| | 00:44 | that drives the screen display, and I
think E ink might actually be trademarked.
| | 00:49 | So we're calling it E-readers.
| | 00:51 | You can think of it as
the black and white Kindles.
| | 00:54 | The e-readers use one format called Mobi 7,
and then the other part of the family are
| | 00:59 | the new Kindle Fire family.
| | 01:01 | By the time you're watching this video,
this might look quite different and maybe there
| | 01:04 | are many more, but the Kindle Fire
Family use a different format called KF8.
| | 01:10 | Neither Mobi 7 nor KF8 is EPUB, but luckily
you can create a Kindle formatted eBook directly
| | 01:18 | from InDesign if you want, because at their
hearts both the Mobi 7 and the KF8 format
| | 01:23 | use HTML and some amount of CSS.
| | 01:27 | Now in the previous video, I talked about
going to the Kindle Direct Publishing Portal,
| | 01:32 | and if you come here, this is an excellent
place to read all about formatting for the
| | 01:36 | Kindle Store and uploading your book, but
one thing that drives me crazy is that they
| | 01:41 | have buried the good information.
| | 01:43 | Like if you click over here and choose Getting
Started, Getting Started - Preparing Your Book.
| | 01:48 | All right, here is our Simplified Guide to
Formatting Your Book, oh, this is what I want.
| | 01:52 | Well, actually, no it isn't.
| | 01:54 | This is the great information
if you're using Microsoft Word.
| | 01:57 | If you're designing your books in HTML, like
you know with a website, click here.
| | 02:02 | There's nothing here about what if it's an EPUB or what
if you are using InDesign or anything like that.
| | 02:06 | Now I have found the sources that you want.
You need to download both of these resources.
| | 02:12 | First, there is the official
Kindle Publishing Guideline document.
| | 02:16 | It's a 60-page or more PDF, they do revise it
every few months, and I have created a permanent
| | 02:22 | shortcut link for you to find it
at http://j.mp/Kindle-guidepdf, all lowercase.
| | 02:31 | Let me show you, I have queued that up.
| | 02:32 | If you go to that URL,
you'll end up at this page.
| | 02:35 | It doesn't have KDP up here in the domain,
but I have bookmarked this page because I know
| | 02:41 | that it always lists the direct link for
the Kindle Publishing Guidelines, right here,
| | 02:47 | for more information at any of these options.
| | 02:49 | Now I have downloaded it and opened it
up in Reader, so you can take a peek.
| | 02:54 | This one is 63 pages long, and it's quite
detailed as far as like what your cover has
| | 03:00 | to be, how to use all of their extra software.
I think I have talked about a few of these
| | 03:06 | in previous videos, and I'll be referring
back to this in upcoming videos, but this
| | 03:10 | is kind of like the Bible
of publishing for the Kindle.
| | 03:14 | It covers both KF8 and Mobi 7.
| | 03:17 | The second thing that you want is this
fantastic InDesign file that they have created that's
| | 03:22 | actually disguised as their guideline for
using their InDesign plug-in which I cover
| | 03:28 | in an upcoming video, and they do have a PDF
that talks about how to use this cool plug-in
| | 03:33 | that adds an export for
Kindle command to InDesign.
| | 03:36 | But on a different page, they
have buried an InDesign guideline.
| | 03:41 | Take a look at this InDesign file.
| | 03:43 | I have got it queued up here, and it's
available as IDML, by the way, so you can open it in
| | 03:48 | earlier versions of InDesign as well.
| | 03:50 | Kindle Publishing Guidelines for the Kindle
plug-in, but if you scroll through here, it
| | 03:54 | is much more detailed than the PDF guide for
the plug-in as far as things like what kind
| | 04:01 | of text effects are supported or not, what
kind of indents are supported for paragraphs,
| | 04:08 | it uses properly styled Paragraph Styles and
Character Styles like they want you to style,
| | 04:12 | I love this resource.
| | 04:15 | And here's a permanent shortcut
to it, http://j.mp/Kindle-idplugin.
| | 04:20 | If you go there, you will
be brought to this page.
| | 04:23 | It's kind of like the document source for
all things having do the Kindle plug-in for
| | 04:27 | InDesign, and over here on the right is a rich
list of links that you will find extremely useful.
| | 04:33 | So here is the documentation that you want
Publishing Guidelines in InDesign Format.
| | 04:37 | Okay, so let me go over some of the high
points of what you need to keep in mind.
| | 04:41 | First, you have to create a separate cover
image ,and the cover image needs to be at least
| | 04:46 | 600 pixels by 800 pixels, it needs to be a
JPEG, and with the advent to the Kindle Fire
| | 04:52 | line, they'd actually prefer it to be a higher
res, in other words more pixels, they specifically
| | 04:57 | say in their guidelines they want
the long side to be 2500 pixels.
| | 05:02 | Anything in between these
two measures would work fine.
| | 05:05 | Kindles use a navigational TOC, but they also
require an internal content, table of contents,
| | 05:11 | which I talked about in a previous chapter,
how to create your own table of contents inside
| | 05:16 | the InDesign file, and that internal table of
contents need to have links to the chapters.
| | 05:22 | They require a Guide section which I talked
about earlier with specific types that need
| | 05:27 | to be listed in the Guide section, the title and the
creator, who is the author, has to be in the metadata.
| | 05:33 | They want you to use high-res color images
even if you know that 90% of the people reading
| | 05:38 | your book will be using the black and white
e-readers, because a lot of people read Kindle
| | 05:42 | books using the Kindle software for PCs and
Macs and Androids and those support color.
| | 05:48 | There is no support for transparent PNGs.
If you have any PNGs in your file or InDesign
| | 05:53 | exports the PNG, it will get flattened, and
there is no support for embedded video or audio.
| | 05:59 | Now you might have purchased something
from the Kindle Store that had embedded video,
| | 06:05 | but people use the KDP Portal, you know the
independent or smaller publishers, they cannot
| | 06:10 | include any video or audio in
the eBooks that they upload.
| | 06:14 | Mobi7 is the format for eReader Kindles, and
Mobi7 comes from a very early kind of format
| | 06:21 | for the very first E-readers, this format
was called Mobipocket, and Amazon bought the
| | 06:27 | company a few years ago. It's called Mobi7
because it's now version 7 of the Mobipocket format.
| | 06:33 | This is what all of the eReader, in other words,
the black and white or grayscale Kindles use.
| | 06:39 | If you're designing an eBook for Amazon,
you really need to get yourself one of these
| | 06:43 | eReader devices you can see
what all the eBooks look like.
| | 06:47 | Now you can see that they use a
very limited set of HTML and CSS.
| | 06:51 | It does not support the float tag, the float
tag is used to create text wraps and runarounds.
| | 06:57 | So in other words, you can't use
a drop cap in a Kindle eReader.
| | 07:02 | You can't have anything
wrapping in a Kindle eReader.
| | 07:04 | It only uses one main typeface for
all the body copy and headers and such.
| | 07:09 | The headers themselves like heading level
1, level 2 and so on, they don't have any
| | 07:13 | margin above and below them, and every paragraph
automatically gets a first-line indent of
| | 07:18 | about a quarter inch.
| | 07:20 | Now KF8 on the other hand--they are
calling it 8 just because Mobipocket was 7, so KF
| | 07:25 | stands for Kindle Fire, it's not really that KF8 file
or anything--but KF8 uses many more HTML and CSS tags.
| | 07:34 | Let me show you.
| | 07:35 | If you follow that link, you can access the
full list of the HTML and CSS tags that KF8
| | 07:43 | theoretically supports. People are still
discovering what works and what doesn't work, but it's
| | 07:47 | far richer than what Mobi7 supports.
It does support the float tag.
| | 07:52 | If you have embedded fonts, they will
appear as well on the Kindle Fire, and its engine
| | 07:57 | is more likely the WebKit default, so for
example, header levels will automatically
| | 08:01 | have space above or space below them.
| | 08:04 | So with two quite different formats, what are
you suppose to do? Because here's the difficult
| | 08:09 | part, you cannot upload two separate files
to KDP. You can't say here, this is the file
| | 08:14 | for e-readers and this is
the one for Kindle Fires.
| | 08:17 | If you're a big publisher or you're a high-
volume eBook producer, like a conversion house,
| | 08:22 | then you have a special kind of account
with them, and you can upload two separate ones
| | 08:27 | which would be ideal.
| | 08:28 | In the meantime, all you can do is upload one
file and in that one file they will convert
| | 08:34 | it internally for both KF8 E-readers and
their black and white e-readers. That means that
| | 08:41 | you have to think very carefully about how
you construct that EPUB so that it looks great
| | 08:46 | in Kindle Fires, and it's still definitely
readable on E-readers which probably at this
| | 08:50 | point still have the majority of the market.
| | 08:53 | One thing that a lot of people are using
for this situation are media queries, which is
| | 08:56 | a special kind of CSS that says, hey,
| | 08:59 | if I'm on a KF8, do this with a Drop Cap style,
but if I'm on Mobi7, do that with a Drop Cap style.
| | 09:06 | And I have a link if you want to learn more about
using media queries in EPUBs, very good article.
| | 09:11 | And finally, you're going to have to test a lot.
| | 09:14 | After you have created your Kindle eBook,
which I'll show you how to do in the next couple
| | 09:19 | videos, you need to get that file onto the
hardware devices that your customers will
| | 09:24 | use and also open it up in the software, the
Kindle for Mac and Windows and iOS and Android
| | 09:31 | because they all very slightly differently.
| | 09:33 | You are not going to have the same
experience across the board, but you want to make sure
| | 09:36 | at least it makes sense, and it
looks good in all those devices.
| | Collapse this transcript |
| Using Kindle Plugin for InDesign| 00:00 | I mentioned in the first video in this chapter
that you can download a whole bunch of great software
| | 00:06 | from the KDP website, Kindle Direct Publishing,
and I'm here on that page where you can download
| | 00:11 | all the tools and resources, and I have
downloaded the Kindle plug-in for Adobe InDesign which
| | 00:17 | at this point is version 0.971 Beta, but
it's been Beta forever, but it is nice that they
| | 00:23 | keep updating it, and now it works
for CS6, it came out a few months ago.
| | 00:27 | This one Kindle plug-in works, by the way,
for CS4 through CS6, and if you have an older
| | 00:33 | system, it's asking you to install
something to the system keychain, and I can tell you
| | 00:38 | that sometimes I forget to do that,
and it works perfectly fine anyway.
| | 00:42 | But download it for Windows or Mac, and then
you need to quit InDesign, run the installer,
| | 00:48 | and then start InDesign again, which I
have done, and we have our friend Mona open.
| | 00:55 | Where is the Export to Kindle command? Right
here under the File menu. Look at that Export
| | 00:59 | for Kindle, isn't that incredible?
| | 01:01 | If you create a book file, you'll find the
Export for Kindle command right there in the
| | 01:06 | Book Panel menu as well, so you can export an
InDesign book to Kindle, not just a single document.
| | 01:12 | Now I can tell you, though, that I don't
recommend that you use the Export for Kindle plug-in,
| | 01:17 | only because you have a really little
control over what happens in the end.
| | 01:21 | I guess it works great for simple eBooks,
and this one is not quite that simple, it
| | 01:26 | is the one that we are so familiar with.
| | 01:28 | It's got a bunch of images and on the pages,
you know there's a lot that's going on, we
| | 01:34 | don't have any place TOC here, but that's on
purpose, so I am going to show you why in a minute.
| | 01:39 | We do have all the images that we have been
working with before and a bunch of links and
| | 01:44 | footnotes and so on and a lot of formatting, a lot of
paragraph and character style formatting is going on.
| | 01:50 | When we run it through the Kindle plug-in,
it's going to crunch away and spit out a Mobi
| | 01:54 | file, and we cannot extract the contents of
that Mobi file to edit it like we can extract
| | 02:00 | the contents of an EPUB file, so
what you see in the end is what you get.
| | 02:04 | Also using the Kindle plug-in ignores a lot
of the really cool features in InDesign for
| | 02:09 | EPUB like, for example, the Articles panel.
| | 02:11 | If you're using the Articles panel to define
layout order, the Kindle plug-in pays no attention to it.
| | 02:17 | If you're using export tagging,
it pays no attention to that.
| | 02:21 | You can't use your own CSS, you can't
use anything in Object Export Options.
| | 02:26 | It ignores any alt tags that you have added, any InDesign
artwork that you have told to rasterize and so on.
| | 02:32 | So there are a lot of features that you lose,
and you can imagine that you know this plug-in
| | 02:37 | that works with version CS4 to CS6 of course
is not going to be able to support all those
| | 02:42 | cool new EPUB features that Adobe
has added to InDesign. All right.
| | 02:47 | So all that that put aside, it is so sweet
to be able to simply choose from the menu,
| | 02:52 | Export to Kindle. Let's go ahead
and do it and see what happens.
| | 02:55 | One thing, though, before we go to that
dialog box is I need to have a stand-alone cover
| | 02:59 | file because it's going to ask me to link to it.
| | 03:02 | I don't have one yet, the first page of my
document is the cover, but surprise, surprise,
| | 03:07 | the Kindle plug-in ignores the InDesign feature of
converting the first page of the document to a cover.
| | 03:13 | But it's a simple matter of
exporting what we do have here to JPEG.
| | 03:17 | So I am going to select everything here,
go to the File menu, choose Export.
| | 03:23 | This time I want to Export to JPEG, and
we'll save it right out there on the Desktop.
| | 03:28 | You just want to export the selection, right
now the entire book to JPEG, and let's give
| | 03:35 | it a high res of 300.
| | 03:38 | Remember from the Kindle Publishing Guidelines
that the cover needs to be at least 600x800,
| | 03:43 | which this is, and they want it to be
high res to future proof our cover.
| | 03:48 | So we'll leave the Quality at Medium and the
Resolution at 300, that looks good, and I'll
| | 03:53 | export it, and now let's go ahead and File >
Export for Kindle, where do you want to
| | 03:59 | save the Mobi file? And now we have a panel
that's kind of like a PDF Export panel.
| | 04:04 | It's kind of cool. It is much more
detailed than previous iterations.
| | 04:08 | I am not going to go through every single
entry here because they do have on that page
| | 04:13 | that you can download, a very nicely done Help file,
the Help and Release Notes for the Beta plug-in.
| | 04:20 | It's 30 pages long, but the first 15
pages are all about installing thing.
| | 04:24 | So I am just going to jump forward, and
then it goes through all the parts of InDesign
| | 04:29 | where you can access the plug-in and
then every single panel explained.
| | 04:33 | Okay, so refer to that for more
details, but let's jump back here.
| | 04:38 | Essentially do you want to include the InDesign TOC
entries, and yes I do. I want to use the EPUB entries.
| | 04:44 | This is going to be for the navigational
TOC and what format do you want the TOC to be
| | 04:50 | in the actually EPUB because they're going
to also put an HTML TOC, and you can choose
| | 04:56 | indented according to the levels of your TOC
or all flat at the same level, it can convert
| | 05:02 | it to a numbered or bulleted list.
You could also choose to link to a custom TOC.
| | 05:07 | You have to add an anchor tag to the
beginning of it, which I haven't done since I am not
| | 05:11 | going to do that here, and then you
would choose the text anchor from here.
| | 05:15 | Now you have to choose the cover image.
| | 05:17 | So I'm going to select History-of-Art.jpg,
you can choose to embed fonts or only the
| | 05:24 | ones that are used for your bullet characters,
which I think is interesting. I am not going
| | 05:27 | to embed any for now, and then in Contents,
it can ignore or maintain consecutive white
| | 05:36 | spaces, which I thought was kind of interesting.
| | 05:38 | I'm going to say I don't want to preserve that,
and I don't want to preserve forced line breaks.
| | 05:44 | And where should I put the footnotes?
| | 05:47 | Let's say at the end of the HTML files what
it's saying here, before a new chapter starts.
| | 05:52 | Or it could be at the end of the paragraph or at the
very end of the last chapter. We'll leave it right there.
| | 05:58 | This stuff for Images, the Image Alignment
applies to floating image, not anchored images.
| | 06:04 | And we want to use Optimize Images, the ones
that you know maintaining what we did in InDesign.
| | 06:10 | We don't want to send the
original images through.
| | 06:12 | It's going to automatically
convert it GIF or JPEG.
| | 06:15 | Remember, the Kindle does not
support transparency in PNGs.
| | 06:20 | Images may be further optimized to
fit the Kindle file format requirements.
| | 06:23 | Remember, an image can not be more than 127K, and
there's more details if you click on this link.
| | 06:30 | We do want to enter Metadata. It's already
pulling the Title and Author from our XMP
| | 06:35 | info, which is really nice.
| | 06:37 | We'll call this Acme is the Publisher, and
if you don't enter anything here, it will
| | 06:41 | just use today, the date that you exported.
| | 06:43 | So in fact, I am just
going to leave all that empty.
| | 06:46 | You don't really need an ISBN for Kindle
books because Amazon will assign its own Amazon
| | 06:51 | identifier, but if you have one,
you can go ahead and enter it.
| | 06:55 | You can enter description here, and you can
also enter the description once you upload
| | 06:58 | the book through Amazon, and the last one
is do you want to be notified when there are
| | 07:03 | updates to this plug-in? Of course you do.
| | 07:06 | You can quickly spit out a Mobi,
or you can do a Guided Export.
| | 07:10 | Let's do the Guided Export, and depending on
the options that you chose in those panels
| | 07:15 | and what's included in your book,
you will get different panels here.
| | 07:19 | Here it's picking up that we are using a
drop cap, and it's asking us how we want to set
| | 07:23 | the margins for the drop cap, like you know,
how much space on either side of the drop cap,
| | 07:28 | and in the KF8 version--because this one
Mobi file will be both for KF8 and Mobi7--
| | 07:35 | what should the multiplier be?
| | 07:36 | So one is the default type size, it's suggesting
almost twice the type size for the drop cap
| | 07:42 | that the KF8 does support.
| | 07:45 | It's the Kindle Fire line. Mobis do not
support drop caps, but it make a large gap, and it's
| | 07:49 | suggesting one and a half times the size.
| | 07:51 | I am just going to except all those
suggestions, and now what it's doing is it's running it
| | 07:56 | through KindleGen and apparently it's done.
| | 07:59 | So that's always good and go to the Finder
and on the Desktop here is our Mobi file.
| | 08:04 | If I double-click this, this is just going
to open up in the Kindle Reader, but I want
| | 08:08 | to actually open it in Kindle Previewer.
| | 08:11 | So I am going to go to Applications, find
Kindle Previewer, that is another free program
| | 08:16 | that you can download from the KDP website.
| | 08:20 | This app lets you preview what the book
will look like in different models, and I cover
| | 08:24 | the Kindle Previewer in detail
in another video in this chapter.
| | 08:29 | History-of-Art, and we open it.
| | 08:31 | Why is Mona gray? Because it's defaulting
to the viewing it on the Kindle Touch, the
| | 08:37 | equivalent of those E ink devices,
those paper white devices I think.
| | 08:41 | Let's look at it for the Kindle Fire, there
she is, and now we can go through here and
| | 08:46 | see how it came out.
There's chapter 1.
| | 08:48 | Now I want to show you something like do you see
this problem with the graphic here in this paragraph?
| | 08:53 | The graphic in the next graphic works fine,
and so that first graphic, the problem.
| | 09:01 | I just want to show you this is one consequence
of using the Kindle plug-in is that in InDesign
| | 09:08 | that first graphic is anchored as the last
character in the previous paragraph and remember
| | 09:13 | when you export to EPUB, InDesign automatically creates
a new paragraph for every anchored graphic or text frames.
| | 09:20 | So you don't need to create an empty
paragraph return in which to anchor this.
| | 09:24 | But the Kindle plug-in doesn't know anything
about that, and so it's going to try and bring
| | 09:28 | this in as they were anchored right inside the
same paragraph, and it pushes the text out of the way.
| | 09:33 | On the next page I actually put this into its
own paragraph right here, so it supported it fine.
| | 09:40 | That's just one example of some of the
things that might go glitchy when you're using the
| | 09:45 | Kindle plug-in, but there's no denying that
it's probably the fastest way to get a Mobi
| | 09:49 | out of your InDesign file.
| | Collapse this transcript |
| Converting with KindleGen and Kindle Previewer| 00:00 | The Kindle Previewer is that free bit
software that Amazon offers on their KDP portal.
| | 00:06 | You can download it right here for Windows or Mac.
| | 00:09 | It's a neat little utility that does a
whole bunch of stuff, and for our purposes, it's
| | 00:14 | probably the best way to create a Kindle book.
| | 00:17 | Because it can take an EPUB that you have
tweaked by cracking it open and editing the
| | 00:23 | CSS and HTML files, and it can convert that to a
single MOBI file that also includes the KF8 formatting.
| | 00:30 | Not only that, but it can preview what your
eBook will look like in a bunch of Kindle
| | 00:34 | Fire and eReader devices.
| | 00:37 | So this workflow gives you a lot more
control than using the Kindle plug-in for InDesign.
| | 00:43 | Kindle Previewer, by the way, automatically uses
KindleGen while it processes the EPUB to convert it.
| | 00:50 | So you do need to download and install
KindleGen, but you don't need to run KindleGen.
| | 00:55 | KindleGen as it says,
here is a command line tool.
| | 00:58 | So you would need to run it like from
Terminal on OS X or the command line interface on
| | 01:03 | Windows, and it's basically the engine that
converts various file types to MOBI/KF8 format.
| | 01:11 | But we don't have use the command
line, we can just use Kindle Previewer.
| | 01:15 | Make sure that you download both of them
and install both of them before you begin.
| | 01:18 | Okay, so then the recommended workflow here
is that you start in InDesign, you tweak as
| | 01:24 | necessary for KF8 and MOBI7, according to
the guidelines that you downloaded earlier,
| | 01:30 | you export to EPUB--I'm going to go ahead
and export this to EPUB right on the desktop--
| | 01:33 | and we don't need to view it after exporting.
| | 01:38 | In the resulting EPUB you open it up, you
tweak whatever you want to do, you see what
| | 01:44 | it looks like in various eReaders.
| | 01:46 | You can't see what it's going to look like on
any Kindle Readers because it's not converted yet.
| | 01:50 | But there might be some basic changes that
you want to make to the EPUB even before you
| | 01:54 | took a gander, and then you
open this up with Kindle Previewer.
| | 01:58 | So I have that queued up over here, double-
click Kindle Previewer, and the homepage--this little
| | 02:04 | home right there--lets you click to open
a book, and you can see that it can open up
| | 02:08 | a MOBI file, an EPUB file, an HTML file, or
even an OPF, that's for the people who are
| | 02:14 | handcrafting their own EPUBs, and we're
going to choose open the book to preview, and we
| | 02:22 | want to choose our EPUB.
| | 02:24 | Now it is using KindkeGen to crunch
through it, and it's done that's good.
| | 02:29 | Sometimes it's not able to create a good MOBI,
and it will tell you why even when it's successful
| | 02:35 | as it is here, it'll still tell you what it did.
| | 02:38 | So here's all the work that it did while we
were sitting here, it unpacked the EPUB file,
| | 02:44 | it did whatever MOBI kind of stuff it
needed to do with the metadata and the HTML files,
| | 02:50 | it built the table of contents, it did some
other crazy stuff, very geeky here, at the very bottom.
| | 02:57 | The file format version is version 8, so it's good
for KF8 and also the Mobi file is built successfully.
| | 03:04 | The output file creates a Mobi file from it,
and you can click to see where it is.
| | 03:11 | It names it according to the date
that it created it and the time.
| | 03:14 | You can just click OK, and then it's going to go
ahead and open up that Mobi file, and here it is.
| | 03:20 | So this is the cover. We're missing a table
of contents. This is something that we could
| | 03:24 | fix in the EPUB. This is a navigational table
of contents, and we click on Painting in Spain,
| | 03:32 | and it brings us to painting in Spain, and
I really didn't tweak this at all for MOBI 7,
| | 03:37 | so this is the sad thing
that's happening to our drop cap.
| | 03:40 | But if you want to see what it's going to
look like on a different kind of Kindle, just
| | 03:44 | go up to the Devices dropdown menu. It's by default
showing us what it would look like on a Kindle Touch.
| | 03:50 | If you want to see what it would look like on a
generic eReader, it's that one. It doesn't look too bad.
| | 03:57 | If you want to see what it would look like on a
Kindle Fire see, there is our drop cap. It looks much better.
| | 04:03 | You want to see what it looks
like tiny on Kindle for iPhone.
| | 04:06 | So the Kindle software for the
iPhone is still MOBI 7 apparently.
| | 04:11 | But you can see that KindleGen and the
Kindle Previewer went through and decided what to
| | 04:17 | do with their drop cap here,
which I think is very nice of them.
| | 04:20 | So let's say that you added this MOBI file to
your device, and you didn't like how it looked.
| | 04:24 | Well, then you just come back here to your
hard drive, and you edit the EPUB again, you
| | 04:30 | zip it back up as an EPUB, and you reconvert it.
| | 04:33 | So that's the best way to create a Kindle
version of your eBook. It gives you a lot
| | 04:37 | more control, make a good InDesign file, export
it to EPUB, and convert it with Kindle Previewer.
| | Collapse this transcript |
| Converting EPUB for other resellers| 00:00 | Assuming you have a solid EPUB that
validates with EpubCheck, then there actually is not
| | 00:07 | that much more work that you need to do to
get this EPUB ready for other major resellers.
| | 00:12 | What you will need to do, though, is go to
those sellers and see if you can get any special
| | 00:18 | kind of publishing guidelines.
| | 00:20 | We looked quite closely at the Amazon
publishing guidelines, and most publishers like Apple
| | 00:26 | and Barnes & Noble and Kobo have publishing
guidelines if they have a way for independent
| | 00:32 | publishers to upload their eBooks.
| | 00:36 | You can imagine this has taken everybody
quite by surprise that there will be many people
| | 00:41 | in the world who want to publish their own
books rather than give them to a publisher
| | 00:45 | to do, so not everybody has a portal for
independent authors and small publishers, but those that
| | 00:52 | do often have publishing guidelines.
| | 00:54 | So, for example, if you want to sell your
books directly through the iBookstore, you
| | 00:59 | have to have an iTunes Connect account, and I'll
definitely talk about that in the next chapter.
| | 01:04 | Once you have set up that account, then they
give you a special log on to a portal where
| | 01:09 | you can download all sorts of information,
including their publishing guidelines.
| | 01:14 | Unfortunately, I can't share those with
you, because they are behind that firewall.
| | 01:19 | If they're publicly available,
I can share stuff with you.
| | 01:21 | But what I did do is I queued up this quite
good Book Publishers: Frequently Asked Questions
| | 01:26 | page that has a link to the
application and gives you a bit of information.
| | 01:31 | And I think that I have brought up in a few
different videos that, for example, for the
| | 01:34 | iBookstore, if you want to include fonts,
then you have to include the certain file
| | 01:39 | in your META-INF folder, those are the kind
of things that you learn from their guidelines.
| | 01:45 | And if you watch that video, you saw
it was just a small extra step to do.
| | 01:48 | So it's not like you have to start all over
from the beginning and redo all your styles,
| | 01:53 | kind of like what you need to do for the Kindle,
but for the other publishers who all accept
| | 01:58 | EPUBs, if you want to maximize how your EPUB looks on
their device, then you should definitely register with them.
| | 02:05 | Here is another one, Barnes & Noble, as you
know, sells the NOOK eReader, and one thing
| | 02:10 | you should do would be to
download the software for the NOOK.
| | 02:13 | So like here, under Computers, we would
download the NOOK eReader for the Macintosh.
| | 02:19 | Now, this doesn't simulate the NOOK exactly,
it's not the same thing as say Kindle Previewer,
| | 02:25 | which previews how a Kindle book looks on
different devices, but it definitely can show
| | 02:29 | you any EPUB that you have purchased from
the NOOK Store, and you can open up an EPUB
| | 02:34 | that you have created in the application.
| | 02:36 | Now, to get their publishing
guidelines, though, is a different story.
| | 02:39 | First of all, you have to find out, do they
have a special program for independent publishers?
| | 02:45 | And they do, it's called PubIt! for independent publishers.
| | 02:48 | The books that you upload, though, are not
sold in the main Barnes & Noble NOOK Store, they
| | 02:53 | are sort of like in their
own special neighborhood.
| | 02:56 | Here in NOOK Books, if you go down to PubIt Books >
Trademark, Discover Independent Authors.
| | 03:03 | So all these books were uploaded by
people who joined the PubIt! program.
| | 03:07 | I found it difficult to locate the
registration page as a link anywhere on their website.
| | 03:12 | I don't know if they're phasing
out the program or what's happening.
| | 03:15 | That would make no sense whatsoever since
independent publishers are growing by leaps
| | 03:20 | and bounds, but I did find it at some point.
| | 03:24 | You need to write down this URL, pubit.barnesandnoble.com,
and then you will be able to get there.
| | 03:30 | Once you create an account, and it's free
to create an account, then you will have a
| | 03:33 | log on to a special portal, where I am
going to sneak you in really quick here and show
| | 03:37 | you that under the support tab, they have
Formatting Guides, and you can download their
| | 03:42 | EPUB Formatting Guide and tweak your EPUB
just for the PubIt! Store and the NOOK Reader.
| | 03:48 | I can't open it up, as I said, because it's
behind this little firewall, but I can tell
| | 03:52 | you that, for example, it suggests to add
page margins of 30 pixels around the top,
| | 03:58 | left, and right, but 20 pixels at the bottom.
| | 04:01 | It tells you that the maximum
viewing screen area is 600x730 pixels.
| | 04:06 | Unfortunately, their guidelines, this EPUB
Formatting Guideline was last updated in 2010,
| | 04:11 | and I would imagine that there are more
NOOKs that have come out since then but the good
| | 04:15 | news is that they have a very lively
and active PubIt! Community Board
| | 04:15 | where people just like you are
posting questions all about formatting
| | 04:19 | their EPUBs and selling
them on the PubIt! Store.
| | 04:28 | Similarly, the Kobo bookstore has a program
for independent publishers called the Writing Life,
| | 04:33 | which I thought was kind of neat.
| | 04:35 | If you're in the U.S., Kobo might ring a
bell, but it doesn't sound really familiar.
| | 04:40 | But if you are in Australia, New Zealand,
Canada, the UK, it's one of the big players
| | 04:45 | in the eBook market, and there is a lot
of people who read in those countries.
| | 04:49 | It's free to join the Kobo program. Just
go to where it says Authors & Publishers.
| | 04:53 | If you are a larger publisher that has like
a production schedule, and you're doing 10-25
| | 04:58 | books a year at least, then you might want
to become an official Kobo vendor, and you
| | 05:02 | would get more support.
| | 05:04 | But I really like what Kobo is doing here
for people who are independent or running
| | 05:09 | small production companies or small publishing
houses as a way to build a nice community around them.
| | 05:15 | One thing that all of these resellers have
in common in all of their programs is that
| | 05:19 | they want you to start with an EPUB that is
valid, and because you have been watching this
| | 05:24 | course so far, you know exactly how to
do that, so you are ahead of the game.
| | Collapse this transcript |
|
|
11. Distributing Your EbookGetting an ISBN for each edition| 00:00 | If you're publishing your own eBook,
you're going to have to get an ISBN.
| | 00:05 | That is a unique identifying number used by
libraries, the Library of Congress, bookstores,
| | 00:10 | online retailers, and so on.
| | 00:12 | And this is the homepage of
the isbn.org, isn't it lovely?
| | 00:17 | In the United States this company, Bowker--
and that's where that link would lead you to--
| | 00:22 | is the provider of all ISBN numbers.
| | 00:26 | You go to their website which is myidentifiers.com
and click on ISBN, and you purchase your ISBN
| | 00:34 | numbers right from them.
| | 00:35 | Now a single ISBN is kind of pricey, it's $125.
It would make much more sense to purchase
| | 00:40 | them in a pack of the least 10, which is $250 or
just 25 bucks for IBSN, a lot cheaper than a single one.
| | 00:49 | The reason you might need more than one ISBN,
because you might publish another book or
| | 00:53 | when you update that book, you need to make
some major changes, and you do a second edition
| | 00:57 | that has to have it's own unique ISBN as well.
| | 01:00 | Now, you cannot reuse your print either
hardcover or paperback ISBN for the eBook, the eBook
| | 01:07 | has to be its own separate unique ISBN number.
| | 01:10 | Even if you are creating a PDF eBook for
sale, that PDF has to have its own ISBN number.
| | 01:17 | Now if you're going to be using an
aggregator, a third-party vendor to sell your eBook--
| | 01:22 | and I'll be talking about them in another
video in this chapter--a lot of them will include
| | 01:27 | the cost of the ISBN with their service.
| | 01:30 | Or if you're going to be selling your eBook
mainly through the Amazon Kindle store, you
| | 01:34 | don't have to buy an ISBN for them, because
they don't use ISBN for their eBooks, they
| | 01:39 | assign an ASIN and an Amazon identifier.
| | 01:43 | If you want to attach an ISBN number to one
your Kindle books, you can, it's optional, but
| | 01:48 | they don't require it.
| | 01:49 | In fact, the only major reseller that deals
with independent publishers and authors that
| | 01:53 | requires an ISBN is the
Apple iTunes, iBookstore.
| | 01:58 | Everybody else either assigns their own
internal number or they include an ISBN in the cost
| | 02:04 | of joining the program.
| | 02:05 | If you have more questions about ISBNs, this
website, the Bowker website, has a great Help
| | 02:10 | section an ISBN FAQs like if the
price of the book changes, does the ISBN?
| | 02:16 | Can an ISBN be reused?
Can I use one of my friend's ISBNs?
| | 02:21 | Some silly questions I guess
they have heard everything over there.
| | 02:23 | Of course, if you're just a producer or you're
a little cog in a big machine in a publishing
| | 02:28 | house you don't have to worry about creating
an ISBN, but even if you're a freelancer, often
| | 02:34 | you'll be dealing with authors
who have never published before.
| | 02:37 | You're going to have to remind them, hey,
you need an ISBN, here's where you go.
| | 02:40 | Would you like me to buy one for you? And add
it to the cost of your bill and so on.
| | 02:45 | The ISBN as said is mainly for the United States.
If you are out of the United States,
| | 02:49 | there is still an ISBN number you need to
get, but you can't use that myidentifiers.website.
| | 02:54 | Go to isbn-international.org and
then just click on the National Agencies.
| | 03:00 | So, for example, if you're in Belgium,
French speaking, and you need an ISBN number for
| | 03:04 | your eBook there, then choose that and you
would email this person or go to this website.
| | 03:09 | I have to tell you it's kind of tickled to
find out where ISBN numbers are born, because
| | 03:14 | growing up as a reader, I always saw that
number and I wondered who assigns these numbers?
| | 03:18 | Well, now you know, this one company
making a lot of money from ISBN numbers but some
| | 03:24 | sort of unique ID number is
required for any EPUB that you publish.
| | Collapse this transcript |
| Getting your ebook into the Kindle Store, iBookstore, or NOOK Store| 00:00 | Now that you have your final EPUB, and you
have your ISBN number, it's time to go out
| | 00:05 | and make a million dollars, right?
Well, yes, it's true. It can be done.
| | 00:11 | Your choices as far as how you are going to
make a million dollars come down to one of
| | 00:16 | three methods, and they are not mutually
exclusive, you can do them all at the same time.
| | 00:20 | The first method, the one that I'm going
to talk about in this video is by creating a
| | 00:24 | direct relationship with the major
eSellers out there, people who are selling eBooks.
| | 00:29 | For me, that is the Amazon Kindle Store, the
Apple iBookstore, and then to a lesser extent
| | 00:36 | either the Barnes & Noble NOOK
Store or the Kobo Store, or both.
| | 00:40 | I'll just be talking about
the NOOK Store in this video.
| | 00:43 | The second method is to
use a third-party aggregator.
| | 00:46 | There are a number of really great companies
out there that will take your EPUB and they
| | 00:51 | will take care of adding all the metadata
and getting all the information that all these
| | 00:56 | resellers need, and they will submit it
for you and pass through all the income.
| | 01:02 | But of course, they have to get paid somehow.
| | 01:03 | So you're going to have to pay
them some money for that service.
| | 01:06 | I'll be talking about that in the next video.
And finally, you can just sell it yourself.
| | 01:11 | You can post your EPUBs on your own website,
or you can use an eCommerce solution where
| | 01:16 | they sell digital stuff
just like any software vendor.
| | 01:20 | You have a lot more responsibility that way,
but then you don't have to pay any reseller
| | 01:25 | or aggregator anything.
You get to keep all of the income.
| | 01:29 | And in many cases, you can
combine all three methods.
| | 01:32 | You can sell your Kindle books with Amazon
through a direct relationship with them, use
| | 01:37 | an aggregator for all other venues,
including Apple iBookstore, Kobo Store, NOOK Store,
| | 01:42 | Sony Store, all those places, and
also sell some from your own website.
| | 01:46 | So let's talk about
creating a direct relationship.
| | 01:50 | To set up an account with the Amazon Kindle
Store, go to kdp.amazon.com and sign in with
| | 01:56 | your Amazon account, or create a separate new
Amazon account--you only need an email address
| | 02:01 | to do so--and then sign in.
| | 02:03 | Now, I can't really show you what it looks
like after you sign in, because that's proprietary
| | 02:08 | information for Amazon,
but I can describe it to you.
| | 02:11 | I can tell you that it's a very simple few
pages where you type in the name of your book,
| | 02:17 | enter the names of your contributors, write
a description, 4,000-character field where
| | 02:22 | you can write a description, enter any keywords that
you want people search for and end up with your book.
| | 02:28 | You can upload a high-res
cover, in fact they require it.
| | 02:32 | Then you can choose whether or not
you want DRM, Digital Rights Management.
| | 02:36 | It's just a radio button
that you turn on or off.
| | 02:39 | You set the price that you want to sell the
book for, and you upload the EPUB and they
| | 02:43 | will convert it to MOBI for you, or you
upload the MOBI that you have already finished.
| | 02:47 | If you upload an EPUB, they'll crunch it through their
version of KindleGen and then give you a preview of it.
| | 02:52 | And from the people that I have talked with
who are selling things on Kindle Store, and
| | 02:56 | from my clients, it takes anywhere from 24-48
hours for it to be ready for sale, it's fantastic
| | 03:02 | and very simple to do.
| | 03:04 | Let's take a closer look at some of the details
of how the Kindle program works for publishers.
| | 03:10 | You're going to need a tax ID, your Social
Security Number, if you're a company, your FEIN number.
| | 03:16 | And if you are not in the United States,
then you'll need what's known as an ITIN, and I
| | 03:24 | have that queued up here, an Individual
Taxpayer Identification Number, or Form W-7.
| | 03:30 | Now, the people that I have talked to who have
filled this out say that it's really not that
| | 03:33 | big of a deal, as you can see it's just
one page long, and essentially just gives you
| | 03:38 | a tax ID number for the IRS to identify
you, because Amazon and these other U.S.
| | 03:43 | companies are beholden to the IRS, to the
Internal Revenue Service, to let them know
| | 03:48 | who they're sending money to.
| | 03:50 | And if you don't owe income taxes, then that's fine,
but you have to have a number that identifies you as such.
| | 03:56 | So you can go to irs.gov, look for Form W-7
and fill that out to get your own number,
| | 04:02 | and I have heard that it just takes a couple
of days for the IRS to turn around and email
| | 04:06 | you your ITIN number.
| | 04:08 | If you go through this, by the way, and
you find out differently, please by all means
| | 04:12 | contact me via email
because I'd like to find out more.
| | 04:16 | The ISBN is optional, as I
said in a previous video.
| | 04:20 | And then the money that you earn is you get
70% royalties for your eBooks that are priced
| | 04:26 | between $2.99 and $9.99.
| | 04:29 | That's why the vast majority of
Kindle books are priced there.
| | 04:32 | If you price it less than that or more
than $9.99, then you just get 35% royalties.
| | 04:38 | And I think that that is how the royalties
work in some other countries as well that
| | 04:42 | they don't have the 70% option.
| | 04:44 | Once you log in, you'll see the current
details for your country and your situation.
| | 04:50 | Unlike any of the other EPUB sellers,
also Amazon charges you a download fee.
| | 04:56 | So if your book is kind of large, then Amazon
will charge you 15 cents per megabyte as people
| | 05:02 | download it, which could eat
into your profits quite a bit.
| | 05:05 | Now let's look at the Apple iBookstore.
| | 05:08 | Go to itunesconnect.apple.com, and if you
are not already a member, an official iTunes
| | 05:14 | Connect account holder, then you'll see
the iTunes Connect Account Application.
| | 05:18 | They keep tweaking this first page, so it
might look a little different when you see it.
| | 05:22 | But what they want to know is
what do you want to sell with us?
| | 05:25 | And if you want to sell multiple things, if
you want to sell apps and music and books,
| | 05:30 | you have to have three separate iTunes accounts.
| | 05:32 | That is one requirement is that you have
to have an account with iTunes, so that means
| | 05:37 | you need a unique email address, and you
always need to have a credit card number associated
| | 05:42 | with your iTunes account.
| | 05:43 | Let's say that you wanted to sell books,
here are all your other choices, Music, Books,
| | 05:48 | TV, and you click Continue,
your books on the iBookstore.
| | 05:53 | And then these are the steps.
| | 05:54 | You complete your application,
it's like two or three pages online.
| | 05:58 | You confirm your account via email.
| | 06:00 | You download an app, and then you use that app
to upload your EPUBs to the iTunes iBookstore.
| | 06:08 | Note that iTunes Producer, the app that you
use, only runs on a Mac version 10.6 or later.
| | 06:14 | So if you want to sell your books directly
through the iTunes iBookstore, you have to
| | 06:19 | have a Macintosh, or you have to have a
really good friend who has got a Macintosh and will
| | 06:23 | let you use it all the time.
| | 06:24 | There is another decision that you have to make, whether
or not you have to buy a Macintosh is the first one.
| | 06:29 | The second one is what
kind of account do you want?
| | 06:32 | And they just started
offering this Free Books Account.
| | 06:35 | With a Free Books Account, you get iTunes
Producer, you get the direct relationship,
| | 06:38 | but you can only upload free books.
| | 06:41 | Maybe that's all you want, maybe you are a
company, and you want people to be able to
| | 06:45 | download free samples of your
books or something like that.
| | 06:48 | I can't really imagine why
anybody would want a Free Books Account.
| | 06:51 | But it still requires an Apple ID, a valid
email account, a Mac running 10.6 or later.
| | 06:58 | Now, a Paid Books Account is the kind that most
people have, where you can actually upload books for sale.
| | 07:03 | You don't have to sell a book, by the way,
you can create a Paid Books Account and not
| | 07:08 | sell a book for a year.
| | 07:10 | One of the reasons you might want to do that
is because with a Paid Books Account you get
| | 07:14 | all of the goodies that
Apple has for publishers.
| | 07:18 | With a Free Books Account, you get the
Apple publishing guidelines, so that's good.
| | 07:22 | But with a Paid Books Account you get that,
plus you get that really neat Book Proofer
| | 07:26 | app that I showed in a couple of videos,
and you get more information on top of that.
| | 07:30 | However, you do have to give
them some financial information.
| | 07:34 | You have to give them the tax ID,
you have to have a valid bank account.
| | 07:38 | Go to itunesconnect.apple.com to apply.
| | 07:41 | For a Paid Books Account, you
need that iTunes account tax ID.
| | 07:45 | Any royalties you make are paid by electronic
funds transfer, so you need a valid bank account.
| | 07:51 | You use iTunes Producer to upload the EPUB.
| | 07:54 | Apple iBookstore does require an ISBN,
Amazon does not, the NOOK Store does not, and you
| | 08:01 | get, as you probably know already,
70% royalties for your books.
| | 08:05 | There are pricing guidelines,
there is a minimum and maximum price.
| | 08:08 | There is no charge for downloading, and
your books on the Apple iBookstore can be much
| | 08:13 | larger than on the Amazon Store.
| | 08:15 | On the Amazon Store, they can't exceed 50MB,
on the Apple iBookstore they can be way
| | 08:20 | larger than 50 megs, as they often are.
Now let's look at Barnes & Noble PubIt!
| | 08:26 | Go to pubit.barnesandnoble.com and create
an account, and then you'll be able to log
| | 08:32 | into their portal and sell your NOOK books
through their special section on their website
| | 08:37 | just for independent authors.
| | 08:40 | The royalty splits are
pretty close to what Amazon does.
| | 08:43 | You get 65% for any books priced
from $2.99 to 9.99, otherwise 35%.
| | 08:49 | Now, of course a lot of these numbers may
change by the time you are watching this video.
| | 08:54 | Please make sure and recheck what
the sites say for royalties and so on.
| | 08:59 | However, they do require a tax ID,
and they need a U.S. bank account.
| | 09:05 | They want you to have a credit card on
file in case people return the eBooks, which I
| | 09:09 | think is kind of funny.
| | 09:11 | And then you upload EPUB format, that's the
only format they accept, and fill in any metadata
| | 09:16 | online in their PubIt! Portal, similar to how you fill
that in with the Kindle when you upload right to the portal.
| | 09:22 | It's only the Apple Store that uses a separate
app, ITunes Producer to do all this kind of stuff.
| | 09:28 | What I love about this is that you
can do almost all this work online.
| | 09:32 | It does not cost a thing to create your own
direct account with any of these eBook resellers.
| | 09:37 | And if you don't mind a little bookkeeping
and babysitting of these accounts, then you
| | 09:41 | don't have to pay any aggregator any fee to
take care of this for you. It's great.
| | Collapse this transcript |
| Using third-party aggregators| 00:00 | When you're applying for an iTunes Connect
account--what I was showing in the last video--
| | 00:06 | there is a little link at the bottom one of
the first pages that says, hey, you don't have to
| | 00:10 | establish an account directly with us, you
can use one of our approved Aggregators.
| | 00:15 | And if you just look up iTunes Connect
approved Aggregators or iBookstore Aggregator,
| | 00:19 | you'll end up with this page.
| | 00:21 | It lists links to different
companies and says what they offer.
| | 00:25 | What is an Aggregator?
| | 00:27 | An Aggregator is a company that takes a
huge headache off of these eBook resellers, off
| | 00:32 | of Amazon and Kobo and Apple and so on.
| | 00:37 | Because they make sure that all of the
eBooks that they submit on behalf of their client
| | 00:41 | authors and small publishers already fit
all the specs required by that e-seller.
| | 00:46 | They take care of all the metadata, and then
they do all the financial reporting back to
| | 00:50 | their clients--that's us--and they do all
the tech support back to their clients.
| | 00:55 | So there little man and they do a great
service, you might consider using an Aggregator.
| | 01:00 | But I want to tell you about a couple things to watch
out for when you are investigating Aggregator services.
| | 01:04 | Like for example, let's take a look at one of
them Smashwords which I have already opened up.
| | 01:09 | Smashwords is well-known in the eBook
production circles. Their main clientele are authors who
| | 01:15 | write in Microsoft Word. That link brings you
right to how to Publish and Distribute Ebooks
| | 01:20 | to the Apple iBookstore.
It's quick, easy, and Free.
| | 01:25 | And instead of earning 70% of your money,
which is what Apple would give you, you earn 60%,
| | 01:31 | so in other words, Smashwords is keeping 10%.
| | 01:34 | But if you come down here, Apple
iBookstore Publishing Checklist, look under Format.
| | 01:38 | You have to follow their Style Guide, and
your book has to be uploaded as a Microsoft Word
| | 01:44 | DOC file. You cannot upload PDF or
EPUB or MOBI as your source file.
| | 01:49 | So not all these aggregators
are ones that you want to use.
| | 01:53 | And out of all these aggregators,
I have heard mixed reviews.
| | 01:56 | Let me tell about two aggregators who are
not paying me to endorse them, but I'm only
| | 02:01 | mentioning them because they have been around
for a while, and I personally know people who have
| | 02:05 | used them and they are
happy with their services.
| | 02:07 | One of them is called the BookBaby.
The BookBaby service works like this.
| | 02:11 | You sign on, you upload your EPUB file, that's
only 99$ if you do that, they charge you more
| | 02:16 | if you upload a Word file or something, and
then they sell your eBooks worldwide, and
| | 02:22 | you get paid 100% they don't keep a cut.
| | 02:24 | They have a really great place to keep track
of your cells called their Accounting Dashboard
| | 02:29 | that you can log into. You can download
these reports to your Excel file if you want.
| | 02:34 | They distribute your eBooks
to all of these resellers.
| | 02:37 | So the big ones like Apple and Amazon and
NOOK and also the Reader Store for the Sony
| | 02:41 | Reader, Kobo all these places.
| | 02:44 | Another good one that I have heard about
recently is called PigeonLab, PigeonLab offers one
| | 02:49 | servers, they distribute your eBook that's it.
| | 02:52 | You need to ensure that the EPUB and MOBI
File that you upload to them is good to go
| | 02:57 | and according to publisher specs.
| | 03:00 | They are based in San Francisco, and they
distribute to these resellers, and in fact, if you go to
| | 03:05 | the FAQ--I thought this is interesting
that if you scroll down it shows what countries
| | 03:10 | my book be available in and the nice little
cheat sheet showing you know where the Kindle
| | 03:15 | store distributes to, where the
Apple iBookstore distributes to.
| | 03:19 | So I have this page
bookmarked just for reference.
| | 03:22 | One thing to keep in mind, though, is that they
are a little bit more expensive than BookBaby.
| | 03:26 | It's $99 per book, it look like
they have just reduce their price.
| | 03:30 | And if you need ISBN, they will give you one.
You don't get a discount if you have your own.
| | 03:34 | On top of that, they keep 10% of net sales.
So that's after the retailer's fees.
| | 03:40 | You sell your book for $10, Apple gives you $7,
they take 70 cents from there, so you get $6.30.
| | 03:49 | Covers sales reporting, book information changes, uploading
new files, there are no yearly subscription fees and so on.
| | 03:55 | Like BookBaby, the good things I have heard
about PigeonLabs is that they know what they're
| | 03:58 | doing and they are humans on the other
end of the phone if you have a question.
| | 04:02 | So time is of the essence, and you don't
want to bother with creating your own individual
| | 04:06 | accounts, set up an account with a trusted
aggregator and let them take care of the nitty-gritty
| | 04:10 | details while you lean
back and collect the money.
| | Collapse this transcript |
| Selling from your own website or ecommerce site| 00:00 | You know what? You don't have to be a genius
programmer to sell your own EPUBs on your own website.
| | 00:06 | There are lots of companies out there that
will tie into your WordPress site or your
| | 00:10 | static site or whatever kind of website you are
running that can handle the sales of your digital eBooks.
| | 00:17 | Any site that provides software sales
for small developers can also sell eBooks.
| | 00:22 | Let me show you a couple of these services and some
publishers who are already taking advantage of them.
| | 00:27 | Like, for example, this site called mycommerce.com
that I know of as Esellerate has been around
| | 00:34 | for years, and it's extremely robust site that
lets you upload files for people to download.
| | 00:41 | And then you can either create a store using
Esellerate with hooks into it from your own
| | 00:46 | website, or you can integrate
their code in your website.
| | 00:50 | They give you monthly reports, they do
automatic transfers to your bank accounts as sales are
| | 00:55 | done, they take care of sales tax, and they just
take as you can see a small fee from every sale.
| | 01:01 | 7.9% is a lot better than 30%, right?
| | 01:06 | Another similar kind of company is KAGI, you
may have heard them because lot of time small
| | 01:11 | software developers and plug-in
developers use their service.
| | 01:15 | And you can have a hosted online store just
as you can with Esellerate or you could host
| | 01:20 | it all inside your own website, and it's only the
shopping cart that takes the user out to their site.
| | 01:27 | I was searching around to see if there are
any eBook publishers that are using KAGI and
| | 01:30 | yeah here is one called Wind
River Press, looks beautiful.
| | 01:33 | So this is there book catalog, and if you
want to order one of these books you just
| | 01:37 | click the order online, and it
brings you right to the KAGI online store.
| | 01:40 | Here is another publisher, Take Control EBooks, run
by a friend of mine Adam Engst and his wife Tonya.
| | 01:47 | They have published a ton of eBooks and
they used to publish solely in PDF format, and
| | 01:52 | now they're also offering
it in EPUB format as well.
| | 01:55 | And here's their page with their feature titles, and
they have published probably about 100 titles so far.
| | 02:01 | Let's say that I want to buy Take Control
of Troubleshooting Your Mac, I go to More
| | 02:05 | Info, and there is all sorts of info about
the book, there is an FAQ, a Blog from the
| | 02:11 | author, I can download a sample and then when
I want to buy it, it's right here Buy the eBook.
| | 02:17 | I click Buy eBook, and it brings me as you
can see from the URL to the Esellerate store.
| | 02:22 | This is hosted on the Esellerate website,
but it's really easy to mimic your website's
| | 02:27 | look on the Esellerate store.
| | 02:30 | I can enter my personal info, my credit card,
Esellerate takes care of the credit card processing,
| | 02:35 | you don't have to worry about creating a merchant
account or anything, or people can pay by PayPal or eCheck.
| | 02:40 | They can enter coupon codes and then once
they pay they can immediately download the
| | 02:45 | eBook right from the Esellerate store.
| | 02:48 | I know Esellerate because that's what we
use on the indesignsecrets.com website that I
| | 02:52 | co-host with David Blatner.
| | 02:54 | Now we are right in the middle of the huge redesign,
so what you see if you go to indesginsecrets.com
| | 02:59 | may look quite different
than what I am showing here.
| | 03:02 | But I have clicked the Store icon, and we
sell both hard goods and digital goods on
| | 03:07 | our Esellerate store.
| | 03:08 | So, for example, here is an eBook. If I want
to buy this eBook for what's new in InDesign
| | 03:13 | CS6, it opens up, and I can go ahead and
order, you can see it's not quite as tricked out
| | 03:18 | as that Take Control Book Store is.
| | 03:20 | If I want to go to continue shopping, you can see
that we have posters, videos and eBooks for sale.
| | 03:26 | If I go to eBooks, here are
the eBooks that we are selling.
| | 03:29 | Very easy to do, didn't take that long to
set up, and I am definitely not a coder, and
| | 03:33 | I am the one who set that up.
| | 03:35 | Even if you are already selling your eBook
through the Apply iBook store or the Kindle
| | 03:39 | store, you can still sell it
yourself on your own website.
| | 03:42 | Just follow their guidelines as far as
competing prices and so on. They don't want to sell
| | 03:47 | it for $2 on your website where it's
$10 on their website, but even when they are
| | 03:52 | the exact same price you're going to
collect much more money because you don't have to
| | 03:55 | pay those direct resellers and/or
the aggregators their cut, right?
| | 04:01 | Something to consider.
| | 04:02 | Checkout Esellerate and KAGI and any other
similar kind of e-commerce provider, and I
| | 04:06 | think you will be pleasantly surprised
how easy it is to set this kind of thing up.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 | Unlike a software program, you actually have
to constantly be checking every day for new
| | 00:06 | stuff that's happening in our field of
EPUBs and digital eBook production in general.
| | 00:12 | So I'm going to show you a few of my highly-
recommended sites that you should be checking in order
| | 00:17 | to keep up and learn new features
and get answers to your questions.
| | 00:21 | First of all, please follow me at InDesignSecrets.com.
This is the blog and podcast that I co-host
| | 00:28 | with business partner David Blatner, who is
an InDesign Guru and has done many titles
| | 00:33 | here at lynda.com as well.
| | 00:35 | We do often publish more information about
EPUBs and what's happening with InDesign as
| | 00:40 | far as EPUB production is concerned.
| | 00:43 | We have a sister site run by Matthew Diener who
is a genius when it comes to eBook production
| | 00:49 | and distribution called ePUBSecrets.com, and
you can see he is writing some high-end stuff
| | 00:54 | about MathML Support, Reviewing EPUB
Myths, talking about conferences coming up.
| | 01:00 | So check out ePUBSecrets
and follow that one as well.
| | 01:03 | One of the best ways to get information is
by going to the mobileread.com/forums, click
| | 01:08 | Forums and check out all this good
stuff that's happening down here.
| | 01:11 | So, this is about eBook readers, but if you
keep scrolling down eBook software, so Calibre,
| | 01:17 | Sigil, EPUBReader, eBook Formats.
| | 01:19 | If you have questions about EPUBs, Mobis,
and so on, this is where you post them, and
| | 01:24 | this is where you get
some wonderful information.
| | 01:26 | Like those scripts that I was using throughout
this title for zipping and unzipping and validating,
| | 01:32 | I found all of those here.
| | 01:34 | Somebody posted them, and I
downloaded them from the mobileread.com/forum.
| | 01:37 | This is an excellent brain trust of experts, and I
highly recommend that you visit this at least weekly.
| | 01:43 | What I visit daily is the eproduction, #eprdctn, on Twitter.
| | 01:50 | A Hash tag is like a tag, and so you
don't have to follow people on Twitter.
| | 01:55 | You don't even have to have a Twitter account.
I am not logged into Twitter at all.
| | 01:59 | See what it says, Have an account? Sign in.
| | 02:01 | But anybody who posts anything having to do
with EPUBs or Kindles or Digital Books adds
| | 02:07 | this Hash tag, and you can
learn a ton of stuff from here.
| | 02:11 | This is where I post my own
questions and where I answer questions.
| | 02:15 | The eprdctn group even has a weekly
Tweet chat from 11 a.m. to 12 p.m.
| | 02:22 | every Wednesday morning, that's
Eastern Standard Time, 11 to 12.
| | 02:26 | Go to Twitter or go to tweetchat.com and
do a live search for the eprdctn hashtag.
| | 02:31 | And you can see them all talking about
whatever the topic is for that week's hash chat or
| | 02:36 | it's just a round table.
| | 02:37 | So what I love about the eprdctn Twitter hashtag
is that all the big experts in our field,
| | 02:42 | people like Joshua Tallent who wrote
formatting for the Kindle, Liz Castro who wrote
| | 02:47 | EPUB Straight To the Point, they are there all
the time along with their colleagues and people
| | 02:51 | from around the world who are formatting
for all different kinds of eReader devices and
| | 02:56 | the developers of software for people who are
making EPUBs, they are also posting with this hashtag.
| | 03:02 | Please check it out, it's an
excellent source of information.
| | 03:05 | Speaking of gurus, you
have got to follow Liz Castro.
| | 03:09 | This is her website, elizabethcastro.com.
| | 03:11 | She is the author of one of the best-selling
series of books at Peachpit Press called HTML,
| | 03:17 | HTML, XHTML, and CSS: Visual QuickStart Guide.
It's right now in its sixth edition.
| | 03:22 | I think I have the second and
third edition on my book shelves.
| | 03:24 | So of course she knows everything there is
to know about HTML and CSS, and she is now
| | 03:30 | writing all about EPUBs
and publishing her own EPUBs.
| | 03:33 | Including the one that I have been talking
about a bunch of times in this video called
| | 03:37 | EPUB Straight To the Point.
| | 03:38 | Now, Liz comes at it from a coder's point
of view, but if you saw starting like halfway
| | 03:43 | through this video tutorial often what you
need to do in an EPUB has everything to do
| | 03:47 | with the HTML and the CSS code.
| | 03:50 | And Liz writes for normal carbon-based life
forms, you don't have to be a developer or
| | 03:55 | a markup expert to understand what she is talking about
with excellent examples in full detail, so follow her.
| | 04:01 | She's also got a really funnily named blog
called pigsgourdsandwikis.com where she is
| | 04:08 | constantly writing about new stuff that she
is discovering having to do with flowing and
| | 04:12 | fixed layout eBooks.
| | 04:14 | And a new book that just got published right
before I started recording this video that
| | 04:18 | I downloaded immediately and I love
is eBook Typography by Chris Jennings.
| | 04:23 | Not only is the eBook itself beautiful,
but it talks about all of that things that we
| | 04:27 | really want to be able do with our eBooks,
but it's kind of tough to do because we're
| | 04:31 | not experts with CSS and HTML.
| | 04:34 | And he lays it all out. It is a
fantastic book, and I highly recommend it.
| | 04:37 | So those are the next steps. Keep
learning, keep learning, and share with me.
| | 04:42 | Please follow me at InDesignSecrets.com
and email me any of your questions.
| | 04:46 | I'd love to start a dialog with all
of you who are listening to this video.
| | 04:50 | Thanks so much for listening.
| | Collapse this transcript |
|
|
