IntroductionWelcome| 00:04 | Hi! I am Anne-Marie Concepcion and
welcome to Creating a Fixed-Layout EPUB.
| | 00:10 | In this course, I am going to show you
how to create these cool kind of EPUBs
| | 00:14 | that iBooks will show as though it were a PDF,
but you can sell them through the iBookstore.
| | 00:19 | We will start by looking at some of the
special features of Fixed-Layout EPUBs,
| | 00:25 | and we will talk about how to
get the content into an EPUB.
| | 00:28 | I will show you how you can
extract images from your PDFs;
| | 00:32 | we will jump right into editing all
these HTML files and image files using
| | 00:38 | Dreamweaver and other EPUB editing programs.
| | 00:41 | And I'll show you how to do things
that everybody asks me about all the time,
| | 00:45 | like how do you embed fonts in a Fixed
-Layout EPUB? How can you make images
| | 00:49 | span a two-page spread, and what's
the fastest way that you can proof your
| | 00:54 | EPUBs on your iPad?
| | 00:56 | There's a lot to cover, but I try to
make it as clear and simple as possible.
| | 01:00 | So let's get started with
Creating a Fixed-Layout EPUB.
| | Collapse this transcript |
| What you should know before watching this course| 00:01 | In this course, I assume that you have
some familiarity with EPUBs, especially
| | 00:05 | normal, flowable EPUBs and if you've
never created one before, then you might
| | 00:10 | want to bone up on it.
| | 00:11 | I suggest that you take a look at my
InDesign CS5.5 to EPUB, Kindle and iPad.
| | 00:17 | Though you don't need to know InDesign
that well to create a fixed-layout EPUB,
| | 00:21 | I do talk about parts of an EPUB
quite extensively in this title.
| | 00:25 | In addition, an EPUB is like a
miniature web site, so the more that you know
| | 00:29 | about HTML and CSS, the better.
| | 00:32 | If you are not that familiar with
CSS at least, I recommend highly James
| | 00:36 | Williamson's CSS Fundamentals.
| | 00:38 | We do talk a bit about CSS in this title,
and you'll feel much more comfortable if
| | 00:42 | you know what CSS is all about.
| | 00:44 | So with that, let's get going.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a premium member of the
lynda.com Online Training Library, or if
| | 00:05 | you're watching this tutorial on a DVD,
you have access to the exercise files
| | 00:09 | that I use throughout this title.
| | 00:12 | Inside the Exercise Files folder,
I have a folder for every chapter.
| | 00:16 | And in most of the chapters, I
have subfolders; one per movie.
| | 00:20 | You'll find some PDFs, some HTML,
| | 00:23 | some CSS files, some InDesign files,
everything that you need to do to follow
| | 00:27 | along with what I'm doing
on screen is contained here.
| | 00:30 | There are some free exercise files as
well, so even if you're not a premium
| | 00:33 | member, be sure to click on the
Exercise Files button in the lynda.com web site
| | 00:39 | to see which free ones you can download.
| | 00:41 | If you don't have access to the
premium files, don't worry about it.
| | 00:45 | You can follow along with your own files.
| | 00:48 | So let's get started.
| | Collapse this transcript |
|
|
1. Overview of the Fixed-Layout EPUB FormatComparing the looks of fixed vs. flowable EPUBs| 00:01 | Fixed-Layout eBooks are a special kind
of EPUB, that's kind of like a hybrid of
| | 00:07 | a PDF, with its complete control over
page design and an EPUB, which is an open
| | 00:13 | source format for digital books.
| | 00:16 | I have open here one such example.
| | 00:18 | It's a fixed-layout EPUB called Lost
Highway, written by Nigel French, one of
| | 00:23 | our author's here, and all the
photographs are from him as well.
| | 00:27 | And I have it open in my iPad and it
automatically opens to a two-page spread.
| | 00:33 | And if I flip, if I just drag to the
left, you can see that I'm paging through
| | 00:38 | it as though it were a
regular facing-pages eBook.
| | 00:41 | When I get to a page that has some text
on it, and here is a beautiful page with
| | 00:46 | a two-page spread of a single image,
which is something else you can do really
| | 00:51 | cool with fixed-page layouts.
| | 00:53 | Now just right here,
| | 00:54 | notice it if I tap on the screen,
we don't see a command to increase or
| | 00:59 | reduce the size of the type.
| | 01:01 | So if I want to zoom in closer to this
type, I actually need to double tap, so
| | 01:06 | that the entire image expands.
| | 01:09 | Now you might be thinking, well, this
is just an image is getting larger, the
| | 01:12 | text is part of that image, but no,
that is something else that's unique to fixed
| | 01:16 | layout EPUBs, is that, the text is all live.
| | 01:19 | This text is sitting on top of the
picture and I can press my finger against it
| | 01:24 | and drag across it, and the text gets selected.
| | 01:28 | I'm going to tap elsewhere to deselect.
Let's look at another difference between
| | 01:34 | fixed-layout EPUBs and
what we call flowable EPUBs.
| | 01:37 | I'm going to go to my Library and
open up a Brief History of San Francisco.
| | 01:42 | Now this is the EPUB that I was using
for a lot of the lessons in my InDesign to
| | 01:47 | EPUB courses here at lynda.com.
| | 01:49 | So if you saw any of those,
this looks familiar to you.
| | 01:52 | I am flipping through this book and
let's say that I want to look at the
| | 01:56 | navigational table of contents.
| | 01:58 | So I tap on the little button to the
right of the Library button, and it jumps to
| | 02:03 | the navigational table of contents for iBooks.
| | 02:06 | So, for example, I could just tap on
The gold rush and it will bring me to that
| | 02:10 | first page that begins with The gold rush.
| | 02:12 | The table of contents is quite
different in a fixed-layout EPUB.
| | 02:17 | Let's go back to Nigel's book and
I'll just tap here to awaken that little
| | 02:24 | button for navigational table of contents,
and when I tap on that button, I see
| | 02:28 | instead miniatures of every page.
| | 02:31 | Now to the right on the bar going
across the top, you can see that there's
| | 02:36 | actually two icons here.
| | 02:37 | There is one that shows thumbnails and
then there is this other one that shows lines.
| | 02:40 | And if I tapped on the ones with lines,
here is where the navigational table of
| | 02:45 | contents might go if you wanted it.
| | 02:48 | But it's not required by Apple
iBookstore. You don't have to have actual text
| | 02:53 | here, because most people will be
simply using the thumbnails view.
| | 02:58 | And in fact, if they're reading the
book, let's opens to this beautiful image
| | 03:01 | here, you can see at the bottom, there
is always this little thumbnail scrubber,
| | 03:07 | so I can drag through here
and move from page to page.
| | 03:12 | This is a very short book;
| | 03:13 | let me show you a longer one.
| | 03:14 | I am going to go back to the Library
and open up this Missed Connections, which
| | 03:19 | is a sample of a book that you can
download a free sample from the iBookstore.
| | 03:23 | And here if I tap on the book to
awaken the user interface around it, you can
| | 03:28 | see as I drag across the tiny little
thumbnails, larger thumbnails appear.
| | 03:32 | Now this is not something
that you have to create yourself.
| | 03:35 | When you create a fixed-layout EPUB,
Apple automatically generates these for you
| | 03:41 | and this is the default TOC that you get.
| | 03:44 | So these tiny little thumbnails, or if
you tap up here, you see these larger
| | 03:49 | thumbnails, or you can switch to the
more traditional TOC if you tap on here,
| | 03:54 | but only certain books have these usually,
unless they're really long, you'll often
| | 03:59 | just see one link to the
beginning of the book here.
| | 04:02 | With a fixed-layout EPUB, you have
complete control over the text and the images.
| | 04:06 | As I said, text can lie on top of images,
you can also specify where lines end,
| | 04:13 | you can have text wraps, but these are
all done manually, and once I show you
| | 04:18 | the interior of a fixed-layout EPUB,
you can see how it's quite a lot of work.
| | 04:22 | But in many cases, it's
going to be worth the effort.
| | 04:26 | So, a fixed-layout EPUB has certain
advantages over regular flowable EPUBs,
| | 04:31 | and let's take a closer look at those
advantages and disadvantages of working
| | 04:36 | with fixed-layout EPUBs in the next video.
| | Collapse this transcript |
| Evaluating the advantages and challenges of fixed vs. flowable EPUBs| 00:00 | So if you're trying to decide if a
certain publication should be a fixed-layout
| | 00:05 | EPUB or not, let's go through the
specific advantages of making it into
| | 00:10 | a fixed-layout EPUB, and also some of
the challenges you need to be aware of.
| | 00:14 | The main advantage of using a fixed-
layout EPUB is that, it's an EPUB, in
| | 00:20 | other words it can be
sold in the Apple iBookstore.
| | 00:22 | So if you're trying to decide, should we sell
this as PDF, or should we sell it as a fixed-layout?
| | 00:27 | Well, you can sell it as a PDF from
your own web site, but you won't be able to
| | 00:31 | list it in the Apple iBookstore, though
you can open PDFs in iBooks, you can't
| | 00:37 | sell them in iBookstore.
| | 00:39 | So the fact that a fixed-layout EPUB
is actually an EPUB is a huge advantage.
| | 00:44 | And because it is a fixed-layout, you
have complete control over the design
| | 00:48 | of every single page.
| | 00:50 | You have control over where the images
are positioned on the page, if it's just
| | 00:55 | one background image or multiple images,
you have one upper-left lower-right, you
| | 00:59 | are able to control exactly where they
fall, no matter how the user turns the
| | 01:05 | device in whichever orientation, or
they zoom in or zoom out, your images are
| | 01:10 | still positioned where you wanted them to be.
| | 01:13 | You can even create full-bleed
images, you know, like in the backgrounds of things,
| | 01:17 | something that you cannot
do with a flowable EPUB.
| | 01:21 | You can create layouts where you have
one image that spans across two facing
| | 01:25 | pages, a full-spread layout and if you
want you can put text on top of there as well.
| | 01:30 | So that looks pretty
spectacular when viewed on an iPad.
| | 01:34 | You have control over the size of your
text, over the fonts that are used, over
| | 01:39 | the indents, even over the breaks of
the lines, and if certain sentences should
| | 01:44 | be kept with other ones, like, for
example, if you want a subhead to always be
| | 01:47 | followed by two sentences of the body
copy, or you always want a picture with
| | 01:53 | its caption right next to it, or
underneath it. You cannot have that kind of
| | 01:57 | control for the most part
in a regular flowable EPUB.
| | 02:01 | But because you're specifying page by
page design in a fixed-layout EPUB, you
| | 02:06 | do have that control.
| | 02:08 | The text is still live, so it's not
like you are taking a series of JPEGs and
| | 02:11 | just throwing it up there, which is
what happens right now with digital
| | 02:15 | magazines, most of those are just
simply JPEG images of pages, in a vertical
| | 02:20 | orientation or portrait orientation.
| | 02:22 | But a fixed-layout EPUB is better than
that because the text is live, so users
| | 02:27 | can select the text and they can make
bookmarks out of them, add notes to them,
| | 02:32 | they can do a search in iBooks, they can
click the little search icon and search
| | 02:37 | for text within there.
| | 02:38 | You get that cool thumbnail table of
contents that's automatically generated
| | 02:42 | when you create a fixed-layout EPUB;
| | 02:44 | the strip going across the bottom
that I showed you, and also the navigational
| | 02:49 | table of contents in Thumbnail view,
that's something that can't get with a
| | 02:53 | flowable EPUB, that you can get with a
fixed-layout, and I really like those.
| | 02:57 | Now if you want to, you can
take fixed-layout EPUBs further.
| | 03:01 | In this video tutorial, I'm going to show you
how to create a basic fixed-layout EPUB,
| | 03:05 | but once you have a fixed-layout EPUB,
you can add a narration track, so that
| | 03:10 | people can turn on a Read Aloud
function, and then you have a natural voice
| | 03:15 | reading the words in the book while
the words get highlighted or entire
| | 03:19 | sentences, however you want to set that
up. You can add ambient audio, you can
| | 03:23 | add audio that plays whenever the book
is opened or whenever a page is opened.
| | 03:27 | Similarly, you can optionally add
interactivity with JavaScript, there are some
| | 03:31 | basic JavaScripts that you can add to a
fixed-layout EPUB that really don't work
| | 03:37 | very well at all in a flowable EPUB.
| | 03:40 | So those are some pretty powerful advantages.
| | 03:42 | Now let's talk about the challenges. The
main challenge with a fixed-layout EPUB
| | 03:47 | is that it is a lot of work.
| | 03:49 | There are very few, if any, programs that
will automatically create a fixed-layout
| | 03:54 | EPUB for you without a
lot of additional tweaking.
| | 03:57 | I mean, even though AdobeInDesign CS5.5,
as of this recording, can export
| | 04:03 | pretty good looking flowable EPUB, it
can't do a fixed-layout EPUB at all.
| | 04:08 | Essentially you're going to
have to create this by hand.
| | 04:12 | Now I'm going to show you some
automated ways that you can use functions in
| | 04:16 | Acrobat, if you are starting with a PDF,
or in InDesign, if you're starting with
| | 04:20 | the final book in as an InDesign file, to
help you create those individual files.
| | 04:26 | But the bulk of this title is
opening up or creating from scratch, the
| | 04:30 | individual files that
make up a fixed-layout EPUB.
| | 04:33 | So it's a lot of work.
| | 04:35 | Another disadvantage to me is that
there's no special category in the iBookstore
| | 04:41 | for fixed-layout EPUBs, and to
me that's a huge disadvantage.
| | 04:45 | I mean, let's take a look right now at
iTunes, and I have jumped to a book that
| | 04:50 | I was showing you in a previous
video called Missed Connections.
| | 04:54 | So Missed Connections is a fixed-layout
EPUB where there are five different CSS
| | 04:58 | files, where there is a ton of
manual coding done throughout this book.
| | 05:03 | But do you see anywhere in this
description that this is a fixed-layout EPUB, or
| | 05:08 | that, you know, this book looks much better than
normal flowable EPUBs! There's nothing on here.
| | 05:12 | I really think that there should be a
button or some kind of category in iTunes
| | 05:17 | Store or in the iBookstore just for
fixed-layout EPUBs, so that people could
| | 05:21 | understand, oh, maybe that's why this
book costs $9.99, or $14.99, or whatever it
| | 05:27 | is that you want to charge. You know,
you have to make your money back from all
| | 05:30 | that manual labor of
creating the fixed-layout EPUB.
| | 05:33 | But for the user who is searching for
fixed-layout EPUBs, who is searching for
| | 05:37 | the EPUBs whose design looks like a PDF,
they can't find that. There is not even
| | 05:41 | a keyword search for.
| | 05:43 | So that is a disadvantage maybe that
will change by the time this recording
| | 05:47 | goes live, or later in the year, but right
now if I were putting up a fixed-layout
| | 05:52 | EPUB in the iBookstore, I would make
sure to communicate that to my audience,
| | 05:57 | that this ebook has been specially
designed with the end-user in mind,
| | 06:02 | something like that.
| | 06:03 | Another disadvantage is that, though a fixed-
layout EPUB is an EPUB, it does pass EPUB check.
| | 06:10 | It's a valid EPUB, it uses open-
source coding, there are actually very few
| | 06:15 | eReaders that support fixed-layout EPUBs.
| | 06:17 | Everybody supports a regular EPUB, you
know, other than Amazon, and with Amazon
| | 06:21 | you can always upload your regular EPUB
and they will convert it to the Kindle
| | 06:25 | format, but that's not true for fixed-layout.
| | 06:27 | Now it's a wildly chaotic industry
and things are changing everyday, and
| | 06:34 | every week, but as of right now the main
reseller that carries fixed-layout EPUBs is Apple.
| | 06:41 | So this title is all about creating
fixed-layout EPUBs for the iPad and the
| | 06:48 | iPhone and iPod Touch. So only
iBooks in IOS can really see these.
| | 06:53 | Now I have heard, anecdotally, that the
fixed-layout EPUBs that you create for the
| | 06:59 | Apple iBookstore, can with just a
few tweaked lines, also be viewed as
| | 07:04 | fixed-layout on a Cobol VOX, and I've
also heard rumors that you can tweak it a
| | 07:10 | little bit to be seen on an NOOK Color
or NOOK Touch, or a NOOK Tablet, or one of
| | 07:16 | those or all three of those.
| | 07:17 | But there are hundreds of eReaders on
the market, and we are only talking about
| | 07:21 | three or four that could
possibly see a fixed-layout EPUB.
| | 07:25 | The one for sure they can see it is the
Apple iPad and all the other IOS devices.
| | 07:31 | So if you are trying to make your book
available to the widest possible audience,
| | 07:36 | creating a fixed-layout EPUB is
just going to hit a segment of them.
| | 07:41 | So you might have to create two
versions, something to keep in mind.
| | 07:45 | I hope now you have a better handle
on what are the positive things about
| | 07:49 | fixed-layout EPUBS and what are the
challenges that you might have to face when
| | 07:53 | converting your book to a fixed-layout EPUB.
| | Collapse this transcript |
| Understanding the parts of a fixed-layout EPUB| 00:01 | What makes a fixed-layout
EPUB into a fixed-layout EPUB?
| | 00:05 | How are its component files
different from a regular flowable EPUB?
| | 00:10 | They both end with the EPUB extension.
| | 00:13 | When I tap on one of them in iBooks,
how does it know to open it up to a
| | 00:18 | two-page spread with those cool
little thumbnail TOCs at the bottom?
| | 00:21 | How does it know it's a fixed-layout EPUB?
| | 00:24 | And that's what I want to show you here.
| | 00:25 | There are actually very few
differences, but they are crucial.
| | 00:29 | So what I have opened, are two
different EPUBs, I've already unzipped them.
| | 00:34 | All right, you see the component files.
| | 00:35 | One of them is a normal flowable EPUB
called San Francisco History, which is a
| | 00:41 | document that we looked at in
different videos in this title and that I was
| | 00:44 | using in my other InDesign to EPUB titles.
| | 00:47 | On the right, we have a folder
called Missed Connections, and that is a
| | 00:52 | fixed-layout EPUB of a sample that I
downloaded from the iBookstore, which is
| | 00:57 | a fixed-layout EPUB.
| | 00:58 | So you can see that, at
first glance, they are the same.
| | 01:02 | There is a META-INF folder and
a mimetype and a OEBPS folder.
| | 01:07 | And just like in a flowable EPUB, the
OEBPS folder is where all the action happens.
| | 01:15 | It has the CSS, any fonts or images, it has
an opf file, and then all of the content files.
| | 01:22 | But did you notice how many there are?
| | 01:24 | There is a different content
file for every single page.
| | 01:29 | In SFHistory over here, we have
a different content file for the
| | 01:34 | different chapters.
| | 01:35 | But every single page in a fixed-
layout EPUB has to have its own XHTML file.
| | 01:41 | Now these could end, by the way, with
HTML if you wanted them to, it's just that
| | 01:46 | in the header information they
have to be defined as an XHTML file.
| | 01:50 | So, in case you're wondering if
you're looking at one on your own desk and
| | 01:55 | doesn't end with XHTML, that's
really not that big of a concern.
| | 01:58 | But if you ever open up a fixed-layout
EPUB, you'll see that inside the OEBPS
| | 02:03 | folder, a series of
numbered like HTML or XHTML pages.
| | 02:10 | Another crucial difference is that there
is an extra file in the META-INF folder
| | 02:17 | in a fixed-layout EPUB.
| | 02:18 | Let me open this up.
| | 02:20 | So here in SFHistory, we
just have container.xml.
| | 02:25 | And we have the same container.xml file here.
| | 02:28 | They are exactly the same.
| | 02:30 | But in order for this book to be
recognized as a fixed-layout EPUB by
| | 02:35 | iBooks, you have to have this XML,
and you have to create it yourself.
| | 02:40 | InDesign won't create it for you.
| | 02:42 | And there are no other programs that
I know of that will create it for you.
| | 02:46 | So let's take a look at what this is about.
| | 02:48 | It is an XML file with UTF encoding,
and the only thing that it has in here is
| | 02:54 | that it is a fixed-layout
and the setting is true.
| | 02:57 | If it was false, there will be even no
point in including this, but the setting
| | 03:01 | is true, so this has to be there.
| | 03:02 | And you can use the same exact file
for all of your fixed-layout EPUBs.
| | 03:07 | It doesn't change book-to-book.
| | 03:10 | Couple more differences, one of
them is that in the HTML file, there is a
| | 03:15 | special line that has to go into
the header of every single HTML file.
| | 03:19 | Let's open up an HTML file from here,
from the SFHistory, and the header
| | 03:26 | is this part up here.
| | 03:27 | So here, in a normal flowable EPUB,
you might have more information.
| | 03:31 | But in ours, we just have the
title and where the linked CSS file is.
| | 03:36 | That's all that's in the header section.
| | 03:39 | But in a fixed-layout EPUB, let's
switch this to Soft Wrap Text, you have to
| | 03:45 | have a meta viewport tag added to
the head section of every HTML file.
| | 03:52 | So remember that every page has its
own HTML file, and you have to add this to
| | 03:56 | each one, and we will be working
with that later on in this video.
| | 03:59 | It is called a viewport which is
essentially telling the device, what is the
| | 04:03 | size in pixels of a page?
| | 04:08 | And here it's the width, it's 504 pixels
across and the height is 648 pixels tall.
| | 04:13 | We will be talking about viewports
in more detail later on in the video.
| | 04:17 | But the essential thing is that the
viewport has to be the same in every HTML
| | 04:22 | file, and it has to be added to the
head section in every HTML file, and it has
| | 04:28 | to be added in one more place
and that is in the CSS file.
| | 04:33 | Now, this book has multiple CSS files,
but the one that is the main CSS file is
| | 04:39 | this one here called styles.css.
| | 04:41 | And if I double-click that, you can see
up at the very top under Global Styles,
| | 04:46 | they have defined the body when it's
followed by a div tag, which it is in every
| | 04:51 | single XHTML file in this, to
have the same viewport, 504x648.
| | 04:58 | So you have to have the viewport set up
in every one of your HTML files and you
| | 05:03 | have to specify it for the
body tag in your CSS file.
| | 05:08 | The final requirement for a fixed-layout
EPUB is that in the OPF file, which here is
| | 05:15 | in the package.opf, let's open
this up in TextWrangler as well.
| | 05:22 | At the very bottom, you have to
have in the guide section and reference
| | 05:28 | type=text, and this tells the
iBookstore where the main text starts in
| | 05:34 | your fixed-layout EPUB.
| | 05:36 | This is mainly so that the iBookstore
can create automatically a sample of
| | 05:40 | your book, because as you know, people
can download samples for free before
| | 05:44 | they purchase the book.
| | 05:45 | And you can create your own custom
sample but they also would like to be able to
| | 05:50 | create an automatic sample and so part
of their requirements is that, in the
| | 05:54 | guide section to have reference type
text, and to have it linked to where the
| | 05:58 | actual live text of your document starts.
| | 06:02 | So those are requirements but I want
to tell you a couple of things that
| | 06:05 | are also usually quite different
with a fixed-layout EPUB than they are
| | 06:09 | with a flowable EPUB.
| | 06:11 | This doesn't make any difference to the
eReader if it's going to be recognized
| | 06:15 | as fixed-layout or not, but, let's
actually take a look at one of these pages.
| | 06:18 | I'm going to open up page 18 here in Safari.
| | 06:23 | So let me open this up with
Safari, to see what it looks like.
| | 06:29 | So this is just one page and it's a left
-facing page, right, it's an even page.
| | 06:33 | And it is just this text, You Had a Guitar.
| | 06:35 | I Had a Blue Hat. This is live text.
| | 06:38 | Let's look at the source.
| | 06:40 | Here's our viewport setting in the
head section and then in the body, notice
| | 06:46 | that it says image class=full,
src=images/0018.jpg.
| | 06:53 | Let's look at 0018.jpg.
| | 06:55 | I'm going to select it and press the
spacebar in the Finder, and you can see
| | 07:01 | that it's just this line at the left.
| | 07:05 | But it is a full white background.
| | 07:07 | In other words, the image on this
page takes up the entire viewport size.
| | 07:13 | This text is lying on top of this image.
| | 07:16 | And they have specified the position
of this JPEG in the CSS, by defining
| | 07:24 | the class called full.
| | 07:26 | So let's take a look at
what that class looks like.
| | 07:30 | I will just do a find for full, and you
can see it right up here, img.full, the
| | 07:37 | position is absolutely on the page with
the height and a top margin of 0 and a
| | 07:41 | left margin of 0, and a Z index of -1;
| | 07:45 | Z index is kind of like layers.
| | 07:47 | So a Z index of -1 means it
is the bottommost layer.
| | 07:51 | In other words, we are never going to
have to worry about the image appearing
| | 07:55 | on top of text, because we're going to
be absolutely positioning the text as
| | 08:00 | well as the images.
| | 08:01 | You'll find that over and over again in
fixed-layout EPUBs, that images and texts
| | 08:05 | are absolutely positioned on the page,
and this is how the designer has complete
| | 08:11 | control over the layout.
| | 08:12 | So by default, all images are
positioned absolutely at the upper left-hand
| | 08:17 | corner of the page and
they are pushed to the back.
| | 08:20 | That's what's happening here.
| | 08:21 | Let's look at the text here.
| | 08:23 | It is with the id=entry, and let's
look at the CSS for entry, it is also
| | 08:35 | absolutely positioned.
| | 08:37 | And it's positioned 265 pixels
from the top, 75 pixels from the left.
| | 08:43 | So you will see this all the time in
the CSS files, is that for text the person
| | 08:48 | is absolutely specifying
where it falls on the page.
| | 08:51 | And also, that distances are
normally specified in pixels and not ems or
| | 08:56 | percentages, even font
size is specified in pixels.
| | 09:01 | So if you are familiar with creating
normal flowable EPUBs, then you are 75% of
| | 09:07 | the way there, with learning
how to create a fixed-layout EPUB.
| | 09:10 | It is simply a matter of making sure
to include the additional XML file in
| | 09:15 | the META-INF folder, the viewport
attributes in every HTML file, and the OPF
| | 09:21 | file, that one guideline in the OPF
file, and then getting really familiar with
| | 09:28 | CSS positioning.
| | Collapse this transcript |
| Deciding on a production workflow| 00:01 | What are the tools that you need to put
together a fixed-layout EPUB? What kind
| | 00:04 | of workflow is best?
| | 00:06 | That was one of the struggles that I had
with coming up with an outline for this
| | 00:10 | title actually, because I'm trying to
figure out what you are starting out with.
| | 00:14 | For me, because I'm InDesign person, I know
that I'm always starting out with an InDesign file.
| | 00:19 | And I think that for a lot of people
who will be viewing this title, because
| | 00:23 | InDesign is the de facto software
program of choice for book publishing, that
| | 00:29 | many people will be starting with an
InDesign layout that has been created for print.
| | 00:35 | And here is an example of the Lost
Highway book that we will be working with in
| | 00:40 | this title, laid out in InDesign.
| | 00:43 | If you don't have InDesign, maybe you're
not the person who actually designed it
| | 00:48 | or produced it, maybe you are the
author and you have something -- you have a
| | 00:54 | digital version of your book, but
it's not an editable production file, I'm
| | 00:58 | guessing that you probably have a PDF.
| | 01:02 | So another sizable group of people
watching this title, I'm assuming, will have at
| | 01:06 | a least a PDF to start out with.
| | 01:08 | This is a PDF of the same Lost Highway book
and I have it open right now in Acrobat 10.
| | 01:15 | And I'll be devoting a chapter to
discussing how to extract the text and
| | 01:20 | graphics from a PDF, from
both Acrobat, as well as Reader.
| | 01:26 | I'm thinking there might be a few of
you out there who don't have Acrobat and
| | 01:29 | who aren't quite ready to spend the $400
to purchase Acrobat if you don't have it.
| | 01:34 | So it's a lot more work, but it is
possible to extract text and graphics from a
| | 01:39 | PDF with Adobe Reader. Or you might
investigate some of the other lower cost PDF
| | 01:45 | editing programs out there,
competitors to Acrobat.
| | 01:48 | The point is that, neither Reader nor
Acrobat nor any other PDF program that I
| | 01:52 | know of has Save As EPUB
or Export to EPUB command.
| | 01:57 | They do have Save As Website or Export
to HTML that usually turns out to be much
| | 02:04 | more work than it's worth.
| | 02:05 | But I will be discussing how to work
with PDFs in another chapter as I said.
| | 02:10 | If you don't have your final book in
digital format, let's say that you're
| | 02:14 | starting from scratch and you want to
write one and you want to publish it,
| | 02:18 | you know, direct to video, as they say, we want
to publish it as a fixed-layout EPUB, then
| | 02:25 | you can use anything that you want to
write your text and to take your graphics.
| | 02:30 | And in the next chapter I am going to be
talking about how to save your graphics
| | 02:33 | and how to specify your text styling
if you want to do this all by hand, if
| | 02:38 | you're not even starting with the
final digital files from your book.
| | 02:41 | But honestly, you will have to place those
text and graphics in some sort of layout program.
| | 02:47 | It can be, you know, Publisher, if that's all you
have, or some kind of open source layout
| | 02:53 | program. You need to be able to
position the graphics and the text so that you
| | 02:58 | have an idea of how many pixels down
from the top of the viewport, or the page
| | 03:03 | size you want the text to start,
unless you can hold this all in your head.
| | 03:07 | I mean even if you have to sketch
it out on graph paper I guess.
| | 03:10 | If all you have is the actual printed
book, then you're going to need to get
| | 03:14 | that book scanned and there are
services that can do that for you, or you can
| | 03:18 | rip it apart yourself and scan every
page and then convert that to a PDF and
| | 03:24 | have Acrobat run Optical
Character Recognition on it.
| | 03:27 | And then you will end up
with the PDF version here.
| | 03:30 | And I do to talk about scanning pages
and using OCR in Acrobat in my other
| | 03:36 | lynda.com title called Acrobat 10
Essentials, if you want more help with that.
| | 03:41 | So once you have your starting
digital files of your eBook, then what? What
| | 03:45 | should you do to create those
individual files that we looked at in a previous
| | 03:50 | video that make up the
guts of a fixed-layout EPUB?
| | 03:53 | There's lots of choices out there
and I've gone through many of them in my
| | 03:57 | InDesign to EPUB titles here on lynda.com.
| | 04:00 | I will tell you lately I've
been focusing on Dreamweaver.
| | 04:03 | Dreamweaver comes with my Creative
Suite Design anyway, and so I'm using
| | 04:09 | InDesign with Dreamweaver just
sitting there gathering dust.
| | 04:11 | And as long as you can expand your EPUB
by unstuffing it, by cracking it open, then
| | 04:18 | you can have Dreamweaver
open up any of those files.
| | 04:21 | So here I have Dreamweaver and I'm going
to choose File Open and navigate to the
| | 04:29 | OEBPS folder of an EPUB that I have
expanded, here is the Missed Connections
| | 04:37 | folder, and let's say that I want to
look at page 18, that was the one that we
| | 04:42 | were looking at in a previous video.
| | 04:48 | You Had a Guitar.
| | 04:49 | I Had a Blue Hat.
| | 04:50 | So Dreamweaver lets you look at the code,
let's you look at a preview, you can
| | 04:54 | see a live view, meaning it's going to
be generated using a WebKit engine, just
| | 04:58 | like Safari, just like iBooks will. It
has excellent support for CSS and for all
| | 05:04 | of the auxiliary files that
are linked to from this file.
| | 05:07 | You can preview in Safari browser or any
other browser. It won't open up an EPUB
| | 05:13 | archive, you yourself have to expand it first.
| | 05:17 | If you want a solution where you don't
have to keep expanding the EPUB and then
| | 05:21 | zipping it back up into EPUB
again, you might consider oXygen.
| | 05:24 | Now oXygen is a somewhat expensive
program, it's $200 or $400 depending on the
| | 05:29 | version that you need, and for EPUB work
all you need is what's called the Author
| | 05:33 | Version, which is not as expensive as
the Editor Version. They do have a 30 day
| | 05:38 | trial that you can try it out.
| | 05:39 | But if you do have oXygen after you
install it, go to the Window menu and
| | 05:44 | choose Show View > Archive Browser,
and then you open EPUBs in oXygen right
| | 05:52 | from here, just click Archive Browser,
that's an EPUB, there's an archive, click
| | 05:55 | this to open the archive, navigate to
your EPUB, here's Lost Highway, Nigel's
| | 06:04 | fixed-layout EPUB.
| | 06:06 | And you can see that it immediately
opens up all the files, and then I can
| | 06:09 | twirl this open and say let me see this
HTML file, and it appears, and you can
| | 06:17 | go ahead and edit these files. So it's
nice that you don't have to unzip and
| | 06:20 | zip it back up again.
| | 06:21 | When you're done, you just click this
button right here to close the archive,
| | 06:25 | what is also nice about oXygen is
that it has a built-in EPUB validation
| | 06:29 | service, which Dreamweaver does not.
| | 06:31 | So you can just click this little
check box right here to validate your EPUB.
| | 06:36 | What it does not have is a Preview
in Browser command, unfortunately.
| | 06:41 | There is an Author view that tries to
get close to what this will look like, but
| | 06:45 | you see a lot of this garbage, so
I don't find it that useful at all.
| | 06:50 | Another great feature of oXygen, that
Dreamweaver has as well, and this is
| | 06:53 | something you want in any program that
you are going to be using to edit your
| | 06:57 | component files for EPUB, is the ability
to do a find/change in multiple files.
| | 07:03 | For example, you might want to add
the same viewport meta tag to every
| | 07:07 | individual HTML file, and instead of
having to open up every single page and
| | 07:13 | drop that in, you could do a find/change.
| | 07:16 | oXygen has that, if you choose Find/
Replace in Files and you would specify
| | 07:21 | multiple files here under Scope, and
we'll be coming back to this and looking
| | 07:25 | at, maybe not in oXygen, but in other
programs, so you can do a multiple find/change.
| | 07:29 | But while I am here, I want to mention
that the tool that you want to use has to
| | 07:32 | be able to do what's called
regular expression find/changes.
| | 07:36 | Because oftentimes you will need to do
pattern-based find/changes rather than
| | 07:40 | straight text find/changes.
| | 07:42 | If you're familiar with InDesign, we
call it GREP in InDesign, but you can do
| | 07:46 | that in oXygen and you can do
that in Dreamweaver as well.
| | 07:51 | The third program that I use quite a bit
when I'm editing EPUB files is TextWrangler.
| | 07:56 | Let me Hide Others, so we
can clean this up a bit.
| | 08:00 | So TextWrangler is a regular text
editing program. If you choose Open, and we
| | 08:08 | get to our EPUB files, you can see
that it cannot open up an EPUB archive.
| | 08:13 | Now if you purchase its big brother
called BBEdit, TextWrangler is free, BBEdit
| | 08:18 | is TextWrangler plus a lot more.
| | 08:20 | The latest version of BBEdit can open
EPUB archives, and you can save changes and
| | 08:26 | do multiple file find/replaces within
an EPUB archive without cracking it open
| | 08:31 | first, so that's pretty powerful.
| | 08:33 | But I find that if I'm going to be
doing that I'll probably use oXygen or
| | 08:37 | actually I just end up cracking open
the EPUB and doing lots of work to it. I
| | 08:41 | don't often unzip and rezip and unzip
and rezip, so I will just unzip once, and
| | 08:46 | then work on it in Dreamweaver or TextWrangler.
| | 08:49 | So if we go to one that's already
open and we choose say let's go up to our
| | 08:55 | friend page 18, then you can see the
contents of the HTML file and it's nicely
| | 09:01 | color-coded by HTML tag,
versus Live text, and so on.
| | 09:06 | And up here under Search you also
have the ability to do Multi-File Search,
| | 09:11 | and you can use GREP or regular expression
find/changes, this is the same as in BBEdit.
| | 09:16 | I was talking with people who work on
fixed-layout EPUBs for a living and they
| | 09:21 | often will use either oXygen,
Dreamweaver, or another program that you might
| | 09:25 | consider and that is Coda.
| | 09:28 | Coda is Mac only I believe, but a lot
of the development that you are doing,
| | 09:32 | since it's for the iPad, is
going to be on the Mac anyway.
| | 09:35 | And Coda is like a very professional
web development program that also has very
| | 09:40 | powerful CSS, and ability to save
versions with subversion built-in, lots of
| | 09:45 | cool stuff in Coda.
| | 09:46 | Finally, one thing that I really
want to emphasize that you do if you're
| | 09:50 | going to be working on fixed-layout
EPUBs is please, get yourself an iTunes
| | 09:55 | Connect Publisher account.
| | 09:57 | You will need to do this, or your boss
will or whoever it is that you are doing
| | 10:01 | this for anyway, in order to upload
your eBook to the iTunes bookstore.
| | 10:06 | I don't believe that their
aggregators will accept fixed-layout EPUBs.
| | 10:11 | So once you go to the iTunes Connect
and you fill out the application and it's
| | 10:14 | free, you just need to give them some
information for your bank account and your
| | 10:18 | tax statement, that kind of thing,
because assumably, you're going to be making
| | 10:22 | money from your EPUB, or your company
will, then you'll have access to all of
| | 10:27 | their setup guides. And this one of the
main reasons I think you really need to
| | 10:30 | get an iTunes Connect account, even if
you don't think you're ever going to sell
| | 10:33 | anything on the bookstore, because the
only way that you can get their detailed
| | 10:37 | guides for coding for fixed-layout EPUBs
is by having an iTunes Connect account.
| | 10:43 | It's unfortunate that you have to
be an account holder to see these.
| | 10:47 | You know, you don't have to have an
account as an Amazon publisher to see their
| | 10:51 | guidelines, or as a Barnes & Noble
Publisher to see Barnes & Noble guidelines
| | 10:56 | for uploading EPUBs for their NOOK, but for
Apple, unfortunately for whatever reason you do.
| | 11:02 | So I would say that at this point if
you are not an iTunes Connect holder, that
| | 11:06 | you should go ahead pause, get over
there, and go ahead and fill up the
| | 11:10 | application at the URL that you see up
here, or just search for apply for iTunes
| | 11:14 | connect as I've does appear to get to this page.
| | 11:18 | So the production workflow is that you
have to start with the digital version of
| | 11:22 | your book file, and then you have to
have some program that will help you edit
| | 11:27 | and do multiple file find/changes
within those files.
| | 11:31 | And you have to have some program
that will let you preview the results, a
| | 11:35 | Preview in Browser command at least.
| | 11:38 | Once you have all these tools
together and your source files, then you
| | 11:41 | you're good to go.
| | Collapse this transcript |
|
|
2. Starting from ScratchPreparing images| 00:00 | So you're starting from scratch and
you are gathering all of your assets
| | 00:05 | together in order to start linking to
them in your HTML and XML files. Let's
| | 00:10 | start with talking about
images, preparing your images.
| | 00:13 | If you already have images in an InDesign
layout or PDF, then this does not concern
| | 00:19 | you, because when we export from there,
as I'll cover in future chapters, we can
| | 00:22 | figure out what's happening
with the resolution, and so on.
| | 00:25 | Let's say that you have an image that
you took with your camera and you have it
| | 00:28 | open, I'm going to use Photoshop here.
| | 00:30 | What should you do to prep
it for your fixed-layout EPUB?
| | 00:34 | First of all, the image needs to be in
JPEG or PNG format, and they really prefer
| | 00:41 | that you do it in JPEG format.
| | 00:44 | And the only time that you ever need PNG
is if you have any kind of transparency
| | 00:48 | in the image, and you want to see
something through it, but Apple recommends
| | 00:53 | that you try and stay away from PNG
just because it takes longer to process.
| | 00:56 | In other words, your readers will be
flipping to a page and nothing will appear
| | 01:00 | for a while, depending on how much RAM
they have in the iPad. So we're going to
| | 01:05 | try and stay with JPEG.
| | 01:07 | The other rule is that your image
dimensions cannot be more than 2 million
| | 01:14 | pixels, width times height.
| | 01:16 | So we have this opened up in Photoshop.
| | 01:18 | The first thing I would do would be to
go to the View menu and show the rulers,
| | 01:25 | and then I would switch the rulers if
necessary to pixels or points. So I'm
| | 01:30 | going to right-click on that
ruler, and then they both change.
| | 01:33 | And now I can get a quick view without
having to go to Image Size all the time
| | 01:37 | to get an idea of how many
pixels across and down this image is.
| | 01:41 | This is a pretty big image, it's 5000
by about 3300, and if I just choose
| | 01:48 | Document Dimensions from the status bar at the
bottom, I can get an exact count right there too.
| | 01:55 | So 5060x3373, what is that multiplied together?
| | 01:59 | Let's take a look with their handy-dandy
calculator, and that's 5060 times 3373,
| | 02:07 | ah, 17 million, that's little too big,
right, it can't be more than 2 million.
| | 02:13 | If you want an idea of how much is 2
million, if you just use the figure of 1200
| | 02:18 | pixels across by 1700 deep, that's a
little bit more than 2 million, and it's
| | 02:25 | not really cause for rejection, but
they will down sample it to be below 2
| | 02:29 | million pixels when the
person turns to that page.
| | 02:32 | So you want to keep something more
like 1200 times say 1650, to be below the
| | 02:39 | magic 2 million, and that's
the largest that you want to go.
| | 02:42 | Let's jump back to our Photoshop
file and we'll go to Image Size, and we'll
| | 02:51 | change the Pixel Dimensions, let's make
it more like 1500 across by 1000 down,
| | 03:00 | and we'll click OK, and fill in to exact
size, there we go, so 1500x1000 pixels.
| | 03:09 | And now this is a PSD file, so we want
to save it as a JPEG, but before I go to
| | 03:14 | the Save for Web, I want to make one
more point, and that Apple really doesn't
| | 03:19 | want you to embed type inside the image,
they really wanted to be live type.
| | 03:25 | I suppose, if you had skywriting here,
they would let that fly, but if you have
| | 03:29 | created pages for your book, and I've met
people like this who have done the book
| | 03:33 | in Photoshop, and they've
added text layers to every image.
| | 03:37 | You're going to have to hide the text
layer before you save this out as a JPEG,
| | 03:43 | and then copy and paste the text from
the text layer into a text processing
| | 03:47 | program, like I'll talk about
in another video in this chapter.
| | 03:51 | Do not merge or rasterize the type
into your image if it's meant to be read.
| | 03:57 | And the main reason is, because users
complained to Apple that they can't do a
| | 04:01 | search for type, they can't select type when
it's actually an image, so that make sense.
| | 04:05 | I'm going to go up to File and choose
Save for Web & Devices. I'm going to have
| | 04:11 | all this fit in the screen, and the
main thing I want to do over here is under
| | 04:15 | Quality, I want to change it to 85,
which is what Apple recommends.
| | 04:20 | If you change the JPEG quality to
Maximum, it's going to go to 100 and it won't
| | 04:25 | let you choose 85, so we're going to go
to Very High and then just type 85, and
| | 04:30 | if you're going to be using this a lot,
like we are for our book, then you might
| | 04:33 | want to save this as a preset, so that
we can just choose it from this menu, so
| | 04:39 | you can just choose Save
Settings and we'll call this EPUB.
| | 04:45 | And now whenever we open up an image
we can just choose EPUB and it will
| | 04:48 | automatically change it to 85 JPEG Very High.
| | 04:52 | And then let me resize this
dialog box, so I can see the Save button and
| | 04:56 | then click Save, and we'll save this on
our Desktop as road.jpg. And that image
| | 05:03 | is good to go, and then
we go onto the next image.
| | 05:05 | One more tip I want to tell you about
images is that if you want to have a full
| | 05:08 | bleed image on the iPad, you want to
make sure that your image is no less than
| | 05:14 | 738 pixels across by 985 pixels deep,
which is a full screen that can fit on an
| | 05:23 | iPad, a single page.
| | 05:26 | Your image can be larger than that and
still be a full screen image, because you
| | 05:30 | can always define an image size in
the CSS as smaller than what it is.
| | 05:35 | The reason you want to use a higher resolution,
or, you know, greater pixel dimensions, is so
| | 05:39 | that when the user double taps it
to zoom in, then it still stays at a
| | 05:43 | high-resolution, instead of getting blurry.
| | 05:45 | So it's okay to go a little higher in
your image resolution as long as you stay
| | 05:50 | under that magic 2 million mark.
| | Collapse this transcript |
| Writing text| 00:00 | You can of course write your text in
any word processing or text editor program
| | 00:04 | that you like. You can do it on a web
service like Scrivener, you can do it in
| | 00:10 | Microsoft Word, like I'm doing it
here, Notepad, wherever you'd like.
| | 00:12 | But if you're going to be using this
text in your fixed-layout EPUB and you
| | 00:17 | want to get a preview of what it's
going to look like in the EPUB, then you
| | 00:22 | might want to see if you can customize what
it looks like in your text editing program.
| | 00:27 | Now if you have text in InDesign or
QuarkExpress, or some program like that, then
| | 00:31 | it's very easy to use the paragraph
and character styling commands and to
| | 00:36 | position it precisely on the page.
| | 00:38 | Then you're going to be able to reuse
that in your CSS and the EPUB, as I'll be
| | 00:43 | talking about in a future video.
| | 00:45 | If you are just doing it straight out
from scratch, let's say that you're using
| | 00:49 | Word, unfortunately there's no great
way to convert formatted text in Word to
| | 00:55 | CSS that makes any sense, and
let me tell you I have tried.
| | 00:59 | If you come up with a plain old word
processor that can export to formatted CSS,
| | 01:04 | please, by all means let me know.
| | 01:05 | What you're going to do instead is
you're going to try to format it how you
| | 01:10 | want it to look in the fixed-layout EPUB,
and then you're going to copy and paste
| | 01:15 | the text from your program into the
actual HTML file, and then use CSS commands
| | 01:23 | and with continual previewing in the
browser, to see if you can match what you
| | 01:27 | had faked in your word processing program.
| | 01:31 | Now I have a couple tricks for Word
at least to help you in that regard.
| | 01:35 | I just pasted a paragraph of text that
has to do with the desert southwest, and I
| | 01:41 | can use the commands up
here in the Home section.
| | 01:44 | Right now, I'm working in Word 2011,
so the interface might be a little
| | 01:47 | different if you're on a PC,
| | 01:49 | or if you're an earlier version of Word
on a Mac, but essentially let's say that
| | 01:52 | I wanted the text to be, let's say
centered and I wanted these three words to be
| | 01:58 | bold, let's just say that's all I wanted.
| | 02:01 | The other thing that I want though, is
that I'm going to have a picture on the
| | 02:03 | top and this is going to be a caption.
| | 02:05 | So when I go to my CSS file, I'm going
to have to say, how many pixels down from
| | 02:11 | the top should this text start, and I
can just sort of wing it if I want, but
| | 02:16 | you can get a little closer in Microsoft Word.
| | 02:18 | For example, this page is a default
8 1/2x11, and I can confirm that if I go
| | 02:24 | to the View menu and choose Ruler,
so that I can see the vertical and
| | 02:30 | horizontal ruler, and I'm going to
change the view scale to 50%, so I could
| | 02:35 | fit a little bit more in there.
| | 02:37 | What I want to do is I want to change
the page dimension itself to match what
| | 02:40 | I want for the eBook.
| | 02:42 | Now 8 1/2x11 is going to be
pretty large for an iPad.
| | 02:46 | I might want it to be 6x9, instead of 8 1/2x11.
| | 02:50 | So to do that, you can go to the Format
> Document menu and choose Page Setup,
| | 02:57 | and under Paper Size choose Manage
Custom Sizes, you see that I've already been
| | 03:02 | experimenting here.
| | 03:03 | But if you choose Manage Custom Sizes,
then you can create a new custom paper
| | 03:09 | size, and I'll call this FixedLayout,
and then under Paper Size you can say,
| | 03:16 | well, I want it to be 6 inches
across by 9 inches high, or maybe 5x7 1/2,
| | 03:22 | whatever you'd like.
| | 03:23 | I don't want anything to be non-
printed, we're not actually going to print
| | 03:27 | anything, so I'm entering 0 for everything here.
| | 03:30 | So now I have that choice in Microsoft
Word and I will click OK, and then for
| | 03:36 | the Margins I also want it to be 0,
because we're not going to have any margins.
| | 03:40 | On our pages, all of our text blocks
and images will be absolutely positioned
| | 03:44 | from the upper left corner of every page.
| | 03:48 | And now we have and I guess we
could make this a little larger, 75%.
| | 03:52 | So if I want this to start further down,
I'm just going to have to hit Return a
| | 03:57 | whole bunch of times, or if I knew Word
really well, I mean apparently you can
| | 04:01 | make a text box and we
can put text into there too.
| | 04:05 | In fact, why don't we try that?
| | 04:07 | Let me grab a Text Box, and we'll just
drag out a square and put this text in
| | 04:14 | there, copy, paste, and then we can get
rid of that, and then move this down, and
| | 04:24 | that's interesting, so as I'm dragging,
I can actually see the dimensions of
| | 04:27 | where this text box starts.
| | 04:29 | So it's 1.13 inches from the top, or 6
inches from the top, 1.13 on the left, so
| | 04:35 | it showing more this upper left-hand
corner, and that could be very useful for us
| | 04:38 | if we can change the dimensions
of the ruler to pixels or points.
| | 04:43 | But the idea is that if you're writing
from scratch, you don't have a finished
| | 04:47 | book in front of you, then at least try
to position it on the page to help you
| | 04:52 | later on, as you are actually
reassembling the book for the fixed-layout EPUB.
| | 04:59 | Save these files and come up with some
spreadsheet or way to keep track of, on
| | 05:05 | each page, where does the image
start? Where does the text start?
| | 05:09 | Now what you'd do at this point then
is you would take this text and take the
| | 05:13 | text from wherever you wrote it, copy it,
go to the document that you created.
| | 05:19 | Here I have Dreamweaver, I'm going to
go to File > Open, and let's say that I'm
| | 05:23 | going to open both of these here.
| | 05:25 | So here is page 2 of my document, and I
have it already setup so that text goes
| | 05:32 | right in here where it says caption,
and I'll paste, and I'm going to Paste
| | 05:36 | Special to make sure that
only the text comes through.
| | 05:39 | And then I use styles here, caption
to identify where this text starts. You
| | 05:47 | know, one easy way to do this would be
to make a caption style where all the
| | 05:50 | captions start from the same location
on every page, that way you can just
| | 05:54 | apply the caption style.
| | 05:55 | Otherwise, you're going to have to call
it caption 1, caption 2, caption 3 and
| | 05:59 | create multiple CSS styles, one
per each page or block of text.
| | 06:05 | If I jump back to my Word document, I
can estimate how many pixels from the top
| | 06:10 | and how many pixels from the left it
should be, and how wide that text box is.
| | 06:14 | And that's the workflow for if you
are writing text on your own, from scratch,
| | 06:20 | for your fixed-layout EPUB.
| | Collapse this transcript |
| Using a template for a quick start| 00:00 | If you'd like to jump right in and
create a fixed-layout EPUB right now, I have
| | 00:05 | a wonderful surprise for
you, I created a template.
| | 00:08 | Now this is what the fixed-layout
EPUB template looks like if you drag and
| | 00:12 | dropped it onto your iPad. It opens up
to two-page spread with a placeholder
| | 00:17 | cover image, and then as you scroll
through, you can see huge graphics, page 2
| | 00:22 | page 3. Each page has a place where you
can add a caption if you'd like, and I
| | 00:27 | just added it to only to page 2 for now.
| | 00:30 | It's only eight pages long, and if you
come up here and you look at the table of
| | 00:35 | contents, you can see it's got the usual,
you know, thumbnail table of contents, or if you
| | 00:41 | click the text table of contents,
there is a TOC.ncx file in here with these
| | 00:46 | names, you know, they are not really
that necessary for fixed-layout EPUBS.
| | 00:50 | So all you need to do -- I am going to
show in a second what these files look like
| | 00:54 | on the computer, is you're going to be
replacing these huge honking graphics
| | 00:57 | with your own graphics, and of course,
you are going to replace the cover image
| | 01:00 | with your own cover image,
and then, you know, you're good to go.
| | 01:04 | So let's see how exactly you
customize this on the computer.
| | 01:08 | In the exercise files you'll see a
fixed-layout template that has been
| | 01:11 | extracted from, you know, the EPUB.
| | 01:14 | And inside here, we have the usual META.INF
folder, the mimetype, and the OEBPS folder.
| | 01:21 | Now there are just a couple of things
that you'll need to do, but don't worry
| | 01:25 | about taking crazy notes, because I
have this all written out for you in a PDF,
| | 01:30 | and you can download it, it's a
free PDF from lynda.com web site.
| | 01:34 | The first thing you need to do is
work on the images. All the images are
| | 01:37 | contained inside the OEBPS images folder;
there's a cover image, and then there
| | 01:43 | are 8 JPEGs, and each JPEG is for each page.
| | 01:49 | All you need to do is create your own
JPEGs and name them exactly like this and
| | 01:54 | then replace them in the images folder.
| | 01:57 | So, for example, if I open up cover.jpg,
this is the cover. You could just
| | 02:02 | select everything in here, delete it, and
then replace it with your own image, or
| | 02:06 | you could create a new image from
scratch, and call it cover.jpg, and then
| | 02:11 | replace it inside the OEBPS folder.
| | 02:14 | This book has been set up to
be 560 pixels wide by 720 pixels tall.
| | 02:20 | So your images should be 560x720 pixels.
| | 02:25 | It is possible to change the viewport
from 560x720 to something else, but that
| | 02:32 | gets a little bit more advanced, and you
can learn how to do it if you watch this
| | 02:36 | entire course, but for now, just for
like a proof of concept, make sure that
| | 02:40 | your images are 560x720. If they're not,
just put them on top of a canvas that's
| | 02:46 | 560x720. It could be a small image as
long as the entire JPEG is that dimension.
| | 02:51 | So you want to make a cover, and then
make eight individual JPEGs and exactly
| | 02:57 | is how you see here, JPG not
JPEG, use the same case as well.
| | 03:03 | So that takes care of the images, now
as far as text is concerned, you can open
| | 03:08 | up any of the HTML files, like let's take a
look at that page02, the one that has the caption.
| | 03:13 | So you can see that here we have the
viewport called out and it links to
| | 03:19 | the styles.css file, and the image source is
page02.jpg and it's using the class full-bleed.
| | 03:27 | The caption is right here, now if you don't
want the caption, just select it and delete it.
| | 03:33 | If you want a different caption, then
just type it in here, it's going to use
| | 03:37 | the style caption from the CSS file.
| | 03:39 | And let's take a look at that.
| | 03:41 | So here we have the viewport called
out in the body tag, images are absolute
| | 03:47 | with the z-index of -1, so
they appear behind everything.
| | 03:50 | The caption is positioned absolutely 620
pixels from the top, 160 pixels from the
| | 03:57 | left and they will wrap at 400 pixels.
In addition to that, they are colored
| | 04:01 | black, that's what this #000 means,
and they are 18 pixels by default.
| | 04:07 | Now if you have a full image and you
want to put a caption on top, and the image
| | 04:12 | is dark underneath the caption, you are
not going to be able to see the caption.
| | 04:15 | So you could then just change the style
class to _white, in that case, because
| | 04:22 | then they'll turn the text white,
make it easier to read against the dark
| | 04:25 | background, and there is caption white.
| | 04:27 | So it's the same exact settings,
except that the color is pure white.
| | 04:31 | So that's how you add text, if you
like, with the caption setting.
| | 04:35 | Now let's go back, I am not going to save those.
| | 04:38 | Just one more thing you need to do
and that's to do some minor editing of
| | 04:42 | the content.opf, this is kind of
like the brains of the entire EPUB.
| | 04:45 | So I am going to open
that up with any text editor.
| | 04:49 | You want to change the title to your
own title, so right now it's called Fixed
| | 04:52 | Layout Template, and unless you're an
unusual person and your name is actually
| | 04:56 | Your Name, you probably want to change
this to your name, that's the creator, if
| | 05:01 | you'd like to change the date that
this was created, go ahead and change it
| | 05:04 | here, in year, two digit
month, two digit date format.
| | 05:09 | Leave the language at en for now, or
if you happen to know what language it
| | 05:13 | should be if you don't speak English, go
ahead and change that, but if you don't
| | 05:16 | have the proper language entered here,
then it's not going to pass EPUBcheck.
| | 05:22 | The identifier id, this is usually
your ISPN or some other kind of unique
| | 05:26 | number for yourself.
| | 05:28 | Everything else can remain the same,
but just to give you a quick tour, is that
| | 05:32 | here we have the links to the extra
goodies like the toc.ncx file and the styles.
| | 05:38 | Here are the links to all the HTML
files, the links to all the JPEGs, the
| | 05:44 | toc.ncx, and then the guide has where
the text starts and where the cover is.
| | 05:50 | If you want to, this is not required,
but if you want to, you could edit the
| | 05:54 | TOC. Right now they all say page 1,
page 2, and so on. You could change that to
| | 06:00 | something that makes more sense.
| | 06:01 | But even Apple says that you really
don't need to fill this in, you could just
| | 06:05 | have one nav point and delete the rest
if you want. Most people will be using
| | 06:09 | the thumbnails TOC, not the
text TOC in a fixed-page layout.
| | 06:13 | That's it, when you're done,
you just need to compress the
| | 06:16 | FixedLayoutTemplate folder right here.
On Windows you would use Windows 7's
| | 06:21 | built-in zip, or use a free Shareware
Program like 7-Zip, and go ahead and zip
| | 06:26 | it up, and then change the .zip to EPUB.
| | 06:29 | And on a Macintosh use an AppleScript
or Terminal, I will be talking about that
| | 06:33 | more in the proofing chapter toward the end.
| | 06:35 | One last thing is if you want to add
more pages, go ahead and do that, just
| | 06:41 | use the same naming convention, make
sure and add matching images, and then I
| | 06:46 | would probably take one of the
existing pages and duplicate it and say, call
| | 06:51 | this one page09, and then in page09
just change the link to the correct image,
| | 06:57 | so this would be page09.
| | 06:59 | So after you have created your HTML
file and edited it to point to the new
| | 07:05 | image, do not forget to update the content.opf
file, otherwise it's not going to work.
| | 07:10 | The content.opf file in the
manifest section has a link to every single
| | 07:15 | item used in this EPUB.
| | 07:17 | So go to content and add an item id
reference and link to page09, and then the
| | 07:23 | same thing for images, make
sure and link to your new images.
| | 07:26 | So you can add as many new pages as you
want, you just have to remember to also
| | 07:30 | update the manifest.
| | 07:32 | So there you go, here is a way for you
to just jump in and start playing, even
| | 07:37 | before you finish the entire title.
| | 07:39 | Now of course if you want to learn more
about working with multiple images on a
| | 07:42 | page, styling your text, putting more
than one block of text on a page, and so
| | 07:47 | on, then make sure and
watch the remaining videos.
| | Collapse this transcript |
|
|
3. Starting with a PDFExporting pages as JPEGs with Acrobat Pro| 00:00 | So you have a PDF of your book and you
need to convert this into a fixed-layout EPUB.
| | 00:06 | Essentially you need to tear this apart and
then put Humpty Dumpty back together again.
| | 00:11 | What you need to tear apart are the
images and the text. We need to get the
| | 00:15 | images out of here as stand-alone JPEGs,
so that you can link to them in your
| | 00:21 | HTML files, and you can format how
they are positioned in your CSS file.
| | 00:26 | We are looking here at the Lost Highway
book by Nigel French, that we have been
| | 00:30 | working with for a while, and it's a simple
8 page document with a front cover and a back.
| | 00:36 | Now there are various ways to
approach this, the way that I want to talk
| | 00:41 | about in this particular video is exporting
every single page as a full page, full bleed JPEG.
| | 00:49 | And essentially then you would link to
each one of those JPEGs as an absolutely
| | 00:53 | positioned image in your EPUB. Similar
to how we were specifying the images in
| | 01:00 | the template that I
covered in the previous chapter.
| | 01:03 | If you have Acrobat Pro, and I think
Acrobat Standard has this as well, you can
| | 01:07 | easily export every page as a JPEG,
and you do that by going to the File menu
| | 01:13 | choosing Save As > Image > JPEG.
| | 01:16 | Now I am using Acrobat 10, if you have
an earlier version of Acrobat it might be
| | 01:20 | in a different location, or you
might not have Acrobat you might have a
| | 01:24 | completely different PDF Editing tool,
but this is a command that I know is
| | 01:29 | available to us in Acrobat Pro.
| | 01:31 | So if you choose that, it asks you
where do you want to save these, I will save
| | 01:34 | these on my Desktop.
| | 01:36 | And here's the format, and you want to
pay attention to Settings, because here's
| | 01:41 | where you can say what
quality should these JPEGs have.
| | 01:45 | I believe it defaults to Maximum, but
that's usually going to be too high, and
| | 01:49 | Maximum or High Quality
will be fine for our purposes.
| | 01:53 | You can leave Color Management as is,
we are just going to use RGB. Same thing
| | 01:57 | for a color space, or if you want to
make sure that they're coming out as RGB,
| | 02:02 | do so here, but the very important
part is right here under Resolution.
| | 02:07 | Now you may be tempted to get a very
high resolution, but remember the maximum
| | 02:12 | file size, or dimensions, of any image in
a fixed-layout EPUB or flowable EPUB for
| | 02:19 | that matter, is 2 million pixels, and
if we have 300 pixels per inch, and this
| | 02:24 | thing is 3000 pixels by 3000
pixels, that will be too many.
| | 02:27 | So you want to check and do some tests first.
| | 02:31 | I'm going to set it at 150 and I will
just click OK and click Save, the progress
| | 02:39 | bar at the bottom starts to fill
-in, hopefully nice and quick.
| | 02:43 | Doesn't change the existing PDF at all, it's
just exporting copies of every page as a JPEG.
| | 02:48 | Now we will look at it in the Finder,
and that's what each page looks like, and it
| | 02:54 | tells us the dimensions down here, that
looks a little high to me, let me do a
| | 02:58 | little calculator action. If I
multiplying 2,084 times 2,084, it's four million
| | 03:04 | pixels, that's too many.
| | 03:05 | So we need to really reduce the
resolution in order to make this work.
| | 03:09 | You could do this in Photoshop or in
another image editing program if you want,
| | 03:13 | but why not do it in Acrobat.
| | 03:14 | And, by the way, before we try that
again, I want to call your attention to a
| | 03:18 | little tool that's available in
Acrobat to help you determine the current
| | 03:22 | resolution of an image, in case you
are curious, and I covered this in my
| | 03:25 | Acrobat 10 Essentials Training on lynda.com.
| | 03:27 | But if you go to the Tools panel and
choose Print Production, if its not already
| | 03:34 | showing from this little tiny menu here,
you want to get Output Preview, and
| | 03:40 | then choose the Object Inspector, and
then you can click right on an image and
| | 03:45 | you'll see the resolution.
| | 03:46 | So this image is currently 237x237,
if I go to another one, this image is
| | 03:52 | 300x300, this one is 328.
| | 03:55 | So you can get an idea what the
current resolution is at this point, but we
| | 03:59 | don't need to do that.
| | 04:00 | Now we're just going to do another
export to JPEG, this time at 72 pixels per
| | 04:08 | inch, and if it's not a choice here
you can just swipe across here and type
| | 04:12 | your own measure, you are not
limited to just those choices.
| | 04:16 | Now on the Desktop and it should just
replace the existing files, and now that
| | 04:25 | exports a lot quicker.
| | 04:27 | So let's come back over here and now the
dimensions are 1000X1000, that's much better.
| | 04:33 | But the other problem that you see is
that we're getting text in here and this
| | 04:37 | is a no-no for Apple, they don't want
text to be part of the JPEG image, unless
| | 04:41 | it's just like for arty effect.
| | 04:43 | I'm showing you this with the text in
there, just because this is a very common
| | 04:47 | problem that a lot of users run into,
that you forget to remove the text. You're
| | 04:51 | going to need to do that to your PDF,
before you export these pages as
| | 04:55 | individual JPEGs, you need to
hide or remove all the existing text.
| | 05:01 | Unfortunately though, Acrobat does have
a Layers panel, because, you know, my inclination
| | 05:05 | would be to select all this text and
move it to a special text layer and then
| | 05:09 | hide that layer. It doesn't work
that way in Acrobat.
| | 05:12 | It will support existing layers that
you can hide and show, but it doesn't let
| | 05:16 | you move things from layer to layer and
it doesn't let you add in a layer, so
| | 05:20 | that's not going to help.
| | 05:22 | Instead what I suggest is that you do a
Save As to your current document, save
| | 05:27 | it as a different PDF. I will put
this on the Desktop, and we will call this
| | 05:31 | Lost Highway-no text.
| | 05:35 | And then you want to grab a special tool
that will help you select the blocks of text.
| | 05:41 | Here in the Tools panel if you go to
Content it is the Edit Object tool, and
| | 05:45 | because I use this tool all the time,
I've added it to my Quick tools up here.
| | 05:50 | You can simply add a tool just by dragging on
this little textured area and drop it up here.
| | 05:58 | So I want to get this tool and then just
click on the blocks of text and delete.
| | 06:06 | And go through your entire document,
now hopefully, you don't have ton of text,
| | 06:10 | but there is no other way to
do this other than by hand.
| | 06:13 | Now if you have many lines like
this and you don't have anything in the
| | 06:17 | background, sometimes you can get away with
dragging a selection rectangle, with that tool.
| | 06:22 | If you accidentally grab something else
and delete it, just undo, and then keep
| | 06:27 | going throughout your document.
| | 06:28 | Now I don't mind having the page
numbers here as part of the JPEG, but if I
| | 06:31 | didn't want them, I would also
want to remove these little folios.
| | 06:35 | So do that throughout the whole
document and then go to Save As > Image >
| | 06:41 | JPEG, and export them with the correct
settings. And that's how you end up with
| | 06:46 | a series of images that you can simply add to
your fixed-layout EPUB as the background image.
| | 06:53 | Then the next thing you have to work
on is the text, which I will cover later
| | 06:56 | in this chapter.
| | Collapse this transcript |
| Extracting images with Acrobat Pro| 00:00 | When you're dealing with the PDF, you
need to extract the images and the text,
| | 00:05 | in addition to being able to export
every page as one single full-page JPEG.
| | 00:11 | Another way that you might do this
would be to extract every image individually,
| | 00:15 | and that way you get the most control
over which ones you are going to include
| | 00:19 | in your EPUB and how
they're going to be positioned.
| | 00:22 | It will take more manual work,
but sometimes it's worth it.
| | 00:26 | So, for example, let's say that in
this PDF I want to extract the picture of
| | 00:31 | just these saguaro cactuses.
| | 00:34 | And I don't want a big honking JPEG
with all this empty white space, all I want
| | 00:38 | is this image, and then I'm going to
absolutely position it with CSS in my HTML
| | 00:45 | file with a top and left offset.
| | 00:47 | So to do that, you can extract an
individual image one by one, by using our
| | 00:53 | friend the Edit Object tool that's in
Acrobat 10, under the Tools panel choose
| | 01:00 | Edit Object, and you don't have this
tool in Reader, you have to have Acrobat.
| | 01:05 | When you select it, then you can click
on the image and it becomes selected.
| | 01:10 | What you want to do is right-click and
choose Edit Image, which will open this
| | 01:14 | image in your default editing program.
| | 01:17 | And if you're curious about that, you
can see what it is, if you go into the
| | 01:20 | Preferences for Acrobat, on the Mac it's
here under the Acrobat menu, on Windows
| | 01:24 | it's the last item under the Edit menu.
| | 01:27 | In Categories, go down to TouchUp and
you'll see which program will open up
| | 01:31 | raster images, and also if you click on
a block of text, or a vector, or drawing
| | 01:36 | object, it will open up in Illustrator here.
You can choose any other program if you prefer.
| | 01:42 | If you have the Creative Suite
installed, it will automatically have these
| | 01:44 | selected for you I believe.
| | 01:46 | Anyway, right-click on the image with
the Edit Object tool, and choose Edit
| | 01:52 | Image, and you'll always get this warning
that says, if you add layers while you're
| | 01:57 | in Photoshop to this image, and then you save
it back to the PDF, it's going to flatten it.
| | 02:01 | And we are actually not going to
modify this image in any way for the PDF;
| | 02:05 | we just want to get it out of there.
| | 02:06 | So I have opened it up, it opens up in
a temporary file and what you need to do
| | 02:10 | is go to File > Save As, and then save
it some place, like on your Desktop.
| | 02:15 | I might call this saguaro cactus.
| | 02:21 | You want to save it as a normal
Photoshop file probably, or JPEG, up to you.
| | 02:27 | And that's it, now you have a stand-
alone image that you can link to and import
| | 02:31 | into your fixed-layout EPUB. Of
course, you need to save it out as a JPEG
| | 02:34 | first, but what's cool is that in Photoshop it's
got the full resolution that it had in the PDF.
| | 02:39 | I can go down to Image > Image Size, and see
that it's, you know, a 300 pixel image, which
| | 02:44 | is almost 3 million more than what
Apple allows, so you would have to do some
| | 02:48 | down sampling here.
| | 02:50 | You can do that on an image by image
basis, extract them individually, or you
| | 02:54 | can use a very cool command in Acrobat
that lets you export every single image
| | 02:59 | all at once as individual images.
| | 03:02 | You'll find that in Acrobat 10 in the
Document Processing panel under the Tools
| | 03:06 | panel. Document Processing does not
open by default, you have to open that from
| | 03:10 | the Extra menu over here, so
choose Document Processing.
| | 03:14 | In earlier versions of Acrobat, I believe
you'll find this command in the Advanced menu.
| | 03:20 | So Document Processing, you're looking
for Export All Images, choose that, and it
| | 03:27 | says where do you want to save them?
And we will save them right here.
| | 03:29 | It's going to export
them all in the same format.
| | 03:32 | So we'll say JPEG,
because that's the one we want.
| | 03:34 | Don't forget to go to Settings just
like how we exported entire pages. Go to
| | 03:39 | Settings and choose the quality for the
color, we will leave this at high, you
| | 03:44 | want to keep it at RGB and color space RGB.
| | 03:49 | Under Resolution, by default, it will just
maintain the current resolution of each
| | 03:53 | individual image, because a PDF can
have images with different resolutions.
| | 03:57 | One might be a screen grab at 72 ppi, another
one might be, you know, 300 ppi, like a high
| | 04:03 | res scan. You can leave it there, or
you can normalize them all to a certain
| | 04:08 | resolution, like say 96 or 150 pixels per inch.
| | 04:12 | If you change her mind you can just
come back, scroll up, or you can type in any
| | 04:18 | number that you want.
| | 04:19 | We are going to just leave it at
Determine Automatically, because I want to see
| | 04:23 | what they look like in
Photoshop before I make a decision.
| | 04:26 | One additional thing is that you can
tell Acrobat to ignore any kind of little
| | 04:30 | incidental graphics that you really
aren't going to use. Like if you are just
| | 04:34 | trying to export the photos, and you really
don't care about little whooseits and whatsits,
| | 04:38 | little declarations that might be
in the corners or behind the folios, and
| | 04:43 | so on, you can tell it ignore
images smaller than a certain size.
| | 04:47 | If you wanted to make sure and export
every single thing that's not text to an
| | 04:51 | image file, to a JPEG, then choose no limit.
| | 04:55 | I will leave it at the default at
1 inch and now we just click Save.
| | 05:00 | So you get a little progress bar that
appears in the bottom, let's just jump
| | 05:04 | over to the Finder and see how it's doing.
| | 05:06 | So here we are in the Finder and on
the Desktop you can see the individual
| | 05:09 | images, and I select one, and there's
the cover image. I will just use the arrow
| | 05:13 | key to go down and take a look at each
one of them, nice that in the Finder we
| | 05:18 | get a readout of the dimensions.
| | 05:20 | So remember we are trying to stay below
2 million pixels altogether and you can
| | 05:25 | always fix this in Photoshop later.
| | 05:27 | So these are the individual images
that are from the little collection here,
| | 05:34 | which looks pretty cool.
| | 05:35 | Keep going, sometimes you will come
across a surprise like I don't remember this
| | 05:41 | image, or what's that about?
| | 05:43 | And that's just because it is
actually extracting different images.
| | 05:46 | This is not a flattened PDF,
apparently, when this is exported from Adobe
| | 05:51 | InDesign, it exported every individual
image and Nigel was having silhouetted
| | 05:56 | portions of photographs
for the special effects here.
| | 05:59 | So sometimes you will come
across an interesting little surprise.
| | 06:03 | But this way, you have complete control
over which images you want to include in
| | 06:08 | your fixed-layout EPUB, and you can
evaluate each one individually in Photoshop
| | 06:13 | and choose the ones you want to include.
| | Collapse this transcript |
| Extracting images with Adobe Reader| 00:00 | I know that there is a small but
important percentage of you watching this video
| | 00:06 | who don't have Acrobat Pro.
| | 00:07 | You might have the PDF but all you
have is the free Adobe Reader Utility.
| | 00:12 | And if you're wondering, is there any
possible way for me to get these images
| | 00:15 | and text out of this PDF with Reader? There is.
| | 00:18 | It's more difficult.
| | 00:20 | You don't have as many options and I
would really exhort you to go ahead and buy
| | 00:25 | Acrobat or one of the less expensive
equivalents if it has the same kind of
| | 00:30 | image and text extraction
features that Acrobat does.
| | 00:34 | I do want to spend this video and some
of the next video on talking about how to
| | 00:37 | extract images and text with Reader.
| | 00:39 | So in this one we are
going to talk about images.
| | 00:42 | I have Adobe Reader open, version 10,
the latest version, and unfortunately, it
| | 00:48 | doesn't have the same wonderful
tools that you might be accustomed to.
| | 00:52 | Like say, for example, we want to
extract this picture of the saguaro cacti.
| | 00:57 | If you go to the tools panel in Reader
looking for that wonderful Edit Object
| | 01:01 | tool, you will be sorely
disappointed, because it's not here.
| | 01:05 | You can pay for some online services to
create or export PDF files to this huge
| | 01:12 | list of different formats, but that's about it.
| | 01:15 | The only way that you can get an
individual image out of here would be to select
| | 01:21 | it, copy it and paste it
into an image editing program.
| | 01:25 | You can select the image by using the
Select tool, which is this arrow and a
| | 01:30 | insertion bar, when you click on top of
an image it selects the image, when you
| | 01:34 | click on text it selects text.
| | 01:36 | By the way, I had some trouble finding
these tools and if for some reason you're
| | 01:40 | not seeing these two tools in your
Reader toolbar, just right-click anywhere
| | 01:44 | in the gray area of the toolbar, and
choose them from the Select & Zoom.
| | 01:49 | There are a whole pile of tools that
don't appear here by default that you
| | 01:52 | might want to turn on.
| | 01:53 | But it's these two tools that
you use to select things with.
| | 01:57 | So I have this Arrow tool, click on
the cacti and then copy it, and jump over
| | 02:04 | to the image editing program of your
choice like Photoshop. And in Photoshop,
| | 02:09 | if I say, create a new document, it automatically
reads what's in my clipboard and suggests that.
| | 02:14 | Now notice, it is maintaining the
original resolution of that image.
| | 02:19 | So this is actually a high-res version and
it's created a new document -- now I'll just
| | 02:24 | paste, and I have my
clipboard and there it comes in.
| | 02:27 | And now I could save this as saguaro
cacti.psd, or export it to JPEG if I would
| | 02:32 | like, but it's kind of neat
that it's got the full res here.
| | 02:35 | You would have to do that to
every individual image in your PDF.
| | 02:39 | So for this one, for example, select it,
copy it, and paste it into a new document,
| | 02:46 | save it as a JPEG. That's how you can
do it with Reader, and you might also run
| | 02:51 | into some problems with special effects.
For example, here Nigel did a couple
| | 02:56 | really cool things with silhouettes
that are jumping out of the frame and it's
| | 02:59 | done by superimposing one
image on top of another.
| | 03:03 | So with my Selection tool, if I
click here and I copy the image, jump to
| | 03:09 | Photoshop, create a new document and
paste, oh, what comes in, just the image
| | 03:15 | that was on top.
| | 03:16 | So there is a silhouetted image of a
daisy on top of the actual picture of a
| | 03:20 | daisy, but there's no way in Reader that you
can drill through to the back to grab that.
| | 03:26 | If you run into that, there is a
slightly different workaround, in that you
| | 03:29 | can use the Snapshot tool in Reader.
| | 03:33 | You have to go to the Edit menu and
turn on Take a Snapshot. Do that first.
| | 03:38 | And now, you can drag a selection
rectangle around what you want take a snapshot
| | 03:43 | of, and it automatically
copies it to your clipboard.
| | 03:49 | Now I will jump over to Photoshop,
create a new document, click OK, paste it in
| | 03:55 | and there is the entire image.
| | 03:56 | But see how small it is, look at the
resolution down here, it's very small.
| | 04:01 | It's taking it at 72 ppi at
whatever zoom level I was at.
| | 04:05 | So if you want to create a higher-res
version of this, what you could do would
| | 04:10 | be to zoom in, I will just click the
plus symbol a bunch of times, do that
| | 04:16 | first and then find your snapshot and
you know essentially what we were doing
| | 04:21 | is taking a screenshot so, if you have a
favorite screenshot utility, you can just use that.
| | 04:25 | Oops, I am doing it wrong, I don't
want that one, I want -- by the way, the
| | 04:31 | Snapshot tool is kind of weird, it's sticky.
| | 04:33 | So as soon as you choose it, it stays
turned on and every time you click or
| | 04:37 | drag, it thinks you want to take a snapshot.
| | 04:41 | Anyways, we want that, unfortunately
can't edit the edge size, so I missed that
| | 04:45 | part but, we will say OK and jump back
over to Photoshop, create another new
| | 04:49 | document and there we have it with a
few more pixels across and down. So, now we
| | 04:55 | could actually resize it and get a
little higher-res if we wanted to, we have
| | 04:59 | more image data to work with.
| | 05:01 | Those are your choices in Reader.
| | 05:03 | You can either select an image and
copy and paste it, that will get the full
| | 05:07 | resolution of the image. And then save
those as JPEG's, or to get certain areas of
| | 05:12 | the document saved as a picture, use the
Snapshot command. So it's possible, but
| | 05:18 | just a lot more work.
| | Collapse this transcript |
| Extracting text| 00:00 | Now let's turn our attention to how to
get the text out of a PDF for us to reuse
| | 00:06 | in our fixed-layout EPUB.
| | 00:08 | I'm in Acrobat 10 and one of the most
straightforward ways to get text out of
| | 00:12 | here is simply to copy and paste.
| | 00:14 | So you select the Selection tool here,
and then drag over your text, and
| | 00:20 | assuming it's live text, it hasn't
been embedded into a JPEG or turned into
| | 00:24 | outlines it'll become selected.
| | 00:27 | And then I'll copy it, switch to any
text editing program, like let's say,
| | 00:32 | TextWrangler and paste, and it comes in.
| | 00:36 | Now if we come back here, if we click
inside some text and select all, and
| | 00:42 | then copy and switch back, and let's
select that and paste, then it gets all
| | 00:48 | of the text on this page.
| | 00:50 | So we have the title and also the Photographs
by Nigel French, and this t 1. What is that?
| | 00:57 | Well apparently there is some text on
this page somewhere, that is the folio
| | 01:01 | and they'll have a lowercase t which
is a different font in the InDesign file
| | 01:05 | but it comes through as lowercase t.
If I wanted to select all the text in
| | 01:09 | the entire document at once, copy it and paste
it into a text editor, here is a little trick.
| | 01:16 | Go to the View menu and change the Page
Display from Single Page to Enable Scrolling.
| | 01:24 | And that just means that as I drag
then you see one right after the other
| | 01:27 | kind of like a web page.
| | 01:28 | And you do that, and then you click
inside some text and choose Select All, it
| | 01:33 | selects all the text in the entire document.
| | 01:36 | So switch back to TextWrangler,
let's get rid of that text and paste.
| | 01:41 | All the text comes in along with
every page folio and all the text.
| | 01:46 | We don't have any formatting, but
sometimes this is the simplest way to extract
| | 01:49 | text because now, you're going to open
up every one of your HTML files and click
| | 01:54 | in between your tags for your class, for
your text, and then you can use this as
| | 02:00 | your source document and copy
and paste into your HTML files.
| | 02:04 | Another way to get text out is by
exporting your PDF to Word, and you can do
| | 02:10 | this if you have Acrobat.
| | 02:11 | Go to File and choose Save As >
Microsoft Word > Word Document.
| | 02:19 | You might want to do this because when you
export to Word, it maintains the formatting.
| | 02:24 | So let's take a look at how that works.
| | 02:25 | I'm going to save it to the Desktop and
under Word Document go to Settings first.
| | 02:31 | Usually all these are turned on when
I've been playing around this dialog box.
| | 02:34 | But for example, you normally don't
want to include your comments, and you
| | 02:38 | usually don't want to include your
images, that will take for ever if you keep
| | 02:41 | images turned on so deselect that, and
I've also deselected Run OCR if needed.
| | 02:46 | If it finds any text as art or scanned
text it's going to try and convert that
| | 02:50 | to live text, click OK and now let's go
ahead and save it, and let's switch to
| | 03:00 | Word and open that up, that was Lost_Highway.
| | 03:04 | Well what are we looking at it?
| | 03:06 | Remember, it maintains the formatting.
| | 03:09 | So we are looking at the white
text from the cover of the PDF.
| | 03:16 | If I just click inside here it's
telling us our text is Gentium Basic, 96
| | 03:20 | points which is correct.
| | 03:22 | Let's select all this and actually change
the color of the text to black, here we go.
| | 03:29 | And we will scroll through and it is
positioning some of the text in relation to
| | 03:35 | each other, but here is the Cadillac
Ranch text, and we can see this is Gentium
| | 03:39 | Basic 16 points, and we can see
the width of the text block as well.
| | 03:43 | So this might help you little bit more
than having the just plain text in a text
| | 03:48 | editor, and that you can only get
again by exporting to Microsoft Word.
| | 03:52 | If you don't have Word, you can still
have an export to Word, and then you can
| | 03:56 | open this up in another text editor
that understands Word docs, like you can
| | 04:01 | pour it into Quark, or InDesign.
| | 04:02 | You could open it up in TextEdit, on
a Macintosh, but it's a lot easier,
| | 04:06 | obviously, if you do have Word.
| | 04:08 | Now with Reader, you don't have that option.
| | 04:12 | In tools, you can export to Microsoft
Word, but if you choose that, then it's
| | 04:18 | going to prompt you to
sign up for some paid account.
| | 04:21 | So we are not going to do that.
| | 04:22 | What you can do is you can use the Text
Selection tool in Reader and select text
| | 04:29 | and then copy it and paste
it into a text processor.
| | 04:34 | So I can just select this and copy
that and paste it, or I can use that same
| | 04:39 | trick that I showed you in Acrobat
Reader, change this Page Display to Enable
| | 04:43 | Scrolling, so that now when I click
inside here and I choose Edit > Select All,
| | 04:49 | it highlights all the
text in the entire document.
| | 04:53 | And now I can Edit > Copy, switch over
to TextWrangler, there is the text from
| | 04:58 | before, let me get rid of it.
| | 05:00 | And then go to Edit > Paste.
| | 05:02 | So you have that same ability to
quickly extract all the text from a PDF in
| | 05:08 | Reader, as long as you don't
mind losing the formatting.
| | 05:11 | And speaking of formatting, the one
other bit of formatting information that you
| | 05:14 | are probably going to want is the
position of where the text is on the page.
| | 05:19 | Now there's really not much you can do
about that in Reader, I mean, you can
| | 05:23 | print it out I guess and how about your Ruler.
| | 05:25 | In Acrobat, you do get a couple of
little tools that might help you.
| | 05:29 | First of all you want to turn on the
Rulers and it's under View > Show/Hide
| | 05:35 | > Rulers & Grid > Rulers, and then
you might want to change the increment
| | 05:39 | from inches to pixels.
| | 05:41 | Unfortunately, pixels don't appear but,
luckily points are 72 to an inch, so you
| | 05:47 | can choose points and then
that's the same as 72 ppi in pixels.
| | 05:52 | And say that we wanted to figure out
where Lost Highway starts from the top and
| | 05:56 | the left on this page, you can drag
down ruler guides in Acrobat and say okay
| | 06:02 | it's got, there is a top of the cap,
and here is the left align, and then you
| | 06:07 | just look up here where you drag the
guidelines and say well that's 72 right
| | 06:11 | here, this is about 70
pixels for your left margin.
| | 06:15 | I am looking on the little guideline
here that's appearing in the ruler as I
| | 06:19 | drag the guideline again, there we go.
| | 06:21 | See it and that's about 74 pixels from
the top, a little bit more from that top
| | 06:26 | margin and the left margin.
| | 06:27 | If you want to get the width, you'll
have to do some math, because there's no
| | 06:32 | way to reset the zero points in Acrobat
like there is in some other programs, so
| | 06:36 | you will have to like say, okay well the
entire width of this is about 570 minus
| | 06:41 | 70, about 500 pixels, and then you
just going to eyeball it and keep jumping
| | 06:45 | back and forth between Dreamweaver or
Coda, or whatever program you are using to
| | 06:50 | create your CSS and preview your
pages and the source file itself.
| | 06:55 | So that's how you get text out and
that's how you can get a little bit of help
| | 06:59 | from Acrobat in telling you the
position of the text on the page.
| | Collapse this transcript |
|
|
4. Starting with an InDesign FileUsing layers to isolate text| 00:00 | Here we have the editable production
file for the Lost Highway book that
| | 00:04 | we've been working with.
| | 00:05 | This is actually a slightly more
robust version of Nigel's book.
| | 00:09 | It's 12 pages instead of 8 with
just fantastic photography as usual.
| | 00:16 | And if you have watched any of my
InDesign's EPUB titles on lynda.com then you
| | 00:22 | will know that I always create a
workspace in InDesign just for working with
| | 00:26 | EPUBs, so that the tools are
used most often are close at hand.
| | 00:30 | So if my interface looks a little
different than yours don't worry about it, but
| | 00:34 | mainly, I have added the Articles
panel which helps you govern the order of
| | 00:38 | which you export, and then I've also
added the Scripts panel to my doc over here,
| | 00:43 | and Text Wrap, because I'm
frequently having to go in here.
| | 00:46 | Now I just saved it as the AMC-EPUB workspace.
| | 00:50 | So, just as when you're working with
a PDF, the main challenge when you
| | 00:54 | have production files to convert them
to a fixed-layout EPUB is extracting
| | 00:59 | the text and graphics.
| | 01:01 | Unfortunately, Adobe InDesign does
not have any export to fixed-layout EPUB.
| | 01:07 | It does have a regular flowable EPUB
export, which is the subject of three of my
| | 01:12 | videos here, but not a fixed-layout.
| | 01:14 | So I have been banging my head against
a wall, trying to figure out, what ways
| | 01:19 | can we use InDesign's built-in features
to help automate at least some of the
| | 01:24 | tedium of getting the text and graphics out
of here, and that's what this chapter is all about.
| | 01:28 | So the first thing we want to do is
we want to be able to hide all of the
| | 01:34 | text, because we are going to take the approach
of exporting every single page as one large JPEG.
| | 01:41 | And then we will put that as the
background image on every single one of our
| | 01:45 | fixed-layout HTML files, and then we'll
add the text on top of there and if we
| | 01:50 | use the Z-index specification in the
CSS classes, as I will be talking about
| | 01:55 | later, then we can go ahead and layer
the text right on top of the images, one
| | 01:59 | of the features of a fixed-layout EPUB.
| | 02:02 | If you watch the chapter on working
with a PDF, you will know that in a PDF,
| | 02:06 | you can not create new layers and
you can't move things to new layers.
| | 02:10 | But of course you can in InDesign.
| | 02:11 | So, what we would do would be, we'd want
to be able to make sure that all these
| | 02:15 | text frames are on their own layer, so
we can then hide that layer, and then we
| | 02:20 | can export the document to a series of JPEG's.
| | 02:23 | I am opening up the Layers panel to
see what he's got so far, he does have a
| | 02:27 | layer called Captions, but I can tell like
this is a caption but it's on the pics layer.
| | 02:32 | So if you want to move all of your
text frames to a new layer, then just go
| | 02:37 | ahead and select the text frame and then
drag this little red square up to the new layer.
| | 02:43 | That's how you move
something from one layer to the next.
| | 02:44 | And then when I click on the visibility icon,
this eyeball, then all of the text hides there.
| | 02:50 | So you can go through your document and
do this text frame by text frame, let me
| | 02:56 | move it back to where it was.
| | 02:58 | If you want to move the items on your
master pages to a layer, you're going to
| | 03:02 | have to go to that master page and do
so, because you can't really select them
| | 03:06 | here on the page unless you want to
override them and that's a lot of work.
| | 03:10 | So this would not be too bad because we
don't have that many text frames in this
| | 03:13 | document and there are only 12 pages.
| | 03:15 | But if I were working with say, you know,
a 280 page document with lots of text, or
| | 03:23 | something like, say a cookbook, or
something like that, there would be a lot of
| | 03:26 | work to do in order to isolate the
text frames onto their own layer.
| | 03:30 | And that's why I love this new script
that I found, it's called surprisingly
| | 03:35 | enough, Move all text to a new layer.
| | 03:38 | And it will go through the entire
document, master pages, document pages, text on
| | 03:43 | a path, and move all the
text to a new layer.
| | 03:46 | So I've already installed
it here in my Scripts panel.
| | 03:50 | I keep all of my EPUB related scripts in
a special little folder so they're easy
| | 03:54 | to find, and the one that I want
to talk about in this video is
| | 03:56 | Text_To_New_Layer.jsx.
| | 03:59 | And all you need to do is
double-click it. That's it.
| | 04:02 | The end.
| | 04:03 | All found text has been moved to
layer Text0, and I suppose if you edit the
| | 04:07 | script you could change the name of
that layer, but you can always just easily
| | 04:11 | change it right here.
| | 04:12 | So all text has been moved to this layer
and if I hide it, we should see all the
| | 04:17 | text disappear from the document.
| | 04:19 | All folios, headings, et cetera. Excellent!
| | 04:23 | That's all you need to do.
| | 04:24 | Now in the next video, I will show that
after you have isolated all these text
| | 04:27 | frames, how we can export
your pages to individual JPEG's.
| | Collapse this transcript |
| Exporting page backgrounds| 00:00 | We are looking at Nigel's 12 page
publication in Adobe InDesign CS5.5.
| | 00:06 | And what I want to do next is, I
want to export all my images to JPEG.
| | 00:11 | I don't want to export individual images,
I want to export like this entire page
| | 00:16 | to one single JPEG, or this
entire page to one single JPEG.
| | 00:21 | I don't think that there is a
reason for me to have to reassemble these
| | 00:25 | painstakingly in the XHTML
file to match the positioning.
| | 00:29 | Why not just export the entire thing?
| | 00:31 | In fact, why not export these images
plus the white space so that I have an
| | 00:36 | image that is exactly the same size as
the viewport/page size? Then I can just
| | 00:42 | absolutely position it at 0, 0.
| | 00:45 | So you can do that in InDesign quite
simply with the export to JPEG feature.
| | 00:50 | But I want to put the text in separately
where the text has to be live, we can't
| | 00:55 | have the text to be part of the JPEG so,
the first step is isolating the text,
| | 00:59 | hiding the text before we do the export process.
| | 01:01 | And I talked about that in a previous video.
| | 01:04 | In this document, in the exercise
folder, I already have a layer for all the
| | 01:09 | text, and then I could just hide it by
clicking the visibility of the layer, here we go.
| | 01:18 | And let's zoom out a bit and see what
we were looking at, that looks fine.
| | 01:20 | So to export all these pages as
individual JPEG's, go to File, choose Export,
| | 01:27 | save these out to the Desktop,
we want to create JPEG's.
| | 01:30 | Well, we will just save them
right out here and see how it looks.
| | 01:33 | Click Save, you are going to get a dialog
box that gives you chance to set some options.
| | 01:38 | If you want to just test to see how
this works, you might want to say let me
| | 01:41 | just export pages you know, one through
four, and then do that, especially if you
| | 01:45 | have a really long document, you don't
want to export 250 pages then realize you
| | 01:49 | used the wrong settings.
| | 01:50 | So practice a few times, but we will
just take our chances here with 12 pages.
| | 01:54 | Don't turn on Spreads obviously, but
just let me make it clear that do not turn
| | 01:58 | on Spreads, you want individual pages.
| | 02:01 | The Quality of the image we definitely
want High, and then the Resolution; this is
| | 02:05 | really up to you, again it depends on
the size of your pages. You want to make
| | 02:09 | sure these JPEG's are going to be less
than 2 million pixels hopefully far less
| | 02:14 | than 2 million pixels.
| | 02:15 | You have your choice of all these built
-in sizes or just 72, or you can type
| | 02:19 | in anything you want.
| | 02:20 | I am going to leave it at 72 and see
how that comes out. Obviously we do want
| | 02:24 | RGB Color Space and everything else is fine.
| | 02:27 | You do not want to Use Document
Bleeds Settings, you want the images.
| | 02:31 | We do have an image, like up here the
cover image, goes into the Bleed Allowance
| | 02:36 | but we don't want to export that entire thing.
| | 02:38 | We want to fit exactly in the trim size.
| | 02:41 | So don't turn on Use Document
Bleeds Settings, and then click Export.
| | 02:44 | Let's jump to the Finder and go to
the Desktop, and it's building all of our
| | 02:51 | pages and let's go ahead and select
the one and see what it looks like.
| | 02:54 | There's the cover and the dimensions are
846x846, which is the dimensions of this
| | 02:59 | book. That looks pretty good.
| | 03:02 | And there is the next one,
and yeah that's looking great.
| | 03:05 | So this is defining the actual size.
| | 03:08 | Notice they are all 846x846, regardless of
how many or how few pictures we have in here.
| | 03:14 | The only other thing that I might
change is I might then rename all these
| | 03:18 | files, so that they are preceded
with page 02, page 03, page 04, because
| | 03:24 | that's going to help me immensely when
I am actually assembling all these into
| | 03:28 | the individual XHTML pages.
| | 03:30 | So that I know when I'm working on page 4.html,
that I want it to link to page 4.jpg.
| | 03:37 | If you just have a few of these, you
can easily do it yourself just by clicking
| | 03:41 | in here and renaming them yourself.
| | 03:42 | If you have a lot, if you have 256
pages that you need to rename, then use some
| | 03:47 | kind of file rename utility for your OS.
| | 03:50 | There are many available for
Macintosh or Windows, or you know, if you have
| | 03:53 | Bridge, you can use Bridge Batch
Renaming to rename these as well.
| | 03:57 | So any of those options will work
great and that is how we have set up all of
| | 04:03 | our JPEG backgrounds.
| | Collapse this transcript |
| Exporting images| 00:00 | In our 12-page InDesign layout,
I might not want to export every
| | 00:06 | single page as a full JPEG.
| | 00:08 | There's nothing wrong with mixing it up,
maybe a couple of pages have, you know,
| | 00:12 | a full background like here.
| | 00:14 | But maybe on this page, I just want to
export these two individual images or
| | 00:18 | maybe on this page, this is one image,
and then I would position it with CSS.
| | 00:24 | You know, it will save in file size.
| | 00:26 | I don't need, you know, this JPEG would have
all this unnecessary white space, and it
| | 00:31 | doesn't take that much more work
for me to make a CSS that absolutely
| | 00:35 | positions this correctly.
| | 00:36 | The problem is that you can't just go
to the Links panel and say, okay, this is
| | 00:42 | the image I am going to use.
| | 00:44 | Now I could right-click on here and say
Reveal in Finder, or if I was on Windows,
| | 00:47 | Reveal in Explorer, and then use it,
because this is the original image.
| | 00:52 | And I might have cropped it here.
| | 00:54 | This one isn't cropped, but I'm sure
that we have one here some place.
| | 00:58 | Yeah, see this one is cropped.
| | 01:00 | You are not seeing the bottom part
of it. It might have been scaled.
| | 01:04 | So if you want to retain the
formatting that you see in InDesign, not just
| | 01:09 | crop and scale, but also maybe there
is a stroke on the frame, or drop shadow,
| | 01:14 | or something like that, then you're
going to need to export the document to
| | 01:19 | either EPUB or HTML, so that you can
then go into the final files that it
| | 01:25 | creates and grab those JPEGs.
| | 01:29 | I would rather export to HTML, that way I
don't have to worry about unzipping it in EPUB.
| | 01:34 | InDesign works exactly the same way
when it exports these graphics, so let's
| | 01:37 | just go ahead and try that one.
| | 01:39 | Let's just export all of the
graphics to HTML and see what happens.
| | 01:43 | Go to the File menu and choose Export,
and then choose HTML from the dropdown menu.
| | 01:50 | Let's actually make a new folder on the
Desktop called html version, and save it.
| | 02:01 | Now in this dialog box it looks
vaguely familiar, it looks kind of like the
| | 02:04 | export to EPUB dialog box.
| | 02:07 | We really don't care about the HTML and
I don't need to View the HTML when it's
| | 02:10 | done, we're mainly concerned with
what it's going to do to the images.
| | 02:14 | So you want it to actually export the
optimized images. You don't want it to
| | 02:19 | export the original images, and you
want to preserve the appearance from the
| | 02:23 | layout, this is important, this is
what gives you the cropping, the drop
| | 02:26 | shadows, the scaling, and so on.
| | 02:29 | Resolution is up to you, you have your
choice of any of these, unfortunately,
| | 02:33 | you can't dial it in yourself. I'm
just going to leave it at 150 for now,
| | 02:37 | we'll see what happens.
| | 02:39 | Under Image Size, that really makes no
difference because this is just referring
| | 02:43 | to the coding that is going to add
the HTML files in the CSS and we are not
| | 02:48 | going to be using that.
| | 02:49 | We are going to be specifying it
ourselves, in our own document, so don't
| | 02:52 | even worry about that.
| | 02:53 | We are not going to be using the HTML
code so we don't care about the alignment
| | 02:57 | or spacing or anything, we just are
concerned about the images that we were
| | 03:02 | preserving their appearance, the
resolution, and also here under Image Conversion
| | 03:06 | I always specify JPEG
because I don't want any GIFs.
| | 03:10 | It won't create a GIF usually, but I
just like to be safe and say JPEGs.
| | 03:14 | And then here under JPEG Options, we
want to say High and that the Format Method
| | 03:19 | makes no difference really. And then say OK.
| | 03:24 | So it's exporting the entire document out to
HTML and it's writing the JPEGs as it goes.
| | 03:31 | If it takes a very long time to export
it's because we set 150 ppi, if you want
| | 03:36 | to cancel, and then redo it at 72,
that's up to you.
| | 03:39 | Because we have this very large two-
page spread image here so, that might be
| | 03:43 | why it takes while.
| | 03:44 | But with the magic of video
editing, it took hardly a second.
| | 03:48 | Now let's go to the
Finder and see what it created.
| | 03:51 | On the Desktop, there is the html version
and all we are interested in are the images.
| | 03:56 | So there they all are with the
resolution, so that's pretty big, and that
| | 04:01 | one looks pretty good.
| | 04:02 | I'm looking here at the dimensions.
| | 04:04 | It adds the _frmt.jpeg automatically,
because it means it has been formatted,
| | 04:10 | it's not the original image.
| | 04:12 | And you can, again, use a renaming utility if
you want to get rid of that after the fact.
| | 04:17 | Unfortunately, there is no
preference setting in InDesign to change that.
| | 04:21 | But one thing that I do suggest is
that this again is going to be difficult
| | 04:25 | to assemble onto the pages, because we don't
know what page all of these things belong to.
| | 04:32 | We are going to have to constantly be
referring to a visual cue in InDesign or
| | 04:36 | print out to figure out, is this
from page 3 or page 7, and so on.
| | 04:40 | So what I would suggest is that you
rename the images, you prepend the page
| | 04:45 | number that they were on, that way
when InDesign exports them, this will say,
| | 04:49 | page 03-image 9013, page 03B, or page
039, and so on, so that you rename them.
| | 04:57 | Now you might be thinking, oh my
goodness, that is a lot of work, because you
| | 05:01 | can't just simply rename them.
| | 05:02 | If you rename them, it's
going to break the link.
| | 05:04 | If you do it this way, let's start
with page 1, this image is IMG_0303, I
| | 05:09 | want to rename it to page 01 image 303
so you'd have to say go to the Finder,
| | 05:16 | rename it there, and then it's going to be
broken, then you have to re-link it. Too much work.
| | 05:21 | So here is another great
script that will help save you.
| | 05:25 | It is from my friend Marijan Tompa;
| | 05:28 | Marijan, that's how you pronounce it, known as
tomaxxi on Twitter, and he is a wonderful guy.
| | 05:33 | The InDesign user group leader in
Croatia and he's written a whole bunch of
| | 05:37 | fantastic scripts, most of which are free.
| | 05:40 | And if you scroll down to
the bottom, you'll see this one
| | 05:42 | called tomaxxiLinkrename.
| | 05:45 | This allows you to rename the links within
InDesign and it automatically updates the paths.
| | 05:52 | So, let's see how that works.
| | 05:53 | I already have it installed,
it's free script in my Scripts
| | 05:56 | panel, tomaxxiLinkrename.
| | 05:58 | What you do is you select the image,
so let's open up the Links panel, select
| | 06:05 | the image and then go to his
script and double-click it.
| | 06:10 | Please select frame containing placed
object that is not embedded, so I need to
| | 06:15 | actually select the frame, there we go.
| | 06:18 | And it's saying, this is IMG_0303, so
all I'm going to do is say pg01-, Renamed.
| | 06:27 | If we look in the Links
panel, that's the new name.
| | 06:29 | And if we reveal this in the Finder,
it has been renamed, the actual file on
| | 06:37 | your Desktop or on your
hard drive has been renamed.
| | 06:39 | So if you don't want to rename these,
you should probably duplicate the Links
| | 06:43 | folder first, before you
go ahead and do this work.
| | 06:46 | Now the fastest way to use his script if
you have a book with a lot of images like
| | 06:51 | this one, is to assign a
keyboard shortcut to the script.
| | 06:54 | So if we go to Keyboard Shortcuts and
let's make a New Set called amc, and we
| | 07:00 | find the scripts, and find our EPUBs,
there it is, and we will give it a shortcut,
| | 07:10 | I will just try Ctrl+R for Rename.
| | 07:16 | Now I can go image to image, so I will
click on this one, and press Ctrl+R and
| | 07:23 | my arrow key, go right there and say
pg02, Rename, select this one, Ctrl+R,
| | 07:30 | and so on.
| | 07:32 | So assign the keyboard shortcut tomaxxi
script, and then you can quickly rename
| | 07:37 | these, and then let's go ahead
and do this while I am here, 03.
| | 07:44 | Now when you export to HTML, all of
your images will be prepended with the
| | 07:49 | page that they belong to, making your
job far easier and when you create the
| | 07:53 | fixed-layout EPUB.
| | Collapse this transcript |
| Retaining special effects in images| 00:00 | When you're exporting individual
images from InDesign to use in your
| | 00:05 | fixed-layout EPUB, sometimes it just
isn't good enough to export all the images
| | 00:09 | to HTML or to select an image and
export it to JPEG, because a lot of times the
| | 00:14 | designers will use special effects in
InDesign that involve two or more objects.
| | 00:19 | Like, look at this picture of the saguaro cactus.
| | 00:22 | It has a caption down here, but the
caption--let's zoom in a bit--is on a
| | 00:29 | text frame that's filled with a
color that's partially transparent.
| | 00:33 | If I look at the Effects panel, you can
see that the Fill of this frame is 75%,
| | 00:40 | and it is filled with black.
| | 00:42 | So if we just exported the picture,
we're not going to get that special effect.
| | 00:46 | And we could put the caption here in
white. We could do that with
| | 00:52 | CSS, but it wouldn't show up as nicely,
because it's not against a darker
| | 00:56 | background. That's why the
designer did that in the first place.
| | 00:59 | Now if you're doing special effects in
Photoshop like here, I've opened up one
| | 01:03 | of the images and I've sort of imitated
what Nigel did there by putting a black
| | 01:08 | filled rectangle on a layer above the
image and then setting the transparency
| | 01:11 | of that layer to 50%,
| | 01:13 | if we save this out for web--let's get
this to Fit on Screen, just so you can
| | 01:23 | see what I'm talking about--it
automatically flattens all of our layers, so it's
| | 01:25 | going to come out as one single JPEG.
| | 01:28 | So it's not something you need to
worry about if you're working on individual
| | 01:31 | images and in an image-processing
program, but it is something you need to be
| | 01:35 | concerned about if you are using InDesign.
| | 01:37 | So for this image I want to merge this
rectangle into the image when I export it to
| | 01:43 | JPEG, but I don't want the type to be there.
| | 01:46 | So I'm going to have to do some
fiddling, and you're going to have to go through
| | 01:49 | your documents, if this kind of effect is
happening on top of any of your images,
| | 01:53 | to make sure that you're retaining the
integrity of the design in your EPUB.
| | 01:59 | So what I'm going to here is I think
I'm just going to Option+Drag or Alt+Drag
| | 02:04 | this rectangle off to the right into the
pasteboard, so I know where it was, and
| | 02:08 | then over here I'm just
going to delete this text.
| | 02:13 | Now this is still a text frame, as you
can see from these in ports and out ports,
| | 02:17 | but if I switched to preview then we
have just a special effect, and this is
| | 02:22 | what the JPEG will look like once we
select both these items and export them.
| | 02:27 | If you're going to be exporting all
of your images with a script or with
| | 02:32 | exports to HTML or EPUB, using some
of the methods that I showed before,
| | 02:37 | remember that if any of your text frames
contain special effects, like this one,
| | 02:40 | with a partially transparent background,
if you run that script that moves all
| | 02:44 | of your text to different layer, and
then you hide that layer first, you're
| | 02:47 | going to lose that.
| | 02:49 | So if you want to retain this, but
you're trying to keep your text layer
| | 02:52 | separate from your image layer, then
get that text out of there and then select
| | 02:57 | that empty text frame and convert it,
| | 03:01 | from Text to Graphic or Unassigned;
either one of those we'll work.
| | 03:06 | We have another kind of special effect
working over here. It's a group, and it's
| | 03:12 | actually made up of two images.
| | 03:13 | If we look in the links panel, you can
see it's two images, the same image right
| | 03:17 | one on top of the other.
| | 03:18 | Let me ungroup them first.
| | 03:21 | If I am exported them to HTML, we
get this, and then we get this one.
| | 03:26 | Neither one of them are what we want,
so let me undo, put that on back, and
| | 03:31 | group them back again.
| | 03:33 | Group, there we go. You
have to get stern with it.
| | 03:42 | So how do you export these to
JPEG and retain the special effects?
| | 03:46 | Well, you need to select all of the
items or group them first and then select
| | 03:50 | just that one item, and then export it to
JPEG. So let say that I want to do this one.
| | 03:54 | So I'm going to drag across the image
and the square and then go to File >
| | 04:01 | Export, choose JPEG, put it on my
Desktop, we'll call it saguaro-effect. And
| | 04:13 | what's critical up here is in the Export
JPEG choose Selection, so it's just going
| | 04:17 | to export everything you've got selected.
| | 04:20 | Everything else you can set as
before. Let me just export that.
| | 04:23 | Let's see what that looks like in the
Finder. There, there is your square, and
| | 04:30 | you do the same thing with the other
image. Here, because it's already grouped,
| | 04:33 | I can just click once, export
that to JPEG, call this flag,
| | 04:41 | make sure it's Selection, and
Export, and there's the flag.
| | 04:49 | One other feature in InDesign CS5.5 I
want to mention though, I haven't really
| | 04:54 | been able to come up with a reason why
you'd use that feature, rather than just
| | 04:58 | do these individually.
| | 04:59 | I suppose if you have a really long
document and a third of the images need to
| | 05:05 | be selected and grouped and exported
together to maintain a special kind of
| | 05:10 | effects that you see, like these,
is the Object Export options.
| | 05:15 | So if I come up here, let's say that
I take these two things, I'm going to
| | 05:19 | select these two objects.
| | 05:22 | The first step is that you do need to
group them, so I will group those two
| | 05:26 | objects, and then with the group
selected, go to Object Export Options, and under
| | 05:32 | EPUB and HTML, you can say export this
as one image. Custom rasterization is
| | 05:39 | what it's going to do,
| | 05:41 | whenever you export to either EPUB or
HTML. And remember, EPUB does not mean
| | 05:46 | fixed-layout EPUB, but you could
export to a regular flowable EPUB, a flowing
| | 05:50 | EPUB, and then go into the images
folder and locate this, and look at all the
| | 05:54 | other ones that you do.
| | 05:56 | And here you'd say, I went to the
Resolution. Actually, I want to see 72. The
| | 06:01 | Size doesn't make any difference,
because we're not going to be looking at the
| | 06:04 | CSS or HTML; we are just going to grab
the image. And then the format, we want to
| | 06:08 | make sure it says JPEG, and that's fine.
| | 06:10 | So it does not affect the images while
they are here in InDesign, they are still
| | 06:14 | separate. But when you export to EPUB
or HTML, they'll be merged as one JPEG.
| | 06:19 | Just make sure that when you do export--
let's say we're going to export to HTML--
| | 06:26 | that in the Images section you
make sure that this is unchecked.
| | 06:30 | You want to leave it at the default.
| | 06:32 | In another words, it's going to
honor the Object Export Settings that you
| | 06:35 | just set, and that's it.
| | 06:37 | So those are a couple ways you can
maintain the special effects of the images
| | 06:41 | in your InDesign file.
| | Collapse this transcript |
| Extracting text content and format| 00:00 | There are lots of different ways to
get the text out of an InDesign file and
| | 00:04 | into your fixed-layout EPUB files.
| | 00:06 | I want to talk about a few of the
different methods that I've used.
| | 00:09 | I don't really have one suggested
workflow for you; it really depends on the
| | 00:13 | amount of text that you have,
| | 00:14 | if you already have an external CSS
setup that you're going to be using or not,
| | 00:19 | if you have the external
HTML files already set up or not.
| | 00:22 | So I'll just show you a few different
techniques, and I think that you will
| | 00:26 | definitely learn at least a
couple new tricks in the video.
| | 00:29 | Let say that you do already have
something set up, like here in the Finder I have
| | 00:35 | my FixedLayoutTemplate. And let's say
that this is the template that I'll be
| | 00:39 | using for Nigel's book, and that I've
already set up pages for the book. And so
| | 00:44 | like on page01, for example, I'll
double-click page01, and I can put in text
| | 00:49 | right here in the body section,
right after the image for the cover.
| | 00:54 | So all I need to do is in InDesign
copy and paste the text, jump right back
| | 01:01 | into Dreamweaver and paste it in, and
then assumably I'd have the correct class
| | 01:06 | that would give the correct
formatting in my CSS--that I would have a style
| | 01:10 | called headline, for example.
| | 01:12 | And you can easily go through a document,
page by page, copy and paste into the
| | 01:17 | corresponding HTML file, and that'll be
fine. If you have a book that's mainly
| | 01:22 | images, like this one, that would work great.
| | 01:24 | Now just another little tip: if that's
all you need to do is grab the actual
| | 01:28 | text strings and you're going to
worry about formatting yourself in the CSS
| | 01:32 | file, then you might find this
script helpful. It comes with InDesign.
| | 01:36 | It's one of the free ones in the samples folder.
| | 01:39 | It's called--I'm just going to open up
JavaScript here, which is the same on
| | 01:43 | Windows and Mac--ExportAllStories.
| | 01:46 | So if I double-click ExportAllStories,
it just says which format do you want?
| | 01:52 | And I don't care about any of this.
You just want text. Where do you want to save
| | 01:56 | these? I'm putting on my Desktop, I'm
going to call this "nigel text content," and
| | 02:03 | that's it. It's really fast.
| | 02:06 | If we look at what happened in the
finder, on the Desktop there is a text
| | 02:10 | content, and what it did was it
exported every single story, that is, a text frame
| | 02:15 | or a series of threaded textframes,
what you'd see in the story editor, if you
| | 02:19 | open up that window.
| | 02:21 | If I click through here, you can see,
well, apparently there was a folio that
| | 02:24 | was overridden. It doesn't export
master page items, but somebody overrode one,
| | 02:29 | And there is the title. There
is his byline. There is the text.
| | 02:34 | So you could just send somebody this
folder if you have some reproducing this
| | 02:37 | for you and say here's all that you can
copy and paste from here, because they
| | 02:41 | might not have InDesign. They
might not be able to grab the copy.
| | 02:43 | You can give them you know, picture what
it looks like as a PDF and say here is
| | 02:47 | the live copy. Have at it. So that's
another way that you can work this.
| | 02:51 | Let's say that you do want to
export this with the correct HTML tags for
| | 02:56 | formatting and with CSS.
| | 02:58 | So how can you use the InDesign
formatting to create the same look in your
| | 03:03 | EPUB? Now that's something that I covered
in detail in my InDesign to EPUB titles
| | 03:08 | here for flowable books,
| | 03:09 | so you should take a look at that if
you want to learn more, but let me just go
| | 03:13 | over a couple of ways.
| | 03:15 | One thing you can do is after making
sure that all your text has had paragraph
| | 03:19 | and character styles applied correctly,
is just simply export the thing to EPUB
| | 03:24 | or HTML, and then grab the CSS and
HTML from there and copy and paste.
| | 03:29 | So I can just go to File > Export,
choose EPUB, and in the Contents section make
| | 03:41 | sure that Includes Style Definitions,
| | 03:43 | I don't want Preserve Local Overrides
usually, and I don't need the Embeddable
| | 03:47 | Fonts at this point
| | 03:48 | now that this is turned on, when I export.
| | 03:56 | If it takes a long time, it's probably
because of that really wide image, that
| | 04:00 | two-page spread image, or maybe just
you change your image settings to 72.
| | 04:05 | So it automatically opened in Adobe
Digital Editions, and I really don't care
| | 04:08 | what it looks like,
because that's a flowable EPUB.
| | 04:10 | What I do care about is this EPUB right here.
| | 04:14 | So I need to crack this open and I can
do. so I'm just going to copy that to
| | 04:18 | the clipboard and jump to my exercise
files where I have the script to unzip
| | 04:26 | this on the Macintosh.
| | 04:27 | Now if you're on a PC, you could
simply change EPUB to .zip and then use
| | 04:32 | your built-in decompression
utility to get the files out of here.
| | 04:35 | I talk about this a lot in the InDesign to
EPUB videos, but I like to just drag and
| | 04:40 | drop onto this wonderful script.
| | 04:41 | and if you need to download the
EPUBUnzip AppleScript--and there's also
| | 04:45 | matching EPUB zip AppleScript that
will convert a folder with EPUB files back
| | 04:49 | into an EPUB--you can just jump over to
our web site, indesignsecrets.com, where I
| | 04:55 | wrote about it, a couple of years ago
actually, and then I have links to download these.
| | 04:59 | So back here in the files, I'm going to
drag Lost Highway on top of unzip, and
| | 05:06 | there's the Lost Highway unzipped,
and then I investigate. And in my Images
| | 05:10 | folder, there is all my images, and
then here is my CSS file that it created.
| | 05:17 | So the caption, for example, has been
set up like this. And I can edit this as I
| | 05:21 | need to for my EPUB, because usually
InDesign gives far too much information, and
| | 05:26 | some of it isn't exactly what you want.
| | 05:29 | But also you can see that in my
HTML, I have the text set up right.
| | 05:37 | This is styled with subtitles. This is
styled with byline. These are all are
| | 05:40 | classes that are defined. And then I
can just copy and paste this into my
| | 05:45 | existing placeholder files, or I can
modify this to be page01 and duplicate it
| | 05:50 | in all sorts of way.
| | 05:51 | So that's how you would export the
text for formatting. Now there's another
| | 05:56 | permutation on that. Let's
say--let's close all this.
| | 05:59 | Do I want to save that? No.
| | 06:01 | Say that you already have a template
set up. Specifically you have the styles
| | 06:07 | already set up, so if I look at the
CSS that I have, my styles are already
| | 06:12 | working perfectly for my fixed-layout
EPUB for my testing, and when I export
| | 06:17 | from InDesign to EPUB or HTML I want
the styles that are called caption or
| | 06:22 | maybe I call them something else,
like description as my style sheet. In
| | 06:26 | InDesign I want that mapped to this
style, so that's something that you can do
| | 06:30 | in InDesign CS5.5 only,
| | 06:33 | is before you export to EPUB or HTML,
you go to the Paragraph Styles panel--and
| | 06:40 | you can do it on a style-by-style
basis if you'd like, just come down here to
| | 06:43 | Export Tagging and say what it should
be mapped to--but you can also do them
| | 06:49 | all at the same time. Right here from
the Paragraph Styles panel menu, choose
| | 06:53 | Edit All Export Tags.
| | 06:55 | Let's resize this so we can see more.
And I might say I what Caption mapped to
| | 07:00 | the class caption, for example, and
that way it would automatically map to
| | 07:05 | the correct formatting.
| | 07:06 | And then after you do your mapping,
when you export to EPUB, you can have it--
| | 07:13 | let's replace the existing one--
| | 07:15 | in Contents, you can say Use an
Existing CSS File or just use whatever. It can
| | 07:21 | generate its own CSS file, because
really all you care about is copying and
| | 07:26 | pasting the HTML, right?
| | 07:27 | You want to make sure that the HTML files,
| | 07:30 | the actual text, is properly tagged
with caption and title and so on.
| | 07:35 | So you really don't care about what
kind of CSS it generates. You just want to make
| | 07:38 | sure that the text uses the correct classes.
| | 07:40 | So those are couple of different ways to
get the content and the formatting out.
| | 07:45 | One last thing I want to show you that
you probably don't realize was let's say
| | 07:49 | that you're mainly copying and
pasting into your stand-alone files.
| | 07:53 | Going through here, fine, and then
you realize you know what? I actually
| | 07:58 | forgot to include, or I don't have in my
prepared CSS file, the styles just for this.
| | 08:04 | I do have styles for
everything else, but not for the title.
| | 08:07 | You can export a selection to HTML, and
then you can copy and paste the CSS and
| | 08:14 | the HTML as necessary into
your receiving placeholder files.
| | 08:18 | So you just make a selection of a
text frame and go to Export and choose HTML.
| | 08:24 | Now it won't work with an EPUB. An EPUB
will always export every single thing in
| | 08:28 | the whole dang publication.
| | 08:30 | You want to choose HTML and make
sure and choose Selection at the top.
| | 08:36 | So we don't care about any about this,
and we don't want to--well we can view
| | 08:41 | the HTML after exporting.
| | 08:43 | The images, we don't care because it's
not going to export an image, but we do
| | 08:46 | want to see the CSS options.
| | 08:49 | So we'll go ahead and include the
style definitions and click OK. And bam,
| | 08:54 | because I have Dreamweaver set up to
open up all HTML files that open right up,
| | 08:58 | there is our HTML file.
| | 08:59 | Here is a bunch of CSS junk that Adobe
adds automatically. You can always delete
| | 09:03 | this, but the important thing is here
is the title class for its Gentium
| | 09:08 | Basic, the font size, if it needs the
changes to pixels, and so on. But at least
| | 09:14 | you have the CSS--it comes through built
-in--and you have the actual HTML. And I
| | 09:19 | am not sure why it has this big long
space there. That's kind of weird. And
| | 09:22 | subtitle--this is
properly tagged--that you can use.
| | 09:26 | So, lots of different ways to get your
text and its formatting, or not, out of
| | 09:31 | your InDesign file for use in your EPUB.
| | Collapse this transcript |
| Extracting text block positioning| 00:00 | Since InDesign CS 5.5 cannot
export to fixed-layout EPUB,
| | 00:06 | it does not pay any attention
to the position of the text.
| | 00:10 | It assumes it's going to
be one long flowable EPUB.
| | 00:13 | So we need to get the position of all
of these text blocks, because that's how we
| | 00:19 | are going to specify them
in the CSS and in the HTML.
| | 00:24 | So, for example, on the cover here we
want to specify not only the text and the
| | 00:29 | formatting of the text for the title,
but we want to specify how far down from
| | 00:34 | the top of the page it is, and how
far to the right of the page it is, and
| | 00:39 | sometimes we need to also
specify what the width is.
| | 00:42 | If we have text that's, for example,
in a text frame, we want to specify the
| | 00:47 | width so that the text wraps correctly.
| | 00:50 | Once we get these settings, we're
going to be adding those two our styles.css
| | 00:55 | document. And frequently for fixed-
page layout CSS files, the designer has
| | 01:01 | created a different class for every
single text block in the entire document.
| | 01:07 | So, for example, you might say, on
page01 the ID title will be positioned at a
| | 01:12 | certain distance from the top and
from the left. And obviously these are
| | 01:15 | incorrect, because it's 0 and 0, and
it doesn't start at the upper left-hand
| | 01:19 | corner. And then the width and the
height. Or maybe you might set it up that on
| | 01:24 | page02, if you have a class for page02,
and inside of that class there is a
| | 01:29 | paragraph of text, that text should
start at this absolute position, and then
| | 01:33 | you enter in your distance from the top
and from the left in pixels, by the way.
| | 01:38 | That is a requirement for fixed-layout
EPUBs to use pixels, not percentages or
| | 01:42 | ems; you always use exact measurements.
| | 01:46 | Even images will need to be
positioned in the same way.
| | 01:49 | We'll be talking about that a little
bit more detail in the next chapter.
| | 01:54 | But I want to talk about right now is, how do we
get this information out of the InDesign file?
| | 01:59 | When I talked about the PDF, I showed
how you can use the rulers and sort of
| | 02:04 | eyeball it, and then you'll have to test.
| | 02:05 | But you would think that because all
this information exists in the InDesign
| | 02:09 | file, that there should be some
way of getting it out quickly.
| | 02:13 | I can select this frame and if I look
up here in the Control panel, I can see
| | 02:18 | that it starts, well, it looks like it's set
up for a spread dimension, so let me change it.
| | 02:22 | Right now, it's saying 12 inches
from the left, so I'm going to go to
| | 02:25 | Preferences, come down here to Units &
Increments, and while I'm here, I'll just
| | 02:29 | change it to Pixels. And I want the
origin to be Page not Spread. There we go.
| | 02:38 | So now we have this text frame selected,
and it's saying that the distance from
| | 02:46 | the left edge of that page is 56.254
pixels. And you can't do fractions of a
| | 02:52 | pixel on the web, so you're going
to have to round all these yourself.
| | 02:56 | The distance from the top, the Y
measure, is 220 pixels. The width is 221
| | 03:03 | pixels, and the height usually
shouldn't make any difference, because we're
| | 03:07 | going to use the same fonts, the same
leading, the same type size, so it should
| | 03:12 | hit where it is right now.
| | 03:13 | You can say a height if you want, then
you are going to tell it what to do if
| | 03:17 | it exceeds that height.
| | 03:18 | It's actually probably going to disappear.
| | 03:20 | So the idea is you have to go through
every single text frame and make a little
| | 03:25 | cheat sheet for yourself or fill in a
spreadsheet, and you want to say that for
| | 03:29 | this text frame on page05, the
margin-top is 220, the margin-left is 56.
| | 03:45 | So you could just
say top: 220 pixels, left:
| | 03:51 | 56 pixels, and then again width:
| | 03:57 | 221 pixels. And you would take these
measures and you'd copy and paste them into
| | 04:08 | your CSS, and you'd fill this in. And
you create a class for each one of these.
| | 04:13 | And I talked with a friend of mine who
owns a company called Rorohiko--his name
| | 04:17 | is Chris--and I told him about this
horrible manual amount of work that we need
| | 04:22 | to do, even in InDesign, and isn't
there a way to extract this information
| | 04:25 | automatically? And he wrote us a script.
| | 04:27 | Wasn't that nice with him?
| | 04:29 | The script is free, and you
can download it from this URL.
| | 04:33 | I've installed it already in my Scripts
panel, and it's called CSSGeometry.jsx.
| | 04:40 | And all it does is it finds every
single instance of the text in your document
| | 04:47 | and it creates a text frame in the
pasteboard of the first page or spread.
| | 04:55 | Double-click it. You see that? And
I zoom in and it gives us all this
| | 05:01 | information automatically.
| | 05:03 | So it's saying that for the ID, page-1
and I added hyphen -1, because there are
| | 05:11 | more than one text frames on page 1.
| | 05:14 | So the first one is labeled as -1 and
the second one is -2, it gives us those
| | 05:18 | measures, top, left, and width.
| | 05:21 | Page 1, 2, so page 3 its top is 742
pixels. And it looks like it's measuring
| | 05:32 | this element down here.
| | 05:36 | And for page 7, top 382 pixels.
Let's look at page 7, right here.
| | 05:45 | A one little thing is that you see that
the top of this frame is 382 pixels, but
| | 05:51 | that's not where the text starts.
| | 05:53 | The text starts a little bit below that.
| | 05:55 | Even Chris's script does not take into
consideration any kind of insets that the
| | 05:59 | designer may have made.
| | 06:01 | And in fact, in an effect like this
where we want this shaded background behind
| | 06:07 | the text, I would probably split this
up first and put the text by itself.
| | 06:13 | Let me just do this by Option+Clicking
or Alt+Clicking to the right.
| | 06:17 | I discussed how we do this in the
chapter on maintaining special effects.
| | 06:22 | And here I would select all the
text and change that to a graphic or
| | 06:32 | unassigned frame, so that's not counted as a
text frame, so Chris's script won't even flag that.
| | 06:38 | And then for this, I'm going to change
the Fill to none, and change the Inset
| | 06:50 | from Text Frame Options to 0, so
that we can get an exact measure.
| | 06:56 | And I'll drag that back here.
| | 07:02 | And I'll position it 6 pixels and in 6 pixels
to the right. I'm just doing it by eye right now.
| | 07:08 | Like that. And now we'll run Chris's
script again. And this should be 388 from
| | 07:22 | the top, for page 7, 388 from the top.
| | 07:29 | So you might have to go through the
document and make sure that the text really
| | 07:33 | starts where it should start in the
actual document, taking into account any
| | 07:37 | insets or margins that people may have done.
| | 07:40 | So though it may take a little bit of
work in prepping the document to make sure
| | 07:44 | that the text starts were it should
start and not be affected by insets, being
| | 07:48 | able to take advantage of the CSS
Geometry script to get all of these numbers
| | 07:53 | that you would had to do
manually will save you a lot of time.
| | Collapse this transcript |
| Exporting to single-page HTML files| 00:00 | I'm going to show you a technique that
is not for the faint ofheart, but it
| | 00:04 | does take advantage of some key
InDesign features, specifically some scripts, to
| | 00:10 | help you create a multiple-page EPUB.
| | 00:14 | You already know that you can export any
InDesign document to EPUB, and what it's
| | 00:18 | going to do is create one HTML file for
every section or chapter or wherever you
| | 00:24 | say that a new style starts.
| | 00:26 | But that is not how we want to create
fixed-layout EPUBs; we want a single HTML
| | 00:30 | file for every single page. And if
your page is just a big fat old graphic
| | 00:35 | there's no style or anything to
tell InDesign to break it up here.
| | 00:39 | So, I was going back and forth trying
to figure out, how can I force InDesign
| | 00:44 | to export to EPUB and make it break up the
document into individual HTML files, one per page?
| | 00:51 | So, if you do that then at
least you have a starter set.
| | 00:54 | You have the toc.ncx. You
have the content.opf file.
| | 00:58 | You don't have to start like from
scratch and write these in a text editor.
| | 01:01 | You can come out the other way and
start with a complete EPUB and then just go
| | 01:05 | in and edit every individual file.
| | 01:07 | And it might be worth it to you.
| | 01:09 | If you have an 8-page document, you
might as well use the temple that I gave
| | 01:12 | you and just copy and paste text and
change the links to graphics. But if you
| | 01:16 | have, say, a 288-page book, it might be a
lot faster for you to export the whole
| | 01:22 | thing to 288 individual HTML pages, and
then all your links will work correctly
| | 01:28 | in the content manifest, right, because
they'll be pointing to all of your individual files.
| | 01:33 | You could save yourself quite a bit of work.
| | 01:36 | Well, to set this up, though, like I said,
it is not for the faint of heart. And I
| | 01:39 | am just going to run through it, and you
can just think of it as a possible tool
| | 01:44 | that you may want to use.
| | 01:46 | So, there're a number of steps and
we'll start with the simplest one, which is
| | 01:49 | open up your document.
| | 01:51 | The first thing you want to do is export
this document to a PDF, but you want to
| | 01:56 | make sure and hide all the text first
before you do so, because we're going to
| | 02:01 | reimport the PDF, and those pages from
the PDF are going to be exported as JPEGs.
| | 02:07 | In other words, they're going to serve
as our background JPEGs for every page.
| | 02:11 | Now, you may not want a background JPEG
on every page like this--you might just
| | 02:15 | want this image--but it's far easier
to jump back in after the fact and then
| | 02:19 | just edit it out, rather than have to
add a single JPEG background to 288 pages, right?
| | 02:26 | So, first I'm going to hide all the
text, and I'll use my script that I've
| | 02:31 | already used to move all the text to a
single layer that I talked about in
| | 02:35 | previous video. And then
I'll export this to PDF.
| | 02:38 | I'm going to choose High Quality Print,
and we'll save it out to the desktop, and
| | 02:45 | I don't need to view the PDF
after exporting. I trust it.
| | 02:49 | Under Compression though, I probably
want to reduce the Compression to 150.
| | 02:54 | This might be something you want to
experiment with. And I know I have some
| | 02:57 | gray scales in here too,
| | 02:58 | so I'm going to change that to 150.
And then we will go ahead and export it.
| | 03:04 | So, while that's exporting, we can
now go on to the next step, which is to
| | 03:09 | create a receiving document.
| | 03:11 | We're going to flow in this PDF right
back into the document. And so that we don't
| | 03:17 | have to match existing page sizes or anything,
| | 03:19 | it's best to start with
our current live document.
| | 03:22 | So, I'll go to the Pages panel and
delete every single page other than page 1.
| | 03:29 | If we could delete page
1, we would, but we can't.
| | 03:32 | We're going to do a Save As; we're not
going to modify the existing document.
| | 03:35 | Don't worry about it.
| | 03:36 | And then if there's anything here from
the master, I would also just go to the
| | 03:39 | master, any master, select
everything on there, delete it.
| | 03:43 | Delete any additional masters.
| | 03:44 | We just want a plain-Jane document.
| | 03:46 | I'll go to page 1, I'll select
everything here, and delete it. And we'll do a
| | 03:51 | Save As and we'll call this one with
the same name, but we'll say step 2.
| | 04:00 | Now, we want to import that PDF into here.
| | 04:03 | It's just a one-page InDesign document.
But because we're going to use this
| | 04:06 | wonderful script that comes with InDesign--
look in your JavaScript folder--called
| | 04:12 | PlaceMultipagePDF, it's going to
autoflow of the PDF into this document.
| | 04:17 | So, it says, where is the PDF file?
| | 04:20 | There it is on my Desktop.
| | 04:21 | Do you want to do it in a new document? No.
| | 04:24 | We want to do it in the existing
document, this one, the active one.
| | 04:29 | Okay, and then it gives us some weird
little dialog boxes. Just keep clicking OK.
| | 04:34 | You want to start with page 1 and bam,
bam, bam, bam, bam, it autoflows the PDF.
| | 04:39 | I love that.
| | 04:40 | This is actually individual pages from the PDF.
| | 04:43 | If you look at the Links panel, you see
it's linked to the original PDF, and here
| | 04:48 | are all of our pages, 12 pages long.
| | 04:50 | It looks almost exactly the same as before.
| | 04:53 | Now, we are going to split this
document up into 12 individual InDesign
| | 05:00 | documents, and we do that
with the help of another script.
| | 05:03 | Now, this script does not come with
InDesign. It is based on an old script
| | 05:10 | called extractpages, and in order to
make extractpages work with version CS5.5,
| | 05:17 | I had to use this other cool new
script called MakeItRun. And it created this
| | 05:22 | hybrid thing called extractpagesCS5.5
that points to the old one. And it's all
| | 05:28 | explained in wonderful glory detail
in our blog at indesignsecrets.com.
| | 05:34 | Just look for my post with MakeItRun,
"Get Your Old Scripts Running Again with
| | 05:38 | MakeItRun." And then there are links to
download MakeItRun, and then there's also
| | 05:43 | a link to the Extract Pages post, and
where you can download the Extract Pages script.
| | 05:48 | I do have these three
items in the exercise files.
| | 05:52 | So, if you're just going through this
chapter folder and copy and paste these
| | 05:55 | three scripts into your EPUB and create
an EPUB folder in your Scripts folder,
| | 06:00 | put them in there. Then you'll be good to go.
| | 06:03 | So, that's how we can get Extract Pages.
| | 06:04 | Now, there is an Extract Pages in
Acrobat; we just don't have one in InDesign.
| | 06:09 | And one more thing: before you run the
Extract Pages script, make sure that I
| | 06:14 | save the file that you just
imported all those PDFs into.
| | 06:18 | So, File > Save. Save your changes; otherwise
the script will fail, I've found, to my horror.
| | 06:24 | And also you want to save because it closes
the document right after you run Extract Pages.
| | 06:29 | It closes the current document. I
don't know why, and if you didn't save
| | 06:32 | changes, I think that it used to
just close without saving your changes.
| | 06:36 | So, let's double-click it and we
want to extract as separate pages.
| | 06:41 | You don't want to remove
the pages after extraction.
| | 06:43 | Don't turn on this. I've found this causes
problems, this last one. Just click OK.
| | 06:47 | And there it goes;
| | 06:51 | you can go up and get a cup of
coffee I guess, if you're doing 288 pages.
| | 06:56 | As I promised, it closed the document, and
here are all those pages that it built,
| | 07:01 | 1 through 12 of our 12-page
document. We're almost done.
| | 07:06 | Now, we create a new book, and we
will call this book Lost Highway-The BOOK,
| | 07:15 | and we're going to add all of
those InDesign files that it created.
| | 07:20 | A book is essentially a collection
of InDesign files that you can then do
| | 07:24 | batch operations on.
| | 07:26 | I'm going to Shift+Click
all of these. Click Open.
| | 07:29 | If you want, you can save this, but our
main thing is that we are now going to
| | 07:34 | export the book to EPUB. And when you
export a book to EPUB, if you saw any of my
| | 07:41 | InDesign EPUB titles, you would know
that InDesign will automatically create a
| | 07:44 | new HTML file for every single InDesign
document in the book. Aha! So, let's do that.
| | 07:50 | Lost-Highway-The BOOK.epub, and
you can enter whatever you want here.
| | 07:57 | You might be reusing all these
content.opf files; it's up to you.
| | 08:01 | I don't need a cover image.
| | 08:03 | Under Images I'm going to leave the
Resolution at 72, because it's going to
| | 08:09 | actually export those PDFs as images,
and we can use CSS to automatically make
| | 08:17 | those the background images.
| | 08:18 | So, make sure that you say JPEG,
because you want all these to be JPEGs, and
| | 08:23 | we'll leave the Image Quality as
High and under Contents, you can use
| | 08:27 | whatever you'd like.
| | 08:28 | I'm just going to turn these off and
just leave them on, click OK, and then it
| | 08:34 | opens up. I really don't care what
it looks like in Digital Editions.
| | 08:37 | What I am most interested in is seeing
the contents of this EPUB, to make sure
| | 08:43 | that it worked out how I wanted to.
| | 08:44 | So, I'm just going to get my little
scripty that unzips files and I'll just drag
| | 08:51 | and drop this guy right on top of it.
| | 08:55 | That's for AppleScript.
| | 08:56 | If you're on Windows, you can just
change it to .zip and unzip it. And here is
| | 09:01 | our folder with our individual pages, yay,
and our images, one image per page.
| | 09:10 | And if we open up one of these HTML
pages--there you go. You can see that it is
| | 09:17 | linked to its matching image.
| | 09:21 | So that's a cool little trick--well, a
series of tricks, one right after the
| | 09:25 | other--to actually make InDesign export
a series of single-page HTML files for
| | 09:32 | your fixed-layout EPUB.
| | Collapse this transcript |
|
|
5. Editing the EPUB for Fixed-Layout SettingsReviewing the requirements for fixed-layout EPUBs| 00:00 | When you tap on a thumbnail cover of a
book in iBooks, how does iBooks know that
| | 00:06 | it's a fixed-layout EPUB
rather than a flowable EPUB?
| | 00:10 | There are certain requirements that
it's looking for, and that's what this
| | 00:13 | chapter is all about. Let me review
them quickly--there is only few--and then
| | 00:18 | we'll go into detail on
each one in later videos.
| | 00:21 | So a fixed-layout EPUB is a regular
EPUB, and just like an EPUB, it has the two
| | 00:28 | main folders: META.INF and the OEBPS folder.
| | 00:32 | And inside the OEBPS folder, you'll find
all of your content and image files, as
| | 00:38 | well as the control files
content.opf and toc.ncx.
| | 00:44 | The MIME types, it's by itself at the
same level of these two folders. And then
| | 00:48 | inside the META-INF folder, we'll find
the first big difference, which is that
| | 00:53 | any fixed-layout EPUB needs to have
this additional file added. And I don't
| | 00:57 | know of any program that automatically
adds it on its own, so you're going to
| | 01:01 | have to create it on your
own or use this template one.
| | 01:03 | And let's just double-click it really
quick, because the main thing that is
| | 01:08 | important here is this guy right here.
| | 01:10 | It tells the iOS that this is a fixed-layout
EPUB, and that's one of its reasons for being.
| | 01:17 | There is other information that we put
in this display options file that I'll be
| | 01:21 | talking about in a later video.
| | 01:24 | The second major difference in a fixed-
layout file, as opposed to a flowable file,
| | 01:29 | is that you've to declare the viewport
or the page size in every HTML file, as
| | 01:35 | well as the CSS file.
| | 01:37 | So if we look here and
say just grab one by random,
| | 01:41 | here in page02.html, it says, you'll
see the meta name viewport is in the
| | 01:47 | head section, where it declares the width and
height of the page known as the "viewport."
| | 01:55 | So that has to appear in the header
section of every HTML page, as well as in
| | 02:00 | the styles document that all these HTML
pages need to link to. And you declare
| | 02:06 | the viewport in the CSS file in the
body tag. We'll be talking about
| | 02:10 | viewports in more detail later.
| | 02:13 | The third big difference between a
fixed layout and flowable EPUB is that
| | 02:17 | every single page of the book in a fixed-
layout EPUB needs to be a separate XHTML file.
| | 02:24 | Now you may find that the extension is
HTML, as you see here, but if you look
| | 02:29 | in the header of any of these files,
you see it's actually defined as an XHTML
| | 02:33 | file in the DOCTYPE.
| | 02:35 | The pages don't have to be named
according to which page number they are, but it
| | 02:39 | sure helps keep things straight.
| | 02:41 | In the final requirement for iBooks to
recognize this as a fixed-layout EPUB is
| | 02:46 | that in the content.opf file, at the
bottom, there needs to be a guide section.
| | 02:51 | which is true for almost everything you
put in iBooks, but in the guide section
| | 02:55 | there has to be reference type text
that points to the content file where the
| | 03:01 | main text starts in your document, and
that's because Apple uses this to help
| | 03:06 | create the automatic sample.
| | 03:07 | Most people download the sample of the
book before they purchase it. And we'll
| | 03:11 | be talking about adding a guide
section in another video. So that's it.
| | 03:15 | Those are four or five, oh,
four-and-a-half big differences between a
| | 03:20 | fixed-layout EPUB and flowable EPUB. We
want to take closer look at each one of
| | 03:24 | those in this chapter.
| | Collapse this transcript |
| Adding the ibooks.display-options file| 00:00 | We're going to start out with an
extracted EPUB that is not ready for
| | 00:06 | fixed layout. This is just a normal
flowable EPUB, except that I've gone to the
| | 00:10 | trouble of creating a separate HTML
file for every page, and it has links to
| | 00:15 | the matching images.
| | 00:17 | But the required parts of a fixed-
layout EPUB that I just talked about are not
| | 00:22 | in here. So let's start out by adding
the required file to the META-INF folder.
| | 00:28 | You need to name it this. I have an
actual final one up here in extras, if
| | 00:33 | you're in a hurry. It needs be
named com.apple.ibooks.display-options.xml.
| | 00:39 | You can create one from scratch, or you can
use an existing one and just drop it in here.
| | 00:43 | If you want to create one from scratch,
you can do so in any text editor that can
| | 00:48 | save it out as a UTF-8-
encoded file, like TextWrangler can.
| | 00:53 | So you can just start typing, and you
need to begin by declaring that this is an
| | 00:58 | XML document, because that's actually
what this is. So I actually have it still
| | 01:02 | in my clipboard and I can just paste.
Then you hit Return and you start
| | 01:06 | typing the information.
| | 01:09 | Another way that you can create
this would be to do so in Dreamweaver.
| | 01:13 | If you go to Dreamweaver and go to File > New,
| | 01:16 | in CS5.5, and probably earlier versions,
you can choose an existing template of a
| | 01:22 | page type, so an XML--this is what we
want--Blank Page type XML, click Create,
| | 01:28 | and it automatically adds
that information there for you.
| | 01:31 | Now let's just open up the sample, so
we can go through some of the options.
| | 01:36 | So here in extras, I'm going to
double-click the final one. So there is
| | 01:41 | the beginning part.
| | 01:43 | All this information is enclosed in the
tag called display_options. And what
| | 01:49 | you're doing is you're telling it for a
specific platform, an iOS platform, which
| | 01:54 | are iPhone, iPad, or you use
an asterisk meaning everything.
| | 01:59 | By the way, if you say iPhone, it
also applies to the iPad Touch. So you
| | 02:03 | declare the platform name--
| | 02:05 | so for example, here we're declaring
all platforms--and then you set an option.
| | 02:10 | Now the one required option is that the
fixed-layout option is set to true. So
| | 02:15 | you type option space name equals, you
in close the option name in quotes, as
| | 02:21 | I've put here in your little cheat sheet,
and then you set it to true, and then
| | 02:25 | close that option and close the platform tag.
| | 02:29 | If you want to set additional
options, like for all platforms, I want, we
| | 02:35 | will say option, name, equals, I want,
for example, for it to always open up to a
| | 02:43 | spread, instead of a single page, so
we'll say open-to-spread is also set to true, option.
| | 02:53 | The basic idea here is that the
general settings that you want for no matter
| | 02:58 | where somebody is reading your fixed
layout, you set for all of them, and then
| | 03:02 | you can get more specific.
| | 03:03 | So, for example, for the iPhone, you
might want to say that it is always
| | 03:08 | viewed in landscape only.
| | 03:09 | So that even if somebody turns their
iPhone so they'll looking in portrait, the
| | 03:13 | page remains in landscape, and they
would have to read it sideways. It's really
| | 03:17 | up to you; it depends really on your
book. Or maybe on an iPhone you don't want it
| | 03:21 | to open to a spread,
| | 03:22 | so you set open-to-spread equals false.
| | 03:24 | So this is how you would
configure all your settings.
| | 03:27 | The one setting that you need you need
to have is platform name equals asterisk
| | 03:32 | and the option name fixed-layout is
true; all the other ones are really
| | 03:36 | optional, and they all
have default values of false.
| | 03:39 | So I'm just going to actually grab all
of this, copy it, not save any changes,
| | 03:48 | and then in this guy, I'm going to
paste it, and then we'll save this to our
| | 03:53 | folder right here in My Fixed Layout Book.
We want to put it in there, META-INF folder.
| | 04:00 | And you want to save this file as
com.apple.ibooks--I know you are thinking that
| | 04:07 | I'm not going to memorize this,
but I actually have it down--
| | 04:11 | display-options.xml, and then
save it in that META-INF folder.
| | 04:18 | If you have an iTunes Connect account,
in the Apple Guidelines, it does go over
| | 04:22 | some of those options in just a little
bit more detail. But all the options that
| | 04:26 | are included in comments, in this
little extra, are all the ones that are
| | 04:30 | available as of this recording,
| | 04:32 | so don't forget to add
that to your META-INF folder.
| | Collapse this transcript |
| Adding viewport instructions| 00:00 | Now we need to add the required
viewport size as a meta tag to every one of our
| | 00:06 | HTML files in our fixed-layout EPUB that
we are constructing here. And we have to
| | 00:13 | add it as a body tag to our styles document.
| | 00:15 | So if open up, for example, page01.html,
you can see that it's supposed to be up here
| | 00:21 | in the head section and it's not.
| | 00:22 | Now in case you forget what you are
supposed to write, I do have stored in the
| | 00:26 | extras folder in this exercise file,
a little cheat sheet. So here is
| | 00:31 | the meta viewport tag saved as a
text file. And we obviously don't want
| | 00:37 | something that's 000x000,
| | 00:40 | so we're going to change that. Let's
jump back to Dreamweaver. I copied that and
| | 00:46 | I'll hit Return, just paste it
in there. I'll make it nice and neat.
| | 00:53 | You don't have to put in pixels here;
it knows this is what you're talking
| | 00:56 | about. And you would put in whatever
your page size is, so it might be, say, 600
| | 01:01 | pixels wide by 800 pixels tall.
| | 01:04 | How do you figure out what your page size is?
| | 01:07 | Now if you're writing it from
scratch, you can say anything that you want.
| | 01:10 | Let's take a look though, to get an
idea of what we're talking about here
| | 01:14 | InDesign. I've created a new default
8 1/2x11 inch document, switch to inches, so
| | 01:20 | you can see 8 1/2x11.
| | 01:23 | If I change the measuring unit to
pixels--or if you don't have pixels in your
| | 01:27 | program, change to points--
it's about exactly the same.
| | 01:31 | You can see it's little over 600, and
this is almost 800. You can quickly jump to
| | 01:37 | Document Setup and get a readout. It's 612x792.
| | 01:42 | So if you have a document that you've
set up for print at 8 1/2x11, then your page
| | 01:47 | size should be 612x792. So you jump
back over here, 612x792. And then we want
| | 02:00 | that line added to all of our HTML files,
so I'm just going to copy this. And in
| | 02:07 | fact, I am going to copy the head tag as
well, because I'm going to use this for
| | 02:11 | finding and replacing.
| | 02:13 | So I'll copy that to the clipboard, and
then I'll go to Edit > Find/Replace, and
| | 02:21 | I want to paste that in here.
I want to replace it with that, and it
| | 02:27 | automatically populated the Find field
with whatever is in the clipboard; that's
| | 02:31 | the default behavior.
| | 02:32 | But I know it's not going to be able to
find this in my other files, because it
| | 02:35 | doesn't exist yet, but it'll find in
the head section. So we'll do that.
| | 02:40 | And where did we want it to search?
| | 02:41 | We want it to search a folder. It's
going to search just the current document
| | 02:45 | unless you choose Folder. And I
want it to search the folder and viewport
| | 02:55 | here, everything in here.
| | 02:57 | So find anywhere that it says head,
with surrounding body tags, and replace
| | 03:01 | with this right here. And I'm just
going to go ahead and throw caution to the
| | 03:06 | wind and say Replace All. Are you sure?
| | 03:10 | Yes. And what happened here in our first
one was that it added it twice. That
| | 03:18 | always happens to me.
| | 03:19 | Let's take a look at the other documents.
Let's try page03, and then we have the
| | 03:25 | head section and the viewport, the end
of the meta section, and the title, and the
| | 03:31 | end of the head. Works fine.
| | 03:32 | My formatting got a little messed up,
but that's no matter; it'll still work.
| | 03:36 | We need to add that same information
to the top of the styles document, so
| | 03:43 | here's our styles document.
| | 03:44 | I'm tired of that search, got rid
of it. So we need to add a body tag.
| | 03:51 | Usually you don't have a body tag in
your EPUB style sheet, but for fixed layout
| | 03:57 | you definitely do. And you start out
with body space bracket, I'll hit Return,
| | 04:04 | and now here is what I forget.
| | 04:06 | So go back to our friend the cheat sheet,
and this all it is. Copy that and go
| | 04:15 | back to Dreamweaver and paste. We want
to have the exact same measures, and those
| | 04:21 | measures were 612x792.
| | 04:25 | Here you do need to specify the
measurement unit in pixels. And we make sure
| | 04:31 | the margin is set to 0.
| | 04:33 | We have satisfied the requirement, but
I just want to mention that you do not
| | 04:38 | have to use a viewport that matches
your page size exactly, if you're starting
| | 04:44 | with a printed document.
| | 04:45 | If we come back here to InDesign, you
should know that the maximum size for a
| | 04:51 | page is something close to 1200x1700 pixels.
| | 04:55 | Now if you want to see how that compares,
| | 04:57 | first let's make a spread of 8 1/2x11
inch pages. I'm just adding a couple of
| | 05:01 | pages. And now we're going to select
these two pages, and let's change their page
| | 05:06 | size with the Page tool. And we want
the Width to be 1200 and the Height to be
| | 05:15 | 1700. You can't really see the effect
here in the Pages panel, but if I zoom
| | 05:21 | out, you can see the difference.
| | 05:25 | So the problem though is that if you
made a full-bleed image for this one single
| | 05:29 | page, it's going to be a little
bit more than 2 million pixels.
| | 05:33 | So if you want it to create the
largest page size possible and still be able
| | 05:38 | to use full bleeds, you might want to use
something like 1200x1640 or a little bit less.
| | 05:44 | The point being that the iPad and
the iPhone will of course scale the
| | 05:49 | entire document to fit.
| | 05:50 | It's not going to make somebody drag
around and pan around to see the entire
| | 05:54 | thing, but it's going to scale it and
then when they double-tap to enlarge it, it's
| | 05:59 | going to enlarge it as, to, as much
as it can, to the largest viewport size.
| | 06:05 | So it's something that you might
want to play around with. It might start
| | 06:07 | throwing off your absolute positioning,
but you'll find that if you maintain
| | 06:12 | the exact same page size in your
printed document as in your viewport, then
| | 06:18 | when somebody double-taps it to zoom in,
it doesn't zoom that much, which is
| | 06:22 | not a whole lot of fun.
| | 06:23 | If you do want to try a larger viewport
size, then all you need do is make sure
| | 06:29 | that you stay in the same proportions;
| | 06:31 | otherwise, things will get messed up.
| | 06:32 | So stay in same proportions. Right
here we have our current page size for
| | 06:36 | this page is 612x792. So if we go to our
handy-dandy calculator, 792 divided by
| | 06:47 | 612 is about 1.3 ratio.
| | 06:52 | So you want to make a size that's 1.3
times each one of these measures, so it
| | 06:59 | stays the same ratio. And then you
can go ahead and experiment with using a
| | 07:03 | larger viewport than your page size.
| | 07:06 | But for your first few fixed-layout
EPUBs, just stay with the page size. I've
| | 07:09 | investigated a whole lot of the ones
that are for sale on the iBooks store, and
| | 07:13 | all of them seem to conform
almost exactly to a printed page size.
| | 07:19 | Now that we've added our viewport
meta information to all of our HTML files
| | 07:24 | and the same dimensions in a body
tag and the styles, we can go onto the
| | 07:28 | next task.
| | Collapse this transcript |
| Editing the toc.ncx file| 00:00 | If you want, you can fiddle around
with the navigational table of contents,
| | 00:04 | toc.ncx file, but I can tell you that
most readers of your fixed-layout EPUB
| | 00:10 | will not pay any attention to it--and
that's because they like to use the cool
| | 00:14 | thumbnail TOC that Apple will
automatically create for you, the one that
| | 00:18 | appears in a strip along the bottom, or
if you tap the normal TOC button on the upper-
| | 00:23 | left on the EPUB, it creates a series of larger
thumbnails that a user can swipe to and select.
| | 00:30 | But if you remember from the first
video, in the latest version of iBooks a
| | 00:35 | user can toggle between looking at
those larger thumbnails and looking at the
| | 00:39 | actual text links generated by your
toc.ncx. And it usually doesn't make much
| | 00:44 | sense because if you auto-generated that
toc.ncx it's going to have a link to every single page.
| | 00:51 | So how useful is that for table of contents?
| | 00:54 | But in case you're thinking that some
users might actually want to use it, or if
| | 00:58 | you have a complicated long book and
you'd like to give users a way to jump from
| | 01:02 | section to section, chapter to
chapter, then you might want to edit this.
| | 01:06 | So I've opened up toc.ncx. And your
text labels might be different if you
| | 01:12 | exported it from InDesign using our
handy-dandy export-every-single-InDesign-
| | 01:17 | document-as-a-separate-page thing that
I showed in one video, then all of your
| | 01:22 | labels will be the names of the
InDesign files, which is not really that useful.
| | 01:25 | But you can name it whatever you'd like.
| | 01:27 | So, for example, if you want the very
first thing to be, start here, you can
| | 01:32 | just change the text, and it's
going to link to page01.html.
| | 01:39 | Let's say then the next chapter
doesn't start until page 4. Well, you can delete
| | 01:44 | entire navPoints, right, start from
the open navPoint and go to the close
| | 01:49 | navPoint, so we want to get rid of 2
and 3 and we want to jump right to page 4.
| | 01:55 | But what you want to make sure is that
there are no gaps in the sequence here;
| | 01:59 | otherwise, it's not going to validate.
| | 02:01 | So this is playOrder 1. You want this to be
playOrder 2, and make sure this is playOrder 2.
| | 02:08 | If it's a kids' book you might say,
Georgie Goes to School. And it's going to
| | 02:14 | link to page 4. Maybe we don't need
anything else until page 7, so I'm going to
| | 02:20 | delete that, and then on
page 7, Georgie Graduates!
| | 02:27 | Make sure there is no gaps in the
playOrder. And we don't even need the
| | 02:32 | last one. That's it.
| | 02:35 | If you do this kind of heavy-duty
editing of your toc.ncx file, I would recommend
| | 02:40 | that you give it a quick proof, give
it a quick validation check. I'll be
| | 02:44 | talking more about validating in the
last chapter of this video, just to make
| | 02:48 | sure that you didn't accidentally
mess anything up while you're doing this.
| | 02:51 | The toc.ncx file, by the way, is on
its way out the door, because with EPUB 3
| | 02:56 | coming up we're going to be using a
different way of creating TOCs. It's just
| | 03:00 | going to be HTML. But your hard work
creating these and editing these will still
| | 03:05 | be supported in readers for at
least the next couple of years.
| | 03:08 | So don't worry too much about it, but
keep your ears open about EPUB 3 and the
| | 03:13 | new way that we will be creating TOCs.
And of course we'll be covering that
| | 03:16 | here at lynda.com.
| | Collapse this transcript |
| Editing the guide section in the OPF file| 00:00 | The last thing that we need
to add is a guide section.
| | 00:03 | A guide section is really an
Apple-only section for the OPF file.
| | 00:07 | So whether your OPF is called
package.opf or content.opf or whosinitskoosnits.opf, open that
| | 00:14 | up and scroll all the way down to the
bottom. And likely your last section is
| | 00:20 | going to be the spine, and right below the
spine section you want to add a guide section.
| | 00:25 | The guide section tells iBooks an important
stuff about sections of your book, like
| | 00:30 | where is the title page, where
does the text start, where are there
| | 00:34 | illustrations, all sorts of interesting
fun stuff. And we talk a bit about that
| | 00:38 | in my InDesign to EPUB videos.
| | 00:40 | But in a fixed-layout EPUB, the main
thing that we want to add in addition to
| | 00:45 | Apple's usual requirement for adding a
guide letting them know where the cover is,
| | 00:50 | is we have to add a guide
letting them know where the text starts.
| | 00:54 | Now I have a cheat sheet here in the
little extras folder inside the exercise.
| | 00:59 | This is what the guide section looks
like. I'm just going to select it all,
| | 01:03 | copy, jump back to Dreamweaver, and paste.
| | 01:08 | So reference type cover. This is where
the cover is. reference type text, this
| | 01:12 | wants to know where this text starts.
So if you have a title page and you have
| | 01:16 | an intro and forward from the author,
but actually the main body of your
| | 01:21 | cookbooks starts on page 17, then make
sure that you change the link to page 17
| | 01:27 | and use the exact path and the
file name to where it goes to.
| | 01:30 | There are other things that you can
put in the guide, but like I said, you
| | 01:33 | should look at Apple's instructions
where they detail the different kinds of
| | 01:37 | elements you can add there.
| | 01:39 | The only really required elements for a
fixed-layout EPUB are the cover and the text.
| | 01:45 | Save this up, and you are done
adding all of the required sections for
| | 01:50 | your fixed-layout EPUB.
| | Collapse this transcript |
|
|
6. Editing CSS for Precise PositioningPositioning images and text via CSS| 00:00 | For the most part, positioning your graphics
and your text in your EPUB is a manual labor.
| | 00:06 | You need to simply keep referring to
your reference, like here we have the
| | 00:10 | cover of the InDesign document, and then grab
that text and paste it into your HTML file.
| | 00:16 | I am going to jump over to the Finder
where I have my Lost Highway getting
| | 00:21 | started here. And here is page01,.
And here is what I have so far.
| | 00:27 | On the left we're looking at Code
view, and here's the header section and
| | 00:32 | then the body section.
| | 00:34 | The best thing you do is just to start
adding all of your images and all of your
| | 00:38 | text just using normal semantic markup.
| | 00:41 | Don't try to make them
look perfect in the HTML file.
| | 00:43 | So, for example, "I just added Lost
Highway, An Arizona and New Mexico Road Trip,
| | 00:48 | Photographs by Nigel French" one right
after the other, just as they appear here
| | 00:53 | in the InDesign file.
| | 00:56 | The image is already correct. It's the
cover.jpg, and all I did was replace
| | 01:01 | the cover.jpg in my existing
template file for my fixed-layout EPUBs.
| | 01:06 | Whenever you add an image, you also
want to make sure you can add an alt tag.
| | 01:09 | That's one of the requirements for any EPUB
to pass validation, especially Apple's validation.
| | 01:14 | If you exported images from InDesign to
EPUB, you can automatically add your alt
| | 01:20 | tags that way, but here we are normally
just exporting JPEGs, so you're probably
| | 01:24 | going to have to add them yourself.
| | 01:26 | Just a description of what the image is
for people who are accessing your EPUB
| | 01:30 | with a screen reader.
| | 01:32 | What you want to do to format and to
position your text is to use classes and
| | 01:37 | IDs in your CSS file.
| | 01:39 | So here in the CSS file, if I scroll down
past the ones that I have for my template,
| | 01:46 | you can see what I did here was I
created three instances for text on page01.
| | 01:53 | I created a class for page01, and I just
called it page01. And then I said there is
| | 01:58 | a line 1 of the title, an ID for line 1
of the title, and I said it's positioned
| | 02:03 | absolutely 10 pixels from the top, 59
pixels from the left, a color of white, a
| | 02:09 | font size is 72 px, and a font weight of normal.
| | 02:13 | You will find that this is probably,
though it's a lot of classes and a lot of
| | 02:16 | IDs, it's the best way to
keep control of page by page,
| | 02:19 | that you just create a new class for
every page, call it page01, page02 and then
| | 02:25 | when you need to position elements on
those pages, you can use that class to make
| | 02:30 | sure that it only applies to that page
and it doesn't affect any other pages.
| | 02:34 | Now I've already done that in the
source code. I just commented it out. So I am
| | 02:38 | going to delete this existing.
| | 02:41 | Actually, let's just use this as copy-
paste, so I am going to click in front of
| | 02:45 | the closing bracket for the opening
paragraph tag and type id=, and what's nice
| | 02:50 | in Dreamweaver is that if you've
already set these up in your source code then
| | 02:54 | it offers you the choices.
| | 02:55 | So I can just say title Line1, and
then we want the same thing here. id=title
| | 03:02 | line 2. And then I made one for author,
id="author." And let's move this over
| | 03:12 | and click here and choose Live view and that
comes pretty close to what we wanted, right?
| | 03:17 | There we go. Now we are not using same
exact font, but I will be talking about
| | 03:21 | fonts in another video.
| | 03:23 | I got my positioning, by the way,
with help by just selecting it here in InDesign
| | 03:27 | and then looking up here in the X and Y fields.
| | 03:30 | X is how far from the left of the trim
edge of the page, its black line, and Y
| | 03:36 | is how far from the top does this text lie?
| | 03:39 | So when I needed to make one just for
this line of text, for line 2, I dragged the
| | 03:44 | guideline down and was watching the Y field.
| | 03:48 | Then back over in Dreamweaver, in the
CSS, I was able to specify that, for
| | 03:53 | example, line 2 is 130 pixels down
from the top, 59 pixels from the left,
| | 03:59 | just like line 1 is 59 pixels from the
left. And then the author is 755 pixels
| | 04:05 | from the top, 560 from the left.
| | 04:07 | If you want to get a better look--on my
screen it doesn't fit the entire page,
| | 04:11 | especially because my resolution is so
low for these videos--but you can always
| | 04:15 | do a Preview in Safari. It's going to
prompt you to save your changes. And you
| | 04:20 | can see what it's going to look like so far.
| | 04:22 | If it's not exactly what you want
then it's just a matter of going back and
| | 04:25 | tweaking the measures for your positioning.
| | 04:29 | So, for example, if I thought the author
was a little too low, if I wanted him up a
| | 04:34 | little bit, then I'd come back over here
for author and I'd say instead of 755 from
| | 04:39 | the top, let's try 555. And save it,
and then come back to Safari and reload.
| | 04:47 | Oops, maybe that's a little too high.
| | 04:51 | Let's go back to 755. I kind of
like that. Save that and back to Safari
| | 04:57 | reload. Here we go.
| | 04:59 | You take the same approach with images.
| | 05:01 | Now with this image--let's go to source
code and make this little smaller here--
| | 05:09 | the image is one of those background images.
| | 05:11 | Let's turn off Live view so we don't get
confused there. images/cover.jpg. And so
| | 05:16 | all the images that are in the
background automatically get this set for them.
| | 05:23 | So the position is absolute, and they are all
846 pixels tall, which is the same as the body.
| | 05:29 | But sometimes you don't want a background.
| | 05:31 | You want to actually specify where
one picture will go. Maybe you want to
| | 05:35 | specify two or three or four
different pictures on the same page.
| | 05:39 | So, for example, if you see this image
are the cacti and then this black area
| | 05:44 | with the text, and if I hide the text,
which is what I did before I exported
| | 05:50 | every page to JPEG, then
the black area goes away.
| | 05:54 | You can see that if I go to page03--and
let's do a quick preview in the Browser--
| | 06:01 | and also the text that I entered for
Saguaro National Park. Well, I haven't
| | 06:04 | positioned that one yet.
| | 06:06 | But I'm missing this.
| | 06:07 | So what I want to do is export a JPEG
just of this image, along with that black
| | 06:12 | bar across the bottom. And I showed how
to do that in a previous video, where you
| | 06:18 | would select both of these. You turn this,
you get rid of the text, select both
| | 06:21 | of these, and export to JPEG. And I've
already done that. In the images folder I
| | 06:25 | made one called 03-saguaro.jpeg.
| | 06:28 | So this is the entire image.
| | 06:29 | It has none of that whitespace going around it.
| | 06:31 | So now this means I need to precisely
position the image on the page. I'm going to
| | 06:36 | jump back to InDesign and select just
the image, and I can see that it is about
| | 06:41 | 150 pixels in from the left
and 56 pixels from the top.
| | 06:46 | So I'll go back to Dreamweaver, and I
am going to change the image source from
| | 06:52 | page03.jpg to 03-sag.jpeg, and then I'm
going to position both the image and the
| | 07:00 | paragraph of text by
creating a class called page03.
| | 07:03 | Let's take a look at page03,
which I already have created here.
| | 07:09 | So page03, the width and the height of
the image is auto, the top is 56 pixels
| | 07:15 | from the top, and the left margin is 150 pixels.
| | 07:18 | And then for the paragraph, so see, I
am just using simple elements here,
| | 07:21 | image, paragraph, the top of the text
is 742, from the left it's 160, and it's
| | 07:27 | colored white, remember, because I wanted to
get on top of that black band at the bottom.
| | 07:31 | So we go back to source code and we
say right after the body, we will add the
| | 07:39 | div class, div class="page03." And then
you have to remember to close out the
| | 07:48 | div tag, like that. And let's update
this. You always have to click Live view
| | 07:56 | to make it refresh.
| | 07:59 | Look at how beautiful that is.
| | 08:04 | And there we go.
There is your page03.
| | 08:05 | So as you are developing each page, you
need to constantly be jumping back and
| | 08:09 | forth between your source--the original
layout of the book, the actual code and
| | 08:14 | the JPEGs--and then your preview.
| | 08:16 | So I am using Safari because the Apple
iBooks uses the same engine, internal
| | 08:20 | engine, with the WebKit engine that Safari does.
| | 08:23 | For true previewing, we are going to
need to proof it, which I will be talking
| | 08:27 | about in the next chapter.
| | 08:29 | Yes, it's a lot of tedious work,
but there is no getting around it.
| | 08:32 | This is the pain that you have to go
through in order to achieve that beautiful
| | 08:36 | PDF-like quality in your final EPUBs.
| | Collapse this transcript |
| Embedding fonts | 00:00 | Your fixed-layout EPUBs can have
embedded fonts just like your PDFs can
| | 00:04 | have embedded fonts;
| | 00:05 | however, you can't just throw any
font that you have into the EPUB font
| | 00:10 | folder, because it all depends on the
rights that the font foundry gives you,
| | 00:15 | as far as embedding.
| | 00:16 | Now when you export to PDF, InDesign
and other programs will tear that font
| | 00:21 | apart and embed just the subset of the
letters, and there's no way that you can
| | 00:25 | give that PDF to somebody else and
they can extract the entire font to use.
| | 00:29 | And Adobe InDesign tries to do
that when you export to EPUB.
| | 00:32 | If we export this to EPUB, and we,
say, here under Contents, to include
| | 00:40 | embeddable fonts, well, an
embeddable font to Adobe is any font that can
| | 00:44 | be embedded in a PDF.
| | 00:45 | And so they will go ahead and embed
encrypted versions of the fonts you used in
| | 00:50 | this, and then there is an
encryption file that goes along with it.
| | 00:53 | And the problem that most EPUB
designers have found is that it's a crapshoot
| | 00:57 | whether or not iBooks will support it.
| | 00:59 | It seems like in some
versions of iBooks, it works fine;
| | 01:02 | in other ones, it ignores it. And it's
also the same kind of gamble that you
| | 01:06 | take with getting the EPUB validated.
| | 01:09 | A lot of times the validation engine,
EpubCheck, will kick it out because it will say
| | 01:13 | "doesn't understand that encryption file."
| | 01:15 | And if you toss out the encryption file
then the fonts are completely ignored.
| | 01:19 | We're all hoping that Adobe and other
font foundries and the idpf.org and iBooks
| | 01:26 | and Apple will all get together and
figure out how to make this work for
| | 01:29 | everybody, but in the meantime, you
can embed fonts as long as you have the
| | 01:33 | right to embed the entire font.
| | 01:36 | And you don't have that right really
with Adobe fonts unless you can encrypt
| | 01:39 | them, which doesn't work. So we're going to embed
unencrypted fonts into our EPUB.
| | 01:43 | Now this document that we're
looking at in InDesign uses some Adobe
| | 01:48 | fonts, Chaparral Pro.
| | 01:50 | So you would have to try and find a
substitute that sort of matches this if you
| | 01:54 | want to be completely legal.
| | 01:55 | A lot of times people are
creating fixed-layout EPUBs from scratch;
| | 01:59 | they are not trying to
replicate the print version.
| | 02:01 | So in that case, you have your choice
of which fonts to choose, and it's a lot
| | 02:04 | easier than trying to retrofit a
public domain or a rights-free sort of font
| | 02:10 | into your beautiful publication.
| | 02:13 | There are lots of places where you can
find fonts that you can embed for free,
| | 02:17 | or what you want to look for our
public domain or web fonts.
| | 02:20 | For example, Google web fonts works great.
| | 02:23 | You can use Google web fonts on your
web site by making sort of like a link to
| | 02:27 | where they are on the web, but the
problem is that you don't want to do that for
| | 02:30 | an EPUB because the person reading
your eBook on the iPad might not have a
| | 02:34 | connection at that time,
| | 02:36 | so they don't have a constant
connection with the Google server.
| | 02:39 | So you want to be able to download the
actual fonts, and you can embed either
| | 02:43 | TrueType or OpenType fonts. All the
Google web fonts are available as TrueType.
| | 02:47 | Say that I wanted this one,
| | 02:48 | Grumpy wizard, this Lilita One.
| | 02:51 | I can say Add to Collection.
| | 02:53 | Then as soon as you start adding
things to collection, you can choose to
| | 02:57 | download your collection.
| | 02:58 | So Download Collection, and this says,
"You don't have to do it if you're going
| | 03:01 | to use it for web pages," but I actually do
one download the collection as a zip file.
| | 03:06 | So it downloads these as
TrueType fonts, as a zip file.
| | 03:10 | If you go to this site, scripts.sil.org, a
lot of people are using their free fonts.
| | 03:17 | The fonts have been made to be
embedded in all sorts of different venues.
| | 03:21 | The one that you see a lot is Gentium and
Gentium Plus, which we'll be using in this project.
| | 03:27 | There is other ones that
you can play around with.
| | 03:29 | And if you go to dafont.com, you will
see that the Gentium family is there, as
| | 03:34 | well as the other fonts from sil.org.
So you can get a better preview of what
| | 03:38 | they'll look like, and
then you can download them.
| | 03:41 | So let's say that you've downloaded your
fonts. How do you get them into your EPUB?
| | 03:45 | So I've downloaded the Gentium basic
fonts into this folder and it comes a
| | 03:49 | little text file explaining how to use them.
| | 03:51 | You need to actually add the physical fonts to
the EPUB, and you put them in the OEBPS folder.
| | 03:58 | Like here is an example of our Lost
Highway fixed-layout EPUB and inside the
| | 04:02 | OEBPS, we just have CSS and
images in our XHTML files.
| | 04:07 | But in the after one, you can see that
I added a little folder called fonts.
| | 04:11 | It doesn't have to go onto a folder called font;
| | 04:12 | they can be loose in here, but why not
stay organized? Just the TTF fonts.
| | 04:17 | And every time that you add a file,
remember, to your EPUB, you have to
| | 04:22 | include it in the manifest.
| | 04:23 | So open up your OPF file
and add them to your manifest.
| | 04:29 | I made a little organized fonts section
here, and you just give it any ID that
| | 04:34 | you like, and then have the link to
where it is, the actual file, and the
| | 04:38 | media-type for this is application/x-font-ttf.
| | 04:41 | It'd say otf if it was OpenType font.
| | 04:44 | So number one, add the
actual fonts to the OEBPS folder.
| | 04:48 | Number two, add the links to those
fonts in your manifest section in content.
| | 04:54 | And then you want to add them to
the CSS file as font-face calls.
| | 04:59 | So let's go to the CSS and go to styles.css.
| | 05:05 | So we we're going to
start it out with @font-face.
| | 05:07 | You have a font-family name;
| | 05:10 | this is font-style:
normal, font-weight:
| | 05:12 | normal, and then the URL, a link to the URL.
| | 05:15 | Because the CSS file is inside a folder
called CSS, we have to say back up one
| | 05:19 | level and then find the fonts
folder and then there is the ttf.
| | 05:24 | So I add them one right after the
other. You add one for every font that's
| | 05:27 | inside your folder that you want to use.
And then finally, you need to include
| | 05:32 | the font-family attribute in the CSS.
| | 05:34 | So say, for example, in my Header
section, h1 font-family Gentium Bold.
| | 05:40 | So I believe I'm using h1 in
my page 2. Yeah, there it is,
| | 05:47 | Saguaro Cactus.
| | 05:48 | So you have some text here.
| | 05:50 | Let's take a look at it in the Safari.
| | 05:55 | There is the Gentium Bold being
used instead of the default font.
| | 05:58 | Now if you don't call any font, iBooks
will just default to its own serif font
| | 06:03 | which, as far as I can tell, is Times New Roman.
| | 06:06 | It's either that or Georgia.
| | 06:07 | I really spent a lot of time
trying to figure that out, but there's no
| | 06:10 | documentation about it.
| | 06:11 | So you don't have to embed a font,
but if you want to have control over the
| | 06:15 | fonts, then that is the way that you do it.
| | 06:18 | One last thing is that even if you
include all these font calls at the top and
| | 06:24 | you include all these fonts in the
fonts folder, you don't have to use them.
| | 06:27 | You might be thinking "Will it fail
validation if I include fonts that I don't
| | 06:31 | actually use in my HTML files?" And no,
you just have to make sure that the
| | 06:35 | manifest has links to all those fonts.
But what you do in your CSS and HTML
| | 06:40 | files is completely up to you.
| | Collapse this transcript |
| Making images span a two-page spread| 00:00 | One of the most interesting features
of a fixed-layout EPUB is that you can
| | 00:04 | specify a single image
to cross the great divide.
| | 00:07 | You can specify an image to go across
the spine, to extend into the next spread.
| | 00:13 | We already have this effect
happening in our EPUB, and the way that it's
| | 00:17 | happening is that when I exported the
pages as JPEGs from InDesign, it split
| | 00:22 | itself, so we have a left side and a right side.
| | 00:25 | Actually, before I did that, I hid the
text layer. I don't know if you recall from that
| | 00:29 | video. So now in our file--let me
jump over to the exercise files in the
| | 00:35 | before Lost Highway--page04 has a
link to the page04.jpg. And if we look at
| | 00:43 | this in Safari, you can see what this looks
like, just that. And page05 is the right side.
| | 00:49 | But what happens when you view this then,
you view page 4 and 5 as a facing page
| | 00:54 | spread in iBooks, you see a little
bit of division right down the middle.
| | 00:59 | And what we'd like is to have one
smooth image going all the way across.
| | 01:03 | To do that, we have to flex with it a little
bit, and let me show you what we need to do.
| | 01:07 | First, let's jump back to InDesign.
| | 01:09 | The first thing you need to do is create the
image that spans the entire two-page spread.
| | 01:14 | Now, in this case, what I want to do
is I realize I'm missing that dark area
| | 01:19 | here because then I'm
going to add this type on top.
| | 01:21 | So I think what I'm going to do is I'll
take this bit and move it off into the
| | 01:26 | pasteboard and then take this and tell
InDesign that it is not a text frame, and
| | 01:33 | then I'll hide the text again.
| | 01:36 | This is not a text frame.
| | 01:38 | Oh, it's on the text layer, that's why.
| | 01:39 | Let's put you here and pics there.
| | 01:42 | Now we hide the text, okay.
| | 01:44 | We want to export this entire thing as
one big JPEG. Or if you're creating this
| | 01:48 | in Photoshop, you take your viewport,
the width, and you double the width.
| | 01:53 | You want to keep the same height, but
double the width. And I'm just going to do
| | 01:57 | this quickly in InDesign by going to
Export > JPEG, and you want to put it into
| | 02:06 | your images folder right here,
and we'll call this 04-spread.
| | 02:11 | I'm not actually going to do this,
because I want to keep this pristine, but I
| | 02:15 | already have it set up in the after folder.
| | 02:19 | So here in the after, in images, I
have 04-spread, and it's the entire thing.
| | 02:24 | So first, make your image.
| | 02:26 | Then you're going to call on that
one image on both pages of your HTML.
| | 02:32 | It always starts on an even page.
| | 02:33 | So you'd go to page04, and let's take a look at
our after and I'll just show you what I did.
| | 02:38 | Go to page04 and call on there 04-spread.jpg.
| | 02:45 | Do the same thing with page05.
| | 02:48 | So, both of these pages link to the same file.
| | 02:50 | Now because you've made both pages
linked to the same file, we've gotten rid of
| | 02:55 | the old page, 04.jpg, page05.jpg,
| | 02:59 | don't forget to update your content.opf,
| | 03:02 | the manifest. Remember that lists
all of the assets you use in this EPUB.
| | 03:06 | So in the content.opf, you have to go
down to here and you need to include your
| | 03:14 | spread, 04-spread.jpg, and you need
to get rid of the old 4 and 5 JPEGs,
| | 03:19 | page04.jpg and page5.jpg,
which I've already done.
| | 03:25 | You can see I already updated the OPF file
for the Page 3 from a previous lesson.
| | 03:29 | So I'm trying to keep things straight.
| | 03:31 | What you try and do is be very
meticulous as you make these changes;
| | 03:34 | otherwise, it will be very difficult
to figure out any problems you're going
| | 03:37 | to have with validation. All right!
| | 03:39 | So you made your image, you called
on the same image on the both pages--
| | 03:43 | the even and then the odd page that's facing it--
| | 03:46 | you updated the manifest to reflect the
new file and the removal of the older files,
| | 03:52 | and now, we're going to use a div class,
and then we'll update the CSS to reflect this.
| | 03:58 | You want to create a div class that
tells the program if it's on the right
| | 04:02 | side or the left side.
| | 04:03 | So here in page05, the div class is right side;
| | 04:06 | it is a right-facing page.
| | 04:07 | On page04, it is left side.
| | 04:10 | Then in your CSS, for both the left-
side class and the right-side class--so
| | 04:18 | they're separated by comma--you want
to set the width and the height to your
| | 04:22 | page size, to your viewport.
| | 04:24 | For the parts of the image that aren't
going to fit, you want it to be hidden.
| | 04:28 | So you say overflow hidden
and keep the position as relative.
| | 04:32 | Then for any image that is part of that
class, you need to say that the position
| | 04:38 | is absolute within that class.
| | 04:41 | Give it a height and if you're going to
put text on top, like we want to put text
| | 04:44 | on top at the black bar, make sure that
the image is set to a negative or lower
| | 04:49 | Z index for layering. One more step.
| | 04:53 | For the image on the right side of
the page, you want to set it so that the
| | 04:58 | left is offset 100%.
| | 05:01 | In other words, you only want the right
side of the image to show on the right page.
| | 05:05 | The left side of it you want to be hidden.
| | 05:07 | Now we're talking about the
image as it fits within here.
| | 05:11 | You're not going to make
the entire image disappear.
| | 05:14 | Now, I have all this written up in our
friendly little extras folder so that you can
| | 05:21 | remember how this is set up.
| | 05:22 | Of course, you would replace these
page sizes in pixels with your page size.
| | 05:27 | But once you've set this up, then you can
go ahead and compile it into an EPUB and
| | 05:31 | check it out on your iPad.
| | 05:33 | It works really great.
| | Collapse this transcript |
| Creating text wraps| 00:00 | A lot of times, especially with text-
heavy books, you will be hiding the text
| | 00:05 | layer and then exporting to JPEG the
background, and the background has images
| | 00:11 | or things around which the text wraps.
| | 00:14 | Like, for example, here is a page from
an actual fixed-layout EPUB where you can
| | 00:19 | see the text is wrapped around
this background image of the feather.
| | 00:23 | This is just one big image in the
background, but it wraps to the left, and then
| | 00:29 | it wraps to the right.
| | 00:30 | And you can create floats--
| | 00:32 | you can do like a drop cap and
have the text float around it--
| | 00:35 | but many times the graphics are going
be just merged into the background JPEG,
| | 00:39 | but you need to have the text on every
individual page or it interacts with that to
| | 00:45 | look like it is wrapping.
| | 00:46 | Now this book, by the way, in case you
want to take a look, is actually for sale
| | 00:50 | here on iTunes. It's called Missed
Connections by Workman Publishing, and they do
| | 00:54 | some phenomenal fixed-layout EPUBS.
| | 00:58 | The production manager was telling
me about how they worked on this page.
| | 01:01 | Let me show you in the
Split code how this is done.
| | 01:05 | The image is 0009.jpg, and if we jump over
to Finder, you can see that 0009.jpg is this.
| | 01:17 | This is just one single image with that
thing on the right and that thing on the left.
| | 01:22 | And at the bottom, let's look at this wrap
first at the bottom. How does it wrap to the left?
| | 01:27 | We scroll down. It wraps with
a series of non-breaking spaces.
| | 01:32 | So, for example, "the handsome chap on
the subway was," "the handsome chap on the
| | 01:36 | subway was," and then the word
completely needs to be indented a little bit.
| | 01:41 | So they edit four non-breaking
spaces. And then the next line ends with
| | 01:46 | message parentheses, message
parentheses, and then they have the class set
| | 01:52 | to indent for here.
| | 01:54 | They started a new paragraph here
with the word in, and the class is indent
| | 01:58 | because that's one of the classes
that they used where the first line is
| | 02:01 | indented. But even more than that, it still
has to be indented more because of the wrap.
| | 02:06 | So they added a bunch more. And it gets crazy.
| | 02:09 | So basically, you create one, and
then you paste, paste, paste, paste.
| | 02:12 | That's how you do a wrap on the left
| | 02:14 | is that you just have to fake it.
| | 02:16 | To do the wrap on the right, they used
something very interesting, which is what
| | 02:20 | I was trying to figure
out. How did they do this?
| | 02:22 | Because if you go up to the top where
it says, On Lower East Side--I'm just
| | 02:26 | scanning to see where we see Lower East Side--
| | 02:29 | we're not seeing like a bunch of
returns here, which is what I thought I'd see;
| | 02:33 | we just see regular text. And the way
that this is done is with a special CSS 2
| | 02:39 | setting called white-space pre-line.
| | 02:42 | Now I've duplicated that
in our fixed-layout example.
| | 02:47 | So let me show you. In the exercise
folder for this lesson and page 7, you'll see
| | 02:53 | an extra page that I just go threw in
here to try and fake it the same way.
| | 02:56 | Here's the page on the right, and what
I want to do is show how you would wrap
| | 03:00 | around this square image on the left
and do a soft wrap around this flower on
| | 03:06 | the right with just some placeholder text.
| | 03:09 | So around the left, you have to use these nbsp.
| | 03:13 | So you can see I added it before the
word significance, and establish, and say
| | 03:18 | we wanted to do right
after the word plant species,
| | 03:21 | there is the word Buy over here.
| | 03:23 | So let me find--let me just grab one second so I can
just copy and paste that. I haven't typed it.
| | 03:29 | Paste, paste, paste, paste. Let's do a
few of them and then click here to update.
| | 03:34 | So it's starting to move.
Paste, paste, paste, paste.
| | 03:40 | Click over here again.
| | 03:41 | Maybe that was one too many.
| | 03:46 | Let's try that. That's a little better.
| | 03:48 | This is what you'd have to
do for every single page.
| | 03:51 | If this image was part of the
background, I suppose if you could extract it
| | 03:55 | from the background and make it a float,
then you wouldn't have to do that, but
| | 03:58 | that might even be more work in the end.
| | 04:00 | Down here where we have the word
Peonies, like here, looks like I hit the Return
| | 04:07 | and inside the word stamens. We don't
want that. Let's do like that, stamens.
| | 04:14 | If you hit Return after the word
stamens and then update this, then it breaks
| | 04:21 | the stamens. Then we want to
hit Return after the word flowers.
| | 04:26 | And how am I doing this without actually
entering a break or a new paragraph mark?
| | 04:30 | If we look at the CSS for this text,
scrolling down to page07--come on!--we have the
| | 04:42 | setting white-space pre-line.
| | 04:44 | This is kind of like the pre-setting, if
you are familiar with all the pre-setting,
| | 04:48 | which means exactly how I type it in the code.
| | 04:50 | That's why I wanted to look in the
HTML preview. But pre-line is a subset of
| | 04:55 | that, meaning if I have a bunch of
space runs or return runs, pay no attention
| | 05:00 | to them; still collapse them.
| | 05:02 | But if I hit Return inside of a line,
please pay attention to my line breaks
| | 05:07 | that way and honor them in the preview.
| | 05:09 | I thought that was pretty clever
| | 05:12 | how they got this thing to wrap so
nicely on the left and the right. It is a lot
| | 05:15 | of work, but if this is the effect that
you're after, that's what you have to do.
| | Collapse this transcript |
|
|
7. ProofingConverting expanded files back to an EPUB package| 00:00 | Checking your work in Dreamweaver
or Safari will only take you so far.
| | 00:05 | You really need to compress all your
files into an EPUB and then get that down
| | 00:09 | onto the iPad and see how it's looking.
| | 00:11 | The first thing is, how do you
turn all these files into an EPUB?
| | 00:15 | Well, I talked about this in my
InDesign to EPUB course, but essentially an
| | 00:20 | EPUB is a ZIP archive.
| | 00:23 | There are some special settings about
it, but on a PC it's a lot easier to
| | 00:27 | deal with than on a Mac.
| | 00:28 | On a PC, you just need to select your
EPUB folder and then use Windows 7's or
| | 00:35 | later built-in ZIP archive, convert
it into Lost Highway.zip, and then change
| | 00:41 | the extension .zip to .epub, and that's it.
| | 00:45 | Now, if that's not working for you for
whatever reason, if you can't get the
| | 00:48 | EPUB to preview at all, then for
Windows you might want to check out this
| | 00:54 | program, 7-Zip, which I
know for sure does the job.
| | 00:57 | So with 7-Zip you can download it.
It's open source. It runs on basically any
| | 01:01 | version of Windows since Windows 95, I think.
| | 01:05 | And the way that you do this--this is
what I've read on the Windows boards; I've
| | 01:08 | never actually tried to do it myself
on Windows--but you create a new archive
| | 01:12 | and you would call it
Lost Highway.zip, and you create that with 7-Zip.
| | 01:17 | And then you'd drag and drop the
mimetype file into the archive.
| | 01:21 | The mimetype file is treated somewhat
differently than the rest of the files,
| | 01:26 | but if you drag the mimetype file in
separately and then you Shift+Click these
| | 01:31 | two folders and add that to the
ZIP file, then that should work.
| | 01:35 | Then in the end you change the .zip to .epub.
| | 01:37 | That's how you do it on a PC.
| | 01:40 | On a Mac, we don't even have that.
| | 01:43 | You're supposed to use a Terminal
command. That's the Mac's command line
| | 01:47 | interface. But as I wrote about on
InDesign Secrets, not everybody is
| | 01:51 | comfortable with Terminal.
| | 01:52 | Instead, you might want to use these
wonderful AppleScripts that I use constantly;
| | 01:56 | EPUB UnZip and EPUB Zip, which
essentially turns that command from Terminal
| | 02:02 | into a nice little drag and drop AppleScript.
And I have these here for you in this folder,
| | 02:08 | so there is Zip and UnZip.
| | 02:10 | So UnZip will explode it out into
folders and files, and Zip goes the other way.
| | 02:15 | So, for example, I could just drag and
drop this right onto ePub Zip, and there
| | 02:21 | is our Lost Highway.epub.
| | 02:23 | That's step one: convert your files and
folders into a nice, neat EPUB package.
| | Collapse this transcript |
| Validating the EPUB| 00:00 | It's always a good idea to
check that your EPUB is valid.
| | 00:04 | Every time you make some major change,
like add or remove images or add new
| | 00:08 | pages, just quickly convert your folder
to an EPUB and validate it really fast,
| | 00:14 | just to make sure you're not adding more
and more errors on top of other things.
| | 00:17 | And of course you need to make sure
that your final EPUB is valid before you
| | 00:21 | upload it to the iBookstore.
| | 00:23 | So how do you validate an EPUB?
| | 00:26 | The official way is you go to this web
site, code.google.com/p/epubcheck.
| | 00:32 | You get the epubcheck at this recording
right now, 1.2 is the latest version.
| | 00:38 | It's something that you really need to
install in your command line, or as a Java app.
| | 00:42 | If you just want to do a really quick
check for a smaller file on an occasional
| | 00:47 | basis, you can use this site.
| | 00:50 | It used to be Threepress
Consulting in my previous videos.
| | 00:53 | I mentioned that this Threepress
Consulting, does a lot of EPUB consulting,
| | 00:57 | hosted an online EpubCheck.
| | 00:59 | But they have since been bought by
another company and so now it makes more
| | 01:04 | sense for this organization to host it.
| | 01:06 | It's actually the people who came up
with the specs for the format itself, the
| | 01:10 | International Digital Publishing Forum, IDPF.
| | 01:13 | So what you can do is you can just
click Choose File and then upload your EPUB
| | 01:19 | right from here, and then it
will go ahead and validate it.
| | 01:22 | Let me show you a couple of other
choices though, because sometimes you might
| | 01:25 | not have Internet access, or you want to
do a lot more checks, and it's kind of a
| | 01:29 | pain to have to always upload it.
| | 01:31 | So if you have the program Sigil or
Sigil, however you want to pronounce it,
| | 01:37 | Sigil can do EPUB check.
| | 01:38 | You can just choose Open. Find your EPUB.
| | 01:43 | You don't have to unpack it first,
and then run a check on it right here,
| | 01:47 | validate the EPUB, and it will give
you a list of problems, if there's any
| | 01:51 | problems, and tell you where,
what files the problems are in.
| | 01:55 | It's nice because it's free.
| | 01:57 | The program that's not free, but that
you may have invested in any way because
| | 02:00 | it's so powerful with EPUBs and all
sorts of XML and XSLT projects, is oXygen,
| | 02:07 | either oXygen Editor, like we have here, or
oXygen Author, lower cost, but still does EPUBs.
| | 02:12 | If you open up the Archive Browser,
you can open up your EPUB from here, and
| | 02:19 | then you can go ahead and validate it
right here with this Validation Checker.
| | 02:23 | And let me show you the way that I like to use.
| | 02:26 | On my Macintosh, I have, inside the
Exercise Folder epubcheck, a little app that
| | 02:34 | somebody actually converted into
an AppleScript from the Google code.
| | 02:39 | So it's 1.2, the current version, and now I
just drag and drop my EPUBs right on here.
| | 02:44 | And I have a problem child EPUB--if
you've noticed, I have the word error to
| | 02:48 | this--because I want to make sure that
we can see what happens when you get an
| | 02:52 | error and then how do you fix it?
| | 02:54 | So I'm going to drag and drop
this right on the top of epubcheck.
| | 02:58 | This is not what you want to see.
This is actually not that bad.
| | 03:01 | What it's telling us here, in
this file page01.html, element "p" not allowed here.
| | 03:10 | We expected the element end tag,
text or element and goes da, da, da.
| | 03:17 | There is an issue with the p tag in page01.html.
| | 03:22 | And if you make your way all the way
through, it says also, there is a warning,
| | 03:27 | not an error, that it's got this weirdo
iTunesMetadata.plist file in here, which
| | 03:33 | is not declared in the OPF.
| | 03:36 | You'll get this a lot if you are
copying files off and on your iPad.
| | 03:41 | The iPad always adds this file.
| | 03:43 | You don't want it to be in there
because it's not part of the EPUB.
| | 03:46 | So this is how this funnel AppleScript
works, and then when you're done it just
| | 03:50 | says, Bother, and it makes a little text
file, so you don't have to memorize all that.
| | 03:55 | If you wanted to read it
through, you can do that.
| | 03:58 | Let's see what happens if oXygen checks it.
| | 04:01 | So we'll say, verify this EPUB. And,
again, it flagged on page01.html,
| | 04:09 | that there's a problem with the
element "p", and that there is this file
| | 04:13 | that shouldn't be there.
| | 04:15 | So if I double-click one of these,
what's nice about oXygen--and Sigil will do
| | 04:20 | the same thing--is that it
highlights where the problem is.
| | 04:23 | Can you see the problem right here? I
forgot to close the p tag, like these are closed.
| | 04:27 | So I'm going to close that
one and save the change.
| | 04:34 | No, I don't need to make a backup.
Close that, and now let's check it again.
| | 04:41 | Just that one slash got rid of all
those errors, but it still doesn't like this
| | 04:46 | plist, so I'm going to right-click here
and choose Delete, instead of having to
| | 04:50 | unpack the thing. I like this
so much better. Are you sure?
| | 04:53 | Yes, I want to delete that.
| | 04:55 | Now let's try again. And it looks good.
| | 04:58 | So let's close it and jump
back out here, and we'll try again.
| | 05:03 | I'm going to drag and drop this right on
to epubcheck. This is the one I just fixed.
| | 05:07 | This is what you want to see.
| | 05:09 | No matter which method you use--online,
Google Code, one of your apps, or this
| | 05:14 | wonderful little AppleScript--you have
to make sure that your EPUB is valid and
| | 05:19 | fix the errors before
you go on to the next step.
| | Collapse this transcript |
| Live proofing on the iPad| 00:00 | The standard method for proofing your
EPUBs is to manually add it to your iTunes
| | 00:06 | Library and then sync your
device with your iTunes Library.
| | 00:11 | If I wanted to add the latest version of
Nigel's EPUB to see how it looks on my iPad,
| | 00:17 | I would hook up my iPad so that
appears in iTunes and then I could drag and
| | 00:21 | drop that EPUB right onto the Library section
here, or I can choose File > Add to Library.
| | 00:27 | When I do that then I can come
here, out to Books, and choose Sync.
| | 00:31 | I can't do that on this computer because
this computer isn't authorized for my iPad.
| | 00:35 | But the problem with doing that is that,
first of all, it's tedious. It takes whatever.
| | 00:40 | The syncing process, you can't just say
sync just this book. It has to go through
| | 00:44 | and sync everything.
| | 00:46 | And then if it doesn't look right and
you do a new version on your desktop, you
| | 00:50 | have to repeat the whole process.
| | 00:52 | It's possible to proof iterative
versions on your iPad without anything extra;
| | 00:58 | it's just kind of a pain.
| | 00:59 | And, by the way, if you run into any
caching issues--sometimes you upload a
| | 01:03 | new version of your EPUB to the
iPad and it looks like nothing changed,
| | 01:08 | that's a cache issue.
| | 01:10 | The iPad is remembering the
previous version for some reason.
| | 01:14 | And to force it to always refresh,
what you should do is change the
| | 01:18 | modification date in the EPUB.
| | 01:21 | So if I right-click on this and choose
Open With, something that will let me
| | 01:25 | peek inside, like Springy, what you
need to update is in the content.opf, you
| | 01:32 | want to change the date.
| | 01:37 | I usually change 8 to 9, 9 to 10, 10 to
11, and so on, and that will force the
| | 01:42 | cache to refresh. Just a little tip for
you if you're using the iTunes method.
| | 01:47 | There are two other methods that I
know of that will streamline the proofing
| | 01:52 | process considerably.
| | 01:54 | One of them is this
wonderful utility called Phone Disk.
| | 01:58 | With Phone Disk installed, when I plug-in
my iPad or my iPhone, it gets mounted as
| | 02:05 | an external drive. See it
right here on my desktop?
| | 02:07 | Now you can download Phone Disk from
this URL, from macroplant.com, and it's
| | 02:14 | definitely worth the $15 or whatever it is they charge.
| | 02:18 | It's available for both Mac and Windows.
| | 02:22 | So you can see that I have it also
appearing in my sidebar here--let me make
| | 02:26 | this a larger--because now I
can see the guts of my iPad.
| | 02:31 | Unfortunately the books aren't quite
so neat. If you look in Books, everything
| | 02:35 | has been exploded. If you right-click,
you can see all of the internal files.
| | 02:40 | Now if this is a DRM to eBook--it's been
protected--then you're not going to be
| | 02:45 | able to see anything more than this.
| | 02:47 | All the internal guts of every
file will be all code and gibberish.
| | 02:53 | But here's a little tip
if you're using Phone Disk.
| | 02:55 | What I do is, first of all, I open up the
Books, and then I go to Date Modified.
| | 02:59 | And so I know if I'm looking at it from
most recent to earliest, like here are
| | 03:04 | the ones that's working on today, that
my EPUBs that I've been dragging on here
| | 03:08 | are probably one of these.
| | 03:11 | You can also open up these plist files.
As long as you don't change them, you can
| | 03:15 | open them up and look at them.
| | 03:16 | I have them open up in TextWrangler
and do a search for the name or title of
| | 03:23 | your EPUB. You will see like,
for example, here is Lost Highway:
| | 03:27 | An Arizona and New Mexico Road Trip,
and further down look for any kind of
| | 03:31 | gibberish that adds with .epub, and
so this is the code that I can find.
| | 03:36 | I look for D3AED in my Books folder,
D3AED, so here is Nigel's book.
| | 03:43 | So what's the point to this?
| | 03:44 | Well, after I get it onto the iPad,
and then I mount the iPad, now I'm just
| | 03:50 | going to edit this file.
| | 03:52 | If I need to sort of mess around with
the content, OPF, or I'm editing my CSS I
| | 03:56 | would edit this; I would not
edit the one on my desktop.
| | 04:00 | And then as long as I quit and
start iBooks again, on my iPad I can see
| | 04:04 | the latest version.
| | 04:05 | And I'll usually change that metadata
modification date or publish date that I've
| | 04:10 | just showed you, just to make
sure that the cache refreshes.
| | 04:13 | So this is a lot faster.
| | 04:15 | You make a change. You look at your iPad. You
might need to restart iBooks. But there it is.
| | 04:19 | You don't need to restart the entire iPad.
| | 04:22 | And when you're done, you can always
just select this, copy it, paste it on your
| | 04:26 | desktop, and then change the title, and
then you have your EPUB folder that you
| | 04:31 | could then recompress into an actual EPUB.
| | 04:34 | That's pretty cool.
| | 04:35 | Now if you have an in iTunes Connect
account, there's an even better way to proof
| | 04:39 | your EPUBs, because iTunes Connect
account holders can now use this Book Proofer
| | 04:45 | app that Apple lets you download
from the portal after you log in.
| | 04:49 | And with this Book Proofer app I can
just drag and drop an EPUB or a folder
| | 04:54 | containing all my EPUB files, an
exploded EPUB right, on here. And that will
| | 04:58 | sync it up with my iPad.
| | 05:00 | Every time that I then make a change on
my desktop, Book Proofer will update the
| | 05:05 | one on my iPad. It's really neat.
| | 05:09 | So those are three
methods of proofing your EPUB.
| | 05:12 | Use the good old-fashioned iTunes method,
get yourself Phone Disk, or with your
| | 05:18 | iTunes Connect account, get iBook
Proofer, and it's the latter one that I use
| | 05:21 | all the time.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 | Digital book production and EPUBs and
fixed-layout EPUB versus flowable. We are
| | 00:06 | in a very chaotic time in our industry.
| | 00:08 | We're sort of like at the Big Bang phase,
so things change weekly, if not daily,
| | 00:14 | and it's essential for you to
keep up with what's happening.
| | 00:17 | So here are some of the web sites and
resources that I recommend that you follow,
| | 00:22 | and where you can find me
if you have more questions.
| | 00:25 | First, InDesign Secrets is a blog,
podcast, eBook emporium that I co-host with
| | 00:31 | business partner David Blatner.
| | 00:33 | If you come here, you'll see many good
scripts and things that people post all
| | 00:37 | about not just InDesign, but a lot of
it having to do with digital publishing.
| | 00:41 | We have a category that's just for EPUB,
if you wanted to follow that as well.
| | 00:45 | And we put on the PEPCON: Print & ePublishing
Conference, where we talk a lot about
| | 00:50 | digital publishing.
| | 00:51 | We have a sister site called ePUBSecrets,
that is specifically focused on EPUBs.
| | 00:57 | One of the handiest ways to get help
with your EPUB issues is by going to
| | 01:02 | Twitter and doing a search for the
hashtag eProduction, that's #eprdctn.
| | 01:10 | If you have a Twitter account, you can
use something that will save that search
| | 01:14 | constantly, but even if you don't have
Twitter, go to twitter.com/search. You
| | 01:19 | can search for it, and here are where
people from all around the world who write
| | 01:23 | books or create EPUBS, this is where
they hang out, and they add that little
| | 01:27 | hashtag to all their tweets. This is wonderful.
| | 01:30 | I monitor this all the time.
| | 01:33 | My own web site is Seneca Design & Training.
| | 01:35 | I post links and good
resources here on my homepage.
| | 01:39 | I have a lot of information under
DesignGeek Resources, a little bit about me,
| | 01:42 | and then there are some forms if you
need to write to me and explain something
| | 01:46 | at length. Go ahead and use this.
| | 01:48 | Of course I have many other titles at lynda.com.
| | 01:51 | I have referred to a bunch of them
during this title, specifically the InDesign
| | 01:56 | to EPUB series that I do.
| | 01:58 | When I was talking about using PDFs, I
referred to my Acrobat Tips & Tricks and
| | 02:02 | Acrobat Essential Training. Make sure
and check those out as well. That's it!
| | 02:07 | There is a ton of information to learn,
and I hope that I was able to move you up
| | 02:11 | that information ladder with this title.
| | 02:13 | I really look forward to seeing the
kind of fixed-layout EPUBS that you create.
| | 02:18 | Please let me know when
they're up. I'd love to see them.
| | 02:19 | Thank you so much!
| | Collapse this transcript |
|
|
