Fan of creative technology, elearning, instructional design and a little geeky

Moving print publications to EPUB – Part 3

Part 3: Handling grouped illustrations

This is the third in a series of articles I’m dedicating to conversion of print publications to EPUB. The first article covered handling of content order, the second looked at controlling break points in EPUBs. I was going to dedicate the third article on text-formatting, but have decided to return to the topic of graphics for this one. I’ve written a little on how Adobe InDesign CS5 handles image quality during EPUB conversion.

One of the things I’ve not yet covered is how we can handle illustrations, such as info graphics, that are partially constructed in Adobe InDesign. I spot these types of grouped illustrations in quite a few publications created in InDesign, often in books destined for the education market. The problem with these types of graphics is that both export to EPUB based on Page Layout and XML Structure  ignore the grouping of the objects. Something that David Blatner also pointed out in a recent article on XML structure vs Page Layout. Let’s take a look at what happens to this type of InDesign content during EPUB creation, and how we can fix things.

Grouped graphics

Ok, so what’s the issue with these grouped graphics and EPUB creation from InDesign? Let’s take a look.

Below is a little cartoon type illustration, consisting of an Illustrator drawing (graphic), speech bubble shapes drawn in InDesign (unassigned objects), and two overlapping text frames. All of the illustration components have been grouped together  (Object > Group)  so that the illustration can be easily moved around the page for layout purposes as a single grouped object.

Example of grouped graphic

Whether you turn this into an inline graphic and use Page Layout as a content order source, or work with XML structure, the outcome will be similar when we export this page to EPUB from InDesign.

InDesign handles a grouped object as if it is not grouped at all… Any unassigned objects — the speech bubbles — are ignored during EPUB export. The text and graphic frames are handled as if they are individual objects. What we end up with is an illustration that has been totally broken apart, with some components missing.

Grouped artwork to EPUB image result

Not a pretty sight right?

Luckily there is an extremely easy way to fix this! Without having to redraw your artwork in Illustrator.

A little bit of magic = a fix…

The trick to turning this InDesign graphic into something that can still be edited in InDesign AND generates the intended appearance of the illustration in the EPUB is found in a fantastically clever plug-in that Martinho da Gloria of Automatication wrote for InDesign called Layout Zone. He has made this plug-in freely available. (Thanks you Martinho!).

Download and install this plug-in (the CS4/CS5 version). Once you’ve installed the plug-in:

  • Select the group with the Selection tool.
  • Choose Edit > Layout Zone > Assign Zone.

Edit, Layout Zone, Assign Zone

Note: At the time of writing Layout Zone does not support Inline Groups. So if you are using a Page Layout order for your EPUBs, you’ll need to unanchor the group first, then Assign the layout zone, and re-anchor it afterwards.

  • The Save As dialog appears.

What Layout Zone is going to do is generate a brand new InDesign document from the selected group. So you’ll need to give your InDesign illustration a name 😉

Save As dialog

  • Once you click Save, Layout Zone the Assign Zone Options dialog appears.

Assign Zone Options dialog

  • Under Save, select Selection.
  • Under Ignore, select Locked Objects (and any other Locked object types that might exist in your document).
  • My graphic doesn’t need to deal with Hanging Ascenders/Descenders so I Ignore those.
  • Bleed is also not an issues, so I leave the default values set to 0.
  • Click OK.

Layout Zone now performs its magic… replacing your previous artwork with a link to the InDesign file it has just created.

Linked InDesign graphic

oooh, how cool this is… Yes, I’m jumping up and down a little here!!!

If you need to edit the text in the speech bubbles or other parts of the illustration, simply choose Edit With > Adobe InDesign CS5 from the Links panel menu… this launches the illustration InDesign document you saved earlier in InDesign. Make the changes, save and close this file… and you’ll return to an updated version in the InDesign document that is going to be EPUBed (as that a word?).

All you need to do now is either turn this graphic into an inline/anchored object or assign its proper location in the Structure panel… and next time you Export to EPUB… (File > Export for > EPUB…), the result will make you much happier.

EPUB output linked InDesign file

How’s that for a magical solution to the ‘how to get grouped illustrations into EPUB’-problem? I ‘heart’ it 🙂 (I just can’t help myself… my ‘little geeky’-part is still jumping up and down with excitement)…

Similar posts
  • Adobe InDesign and XML: A Reference Guide The following is a reference guide I have compiled over time for those of you who are looking at doing a little more with XML in InDesign (originally published Feb. 2011, last updated Feb 2018). If you have any extra information you’d like to see added to this guide, feel free to message me. Mapping XML tags to InDesign [...]
  • How to change the colour of bullet points in InDesig... A few weeks ago I recorded a short quick tip tutorial. InDesign’s Control panel, gives users a quick and easy way to format text as a bulleted list. Highlight the text, and click the Bulleted List button in the Paragraph Formatting Controls mode for the Control panel. This applies a universal bullet character as the [...]
  • Creating a pop-up window in a PDF with Adobe InDesig... In the following YouTube tutorial, we’ll create an interactive PDF from Adobe InDesign, in which we click on a button, which in turn opens up a simple pop-up window containing a close-box. When the close-box is clicked the pop-up window disappears [...]
  • InDesign: Facing pages with odd-numbered left pages Back in 2004 I wrote a tip for InDesign CS on how you could have the first page of your document be a left page AND have it start with page number 1. It’s hard to believe this is almost a decade ago… But a recent question on Facebook, made me think I should really [...]
  • Negative Lookbehind – GREP for Designers This is the fourth and final blog-posts in a series of posts on lookaheads and lookbehinds in GREP, written after speaking at the Perth InDesign User Group. My speaker notes are also available: What is GREP? (PDF download) (2.4Mb). In the previous three posts I briefly introduced GREP, and we took a look at Positive [...]

15 Comments

  1. March 4, 2011    

    @Brian,

    Thank you 🙂 Glad you liked it. Sometimes it’s just a matter of taking the tools we’ve got and giving them a new use 😉

    Yes, not a problem at all re: the video tip. Let me know when you’ve uploaded it to your site and I’ll add a link at the end of this post as well 🙂

  2. March 4, 2011    

    Hey Cari- This is awesome!
    So psyched to find this easier workflow option! Would you mind if I created a video tip of this on my site and gave you credit for the find with a link to your site? I also want people to know about the LayoutZone add-on.

  3. November 19, 2010    

    @Jedrik and @Alfred thanks guys.

    Jedrik, I like the idea of wiki. Maybe a bunch of us EPUB-geeks can get together and set something up somewhere. I’d be more than happy to participate in that.

  4. November 19, 2010    

    Hi Cari,
    thank you for this tip. At the moment I’m really absorbing everything I can get about good ePub production with ID CS5. And you’re definitive one of the best resources. There’re so many tips and tricks that could make life much easier. Do you know if somewhere out there is a kind of wiki where we could put in all the tips and tricks and – possible more important – start do document all the bugs (like e.g. don’t put your styles into folders if you want to export a TOC)?

  5. Alfred Alfred
    November 17, 2010    

    Nice! That is just excellent.

    I used to do this the same way Anne-Marie suggested. And I always felt bad since I was replacing good printing graphics with good epub graphics. It was the one or the other. But I couldn’t have both.

    The cool thing about this is that it gets us one step closer to using the same document and still be able export both to print and epub!

  6. November 10, 2010    

    @Marcus Thank you 🙂

    Wish I had more time at times to write-up stuff 🙂 There’s still heaps of room for improvement on the ID CS5 to EPUB front. (here’s me hoping Adobe’s listening… and working hard on some updates 😉 )

    We’re all going through the same learning curve at the moment… it’s good fun 🙂 and the more of this we all share the more we all learn and know 🙂

  7. November 10, 2010    

    Hi Cari,
    That’s the stuff, nice one.
    You should also do a post about how InDesign CS5 doesn’t give you the option to keep images as “original” like CS3-CS4 did.

    And also all the things ID doesn’t add to make it validate…
    All thanks to you and Liz Castro for at documenting this mess… When I started making them, there was NO information on how to. Which meant the big Indian/XML companies had the monopoly
    /rant

  8. November 10, 2010    

    @Anne-Marie thanks 🙂 It’s definitely part of my EPUB-production and teaching toolkit as well.

  9. November 10, 2010    

    Wow, very clever.

    I had been teaching users to select the group, go to File > Export, choose JPEG, and turn on the Selection radio button to make a JPEG out of the group. Then cut the “real” group and paste into the pasteboard (for later editing/re-exporting), and finally place the JPEG as an inline graphic.

    This is much neater, thanks to Martinho’s script. I’m adding it to the EPUB toolbox I recommend for users. Thanks Cari!

  10. November 9, 2010    

    @Mike and @João Carlos : thanks guys. I gotta say I love the LayoutZone plug-in 😉

  11. November 9, 2010    

    Very clever solution! Congratulations. And thanks for sharing it.

  12. Mike Rankin Mike Rankin
    November 9, 2010    

    That. Is. Awesome. Thank you Cari! And Martinho!

  13. November 9, 2010    

    @Rufus Thank you 🙂

    @Olaf Yes, the text in the graphic will end up as part of the JPG image that InDesign generates during the EPUB conversion.

  14. November 9, 2010    

    Will the text in the graphic end up as text or as part of the image content in EPUB?

    Olaf

  15. November 9, 2010    

    This is a great use of Layout Zones!

Leave a Reply

Your email address will not be published. Required fields are marked *